ustyle 1.16.2 → 1.19.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/.drone.yml +17 -0
- data/Gruntfile.js +14 -8
- data/README.md +19 -1
- data/config/autoprefixer.yml +3 -3
- data/config/scss-lint.yml +1 -0
- data/dist/icons.svg +1 -1
- data/dist/ustyle-content.css +1 -1
- data/dist/ustyle-latest.css +1 -1
- data/dist/ustyle.js +1 -7
- data/dist/ustyle.json +1 -1
- data/dist/ustyle.min.js +1 -1
- data/index.js +7 -1
- data/lib/ustyle/version.rb +1 -1
- data/package-lock.json +56 -14
- data/package.json +14 -1
- data/styleguide/assets/images/icons.svg +1 -1
- data/styleguide/assets/sass/main.scss +1 -1
- data/styleguide/content/pattern-library/index.tpl +2 -6
- data/tasks/publish.rake +6 -4
- data/vendor/assets/images/icons.svg +1 -1
- data/vendor/assets/images/icons/alarm.svg +1 -1
- data/vendor/assets/images/icons/clock.svg +1 -1
- data/vendor/assets/images/icons/cog.svg +1 -1
- data/vendor/assets/images/icons/dual-fuel.svg +1 -1
- data/vendor/assets/images/icons/envelope.svg +1 -1
- data/vendor/assets/images/icons/facebook-brand.svg +1 -1
- data/vendor/assets/images/icons/fixed-variable.svg +1 -1
- data/vendor/assets/images/icons/gas.svg +1 -1
- data/vendor/assets/images/icons/google-brand.svg +1 -1
- data/vendor/assets/images/icons/pdf.svg +1 -1
- data/vendor/assets/images/icons/piggy-bank.svg +1 -1
- data/vendor/assets/images/icons/pound-note.svg +1 -1
- data/vendor/assets/images/icons/present.svg +1 -1
- data/vendor/assets/images/icons/renewable.svg +1 -1
- data/vendor/assets/images/icons/shield.svg +1 -0
- data/vendor/assets/images/icons/smiley.svg +1 -1
- data/vendor/assets/images/icons/sort.svg +1 -1
- data/vendor/assets/images/icons/twitter-brand.svg +1 -1
- data/vendor/assets/images/icons/twitter.svg +1 -1
- data/vendor/assets/images/icons/uswitch.svg +1 -1
- data/vendor/assets/images/icons/wiki.svg +1 -1
- data/vendor/assets/javascripts/ustyle/tabs.js +1 -1
- data/vendor/assets/stylesheets/ustyle/_all.scss +7 -0
- data/vendor/assets/stylesheets/ustyle/articles/_related.scss +5 -3
- data/vendor/assets/stylesheets/ustyle/components/_button.scss +0 -1
- data/vendor/assets/stylesheets/ustyle/components/_calculator.scss +36 -0
- data/vendor/assets/stylesheets/ustyle/components/_comp-table-row.scss +325 -0
- data/vendor/assets/stylesheets/ustyle/components/_compliance-banner.scss +33 -0
- data/vendor/assets/stylesheets/ustyle/components/_content-group.scss +1 -1
- data/vendor/assets/stylesheets/ustyle/components/_grid-classes.scss +1 -1
- data/vendor/assets/stylesheets/ustyle/components/_hero.scss +78 -5
- data/vendor/assets/stylesheets/ustyle/components/_lists.scss +5 -1
- data/vendor/assets/stylesheets/ustyle/components/_promo-banner.scss +127 -0
- data/vendor/assets/stylesheets/ustyle/components/_reminder.scss +49 -0
- data/vendor/assets/stylesheets/ustyle/components/_tab-navigation.scss +112 -0
- data/vendor/assets/stylesheets/ustyle/components/_table-toolbar.scss +91 -0
- data/vendor/assets/stylesheets/ustyle/icons/_base.scss +1 -0
- data/vendor/assets/stylesheets/ustyle/mixins/_media-query.scss +3 -13
- data/vendor/assets/stylesheets/ustyle/tables/_tables-sortable.scss +1 -1
- data/vendor/assets/stylesheets/ustyle/tables/_tables-with-key-cells.scss +1 -1
- data/vendor/assets/stylesheets/ustyle/utilities/_grid.scss +1 -1
- metadata +11 -3
- data/vendor/assets/javascripts/ustyle/radioToggle.js +0 -5
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA1:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 9374bdec1bd6cc486092cb0851978e1bffb4905d
|
|
4
|
+
data.tar.gz: 7b5f9860420afb9812544989b67075ad39ad0a2f
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: ec03a49945069f36fae17615b0b68f1f1a8111ba3b5d4ee151c39b3260285d027e700cd98af1e9d884c0b3714bdfccf66f00bba2ac95867257c525c22774ef18
|
|
7
|
+
data.tar.gz: a1fd870f747b95376b2610a1c2238edeb5fa8962df6d47abbd04da99f10e25fda71d7d4bcf0f4c11c1aad72e477355041e640899df2f6ec50c7b35ee73a8b121
|
data/.drone.yml
ADDED
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
pipeline:
|
|
2
|
+
build:
|
|
3
|
+
when:
|
|
4
|
+
event: push
|
|
5
|
+
branch: master
|
|
6
|
+
image: starefossen/ruby-node:2-8
|
|
7
|
+
commands:
|
|
8
|
+
- npm install --silent
|
|
9
|
+
- bundle install --binstubs
|
|
10
|
+
- npm run publish
|
|
11
|
+
|
|
12
|
+
publish:
|
|
13
|
+
when:
|
|
14
|
+
event: push
|
|
15
|
+
branch: master
|
|
16
|
+
image: plugins/gh-pages
|
|
17
|
+
secrets: [ github_username, github_password ]
|
data/Gruntfile.js
CHANGED
|
@@ -1,10 +1,16 @@
|
|
|
1
|
+
var browsersList = require('./package.json')['browserslist']
|
|
2
|
+
|
|
1
3
|
module.exports = function (grunt) {
|
|
2
4
|
grunt.loadNpmTasks('grunt-postcss')
|
|
3
5
|
require('load-grunt-tasks')(grunt)
|
|
4
6
|
grunt.loadTasks('grunt/tasks')
|
|
5
7
|
|
|
6
8
|
grunt.initConfig({
|
|
9
|
+
clean: ['dist', 'docs'],
|
|
7
10
|
shell: {
|
|
11
|
+
upgrade: {
|
|
12
|
+
command: 'bundle exec rake ustyle:upgrade'
|
|
13
|
+
},
|
|
8
14
|
publish: {
|
|
9
15
|
command: 'bundle exec rake ustyle:publish'
|
|
10
16
|
}
|
|
@@ -19,7 +25,7 @@ module.exports = function (grunt) {
|
|
|
19
25
|
map: false,
|
|
20
26
|
processors: [
|
|
21
27
|
require('autoprefixer')({
|
|
22
|
-
browsers:
|
|
28
|
+
browsers: browsersList
|
|
23
29
|
})
|
|
24
30
|
]
|
|
25
31
|
},
|
|
@@ -101,8 +107,7 @@ module.exports = function (grunt) {
|
|
|
101
107
|
'vendor/assets/javascripts/ustyle/backdrop.js',
|
|
102
108
|
'vendor/assets/javascripts/ustyle/overlay.js',
|
|
103
109
|
'vendor/assets/javascripts/ustyle/tabs.js',
|
|
104
|
-
'vendor/assets/javascripts/ustyle/classtoggler.js'
|
|
105
|
-
'vendor/assets/javascripts/ustyle/radioToggle.js'
|
|
110
|
+
'vendor/assets/javascripts/ustyle/classtoggler.js'
|
|
106
111
|
],
|
|
107
112
|
dest: 'dist/ustyle.js'
|
|
108
113
|
},
|
|
@@ -168,7 +173,6 @@ module.exports = function (grunt) {
|
|
|
168
173
|
'Overlay',
|
|
169
174
|
'ClassToggler',
|
|
170
175
|
'Tabs',
|
|
171
|
-
'RadioToggle',
|
|
172
176
|
'reportData'
|
|
173
177
|
]
|
|
174
178
|
},
|
|
@@ -206,19 +210,21 @@ module.exports = function (grunt) {
|
|
|
206
210
|
})
|
|
207
211
|
|
|
208
212
|
grunt.registerTask('lint', ['scsslint', 'standard'])
|
|
209
|
-
grunt.registerTask('icons', ['
|
|
213
|
+
grunt.registerTask('icons', ['svgstore'])
|
|
210
214
|
|
|
211
|
-
grunt.registerTask('build', ['sass', 'sassdoc', 'copy', 'concat:ustyle', '
|
|
215
|
+
grunt.registerTask('build', ['clean', 'sass', 'sassdoc', 'copy', 'concat:ustyle', 'concat:app', 'uglify:ustyle', 'lint', 'postcss', 'styleguide', 'builder', 'icons'])
|
|
212
216
|
|
|
213
|
-
grunt.registerTask('publish', ['env:build', 'build'
|
|
217
|
+
grunt.registerTask('publish', ['env:build', 'build'])
|
|
214
218
|
|
|
215
219
|
grunt.registerTask('publish:version', 'Build and publish ustyle version', function (version) {
|
|
216
220
|
if (version === null) {
|
|
217
221
|
grunt.warn('Version must be specified when publishing ustyle')
|
|
218
222
|
}
|
|
219
223
|
|
|
220
|
-
grunt.task.run('env:build', 'version::' + version, 'build', 'shell:
|
|
224
|
+
grunt.task.run('env:build', 'version::' + version, 'build', 'shell:upgrade')
|
|
221
225
|
})
|
|
222
226
|
|
|
227
|
+
grunt.registerTask('deploy', ['shell:publish'])
|
|
228
|
+
|
|
223
229
|
grunt.registerTask('default', ['env:dev', 'build', 'browserSync-init', 'watch'])
|
|
224
230
|
}
|
data/README.md
CHANGED
|
@@ -111,6 +111,18 @@ You can then successfully reference your icon like so:
|
|
|
111
111
|
</svg>
|
|
112
112
|
```
|
|
113
113
|
|
|
114
|
+
#### Adding a new Icon
|
|
115
|
+
|
|
116
|
+
To add a new Icon, add the SVG file to `/vendor/assets/images/icons`,
|
|
117
|
+
then add your new icon name as `@state icon` to [this
|
|
118
|
+
file](https://github.com/uswitch/ustyle/blob/new-shield-icon/vendor/assets/stylesheets/ustyle/icons/_base.scss#L19-L112).
|
|
119
|
+
|
|
120
|
+
Finally, build the optimised icons using
|
|
121
|
+
|
|
122
|
+
```sh
|
|
123
|
+
grunt icons
|
|
124
|
+
```
|
|
125
|
+
|
|
114
126
|
## Usage
|
|
115
127
|
|
|
116
128
|
### Rails / Sprockets apps
|
|
@@ -161,7 +173,13 @@ For Sass documentation on mixins/variables available to you, please see: https:/
|
|
|
161
173
|
|
|
162
174
|
## Development
|
|
163
175
|
|
|
164
|
-
To preview changes that you make to uStyle's components and documentation,
|
|
176
|
+
To preview changes that you make to uStyle's components and documentation, install dependencies with
|
|
177
|
+
|
|
178
|
+
$ npm install
|
|
179
|
+
|
|
180
|
+
$ bundle install
|
|
181
|
+
|
|
182
|
+
then run:
|
|
165
183
|
|
|
166
184
|
$ npm start
|
|
167
185
|
|
data/config/autoprefixer.yml
CHANGED
data/config/scss-lint.yml
CHANGED
data/dist/icons.svg
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg"><symbol viewBox="0 0 32 32" id="icon-alarm"><title>alarm</title><path d="M24.04 5.978c.256 0 .512-.1.707-.3l3.263-3.342c.39-.4.39-1.048 0-1.447-.39-.4-1.023-.4-1.414 0l-3.263 3.34c-.39.4-.39 1.05 0 1.45.196.19.45.29.707.29zm.68 3.592c.107.26.306.453.542.553.237.1.51.108.765 0l4.264-1.808c.51-.216.76-.815.55-1.337-.21-.522-.79-.77-1.3-.554l-4.27 1.808c-.51.216-.75.814-.54 1.337zM31 12h-4.616c-.552 0-1 .578-1 1.143 0 .283.112.455.292.64.182.186.432.217.708.217H31c.552 0 1-.434 1-1 0-.565-.447-1-1-1zM7.347 5.69c.195.2.45.3.707.3s.512-.1.707-.3c.4-.4.4-1.05 0-1.45L5.5.9C5.108.5 4.474.5 4.083.9c-.39.4-.39 1.048 0 1.447L7.347 5.69zM1.71 8.315l4.263 1.808c.255.108.53.1.765 0 .237-.1.435-.293.54-.554.212-.53-.03-1.13-.54-1.34L2.473 6.42c-.51-.214-1.095.034-1.306.556-.21.523.03 1.12.542 1.338zm4.612 5.528c.18-.185.293-.49.293-.772 0-.56-.448-1.07-1-1.07H1c-.553 0-1 .44-1 1s.448 1 1 1h4.616c.276 0 .526.03.706-.15zm21.486 11.71c0 .03-.006.05-.007.078.01.03.02.04.02.06l.01-.13h-.01zm.005.14c0-.016.01.053.01.037s-.01-.025-.01-.04v.004zm-.328-.68c-6.147-9.345-3.416-7.977-5.032-14.04-.426-1.873-1.61-3.448-3.202-4.37.18-.425.27-.89.27-1.38 0-1.99-1.57-3.607-3.52-3.607s-3.52 1.614-3.52 3.606c0 .493.1.962.28 1.39-1.5.87-2.64 2.316-3.12 4.053l-.02.072c-1.76 6.353 1.14 4.803-5.14 14.345l-.01.206c-.01.025-.03.257-.05.263-.02 0-.04-.08-.06-.04-.03.06-.052-.43-.07-.37-.047.13-.077-.13-.08-.13h.03c.037 1 .457 1 .985 1h21.62c.51 0 .92.28.977-.65-.027-.22-.116-.24-.27-.4-.02-.02-.027.09-.046.07zM16 6.783c-.84 0-1.522-.7-1.522-1.56 0-.86.683-1.56 1.522-1.56.84 0 1.522.7 1.522 1.56 0 .86-.683 1.557-1.522 1.557zm.005 24.61c1.875 0 3.394-.394 3.497-3.394h-6.994c.103 3 1.622 3.39 3.497 3.39z"/></symbol><symbol viewBox="0 0 32 32" id="icon-android"><title>android</title><path d="M27.9 10.004c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2s2-.9 2-2v-8c0-1.1-.9-2-2-2zm-24 0c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2s2-.9 2-2v-8c0-1.1-.9-2-2-2zm3 13c0 1.657 1.343 3 3 3h1v4c0 1.1.9 2 2 2s2-.9 2-2v-4h2v4c0 1.1.9 2 2 2s2-.9 2-2v-4h1c1.657 0 3-1.343 3-3v-11h-18v11zM19.606 2.8L20.872.37c.064-.122.016-.274-.106-.337s-.274-.016-.337.106L19.14 2.6c-1.008-.388-2.1-.6-3.246-.6s-2.238.215-3.245.604L11.37.14c-.063-.123-.214-.17-.336-.107-.122.063-.17.215-.106.337l1.266 2.43c-2.832 1.284-4.882 3.99-5.238 7.205h17.89c-.357-3.216-2.407-5.92-5.24-7.203zM11.9 8.455c-.8 0-1.45-.65-1.45-1.45s.65-1.45 1.45-1.45 1.45.65 1.45 1.45c0 .8-.65 1.45-1.45 1.45zm8 0c-.8 0-1.45-.65-1.45-1.45s.65-1.45 1.45-1.45c.8 0 1.45.65 1.45 1.45s-.65 1.45-1.45 1.45z"/></symbol><symbol viewBox="0 0 32 32" id="icon-arrow-circle"><title>arrow-circle</title><path d="M15.9.004c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zm10.113 16.41l-8.703 8.703c-.166.166-.575.216-.792.126-.217-.09-.518-.302-.518-.536V20H8.198c-.154 0-.11-.137-.22-.246-.108-.11.022-.333.022-.486V12.74c0-.32-.123-.74.198-.74H16V7.3c0-.234.3-.445.518-.535s.546-.04.712.126l8.743 8.71c.11.11.19.26.19.41 0 .16-.04.3-.15.41z"/></symbol><symbol viewBox="0 0 32 32" id="icon-arrow-down"><title>arrow-down</title><path d="M.3 16.7l15 15c.2.2.4.3.7.3.3 0 .5-.1.7-.3l15-15c.3-.3.4-.7.2-1.1-.1-.4-.5-.6-.9-.6h-8V1c0-.6-.8-1-1.4-1H10.4c-.3 0-.7.1-.9.3-.2.2-.5.4-.5.7v14H1c-.4 0-.8.2-.9.6-.2.4-.1.8.2 1.1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-arrow-up"><title>arrow-up</title><path d="M31.707 15.297l-15-15C16.52.11 16.265.004 16 .004c-.265 0-.52.105-.707.293l-15 15c-.286.286-.372.714-.217 1.088.155.373.52.615.924.615h8v14.004c0 .552.823.996 1.375.996h11.25c.265 0 .707-.103.895-.29.188-.19.48-.44.48-.706V17h8c.404 0 .77-.242.924-.615.155-.374.07-.802-.217-1.088z"/></symbol><symbol viewBox="0 0 32 32" id="icon-book"><title>book</title><path d="M27.026 0h-.002L7.1.56c-1.045.006-2.01.27-2.79.76-.438.278-.684.616-.943 1.003C3.06 2.78 3 3.32 3 3.848v23.61c0 .528.06 1.07.368 1.526.382.567.893 1.014 1.625 1.33.65.28 1.34.423 2.067.428l15.276 1.253c.064.006.12.01.183.01.57 0 1.27-.224 1.68-.628.4-.406.8-.948.8-1.524v-1.17l2.36-.08c1.07-.033 1.63-.898 1.63-1.97V2.13C29 .96 28.26 0 27.02 0zm-9.274 14.995c-.027 0-.054 0-.082-.003l-7.396-.607c-.543-.045-.948-.522-.904-1.065.044-.543.516-.943 1.066-.904l7.396.607c.543.045.948.522.904 1.065-.042.516-.474.907-.984.907zm2.235-3.736c-.027 0-.054-.01-.082-.01L8.04 10.28c-.543-.045-.948-.522-.904-1.065.046-.544.51-.938 1.066-.904l11.865.98c.543.05.948.52.904 1.07-.04.52-.47.91-.98.91zM26 24.74c0 .537-.296.983-.832.994l-.188.01c-.122 0 .02-.1.02-.22V7.614c0-1.125-1.013-2.144-2.135-2.243L7.158 4h-.055c-.558 0-1.008-.065-1.23-.208-.023-.015-.043.02-.06.007.063-.05.156-.09.28-.14.287-.13.652-.18 1.048-.18l17.85-.5c.64 0 1.01.52 1.01 1.15v20.6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-bookmark"><title>bookmark</title><path d="M25.412 0H6.588C6.068 0 6 .426 6 .945v30.118c0 .38.053.724.405.87.35.144.667.064.937-.204l8.702-8.75 8.724 8.74c.18.18.41.27.655.27.122 0 .062-.03.178-.07.36-.15.4-.49.4-.87V.94c0-.52-.07-.942-.58-.942z"/></symbol><symbol viewBox="0 0 32 32" id="icon-breadcrumb"><title>breadcrumb</title><path d="M21.307 15.32L13.114.714c-.377-.67-1.222-.904-1.89-.53-.667.374-.905 1.22-.53 1.888L18.508 16l-7.745 13.94c-.372.67-.13 1.515.54 1.887.213.118.444.175.672.175.487 0 .96-.258 1.214-.714l8.12-14.616c.23-.422.23-.933-.01-1.353z"/></symbol><symbol viewBox="0 0 32 32" id="icon-calculator"><title>calculator</title><path d="M27 2.22C27 .994 26.006 0 24.78 0H7.22C5.994 0 5 .994 5 2.22v27.56C5 31.006 5.994 32 7.22 32h17.56c1.226 0 2.22-.994 2.22-2.22V2.22zM12 29H8v-4h4v4zm0-6H8v-4h4v4zm0-6H8v-4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4v-4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4v-4h4v4zm0-7H8V3h16v7z"/></symbol><symbol viewBox="0 0 32 32" id="icon-calendar"><title>calendar</title><path d="M5 23h4v4H5zm6 0h4v4h-4zm6 0h4v4h-4zM5 17h4v4H5zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12-6h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM7.5 5.63c.828 0 1.5-.673 1.5-1.5V1.503c0-.828-.672-1.5-1.5-1.5S6 .676 6 1.503v2.624c0 .83.672 1.502 1.5 1.502zm17 0c.828 0 1.5-.673 1.5-1.5V1.503c0-.828-.672-1.5-1.5-1.5s-1.5.672-1.5 1.5v2.623c0 .83.672 1.502 1.5 1.502zM29 3h-1v1.13c0 1.93-1.57 3.5-3.5 3.5S21 6.06 21 4.13V3H11v1.13c0 1.93-1.57 3.5-3.5 3.5S4 6.06 4 4.13V3H3C1.343 3 0 4.57 0 6.227V28.84C0 30.5 1.343 32 3 32h26c1.657 0 3-1.502 3-3.16V6.228C32 4.57 30.657 3 29 3zm0 26H3V9h26v20z"/></symbol><symbol viewBox="0 0 32 32" id="icon-car"><title>car</title><path d="M30.326 12.646l-3.193-9.69C26.93 2.336 26.356 2 25.707 2H6.293c-.65 0-1.224.338-1.426.955l-3.193 9.73C.688 13.178 0 14.15 0 15.32v6.59c0 1.565 1 2.846 3 2.976v3.28C3 29.266 3.65 30 4.75 30h1.917C7.767 30 9 29.266 9 28.166V25h14v3.103c0 1.1 1.233 1.897 2.333 1.897h1.917c1.1 0 1.75-.797 1.75-1.897v-3.217c2-.13 3-1.41 3-2.975v-6.59c0-1.17-.688-2.18-1.674-2.67zm-23.268 7.97c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm17.884 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM4.937 12L7.38 5h17.24l2.443 7H4.937z"/></symbol><symbol viewBox="0 0 32 32" id="icon-checkbox-tick"><title>checkbox-tick</title><path d="M31.076 2.204c-9.734 5.965-16.798 13.492-19.972 17.27l-7.772-6.088L-.1 16.152l13.43 13.652c2.31-5.918 9.632-17.483 18.57-25.7l-.824-1.9z"/></symbol><symbol viewBox="0 0 32 32" id="icon-chevron-left"><title>chevron-left</title><path d="M13.462.9c-1.2 1.1-12.4 12.9-12.4 12.9-.6.6-.9 1.4-.9 2.2 0 .8.3 1.6.9 2.2 0 0 11.3 11.8 12.4 13 1.2 1.1 3.2 1.2 4.5 0 1.2-1.2 1.3-2.9 0-4.3L7.562 16l10.3-10.8c1.3-1.5 1.2-3.1 0-4.3-1.2-1.2-3.3-1.2-4.4 0z"/></symbol><symbol viewBox="0 0 32 32" id="icon-chevron-right"><title>chevron-right</title><path d="M11.6.9C12.8 2 24 13.8 24 13.8c.6.6.9 1.4.9 2.2s-.3 1.6-.9 2.2c0 0-11.3 11.8-12.4 13-1.2 1.1-3.2 1.2-4.5 0-1.2-1.2-1.3-2.9 0-4.3L17.5 16 7.2 5.2C5.9 3.7 6 2.1 7.2.9c1.2-1.2 3.3-1.2 4.4 0z"/></symbol><symbol viewBox="0 0 32 32" id="icon-clock"><title>clock</title><path d="M15.918.004c-8.837 0-16 7.164-16 16 0 8.837 7.163 16 16 16s16-7.163 16-16c0-8.836-7.163-16-16-16zm0 29c-7.16 0-12.985-5.832-12.985-13s5.825-13 12.985-13c7.16 0 12.985 5.832 12.985 13s-5.825 13-12.985 13zm1.264-13.557l-.03-8.282c0-.69-.564-1.165-1.256-1.165h-.004c-.694 0-1.254.483-1.253 1.173l.03 8.938c0 .4.19.71.47.94.05.05.08.11.14.15l5.88 4.16c.22.16.47.23.72.23.39 0 .78-.18 1.02-.53.403-.56.27-1.34-.294-1.74l-5.45-3.86z"/></symbol><symbol viewBox="0 0 32 32" id="icon-close"><title>close</title><path d="M16 .004c-8.836 0-16 7.163-16 16s7.164 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zm8 21.172l-2.828 2.828L16 18.834l-5.172 5.17L8 21.177l5.172-5.172L8 10.832l2.828-2.828L16 13.176l5.172-5.172L24 10.832l-5.172 5.172L24 21.176z"/></symbol><symbol viewBox="0 0 32 32" id="icon-cog"><title>cog</title><path d="M31.31 13.274l-3.698-1.207-.63-1.52L28.67 6.98c.18-.38.102-.834-.197-1.133L26.06 3.433c-.307-.307-.775-.38-1.16-.185L21.43 5.01l-1.52-.63L18.58.667c-.146-.4-.523-.667-.945-.667H14.22c-.432 0-.815.28-.95.692l-1.206 3.7-1.52.63-3.567-1.684c-.38-.18-.836-.1-1.134.197L3.43 5.95c-.308.305-.382.773-.186 1.16l1.763 3.47-.63 1.518-3.714 1.33c-.397.142-.663.52-.663.94v3.415c0 .433.278.816.69.95l3.7 1.208.628 1.52-1.685 3.57c-.18.38-.102.84.197 1.14l2.413 2.42c.306.31.775.38 1.16.19l3.47-1.77 1.52.63 1.33 3.71c.143.4.52.67.942.67h3.414c.43 0 .81-.273.95-.69l1.2-3.693 1.52-.63 3.56 1.68c.38.18.83.1 1.13-.2l2.41-2.414c.302-.304.38-.77.182-1.16l-1.764-3.47.63-1.52 3.713-1.33c.397-.142.663-.52.663-.94v-3.42c0-.432-.28-.816-.69-.95zM16 20.597c-2.532 0-4.593-2.06-4.593-4.593 0-2.532 2.06-4.593 4.594-4.593 2.54 0 4.6 2.07 4.6 4.6s-2.06 4.6-4.59 4.6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-controller"><title>controller</title><path d="M30.2 9.6H1.9c-1 0-1.9.7-1.9 1.8v9.2c0 1 .9 1.9 1.9 1.9h28.2c1.1 0 1.9-.9 1.9-2v-9.2c.1-1-.8-1.7-1.8-1.7zM9.7 16.7H7.8v1.8H6.3v-1.9H4.4v-1.5h1.9v-1.9h1.5v1.9h1.9v1.6zm12.2.9c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5c0 .9-.7 1.5-1.5 1.5zm4.9-.9c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5z"/></symbol><symbol viewBox="0 0 32 32" id="icon-credit-card"><title>credit-card</title><path d="M32 6.997C32 5.342 30.658 4 29.003 4H2.997C1.342 4 0 5.342 0 6.997v18.005C0 26.658 1.342 28 2.997 28h26.005C30.658 28 32 26.658 32 25.003V6.997zM29 25H3V15h26v10zm0-15H3V7h26v3zM5.96 23h3c.552 0 1-.448 1-1s-.448-1-1-1h-3c-.55 0-.998.448-.998 1s.447 1 1 1zm6.995 0h7.993c.552 0 1-.448 1-1s-.448-1-1-1h-7.993c-.552 0-1 .448-1 1s.448 1 1 1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-cross"><title>cross</title><path d="M26.5 9.61l-4.106-4.106L16 11.898 9.606 5.504 5.5 9.61l6.394 6.394L5.5 22.398l4.106 4.106L16 20.11l6.394 6.394 4.106-4.106-6.394-6.394z"/></symbol><symbol viewBox="0 0 32 32" id="icon-dashcam"><title>dashcam</title><g transform="translate(0 5)"><circle cx="16" cy="9" r="5"/><path d="M11.506 18H7.992C3.578 18 0 14.422 0 10V8c0-4.418 3.578-8 7.992-8h16.016C28.422 0 32 3.578 32 8v2c0 4.418-3.578 8-7.992 8h-3.514C21.43 19.046 22 20.42 22 21.927H10c0-1.506.57-2.88 1.506-3.927zM16 16c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7z"/></g></symbol><symbol viewBox="0 0 32 32" id="icon-dual-fuel"><title>dual-fuel</title><path d="M13.166 15.992c-.277-.99-.152-2.03.353-2.93.14-.25.31-.475.5-.684-.4-.432-.7-.955-.86-1.542-.28-.99-.15-2.03.35-2.93.03-.065.08-.12.12-.182-.71-.997-1.47-1.93-2.29-2.78-1.08-1.13-2.25-2.137-3.47-3.032-.5-.366-1.01-.715-1.53-1.045-.4-.255-.79-.51-1.2-.74-.18-.1-.39-.168-.58-.08-.06.027-.11.068-.158.12-.02.023-.035.047-.05.073-.158.253-.136.614-.083.93.3 1.776.12 3.965-.16 5.735-.437 2.774-1.356 5.403-2.55 7.783C.012 17.806-.35 21.702.32 25.183c.502 2.625 2.087 4.616 4.093 5.843-.06-.094-.128-.183-.18-.285-1.488-2.82-.444-6.08.794-8.69.633-1.33 1.36-2.62 1.93-3.99.283-.68.502-1.42.64-2.17.114-.63.158-1.37.085-2.01-.026-.23 0-.51.163-.62.084-.05.184-.04.276-.02.56.13 1.04.63 1.49 1.03.56.49 1.07 1.05 1.54 1.66.49.63.93 1.31 1.34 2.01 1.78 3.11 2.11 7.14 1.2 10.65-.32 1.24-.87 2.528-1.7 3.45 2.19-.708 3.61-2.18 4.54-4.17C15.62 27.1 15 26 15 24.767V23.16c0-1.464 1-2.747 2-3.444V18.9c0-.04-.185-.072-.268-.09-1.683-.048-3.12-1.196-3.566-2.818zm18.77-5.24c-.276-.986-1.297-1.562-2.283-1.287L16.377 13.17c-.984.273-1.56 1.298-1.285 2.283.226.82.972 1.453 1.783 1.453.02 0 .043.094.063.094h.016c.08 0 .863.118 1.523.53.22.136.413.47.588.47H19v2h3v-2.142c0-.36-.395-.69-.588-.98-.26-.393-.61-.718-.92-.99l6.098-1.71 1.075.983c-.074.04-.156.08-.23.13-.597.35-1.207.97-1.83 1.6-.132.13-.605.5-.605.98V21h-5.893C18.002 21 17 22.056 17 23.16v1.6c0 1.106 1 2 2 2v2.244C19 30.66 20.45 32 22.107 32h2.844c1.66 0 3.05-1.34 3.05-2.996v-2.246c1-.017 2-.903 2-1.997v-1.6c0-1.1-.97-2.16-2.08-2.16H28v-3.14c0-.36.76-.63 1.183-.79.265-.1.498-.17.67-.21.084-.02.144-.03.185-.03h.036c.46-.05.847-.37.99-.81.14-.44.008-.92-.334-1.23l-1.477-1.33 1.395-.39c.986-.272 1.56-1.295 1.287-2.28zm-16.17-4.627c.315.237.705.37 1.11.37.164 0 .332-.022.5-.068l9.883-2.734c.12-.035.24-.08.35-.137.21-.113.4-.266.56-.447.07-.1.14-.19.2-.3.11-.21.19-.44.22-.68.03-.24.01-.49-.06-.74-.05-.19-.14-.35-.24-.51l-.06-.09c-.1-.14-.22-.268-.36-.37L27.8.37c-.144-.1-.297-.185-.463-.242 0-.005-.004-.007-.007-.007-.17-.05-.346-.08-.527-.08-.02 0-.04-.01-.06-.01-.02 0-.036.01-.05.01-.15.01-.3.02-.45.067L16.37 2.85c-.983.275-1.56 1.298-1.286 2.286.115.41.36.748.675.985zm-.674 4.17c.226.82.972 1.36 1.783 1.36.164 0 .33-.024.498-.07L30.648 7.88c.986-.274 1.56-1.296 1.287-2.282-.275-.988-1.296-1.565-2.282-1.29L16.377 8.012c-.984.277-1.56 1.3-1.285 2.286z"/></symbol><symbol viewBox="0 0 32 32" id="icon-electric-light"><title>electric-light</title><path d="M7.567 10.265c.227.822.973 1.36 1.785 1.36.164 0 .332-.023.498-.07l13.294-3.708c.988-.276 1.563-1.3 1.29-2.287-.276-.99-1.3-1.567-2.286-1.29L8.854 7.976c-.985.276-1.563 1.3-1.287 2.288zM9.354 6.46c.164 0 .332-.023.498-.07l9.9-2.737c.987-.277 1.563-1.3 1.288-2.29-.274-.987-1.298-1.566-2.285-1.29l-9.9 2.74c-.985.274-1.563 1.3-1.29 2.288.23.82.977 1.36 1.79 1.36zM22.15 9.433l-13.296 3.71c-.985.274-1.563 1.3-1.287 2.286.227.82.973 1.46 1.785 1.46.022 0 .043.1.064.1h.016c.08 0 .864.11 1.525.53.22.13.413.47.59.47H12v2h2v-2.16c0-.36-.153-.69-.347-.98-.26-.4-.49-.72-.8-1l6.167-1.71 1.107.98c-.075.04-.14.08-.216.12-.59.35-1.08.86-1.56 1.59-.19.29-.34.62-.34.98V21H11.6c-1.12 0-1.6 1.04-1.6 2.148v1.604c0 1.106 0 2.003 2 2.003V29c0 1.66.932 3 2.592 3h2.848C19.1 32 20 30.66 20 29v-2.25c2-.016 2-.903 2-2v-1.603C22 22.04 21.52 21 20.413 21H20v-3.163c1-.365 1.008-.63 1.432-.797.265-.107.622-.172.793-.21.085-.02.207-.03.248-.038.018-.003.06-.005.066-.006.46-.05.86-.372 1-.813.14-.442.01-.928-.33-1.24L21.74 13.4l1.4-.39c.987-.274 1.563-1.3 1.29-2.287-.276-.99-1.3-1.566-2.285-1.29z"/></symbol><symbol viewBox="0 0 32 32" id="icon-envelope"><title>envelope</title><path d="M31.562 4.464c-.377-.626-.974-1.098-1.685-1.317C29.597 3.062 29.307 3 29 3H3c-.307 0-.598.062-.877.148-.712.22-1.308.69-1.685 1.316C.166 4.914 0 5.44 0 6.004v20c0 .307.06.598.146.877.22.72.688 1.31 1.313 1.69.45.27.97.44 1.54.44h26c.56 0 1.09-.16 1.54-.43.62-.38 1.09-.97 1.31-1.68.08-.28.14-.57.14-.87v-20c0-.563-.17-1.09-.44-1.54zM27.022 6L19 14.024l-1.5 1.5-.793.795c-.39.39-1.023.39-1.414 0l-.793-.8-1.5-1.5L4.978 6H27.02zM3 7.026l8.5 8.5-8.5 8.5v-17zM4.02 26L13 17.024l1.586 1.587c.78.79 2.047.79 2.828.01L19 17.03 27.978 26H4.02zM29 24.026l-8.5-8.5 8.5-8.5v17z"/></symbol><symbol viewBox="0 0 32 32" id="icon-exit-noexit"><title>exit-noexit</title><path d="M7.874 16.004c4.388 0 7.945-3.582 7.945-8s-3.56-8-7.95-8c-4.39 0-7.95 3.582-7.95 8s3.55 8 7.94 8zM4.636 7.388l1.576 1.604 4.9-4.988 1.48 1.505L6.212 12 3.157 8.89l1.48-1.506zM31.176.51c-.592-.595-1.552-.595-2.143 0L.343 29.4c-.59.595-.59 1.56 0 2.157.297.298.685.446 1.073.446.388 0 .776-.148 1.072-.446L31.176 2.67c.59-.597.59-1.564 0-2.16zm.724 19.427l-2.932-2.932-4.568 4.567-4.567-4.567-2.933 2.932 4.567 4.567L16.9 29.07l2.933 2.934 4.567-4.567 4.568 4.567L31.9 29.07l-4.567-4.566z"/></symbol><symbol viewBox="0 0 31.99 32" id="icon-facebook-brand"><title>facebook-brand</title><path d="M30.23 0H1.77A1.77 1.77 0 0 0 0 1.77v28.46A1.77 1.77 0 0 0 1.77 32h15.32V19.61h-4.17v-4.83h4.17v-3.56c0-4.13 2.52-6.39 6.21-6.39A34 34 0 0 1 27 5v4.34h-2.53c-2 0-2.39 1-2.39 2.35v3.08h4.78l-.63 4.83h-4.16V32h8.15A1.77 1.77 0 0 0 32 30.23V1.77A1.76 1.76 0 0 0 30.23 0" fill="#3b5999"/></symbol><symbol viewBox="0 0 32 32" id="icon-facebook"><title>facebook</title><path d="M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16S24.837 0 16 0zm4 11h-1.546C17.32 11 17 11.733 17 12.524V14h2.905l-.352 3H17v7h-3v-7h-2v-3h2v-1.746c0-2.337 1.618-3.61 3.703-3.61 1 0 2.026.074 2.297.108V11z"/></symbol><symbol viewBox="0 0 32 32" id="icon-filter"><title>filter</title><path d="M30.5 15h-2.714c-.542-2-2.014-2.7-3.765-2.7-1.75 0-3.22.7-3.76 2.7H1.5c-.828 0-1.5.672-1.5 1.5 0 .83.672 1.5 1.5 1.5h18.912c.64 1 2.01 2.3 3.61 2.3 1.598 0 2.968-1.3 3.608-2.3h2.87c.828 0 1.5-.67 1.5-1.5 0-.828-.672-1.5-1.5-1.5zm0 10H11.786c-.542-2-2.014-2.7-3.765-2.7-1.75 0-3.22.7-3.76 2.7H1.5c-.828 0-1.5.672-1.5 1.5 0 .83.672 1.5 1.5 1.5h2.912c.64 1 2.01 2.3 3.61 2.3 1.598 0 2.968-1.3 3.608-2.3H30.5c.828 0 1.5-.67 1.5-1.5 0-.828-.672-1.5-1.5-1.5zM1.5 8h8.912c.64 1 2.01 2.3 3.61 2.3C15.62 10.3 16.99 9 17.63 8H30.5c.828 0 1.5-.67 1.5-1.5 0-.828-.672-1.5-1.5-1.5H17.786c-.542-2-2.014-2.7-3.765-2.7-1.75 0-3.22.7-3.76 2.7H1.5C.672 5 0 5.672 0 6.5 0 7.33.672 8 1.5 8z"/></symbol><symbol viewBox="0 0 32 32" id="icon-fixed-variable"><title>fixed-variable</title><path d="M30.833.53c-.58-.594-1.52-.594-2.1 0L.636 29.406c-.58.595-.58 1.562 0 2.157.29.298.67.446 1.05.446s.76-.15 1.05-.45L30.833 2.69c.58-.595.58-1.562 0-2.157zm1.27 26.44c-.05-.12-.163.03-.29.03H30v-5.478c0-.177-.93-.522-1.1-.522h-3.5c-.082 0-.206.135-.264.195-.058.06-.136.242-.136.327V27h-2.514c-.126 0-.24-.15-.287-.03-.05.12-.03.03.06.123l4.66 4.793c.05.06.13.094.22.094s.16-.034.22-.094l4.66-4.793c.09-.092.11-.003.07-.122zm-8.395-2.01c.058-.06.292-.086.292-.17V20h2.202c.126 0 .24-.196.287-.315.04-.12.02-.375-.07-.466l-4.67-4.8c-.06-.06-.14-.1-.22-.1-.08 0-.16.03-.22.09l-4.67 4.79c-.09.09-.12.34-.07.46.05.12.16.31.28.31H20v4.79c0 .173-.383.21-.21.21h3.497c.083 0 .363.02.42-.04zM1.9 16h10c.825 0 1.1-.675 1.1-1.5V9c0-.825-.275-1-1.1-1H11V4.5C11 2.02 8.98 0 6.5 0S2 2.02 2 4.5V8c-1 0-2 .175-2 1v5.5c0 .825 1.075 1.5 1.9 1.5zM4 4.5C4 3.12 5.12 2 6.5 2S9 3.12 9 4.5V8H4V4.5z"/></symbol><symbol viewBox="0 0 32 32" id="icon-gas"><title>gas</title><path d="M26.616 15.188c-1.317-4.09-4.083-7.55-7.437-10.244-1.41-1.132-2.92-2.138-4.5-3.033-.65-.36-1.31-.71-1.98-1.04-.51-.26-1.01-.51-1.54-.74-.24-.1-.51-.17-.75-.08-.08.03-.14.07-.2.12-.03.02-.05.05-.07.08-.21.25-.18.61-.11.93.38 1.78.15 3.97-.21 5.74-.57 2.778-1.76 5.407-3.3 7.787-2.02 3.12-2.49 7.01-1.62 10.493.65 2.622 2.7 4.613 5.29 5.84-.07-.095-.16-.184-.23-.286-1.92-2.82-.57-6.08 1.03-8.69.813-1.336 1.753-2.62 2.49-3.99.364-.684.65-1.42.823-2.173.144-.63.2-1.37.11-2.01-.037-.23 0-.51.21-.62.11-.05.24-.043.355-.02.72.13 1.34.625 1.92 1.025.72.49 1.38 1.045 1.995 1.654.63.63 1.2 1.307 1.72 2.01 2.3 3.11 2.722 7.136 1.546 10.644-.417 1.24-1.13 2.52-2.2 3.44 4.702-1.18 6.92-4.46 7.4-8.777.3-2.7.08-5.45-.76-8.04z"/></symbol><symbol viewBox="0 0 32 32" id="icon-gauge"><title>gauge</title><path d="M16 .004c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zm-1 4.063c0-.553.447-1 1-1 .553 0 1 .447 1 1v1.875c0 .553-.447 1-1 1-.553 0-1-.447-1-1V4.067zm-4.91 5.635c-.385.396-1.017.404-1.413.02L7.334 8.41c-.396-.382-.404-1.014-.02-1.41.387-.397 1.02-.406 1.415-.02l1.34 1.308c.39.386.4 1.018.02 1.414zm1.43-2.598l-.79-1.7c-.234-.5-.018-1.095.483-1.33.5-.232 1.095-.016 1.33.485l.79 1.7c.234.5.018 1.09-.483 1.32-.502.23-1.096.01-1.33-.49zm7.555 17.386c-.613 1.552-2.368 2.312-3.92 1.7-1.552-.614-2.445-2.37-1.83-3.92.333-.848.675-1.447 1.675-1.728v-8.91c0-.553.447-1 1-1 .553 0 1 .447 1 1v8.906c0 .013.207.017.244.03 1.55.615 2.444 2.37 1.83 3.922zm2.727-19.085l-.792 1.7c-.233.5-.828.718-1.33.484-.5-.24-.717-.83-.483-1.33l.792-1.7c.23-.5.82-.72 1.32-.49.5.23.72.82.48 1.33zm3.395 3.008L23.854 9.72c-.396.387-1.03.378-1.414-.018s-.377-1.03.02-1.414L23.8 6.98c.396-.386 1.03-.377 1.414.02.386.395.378 1.027-.02 1.413z"/></symbol><symbol viewBox="0 0 32 32" id="icon-github"><title>github</title><path fill-rule="evenodd" fill="#221E1B" d="M16 0C7.2 0 0 7.3 0 16.4 0 23.7 4.6 29.8 10.9 32c.8.2 1.1-.4 1.1-.8v-2.8c-4.5 1-5.4-2.2-5.4-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.4 2.5 3.7 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.3-1.8-7.3-8.1 0-1.8.6-3.3 1.6-4.4-.2-.4-.7-2.1.2-4.3 0 0 1.3-.4 4.4 1.7 1.3-.4 2.6-.5 4-.6 1.4 0 2.7.2 4 .6 3.1-2.1 4.4-1.7 4.4-1.7.9 2.3.3 3.9.2 4.3 1 1.1 1.6 2.6 1.6 4.4 0 6.3-3.7 7.7-7.3 8.1.6.5 1.1 1.5 1.1 3v4.5c0 .4.3.9 1.1.8C27.4 29.8 32 23.7 32 16.4 32 7.3 24.8 0 16 0z"/></symbol><symbol viewBox="0 0 31.36 32" id="icon-google-brand"><title>google-brand</title><path d="M31.36 16.36a18.49 18.49 0 0 0-.29-3.27H16v6.19h8.61a7.35 7.35 0 0 1-3.19 4.83v4h5.17a15.6 15.6 0 0 0 4.77-11.76z" fill="#4285f4"/><path d="M16 32a15.28 15.28 0 0 0 10.59-3.88l-5.17-4A9.66 9.66 0 0 1 7.05 19H1.68v4.14A16 16 0 0 0 16 32z" fill="#34a853"/><path d="M7.05 19a9.46 9.46 0 0 1 0-6.08V8.81H1.68a16 16 0 0 0 0 14.37z" fill="#fbbc05"/><path d="M16 6.36a8.64 8.64 0 0 1 6.12 2.39l4.56-4.58A15.39 15.39 0 0 0 16 0 16 16 0 0 0 1.68 8.81L7.05 13A9.54 9.54 0 0 1 16 6.36z" fill="#ea4335"/></symbol><symbol viewBox="0 0 32 32" id="icon-google"><title>google</title><path d="M16 0C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0zm-4.2 23.4c-4.1 0-7.4-3.3-7.4-7.4s3.3-7.4 7.4-7.4c2 0 3.7.7 5 1.9l-2 1.9c-.5-.5-1.5-1.2-3-1.2-2.4 0-4.6 2.1-4.6 4.7s2 4.7 4.6 4.7c3 0 4-2.1 4.2-3.2h-4.2V15h7c0 .4.1.7.1 1.3 0 4.1-2.9 7.1-7.1 7.1zm13.8-6.3v2.1h-2.1v-2.1h-2.1V15h2.1v-2.1h2.1V15h2.1v2.1h-2.1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-graph-up"><title>graph-up</title><path d="M10 17.336V32h5V19.065l-3.362-3.375zm7 3.576V32h5V15.895l-3.662 3.675zm6.903-7.124L23.9 31.976l5.1.028V8.837l-.375.31zm-19.597 9.42L3 24.372V32h5V20h-.358zM31.486 0h-8.054c-.44 0-.662.534-.35.846l2.635 2.644.015.016-9.006 9.04-5.28-5.303L0 18.75l2.795 2.805 8.65-8.7 5.282 5.304.08-.08 3.653-3.67 8.067-8.1 2.61 2.61c.315.31.863.09.863-.36V.5c0-.272-.237-.5-.513-.5z"/></symbol><symbol viewBox="0 0 32 32" id="icon-home"><title>home</title><path d="M31.407 15.023L26 9.885V2h-4v3.79L16.776.39c-.516-.514-1.334-.514-1.85 0L.292 15.023c-.393.392-.486.8-.273 1.313.21.513.74.664 1.29.664H3v13H1.977c-.575 0-1.04.427-1.04 1s.465 1 1.04 1H30.17c.574 0 1.04-.427 1.04-1s-.466-1-1.04-1H29V17h1.684c.557 0 .933-.15 1.147-.664.22-.513-.03-.92-.42-1.313zM14 30H8V17h6v13zm10-7h-6v-6h6v6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-hot"><title>hot</title><path d="M17 19.195v-7.93c0-.666-.337-1.205-1-1.205-.66 0-1 .538-1 1.205v7.93c-2 .517-3.03 2.1-3.03 3.973 0 2.294 1.8 4.154 4.08 4.154 2.28 0 4.003-1.86 4.003-4.154 0-1.873-1.053-3.456-3.053-3.973zm5-2.923V5.526C22 2.48 19.025.004 16 .004c-3.026 0-6 2.477-6 5.522v10.746c-2 1.66-3.038 4.19-3.038 6.896 0 4.872 4.068 8.836 8.91 8.836 4.84 0 9.1-3.963 9.1-8.836 0-2.705-.972-5.236-2.972-6.896zm-6 13.32c-3.526 0-6.34-2.874-6.34-6.423 0-2.42 1.34-4.53 3.34-5.63V5.52c0-1.72 1.294-3.11 3-3.11 1.707 0 3 1.397 3 3.11v12.03c2 1.094 3.338 3.2 3.338 5.617 0 3.55-2.81 6.425-6.338 6.425z"/></symbol><symbol viewBox="0 0 32 32" id="icon-info"><title>info</title><path d="M15.9.004c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM13.792 5.54c.534-.494 1.17-.74 1.91-.74s1.374.246 1.903.74c.53.492.794 1.085.794 1.78 0 .693-.27 1.284-.81 1.772s-1.17.732-1.9.732c-.74 0-1.38-.244-1.91-.732s-.8-1.08-.8-1.773c0-.7.26-1.29.8-1.78zM20 26h-8v-1.008c0-.018.343-.04.57-.068.23-.027.362-.073.526-.137.292-.11.553-.267.67-.472.12-.206.234-.477.234-.815v-7.968c0-.32-.16-.6-.306-.842s-.372-.436-.59-.582c-.165-.11-.137-.214-.47-.315-.333-.1-.634-.163-.634-.19v-1l6.25-.356-.25.205v10.87c0 .32.227.59.364.815.137.224.412.39.668.5.183.082.224.155.443.22.22.062.525.108.525.135V26z"/></symbol><symbol viewBox="0 0 32 32" id="icon-kettle"><title>kettle</title><path d="M31.983 26c0-3.997-1.984-7.12-3.983-9.62v-5.855c0-5.8-4.65-10.52-10.5-10.52S7 4.723 7 10.525v5.855c0 .283-.44.575-.672.878l-1.16-1.18c-.78-.774-2.03-.774-2.81 0L.592 17.834c-.78.774-.777 2.028.004 2.802l3.055 3.132c.6.86.35 6.253.35 6.253 0 1.1.37 1.98 1.48 1.98h24.51c1.1 0 2.01-.88 2.01-1.97v-3.97c0-.04 0-.05-.01-.06zM14.815 10.67c0 .447.053.865.235 1.242-1.806.337-3.05 1.006-5.05 1.948v-3.336c0-4.162 3.302-7.55 7.5-7.55S25 6.36 25 10.524v3.336c-1-.942-3.015-1.61-4.82-1.95.18-.376.377-.794.377-1.24 0-1.596-1.262-2.89-2.87-2.89s-2.872 1.295-2.872 2.89zM28.237 29H25v-4.84c0-2.842-3.52-8.2-6.61-8.623 6.635.294 9.932 5.245 9.9 8.74-.033 3.495-.053 4.723-.053 4.723z"/></symbol><symbol viewBox="0 0 32 32" id="icon-key"><title>key</title><path d="M32 25.774c.01-.175-.054-.346-.178-.47L19.714 13.197c1.118-3.49.3-7.464-2.468-10.233C13.3-.98 6.904-.98 2.96 2.964-.987 6.91-.987 13.306 2.96 17.25c2.768 2.77 6.74 3.587 10.23 2.47l1.755 1.755c.12.12.284.183.454.177l4.78-.187L20 26.14c-.012.34.293.648.63.63l4.676-.18-.185 4.79c0 .17.06.333.18.452.16.146.3.187.47.176l5.67.002c.31-.02.55-.263.57-.565V25.78zM9.663 9.668C8.43 10.9 6.433 10.9 5.2 9.668s-1.234-3.232 0-4.465 3.23-1.233 4.464 0 1.233 3.233 0 4.465z"/></symbol><symbol viewBox="0 0 32 32" id="icon-lock"><title>lock</title><path d="M25.9 15H25V9.004c0-4.963-4.037-9-9-9s-9 4.037-9 9V15H5.9C4.25 15 3 16.354 3 18.004v11C3 30.654 4.25 32 5.9 32h20c1.65 0 3.1-1.346 3.1-2.996v-11C29 16.354 27.55 15 25.9 15zM11 9.004c0-2.76 2.24-5 5-5s5 2.24 5 5V15H11V9.004z"/></symbol><symbol viewBox="0 0 32 32" id="icon-magnify-in"><title>magnify-in</title><path d="M15 6h-4v5H6v3h5v5h4v-5h4v-3h-4zm16.415 20.99l-.193-.192-7.69-7.722c1.067-1.848 1.688-4 1.703-6.29C25.28 5.773 19.655 0 12.675 0h-.085C5.647 0-.005 5.438-.05 12.42-.092 19.43 5.53 25 12.513 25h.083c2.32 0 4.496-.428 6.367-1.526l7.684 7.817c.192.2.193.25.193.25.58.59 1.522.61 2.103.03l2.472-2.47c.58-.58.58-1.51 0-2.1zM19.23 19.338C17.455 21.11 15.098 22 12.596 22h-.062c-5.193 0-9.39-4.347-9.358-9.56C3.208 7.26 7.432 3 12.59 3h.064c2.516 0 4.875 1.144 6.642 2.94 1.767 1.798 2.732 4.2 2.716 6.728-.017 2.514-1.004 4.898-2.78 6.67z"/></symbol><symbol viewBox="0 0 32 32" id="icon-magnify"><title>magnify</title><path d="M31.415 26.982l-.193-.193-7.69-7.73c1.067-1.85 1.688-4 1.703-6.29.045-7-5.58-12.77-12.56-12.77h-.084C5.65 0 0 5.43-.05 12.42-.092 19.43 5.53 25 12.513 25h.083c2.32 0 4.673-.433 6.544-1.53L27 31.288v.047l.015.217c.58.584 1.435.595 2.016.012l2.43-2.475c.58-.59.54-1.53-.04-2.11zm-12.184-7.65C17.46 21.106 15.1 22 12.6 22h-.062c-5.193 0-9.39-4.347-9.358-9.56C3.208 7.26 7.432 3 12.59 3h.064c2.516 0 4.875 1.14 6.642 2.936 1.767 1.797 2.732 4.2 2.716 6.727-.017 2.515-1.004 4.898-2.78 6.67z"/></symbol><symbol viewBox="0 0 32 32" id="icon-menu"><title>menu</title><path d="M29.5 13h-27C1.12 13 0 14.343 0 16s1.12 3 2.5 3h27c1.38 0 2.5-1.343 2.5-3s-1.12-3-2.5-3zm0 10h-27C1.12 23 0 24.343 0 26s1.12 3 2.5 3h27c1.38 0 2.5-1.343 2.5-3s-1.12-3-2.5-3zM2.5 9h27C30.88 9 32 7.657 32 6s-1.12-3-2.5-3h-27C1.12 3 0 4.343 0 6s1.12 3 2.5 3z"/></symbol><symbol viewBox="0 0 32 32" id="icon-message"><title>message</title><path d="M28.7 1H3.1C1.333 1 0 3.104 0 4.87v16C0 22.64 1.333 24 3.1 24H5v5.05s-.18 1.155.67 1.56c1.067.503 2.032-.346 2.032-.346L13.85 24H28.7c1.767 0 3.3-1.362 3.3-3.13v-16C32 3.105 30.468 1 28.7 1zm.3 19.87c0 .11-.19.13-.3.13H12.697L8 25.877V21H3.1c-.11 0-.1-.02-.1-.13v-16c0-.11-.01-.87.1-.87h25.6c.11 0 .3.76.3.87v16zM23.915 14H7.885c-.768 0-1.39.73-1.39 1.5s.622 1.5 1.39 1.5h16.03c.77 0 1.392-.73 1.392-1.5s-.623-1.5-1.392-1.5zm0-6H7.885c-.768 0-1.39.73-1.39 1.5s.622 1.5 1.39 1.5h16.03c.77 0 1.392-.73 1.392-1.5S24.684 8 23.915 8z"/></symbol><symbol viewBox="0 0 32 32" id="icon-mobile"><title>mobile</title><path d="M25 2.836C25 1.27 23.73 0 22.164 0H9.836C8.27 0 7 1.27 7 2.836v26.33C7 30.73 8.27 32 9.836 32h12.33C23.73 32 25 30.73 25 29.164V2.836zM12.898 2H18.9c.498 0 .9.504.9 1s-.402 1-.898 1H12.9c-.498 0-.9-.504-.9-1s.402-1 .898-1zM15.9 30.372c-.832 0-1.512-.68-1.512-1.512 0-.83.68-1.512 1.512-1.512s1.512.68 1.512 1.512-.68 1.512-1.512 1.512zM23 26H9V5h14v21z"/></symbol><symbol viewBox="0 0 32 32" id="icon-monthly-dd"><title>monthly-dd</title><path d="M7.5 5.625c.828 0 1.5-.672 1.5-1.5V1.5C9 .672 8.328 0 7.5 0S6 .672 6 1.5v2.623c0 .83.672 1.502 1.5 1.502zm17 0c.828 0 1.5-.672 1.5-1.5V1.5c0-.828-.672-1.5-1.5-1.5S23 .672 23 1.5v2.623c0 .83.672 1.502 1.5 1.502zM29 3h-1v1.125c0 1.93-1.57 3.5-3.5 3.5s-3.5-1.57-3.5-3.5V3H11v1.125c0 1.93-1.57 3.5-3.5 3.5S4 6.055 4 4.125V3H3C1.343 3 0 4.567 0 6.223v22.614C0 30.494 1.343 32 3 32h26c1.657 0 3-1.506 3-3.163V6.223C32 4.567 30.657 3 29 3zm0 26H3V9h26v20zM15 19c0-2.977-.83-5-3.94-5H7v10h4.06c3.11 0 3.94-2.054 3.94-5zm-6 3v-6h1.31c1.62 0 2.69 1.288 2.69 3 0 1.71-1.07 3-2.69 3H9zm16-3c0-2.977-1.113-5-4.224-5H17v10h3.776C23.886 24 25 21.946 25 19zm-6 3v-6h1.31c1.62 0 2.69 1.29 2.69 3 0 1.712-1.07 3-2.69 3H19z"/></symbol><symbol viewBox="0 0 32 32" id="icon-network"><title>network</title><path d="M28.5 24c-1.4 0-2.6.8-3.2 2H9v-.6l11.1-11.1c1.2.4 2.7.2 3.6-.8 1.4-1.4 1.4-3.6 0-4.9-1.4-1.4-3.6-1.4-4.9 0-1 1-1.2 2.4-.8 3.6L7.2 23H6V6.7c1.2-.6 2-1.8 2-3.2C8 1.6 6.4 0 4.5 0S1 1.6 1 3.5c0 1.4.8 2.6 2 3.2V23H0v9h9v-3h16.3c.6 1.2 1.8 2 3.2 2 1.9 0 3.5-1.6 3.5-3.5S30.4 24 28.5 24z"/></symbol><symbol viewBox="0 0 32 32" id="icon-no-exit"><title>no-exit</title><path d="M15.9.004c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zm0 28c-6.627 0-12-5.373-12-12 0-2.29.64-4.427 1.753-6.247l16.495 16.495c-1.82 1.11-3.96 1.752-6.248 1.752zm10.248-5.753L9.653 5.76c1.82-1.112 3.96-1.753 6.247-1.753 6.627 0 12 5.373 12 12 0 2.29-.64 4.428-1.752 6.247z"/></symbol><symbol viewBox="0 0 32 32" id="icon-pdf"><title>pdf</title><path d="M26.213 18.425c-.427-.42-1.372-.643-2.812-.662-.97-.01-2.14.075-3.38.248-.55-.31-1.12-.66-1.56-1.08-1.2-1.12-2.2-2.68-2.83-4.39.04-.16.08-.3.11-.44 0 0 .68-3.84.5-5.14-.02-.18-.04-.23-.09-.37l-.06-.15c-.18-.42-.54-.65-1.11-.63l-.33.2h-.01c-.63 0-1.14.11-1.28.59-.41 1.52.02 3.67.78 6.6l-.19.43c-.55 1.34-1.24 2.66-1.84 3.86l-.08.14c-.64 1.25-1.22 2.308-1.744 3.207l-.545.28c-.04.02-.97.51-1.185.645-1.85 1.107-3.08 2.36-3.28 3.357-.067.32-.02.724.31.913l.526.26c.23.11.47.17.716.17 1.32 0 2.85-1.643 4.96-5.324 2.438-.798 5.21-1.45 7.64-1.82 1.85 1.044 4.126 1.77 5.564 1.77.253 0 .473-.027.652-.075.278-.07.51-.23.65-.44.28-.42.337-1 .26-1.59-.023-.175-.163-.39-.315-.54zm-19.7 7.018c.24-.658 1.194-1.958 2.6-3.11.09-.073.308-.277.507-.467-1.472 2.348-2.457 3.284-3.106 3.577zm8.338-19.2c.43 0 .67 1.07.69 2.07s-.21 1.706-.5 2.226c-.24-.77-.35-1.99-.35-2.78 0 0-.01-1.52.18-1.52zm-2.48 13.683c.3-.53.61-1.086.92-1.677.77-1.45 1.25-2.58 1.61-3.52.72 1.3 1.61 2.41 2.66 3.29.13.11.27.22.42.33-2.13.42-3.97.93-5.59 1.56zm13.44-.12c-.13.08-.5.128-.74.128-.77 0-1.72-.353-3.06-.927.52-.038.99-.057 1.41-.057.78 0 1.01-.003 1.76.19s.77.584.64.666zm2.38-13.57L23.7 1.77C22.725.798 20.775 0 19.4 0h-15C3.025 0 2 1.13 2 2.504v27C2 30.88 3.025 32 4.4 32h23c1.375 0 2.6-1.12 2.6-2.496v-19c0-1.375-.845-3.296-1.818-4.268zm-1.47 1.412c.1.098.2.352.29.352H22V2.896c0 .095.206.19.304.29l4.414 4.462zM28 29.504c0 .27-.33.496-.6.496h-23c-.27 0-.4-.225-.4-.496v-27c0-.27.13-.504.4-.504h15c.15 0 .6.023.6.057V10h7.847c.034 0 .153.353.153.504v19z"/></symbol><symbol viewBox="0 0 32 32" id="icon-pencil"><title>pencil</title><path d="M21.877.004l-2.916 2.83s9.73 9.76 9.73 9.663c0-.098 2.82-2.928 2.82-2.928L21.88 0zm-3.79 3.904L2.443 20.488.5 32.003l11.665-1.757L27.71 13.57l-9.624-9.662zM5.167 28.88l-1.46-1.463.78-4.978 1.146-1.24.035.03-.02.02 5.745 5.69-1.175 1.23-5.054.68z"/></symbol><symbol viewBox="0 0 32 32" id="icon-person-add"><title>person-add</title><path d="M30.443 21.938c-.306-.58-.69-1.11-1.14-1.572-.3-.31-.627-.588-.98-.833-1.055-.736-2.327-1.166-3.695-1.166-1.368 0-2.64.43-3.697 1.166-.35.245-.68.525-.98.833-.44.463-.83.992-1.14 1.572-.51.966-.8 2.072-.8 3.247 0 1.175.29 2.282.8 3.248 1.13 2.125 3.31 3.57 5.82 3.57 2.51 0 4.7-1.445 5.82-3.57.51-.966.8-2.073.8-3.248 0-1.175-.29-2.28-.8-3.247zM28 26h-2v2.163c0 .55-.45 1-1 1s-1-.45-1-1V26h-2c-.55 0-1-.45-1-1s.45-1 1-1h2v-1.837c0-.55.45-1 1-1s1 .45 1 1V24h2c.55 0 1 .45 1 1s-.45 1-1 1zm-10.958 3.366c-.674-1.277-1.03-2.723-1.03-4.18 0-1.46.355-2.904 1.03-4.182.393-.745.89-1.427 1.473-2.03.387-.4.814-.763 1.27-1.08.764-.532 1.597-.92 2.47-1.176 1.09-1.754 1.75-3.95 1.75-6.348 0-1.18-.166-2.31-.455-3.366-1.114-4.07-4.182-7-7.802-7-3.307 0-6.15 2.447-7.47 5.972-.497 1.336-.785 2.82-.785 4.394 0 3.778 1.615 7.075 4.02 8.886.24 1.424-.604 2.342-2.004 3.012-5.46.788-9.27 2.572-9.27 4.65 0 2.808 6.94 5.084 15.5 5.084 1.13 0 2.22-.052 3.29-.13-.8-.693-1.49-1.53-2-2.506z"/></symbol><symbol viewBox="0 0 32 32" id="icon-person"><title>person</title><path d="M22.847 22.33c-1.604-.713-2.538-1.7-2.156-3.297 2.32-1.853 3.85-5.038 3.85-8.663 0-1.18-.17-2.31-.47-3.366-1.15-4.07-4.31-7-8.05-7-3.41 0-6.34 2.447-7.7 5.972-.51 1.336-.81 2.82-.81 4.394 0 3.778 1.67 7.075 4.15 8.886.25 1.424-.62 2.342-2.07 3.012C3.96 23.056.02 24.84.02 26.92c0 2.807 7.162 5.083 16 5.083s16-2.276 16-5.083c0-2.03-3.755-3.777-9.17-4.59z"/></symbol><symbol viewBox="0 0 32 32" id="icon-phone"><title>phone</title><path d="M3.25 9.87c.82 3.74 3.61 8.43 7.83 12.65 4.22 4.22 8.91 7 12.65 7.83 2.42.53 4.45.24 5.7-1.01l2.12-2.11c.88-.88.88-2.31 0-3.19l-5.36-3.68c-.88-.88-2.31-.88-3.19 0l-1.76 1.76c-1.07 1.07-4.11-.25-6.8-2.94-2.69-2.69-4.01-5.74-2.94-6.8l1.76-1.76c.88-.88.88-2.31 0-3.19l-3.7-5.37c-.88-.88-2.31-.88-3.19 0L4.26 4.17c-1.25 1.25-1.54 3.28-1.01 5.7z"/></symbol><symbol viewBox="0 0 32 32" id="icon-piggy-bank"><title>piggy-bank</title><path d="M32 11.007c0-1.3-1.078-2.356-2.407-2.356-.583 0-1.11.22-1.526.55C25.492 5.99 21.053 3.86 16 3.86c-1.99 0-3.888.33-5.613.927l-3.3-1.63c-.42-.206-.98-.187-1.38.054-.4.24-.707.67-.707 1.13v3.58C4 8.8 3.414 10 2.83 11h-.864C.886 11 0 11.724 0 12.783v5.72C0 19.56.885 20 1.966 20h.864C3.473 22 4 22.685 5 23.624v4.223C5 28.883 6.276 29 7.335 29h2.888c1.06 0 1.777-.117 1.777-1.154v-.853c1 .278 2.664.438 4 .438 1.336 0 3-.16 4-.43v.86c0 1.04.718 1.16 1.777 1.16h2.888c1.06 0 2.335-.11 2.335-1.15v-4.23c2-2.1 3.624-4.892 3.624-7.98 0-.8-.202-1.58-.39-2.34 1.07-.24 1.766-1.17 1.766-2.29zm-24.766 2.72c-.827 0-1.498-.655-1.498-1.465s.67-1.466 1.498-1.466 1.498.656 1.498 1.466-.67 1.466-1.498 1.466z"/></symbol><symbol viewBox="0 0 32 32" id="icon-pin"><title>pin</title><path d="M15.9.004c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zm0 16c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-play"><title>play</title><path d="M16 2C8.3 2 2 8.3 2 16s6.3 14 14 14 14-6.3 14-14S23.7 2 16 2zm-3.1 19.6V10.4l8.4 5.6-8.4 5.6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-pound-circle"><title>pound-circle</title><path d="M16 0C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0zm3.1 14.5v2.4h-4.2v4.7h6V24H9.6v-2.4h2.2v-4.7H10v-2.4h1.8v-2.2c0-2.8 2.2-4.8 5.2-4.8 1.2 0 2.5.3 3.9.8l-.8 2.3c-.9-.4-1.7-.6-2.5-.6-1.5 0-2.6 1-2.6 2.5v1.9h4.1v.1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-pound-note"><title>pound-note</title><path d="M32 7.997C32 6.342 30.658 5 29.003 5H2.997C1.342 5 0 6.342 0 7.997v17.005C0 26.658 1.342 28 2.997 28h26.005C30.658 28 32 26.658 32 25.003V7.997zM29 26H3V8h26v18zM8.49 17c0-2.94 1.696-5 4.16-7H5v14h7.65c-2.464-2-4.16-4.06-4.16-7zm15.02 0c0 2.94-1.696 5-4.16 7H27V10h-7.65c2.464 2 4.16 4.06 4.16 7zm-10.8-2.02c.136.34.274 1.02.412 1.02H12v2h1.606c.072 0 .134-.356.185-.205.05.152.08-.025.08.13 0 .248-.04.317-.14.543-.09.224-.21.35-.35.543-.14.2-.31.33-.49.49-.18.16-.37.28-.57.4l.86 1.26c.27-.2.54-.34.81-.41.27-.07.53-.1.78-.1.31 0 .56.03.76.08.2.06.406.12.608.19.19.07.404.12.635.17.23.05.52.07.87.07.348 0 .71-.06 1.087-.19.38-.12.73-.35 1.06-.67l-.82-1.39c-.248.27-.468.43-.654.5-.19.07-.374.1-.555.1-.185 0-.362-.01-.54-.044-.172-.033-.35-.07-.534-.12-.186-.034-.365-.07-.545-.1-.18-.033-.36-.05-.542-.05-.126 0-.26.02-.4.058-.136.037-.315.126-.535.26l-.03-.026c.308-.24.57-.51.8-.82.22-.306.33-.676.33-1.106 0-.155-.004.36-.02.225-.012-.142-.043.248-.09.248H17v-2h-1.77c-.138 0-.247-.706-.323-.88-.078-.175-.134-.454-.165-.586-.033-.136-.053-.315-.064-.415-.01-.1-.015-.235-.015-.35 0-.38.124-.703.365-.932.245-.23.572-.352.986-.352.348 0 .622.07.82.21.197.14.343.31.44.5.097.196.158.74.185.95.02.206.04.86.05.86h1.86c0-1-.3-2.32-.88-2.903-.59-.59-1.41-1.055-2.47-1.055-.58 0-1.09-.015-1.53.13-.44.15-.81.304-1.1.556-.29.254-.52.524-.67.854-.15.33-.23.79-.23 1.16 0 .42.07.91.2 1.246z"/></symbol><symbol viewBox="0 0 32 32" id="icon-present"><title>present</title><path d="M15 9H5.892C4.24 9 3 10.31 3 11.964V19h12V9zm10.932 23C27.585 32 29 30.65 29 28.998V21H17v11h8.932zM15 32V21H3v7.998C3 30.65 4.24 32 5.892 32H15zM25.932 9H17v10h12v-7.036C29 10.31 27.585 9 25.932 9zM21.05.004c-1.863 0-2.992 1.6-3.9 2.886-.17.243-.34.482-.51.704l-.468.623-.26.346-.263-.35-.47-.62c-.17-.22-.34-.46-.51-.703-.91-1.286-2.04-2.886-3.9-2.886-2.19 0-3.96 1.776-3.96 3.958 0 2.183 1.77 3.96 3.95 3.96.34 0 1.09-.006 1.98-.012 1.03-.007 2.22-.014 3.16-.016.93.003 2.13.01 3.16.016.89.006 1.64.01 1.98.01 2.18 0 3.96-1.775 3.96-3.958C25 1.78 23.22.004 21.04.004zm-8.313 5.902c-.88.006-1.63.01-1.965.01-1.077 0-1.954-.876-1.954-1.954 0-1.077.877-1.954 1.954-1.954.826 0 1.556 1.035 2.263 2.037.186.263.37.523.553.764l.455.6.362.48-1.668.01zm8.314.01c-.33 0-1.08-.004-1.96-.01l-1.67-.01.36-.48.46-.607c.19-.25.37-.51.56-.77.71-1 1.44-2.04 2.27-2.04 1.08 0 1.96.87 1.96 1.95S22.15 5.9 21.08 5.9z"/></symbol><symbol viewBox="0 0 32 32" id="icon-print"><title>print</title><path d="M20.247 15H11.75c-.55 0-.998.448-.998 1s.447 1 1 1h8.495c.552 0 1-.448 1-1s-.448-1-1-1zm0 4H11.75c-.55 0-.998.448-.998 1s.447 1 1 1h8.495c.552 0 1-.448 1-1s-.448-1-1-1zm8.755-12H25V3.128C25 2.008 24.253 1 23.133 1H8.867C7.747 1 7 2.01 7 3.128V7H2.998C1.348 7 0 7.937 0 9.586v8.864C0 20.1 1.35 21 2.998 21H7v3.663l1.946 2.026 2.15 2.23L13.083 31h10.05C24.253 31 25 30 25 28.88V21h4.002c1.65 0 2.998-.9 2.998-2.55V9.586C32 7.936 30.65 7 29.002 7zM9 3h14v4H9V3zm18 16h-2v-4h-2v14h-7.918L15 28.88v-4.216C15 23.56 14.186 23 13.083 23H9v-8H7v4H5v-6h22v6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-quarterly-dd"><title>quarterly-dd</title><path d="M16 0C7.164 0 0 7.163 0 16s7.164 16 16 16 16-7.163 16-16S24.836 0 16 0zm0 29C8.832 29 3 23.168 3 16S8.832 3 16 3v13h13c0 7.168-5.832 13-13 13z"/></symbol><symbol viewBox="0 0 32 32" id="icon-question-circle"><title>question-circle</title><path d="M16 .004c-8.835 0-16 7.165-16 16s7.165 16 16 16 16-7.165 16-16-7.165-16-16-16zm-.266 26.87c-1.406 0-2.408-1.096-2.408-2.503 0-1.37 1.002-2.31 2.408-2.31 1.405 0 2.408.94 2.408 2.32 0 1.41-1.003 2.51-2.408 2.51zm1.72-7.35l-.03.476H14v-1.01c0-3.693 4.264-4.785 4.264-7.6 0-1.72-1.297-2.877-3.08-2.877-1.316 0-2.56.564-3.96 1.437l-1.53-2.847c1.907-1.282 4.003-1.968 6.13-1.968 3.79 0 6.477 2.488 6.477 5.805 0 4.5-4.53 5.96-4.84 8.585z"/></symbol><symbol viewBox="0 0 32 32" id="icon-quote"><title>quote</title><path d="M28.232 6.235L23.768 1.77C22.795.796 20.875 0 19.5 0h-15C3.127 0 2 1.127 2 2.502v27.003C2 30.88 3.126 32 4.5 32h23c1.374 0 2.5-1.12 2.5-2.494V10.503c0-1.375-.796-3.296-1.768-4.268zM22 2.895c0 .095.255.192.353.29l4.464 4.463c.098.098.195.352.29.352H22V2.895zm6 26.61c0 .272-.23.495-.5.495h-23c-.27 0-.5-.223-.5-.494V2.502c0-.27.23-.502.5-.502h15c.15 0 .5.022.5.056V10h7.945c.034 0 .055.352.055.503v19.003zM8.5 15H17c.552 0 1-.447 1-1 0-.553-.448-1-1-1H8.5c-.553 0-1 .447-1 1 0 .553.447 1 1 1zM23 18H8.5c-.553 0-1 .447-1 1 0 .553.447 1 1 1H23c.552 0 1-.447 1-1 0-.553-.448-1-1-1zm0 5H8.5c-.553 0-1 .447-1 1 0 .553.447 1 1 1H23c.552 0 1-.447 1-1 0-.553-.448-1-1-1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-recycle"><title>recycle</title><path d="M31.164.87L27.312 4.7C24.417 1.812 20.417.002 16 .002 7.132.002-.048 7 0 16h4.004S4 15.987 4 15.958C4 12.762 5.246 9.8 7.513 7.54 9.78 5.28 12.793 4.035 16 4.035s6.218 1.244 8.484 3.504l-3.62 3.6c-.32.32-.093.85.36.85h9.766c.558 0 1.01-.44 1.01-1V1.22c0-.435-.528-.664-.836-.356zM28 16.046c0 3.196-1.247 6.16-3.514 8.42-2.267 2.26-5.28 3.505-8.485 3.505s-6.21-1.24-8.48-3.5l3.62-3.61c.32-.31.1-.85-.36-.85H1.01C.453 20 0 20.45 0 21v9.78c0 .436.528.665.836.357l3.85-3.83c2.896 2.89 6.896 4.695 11.314 4.695C24.867 32.002 32.047 25 32 16h-4.004s.005.017.005.046z"/></symbol><symbol viewBox="0 0 32 32" id="icon-remove"><title>remove</title><path d="M24.63 10H7.37c-1 0-1.743.906-1.653 2l1.488 18.007C7.295 31.1 8.187 32 9.187 32h13.627c1 0 1.89-.894 1.98-1.988L26.284 12c.09-1.095-.653-2-1.653-2zM12 28.05c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5V13.81c0-.827.448-1.498 1-1.498s1 .67 1 1.5V28.05zm5 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5V13.81c0-.827.448-1.498 1-1.498s1 .67 1 1.5V28.05zm5 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5V13.81c0-.827.448-1.498 1-1.498s1 .67 1 1.5V28.05zM24.993 4H23V1.003C23 .45 22.497 0 21.944 0H10.478C9.926 0 9 .45 9 1.003V4H7.007C5.35 4 4 5.367 4 7.023V8h24v-.977C28 5.367 26.65 4 24.993 4zM21 4H11V2h10v2z"/></symbol><symbol viewBox="0 0 32 32" id="icon-renewable"><title>renewable</title><path d="M15.902.004C7.065.004-.1 7.166-.1 16.004c0 4.614 1.968 8.765 5.097 11.682.275-3.668 1.398-6.39 2.935-8.334 1.795-2.268 4.17-3.507 6.532-3.912 3.447-.594 5.26-1.512 6.252-2.39.543-.547.785-2.07.785-2.07s-1.45.9-2.04 1.22c-.73.502-2.35 1.317-5.24 1.812-2.68.458-5.4 1.882-7.42 4.442-.36.462-.71.963-1.02 1.5-2.38-5.23 2.79-9.246 8.63-10.018 6.41-.846 9.49-2.82 9.49-2.82.61 6.205-1.64 12.942-6.96 15.138-3.83 1.58-6.83 1.898-8.95.476-.84 1.796-1.35 3.87-1.38 6.267 2.628 1.884 5.835 3.008 9.315 3.008 8.838 0 16-7.163 16-16 0-8.836-7.16-16-15.996-16z"/></symbol><symbol viewBox="0 0 32 32" id="icon-results"><title>results</title><path d="M0 9h27v6H0zm0-8h32v6H0zm0 16h24v6H0zm0 8h19v6H0z"/></symbol><symbol viewBox="0 0 32 32" id="icon-save"><title>save</title><path d="M31.12 5.753L26.25.88C25.688.32 24.925 0 24.13 0H5.437C2.437 0 0 2.443 0 5.442v21.125C0 29.565 2.44 32 5.438 32h21.125C29.56 32 32 29.565 32 26.566V7.874c0-.795-.316-1.56-.88-2.12zM18 3h3v7h-3V3zm11 23.566C29 27.906 27.903 29 26.562 29H5.438C4.098 29 3 27.907 3 26.566V5.442C3 4.102 4.097 3 5.438 3H6v9h17V3h1.13L29 7.874v18.692z"/></symbol><symbol viewBox="0 0 32 32" id="icon-share"><title>share</title><path d="M31.485 14.416L18.473 4.2c-.333-.26-.667-.305-1.046-.12-.38.185-.427.57-.427.99v5.985C7 11.327.093 17.653.093 27.787c0 .32.163.336.328.056.98-1.58 3.58-8.058 16.58-8.28v5.94c0 .42.05.806.43.99.38.185.74.14 1.07-.12l13.03-10.217c.27-.21.4-.53.4-.87 0-.34-.17-.66-.44-.87z"/></symbol><symbol viewBox="0 0 32 32" id="icon-sim"><title>sim</title><path d="M20 0H8.804C7.472 0 6 1.08 6 2.406v27.196C6 30.928 7.472 32 8.804 32h14.403C24.527 32 26 30.928 26 29.602v-24L20 0zm-8 29h-.792C10.314 29 10 28.086 10 27.205V22h2v7zm0-9h-2v-5.594c0-.886.314-1.406 1.208-1.406H12v7zm6 9h-4v-3h4v3zm0-5h-4v-6h4v6zm0-8h-4v-3h4v3zm4 11.205c0 .88-.314 1.795-1.196 1.795H20v-7h2v5.205zM22 20h-2v-7h.804c.882 0 1.196.52 1.196 1.406V20z"/></symbol><symbol viewBox="0 0 32 32" id="icon-smiley"><title>smiley</title><path d="M16 .004c-8.837 0-16 7.164-16 16 0 8.837 7.163 16 16 16s16-7.163 16-16c0-8.836-7.163-16-16-16zm0 29c-7.16 0-12.985-5.832-12.985-13s5.825-13 12.985-13c7.16 0 12.985 5.832 12.985 13s-5.825 13-12.985 13z"/><ellipse cx="10.53" cy="12.77" rx="2.486" ry="2.474"/><ellipse cx="21.47" cy="12.77" rx="2.486" ry="2.474"/><path d="M23.433 19.02c-.238-.145-.51-.222-.79-.222-.528 0-1.008.268-1.283.716-1.113 1.798-3.043 2.873-5.163 2.873-.077 0-.143.01-.197.024-.06-.01-.123-.02-.196-.02-2.12 0-4.05-1.07-5.164-2.87-.276-.44-.756-.71-1.285-.71-.28 0-.552.08-.79.23-.342.21-.583.54-.676.93-.1.39-.03.79.18 1.14 1.66 2.69 4.55 4.3 7.73 4.3.08 0 .14-.01.2-.023.06.01.12.02.19.02 3.17 0 6.06-1.61 7.73-4.303.21-.34.27-.74.18-1.13-.1-.39-.34-.72-.68-.93zm-14.178.29c.033-.002.066-.013.1-.013.07 0 .14.012.21.026-.1-.02-.206-.022-.31-.012zm13.18.014c.068-.015.138-.026.21-.026.032 0 .065.01.1.014-.105-.01-.21-.01-.31.012zm1.203 1.125c.06-.39-.113-.79-.468-1.01-.106-.07-.22-.1-.335-.13.115.02.23.06.335.12.355.22.527.62.468 1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-sort"><title>sort</title><path d="M0 20h15v3H0zm0-6h12v3H0zm0-6h9v3H0zm31.92 9.12c-.13-.277-.404-.12-.703-.12h-4.244c-.193-7-4.68-12.498-11.867-12.498-.226 0-.24.214-.04.334C16.188 5.55 20.782 8 20.938 17h-4.21c-.3 0-.573-.157-.705.12-.13.275-.098.438.086.68l7.24 9.437c.15.195.37.268.61.268s.47-.135.61-.33l7.24-9.365c.18-.242.22-.415.082-.69z"/></symbol><symbol viewBox="0 0 32 32" id="icon-speech-circle"><title>speech-circle</title><path d="M15.9 6.804c5.854 0 10.6 3.863 10.6 8.627 0 4.77-4.746 8.63-10.6 8.63-.562 0-.927-.03-1.465-.1C12.158 26.24 9 26.65 7 26.71v-.56c1-.698 2.463-1.967 2.463-3.416 0-.2-.11-.4-.138-.594-2.397-1.582-3.977-3.997-3.977-6.705 0-4.764 4.698-8.627 10.552-8.627zm-16 9.2c0 8.837 7.163 16 16 16s16-7.163 16-16-7.163-16-16-16-16 7.163-16 16z"/></symbol><symbol viewBox="0 0 32 32" id="icon-speech"><title>speech</title><path d="M15.9 1.01c8.837 0 16 5.82 16 13s-7.163 13-16 13c-.85 0-1.632-.053-2.445-.157C10.02 30.29 6 30.907 2 30.997v-.84c2-1.05 3.95-2.962 3.95-5.146 0-.3-.05-.6-.093-.89-3.62-2.39-5.945-6.03-5.945-10.11 0-7.18 7.152-13 15.988-13z"/></symbol><symbol viewBox="0 0 32 32" id="icon-spinner"><title>spinner</title><path opacity=".25" d="M16 0a16 16 0 0 0 0 32 16 16 0 0 0 0-32m0 4a12 12 0 0 1 0 24 12 12 0 0 1 0-24"/><path d="M16 0a16 16 0 0 1 16 16h-4A12 12 0 0 0 16 4z"/></symbol><symbol viewBox="0 0 32 32" id="icon-star-half"><title>star-half</title><path d="M11.006 10.805l-11.08 1.607 7.987 7.798-1.845 11.01L16 26.023V.787z"/></symbol><symbol viewBox="0 0 32 32" id="icon-star"><title>star</title><path d="M31.9 12.412l-11.055-1.607L15.9.787l-4.944 10.018L-.1 12.412l8 7.798-1.888 11.01 9.888-5.198 9.89 5.2L23.9 20.21z"/></symbol><symbol viewBox="0 0 32 32" id="icon-starline-half"><title>starline-half</title><path d="M31.9 12.412l-11.056-1.607L15.9.787l-4.944 10.018L-.1 12.412l8 7.798-1.888 11.01 9.888-5.198 9.888 5.2L23.9 20.21l8-7.798zm-16 11.14l-.03.015.03-17.837 3.492 7.075L27.2 13.94l-5.65 5.507 1.333 7.776L15.9 23.55z"/></symbol><symbol viewBox="0 0 32 32" id="icon-starline"><title>starline</title><path d="M31.9 12.412l-11.056-1.607L15.9.787l-4.944 10.018L-.1 12.412l8 7.798-1.888 11.01 9.888-5.198 9.888 5.2L23.9 20.21l8-7.798zm-16 11.14l-6.983 3.67 1.334-7.776L4.6 13.94l7.808-1.136L15.9 5.73l3.492 7.075L27.2 13.94l-5.65 5.507 1.333 7.776L15.9 23.55z"/></symbol><symbol viewBox="0 0 32 32" id="icon-talk"><title>talk</title><path d="M30.172 26.82c0 1.265.828 2.36 1.828 2.895v.443c0 .04-.646.062-.953.062-1.89 0-3.618-.792-4.823-2.063-.728.194-1.513.3-2.312.3-4.418 0-8.006-3.185-8.006-7.112s3.58-7.11 7.997-7.11 7.998 3.183 7.998 7.11c0 1.537-.52 2.96-1.45 4.124-.19.41-.27.86-.27 1.35zM14.122 1.79c7.736 0 14.03 5.016 14.22 11.263-1.367-.61-2.878-.93-4.44-.93-2.655 0-5.163.928-7.06 2.615-1.968 1.75-3.052 4.095-3.052 6.606 0 1.24.265 2.44.77 3.55-.145.003-.29.006-.437.006-.754 0-1.334-.048-2.056-.14C9.01 27.815 5 28.362 2 28.443v-.748c2-.933 3.395-2.632 3.395-4.573 0-.27-.102-.537-.14-.797-3.22-2.118-5.315-5.355-5.315-8.98 0-6.385 6.33-11.557 14.184-11.557z"/></symbol><symbol viewBox="0 0 32 32" id="icon-tick-circle"><title>tick-circle</title><path d="M15.9.004c-8.836 0-16 7.163-16 16s7.164 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zm-3.347 24L6.4 17.784l2.978-3.012 3.174 3.21 9.87-9.978 2.977 3.01-12.85 12.99z"/></symbol><symbol viewBox="0 0 32 32" id="icon-tick"><title>tick</title><path d="M11.42 27.004L3 18.45l4.075-4.14 4.345 4.412L24.925 5.004 29 9.144z"/></symbol><symbol viewBox="0 0 32 32" id="icon-tv"><title>tv</title><path d="M32 25V2H0v23h12v1.78c-1 .08-1.81.27-2.5.37C7.89 27.39 6.73 29 6.73 30h18.34c0-1-1.06-2.61-2.67-2.84-.69-.1-1.4-.29-2.4-.37V25h12zM3 22V5h26v17H3zm4-11h3v7h2v-7h3V9H7m12.9 7l-2.04-7H15.9l3.06 9h1.94l3-9h-2"/></symbol><symbol viewBox="0 0 32 26.01" id="icon-twitter-brand"><title>twitter-brand</title><path d="M32 3.08a13.14 13.14 0 0 1-3.77 1A6.59 6.59 0 0 0 31.12.45a13.11 13.11 0 0 1-4.17 1.59 6.57 6.57 0 0 0-11.36 4.52 6.69 6.69 0 0 0 .17 1.5A18.64 18.64 0 0 1 2.23 1.2a6.58 6.58 0 0 0 2 8.77 6.55 6.55 0 0 1-3-.82v.08a6.57 6.57 0 0 0 5.26 6.44 6.57 6.57 0 0 1-1.73.23 6.45 6.45 0 0 1-1.23-.12 6.57 6.57 0 0 0 6.13 4.56 13.19 13.19 0 0 1-8.16 2.81 12.65 12.65 0 0 1-1.5-.09 18.58 18.58 0 0 0 10.06 3c12.08 0 18.68-10 18.68-18.68v-.85A13.43 13.43 0 0 0 32 3.08" fill="#55acee"/></symbol><symbol viewBox="0 0 32 32" id="icon-twitter"><title>twitter</title><path d="M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16S24.837 0 16 0zm8.142 12.324c.008.168.01.337.01.508 0 5.185-3.946 11.164-11.163 11.164-2.22 0-4.28-.65-6.02-1.763.302.036.62.055.93.055 1.838 0 3.53-.627 4.873-1.68-1.718-.032-3.167-1.166-3.666-2.725.24.046.485.07.74.07.356 0 .702-.048 1.032-.138-1.797-.36-3.15-1.946-3.15-3.847v-.05c.53.295 1.134.47 1.777.492-1.052-.704-1.745-1.905-1.745-3.266 0-.72.195-1.393.53-1.973 1.937 2.38 4.828 3.94 8.09 4.1-.067-.28-.1-.58-.1-.89 0-2.16 1.755-3.92 3.922-3.92 1.13 0 2.147.478 2.863 1.24.893-.175 1.732-.5 2.49-.95-.293.916-.915 1.685-1.725 2.17.793-.094 1.55-.305 2.252-.617-.523.787-1.188 1.478-1.955 2.03z"/></symbol><symbol viewBox="0 0 32 32" id="icon-ustyle"><title>ustyle</title><path fill="#548DCA" d="M15.1 14.1l-4.2 4.4 2.5.3"/><path fill="#437CBE" d="M15.1 14.1l1.8 5.2-3.5-.5"/><path fill="#4983C3" d="M15.1 14.1l1.8-1.1v6.3"/><path fill="#437CBE" d="M16.9 13l3.3 2.9-3.3 3.4"/><path fill="#568FCB" d="M16.9 13l3-2.4.3 5.3"/><path fill="#9BC6EB" d="M19.9 10.6l1.7 7.4-1.4-2.1"/><path fill="#68A0D6" d="M21.6 18l-4.7 1.3 3.3-3.4"/><path fill="#80B2E0" d="M21.6 18v6.4l-2.7-1.9"/><path fill="#5A94CE" d="M18.9 22.5l-2-3.2 4.7-1.3"/><path fill="#679FD6" d="M16.9 19.3l-4.3 8.2 3.3-1.2"/><path fill="#558FCB" d="M16.9 19.3l-1 7 3-3.8"/><path fill="#8FBDE6" d="M18.9 22.5l-1.7 5-1.3-1.2"/><path fill="#7DB1E0" d="M18.9 22.5l2.7 1.9-4.4 3.1"/><path fill="#417CBE" d="M16.9 19.3l-3.5-.5-3.2 6.9"/><path fill="#3D73B8" d="M16.9 19.3l-6.7 6.4 2.4 1.8"/><path fill="#558FCB" d="M10.9 18.5l-.7 7.2 3.2-6.9"/><path fill="#548DCA" d="M10.9 18.5L8 26.6l2.2-.9"/><path fill="#427BBD" d="M8 26.6l.7 3 1.5-3.9"/><path fill="#3D73B8" d="M10.2 25.7l.6 4.4-2.1-.5"/><path fill="#386FB4" d="M10.2 25.7l2.4 1.8-1.8 2.6"/><path fill="#427BBD" d="M12.6 27.5l-1.8 2.6 2.7-.4"/><path fill="#649ED5" d="M12.6 27.5l3.3-1.2-2.4 3.4"/><path fill="#87B8E4" d="M15.9 26.3l-.8 3-1.6.4"/><path fill="#93C1E8" d="M15.9 26.3l1.3 1.2-2.1 1.8"/><path fill="#5B95CF" d="M8.7 29.6l2 2.4.1-1.9"/><path fill="#568FCB" d="M10.8 30.1l2.7-.4-.8 2.1"/><path fill="#5E98D1" d="M10.8 30.1l-.1 1.9 2-.2"/><path fill="#8DBCE6" d="M12.7 31.8l2.4-2.5-1.6.4"/><path fill="#90BDE6" d="M12.7 31.8l1.4-.2 1-2.3"/><path fill="#A2CAEC" d="M14.1 31.6l1.3-2.1-.3-.2"/><path fill="#A1C9EC" d="M17.2 27.5l-1.8 2-.3-.2"/><path fill="#84B6E2" d="M10.7 32l-1.2-1-.8-1.4"/><path fill="#82B3E1" d="M8 26.6l.3 2.1.4.9"/><path fill="#558FCB" d="M10.9 18.5l3.6-5.7.6 1.3"/><path fill="#5B95CF" d="M14.5 12.8L10.8 15l.1 3.5"/><path fill="#72A9DB" d="M10.8 15l3.6-3.9.1 1.7"/><path fill="#5894CF" d="M19.9 10.6l-3.8.8.8 1.6"/><path fill="#7AAEDF" d="M19.9 10.6l-1.4-1.7-2.4 2.5"/><path fill="#95C0E7" d="M18.5 8.9l-3.4 1.4-.7.8 1.7.3"/><path fill="#70A8DB" d="M18.5 8.9l-4.7-3 1.3 4.4"/><path fill="#629DD5" d="M18.5 8.9l5.4-2.7-4 4.4"/><path fill="#99D1F3" d="M23.9 6.2L21 10l-1.1.6"/><path fill="#599BD4" d="M23.9 6.2l-1.6 5.3L21 10"/><path fill="#7FBBE7" d="M22.3 11.5l-2.4-.9L21 10"/><path fill="#78AEDE" d="M19.9 10.6l2.4.9-.7 6.5"/><path fill="#92C1E8" d="M22.3 11.5l1 5.2-1.7 1.3"/><path fill="#A1CAED" d="M23.3 16.7l-.3 4.8-1.4-3.5"/><path fill="#90BDE6" d="M21.6 18l1.4 3.5-1.4 2.9"/><path fill="#9BC6EB" d="M26.3 15.8l-3 .9 3.6 4"/><path fill="#95C1E8" d="M26.9 20.7l-3.9.8.3-4.8"/><path fill="#9CC6EA" d="M26.9 20.7l-.9 4.2-3-3.4"/><path fill="#93C1E8" d="M23 21.5l3 3.4-2.3 2.1m-.7-5.5l.7 5.5-2-3"/><path fill="#91BFE7" d="M21.4 24.5l2.3 2.5-2-3-.1.4"/><path fill="#98C4EA" d="M23.3 16.7l3-.9-3.8-3.4"/><path fill="#AFD3F0" d="M26.3 15.8l-2.6-4.4-1.2 1"/><path fill="#ABD0EF" d="M23.7 11.4l-1.3-.2-.1.3.2.9"/><path fill="#4E5861" d="M14.7 8.9l-.8 1.5 3 2.6"/><path fill="#020304" d="M7.6 0l1.5 3.5 2.2 3.9 2.7 3-1.5-3.6-2.8-3.4"/><path fill="#3F4040" d="M7.6 0l2.5 2.8 2.4 4-2.8-3.4"/><path fill="#111E2E" d="M12.6 10.3l2.5 3.9-1.1-3.8h-.2"/><path fill="#1B2837" d="M11.3 7.4l1.3 2.9 1.4.1"/><path fill="#585D61" d="M14.7 8.9l-2.2-2.1 1.5 3.6"/><path fill="#848687" d="M10.1 2.8l2.2 3.3 2.4 2.8-2.2-2.1"/><path fill="#183553" d="M14 10.4l2.9 2.6-1.8 1.2-1.1-3.8"/><path fill="#8B9DB0" d="M15.1 9.7l1 1.6.8 1.7-1-1.8"/></symbol><symbol viewBox="0 0 32 32" id="icon-uswitch"><title>uswitch</title><path d="M8.31 17.123V4.316H0V16.83c0 13.013 15.888 19.498 25.126 10.314-7.58 3.768-16.55-1.536-16.816-10.02zM25.174.553L18.447 7.74h2.572v9.433c0 4.06-3.94 7.48-8.61 6.06 5.71 6.745 16.914 2.87 16.914-6.06V7.738H32L25.174.553z"/></symbol><symbol viewBox="0 0 32 32" id="icon-variable"><title>variable</title><path d="M30.856 22.435c-.09-.217-.3-.435-.535-.435H26v-8.958c0-.32-.79-1.042-1.11-1.042h-6.52c-.154 0-.196.292-.305.4-.11.11-.065.488-.065.642V22h-5.062c-.234 0-.446.218-.535.435-.09.216-.04.542.126.707l8.69 8.692c.11.11.25.17.41.17.15 0 .3-.06.41-.17l8.69-8.692c.16-.166.21-.49.12-.707zm-17.02-2.832c.11-.108.164-.483.164-.637V10h4.863c.234 0 .446-.214.535-.43.09-.218.04-.54-.126-.706l-8.69-8.69c-.11-.11-.257-.17-.41-.17-.155 0-.302.06-.41.17L1.07 8.864c-.166.167-.215.49-.126.705.09.21.3.43.536.43H6v8.96c0 .32.592 1.03.912 1.03h6.52c.152 0 .295-.29.403-.4z"/></symbol><symbol viewBox="0 0 32 32" id="icon-warning-circle"><title>warning-circle</title><path d="M16 0C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0zm2.1 5l-.4 14h-3.4L14 5h4.1zM16 26.9c-1.5 0-2.4-1-2.4-2.5 0-1.4 1-2.5 2.4-2.5s2.4 1 2.4 2.5c0 1.4-1 2.5-2.4 2.5z"/></symbol><symbol viewBox="-9 -1 23 31" id="icon-warning"><title>warning</title><path d="M6 0l-.315 21h-4.32L1 0h5zM3.5 30C1.312 30 0 28.6 0 26.5 0 24.54 1.458 23 3.5 23S7 24.4 7 26.5C7 28.46 5.542 30 3.5 30z"/></symbol><symbol viewBox="0 0 32 32" id="icon-wifi"><title>wifi</title><path d="M30.58 11.44c-.56 0-1.12-.22-1.54-.66-3.33-3.49-7.81-5.41-12.61-5.41-4.78 0-9.25 1.91-12.58 5.37-.81.85-2.16.87-3 .06-.84-.8-.86-2.15-.05-3 4.14-4.3 9.69-6.67 15.64-6.67 5.97 0 11.54 2.39 15.68 6.72.81.85.78 2.19-.07 3-.41.4-.94.59-1.47.59zm-4 5.49c-.55 0-1.09-.21-1.51-.63-2.3-2.32-5.37-3.59-8.63-3.59-3.25 0-6.3 1.27-8.6 3.56-.83.83-2.17.83-3 0-.83-.83-.83-2.18 0-3 3.1-3.1 7.22-4.81 11.6-4.81 4.4 0 8.54 1.72 11.65 4.85.83.83.82 2.18-.01 3-.42.41-.96.62-1.5.62zm-4.46 5.92c-.58 0-1.16-.23-1.57-.7-1.07-1.18-2.53-1.83-4.11-1.83-1.57 0-3.02.64-4.08 1.8-.79.86-2.14.92-3 .13s-.92-2.14-.13-3c1.86-2.02 4.49-3.18 7.21-3.18 2.75 0 5.4 1.18 7.26 3.22.79.87.72 2.21-.15 3-.41.38-.92.56-1.43.56z"/><circle cx="16.59" cy="27.38" r="3.49"/></symbol><symbol viewBox="0 0 32 32" id="icon-wiki"><title>wiki</title><path d="M5.715 21.8c.407-.027.82-.047 1.24-.047 3.33 0 6.397.938 8.002 2.45.007.006.017.008.025.015.11.1.232.185.372.246.01.004.02.005.03.01.016.006.032.008.05.014.152.055.31.09.467.09.16 0 .32-.034.47-.09l.05-.016c.01-.004.02-.005.03-.01.14-.06.26-.144.37-.242.01-.007.02-.01.03-.017 1.61-1.51 4.67-2.45 8-2.45.42 0 .84.02 1.24.048.38.02.98-.1 1.26-.36s.66-.62.66-1V3.58c0-.727-.78-1.32-1.5-1.377-.47-.03-1.06-.05-1.54-.05-3.51 0-6.81.9-9 2.44-2.18-1.54-5.45-2.44-8.97-2.44-.49 0-1.1.028-1.57.06-.72.05-1.41.65-1.41 1.374v16.85c0 .38.28.746.56 1.007.28.26.77.386 1.16.366zM17 6.98c2-1.29 5-2.076 8-2.082V19c-3 .005-6 .588-8 1.617V6.98zM7 4.898c3 .007 6 .794 8 2.082v13.636c-2-1.03-5-1.612-8-1.617V4.89zm23.5-.324c-.803 0-1.5.65-1.5 1.455v17.96c-1-.02-3.488-.03-3.644-.03-3.717 0-7.14.95-9.454 2.57-2.312-1.63-5.64-2.58-9.358-2.58C6.39 23.97 4 23.98 3 24V6.03c0-.804-.697-1.456-1.5-1.456S0 5.226 0 6.03v19.45c0 .402.12.787.414 1.062.294.276.67.415 1.07.39.4-.027 4.225-.053 4.977-.053 3.52 0 6.76.99 8.45 2.59.01.01.03.01.04.02.13.11.27.2.42.26.02 0 .03 0 .05.01.16.06.33.09.5.09.17 0 .34-.04.5-.1l.048-.01c.15-.06.29-.16.42-.27.01-.01.027-.01.038-.026 1.7-1.6 4.94-2.59 8.46-2.59.75 0 4.59.026 4.99.052.412.03.85-.11 1.144-.39.295-.278.512-.664.512-1.068V6.03c0-.804-.695-1.456-1.5-1.456z"/></symbol><symbol viewBox="0 0 32 32" id="icon-xml"><title>xml</title><path d="M23.12 12.004h-4.228L15.9 16.41l-2.992-4.406H8.68l5.07 7.577-5.72 8.43h8.195v-2.86h-1.892L15.9 22.8l3.48 5.204h4.39l-5.718-8.423 5.068-7.57zm5.013-5.768l-4.465-4.464C22.696.8 20.775.004 19.4.004h-15c-1.375 0-2.5 1.125-2.5 2.5v27c0 1.375 1.125 2.5 2.5 2.5h23c1.375 0 2.5-1.125 2.5-2.5v-19c0-1.375-.795-3.296-1.767-4.268zM26.718 7.65c.098.098.195.218.29.354H21.9V2.896c.136.095.256.192.354.29l4.464 4.464zM27.9 29.504c0 .27-.23.5-.5.5h-23c-.27 0-.5-.23-.5-.5v-27c0-.27.23-.5.5-.5h15c.15 0 .32.02.5.053v7.947h7.947c.034.18.053.35.053.5v19z"/></symbol></svg>
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg"><symbol viewBox="0 0 32 32" id="icon-alarm"><title>alarm</title><path d="M24.04 5.978c.256 0 .512-.1.707-.3l3.263-3.342c.39-.4.39-1.048 0-1.447-.39-.4-1.023-.4-1.414 0l-3.263 3.34c-.39.4-.39 1.05 0 1.45.196.19.45.29.707.29zm.68 3.592c.107.26.306.453.542.553.237.1.51.108.765 0l4.264-1.808c.51-.216.76-.815.55-1.337-.21-.522-.79-.77-1.3-.554l-4.27 1.808c-.51.216-.75.814-.54 1.337zM31 12h-4.616c-.552 0-1 .578-1 1.143 0 .283.112.455.292.64.182.186.432.217.708.217H31c.552 0 1-.434 1-1 0-.565-.447-1-1-1zM7.347 5.69c.195.2.45.3.707.3s.512-.1.707-.3c.4-.4.4-1.05 0-1.45L5.5.9C5.108.5 4.474.5 4.083.9c-.39.4-.39 1.048 0 1.447L7.347 5.69zM1.71 8.315l4.263 1.808c.255.108.53.1.765 0 .237-.1.435-.293.54-.554.212-.53-.03-1.13-.54-1.34L2.473 6.42c-.51-.214-1.095.034-1.306.556-.21.523.03 1.12.542 1.338zm4.612 5.528c.18-.185.293-.49.293-.772 0-.56-.448-1.07-1-1.07H1c-.553 0-1 .44-1 1s.448 1 1 1h4.616c.276 0 .526.03.706-.15zm21.486 11.71c0 .03-.006.05-.007.078.01.03.02.04.02.06l.01-.13h-.01zm.005.14c0-.016.01.053.01.037s-.01-.025-.01-.04v.004zm-.328-.68c-6.147-9.345-3.416-7.977-5.032-14.04-.426-1.873-1.61-3.448-3.202-4.37.18-.425.27-.89.27-1.38 0-1.99-1.57-3.607-3.52-3.607s-3.52 1.614-3.52 3.606c0 .493.1.962.28 1.39-1.5.87-2.64 2.316-3.12 4.053l-.02.072c-1.76 6.353 1.14 4.803-5.14 14.345l-.01.206c-.01.025-.03.257-.05.263-.02 0-.04-.08-.06-.04-.03.06-.05-.43-.07-.37-.04.13-.07-.13-.08-.13h.03c.04 1 .46 1 .99 1h21.62c.51 0 .92.28.98-.65-.025-.22-.114-.24-.27-.4-.02-.02-.025.09-.044.07zM16 6.783c-.84 0-1.522-.7-1.522-1.56 0-.86.683-1.56 1.522-1.56.84 0 1.522.7 1.522 1.56 0 .86-.683 1.557-1.522 1.557zm.005 24.61c1.875 0 3.394-.394 3.497-3.394h-6.994c.103 3 1.622 3.39 3.497 3.39z"/></symbol><symbol viewBox="0 0 32 32" id="icon-android"><title>android</title><path d="M27.9 10.004c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2s2-.9 2-2v-8c0-1.1-.9-2-2-2zm-24 0c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2s2-.9 2-2v-8c0-1.1-.9-2-2-2zm3 13c0 1.657 1.343 3 3 3h1v4c0 1.1.9 2 2 2s2-.9 2-2v-4h2v4c0 1.1.9 2 2 2s2-.9 2-2v-4h1c1.657 0 3-1.343 3-3v-11h-18v11zM19.606 2.8L20.872.37c.064-.122.016-.274-.106-.337s-.274-.016-.337.106L19.14 2.6c-1.008-.388-2.1-.6-3.246-.6s-2.238.215-3.245.604L11.37.14c-.063-.123-.214-.17-.336-.107-.122.063-.17.215-.106.337l1.266 2.43c-2.832 1.284-4.882 3.99-5.238 7.205h17.89c-.357-3.216-2.407-5.92-5.24-7.203zM11.9 8.455c-.8 0-1.45-.65-1.45-1.45s.65-1.45 1.45-1.45 1.45.65 1.45 1.45c0 .8-.65 1.45-1.45 1.45zm8 0c-.8 0-1.45-.65-1.45-1.45s.65-1.45 1.45-1.45c.8 0 1.45.65 1.45 1.45s-.65 1.45-1.45 1.45z"/></symbol><symbol viewBox="0 0 32 32" id="icon-arrow-circle"><title>arrow-circle</title><path d="M15.9.004c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zm10.113 16.41l-8.703 8.703c-.166.166-.575.216-.792.126-.217-.09-.518-.302-.518-.536V20H8.198c-.154 0-.11-.137-.22-.246-.108-.11.022-.333.022-.486V12.74c0-.32-.123-.74.198-.74H16V7.3c0-.234.3-.445.518-.535s.546-.04.712.126l8.743 8.71c.11.11.19.26.19.41 0 .16-.04.3-.15.41z"/></symbol><symbol viewBox="0 0 32 32" id="icon-arrow-down"><title>arrow-down</title><path d="M.3 16.7l15 15c.2.2.4.3.7.3.3 0 .5-.1.7-.3l15-15c.3-.3.4-.7.2-1.1-.1-.4-.5-.6-.9-.6h-8V1c0-.6-.8-1-1.4-1H10.4c-.3 0-.7.1-.9.3-.2.2-.5.4-.5.7v14H1c-.4 0-.8.2-.9.6-.2.4-.1.8.2 1.1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-arrow-up"><title>arrow-up</title><path d="M31.707 15.297l-15-15C16.52.11 16.265.004 16 .004c-.265 0-.52.105-.707.293l-15 15c-.286.286-.372.714-.217 1.088.155.373.52.615.924.615h8v14.004c0 .552.823.996 1.375.996h11.25c.265 0 .707-.103.895-.29.188-.19.48-.44.48-.706V17h8c.404 0 .77-.242.924-.615.155-.374.07-.802-.217-1.088z"/></symbol><symbol viewBox="0 0 32 32" id="icon-book"><title>book</title><path d="M27.026 0h-.002L7.1.56c-1.045.006-2.01.27-2.79.76-.438.278-.684.616-.943 1.003C3.06 2.78 3 3.32 3 3.848v23.61c0 .528.06 1.07.368 1.526.382.567.893 1.014 1.625 1.33.65.28 1.34.423 2.067.428l15.276 1.253c.064.006.12.01.183.01.57 0 1.27-.224 1.68-.628.4-.406.8-.948.8-1.524v-1.17l2.36-.08c1.07-.033 1.63-.898 1.63-1.97V2.13C29 .96 28.26 0 27.02 0zm-9.274 14.995c-.027 0-.054 0-.082-.003l-7.396-.607c-.543-.045-.948-.522-.904-1.065.044-.543.516-.943 1.066-.904l7.396.607c.543.045.948.522.904 1.065-.042.516-.474.907-.984.907zm2.235-3.736c-.027 0-.054-.01-.082-.01L8.04 10.28c-.543-.045-.948-.522-.904-1.065.046-.544.51-.938 1.066-.904l11.865.98c.543.05.948.52.904 1.07-.04.52-.47.91-.98.91zM26 24.74c0 .537-.296.983-.832.994l-.188.01c-.122 0 .02-.1.02-.22V7.614c0-1.125-1.013-2.144-2.135-2.243L7.158 4h-.055c-.558 0-1.008-.065-1.23-.208-.023-.015-.043.02-.06.007.063-.05.156-.09.28-.14.287-.13.652-.18 1.048-.18l17.85-.5c.64 0 1.01.52 1.01 1.15v20.6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-bookmark"><title>bookmark</title><path d="M25.412 0H6.588C6.068 0 6 .426 6 .945v30.118c0 .38.053.724.405.87.35.144.667.064.937-.204l8.702-8.75 8.724 8.74c.18.18.41.27.655.27.122 0 .062-.03.178-.07.36-.15.4-.49.4-.87V.94c0-.52-.07-.942-.58-.942z"/></symbol><symbol viewBox="0 0 32 32" id="icon-breadcrumb"><title>breadcrumb</title><path d="M21.307 15.32L13.114.714c-.377-.67-1.222-.904-1.89-.53-.667.374-.905 1.22-.53 1.888L18.508 16l-7.745 13.94c-.372.67-.13 1.515.54 1.887.213.118.444.175.672.175.487 0 .96-.258 1.214-.714l8.12-14.616c.23-.422.23-.933-.01-1.353z"/></symbol><symbol viewBox="0 0 32 32" id="icon-calculator"><title>calculator</title><path d="M27 2.22C27 .994 26.006 0 24.78 0H7.22C5.994 0 5 .994 5 2.22v27.56C5 31.006 5.994 32 7.22 32h17.56c1.226 0 2.22-.994 2.22-2.22V2.22zM12 29H8v-4h4v4zm0-6H8v-4h4v4zm0-6H8v-4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4v-4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4v-4h4v4zm0-7H8V3h16v7z"/></symbol><symbol viewBox="0 0 32 32" id="icon-calendar"><title>calendar</title><path d="M5 23h4v4H5zm6 0h4v4h-4zm6 0h4v4h-4zM5 17h4v4H5zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12-6h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM7.5 5.63c.828 0 1.5-.673 1.5-1.5V1.503c0-.828-.672-1.5-1.5-1.5S6 .676 6 1.503v2.624c0 .83.672 1.502 1.5 1.502zm17 0c.828 0 1.5-.673 1.5-1.5V1.503c0-.828-.672-1.5-1.5-1.5s-1.5.672-1.5 1.5v2.623c0 .83.672 1.502 1.5 1.502zM29 3h-1v1.13c0 1.93-1.57 3.5-3.5 3.5S21 6.06 21 4.13V3H11v1.13c0 1.93-1.57 3.5-3.5 3.5S4 6.06 4 4.13V3H3C1.343 3 0 4.57 0 6.227V28.84C0 30.5 1.343 32 3 32h26c1.657 0 3-1.502 3-3.16V6.228C32 4.57 30.657 3 29 3zm0 26H3V9h26v20z"/></symbol><symbol viewBox="0 0 32 32" id="icon-car"><title>car</title><path d="M30.326 12.646l-3.193-9.69C26.93 2.336 26.356 2 25.707 2H6.293c-.65 0-1.224.338-1.426.955l-3.193 9.73C.688 13.178 0 14.15 0 15.32v6.59c0 1.565 1 2.846 3 2.976v3.28C3 29.266 3.65 30 4.75 30h1.917C7.767 30 9 29.266 9 28.166V25h14v3.103c0 1.1 1.233 1.897 2.333 1.897h1.917c1.1 0 1.75-.797 1.75-1.897v-3.217c2-.13 3-1.41 3-2.975v-6.59c0-1.17-.688-2.18-1.674-2.67zm-23.268 7.97c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm17.884 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM4.937 12L7.38 5h17.24l2.443 7H4.937z"/></symbol><symbol viewBox="0 0 32 32" id="icon-checkbox-tick"><title>checkbox-tick</title><path d="M31.076 2.204c-9.734 5.965-16.798 13.492-19.972 17.27l-7.772-6.088L-.1 16.152l13.43 13.652c2.31-5.918 9.632-17.483 18.57-25.7l-.824-1.9z"/></symbol><symbol viewBox="0 0 32 32" id="icon-chevron-left"><title>chevron-left</title><path d="M13.462.9c-1.2 1.1-12.4 12.9-12.4 12.9-.6.6-.9 1.4-.9 2.2 0 .8.3 1.6.9 2.2 0 0 11.3 11.8 12.4 13 1.2 1.1 3.2 1.2 4.5 0 1.2-1.2 1.3-2.9 0-4.3L7.562 16l10.3-10.8c1.3-1.5 1.2-3.1 0-4.3-1.2-1.2-3.3-1.2-4.4 0z"/></symbol><symbol viewBox="0 0 32 32" id="icon-chevron-right"><title>chevron-right</title><path d="M11.6.9C12.8 2 24 13.8 24 13.8c.6.6.9 1.4.9 2.2s-.3 1.6-.9 2.2c0 0-11.3 11.8-12.4 13-1.2 1.1-3.2 1.2-4.5 0-1.2-1.2-1.3-2.9 0-4.3L17.5 16 7.2 5.2C5.9 3.7 6 2.1 7.2.9c1.2-1.2 3.3-1.2 4.4 0z"/></symbol><symbol viewBox="0 0 32 32" id="icon-clock"><title>clock</title><path d="M15.918.004c-8.837 0-16 7.164-16 16 0 8.837 7.163 16 16 16s16-7.163 16-16c0-8.836-7.163-16-16-16zm0 29c-7.16 0-12.985-5.832-12.985-13s5.825-13 12.985-13c7.16 0 12.985 5.832 12.985 13s-5.825 13-12.985 13zm1.264-13.557l-.03-8.282c0-.69-.564-1.165-1.256-1.165h-.004c-.694 0-1.254.483-1.253 1.173l.03 8.938c0 .4.19.71.47.94.05.05.08.11.14.15l5.88 4.16c.22.16.47.23.72.23.39 0 .78-.18 1.02-.53.4-.56.27-1.34-.3-1.74l-5.45-3.86z"/></symbol><symbol viewBox="0 0 32 32" id="icon-close"><title>close</title><path d="M16 .004c-8.836 0-16 7.163-16 16s7.164 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zm8 21.172l-2.828 2.828L16 18.834l-5.172 5.17L8 21.177l5.172-5.172L8 10.832l2.828-2.828L16 13.176l5.172-5.172L24 10.832l-5.172 5.172L24 21.176z"/></symbol><symbol viewBox="0 0 32 32" id="icon-cog"><title>cog</title><path d="M31.31 13.274l-3.698-1.207-.63-1.52L28.67 6.98c.18-.38.102-.834-.197-1.133L26.06 3.433c-.307-.307-.775-.38-1.16-.185L21.43 5.01l-1.52-.63L18.58.667c-.146-.4-.523-.667-.945-.667H14.22c-.432 0-.815.28-.95.692l-1.206 3.7-1.52.63-3.567-1.684c-.38-.18-.836-.1-1.134.197L3.43 5.95c-.308.305-.382.773-.186 1.16l1.763 3.47-.63 1.518-3.714 1.33c-.397.142-.663.52-.663.94v3.415c0 .433.278.816.69.95l3.7 1.208.628 1.52-1.685 3.57c-.18.38-.102.84.197 1.14l2.413 2.42c.306.31.775.38 1.16.19l3.47-1.77 1.52.63 1.33 3.71c.143.4.52.67.942.67h3.414c.43 0 .81-.27.95-.69l1.2-3.69 1.52-.63 3.56 1.68c.38.18.83.1 1.13-.2l2.41-2.41c.3-.3.38-.77.18-1.16l-1.77-3.47.63-1.52 3.71-1.33c.396-.14.662-.52.662-.94v-3.42c0-.43-.28-.814-.69-.95zM16 20.597c-2.532 0-4.593-2.06-4.593-4.593 0-2.532 2.06-4.593 4.594-4.593 2.54 0 4.6 2.07 4.6 4.6s-2.06 4.6-4.59 4.6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-controller"><title>controller</title><path d="M30.2 9.6H1.9c-1 0-1.9.7-1.9 1.8v9.2c0 1 .9 1.9 1.9 1.9h28.2c1.1 0 1.9-.9 1.9-2v-9.2c.1-1-.8-1.7-1.8-1.7zM9.7 16.7H7.8v1.8H6.3v-1.9H4.4v-1.5h1.9v-1.9h1.5v1.9h1.9v1.6zm12.2.9c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5c0 .9-.7 1.5-1.5 1.5zm4.9-.9c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5z"/></symbol><symbol viewBox="0 0 32 32" id="icon-credit-card"><title>credit-card</title><path d="M32 6.997C32 5.342 30.658 4 29.003 4H2.997C1.342 4 0 5.342 0 6.997v18.005C0 26.658 1.342 28 2.997 28h26.005C30.658 28 32 26.658 32 25.003V6.997zM29 25H3V15h26v10zm0-15H3V7h26v3zM5.96 23h3c.552 0 1-.448 1-1s-.448-1-1-1h-3c-.55 0-.998.448-.998 1s.447 1 1 1zm6.995 0h7.993c.552 0 1-.448 1-1s-.448-1-1-1h-7.993c-.552 0-1 .448-1 1s.448 1 1 1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-cross"><title>cross</title><path d="M26.5 9.61l-4.106-4.106L16 11.898 9.606 5.504 5.5 9.61l6.394 6.394L5.5 22.398l4.106 4.106L16 20.11l6.394 6.394 4.106-4.106-6.394-6.394z"/></symbol><symbol viewBox="0 0 32 32" id="icon-dashcam"><title>dashcam</title><g transform="translate(0 5)"><circle cx="16" cy="9" r="5"/><path d="M11.506 18H7.992C3.578 18 0 14.422 0 10V8c0-4.418 3.578-8 7.992-8h16.016C28.422 0 32 3.578 32 8v2c0 4.418-3.578 8-7.992 8h-3.514C21.43 19.046 22 20.42 22 21.927H10c0-1.506.57-2.88 1.506-3.927zM16 16c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7z"/></g></symbol><symbol viewBox="0 0 32 32" id="icon-dual-fuel"><title>dual-fuel</title><path d="M13.166 15.992c-.277-.99-.152-2.03.353-2.93.14-.25.31-.475.5-.684-.4-.432-.7-.955-.86-1.542-.28-.99-.15-2.03.35-2.93.03-.065.08-.12.12-.182-.71-.997-1.47-1.93-2.29-2.78-1.08-1.13-2.25-2.137-3.47-3.032-.5-.366-1.01-.715-1.53-1.045-.4-.255-.79-.51-1.2-.74-.18-.1-.39-.168-.58-.08-.06.027-.11.068-.16.12-.02.023-.04.047-.05.073-.16.253-.14.614-.09.93.3 1.776.12 3.965-.16 5.735-.438 2.774-1.357 5.403-2.55 7.783C.01 17.806-.35 21.702.32 25.183c.502 2.625 2.087 4.616 4.093 5.843-.06-.094-.128-.183-.18-.285-1.488-2.82-.444-6.08.794-8.69.633-1.33 1.36-2.62 1.93-3.99.283-.68.502-1.42.64-2.17.114-.63.158-1.37.085-2.01-.026-.23 0-.51.163-.62.084-.05.184-.04.276-.02.56.13 1.04.63 1.49 1.03.56.49 1.07 1.05 1.54 1.66.49.63.93 1.31 1.34 2.01 1.78 3.11 2.11 7.14 1.2 10.65-.32 1.24-.87 2.53-1.7 3.45 2.19-.7 3.61-2.18 4.54-4.17C15.62 27.1 15 26 15 24.77v-1.61c0-1.464 1-2.747 2-3.444V18.9c0-.04-.185-.072-.268-.09-1.683-.048-3.12-1.196-3.566-2.818zm18.77-5.24c-.276-.986-1.297-1.562-2.283-1.287L16.377 13.17c-.984.273-1.56 1.298-1.285 2.283.226.82.972 1.453 1.783 1.453.02 0 .043.094.063.094h.016c.08 0 .863.118 1.523.53.22.136.413.47.588.47H19v2h3v-2.142c0-.36-.395-.69-.588-.98-.26-.393-.61-.718-.92-.99l6.098-1.71 1.075.983c-.074.04-.156.08-.23.13-.597.35-1.207.97-1.83 1.6-.132.13-.605.5-.605.98V21h-5.893C18.002 21 17 22.056 17 23.16v1.6c0 1.106 1 2 2 2v2.244C19 30.66 20.45 32 22.107 32h2.844c1.66 0 3.05-1.34 3.05-2.996v-2.246c1-.017 2-.903 2-1.997v-1.6c0-1.1-.97-2.16-2.08-2.16H28v-3.14c0-.36.76-.63 1.183-.79.265-.1.498-.17.67-.21.084-.02.144-.03.185-.03h.036c.46-.05.847-.37.99-.81.14-.44.008-.92-.334-1.23l-1.477-1.33 1.395-.39c.986-.27 1.56-1.29 1.287-2.28zm-16.17-4.627c.315.237.705.37 1.11.37.164 0 .332-.022.5-.068l9.883-2.734c.12-.035.24-.08.35-.137.21-.113.4-.266.56-.447.07-.1.14-.19.2-.3.11-.21.19-.44.22-.68.03-.24.01-.49-.06-.74-.05-.19-.14-.35-.24-.51l-.06-.09c-.1-.14-.22-.27-.36-.37L27.8.37c-.144-.1-.297-.185-.463-.242 0-.005-.004-.007-.007-.007-.17-.05-.346-.08-.527-.08-.02 0-.04-.01-.06-.01-.02 0-.036.01-.05.01-.15.01-.3.02-.45.07L16.37 2.85c-.983.275-1.56 1.298-1.286 2.286.115.41.36.748.675.985zm-.674 4.17c.226.82.972 1.36 1.783 1.36.164 0 .33-.024.498-.07L30.648 7.88c.986-.274 1.56-1.296 1.287-2.282-.275-.988-1.296-1.565-2.282-1.29L16.377 8.012c-.984.277-1.56 1.3-1.285 2.286z"/></symbol><symbol viewBox="0 0 32 32" id="icon-electric-light"><title>electric-light</title><path d="M7.567 10.265c.227.822.973 1.36 1.785 1.36.164 0 .332-.023.498-.07l13.294-3.708c.988-.276 1.563-1.3 1.29-2.287-.276-.99-1.3-1.567-2.286-1.29L8.854 7.976c-.985.276-1.563 1.3-1.287 2.288zM9.354 6.46c.164 0 .332-.023.498-.07l9.9-2.737c.987-.277 1.563-1.3 1.288-2.29-.274-.987-1.298-1.566-2.285-1.29l-9.9 2.74c-.985.274-1.563 1.3-1.29 2.288.23.82.977 1.36 1.79 1.36zM22.15 9.433l-13.296 3.71c-.985.274-1.563 1.3-1.287 2.286.227.82.973 1.46 1.785 1.46.022 0 .043.1.064.1h.016c.08 0 .864.11 1.525.53.22.13.413.47.59.47H12v2h2v-2.16c0-.36-.153-.69-.347-.98-.26-.4-.49-.72-.8-1l6.167-1.71 1.107.98c-.075.04-.14.08-.216.12-.59.35-1.08.86-1.56 1.59-.19.29-.34.62-.34.98V21H11.6c-1.12 0-1.6 1.04-1.6 2.148v1.604c0 1.106 0 2.003 2 2.003V29c0 1.66.932 3 2.592 3h2.848C19.1 32 20 30.66 20 29v-2.25c2-.016 2-.903 2-2v-1.603C22 22.04 21.52 21 20.413 21H20v-3.163c1-.365 1.008-.63 1.432-.797.265-.107.622-.172.793-.21.085-.02.207-.03.248-.038.018-.003.06-.005.066-.006.46-.05.86-.372 1-.813.14-.442.01-.928-.33-1.24L21.74 13.4l1.4-.39c.987-.274 1.563-1.3 1.29-2.287-.276-.99-1.3-1.566-2.285-1.29z"/></symbol><symbol viewBox="0 0 32 32" id="icon-envelope"><title>envelope</title><path d="M31.562 4.464c-.377-.626-.974-1.098-1.685-1.317C29.597 3.062 29.307 3 29 3H3c-.307 0-.598.062-.877.148-.712.22-1.308.69-1.685 1.316C.166 4.914 0 5.44 0 6.004v20c0 .307.06.598.146.877.22.72.688 1.31 1.313 1.69.45.27.97.44 1.54.44h26c.56 0 1.09-.16 1.54-.43.62-.38 1.09-.97 1.31-1.68.08-.28.14-.57.14-.87v-20c0-.56-.17-1.09-.44-1.54zM27.022 6L19 14.024l-1.5 1.5-.793.795c-.39.39-1.023.39-1.414 0l-.793-.8-1.5-1.5L4.978 6H27.02zM3 7.026l8.5 8.5-8.5 8.5v-17zM4.02 26L13 17.024l1.586 1.587c.78.79 2.047.79 2.828.01L19 17.03 27.978 26H4.02zM29 24.026l-8.5-8.5 8.5-8.5v17z"/></symbol><symbol viewBox="0 0 32 32" id="icon-exit-noexit"><title>exit-noexit</title><path d="M7.874 16.004c4.388 0 7.945-3.582 7.945-8s-3.56-8-7.95-8c-4.39 0-7.95 3.582-7.95 8s3.55 8 7.94 8zM4.636 7.388l1.576 1.604 4.9-4.988 1.48 1.505L6.212 12 3.157 8.89l1.48-1.506zM31.176.51c-.592-.595-1.552-.595-2.143 0L.343 29.4c-.59.595-.59 1.56 0 2.157.297.298.685.446 1.073.446.388 0 .776-.148 1.072-.446L31.176 2.67c.59-.597.59-1.564 0-2.16zm.724 19.427l-2.932-2.932-4.568 4.567-4.567-4.567-2.933 2.932 4.567 4.567L16.9 29.07l2.933 2.934 4.567-4.567 4.568 4.567L31.9 29.07l-4.567-4.566z"/></symbol><symbol viewBox="0 0 31.99 32" id="icon-facebook-brand"><title>facebook-brand</title><path d="M30.23 0H1.77A1.77 1.77 0 0 0 0 1.77v28.46A1.77 1.77 0 0 0 1.77 32h15.32V19.61h-4.17v-4.83h4.17v-3.56c0-4.13 2.52-6.39 6.21-6.39A34 34 0 0 1 27 5v4.34h-2.53c-2 0-2.39 1-2.39 2.35v3.08h4.78l-.63 4.83h-4.16V32h8.15A1.77 1.77 0 0 0 32 30.23V1.77A1.76 1.76 0 0 0 30.23 0" fill="#3b5999"/></symbol><symbol viewBox="0 0 32 32" id="icon-facebook"><title>facebook</title><path d="M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16S24.837 0 16 0zm4 11h-1.546C17.32 11 17 11.733 17 12.524V14h2.905l-.352 3H17v7h-3v-7h-2v-3h2v-1.746c0-2.337 1.618-3.61 3.703-3.61 1 0 2.026.074 2.297.108V11z"/></symbol><symbol viewBox="0 0 32 32" id="icon-filter"><title>filter</title><path d="M30.5 15h-2.714c-.542-2-2.014-2.7-3.765-2.7-1.75 0-3.22.7-3.76 2.7H1.5c-.828 0-1.5.672-1.5 1.5 0 .83.672 1.5 1.5 1.5h18.912c.64 1 2.01 2.3 3.61 2.3 1.598 0 2.968-1.3 3.608-2.3h2.87c.828 0 1.5-.67 1.5-1.5 0-.828-.672-1.5-1.5-1.5zm0 10H11.786c-.542-2-2.014-2.7-3.765-2.7-1.75 0-3.22.7-3.76 2.7H1.5c-.828 0-1.5.672-1.5 1.5 0 .83.672 1.5 1.5 1.5h2.912c.64 1 2.01 2.3 3.61 2.3 1.598 0 2.968-1.3 3.608-2.3H30.5c.828 0 1.5-.67 1.5-1.5 0-.828-.672-1.5-1.5-1.5zM1.5 8h8.912c.64 1 2.01 2.3 3.61 2.3C15.62 10.3 16.99 9 17.63 8H30.5c.828 0 1.5-.67 1.5-1.5 0-.828-.672-1.5-1.5-1.5H17.786c-.542-2-2.014-2.7-3.765-2.7-1.75 0-3.22.7-3.76 2.7H1.5C.672 5 0 5.672 0 6.5 0 7.33.672 8 1.5 8z"/></symbol><symbol viewBox="0 0 32 32" id="icon-fixed-variable"><title>fixed-variable</title><path d="M30.833.53c-.58-.594-1.52-.594-2.1 0L.636 29.406c-.58.595-.58 1.562 0 2.157.29.298.67.446 1.05.446s.76-.15 1.05-.45L30.833 2.69c.58-.595.58-1.562 0-2.157zm1.27 26.44c-.05-.12-.163.03-.29.03H30v-5.478c0-.177-.93-.522-1.1-.522h-3.5c-.082 0-.206.135-.264.195-.058.06-.136.242-.136.327V27h-2.514c-.126 0-.24-.15-.287-.03-.05.12-.03.03.06.123l4.66 4.793c.05.06.13.094.22.094s.16-.034.22-.094l4.66-4.793c.09-.092.11-.003.07-.122zm-8.395-2.01c.058-.06.292-.086.292-.17V20h2.202c.126 0 .24-.196.287-.315.04-.12.02-.375-.07-.466l-4.67-4.8c-.06-.06-.14-.1-.22-.1-.08 0-.16.03-.22.09l-4.67 4.79c-.09.09-.12.34-.07.46.05.12.16.31.28.31H20v4.79c0 .17-.383.21-.21.21h3.497c.083 0 .363.02.42-.04zM1.9 16h10c.825 0 1.1-.675 1.1-1.5V9c0-.825-.275-1-1.1-1H11V4.5C11 2.02 8.98 0 6.5 0S2 2.02 2 4.5V8c-1 0-2 .175-2 1v5.5c0 .825 1.075 1.5 1.9 1.5zM4 4.5C4 3.12 5.12 2 6.5 2S9 3.12 9 4.5V8H4V4.5z"/></symbol><symbol viewBox="0 0 32 32" id="icon-gas"><title>gas</title><path d="M26.616 15.188c-1.317-4.09-4.083-7.55-7.437-10.244-1.41-1.132-2.92-2.138-4.5-3.033-.65-.36-1.31-.71-1.98-1.04-.51-.26-1.01-.51-1.54-.74-.24-.1-.51-.17-.75-.08-.08.03-.14.07-.2.12-.03.02-.05.05-.07.08-.21.25-.18.61-.11.93.38 1.78.15 3.97-.21 5.74-.57 2.78-1.76 5.41-3.3 7.79C4.5 17.83 4.03 21.72 4.9 25.2c.65 2.623 2.7 4.614 5.29 5.84-.07-.094-.16-.183-.23-.285-1.92-2.82-.57-6.08 1.03-8.69.81-1.336 1.75-2.62 2.49-3.99.362-.684.65-1.42.82-2.173.145-.63.2-1.37.11-2.01-.036-.23 0-.51.21-.62.11-.05.24-.043.356-.02.72.13 1.34.625 1.92 1.025.72.49 1.38 1.044 1.995 1.653.63.63 1.2 1.308 1.72 2.01 2.3 3.11 2.73 7.137 1.55 10.645-.412 1.24-1.13 2.52-2.2 3.44 4.7-1.18 6.92-4.46 7.4-8.777.3-2.7.08-5.45-.76-8.04z"/></symbol><symbol viewBox="0 0 32 32" id="icon-gauge"><title>gauge</title><path d="M16 .004c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zm-1 4.063c0-.553.447-1 1-1 .553 0 1 .447 1 1v1.875c0 .553-.447 1-1 1-.553 0-1-.447-1-1V4.067zm-4.91 5.635c-.385.396-1.017.404-1.413.02L7.334 8.41c-.396-.382-.404-1.014-.02-1.41.387-.397 1.02-.406 1.415-.02l1.34 1.308c.39.386.4 1.018.02 1.414zm1.43-2.598l-.79-1.7c-.234-.5-.018-1.095.483-1.33.5-.232 1.095-.016 1.33.485l.79 1.7c.234.5.018 1.09-.483 1.32-.502.23-1.096.01-1.33-.49zm7.555 17.386c-.613 1.552-2.368 2.312-3.92 1.7-1.552-.614-2.445-2.37-1.83-3.92.333-.848.675-1.447 1.675-1.728v-8.91c0-.553.447-1 1-1 .553 0 1 .447 1 1v8.906c0 .013.207.017.244.03 1.55.615 2.444 2.37 1.83 3.922zm2.727-19.085l-.792 1.7c-.233.5-.828.718-1.33.484-.5-.24-.717-.83-.483-1.33l.792-1.7c.23-.5.82-.72 1.32-.49.5.23.72.82.48 1.33zm3.395 3.008L23.854 9.72c-.396.387-1.03.378-1.414-.018s-.377-1.03.02-1.414L23.8 6.98c.396-.386 1.03-.377 1.414.02.386.395.378 1.027-.02 1.413z"/></symbol><symbol viewBox="0 0 32 32" id="icon-github"><title>github</title><path fill-rule="evenodd" fill="#221E1B" d="M16 0C7.2 0 0 7.3 0 16.4 0 23.7 4.6 29.8 10.9 32c.8.2 1.1-.4 1.1-.8v-2.8c-4.5 1-5.4-2.2-5.4-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.4 2.5 3.7 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.3-1.8-7.3-8.1 0-1.8.6-3.3 1.6-4.4-.2-.4-.7-2.1.2-4.3 0 0 1.3-.4 4.4 1.7 1.3-.4 2.6-.5 4-.6 1.4 0 2.7.2 4 .6 3.1-2.1 4.4-1.7 4.4-1.7.9 2.3.3 3.9.2 4.3 1 1.1 1.6 2.6 1.6 4.4 0 6.3-3.7 7.7-7.3 8.1.6.5 1.1 1.5 1.1 3v4.5c0 .4.3.9 1.1.8C27.4 29.8 32 23.7 32 16.4 32 7.3 24.8 0 16 0z"/></symbol><symbol viewBox="0 0 31.36 32" id="icon-google-brand"><title>google-brand</title><path d="M31.36 16.36a18.49 18.49 0 0 0-.29-3.27H16v6.19h8.61a7.35 7.35 0 0 1-3.19 4.83v4h5.17a15.6 15.6 0 0 0 4.77-11.76z" fill="#4285f4"/><path d="M16 32a15.28 15.28 0 0 0 10.59-3.88l-5.17-4A9.66 9.66 0 0 1 7.05 19H1.68v4.14A16 16 0 0 0 16 32z" fill="#34a853"/><path d="M7.05 19a9.46 9.46 0 0 1 0-6.08V8.81H1.68a16 16 0 0 0 0 14.37z" fill="#fbbc05"/><path d="M16 6.36a8.64 8.64 0 0 1 6.12 2.39l4.56-4.58A15.39 15.39 0 0 0 16 0 16 16 0 0 0 1.68 8.81L7.05 13A9.54 9.54 0 0 1 16 6.36z" fill="#ea4335"/></symbol><symbol viewBox="0 0 32 32" id="icon-google"><title>google</title><path d="M16 0C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0zm-4.2 23.4c-4.1 0-7.4-3.3-7.4-7.4s3.3-7.4 7.4-7.4c2 0 3.7.7 5 1.9l-2 1.9c-.5-.5-1.5-1.2-3-1.2-2.4 0-4.6 2.1-4.6 4.7s2 4.7 4.6 4.7c3 0 4-2.1 4.2-3.2h-4.2V15h7c0 .4.1.7.1 1.3 0 4.1-2.9 7.1-7.1 7.1zm13.8-6.3v2.1h-2.1v-2.1h-2.1V15h2.1v-2.1h2.1V15h2.1v2.1h-2.1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-graph-up"><title>graph-up</title><path d="M10 17.336V32h5V19.065l-3.362-3.375zm7 3.576V32h5V15.895l-3.662 3.675zm6.903-7.124L23.9 31.976l5.1.028V8.837l-.375.31zm-19.597 9.42L3 24.372V32h5V20h-.358zM31.486 0h-8.054c-.44 0-.662.534-.35.846l2.635 2.644.015.016-9.006 9.04-5.28-5.303L0 18.75l2.795 2.805 8.65-8.7 5.282 5.304.08-.08 3.653-3.67 8.067-8.1 2.61 2.61c.315.31.863.09.863-.36V.5c0-.272-.237-.5-.513-.5z"/></symbol><symbol viewBox="0 0 32 32" id="icon-home"><title>home</title><path d="M31.407 15.023L26 9.885V2h-4v3.79L16.776.39c-.516-.514-1.334-.514-1.85 0L.292 15.023c-.393.392-.486.8-.273 1.313.21.513.74.664 1.29.664H3v13H1.977c-.575 0-1.04.427-1.04 1s.465 1 1.04 1H30.17c.574 0 1.04-.427 1.04-1s-.466-1-1.04-1H29V17h1.684c.557 0 .933-.15 1.147-.664.22-.513-.03-.92-.42-1.313zM14 30H8V17h6v13zm10-7h-6v-6h6v6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-hot"><title>hot</title><path d="M17 19.195v-7.93c0-.666-.337-1.205-1-1.205-.66 0-1 .538-1 1.205v7.93c-2 .517-3.03 2.1-3.03 3.973 0 2.294 1.8 4.154 4.08 4.154 2.28 0 4.003-1.86 4.003-4.154 0-1.873-1.053-3.456-3.053-3.973zm5-2.923V5.526C22 2.48 19.025.004 16 .004c-3.026 0-6 2.477-6 5.522v10.746c-2 1.66-3.038 4.19-3.038 6.896 0 4.872 4.068 8.836 8.91 8.836 4.84 0 9.1-3.963 9.1-8.836 0-2.705-.972-5.236-2.972-6.896zm-6 13.32c-3.526 0-6.34-2.874-6.34-6.423 0-2.42 1.34-4.53 3.34-5.63V5.52c0-1.72 1.294-3.11 3-3.11 1.707 0 3 1.397 3 3.11v12.03c2 1.094 3.338 3.2 3.338 5.617 0 3.55-2.81 6.425-6.338 6.425z"/></symbol><symbol viewBox="0 0 32 32" id="icon-info"><title>info</title><path d="M15.9.004c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM13.792 5.54c.534-.494 1.17-.74 1.91-.74s1.374.246 1.903.74c.53.492.794 1.085.794 1.78 0 .693-.27 1.284-.81 1.772s-1.17.732-1.9.732c-.74 0-1.38-.244-1.91-.732s-.8-1.08-.8-1.773c0-.7.26-1.29.8-1.78zM20 26h-8v-1.008c0-.018.343-.04.57-.068.23-.027.362-.073.526-.137.292-.11.553-.267.67-.472.12-.206.234-.477.234-.815v-7.968c0-.32-.16-.6-.306-.842s-.372-.436-.59-.582c-.165-.11-.137-.214-.47-.315-.333-.1-.634-.163-.634-.19v-1l6.25-.356-.25.205v10.87c0 .32.227.59.364.815.137.224.412.39.668.5.183.082.224.155.443.22.22.062.525.108.525.135V26z"/></symbol><symbol viewBox="0 0 32 32" id="icon-kettle"><title>kettle</title><path d="M31.983 26c0-3.997-1.984-7.12-3.983-9.62v-5.855c0-5.8-4.65-10.52-10.5-10.52S7 4.723 7 10.525v5.855c0 .283-.44.575-.672.878l-1.16-1.18c-.78-.774-2.03-.774-2.81 0L.592 17.834c-.78.774-.777 2.028.004 2.802l3.055 3.132c.6.86.35 6.253.35 6.253 0 1.1.37 1.98 1.48 1.98h24.51c1.1 0 2.01-.88 2.01-1.97v-3.97c0-.04 0-.05-.01-.06zM14.815 10.67c0 .447.053.865.235 1.242-1.806.337-3.05 1.006-5.05 1.948v-3.336c0-4.162 3.302-7.55 7.5-7.55S25 6.36 25 10.524v3.336c-1-.942-3.015-1.61-4.82-1.95.18-.376.377-.794.377-1.24 0-1.596-1.262-2.89-2.87-2.89s-2.872 1.295-2.872 2.89zM28.237 29H25v-4.84c0-2.842-3.52-8.2-6.61-8.623 6.635.294 9.932 5.245 9.9 8.74-.033 3.495-.053 4.723-.053 4.723z"/></symbol><symbol viewBox="0 0 32 32" id="icon-key"><title>key</title><path d="M32 25.774c.01-.175-.054-.346-.178-.47L19.714 13.197c1.118-3.49.3-7.464-2.468-10.233C13.3-.98 6.904-.98 2.96 2.964-.987 6.91-.987 13.306 2.96 17.25c2.768 2.77 6.74 3.587 10.23 2.47l1.755 1.755c.12.12.284.183.454.177l4.78-.187L20 26.14c-.012.34.293.648.63.63l4.676-.18-.185 4.79c0 .17.06.333.18.452.16.146.3.187.47.176l5.67.002c.31-.02.55-.263.57-.565V25.78zM9.663 9.668C8.43 10.9 6.433 10.9 5.2 9.668s-1.234-3.232 0-4.465 3.23-1.233 4.464 0 1.233 3.233 0 4.465z"/></symbol><symbol viewBox="0 0 32 32" id="icon-lock"><title>lock</title><path d="M25.9 15H25V9.004c0-4.963-4.037-9-9-9s-9 4.037-9 9V15H5.9C4.25 15 3 16.354 3 18.004v11C3 30.654 4.25 32 5.9 32h20c1.65 0 3.1-1.346 3.1-2.996v-11C29 16.354 27.55 15 25.9 15zM11 9.004c0-2.76 2.24-5 5-5s5 2.24 5 5V15H11V9.004z"/></symbol><symbol viewBox="0 0 32 32" id="icon-magnify-in"><title>magnify-in</title><path d="M15 6h-4v5H6v3h5v5h4v-5h4v-3h-4zm16.415 20.99l-.193-.192-7.69-7.722c1.067-1.848 1.688-4 1.703-6.29C25.28 5.773 19.655 0 12.675 0h-.085C5.647 0-.005 5.438-.05 12.42-.092 19.43 5.53 25 12.513 25h.083c2.32 0 4.496-.428 6.367-1.526l7.684 7.817c.192.2.193.25.193.25.58.59 1.522.61 2.103.03l2.472-2.47c.58-.58.58-1.51 0-2.1zM19.23 19.338C17.455 21.11 15.098 22 12.596 22h-.062c-5.193 0-9.39-4.347-9.358-9.56C3.208 7.26 7.432 3 12.59 3h.064c2.516 0 4.875 1.144 6.642 2.94 1.767 1.798 2.732 4.2 2.716 6.728-.017 2.514-1.004 4.898-2.78 6.67z"/></symbol><symbol viewBox="0 0 32 32" id="icon-magnify"><title>magnify</title><path d="M31.415 26.982l-.193-.193-7.69-7.73c1.067-1.85 1.688-4 1.703-6.29.045-7-5.58-12.77-12.56-12.77h-.084C5.65 0 0 5.43-.05 12.42-.092 19.43 5.53 25 12.513 25h.083c2.32 0 4.673-.433 6.544-1.53L27 31.288v.047l.015.217c.58.584 1.435.595 2.016.012l2.43-2.475c.58-.59.54-1.53-.04-2.11zm-12.184-7.65C17.46 21.106 15.1 22 12.6 22h-.062c-5.193 0-9.39-4.347-9.358-9.56C3.208 7.26 7.432 3 12.59 3h.064c2.516 0 4.875 1.14 6.642 2.936 1.767 1.797 2.732 4.2 2.716 6.727-.017 2.515-1.004 4.898-2.78 6.67z"/></symbol><symbol viewBox="0 0 32 32" id="icon-menu"><title>menu</title><path d="M29.5 13h-27C1.12 13 0 14.343 0 16s1.12 3 2.5 3h27c1.38 0 2.5-1.343 2.5-3s-1.12-3-2.5-3zm0 10h-27C1.12 23 0 24.343 0 26s1.12 3 2.5 3h27c1.38 0 2.5-1.343 2.5-3s-1.12-3-2.5-3zM2.5 9h27C30.88 9 32 7.657 32 6s-1.12-3-2.5-3h-27C1.12 3 0 4.343 0 6s1.12 3 2.5 3z"/></symbol><symbol viewBox="0 0 32 32" id="icon-message"><title>message</title><path d="M28.7 1H3.1C1.333 1 0 3.104 0 4.87v16C0 22.64 1.333 24 3.1 24H5v5.05s-.18 1.155.67 1.56c1.067.503 2.032-.346 2.032-.346L13.85 24H28.7c1.767 0 3.3-1.362 3.3-3.13v-16C32 3.105 30.468 1 28.7 1zm.3 19.87c0 .11-.19.13-.3.13H12.697L8 25.877V21H3.1c-.11 0-.1-.02-.1-.13v-16c0-.11-.01-.87.1-.87h25.6c.11 0 .3.76.3.87v16zM23.915 14H7.885c-.768 0-1.39.73-1.39 1.5s.622 1.5 1.39 1.5h16.03c.77 0 1.392-.73 1.392-1.5s-.623-1.5-1.392-1.5zm0-6H7.885c-.768 0-1.39.73-1.39 1.5s.622 1.5 1.39 1.5h16.03c.77 0 1.392-.73 1.392-1.5S24.684 8 23.915 8z"/></symbol><symbol viewBox="0 0 32 32" id="icon-mobile"><title>mobile</title><path d="M25 2.836C25 1.27 23.73 0 22.164 0H9.836C8.27 0 7 1.27 7 2.836v26.33C7 30.73 8.27 32 9.836 32h12.33C23.73 32 25 30.73 25 29.164V2.836zM12.898 2H18.9c.498 0 .9.504.9 1s-.402 1-.898 1H12.9c-.498 0-.9-.504-.9-1s.402-1 .898-1zM15.9 30.372c-.832 0-1.512-.68-1.512-1.512 0-.83.68-1.512 1.512-1.512s1.512.68 1.512 1.512-.68 1.512-1.512 1.512zM23 26H9V5h14v21z"/></symbol><symbol viewBox="0 0 32 32" id="icon-monthly-dd"><title>monthly-dd</title><path d="M7.5 5.625c.828 0 1.5-.672 1.5-1.5V1.5C9 .672 8.328 0 7.5 0S6 .672 6 1.5v2.623c0 .83.672 1.502 1.5 1.502zm17 0c.828 0 1.5-.672 1.5-1.5V1.5c0-.828-.672-1.5-1.5-1.5S23 .672 23 1.5v2.623c0 .83.672 1.502 1.5 1.502zM29 3h-1v1.125c0 1.93-1.57 3.5-3.5 3.5s-3.5-1.57-3.5-3.5V3H11v1.125c0 1.93-1.57 3.5-3.5 3.5S4 6.055 4 4.125V3H3C1.343 3 0 4.567 0 6.223v22.614C0 30.494 1.343 32 3 32h26c1.657 0 3-1.506 3-3.163V6.223C32 4.567 30.657 3 29 3zm0 26H3V9h26v20zM15 19c0-2.977-.83-5-3.94-5H7v10h4.06c3.11 0 3.94-2.054 3.94-5zm-6 3v-6h1.31c1.62 0 2.69 1.288 2.69 3 0 1.71-1.07 3-2.69 3H9zm16-3c0-2.977-1.113-5-4.224-5H17v10h3.776C23.886 24 25 21.946 25 19zm-6 3v-6h1.31c1.62 0 2.69 1.29 2.69 3 0 1.712-1.07 3-2.69 3H19z"/></symbol><symbol viewBox="0 0 32 32" id="icon-network"><title>network</title><path d="M28.5 24c-1.4 0-2.6.8-3.2 2H9v-.6l11.1-11.1c1.2.4 2.7.2 3.6-.8 1.4-1.4 1.4-3.6 0-4.9-1.4-1.4-3.6-1.4-4.9 0-1 1-1.2 2.4-.8 3.6L7.2 23H6V6.7c1.2-.6 2-1.8 2-3.2C8 1.6 6.4 0 4.5 0S1 1.6 1 3.5c0 1.4.8 2.6 2 3.2V23H0v9h9v-3h16.3c.6 1.2 1.8 2 3.2 2 1.9 0 3.5-1.6 3.5-3.5S30.4 24 28.5 24z"/></symbol><symbol viewBox="0 0 32 32" id="icon-no-exit"><title>no-exit</title><path d="M15.9.004c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zm0 28c-6.627 0-12-5.373-12-12 0-2.29.64-4.427 1.753-6.247l16.495 16.495c-1.82 1.11-3.96 1.752-6.248 1.752zm10.248-5.753L9.653 5.76c1.82-1.112 3.96-1.753 6.247-1.753 6.627 0 12 5.373 12 12 0 2.29-.64 4.428-1.752 6.247z"/></symbol><symbol viewBox="0 0 32 32" id="icon-pdf"><title>pdf</title><path d="M26.213 18.425c-.427-.42-1.372-.643-2.812-.662-.97-.01-2.14.075-3.38.248-.55-.31-1.12-.66-1.56-1.08-1.2-1.12-2.2-2.68-2.83-4.39.04-.16.08-.3.11-.44 0 0 .68-3.84.5-5.14-.02-.18-.04-.23-.09-.37l-.06-.15c-.18-.42-.54-.65-1.11-.63l-.33.2h-.01c-.63 0-1.14.11-1.28.59-.41 1.52.02 3.67.78 6.6l-.19.43c-.55 1.34-1.24 2.66-1.84 3.86l-.08.14c-.64 1.25-1.22 2.31-1.74 3.21l-.54.28c-.04.02-.97.51-1.184.65-1.85 1.11-3.08 2.36-3.28 3.36-.067.32-.02.724.31.913l.526.26c.23.11.47.17.716.17 1.32 0 2.85-1.643 4.96-5.324 2.44-.8 5.21-1.45 7.64-1.82 1.85 1.042 4.127 1.77 5.565 1.77.253 0 .473-.03.65-.077.28-.07.51-.23.65-.44.28-.42.338-1 .26-1.59-.022-.177-.162-.39-.314-.54zm-19.7 7.018c.24-.658 1.194-1.958 2.6-3.11.09-.073.308-.277.507-.467-1.472 2.348-2.457 3.284-3.106 3.577zm8.338-19.2c.43 0 .67 1.07.69 2.07s-.21 1.706-.5 2.226c-.24-.77-.35-1.99-.35-2.78 0 0-.01-1.52.18-1.52zm-2.48 13.683c.3-.53.61-1.086.92-1.677.77-1.45 1.25-2.58 1.61-3.52.72 1.3 1.61 2.41 2.66 3.29.13.11.27.22.42.33-2.13.42-3.97.93-5.59 1.56zm13.44-.12c-.13.08-.5.128-.74.128-.77 0-1.72-.353-3.06-.927.52-.038.99-.057 1.41-.057.78 0 1.01-.003 1.76.19s.77.584.64.666zm2.38-13.57L23.7 1.77C22.725.798 20.775 0 19.4 0h-15C3.025 0 2 1.13 2 2.504v27C2 30.88 3.025 32 4.4 32h23c1.375 0 2.6-1.12 2.6-2.496v-19c0-1.375-.845-3.296-1.818-4.268zm-1.47 1.412c.1.098.2.352.29.352H22V2.896c0 .095.206.19.304.29l4.414 4.462zM28 29.504c0 .27-.33.496-.6.496h-23c-.27 0-.4-.225-.4-.496v-27c0-.27.13-.504.4-.504h15c.15 0 .6.023.6.057V10h7.847c.034 0 .153.353.153.504v19z"/></symbol><symbol viewBox="0 0 32 32" id="icon-pencil"><title>pencil</title><path d="M21.877.004l-2.916 2.83s9.73 9.76 9.73 9.663c0-.098 2.82-2.928 2.82-2.928L21.88 0zm-3.79 3.904L2.443 20.488.5 32.003l11.665-1.757L27.71 13.57l-9.624-9.662zM5.167 28.88l-1.46-1.463.78-4.978 1.146-1.24.035.03-.02.02 5.745 5.69-1.175 1.23-5.054.68z"/></symbol><symbol viewBox="0 0 32 32" id="icon-person-add"><title>person-add</title><path d="M30.443 21.938c-.306-.58-.69-1.11-1.14-1.572-.3-.31-.627-.588-.98-.833-1.055-.736-2.327-1.166-3.695-1.166-1.368 0-2.64.43-3.697 1.166-.35.245-.68.525-.98.833-.44.463-.83.992-1.14 1.572-.51.966-.8 2.072-.8 3.247 0 1.175.29 2.282.8 3.248 1.13 2.125 3.31 3.57 5.82 3.57 2.51 0 4.7-1.445 5.82-3.57.51-.966.8-2.073.8-3.248 0-1.175-.29-2.28-.8-3.247zM28 26h-2v2.163c0 .55-.45 1-1 1s-1-.45-1-1V26h-2c-.55 0-1-.45-1-1s.45-1 1-1h2v-1.837c0-.55.45-1 1-1s1 .45 1 1V24h2c.55 0 1 .45 1 1s-.45 1-1 1zm-10.958 3.366c-.674-1.277-1.03-2.723-1.03-4.18 0-1.46.355-2.904 1.03-4.182.393-.745.89-1.427 1.473-2.03.387-.4.814-.763 1.27-1.08.764-.532 1.597-.92 2.47-1.176 1.09-1.754 1.75-3.95 1.75-6.348 0-1.18-.166-2.31-.455-3.366-1.114-4.07-4.182-7-7.802-7-3.307 0-6.15 2.447-7.47 5.972-.497 1.336-.785 2.82-.785 4.394 0 3.778 1.615 7.075 4.02 8.886.24 1.424-.604 2.342-2.004 3.012-5.46.788-9.27 2.572-9.27 4.65 0 2.808 6.94 5.084 15.5 5.084 1.13 0 2.22-.052 3.29-.13-.8-.693-1.49-1.53-2-2.506z"/></symbol><symbol viewBox="0 0 32 32" id="icon-person"><title>person</title><path d="M22.847 22.33c-1.604-.713-2.538-1.7-2.156-3.297 2.32-1.853 3.85-5.038 3.85-8.663 0-1.18-.17-2.31-.47-3.366-1.15-4.07-4.31-7-8.05-7-3.41 0-6.34 2.447-7.7 5.972-.51 1.336-.81 2.82-.81 4.394 0 3.778 1.67 7.075 4.15 8.886.25 1.424-.62 2.342-2.07 3.012C3.96 23.056.02 24.84.02 26.92c0 2.807 7.162 5.083 16 5.083s16-2.276 16-5.083c0-2.03-3.755-3.777-9.17-4.59z"/></symbol><symbol viewBox="0 0 32 32" id="icon-phone"><title>phone</title><path d="M3.25 9.87c.82 3.74 3.61 8.43 7.83 12.65 4.22 4.22 8.91 7 12.65 7.83 2.42.53 4.45.24 5.7-1.01l2.12-2.11c.88-.88.88-2.31 0-3.19l-5.36-3.68c-.88-.88-2.31-.88-3.19 0l-1.76 1.76c-1.07 1.07-4.11-.25-6.8-2.94-2.69-2.69-4.01-5.74-2.94-6.8l1.76-1.76c.88-.88.88-2.31 0-3.19l-3.7-5.37c-.88-.88-2.31-.88-3.19 0L4.26 4.17c-1.25 1.25-1.54 3.28-1.01 5.7z"/></symbol><symbol viewBox="0 0 32 32" id="icon-piggy-bank"><title>piggy-bank</title><path d="M32 11.007c0-1.3-1.078-2.356-2.407-2.356-.583 0-1.11.22-1.526.55C25.492 5.99 21.053 3.86 16 3.86c-1.99 0-3.888.33-5.613.927l-3.3-1.63c-.42-.206-.98-.187-1.38.054-.4.24-.707.67-.707 1.13v3.58C4 8.8 3.414 10 2.83 11h-.864C.886 11 0 11.724 0 12.783v5.72C0 19.56.885 20 1.966 20h.864C3.473 22 4 22.685 5 23.624v4.223C5 28.883 6.276 29 7.335 29h2.888c1.06 0 1.777-.117 1.777-1.154v-.853c1 .278 2.664.438 4 .438 1.336 0 3-.16 4-.43v.86c0 1.04.718 1.16 1.777 1.16h2.888c1.06 0 2.335-.11 2.335-1.15v-4.23c2-2.1 3.624-4.89 3.624-7.98 0-.8-.202-1.58-.39-2.34 1.07-.24 1.766-1.17 1.766-2.29zm-24.766 2.72c-.827 0-1.498-.655-1.498-1.465s.67-1.466 1.498-1.466 1.498.656 1.498 1.466-.67 1.466-1.498 1.466z"/></symbol><symbol viewBox="0 0 32 32" id="icon-pin"><title>pin</title><path d="M15.9.004c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zm0 16c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-play"><title>play</title><path d="M16 2C8.3 2 2 8.3 2 16s6.3 14 14 14 14-6.3 14-14S23.7 2 16 2zm-3.1 19.6V10.4l8.4 5.6-8.4 5.6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-pound-circle"><title>pound-circle</title><path d="M16 0C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0zm3.1 14.5v2.4h-4.2v4.7h6V24H9.6v-2.4h2.2v-4.7H10v-2.4h1.8v-2.2c0-2.8 2.2-4.8 5.2-4.8 1.2 0 2.5.3 3.9.8l-.8 2.3c-.9-.4-1.7-.6-2.5-.6-1.5 0-2.6 1-2.6 2.5v1.9h4.1v.1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-pound-note"><title>pound-note</title><path d="M32 7.997C32 6.342 30.658 5 29.003 5H2.997C1.342 5 0 6.342 0 7.997v17.005C0 26.658 1.342 28 2.997 28h26.005C30.658 28 32 26.658 32 25.003V7.997zM29 26H3V8h26v18zM8.49 17c0-2.94 1.696-5 4.16-7H5v14h7.65c-2.464-2-4.16-4.06-4.16-7zm15.02 0c0 2.94-1.696 5-4.16 7H27V10h-7.65c2.464 2 4.16 4.06 4.16 7zm-10.8-2.02c.136.34.274 1.02.412 1.02H12v2h1.606c.072 0 .134-.356.185-.205.05.152.08-.025.08.13 0 .248-.04.317-.14.543-.09.224-.21.35-.35.543-.14.2-.31.33-.49.49-.18.16-.37.28-.57.4l.86 1.26c.27-.2.54-.34.81-.41.27-.07.53-.1.78-.1.31 0 .56.03.76.08.2.06.41.12.61.19.19.07.41.12.64.17.23.05.52.07.87.07s.71-.06 1.09-.19c.38-.12.73-.35 1.06-.67l-.82-1.39c-.247.27-.467.43-.653.5-.19.07-.374.1-.555.1-.185 0-.362-.01-.54-.04-.172-.03-.35-.07-.534-.12-.185-.03-.364-.07-.544-.1-.18-.03-.36-.05-.54-.05-.126 0-.26.02-.4.06-.136.04-.315.13-.535.26l-.03-.022c.305-.24.57-.51.8-.82.22-.306.33-.676.33-1.106 0-.155-.007.36-.02.225-.015-.142-.046.248-.09.248H17v-2h-1.77c-.138 0-.247-.705-.323-.88-.078-.174-.134-.453-.165-.585-.033-.135-.053-.314-.064-.414-.01-.1-.015-.234-.015-.35 0-.38.124-.702.365-.93.245-.23.572-.353.986-.353.348 0 .622.07.82.21.197.14.343.31.44.5.097.2.158.74.185.95.02.21.04.86.05.86h1.86c0-1-.3-2.32-.88-2.9-.59-.59-1.41-1.055-2.47-1.055-.58 0-1.09-.014-1.53.13-.44.15-.81.305-1.1.557-.29.255-.52.525-.67.855-.15.33-.23.79-.23 1.16 0 .42.07.91.2 1.245z"/></symbol><symbol viewBox="0 0 32 32" id="icon-present"><title>present</title><path d="M15 9H5.892C4.24 9 3 10.31 3 11.964V19h12V9zm10.932 23C27.585 32 29 30.65 29 28.998V21H17v11h8.932zM15 32V21H3v7.998C3 30.65 4.24 32 5.892 32H15zM25.932 9H17v10h12v-7.036C29 10.31 27.585 9 25.932 9zM21.05.004c-1.863 0-2.992 1.6-3.9 2.886-.17.243-.34.482-.51.704l-.468.623-.26.346-.263-.35-.47-.62c-.17-.22-.34-.46-.51-.703-.91-1.286-2.04-2.886-3.9-2.886-2.19 0-3.96 1.776-3.96 3.958 0 2.183 1.77 3.96 3.95 3.96.34 0 1.09-.006 1.98-.012 1.03-.007 2.22-.014 3.16-.016.93.003 2.13.01 3.16.016.89.006 1.64.01 1.98.01 2.18 0 3.96-1.775 3.96-3.958C25 1.78 23.22.004 21.04.004zm-8.313 5.902c-.88.006-1.63.01-1.965.01-1.077 0-1.954-.876-1.954-1.954 0-1.077.877-1.954 1.954-1.954.826 0 1.556 1.035 2.263 2.037.186.263.37.523.553.764l.455.6.362.48-1.668.01zm8.314.01c-.33 0-1.08-.004-1.96-.01l-1.67-.01.36-.48.46-.607c.19-.25.37-.51.56-.77.71-1 1.44-2.04 2.27-2.04 1.08 0 1.96.87 1.96 1.95s-.88 1.95-1.95 1.95z"/></symbol><symbol viewBox="0 0 32 32" id="icon-print"><title>print</title><path d="M20.247 15H11.75c-.55 0-.998.448-.998 1s.447 1 1 1h8.495c.552 0 1-.448 1-1s-.448-1-1-1zm0 4H11.75c-.55 0-.998.448-.998 1s.447 1 1 1h8.495c.552 0 1-.448 1-1s-.448-1-1-1zm8.755-12H25V3.128C25 2.008 24.253 1 23.133 1H8.867C7.747 1 7 2.01 7 3.128V7H2.998C1.348 7 0 7.937 0 9.586v8.864C0 20.1 1.35 21 2.998 21H7v3.663l1.946 2.026 2.15 2.23L13.083 31h10.05C24.253 31 25 30 25 28.88V21h4.002c1.65 0 2.998-.9 2.998-2.55V9.586C32 7.936 30.65 7 29.002 7zM9 3h14v4H9V3zm18 16h-2v-4h-2v14h-7.918L15 28.88v-4.216C15 23.56 14.186 23 13.083 23H9v-8H7v4H5v-6h22v6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-quarterly-dd"><title>quarterly-dd</title><path d="M16 0C7.164 0 0 7.163 0 16s7.164 16 16 16 16-7.163 16-16S24.836 0 16 0zm0 29C8.832 29 3 23.168 3 16S8.832 3 16 3v13h13c0 7.168-5.832 13-13 13z"/></symbol><symbol viewBox="0 0 32 32" id="icon-question-circle"><title>question-circle</title><path d="M16 .004c-8.835 0-16 7.165-16 16s7.165 16 16 16 16-7.165 16-16-7.165-16-16-16zm-.266 26.87c-1.406 0-2.408-1.096-2.408-2.503 0-1.37 1.002-2.31 2.408-2.31 1.405 0 2.408.94 2.408 2.32 0 1.41-1.003 2.51-2.408 2.51zm1.72-7.35l-.03.476H14v-1.01c0-3.693 4.264-4.785 4.264-7.6 0-1.72-1.297-2.877-3.08-2.877-1.316 0-2.56.564-3.96 1.437l-1.53-2.847c1.907-1.282 4.003-1.968 6.13-1.968 3.79 0 6.477 2.488 6.477 5.805 0 4.5-4.53 5.96-4.84 8.585z"/></symbol><symbol viewBox="0 0 32 32" id="icon-quote"><title>quote</title><path d="M28.232 6.235L23.768 1.77C22.795.796 20.875 0 19.5 0h-15C3.127 0 2 1.127 2 2.502v27.003C2 30.88 3.126 32 4.5 32h23c1.374 0 2.5-1.12 2.5-2.494V10.503c0-1.375-.796-3.296-1.768-4.268zM22 2.895c0 .095.255.192.353.29l4.464 4.463c.098.098.195.352.29.352H22V2.895zm6 26.61c0 .272-.23.495-.5.495h-23c-.27 0-.5-.223-.5-.494V2.502c0-.27.23-.502.5-.502h15c.15 0 .5.022.5.056V10h7.945c.034 0 .055.352.055.503v19.003zM8.5 15H17c.552 0 1-.447 1-1 0-.553-.448-1-1-1H8.5c-.553 0-1 .447-1 1 0 .553.447 1 1 1zM23 18H8.5c-.553 0-1 .447-1 1 0 .553.447 1 1 1H23c.552 0 1-.447 1-1 0-.553-.448-1-1-1zm0 5H8.5c-.553 0-1 .447-1 1 0 .553.447 1 1 1H23c.552 0 1-.447 1-1 0-.553-.448-1-1-1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-recycle"><title>recycle</title><path d="M31.164.87L27.312 4.7C24.417 1.812 20.417.002 16 .002 7.132.002-.048 7 0 16h4.004S4 15.987 4 15.958C4 12.762 5.246 9.8 7.513 7.54 9.78 5.28 12.793 4.035 16 4.035s6.218 1.244 8.484 3.504l-3.62 3.6c-.32.32-.093.85.36.85h9.766c.558 0 1.01-.44 1.01-1V1.22c0-.435-.528-.664-.836-.356zM28 16.046c0 3.196-1.247 6.16-3.514 8.42-2.267 2.26-5.28 3.505-8.485 3.505s-6.21-1.24-8.48-3.5l3.62-3.61c.32-.31.1-.85-.36-.85H1.01C.453 20 0 20.45 0 21v9.78c0 .436.528.665.836.357l3.85-3.83c2.896 2.89 6.896 4.695 11.314 4.695C24.867 32.002 32.047 25 32 16h-4.004s.005.017.005.046z"/></symbol><symbol viewBox="0 0 32 32" id="icon-remove"><title>remove</title><path d="M24.63 10H7.37c-1 0-1.743.906-1.653 2l1.488 18.007C7.295 31.1 8.187 32 9.187 32h13.627c1 0 1.89-.894 1.98-1.988L26.284 12c.09-1.095-.653-2-1.653-2zM12 28.05c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5V13.81c0-.827.448-1.498 1-1.498s1 .67 1 1.5V28.05zm5 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5V13.81c0-.827.448-1.498 1-1.498s1 .67 1 1.5V28.05zm5 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5V13.81c0-.827.448-1.498 1-1.498s1 .67 1 1.5V28.05zM24.993 4H23V1.003C23 .45 22.497 0 21.944 0H10.478C9.926 0 9 .45 9 1.003V4H7.007C5.35 4 4 5.367 4 7.023V8h24v-.977C28 5.367 26.65 4 24.993 4zM21 4H11V2h10v2z"/></symbol><symbol viewBox="0 0 32 32" id="icon-renewable"><title>renewable</title><path d="M15.902.004C7.065.004-.1 7.166-.1 16.004c0 4.614 1.968 8.765 5.097 11.682.275-3.668 1.398-6.39 2.935-8.334 1.795-2.268 4.17-3.507 6.532-3.912 3.447-.594 5.26-1.512 6.252-2.39.543-.547.785-2.07.785-2.07s-1.45.9-2.04 1.22c-.73.502-2.35 1.317-5.24 1.812-2.68.458-5.4 1.882-7.42 4.442-.36.462-.71.963-1.02 1.5-2.38-5.23 2.79-9.246 8.63-10.018 6.41-.846 9.49-2.82 9.49-2.82.61 6.205-1.64 12.942-6.96 15.138-3.83 1.58-6.83 1.898-8.95.476-.84 1.796-1.35 3.87-1.38 6.267 2.63 1.884 5.84 3.008 9.32 3.008 8.84 0 16-7.163 16-16 0-8.836-7.16-16-15.99-16z"/></symbol><symbol viewBox="0 0 32 32" id="icon-results"><title>results</title><path d="M0 9h27v6H0zm0-8h32v6H0zm0 16h24v6H0zm0 8h19v6H0z"/></symbol><symbol viewBox="0 0 32 32" id="icon-save"><title>save</title><path d="M31.12 5.753L26.25.88C25.688.32 24.925 0 24.13 0H5.437C2.437 0 0 2.443 0 5.442v21.125C0 29.565 2.44 32 5.438 32h21.125C29.56 32 32 29.565 32 26.566V7.874c0-.795-.316-1.56-.88-2.12zM18 3h3v7h-3V3zm11 23.566C29 27.906 27.903 29 26.562 29H5.438C4.098 29 3 27.907 3 26.566V5.442C3 4.102 4.097 3 5.438 3H6v9h17V3h1.13L29 7.874v18.692z"/></symbol><symbol viewBox="0 0 32 32" id="icon-share"><title>share</title><path d="M31.485 14.416L18.473 4.2c-.333-.26-.667-.305-1.046-.12-.38.185-.427.57-.427.99v5.985C7 11.327.093 17.653.093 27.787c0 .32.163.336.328.056.98-1.58 3.58-8.058 16.58-8.28v5.94c0 .42.05.806.43.99.38.185.74.14 1.07-.12l13.03-10.217c.27-.21.4-.53.4-.87 0-.34-.17-.66-.44-.87z"/></symbol><symbol viewBox="0 0 30 30" id="icon-shield"><title>shield</title><style>.st0{fill:#1C1F4E;}</style><path class="st0" d="M15.1 30.1l-.8-.4c-.2-.1-2-1-6.2-4.4-4.5-3.6-6.6-9.9-6.6-13.2V3L15.1.1 28.7 3v9.1c0 3.3-2 9.6-6.6 13.2-4.2 3.4-6 4.3-6.2 4.4l-.8.4zM5.3 6v6c0 2.1 1.5 7.3 5.2 10.3 2.3 1.9 3.8 2.9 4.7 3.5.9-.6 2.4-1.6 4.7-3.5 3.6-2.9 5.2-8.1 5.2-10.3V6l-9.9-2.1L5.3 6z"/><path class="st0" d="M20.6 12.2h-3.7V8.4h-3.7v3.8H9.4v3.7h3.8v3.8h3.7v-3.8h3.7z"/></symbol><symbol viewBox="0 0 32 32" id="icon-sim"><title>sim</title><path d="M20 0H8.804C7.472 0 6 1.08 6 2.406v27.196C6 30.928 7.472 32 8.804 32h14.403C24.527 32 26 30.928 26 29.602v-24L20 0zm-8 29h-.792C10.314 29 10 28.086 10 27.205V22h2v7zm0-9h-2v-5.594c0-.886.314-1.406 1.208-1.406H12v7zm6 9h-4v-3h4v3zm0-5h-4v-6h4v6zm0-8h-4v-3h4v3zm4 11.205c0 .88-.314 1.795-1.196 1.795H20v-7h2v5.205zM22 20h-2v-7h.804c.882 0 1.196.52 1.196 1.406V20z"/></symbol><symbol viewBox="0 0 32 32" id="icon-smiley"><title>smiley</title><path d="M16 .004c-8.837 0-16 7.164-16 16 0 8.837 7.163 16 16 16s16-7.163 16-16c0-8.836-7.163-16-16-16zm0 29c-7.16 0-12.985-5.832-12.985-13s5.825-13 12.985-13c7.16 0 12.985 5.832 12.985 13s-5.825 13-12.985 13z"/><ellipse cx="10.53" cy="12.77" rx="2.486" ry="2.474"/><ellipse cx="21.47" cy="12.77" rx="2.486" ry="2.474"/><path d="M23.433 19.02c-.238-.145-.51-.222-.79-.222-.528 0-1.008.268-1.283.716-1.113 1.798-3.043 2.873-5.163 2.873-.077 0-.143.01-.197.024-.06-.01-.123-.02-.196-.02-2.12 0-4.05-1.07-5.164-2.87-.276-.44-.756-.71-1.285-.71-.28 0-.552.08-.79.23-.342.21-.583.54-.676.93-.1.39-.03.79.18 1.14 1.66 2.69 4.55 4.3 7.73 4.3.08 0 .14-.01.2-.02.06.01.12.02.19.02 3.17 0 6.06-1.61 7.73-4.3.21-.34.27-.74.18-1.13-.1-.39-.34-.72-.68-.93zm-14.178.29c.033-.002.066-.013.1-.013.07 0 .14.012.21.026-.1-.02-.206-.022-.31-.012zm13.18.014c.068-.015.138-.026.21-.026.032 0 .065.01.1.014-.105-.01-.21-.01-.31.012zm1.203 1.125c.06-.39-.113-.79-.468-1.01-.106-.07-.22-.1-.335-.13.115.02.23.06.335.12.355.22.527.62.468 1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-sort"><title>sort</title><path d="M0 20h15v3H0zm0-6h12v3H0zm0-6h9v3H0zm31.92 9.12c-.13-.277-.404-.12-.703-.12h-4.244c-.193-7-4.68-12.498-11.867-12.498-.226 0-.24.214-.04.334C16.188 5.55 20.782 8 20.938 17h-4.21c-.3 0-.573-.157-.705.12-.13.275-.098.438.086.68l7.24 9.437c.15.195.37.268.61.268s.47-.135.61-.33l7.24-9.365c.18-.242.22-.415.08-.69z"/></symbol><symbol viewBox="0 0 32 32" id="icon-speech-circle"><title>speech-circle</title><path d="M15.9 6.804c5.854 0 10.6 3.863 10.6 8.627 0 4.77-4.746 8.63-10.6 8.63-.562 0-.927-.03-1.465-.1C12.158 26.24 9 26.65 7 26.71v-.56c1-.698 2.463-1.967 2.463-3.416 0-.2-.11-.4-.138-.594-2.397-1.582-3.977-3.997-3.977-6.705 0-4.764 4.698-8.627 10.552-8.627zm-16 9.2c0 8.837 7.163 16 16 16s16-7.163 16-16-7.163-16-16-16-16 7.163-16 16z"/></symbol><symbol viewBox="0 0 32 32" id="icon-speech"><title>speech</title><path d="M15.9 1.01c8.837 0 16 5.82 16 13s-7.163 13-16 13c-.85 0-1.632-.053-2.445-.157C10.02 30.29 6 30.907 2 30.997v-.84c2-1.05 3.95-2.962 3.95-5.146 0-.3-.05-.6-.093-.89-3.62-2.39-5.945-6.03-5.945-10.11 0-7.18 7.152-13 15.988-13z"/></symbol><symbol viewBox="0 0 32 32" id="icon-spinner"><title>spinner</title><path opacity=".25" d="M16 0a16 16 0 0 0 0 32 16 16 0 0 0 0-32m0 4a12 12 0 0 1 0 24 12 12 0 0 1 0-24"/><path d="M16 0a16 16 0 0 1 16 16h-4A12 12 0 0 0 16 4z"/></symbol><symbol viewBox="0 0 32 32" id="icon-star-half"><title>star-half</title><path d="M11.006 10.805l-11.08 1.607 7.987 7.798-1.845 11.01L16 26.023V.787z"/></symbol><symbol viewBox="0 0 32 32" id="icon-star"><title>star</title><path d="M31.9 12.412l-11.055-1.607L15.9.787l-4.944 10.018L-.1 12.412l8 7.798-1.888 11.01 9.888-5.198 9.89 5.2L23.9 20.21z"/></symbol><symbol viewBox="0 0 32 32" id="icon-starline-half"><title>starline-half</title><path d="M31.9 12.412l-11.056-1.607L15.9.787l-4.944 10.018L-.1 12.412l8 7.798-1.888 11.01 9.888-5.198 9.888 5.2L23.9 20.21l8-7.798zm-16 11.14l-.03.015.03-17.837 3.492 7.075L27.2 13.94l-5.65 5.507 1.333 7.776L15.9 23.55z"/></symbol><symbol viewBox="0 0 32 32" id="icon-starline"><title>starline</title><path d="M31.9 12.412l-11.056-1.607L15.9.787l-4.944 10.018L-.1 12.412l8 7.798-1.888 11.01 9.888-5.198 9.888 5.2L23.9 20.21l8-7.798zm-16 11.14l-6.983 3.67 1.334-7.776L4.6 13.94l7.808-1.136L15.9 5.73l3.492 7.075L27.2 13.94l-5.65 5.507 1.333 7.776L15.9 23.55z"/></symbol><symbol viewBox="0 0 32 32" id="icon-talk"><title>talk</title><path d="M30.172 26.82c0 1.265.828 2.36 1.828 2.895v.443c0 .04-.646.062-.953.062-1.89 0-3.618-.792-4.823-2.063-.728.194-1.513.3-2.312.3-4.418 0-8.006-3.185-8.006-7.112s3.58-7.11 7.997-7.11 7.998 3.183 7.998 7.11c0 1.537-.52 2.96-1.45 4.124-.19.41-.27.86-.27 1.35zM14.122 1.79c7.736 0 14.03 5.016 14.22 11.263-1.367-.61-2.878-.93-4.44-.93-2.655 0-5.163.928-7.06 2.615-1.968 1.75-3.052 4.095-3.052 6.606 0 1.24.265 2.44.77 3.55-.145.003-.29.006-.437.006-.754 0-1.334-.048-2.056-.14C9.01 27.815 5 28.362 2 28.443v-.748c2-.933 3.395-2.632 3.395-4.573 0-.27-.102-.537-.14-.797-3.22-2.118-5.315-5.355-5.315-8.98 0-6.385 6.33-11.557 14.184-11.557z"/></symbol><symbol viewBox="0 0 32 32" id="icon-tick-circle"><title>tick-circle</title><path d="M15.9.004c-8.836 0-16 7.163-16 16s7.164 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zm-3.347 24L6.4 17.784l2.978-3.012 3.174 3.21 9.87-9.978 2.977 3.01-12.85 12.99z"/></symbol><symbol viewBox="0 0 32 32" id="icon-tick"><title>tick</title><path d="M11.42 27.004L3 18.45l4.075-4.14 4.345 4.412L24.925 5.004 29 9.144z"/></symbol><symbol viewBox="0 0 32 32" id="icon-tv"><title>tv</title><path d="M32 25V2H0v23h12v1.78c-1 .08-1.81.27-2.5.37C7.89 27.39 6.73 29 6.73 30h18.34c0-1-1.06-2.61-2.67-2.84-.69-.1-1.4-.29-2.4-.37V25h12zM3 22V5h26v17H3zm4-11h3v7h2v-7h3V9H7m12.9 7l-2.04-7H15.9l3.06 9h1.94l3-9h-2"/></symbol><symbol viewBox="0 0 32 26.01" id="icon-twitter-brand"><title>twitter-brand</title><path d="M32 3.08a13.14 13.14 0 0 1-3.77 1A6.59 6.59 0 0 0 31.12.45a13.11 13.11 0 0 1-4.17 1.59 6.57 6.57 0 0 0-11.36 4.52 6.69 6.69 0 0 0 .17 1.5A18.64 18.64 0 0 1 2.23 1.2a6.58 6.58 0 0 0 2 8.77 6.55 6.55 0 0 1-3-.82v.08a6.57 6.57 0 0 0 5.26 6.44 6.57 6.57 0 0 1-1.73.23 6.45 6.45 0 0 1-1.23-.12 6.57 6.57 0 0 0 6.13 4.56 13.19 13.19 0 0 1-8.16 2.81 12.65 12.65 0 0 1-1.5-.09 18.58 18.58 0 0 0 10.06 3c12.08 0 18.68-10 18.68-18.68v-.85A13.43 13.43 0 0 0 32 3.08" fill="#55acee"/></symbol><symbol viewBox="0 0 32 32" id="icon-twitter"><title>twitter</title><path d="M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16S24.837 0 16 0zm8.142 12.324c.008.168.01.337.01.508 0 5.185-3.946 11.164-11.163 11.164-2.22 0-4.28-.65-6.02-1.763.3.036.62.055.93.055 1.83 0 3.53-.627 4.87-1.68-1.72-.032-3.17-1.166-3.67-2.725.24.046.482.07.74.07.353 0 .7-.048 1.03-.138-1.798-.36-3.15-1.946-3.15-3.847v-.05c.53.295 1.133.47 1.776.492-1.05-.704-1.745-1.905-1.745-3.266 0-.72.195-1.393.53-1.973 1.937 2.38 4.828 3.94 8.09 4.1-.067-.28-.1-.58-.1-.89 0-2.16 1.755-3.92 3.92-3.92 1.13 0 2.15.48 2.865 1.24.893-.17 1.732-.5 2.49-.95-.293.92-.915 1.69-1.725 2.17.793-.09 1.55-.3 2.25-.61-.52.79-1.186 1.48-1.953 2.03z"/></symbol><symbol viewBox="0 0 32 32" id="icon-ustyle"><title>ustyle</title><path fill="#548DCA" d="M15.1 14.1l-4.2 4.4 2.5.3"/><path fill="#437CBE" d="M15.1 14.1l1.8 5.2-3.5-.5"/><path fill="#4983C3" d="M15.1 14.1l1.8-1.1v6.3"/><path fill="#437CBE" d="M16.9 13l3.3 2.9-3.3 3.4"/><path fill="#568FCB" d="M16.9 13l3-2.4.3 5.3"/><path fill="#9BC6EB" d="M19.9 10.6l1.7 7.4-1.4-2.1"/><path fill="#68A0D6" d="M21.6 18l-4.7 1.3 3.3-3.4"/><path fill="#80B2E0" d="M21.6 18v6.4l-2.7-1.9"/><path fill="#5A94CE" d="M18.9 22.5l-2-3.2 4.7-1.3"/><path fill="#679FD6" d="M16.9 19.3l-4.3 8.2 3.3-1.2"/><path fill="#558FCB" d="M16.9 19.3l-1 7 3-3.8"/><path fill="#8FBDE6" d="M18.9 22.5l-1.7 5-1.3-1.2"/><path fill="#7DB1E0" d="M18.9 22.5l2.7 1.9-4.4 3.1"/><path fill="#417CBE" d="M16.9 19.3l-3.5-.5-3.2 6.9"/><path fill="#3D73B8" d="M16.9 19.3l-6.7 6.4 2.4 1.8"/><path fill="#558FCB" d="M10.9 18.5l-.7 7.2 3.2-6.9"/><path fill="#548DCA" d="M10.9 18.5L8 26.6l2.2-.9"/><path fill="#427BBD" d="M8 26.6l.7 3 1.5-3.9"/><path fill="#3D73B8" d="M10.2 25.7l.6 4.4-2.1-.5"/><path fill="#386FB4" d="M10.2 25.7l2.4 1.8-1.8 2.6"/><path fill="#427BBD" d="M12.6 27.5l-1.8 2.6 2.7-.4"/><path fill="#649ED5" d="M12.6 27.5l3.3-1.2-2.4 3.4"/><path fill="#87B8E4" d="M15.9 26.3l-.8 3-1.6.4"/><path fill="#93C1E8" d="M15.9 26.3l1.3 1.2-2.1 1.8"/><path fill="#5B95CF" d="M8.7 29.6l2 2.4.1-1.9"/><path fill="#568FCB" d="M10.8 30.1l2.7-.4-.8 2.1"/><path fill="#5E98D1" d="M10.8 30.1l-.1 1.9 2-.2"/><path fill="#8DBCE6" d="M12.7 31.8l2.4-2.5-1.6.4"/><path fill="#90BDE6" d="M12.7 31.8l1.4-.2 1-2.3"/><path fill="#A2CAEC" d="M14.1 31.6l1.3-2.1-.3-.2"/><path fill="#A1C9EC" d="M17.2 27.5l-1.8 2-.3-.2"/><path fill="#84B6E2" d="M10.7 32l-1.2-1-.8-1.4"/><path fill="#82B3E1" d="M8 26.6l.3 2.1.4.9"/><path fill="#558FCB" d="M10.9 18.5l3.6-5.7.6 1.3"/><path fill="#5B95CF" d="M14.5 12.8L10.8 15l.1 3.5"/><path fill="#72A9DB" d="M10.8 15l3.6-3.9.1 1.7"/><path fill="#5894CF" d="M19.9 10.6l-3.8.8.8 1.6"/><path fill="#7AAEDF" d="M19.9 10.6l-1.4-1.7-2.4 2.5"/><path fill="#95C0E7" d="M18.5 8.9l-3.4 1.4-.7.8 1.7.3"/><path fill="#70A8DB" d="M18.5 8.9l-4.7-3 1.3 4.4"/><path fill="#629DD5" d="M18.5 8.9l5.4-2.7-4 4.4"/><path fill="#99D1F3" d="M23.9 6.2L21 10l-1.1.6"/><path fill="#599BD4" d="M23.9 6.2l-1.6 5.3L21 10"/><path fill="#7FBBE7" d="M22.3 11.5l-2.4-.9L21 10"/><path fill="#78AEDE" d="M19.9 10.6l2.4.9-.7 6.5"/><path fill="#92C1E8" d="M22.3 11.5l1 5.2-1.7 1.3"/><path fill="#A1CAED" d="M23.3 16.7l-.3 4.8-1.4-3.5"/><path fill="#90BDE6" d="M21.6 18l1.4 3.5-1.4 2.9"/><path fill="#9BC6EB" d="M26.3 15.8l-3 .9 3.6 4"/><path fill="#95C1E8" d="M26.9 20.7l-3.9.8.3-4.8"/><path fill="#9CC6EA" d="M26.9 20.7l-.9 4.2-3-3.4"/><path fill="#93C1E8" d="M23 21.5l3 3.4-2.3 2.1m-.7-5.5l.7 5.5-2-3"/><path fill="#91BFE7" d="M21.4 24.5l2.3 2.5-2-3-.1.4"/><path fill="#98C4EA" d="M23.3 16.7l3-.9-3.8-3.4"/><path fill="#AFD3F0" d="M26.3 15.8l-2.6-4.4-1.2 1"/><path fill="#ABD0EF" d="M23.7 11.4l-1.3-.2-.1.3.2.9"/><path fill="#4E5861" d="M14.7 8.9l-.8 1.5 3 2.6"/><path fill="#020304" d="M7.6 0l1.5 3.5 2.2 3.9 2.7 3-1.5-3.6-2.8-3.4"/><path fill="#3F4040" d="M7.6 0l2.5 2.8 2.4 4-2.8-3.4"/><path fill="#111E2E" d="M12.6 10.3l2.5 3.9-1.1-3.8h-.2"/><path fill="#1B2837" d="M11.3 7.4l1.3 2.9 1.4.1"/><path fill="#585D61" d="M14.7 8.9l-2.2-2.1 1.5 3.6"/><path fill="#848687" d="M10.1 2.8l2.2 3.3 2.4 2.8-2.2-2.1"/><path fill="#183553" d="M14 10.4l2.9 2.6-1.8 1.2-1.1-3.8"/><path fill="#8B9DB0" d="M15.1 9.7l1 1.6.8 1.7-1-1.8"/></symbol><symbol viewBox="0 0 32 32" id="icon-uswitch"><title>uswitch</title><path d="M8.31 17.123V4.316H0V16.83c0 13.013 15.888 19.498 25.126 10.314-7.58 3.768-16.55-1.536-16.816-10.02zM25.174.553L18.447 7.74h2.572v9.433c0 4.06-3.94 7.48-8.61 6.06 5.71 6.745 16.91 2.87 16.91-6.06V7.738H32L25.174.553z"/></symbol><symbol viewBox="0 0 32 32" id="icon-variable"><title>variable</title><path d="M30.856 22.435c-.09-.217-.3-.435-.535-.435H26v-8.958c0-.32-.79-1.042-1.11-1.042h-6.52c-.154 0-.196.292-.305.4-.11.11-.065.488-.065.642V22h-5.062c-.234 0-.446.218-.535.435-.09.216-.04.542.126.707l8.69 8.692c.11.11.25.17.41.17.15 0 .3-.06.41-.17l8.69-8.692c.16-.166.21-.49.12-.707zm-17.02-2.832c.11-.108.164-.483.164-.637V10h4.863c.234 0 .446-.214.535-.43.09-.218.04-.54-.126-.706l-8.69-8.69c-.11-.11-.257-.17-.41-.17-.155 0-.302.06-.41.17L1.07 8.864c-.166.167-.215.49-.126.705.09.21.3.43.536.43H6v8.96c0 .32.592 1.03.912 1.03h6.52c.152 0 .295-.29.403-.4z"/></symbol><symbol viewBox="0 0 32 32" id="icon-warning-circle"><title>warning-circle</title><path d="M16 0C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0zm2.1 5l-.4 14h-3.4L14 5h4.1zM16 26.9c-1.5 0-2.4-1-2.4-2.5 0-1.4 1-2.5 2.4-2.5s2.4 1 2.4 2.5c0 1.4-1 2.5-2.4 2.5z"/></symbol><symbol viewBox="-9 -1 23 31" id="icon-warning"><title>warning</title><path d="M6 0l-.315 21h-4.32L1 0h5zM3.5 30C1.312 30 0 28.6 0 26.5 0 24.54 1.458 23 3.5 23S7 24.4 7 26.5C7 28.46 5.542 30 3.5 30z"/></symbol><symbol viewBox="0 0 32 32" id="icon-wifi"><title>wifi</title><path d="M30.58 11.44c-.56 0-1.12-.22-1.54-.66-3.33-3.49-7.81-5.41-12.61-5.41-4.78 0-9.25 1.91-12.58 5.37-.81.85-2.16.87-3 .06-.84-.8-.86-2.15-.05-3 4.14-4.3 9.69-6.67 15.64-6.67 5.97 0 11.54 2.39 15.68 6.72.81.85.78 2.19-.07 3-.41.4-.94.59-1.47.59zm-4 5.49c-.55 0-1.09-.21-1.51-.63-2.3-2.32-5.37-3.59-8.63-3.59-3.25 0-6.3 1.27-8.6 3.56-.83.83-2.17.83-3 0-.83-.83-.83-2.18 0-3 3.1-3.1 7.22-4.81 11.6-4.81 4.4 0 8.54 1.72 11.65 4.85.83.83.82 2.18-.01 3-.42.41-.96.62-1.5.62zm-4.46 5.92c-.58 0-1.16-.23-1.57-.7-1.07-1.18-2.53-1.83-4.11-1.83-1.57 0-3.02.64-4.08 1.8-.79.86-2.14.92-3 .13s-.92-2.14-.13-3c1.86-2.02 4.49-3.18 7.21-3.18 2.75 0 5.4 1.18 7.26 3.22.79.87.72 2.21-.15 3-.41.38-.92.56-1.43.56z"/><circle cx="16.59" cy="27.38" r="3.49"/></symbol><symbol viewBox="0 0 32 32" id="icon-wiki"><title>wiki</title><path d="M5.715 21.8c.407-.027.82-.047 1.24-.047 3.33 0 6.397.938 8.002 2.45.007.006.017.008.025.015.11.1.232.185.372.246.01.004.02.005.03.01.016.006.032.008.05.014.152.055.31.09.467.09.16 0 .32-.034.47-.09l.05-.016c.01-.004.02-.005.03-.01.14-.06.26-.144.37-.242.01-.007.02-.01.03-.017 1.61-1.51 4.67-2.45 8-2.45.42 0 .84.02 1.24.048.38.02.98-.1 1.26-.36s.66-.62.66-1V3.58c0-.727-.78-1.32-1.5-1.377-.47-.03-1.06-.05-1.54-.05-3.51 0-6.81.9-9 2.44-2.18-1.54-5.45-2.44-8.97-2.44-.49 0-1.1.028-1.57.06-.72.05-1.41.65-1.41 1.374v16.85c0 .38.28.746.56 1.007.28.26.77.386 1.16.366zM17 6.98c2-1.29 5-2.076 8-2.082V19c-3 .005-6 .588-8 1.617V6.98zM7 4.898c3 .007 6 .794 8 2.082v13.636c-2-1.03-5-1.612-8-1.617V4.89zm23.5-.324c-.803 0-1.5.65-1.5 1.455v17.96c-1-.02-3.488-.03-3.644-.03-3.717 0-7.14.95-9.454 2.57-2.312-1.63-5.64-2.58-9.358-2.58C6.39 23.97 4 23.98 3 24V6.03c0-.804-.697-1.456-1.5-1.456S0 5.226 0 6.03v19.45c0 .402.12.787.414 1.062.294.276.67.415 1.07.39.4-.027 4.225-.053 4.977-.053 3.52 0 6.76.99 8.45 2.59.01.01.03.01.04.02.13.11.27.2.42.26.02 0 .03 0 .05.01.16.06.33.09.5.09.17 0 .34-.04.5-.1l.05-.01c.15-.06.29-.16.42-.27.01-.01.03-.01.04-.03 1.7-1.6 4.94-2.59 8.46-2.59.75 0 4.59.02 4.99.05.41.03.85-.11 1.15-.39.296-.28.513-.668.513-1.07V6.03c0-.804-.695-1.456-1.5-1.456z"/></symbol><symbol viewBox="0 0 32 32" id="icon-xml"><title>xml</title><path d="M23.12 12.004h-4.228L15.9 16.41l-2.992-4.406H8.68l5.07 7.577-5.72 8.43h8.195v-2.86h-1.892L15.9 22.8l3.48 5.204h4.39l-5.718-8.423 5.068-7.57zm5.013-5.768l-4.465-4.464C22.696.8 20.775.004 19.4.004h-15c-1.375 0-2.5 1.125-2.5 2.5v27c0 1.375 1.125 2.5 2.5 2.5h23c1.375 0 2.5-1.125 2.5-2.5v-19c0-1.375-.795-3.296-1.767-4.268zM26.718 7.65c.098.098.195.218.29.354H21.9V2.896c.136.095.256.192.354.29l4.464 4.464zM27.9 29.504c0 .27-.23.5-.5.5h-23c-.27 0-.5-.23-.5-.5v-27c0-.27.23-.5.5-.5h15c.15 0 .32.02.5.053v7.947h7.947c.034.18.053.35.053.5v19z"/></symbol></svg>
|
data/dist/ustyle-content.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! uStyle version 1.16.2. Copyright uSwitch limited, all rights reserved. *//*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}h1,.us-more-item-title,.us-heading--1,h2,.us-heading--2,h3,.us-loader__text,.us-more-item-title.small,.us-heading--3,h4,.us-news-item-title,.us-guide-item-title,.us-heading--4,h5,.us-heading--5,h6,.us-heading--6,.us-field>label,.us-field>.us-faux-label,.us-validation__icon,.us-btn--stronger,.us-tab-title,.us-cta__title,.us-article__title,.us-font--heading-p,.us-font--heading-s,.us-content h1,.us-content .us-heading--1,.us-content h2,.us-content .us-heading--2,.us-content h3,.us-content .us-heading--3,.us-content h4,.us-content .us-heading--4,.us-content h5,.us-content .us-heading--5,.us-content h6,.us-content .us-heading--6{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;font-weight:700}blockquote,html,.us-field-toggle label,.us-content .plans-ending .us-btn,.us-btn,.us-news-item-readmorelink,.us-guide-item-readmorelink,.us-related__item-title,.us-font--normal{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif}blockquote{font-style:italic}.us-crumbs,.us-related__item-title{font-size:.875em;line-height:1.15em}.us-crumbs__item,.us-float--left,.us-img--left{float:left}.us-float--right,.us-img--right{float:right}.us-content .internal-menu,.us-list,.us-content .plans-ending .us-btn,.us-btn,.us-hero-description,.us-crumbs,.us-progress__nav,.us-progress__item,.us-list--reset,.us-reset,.us-content table img,.us-content table p,.us-content .plans-ending,.us-content .plans-ending img,.us-content .fuel-breakdown{padding:0;margin:0}.us-container:before,.us-hero-container:before,.us-tabs-nav-wrapper:before,.us-tabs-container:before,.us-overlay__body:before,.us-grid-row:before,.us-field:before,.us-toggle:before,.us-crumbs:before,.us-related__item-link:before,.us-clearfix:before,.us-content .plans-ending:before,.us-content .fuel-breakdown:before,.us-container:after,.us-hero-container:after,.us-tabs-nav-wrapper:after,.us-tabs-container:after,.us-overlay__body:after,.us-grid-row:after,.us-field:after,.us-toggle:after,.us-crumbs:after,.us-related__item-link:after,.us-clearfix:after,.us-content .plans-ending:after,.us-content .fuel-breakdown:after{display:table;content:" "}.us-container:after,.us-hero-container:after,.us-tabs-nav-wrapper:after,.us-tabs-container:after,.us-overlay__body:after,.us-grid-row:after,.us-field:after,.us-toggle:after,.us-crumbs:after,.us-related__item-link:after,.us-clearfix:after,.us-content .plans-ending:after,.us-content .fuel-breakdown:after{clear:both}.us-news-item-link,.us-guide-item-link,.us-more-item-link{border:1px solid #b0b8bf;border-radius:.3125em}.us-news-item-link:hover,.us-guide-item-link:hover,.us-more-item-link:hover{border-color:#008fe9}.us-content .internal-menu a:after,.us-list a:after,.us-news-item-readmore:after,.us-guide-item-readmore:after,.us-related__item-link--more:after{position:relative;left:0;display:inline;margin:0 0 0 .5em;font-size:.5em;line-height:0;vertical-align:middle;content:"\25b6\fe0e";transition:left 200ms}.us-loader--centered{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.us-loader--centered .us-loader__inner{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.us-news-item-link,.us-guide-item-link,.us-more-item-link,.us-news-item-image,.us-guide-item-image{-webkit-backface-visibility:hidden;backface-visibility:hidden}.us-form-input,.us-form-textarea,.us-content .plans-ending .us-btn,.us-btn{background-image:none}html{font-size:16px;line-height:1.618em}body{color:#2f353a}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.375em}h1,.us-more-item-title,.us-heading--1{font-size:2.25em;line-height:1.3em}h2,.us-heading--2{font-size:1.875em;line-height:1.3em}h3,.us-loader__text,.us-more-item-title.small,.us-heading--3{font-size:1.5em;line-height:1.25em}h4,.us-news-item-title,.us-guide-item-title,.us-heading--4{font-size:1.125em;line-height:1.25em}h5,.us-heading--5{font-size:1em;line-height:.95em}h6,.us-heading--6{font-size:1em;line-height:.95em}p,.trailered{margin:0 0 1.5em 0}.us-standfirst{font-size:18px;font-size:1.125rem;line-height:1.618;padding-top:8.144px;padding-top:.509rem;margin-bottom:17.744px;margin-bottom:1.109rem}ul li{margin-bottom:.5em}small{line-height:1.15em}blockquote{padding:15px;color:#1c1f4e;border-left:5px solid #b0b8bf}blockquote>p{padding:0;margin:0}.us-container,.us-hero-container,.us-tabs-nav-wrapper,.us-tabs-container,.us-overlay__body{position:relative;padding:0 15px;margin-right:auto;margin-left:auto}@media screen and (min-width: 768px){.us-container,.us-hero-container,.us-tabs-nav-wrapper,.us-tabs-container,.us-overlay__body{max-width:800px}}@media screen and (min-width: 992px){.us-container,.us-hero-container,.us-tabs-nav-wrapper,.us-tabs-container,.us-overlay__body{max-width:1000px}}@media screen and (min-width: 1200px){.us-container,.us-hero-container,.us-tabs-nav-wrapper,.us-tabs-container,.us-overlay__body{max-width:1200px}}*{box-sizing:border-box}@media screen and (min-width: 768px){.us-grid-row{margin-right:-15px;margin-left:-15px}}@media screen and (min-width: 768px){.us-col-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%;min-height:1px}.us-col-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%;min-height:1px}.us-col-3{float:left;padding-left:15px;padding-right:15px;width:25%;min-height:1px}.us-col-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%;min-height:1px}.us-col-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%;min-height:1px}.us-col-6{float:left;padding-left:15px;padding-right:15px;width:50%;min-height:1px}.us-col-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%;min-height:1px}.us-col-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%;min-height:1px}.us-col-9{float:left;padding-left:15px;padding-right:15px;width:75%;min-height:1px}.us-col-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%;min-height:1px}.us-col-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%;min-height:1px}.us-col-12{float:left;padding-left:15px;padding-right:15px;width:100%;min-height:1px}}.us-col-xsm-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%}.us-col-xsm-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%}.us-col-xsm-3{float:left;padding-left:15px;padding-right:15px;width:25%}.us-col-xsm-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%}.us-col-xsm-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%}.us-col-xsm-6{float:left;padding-left:15px;padding-right:15px;width:50%}.us-col-xsm-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%}.us-col-xsm-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%}.us-col-xsm-9{float:left;padding-left:15px;padding-right:15px;width:75%}.us-col-xsm-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%}.us-col-xsm-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%}.us-col-xsm-12{float:left;padding-left:15px;padding-right:15px;width:100%}@media screen and (min-width: 600px){.us-col-sm-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%}.us-col-sm-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%}.us-col-sm-3{float:left;padding-left:15px;padding-right:15px;width:25%}.us-col-sm-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%}.us-col-sm-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%}.us-col-sm-6{float:left;padding-left:15px;padding-right:15px;width:50%}.us-col-sm-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%}.us-col-sm-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%}.us-col-sm-9{float:left;padding-left:15px;padding-right:15px;width:75%}.us-col-sm-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%}.us-col-sm-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%}.us-col-sm-12{float:left;padding-left:15px;padding-right:15px;width:100%}}@media screen and (min-width: 768px){.us-col-md-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%}.us-col-md-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%}.us-col-md-3{float:left;padding-left:15px;padding-right:15px;width:25%}.us-col-md-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%}.us-col-md-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%}.us-col-md-6{float:left;padding-left:15px;padding-right:15px;width:50%}.us-col-md-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%}.us-col-md-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%}.us-col-md-9{float:left;padding-left:15px;padding-right:15px;width:75%}.us-col-md-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%}.us-col-md-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%}.us-col-md-12{float:left;padding-left:15px;padding-right:15px;width:100%}}@media screen and (min-width: 992px){.us-col-lg-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%}.us-col-lg-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%}.us-col-lg-3{float:left;padding-left:15px;padding-right:15px;width:25%}.us-col-lg-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%}.us-col-lg-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%}.us-col-lg-6{float:left;padding-left:15px;padding-right:15px;width:50%}.us-col-lg-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%}.us-col-lg-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%}.us-col-lg-9{float:left;padding-left:15px;padding-right:15px;width:75%}.us-col-lg-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%}.us-col-lg-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%}.us-col-lg-12{float:left;padding-left:15px;padding-right:15px;width:100%}}@media screen and (min-width: 1200px){.us-col-xlg-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%}.us-col-xlg-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%}.us-col-xlg-3{float:left;padding-left:15px;padding-right:15px;width:25%}.us-col-xlg-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%}.us-col-xlg-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%}.us-col-xlg-6{float:left;padding-left:15px;padding-right:15px;width:50%}.us-col-xlg-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%}.us-col-xlg-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%}.us-col-xlg-9{float:left;padding-left:15px;padding-right:15px;width:75%}.us-col-xlg-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%}.us-col-xlg-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%}.us-col-xlg-12{float:left;padding-left:15px;padding-right:15px;width:100%}}.us-form-input,.us-form-textarea,.us-form-select{border-color:#84909a;display:inline-block;color:#2f353a;vertical-align:middle;background:#fff;border-style:solid;border-width:1px;border-radius:.1875em;box-sizing:border-box;-ms-appearance:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.us-form-input:hover,.us-form-textarea:hover,.us-form-select:hover,.us-form-input:focus,.us-form-textarea:focus,.us-form-select:focus,.us-form-input:checked,.us-form-textarea:checked,.us-form-select:checked{border-color:#008fe9}.us-form-input:focus,.us-form-textarea:focus,.us-form-select:focus{box-shadow:inset 0 0 0 1px #008fe9}.us-form-input--error,.us-form-select--error{border-color:#d64226}.us-form-input--error:hover,.us-form-select--error:hover,.us-form-input--error:focus,.us-form-select--error:focus,.us-form-input--error:checked,.us-form-select--error:checked{border-color:#d64226}.us-form-input--error:focus,.us-form-select--error:focus{box-shadow:inset 0 0 0 1px #d64226}.us-form-input--success,.us-form-select--success{border-color:#2aaa5b}.us-form-input--success:hover,.us-form-select--success:hover,.us-form-input--success:focus,.us-form-select--success:focus,.us-form-input--success:checked,.us-form-select--success:checked{border-color:#2aaa5b}.us-form-input--success:focus,.us-form-select--success:focus{box-shadow:inset 0 0 0 1px #2aaa5b}.us-field-blocked>label,.us-field-blocked>.us-faux-label,.us-field--blocked>label,.us-field--blocked>.us-faux-label,.us-field--inline>label,.us-field--inline>.us-faux-label{display:block;margin-bottom:.25em}.us-field{margin-bottom:1em}.us-field>label,.us-field>.us-faux-label{margin-right:1em;font-size:1.125em;color:#2f353a}@media screen and (min-width: 768px){.us-field--inline>label,.us-field--inline>.us-faux-label{display:inline-block;min-width:6.66667em;vertical-align:middle}}.us-field-toggle label{padding:.35em .5em;font-weight:normal;line-height:1.5em;cursor:pointer}.us-form-input{height:37px;padding:0.35em 0.5em;font-size:1em;outline:0;box-shadow:none}.us-form-input::-webkit-input-placeholder{color:#84909a}.us-form-input::-moz-placeholder{color:#84909a;opacity:1}.us-form-input:-ms-input-placeholder{color:#84909a}.us-form-input:focus::-webkit-input-placeholder{color:#5e6a73}.us-form-input:focus::-moz-placeholder{color:#5e6a73;opacity:1}.us-form-input:focus:-ms-input-placeholder{color:#5e6a73}.us-form-input.large,.us-form-input--large{height:48px;padding:0.55em 0.5em;font-size:1.2em}.us-form-input--blocked{width:100%}.us-form-input:disabled,.us-form-input--disabled{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default}.us-form-input:disabled:hover,.us-form-input:disabled:focus,.us-form-input:disabled:checked,.us-form-input--disabled:hover,.us-form-input--disabled:focus,.us-form-input--disabled:checked{border-color:#ddd}.us-form-input:disabled:focus,.us-form-input--disabled:focus{box-shadow:inset 0 0 0 1px #ddd}.us-form-input:disabled::-webkit-input-placeholder,.us-form-input--disabled::-webkit-input-placeholder{color:#ddd}.us-form-input:disabled::-moz-placeholder,.us-form-input--disabled::-moz-placeholder{color:#ddd;opacity:1}.us-form-input:disabled:-ms-input-placeholder,.us-form-input--disabled:-ms-input-placeholder{color:#ddd}.us-form-input:disabled:focus,.us-form-input--disabled:focus{box-shadow:none}.us-form-input:disabled:focus::-webkit-input-placeholder,.us-form-input--disabled:focus::-webkit-input-placeholder{color:#ddd}.us-form-input:disabled:focus::-moz-placeholder,.us-form-input--disabled:focus::-moz-placeholder{color:#ddd;opacity:1}.us-form-input:disabled:focus:-ms-input-placeholder,.us-form-input--disabled:focus:-ms-input-placeholder{color:#ddd}.us-form-textarea{padding:0.35em 0.5em;font-size:1em;outline:0}.us-form-textarea:focus::-webkit-input-placeholder{color:#5e6a73}.us-form-textarea:focus::-moz-placeholder{color:#5e6a73;opacity:1}.us-form-textarea:focus:-ms-input-placeholder{color:#5e6a73}.us-form-textarea--blocked{width:100%}.us-form-textarea:disabled,.us-form-textarea--disabled{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default}.us-form-textarea:disabled:hover,.us-form-textarea:disabled:focus,.us-form-textarea:disabled:checked,.us-form-textarea--disabled:hover,.us-form-textarea--disabled:focus,.us-form-textarea--disabled:checked{border-color:#ddd}.us-form-textarea:disabled:focus,.us-form-textarea--disabled:focus{box-shadow:inset 0 0 0 1px #ddd}.us-form-textarea:disabled::-webkit-input-placeholder,.us-form-textarea--disabled::-webkit-input-placeholder{color:#ddd}.us-form-textarea:disabled::-moz-placeholder,.us-form-textarea--disabled::-moz-placeholder{color:#ddd;opacity:1}.us-form-textarea:disabled:-ms-input-placeholder,.us-form-textarea--disabled:-ms-input-placeholder{color:#ddd}.us-form-textarea:disabled:focus,.us-form-textarea--disabled:focus{box-shadow:none}.us-form-textarea:disabled:focus::-webkit-input-placeholder,.us-form-textarea--disabled:focus::-webkit-input-placeholder{color:#ddd}.us-form-textarea:disabled:focus::-moz-placeholder,.us-form-textarea--disabled:focus::-moz-placeholder{color:#ddd;opacity:1}.us-form-textarea:disabled:focus:-ms-input-placeholder,.us-form-textarea--disabled:focus:-ms-input-placeholder{color:#ddd}.us-input-group{position:relative;display:table;vertical-align:middle;border-collapse:separate}@media screen and (min-width: 768px){.us-input-group{display:inline-table}}.us-input-group .us-form-input{position:relative;display:table-cell;float:left;width:100%}.us-input-group--disabled .us-input-group__box{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default}.us-input-group--disabled .us-input-group__box:hover,.us-input-group--disabled .us-input-group__box:focus,.us-input-group--disabled .us-input-group__box:checked{border-color:#ddd}.us-input-group--disabled .us-input-group__box:focus{box-shadow:inset 0 0 0 1px #ddd}.us-input-group--disabled .us-input-group__box::-webkit-input-placeholder{color:#ddd}.us-input-group--disabled .us-input-group__box::-moz-placeholder{color:#ddd;opacity:1}.us-input-group--disabled .us-input-group__box:-ms-input-placeholder{color:#ddd}.us-input-group--disabled .us-input-group__box:focus{box-shadow:none}.us-input-group--disabled .us-input-group__box:focus::-webkit-input-placeholder{color:#ddd}.us-input-group--disabled .us-input-group__box:focus::-moz-placeholder{color:#ddd;opacity:1}.us-input-group--disabled .us-input-group__box:focus:-ms-input-placeholder{color:#ddd}.us-input-group--disabled .us-input-group__box [class^="us-icon--"],.us-input-group--disabled .us-input-group__box .us-icon{opacity:.35}.us-input-group--disabled .us-form-input{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default}.us-input-group--disabled .us-form-input:hover,.us-input-group--disabled .us-form-input:focus,.us-input-group--disabled .us-form-input:checked{border-color:#ddd}.us-input-group--disabled .us-form-input:focus{box-shadow:inset 0 0 0 1px #ddd}.us-input-group--disabled .us-form-input::-webkit-input-placeholder{color:#ddd}.us-input-group--disabled .us-form-input::-moz-placeholder{color:#ddd;opacity:1}.us-input-group--disabled .us-form-input:-ms-input-placeholder{color:#ddd}.us-input-group--disabled .us-form-input:focus{box-shadow:none}.us-input-group--disabled .us-form-input:focus::-webkit-input-placeholder{color:#ddd}.us-input-group--disabled .us-form-input:focus::-moz-placeholder{color:#ddd;opacity:1}.us-input-group--disabled .us-form-input:focus:-ms-input-placeholder{color:#ddd}.us-input-group--blocked{width:100%}.us-input-group--blocked .us-input-group__box{width:1%}.us-input-group__box{display:table-cell;width:1%;padding-right:.5em;padding-left:.5em;color:#84909a;text-align:center;white-space:nowrap;vertical-align:middle;background-color:#fff;border:1px solid #84909a;border-radius:3px}@media screen and (min-width: 768px){.us-input-group__box{width:auto}}.us-input-group__box [class^="us-icon--"],.us-input-group__box .us-icon{vertical-align:middle}.us-input-group__box:first-child{border-right:0}.us-input-group__box:last-child{border-left:0}.us-input-group__box:first-child,.us-input-group .us-form-input:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.us-input-group__box:last-child,.us-input-group .us-form-input:last-child{border-bottom-left-radius:0;border-top-left-radius:0}@media (-webkit-min-device-pixel-ratio: 0.1), (min-device-pixel-ratio: 0.1), (min-resolution: 0.1dppx){.us-form-input[type="checkbox"]:after{position:absolute;top:50%;left:50%;display:block;width:1em;height:1em;margin:-.5em 0 0 -.5em;pointer-events:none;background-image:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23008FE9%22%20d%3D%22M31.076%202.204c-9.734%205.965-16.798%2013.492-19.972%2017.27l-7.772-6.088L-.1%2016.152l13.43%2013.652c2.31-5.918%209.632-17.483%2018.57-25.7l-.824-1.9z%22%2F%3E%3C%2Fsvg%3E');background-position:0 75%;background-size:cover;content:"";opacity:0}.us-form-input[type="checkbox"]:checked:after{opacity:1}.us-form-input[type="checkbox"].us-form-input--disabled,.us-form-input[type="checkbox"]:disabled{background:#fafafa}.us-form-input[type="checkbox"].us-form-input--disabled:after,.us-form-input[type="checkbox"]:disabled:after{opacity:0}.us-form-input[type="checkbox"].us-form-input--disabled:checked:after{background-position:0 50%;opacity:.35}.us-form-input[type="radio"]:checked,.us-form-input[type="radio"]:checked:focus{background:#008fe9}.us-form-input[type="radio"]:focus{box-shadow:inset 0 0 0 1px #008fe9}.us-form-input[type="radio"]:checked{box-shadow:inset 0 0 0 .35em #fff}.us-form-input[type="radio"]:checked:focus{box-shadow:inset 0 0 0 1px #008fe9,inset 0 0 0 0.35em #fff}.us-form-input[type="radio"].us-form-input--disabled:checked{background:#ddd;box-shadow:inset 0 0 0 0.35em #fafafa}}.us-form-input[type="checkbox"],.us-form-input[type="radio"]{position:relative;width:1.6em;height:1.6em;padding:0;font-size:.8em;cursor:pointer}.us-field-toggle .us-form-input[type="checkbox"],.us-field-toggle .us-form-input[type="radio"]{margin-top:.1em;margin-right:.5em;vertical-align:top}.us-form-input[type="radio"]{border-radius:50%}.us-form-input[type="checkbox"]{border-radius:.3em}.us-toggle{display:block}@media screen and (min-width: 768px){.us-toggle{display:inline-block}}.us-toggle__label{position:relative;float:left;width:50%;vertical-align:middle;cursor:pointer}@media screen and (min-width: 768px){.us-toggle__label{width:auto}}.us-toggle__label .us-form-input{position:absolute;left:-999em}.us-toggle__btn{display:block;padding:5px 30px;color:#2f353a;text-align:center;background-color:#fff;border:1px solid #84909a}.us-toggle__label:hover .us-toggle__btn{border-color:#008fe9}.us-toggle__label:focus .us-toggle__btn,.us-toggle__label .us-form-input:focus+.us-toggle__btn{border-color:#008fe9;box-shadow:inset 0 0 0 1px #008fe9}.us-toggle__label .us-form-input.checked+.us-toggle__btn{background:#e4f8ff;border-color:#008fe9;text-shadow:1px 0 0 #2f353a}.us-toggle__label .us-form-input:checked+.us-toggle__btn{background:#e4f8ff;border-color:#008fe9;text-shadow:1px 0 0 #2f353a}.us-toggle__label:first-child .us-toggle__btn{border-bottom-left-radius:3px;border-top-left-radius:3px}.us-toggle__label:last-child .us-toggle__btn{border-top-right-radius:3px;border-bottom-right-radius:3px}.us-toggle__btn--disabled{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default}.us-toggle__btn--disabled:hover,.us-toggle__btn--disabled:focus,.us-toggle__btn--disabled:checked{border-color:#ddd}.us-toggle__btn--disabled:focus{box-shadow:inset 0 0 0 1px #ddd}.us-toggle__btn--disabled::-webkit-input-placeholder{color:#ddd}.us-toggle__btn--disabled::-moz-placeholder{color:#ddd;opacity:1}.us-toggle__btn--disabled:-ms-input-placeholder{color:#ddd}.us-toggle__btn--disabled:focus{box-shadow:none}.us-toggle__btn--disabled:focus::-webkit-input-placeholder{color:#ddd}.us-toggle__btn--disabled:focus::-moz-placeholder{color:#ddd;opacity:1}.us-toggle__btn--disabled:focus:-ms-input-placeholder{color:#ddd}.us-form-select-wrap{position:relative;display:inline-block}.us-form-select{background-image:url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIGJhc2VQcm9maWxlPSd0aW55JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHg9JzBweCcgeT0nMHB4JyB3aWR0aD0nNDBweCcgaGVpZ2h0PSc2cHgnIHZpZXdCb3g9JzAgMCA0MCA2Jz48cG9seWdvbiBmaWxsPScjODQ5MDlhJyBwb2ludHM9JzI1LjMsMCAyMC4zLDYgMTUuMywwICcvPjwvc3ZnPg==");height:37px;padding:0.35em 0.5em;font-size:1em;max-width:100%;padding-right:40px;cursor:pointer;background-position:100% 50%;background-repeat:no-repeat;outline:0}.us-form-select:hover,.us-form-select:focus{background-image:url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIGJhc2VQcm9maWxlPSd0aW55JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHg9JzBweCcgeT0nMHB4JyB3aWR0aD0nNDBweCcgaGVpZ2h0PSc2cHgnIHZpZXdCb3g9JzAgMCA0MCA2Jz48cG9seWdvbiBmaWxsPScjMDA4ZmU5JyBwb2ludHM9JzI1LjMsMCAyMC4zLDYgMTUuMywwICcvPjwvc3ZnPg==")}@-moz-document url-prefix(){.us-form-select{text-indent:.01px;text-overflow:"";-moz-appearance:none}}.us-form-select:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #2f353a}.us-form-select::-ms-expand{display:none}.ie9 .us-form-select{padding:0.35em 0.5em}.us-form-select-wrap--multiple,.us-form-select-wrap--multiple .us-form-select,.us-form-select--multiple,.us-form-select--multiple .us-form-select,.us-form-select[multiple],.us-form-select[multiple] .us-form-select,.us-form-select[size],.us-form-select[size] .us-form-select{height:auto;overflow:hidden;overflow-x:auto;overflow-y:auto;vertical-align:middle;cursor:default;background-image:none;-webkit-overflow-scrolling:touch}.us-form-select-wrap--multiple:hover,.us-form-select-wrap--multiple:focus,.us-form-select--multiple:hover,.us-form-select--multiple:focus,.us-form-select[multiple]:hover,.us-form-select[multiple]:focus,.us-form-select[size]:hover,.us-form-select[size]:focus{background-image:none}.us-form-select-wrap--multiple option,.us-form-select--multiple option,.us-form-select[multiple] option,.us-form-select[size] option{cursor:pointer}.us-form-select-wrap--multiple::-webkit-scrollbar,.us-form-select--multiple::-webkit-scrollbar,.us-form-select[multiple]::-webkit-scrollbar,.us-form-select[size]::-webkit-scrollbar{width:16px;height:16px}.us-form-select-wrap--multiple::-webkit-scrollbar:window-inactive,.us-form-select--multiple::-webkit-scrollbar:window-inactive,.us-form-select[multiple]::-webkit-scrollbar:window-inactive,.us-form-select[size]::-webkit-scrollbar:window-inactive{opacity:0}.us-form-select-wrap--multiple::-webkit-scrollbar-thumb,.us-form-select--multiple::-webkit-scrollbar-thumb,.us-form-select[multiple]::-webkit-scrollbar-thumb,.us-form-select[size]::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.2);border:4px solid transparent;border-radius:8px;background-clip:padding-box}.us-form-select-wrap--multiple::-webkit-scrollbar-corner,.us-form-select--multiple::-webkit-scrollbar-corner,.us-form-select[multiple]::-webkit-scrollbar-corner,.us-form-select[size]::-webkit-scrollbar-corner{background-color:transparent}.us-form-select-wrap--blocked,.us-form-select--blocked{width:100%}.us-form-select-wrap--disabled,.us-form-select-wrap--disabled .us-form-select,.us-form-select--disabled,.us-form-select--disabled .us-form-select,.us-form-select:disabled,.us-form-select:disabled .us-form-select{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default;background-image:url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIGJhc2VQcm9maWxlPSd0aW55JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHg9JzBweCcgeT0nMHB4JyB3aWR0aD0nNDBweCcgaGVpZ2h0PSc2cHgnIHZpZXdCb3g9JzAgMCA0MCA2Jz48cG9seWdvbiBmaWxsPScjZGRkJyBwb2ludHM9JzI1LjMsMCAyMC4zLDYgMTUuMywwICcvPjwvc3ZnPg==")}.us-form-select-wrap--disabled:hover,.us-form-select-wrap--disabled:focus,.us-form-select-wrap--disabled:checked,.us-form-select-wrap--disabled .us-form-select:hover,.us-form-select-wrap--disabled .us-form-select:focus,.us-form-select-wrap--disabled .us-form-select:checked,.us-form-select--disabled:hover,.us-form-select--disabled:focus,.us-form-select--disabled:checked,.us-form-select--disabled .us-form-select:hover,.us-form-select--disabled .us-form-select:focus,.us-form-select--disabled .us-form-select:checked,.us-form-select:disabled:hover,.us-form-select:disabled:focus,.us-form-select:disabled:checked,.us-form-select:disabled .us-form-select:hover,.us-form-select:disabled .us-form-select:focus,.us-form-select:disabled .us-form-select:checked{border-color:#ddd}.us-form-select-wrap--disabled:focus,.us-form-select-wrap--disabled .us-form-select:focus,.us-form-select--disabled:focus,.us-form-select--disabled .us-form-select:focus,.us-form-select:disabled:focus,.us-form-select:disabled .us-form-select:focus{box-shadow:inset 0 0 0 1px #ddd}.us-form-select-wrap--disabled::-webkit-input-placeholder,.us-form-select-wrap--disabled .us-form-select::-webkit-input-placeholder,.us-form-select--disabled::-webkit-input-placeholder,.us-form-select--disabled .us-form-select::-webkit-input-placeholder,.us-form-select:disabled::-webkit-input-placeholder,.us-form-select:disabled .us-form-select::-webkit-input-placeholder{color:#ddd}.us-form-select-wrap--disabled::-moz-placeholder,.us-form-select-wrap--disabled .us-form-select::-moz-placeholder,.us-form-select--disabled::-moz-placeholder,.us-form-select--disabled .us-form-select::-moz-placeholder,.us-form-select:disabled::-moz-placeholder,.us-form-select:disabled .us-form-select::-moz-placeholder{color:#ddd;opacity:1}.us-form-select-wrap--disabled:-ms-input-placeholder,.us-form-select-wrap--disabled .us-form-select:-ms-input-placeholder,.us-form-select--disabled:-ms-input-placeholder,.us-form-select--disabled .us-form-select:-ms-input-placeholder,.us-form-select:disabled:-ms-input-placeholder,.us-form-select:disabled .us-form-select:-ms-input-placeholder{color:#ddd}.us-form-select-wrap--disabled:focus,.us-form-select-wrap--disabled .us-form-select:focus,.us-form-select--disabled:focus,.us-form-select--disabled .us-form-select:focus,.us-form-select:disabled:focus,.us-form-select:disabled .us-form-select:focus{box-shadow:none}.us-form-select-wrap--disabled:focus::-webkit-input-placeholder,.us-form-select-wrap--disabled .us-form-select:focus::-webkit-input-placeholder,.us-form-select--disabled:focus::-webkit-input-placeholder,.us-form-select--disabled .us-form-select:focus::-webkit-input-placeholder,.us-form-select:disabled:focus::-webkit-input-placeholder,.us-form-select:disabled .us-form-select:focus::-webkit-input-placeholder{color:#ddd}.us-form-select-wrap--disabled:focus::-moz-placeholder,.us-form-select-wrap--disabled .us-form-select:focus::-moz-placeholder,.us-form-select--disabled:focus::-moz-placeholder,.us-form-select--disabled .us-form-select:focus::-moz-placeholder,.us-form-select:disabled:focus::-moz-placeholder,.us-form-select:disabled .us-form-select:focus::-moz-placeholder{color:#ddd;opacity:1}.us-form-select-wrap--disabled:focus:-ms-input-placeholder,.us-form-select-wrap--disabled .us-form-select:focus:-ms-input-placeholder,.us-form-select--disabled:focus:-ms-input-placeholder,.us-form-select--disabled .us-form-select:focus:-ms-input-placeholder,.us-form-select:disabled:focus:-ms-input-placeholder,.us-form-select:disabled .us-form-select:focus:-ms-input-placeholder{color:#ddd}.us-form-select-wrap--disabled:hover,.us-form-select-wrap--disabled:focus,.us-form-select-wrap--disabled .us-form-select:hover,.us-form-select-wrap--disabled .us-form-select:focus,.us-form-select--disabled:hover,.us-form-select--disabled:focus,.us-form-select--disabled .us-form-select:hover,.us-form-select--disabled .us-form-select:focus,.us-form-select:disabled:hover,.us-form-select:disabled:focus,.us-form-select:disabled .us-form-select:hover,.us-form-select:disabled .us-form-select:focus{background-image:url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIGJhc2VQcm9maWxlPSd0aW55JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHg9JzBweCcgeT0nMHB4JyB3aWR0aD0nNDBweCcgaGVpZ2h0PSc2cHgnIHZpZXdCb3g9JzAgMCA0MCA2Jz48cG9seWdvbiBmaWxsPScjZGRkJyBwb2ludHM9JzI1LjMsMCAyMC4zLDYgMTUuMywwICcvPjwvc3ZnPg==")}.us-validation__icon{position:absolute;color:#fff;text-align:center;border-radius:50%}.us-validation{position:relative;display:block;padding:0.25em 0 0.25em 31px}.us-validation .us-validation__message,.us-validation--error .us-validation__message{color:#d64226;border-color:#d64226}.us-validation .us-validation__message:before,.us-validation .us-validation__message:after,.us-validation--error .us-validation__message:before,.us-validation--error .us-validation__message:after{border-color:#d64226}.us-validation .us-validation__message:after,.us-validation--error .us-validation__message:after{border-right-color:#fff}.us-validation .us-validation__icon,.us-validation--error .us-validation__icon{background-color:#d64226}.us-validation .us-validation__icon:before,.us-validation--error .us-validation__icon:before{content:"!"}.us-validation--success .us-validation__message{color:#2aaa5b;border-color:#2aaa5b}.us-validation--success .us-validation__message:before,.us-validation--success .us-validation__message:after{border-color:#2aaa5b}.us-validation--success .us-validation__message:after{border-right-color:#fff}.us-validation--success .us-validation__icon{background-color:#2aaa5b}.us-validation--success .us-validation__icon:before{content:"✓"}.us-validation__message{position:relative;display:block;min-height:2.4em;padding:.35em .5em;margin:0;line-height:1.5}.us-validation__icon{top:10px;left:0;width:26px;height:26px;font-size:18px;line-height:26px}.us-table{width:100%;color:#63686b}.us-table{border-collapse:separate;border-spacing:0}@media screen and (max-width: 599px){.us-table thead{display:none}.us-table tbody,.us-table tr,.us-table td{display:block}}.us-table-head{padding:0 1em .5em 0}.us-table-head{color:#1c1f4e;text-align:left;vertical-align:middle;border-bottom:1px solid #cbcdce}@media screen and (max-width: 599px){.us-table-body-row{position:relative}.us-table-body-row:before,.us-table-body-row:after{display:table;content:" "}.us-table-body-row:after{clear:both}}.us-table-cell{padding-top:15px;padding-bottom:15px}.us-table-cell{text-align:left;vertical-align:top;border-bottom:1px solid #cbcdce}@media screen and (max-width: 599px){.us-table-cell{padding:0;border:0}}svg:not(:root){overflow:visible}svg.us-icon--before,svg.us-icon--after{display:inline-block;vertical-align:middle}svg.us-icon--before{margin-right:7.5px}svg.us-icon--after{margin-left:7.5px}.us-icon--centered{position:relative;top:50%;margin:0 auto;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.us-icon--notext{display:inline-block;text-indent:-999em}svg.us-icon--white{fill:#fff}svg.us-icon--typegrey{fill:#2f353a}svg.us-icon--inputgrey{fill:#84909a}svg.us-icon--typecyan{fill:#008fe9}svg.us-icon--custom{fill:#1c1f4e}svg.us-icon--uswitch{fill:#002396}svg.us-icon--cross{fill:#d64226}svg.us-icon--tick{fill:#2aaa5b}svg.us-icon--facebook{fill:#3c5a99}svg.us-icon--google{fill:#dc4e41}svg.us-icon--renewable{fill:#2aaa5b}svg.us-icon--star-half{fill:#ffd32f}svg.us-icon--starline-half{fill:#ffd32f}svg.us-icon--star{fill:#ffd32f}svg.us-icon--starline{fill:#ffd32f}svg.us-icon--twitter{fill:#00aced}svg.us-icon--hover--white:hover{fill:#fff}svg.us-icon--hover--typegrey:hover{fill:#2f353a}svg.us-icon--hover--inputgrey:hover{fill:#84909a}svg.us-icon--hover--typecyan:hover{fill:#008fe9}svg.us-icon--hover--custom:hover{fill:#1c1f4e}.us-icon--small{width:16px;height:16px}.us-icon--medium{width:32px;height:32px}.us-icon--large{width:64px;height:64px}@media screen and (max-width: 767px){.us-icon--small--sm-tablet{width:16px;height:16px}.us-icon--medium--sm-tablet{width:32px;height:32px}.us-icon--large--sm-tablet{width:64px;height:64px}}@media screen and (max-width: 599px){.us-icon--small--mobile{width:16px;height:16px}.us-icon--medium--mobile{width:32px;height:32px}.us-icon--large--mobile{width:64px;height:64px}}.us-link,.us-content .internal-menu a,.us-list a,.us-content p a,.us-content ul a,.us-content blockquote a{border-bottom:1px solid}a,.us-link{color:#002396;text-decoration:none;transition:color 333ms, border-color 333ms}a:visited,.us-link:visited{color:#002396}a:focus,.us-link:focus{color:#00114a}a:hover,.us-link:hover{color:#008fe9}a:active,.us-link:active{color:#002396}.us-link--light{color:#fff}.us-link--light:visited{color:#fff}.us-link--light:focus{color:#fff}.us-link--light:hover{color:#fff}.us-link--light:active{color:#e9ebed}.us-content .internal-menu,.us-list{list-style:none}.us-content .internal-menu a,.us-list a{display:block;padding-top:.5em;padding-bottom:.5em}.us-content .internal-menu a:after,.us-list a:after{font-size:.8em}.us-content .internal-menu a:hover:after,.us-list a:hover:after{left:.5em}.us-hero .us-content .internal-menu,.us-content .us-hero .internal-menu,.us-hero .us-list{margin-top:1em}.us-hero .us-content .internal-menu a,.us-content .us-hero .internal-menu a,.us-hero .us-list a{font-size:1.125em;color:#1c1f4e}.us-numbered-list,.us-ticked-list{padding:0;margin:1.5em 0;list-style:none}.us-numbered-list li,.us-ticked-list li{position:relative;padding-left:2em;margin:.5em 0}.us-numbered-list li:before,.us-ticked-list li:before{position:absolute;left:0}.us-numbered-list{counter-reset:number-counter}.us-numbered-list li{counter-increment:number-counter}.us-numbered-list li:before{top:0;width:1.5em;height:1.5em;padding-top:.25em;line-height:1;color:#008fe9;text-align:center;border-radius:2em;content:counter(number-counter);box-sizing:border-box}.us-hero .us-numbered-list li:before,.us-numbered-list.us-custom-list-alt li:before{color:#1c1f4e;background:#fff;background:rgba(255,255,255,0.7)}.us-ticked-list li{padding-left:0}.us-ticked-list li:before{top:50%;margin-top:-8px}.us-content .plans-ending .us-btn,.us-btn{display:inline-block;padding:.63em 1.25em;font-size:1em;line-height:1em;color:#2f353a;text-align:center;text-decoration:none;white-space:nowrap;vertical-align:middle;cursor:pointer;background-color:#e9ebed;border:1px solid #babcbe;border-radius:3px;outline:0;transition:none}.us-content .plans-ending .us-btn:visited,.us-btn:visited{color:#2f353a}.us-content .plans-ending .us-btn:hover,.us-content .plans-ending .us-btn:focus,.us-btn:hover,.us-btn:focus{color:#008fe9;background-color:#e6f4fd;border-color:#008fe9}.us-content .plans-ending .us-btn:active,.us-btn:active{color:#fff;background-color:#008fe9}.us-btn--large{font-size:1.2em}.us-btn--small{padding:.4em .65em}.us-btn--blocked{display:block;width:100%;padding-right:0;padding-left:0}.us-btn--link{padding:0;line-height:1.618;color:#002396;background-color:transparent;border:0}.us-btn--link:hover{color:#1c1f4e;text-decoration:underline;background-color:transparent}.us-btn--disabled,.us-btn:disabled{pointer-events:none;opacity:.5}.us-content .plans-ending .us-btn,.us-content .plans-ending .us-btn:visited,.us-btn--primary,.us-btn--primary:visited{color:#fff;background-color:#d64226;border-color:#ab351e}.us-content .plans-ending .us-btn:hover,.us-content .plans-ending .us-btn:focus,.us-btn--primary:hover,.us-btn--primary:focus{color:#fff;background-color:#ab351e;border-color:#ab351e}.us-content .plans-ending .us-btn:active,.us-btn--primary:active{color:#fff;background-color:#6b2113;border-color:#6b2113}.us-btn--secondary,.us-btn--secondary:visited{color:#fff;background-color:#008fe9;border-color:#0072ba}.us-btn--secondary:hover,.us-btn--secondary:focus{color:#fff;background-color:#0072ba;border-color:#0072ba}.us-btn--secondary:active{color:#fff;background-color:#004875;border-color:#004875}.us-btn--action,.us-btn--action:visited{color:#fff;background-color:#2aaa5b;border-color:#228849}.us-btn--action:hover,.us-btn--action:focus{color:#fff;background-color:#228849;border-color:#228849}.us-btn--action:active{color:#fff;background-color:#15552e;border-color:#15552e}.us-btn--hero,.us-btn--hero:visited{color:#1c1f4e;background-color:transparent;border-color:#1c1f4e}.us-btn--hero:hover,.us-btn--hero:focus{color:#1c1f4e;border-color:#1c1f4e;background-color:#e8e9ed}.us-btn--hero:active{color:#fff;background-color:#1c1f4e;border-color:#1c1f4e}.us-btn--reversed,.us-btn--reversed:visited{color:#fff;background-color:transparent;border-color:#fff}.us-btn--reversed:hover,.us-btn--reversed:focus{color:#fff;border-color:#fff;background-color:rgba(255,255,255,0.2)}.us-btn--reversed:active{color:#2f353a;background-color:#fff;border-color:#fff}.us-hero{background-color:#99e2ff}.us-hero-container{padding-top:2.5em;padding-bottom:2.5em}.us-hero-title{margin-top:0}.us-hero-title,.us-hero-description{color:#1c1f4e}@media screen and (min-width: 768px){.us-content-group{padding-top:50px;padding-bottom:50px;border-bottom:1px solid #e9ebed}}@media screen and (max-width: 991px){.us-content-group.mobile-bordered{padding-top:15px;padding-bottom:15px;border-bottom:1px solid #e9ebed}}@-webkit-keyframes tab-show{0%{opacity:0}100%{opacity:1}}@keyframes tab-show{0%{opacity:0}100%{opacity:1}}.us-tabs-nav{display:none;background-color:#f4f5f6}@media screen and (min-width: 768px){.js .us-tabs-nav{display:block}}.us-tabs-nav-menu{display:table;display:-webkit-flex;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;overflow:hidden;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-flow:row;-ms-flex-flow:row;flex-flow:row}.us-tabs-nav-link{display:table-cell;width:16.66667%;padding:14px 1em 12px;text-align:center;vertical-align:middle;border-right:1px solid #fff;border-radius:0;transition:none}@media screen and (min-width: 768px){.us-tabs-nav-link{font-size:.875em;line-height:1.25em}}@media screen and (min-width: 992px){.us-tabs-nav-link{font-size:1em}}@media screen and (min-width: 1200px){.us-tabs-nav-link{font-size:1.125em}}.us-tabs-nav-link:last-child{border-right:0}.us-tabs-nav-link:hover,.us-tabs-nav-link.active{color:#008fe9}.us-tabs-nav-link:hover:before,.us-tabs-nav-link.active:before{background-color:#008fe9}.us-tabs-nav-link.active{cursor:default;background-color:#fff}.us-tabs-nav-link.active:hover{background-color:#fff}.us-tabs-nav-mainlink{color:#84909a;position:relative;background-color:#f4f5f6;transition:color 300ms, background-color 300ms}.us-tabs-nav-mainlink:visited{color:#84909a}.us-tabs-nav-mainlink:hover{color:#008fe9}.us-tabs-nav-mainlink:active{color:#008fe9}.us-tabs-nav-mainlink:before{position:absolute;top:0;right:0;left:0;height:5px;background-color:#f4f5f6;content:"";transition:background-color 300ms}.us-tabs-nav-mainlink:hover{background-color:rgba(255,255,255,0.35)}.us-tabs-nav-mainlink:hover .us-tabs-nav-chevron,.us-tabs-nav-mainlink:hover .us-tabs-nav-chevron-wrapper .us-icon,.us-tab.active .us-tabs-nav-mainlink .us-tabs-nav-chevron,.us-tab.active .us-tabs-nav-mainlink .us-tabs-nav-chevron-wrapper .us-icon{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);fill:#008fe9}.us-tabs-nav-mainlink:hover:before{background-color:#008fe9}.us-tab.active .us-tabs-nav-mainlink:before{background-color:#008fe9}.us-tabs-nav-link{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center}@media screen and (max-width: 991px){.us-tabs-container{padding:0}}.us-tab-title{font-size:1.125em;line-height:1.25em;position:relative;margin:0;font-weight:normal;border-bottom:1px solid #fff}@media screen and (min-width: 768px){.js .us-tab-title{display:none}}.us-tab-title .us-tabs-nav-mainlink{display:block;padding:0.75em 15px 0.5em}.us-tab.active .us-tab-title .us-tabs-nav-mainlink{color:#008fe9;background-color:#fff}.us-tab-title .us-tabs-nav-chevron,.us-tab-title .us-tabs-nav-chevron-wrapper .us-icon{position:absolute;right:15px;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease, -webkit-transform .2s ease}.us-tab-content{display:block;overflow:hidden;opacity:1}@media screen and (max-width: 991px){.us-tab-content{padding-right:15px;padding-left:15px}}.js .us-tab-content{max-height:0}@media screen and (min-width: 768px){.js .us-tab-content{display:none;max-height:none}}.us-tab.active .us-tab-content{max-height:9999px;padding-top:1em}@media screen and (min-width: 768px){.us-tab.active .us-tab-content{display:block;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-name:tab-show;animation-name:tab-show;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}}@-webkit-keyframes loader-intro{from{opacity:0}to{opacity:1}}@keyframes loader-intro{from{opacity:0}to{opacity:1}}@-webkit-keyframes spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.us-loader,.us-loader__overlay{position:absolute;top:0;left:0;width:100%;height:100%}.us-loader--loading .us-loader__spinner{position:relative;z-index:2;display:inline-block;margin-top:1em;margin-bottom:1em;background-repeat:no-repeat}.us-loader--loading .us-loader__spinner{background:transparent url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22%23174695%22%3E%3Cpath%20opacity%3D%22.25%22%20d%3D%22M16%200a16%2016%200%200%200%200%2032%2016%2016%200%200%200%200-32m0%204a12%2012%200%200%201%200%2024%2012%2012%200%200%201%200-24%22%2F%3E%3Cpath%20d%3D%22M16%200a16%2016%200%200%201%2016%2016h-4A12%2012%200%200%200%2016%204z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;-webkit-animation:spin 500ms infinite linear;animation:spin 500ms infinite linear}.us-loader{z-index:1;display:none;text-align:center}.us-loader__container{position:relative}.us-loader--loading{display:block;-webkit-animation:loader-intro 500ms forwards;animation:loader-intro 500ms forwards}.us-loader--centered{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.us-loader__inner{position:relative;z-index:2}.us-loader--loading .us-loader__spinner{width:60px;height:60px;background-size:60px}.us-loader--centered .us-loader__spinner{margin-top:0}.us-loader__text{color:#1c1f4e}.us-loader__overlay{z-index:1;background-color:#fff;opacity:.8}.us-crumbs{margin-top:1em;margin-bottom:1em;list-style:none}.us-crumbs__item{margin-bottom:0;color:#2f353a}.us-crumbs__item:before{display:inline-block;margin:0 .35em;font-size:1.4em;font-weight:normal;content:"\203A"}.us-crumbs__item:first-child:before{width:0;margin:0;color:transparent}.us-crumbs__item:last-child{font-weight:bold}.us-crumbs__link{color:#2f353a}.us-crumbs__link:visited{color:#2f353a}.us-crumbs__link:hover{color:#2f353a;text-decoration:underline}.us-cta{padding:15px;margin-bottom:1.5em;background-color:#eaebeb;border-bottom:10px solid #1c1f4e}@media screen and (min-width: 768px){.us-cta{padding:20px;border-bottom:0;border-left:10px solid #1c1f4e}}.us-cta label{display:block}@media screen and (min-width: 992px){.us-cta label{display:inline-block}}.us-cta__title.us-cta__title{margin-top:0;font-size:18px;font-size:1.125rem}@media screen and (min-width: 768px){.us-cta__title.us-cta__title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:1.125em;line-height:1.25em}}@media screen and (min-width: 992px){.us-cta__title.us-cta__title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:1.5em;line-height:1.25em}}.us-cta--side{padding:15px;border-bottom:10px solid #1c1f4e;border-left:0}@media screen and (min-width: 992px){.us-cta--side{padding:20px}}.us-cta--side .us-form-input{width:100%}.us-overlay--open{overflow:hidden}.us-overlay-parent{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1003;visibility:hidden}.us-overlay-parent--visible{overflow:scroll;visibility:visible}.us-overlay{position:absolute;z-index:1003;width:100%;min-height:100%;background:#fff;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);transition:opacity .3s linear,box-shadow .3s linear,-webkit-transform .3s ease-in;transition:transform .3s ease-in,opacity .3s linear,box-shadow .3s linear;transition:transform .3s ease-in,opacity .3s linear,box-shadow .3s linear,-webkit-transform .3s ease-in;-webkit-overflow-scrolling:auto}.us-overlay-parent--active .us-overlay{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);box-shadow:1px 0 18px 0 rgba(0,0,0,0.3);transition-timing-function:ease-out}@media screen and (min-width: 600px){.us-overlay{width:340px}}.us-overlay--above{z-index:1004}.us-overlay-parent--active .us-overlay--above{box-shadow:1px 0 30px 5px rgba(0,0,0,0.3)}@media screen and (min-width: 992px){.us-overlay--modal{position:relative;width:60%;max-width:700px;min-height:0;margin:5% auto;opacity:0;-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0)}.us-overlay-parent--active .us-overlay--modal{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);box-shadow:0 1px 18px 0 rgba(0,0,0,0.3)}.us-overlay-parent--active .us-overlay--modal.us-overlay--above{box-shadow:0 1px 30px 5px rgba(0,0,0,0.3)}}.us-overlay--right{right:0;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}.us-overlay-parent--active .us-overlay--right{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);box-shadow:-1px 0 18px 0 rgba(0,0,0,0.3)}.us-overlay-parent--active .us-overlay--right.us-overlay--above{box-shadow:-1px 0 30px 5px rgba(0,0,0,0.3)}.us-overlay__container{position:relative}.us-overlay__body{padding:1em;color:#2f353a}.us-overlay__header{position:relative;width:100%;min-height:55px;padding:1em;color:#fff;background:#1c1f4e}.us-overlay__title{width:calc(100% - 64px)}.us-overlay__close{position:absolute;top:.75em;right:1em}@media screen and (min-width: 768px){.us-tooltip--left .us-tooltip__note,.us-tooltip--right .us-tooltip__note{top:-1em}.us-tooltip--left .us-tooltip__note .us-tooltip__arrow,.us-tooltip--right .us-tooltip__note .us-tooltip__arrow{top:1em}.us-tooltip--left .us-tooltip__note .us-tooltip__arrow:after,.us-tooltip--right .us-tooltip__note .us-tooltip__arrow:after{top:-10px}}@media screen and (min-width: 768px){.us-tooltip--top .us-tooltip__note,.us-tooltip--bottom .us-tooltip__note{left:50%;margin-left:-150px}.us-tooltip--top .us-tooltip__note .us-tooltip__arrow,.us-tooltip--bottom .us-tooltip__note .us-tooltip__arrow,.us-tooltip--top .us-tooltip__note .us-tooltip__arrow:after,.us-tooltip--bottom .us-tooltip__note .us-tooltip__arrow:after{left:50%;margin-left:-10px}}@media screen and (max-width: 991px){.us-tooltip.us-tooltip--active .us-tooltip__note{display:block;pointer-events:all;opacity:1;visibility:visible;transition-delay:0ms}.us-tooltip.us-tooltip--active .us-tooltip__icon{background:#008fe9}}@media screen and (min-width: 768px){.us-tooltip:hover .us-tooltip__note{display:block;pointer-events:all;opacity:1;visibility:visible;transition-delay:0ms}.us-tooltip:hover .us-tooltip__icon{background:#008fe9}}.us-tooltip__wrapper{position:static;top:0;right:0}@media screen and (min-width: 768px){.us-tooltip__wrapper{position:absolute}}.us-tooltip__icon{position:absolute;top:0;right:0;width:22px;height:22px;font-weight:700;line-height:22px;color:#fff;text-align:center;cursor:pointer;background:#b0b8bf;border-radius:50%}@media screen and (min-width: 768px){.us-tooltip__icon{position:static}}.us-tooltip__icon:before{content:"?"}.us-tooltip__note{position:static;display:none;padding:.75em 1em;margin-top:1em;margin-bottom:1em;color:#2f353a;background:#fff;border:1px solid #008fe9;border-radius:4px}@media screen and (min-width: 768px){.us-tooltip__note{position:absolute;display:block;width:300px;margin-top:0;margin-bottom:0;pointer-events:none;opacity:0;visibility:hidden;transition:visibility 0ms ease 300ms, opacity 300ms ease}}.us-tooltip__arrow{position:absolute}.us-tooltip__arrow:after{position:absolute;content:""}.us-tooltip--small .us-tooltip__icon{width:16px;height:16px;font-size:.875em;line-height:16px}.us-tooltip--top .us-tooltip__note{bottom:32px}@media screen and (min-width: 768px){.us-tooltip--top .us-tooltip__note .us-tooltip__arrow{width:0;height:0;border-top:10px solid #008fe9;border-right:10px solid transparent;border-left:10px solid transparent;bottom:-10px}.us-tooltip--top .us-tooltip__note .us-tooltip__arrow:after{width:0;height:0;border-top:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent;bottom:1px}}.us-tooltip--bottom .us-tooltip__note{top:32px}@media screen and (min-width: 768px){.us-tooltip--bottom .us-tooltip__note .us-tooltip__arrow{width:0;height:0;border-right:10px solid transparent;border-bottom:10px solid #008fe9;border-left:10px solid transparent;top:-10px}.us-tooltip--bottom .us-tooltip__note .us-tooltip__arrow:after{width:0;height:0;border-right:10px solid transparent;border-bottom:10px solid #fff;border-left:10px solid transparent;top:1px}}.us-tooltip--left .us-tooltip__note{left:-315px}@media screen and (min-width: 768px){.us-tooltip--left .us-tooltip__note .us-tooltip__arrow{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #008fe9;right:-10px}.us-tooltip--left .us-tooltip__note .us-tooltip__arrow:after{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #fff;right:1px}}.us-tooltip--right .us-tooltip__note{right:-315px}@media screen and (min-width: 768px){.us-tooltip--right .us-tooltip__note .us-tooltip__arrow{width:0;height:0;border-top:10px solid transparent;border-right:10px solid #008fe9;border-bottom:10px solid transparent;left:-10px}.us-tooltip--right .us-tooltip__note .us-tooltip__arrow:after{width:0;height:0;border-top:10px solid transparent;border-right:10px solid #fff;border-bottom:10px solid transparent;left:1px}}.us-usp{display:inline-block;padding:0 10px;font-weight:bold;line-height:1.618;color:#fff;text-align:center;background-color:#008fe9}.us-usp--cyan{background-color:#99e2ff;color:#1c1f4e}.us-usp--typecyan{background-color:#008fe9}.us-usp--blue{background-color:#002396}.us-usp--navy{background-color:#1c1f4e}.us-usp--red{background-color:#d64226}.us-usp--green{background-color:#2aaa5b}.us-usp--purple{background-color:#9c55b8}.us-usp--orange{background-color:#f27930}.us-usp--yellow{background-color:#ffd32f;color:#2f353a}.us-usp--typegrey{background-color:#2f353a}.us-usp--annotated{font-weight:normal;color:#2f353a;text-align:left;background-color:#f4f5f6}.us-usp--annotated .us-usp{margin-right:10px;margin-left:-10px}.us-progress{position:relative;z-index:4;background-color:#1c1f4e}.us-progress__nav{list-style:none;counter-reset:number-counter}.us-progress__item{position:relative;float:left;line-height:1.5em;counter-increment:number-counter}@media screen and (min-width: 768px){.us-progress__item{margin-right:30px}}.us-progress__link{position:relative;display:block;padding-top:.5em;padding-bottom:.5em}@media screen and (min-width: 768px){.us-progress__link{padding-top:1em;padding-bottom:1em}}.us-progress__link:before{position:relative;display:inline-block;width:1.5em;height:1.5em;margin-right:10px;font-weight:700;color:#1c1f4e;text-align:center;border-radius:50%;content:counter(number-counter);transition:background-color .3s}.us-progress__link--next{color:#8e8fa7}.us-progress__link--next:before{background-color:#8e8fa7}.us-progress__link--current{color:#fff}.us-progress__link--current:before{background-color:#fff}.us-progress__link--complete{color:#99e2ff}.us-progress__link--complete:visited{color:#99e2ff}.us-progress__link--complete:focus{color:#fff}.us-progress__link--complete:hover{color:#fff}.us-progress__link--complete:active{color:#99e2ff}.us-progress__link--complete:before{background-color:#99e2ff}.us-progress__link--complete:hover:before,.us-progress__link--complete:active:before{background-color:#fff}.us-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1002;background:rgba(0,35,150,0.5);opacity:0;visibility:hidden}.us-backdrop--animated{transition:opacity 0.5s}.us-backdrop--visible{visibility:visible}.us-backdrop--active{opacity:1}.us-article{padding-top:1em;padding-bottom:1em;border-bottom:1px solid #e9ebed}@media screen and (min-width: 768px){.us-article{padding-top:2em;padding-bottom:2em}}.us-article__link{display:block;-webkit-tap-highlight-color:transparent}.us-article__link:hover .us-article__title{text-decoration:underline}.us-article__link,.us-article__link:hover,.us-article__link:visited{color:inherit}.us-article__title{font-size:1.125em;line-height:1.25em}@media screen and (min-width: 768px){.us-article__title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:1.5em;line-height:1.25em}}.us-article__meta,.us-article__description{color:#65717b}.us-article__meta{font-size:.875em}.us-article__description{margin-bottom:1em}@media screen and (min-width: 768px){.us-article__description{font-size:1.125em}}.us-article__image{border:1px solid #e9ebed}.us-news-item,.us-guide-item,.us-more-item{margin-bottom:1em}.us-news-item:hover .us-news-item-image,.us-guide-item:hover .us-news-item-image,.us-more-item:hover .us-news-item-image,.us-news-item:hover .us-guide-item-image,.us-guide-item:hover .us-guide-item-image,.us-more-item:hover .us-guide-item-image{opacity:.8}.us-news-item:hover .us-news-item-readmore:after,.us-guide-item:hover .us-news-item-readmore:after,.us-more-item:hover .us-news-item-readmore:after,.us-news-item:hover .us-guide-item-readmore:after,.us-guide-item:hover .us-guide-item-readmore:after,.us-more-item:hover .us-guide-item-readmore:after{left:.5em}@media screen and (max-width: 599px){.us-article-group .us-news-item,.us-article-group .us-guide-item,.us-article-group .us-more-item{padding:0;margin-bottom:0}}.us-news-item-link,.us-guide-item-link,.us-more-item-link{position:relative;display:block;overflow:hidden;text-decoration:none;background-color:#fff;transition:border-color 333ms, background-color 333ms}@media screen and (min-width: 600px){.us-news-item-link,.us-guide-item-link,.us-more-item-link{padding-bottom:2.1875em}}@media screen and (max-width: 599px){.us-article-group .us-news-item-link,.us-article-group .us-guide-item-link,.us-article-group .us-more-item-link{border-top-width:0;border-radius:0}}.us-news-item-title,.us-guide-item-title{padding:9px;margin:0;color:#1c1f4e}.us-news-item-snippet,.us-guide-item-description{font-size:14px;font-size:.875rem;line-height:1.618;padding-top:8.144px;padding-top:.509rem;margin-bottom:17.744px;margin-bottom:1.109rem;padding:0 9px;color:#1c1f4e}.us-news-item-image-container,.us-guide-item-image-container{display:none}@media screen and (min-width: 600px){.us-news-item-image-container,.us-guide-item-image-container{display:block}}.us-news-item-image,.us-guide-item-image{width:100%;height:auto;border-radius:.3125em .3125em 0 0;transition:opacity 333ms}.background.us-news-item-image,.background.us-guide-item-image{height:128px;background-position:center center;background-repeat:no-repeat;background-size:cover}.us-news-item-readmorelink,.us-guide-item-readmorelink{color:#008fe9;border-bottom:1px solid #008fe9}.us-news-item-readmorelink:visited,.us-guide-item-readmorelink:visited{color:#008fe9}.us-news-item-readmorelink:hover,.us-guide-item-readmorelink:hover{color:#008fe9}.us-news-item-readmorelink:active,.us-guide-item-readmorelink:active{color:#008fe9}.us-news-item-readmore,.us-guide-item-readmore{position:absolute;bottom:0;display:none;padding:9px;color:#008fe9;white-space:nowrap}@media screen and (min-width: 600px){.us-news-item-readmore,.us-guide-item-readmore{display:block}}@media screen and (max-width: 599px){.us-article-group{margin-bottom:1em;overflow:hidden}.us-article-group .us-news-item:first-child .us-news-item-link,.us-article-group .us-guide-item:first-child .us-news-item-link,.us-article-group .us-more-item:first-child .us-news-item-link,.us-article-group .us-news-item:first-child .us-guide-item-link,.us-article-group .us-guide-item:first-child .us-guide-item-link,.us-article-group .us-more-item:first-child .us-guide-item-link,.us-article-group .us-news-item:first-child .us-more-item-link,.us-article-group .us-guide-item:first-child .us-more-item-link,.us-article-group .us-more-item:first-child .us-more-item-link{border-top-width:1px;border-bottom-width:1px;border-radius:.3125em .3125em 0 0}.us-article-group .us-news-item:last-child .us-news-item-link,.us-article-group .us-guide-item:last-child .us-news-item-link,.us-article-group .us-more-item:last-child .us-news-item-link,.us-article-group .us-news-item:last-child .us-guide-item-link,.us-article-group .us-guide-item:last-child .us-guide-item-link,.us-article-group .us-more-item:last-child .us-guide-item-link,.us-article-group .us-news-item:last-child .us-more-item-link,.us-article-group .us-guide-item:last-child .us-more-item-link,.us-article-group .us-more-item:last-child .us-more-item-link{border-bottom-width:1px;border-radius:0 0 .3125em .3125em}}.us-news-meta{padding-right:9px;padding-left:9px;overflow:hidden}.us-news-meta .category,.us-news-meta .date{padding-top:.25em;padding-bottom:.25em;font-size:.8125em;font-weight:bold;color:#1c1f4e}@media screen and (min-width: 1200px){.us-news-meta .category,.us-news-meta .date{font-size:.875em}}.us-news-meta .date{display:block;float:right}.us-news-meta .category{display:block;float:left}.us-more-item-title{display:block;padding:9px;color:#008fe9}.us-related{margin-bottom:30px}.us-related__item{margin-bottom:0}.us-related__item-link{color:#65717b;display:block;padding-top:.5em;padding-bottom:.5em;border-bottom:1px solid #b0b8bf;transition:color .3s, border-color .3s}.us-related__item-link:visited{color:#65717b}.us-related__item-link:hover{color:#008fe9}.us-related__item-link:active{color:#65717b}.us-related__item-link--more{color:#2f353a;padding-right:.5em;text-align:right;background-color:#e4f8ff}.us-related__item-link--more:visited{color:#2f353a}.us-related__item-link--more:hover{color:#008fe9}.us-related__item-link--more:active{color:#2f353a}.us-related__item-title{vertical-align:middle}@media screen and (min-width: 992px){.us-related__item-title{display:inline-block;width:calc(100% - 90px);margin-left:7.5px}}@media screen and (min-width: 992px){.us-related__item-image{display:inline-block;width:70px;height:70px;vertical-align:middle;background-position:center center;background-repeat:no-repeat;background-size:100%}}.us-list--reset{list-style:none}.us-blocked{display:block}.us-trailered{margin-bottom:1em}.us-trailered--large{margin-bottom:1.5em}.us-trailered--small{margin-bottom:.5em}.us-align--left{text-align:left}.us-align--right{text-align:right}.us-align--center{text-align:center}.us-color--blue{color:#002396}.us-background-color--blue{background:#002396}.us-color--navy{color:#1c1f4e}.us-background-color--navy{background:#1c1f4e}.us-color--typecyan{color:#008fe9}.us-background-color--typecyan{background:#008fe9}.us-color--cyan{color:#99e2ff}.us-background-color--cyan{background:#99e2ff}.us-color--red{color:#d64226}.us-background-color--red{background:#d64226}.us-color--green{color:#2aaa5b}.us-background-color--green{background:#2aaa5b}.us-color--typegrey{color:#2f353a}.us-background-color--typegrey{background:#2f353a}.us-color--typegrey-2{color:#65717b}.us-background-color--typegrey-2{background:#65717b}.us-color--inputgrey{color:#84909a}.us-background-color--inputgrey{background:#84909a}.us-color--bordergrey{color:#b0b8bf}.us-background-color--bordergrey{background:#b0b8bf}.us-color--keylinegrey{color:#e9ebed}.us-background-color--keylinegrey{background:#e9ebed}.us-reset--padding{padding:0}.us-reset--margin{margin:0}.us-margin-top{margin-top:1em}.us-padding-top{padding-top:1em}.us-margin-top--small{margin-top:.5em}.us-padding-top--small{padding-top:.5em}.us-margin-top--large{margin-top:1.5em}.us-padding-top--large{padding-top:1.5em}.us-margin-right{margin-right:1em}.us-padding-right{padding-right:1em}.us-margin-right--small{margin-right:.5em}.us-padding-right--small{padding-right:.5em}.us-margin-right--large{margin-right:1.5em}.us-padding-right--large{padding-right:1.5em}.us-margin-bottom{margin-bottom:1em}.us-padding-bottom{padding-bottom:1em}.us-margin-bottom--small{margin-bottom:.5em}.us-padding-bottom--small{padding-bottom:.5em}.us-margin-bottom--large{margin-bottom:1.5em}.us-padding-bottom--large{padding-bottom:1.5em}.us-margin-left{margin-left:1em}.us-padding-left{padding-left:1em}.us-margin-left--small{margin-left:.5em}.us-padding-left--small{padding-left:.5em}.us-margin-left--large{margin-left:1.5em}.us-padding-left--large{padding-left:1.5em}.us-img--full{display:block;height:auto;max-width:100%;min-width:100%}.us-img--left{margin-right:1em;margin-bottom:1em}.us-img--right{margin-bottom:1em;margin-left:1em}@media screen and (min-width: 768px){.us-grid-md--push-1{padding-left:8.33333%}}@media screen and (min-width: 992px){.us-grid-lg--push-1{padding-left:8.33333%}}@media screen and (min-width: 768px){.us-grid-md--push-2{padding-left:16.66667%}}@media screen and (min-width: 992px){.us-grid-lg--push-2{padding-left:16.66667%}}@media screen and (min-width: 768px){.us-grid-md--push-3{padding-left:25%}}@media screen and (min-width: 992px){.us-grid-lg--push-3{padding-left:25%}}@media screen and (min-width: 768px){.us-grid-md--push-4{padding-left:33.33333%}}@media screen and (min-width: 992px){.us-grid-lg--push-4{padding-left:33.33333%}}@media screen and (max-width: 599px){.us-mobile--hidden{display:none}}.us-mobile--block{display:none}@media screen and (max-width: 599px){.us-mobile--block{display:block}}.us-mobile--inline-block{display:none}@media screen and (max-width: 599px){.us-mobile--inline-block{display:inline-block}}.us-mobile--inline{display:none}@media screen and (max-width: 599px){.us-mobile--inline{display:inline}}@media screen and (min-width: 600px){.us-sm-tablet--hidden{display:none}}.us-sm-tablet--block{display:none}@media screen and (min-width: 600px){.us-sm-tablet--block{display:block}}.us-sm-tablet--inline-block{display:none}@media screen and (min-width: 600px){.us-sm-tablet--inline-block{display:inline-block}}.us-sm-tablet--inline{display:none}@media screen and (min-width: 600px){.us-sm-tablet--inline{display:inline}}@media screen and (min-width: 768px){.us-tablet--hidden{display:none}}.us-tablet--block{display:none}@media screen and (min-width: 768px){.us-tablet--block{display:block}}.us-tablet--inline-block{display:none}@media screen and (min-width: 768px){.us-tablet--inline-block{display:inline-block}}.us-tablet--inline{display:none}@media screen and (min-width: 768px){.us-tablet--inline{display:inline}}@media screen and (min-width: 992px){.us-desktop--hidden{display:none}}.us-desktop--block{display:none}@media screen and (min-width: 992px){.us-desktop--block{display:block}}.us-desktop--inline-block{display:none}@media screen and (min-width: 992px){.us-desktop--inline-block{display:inline-block}}.us-desktop--inline{display:none}@media screen and (min-width: 992px){.us-desktop--inline{display:inline}}@media screen and (min-width: 1200px){.us-lg-desktop--hidden{display:none}}.us-lg-desktop--block{display:none}@media screen and (min-width: 1200px){.us-lg-desktop--block{display:block}}.us-lg-desktop--inline-block{display:none}@media screen and (min-width: 1200px){.us-lg-desktop--inline-block{display:inline-block}}.us-lg-desktop--inline{display:none}@media screen and (min-width: 1200px){.us-lg-desktop--inline{display:inline}}.us-content__header img{display:none;height:auto;max-width:100%;min-width:100%}@media screen and (min-width: 768px){.us-content__header img{display:block}}.us-content__title{position:relative;padding:.5em 0 0 0;margin:0;clear:both;font-size:1.6785em;color:#1c1f4e;background-color:#fff}@media screen and (min-width: 992px){.us-content__title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:2.25em;line-height:1.3em;padding:.5em 0 1em 0}}.us-social{padding-top:1em}.us-social-btn{display:inline-block;margin-right:.5em;vertical-align:top}.us-content{margin-bottom:30px;font-size:16px;font-size:1rem;line-height:1.618}@media screen and (min-width: 768px){.us-content{font-size:18px;font-size:1.125rem;line-height:1.618}}@media screen and (min-width: 992px){.us-content{font-size:20px;font-size:1.25rem;line-height:1.618;text-rendering:optimizeSpeed}}.us-content h1,.us-content .us-heading--1{font-size:1.875em;line-height:1.3em}.us-content h2,.us-content .us-heading--2{font-size:1.5em;line-height:1.3em}.us-content h3,.us-content .us-heading--3{font-size:1.25em;line-height:1.25em}.us-content h4,.us-content .us-heading--4{font-size:1.125em;line-height:1.25em}.us-content h5,.us-content .us-heading--5{font-size:1em;line-height:.95em}.us-content h6,.us-content .us-heading--6{font-size:1em;line-height:.95em}.us-content h2,.us-content h3,.us-content h4,.us-content h5,.us-content h6{margin-top:30px;margin-bottom:.5em}@media screen and (min-width: 768px){.us-content h2,.us-content h3,.us-content h4,.us-content h5,.us-content h6{margin-top:50px}}.us-content img{height:auto;max-width:100%;padding-top:1em;margin-bottom:1em}.us-content table{width:100%;font-size:16px;border-collapse:separate}.us-content table a{border:0}.us-content table td,.us-content table th{padding:7.5px;text-align:left;vertical-align:middle;border-bottom:1px solid #b0b8bf}.us-content table thead{background-color:#e9ebed}.us-content figure{padding:15px;margin:0;background-color:#f4f5f6;border:1px solid #e9ebed}.us-content figure img{padding-top:0;margin-bottom:0}.us-content figure figcaption{display:inline-block;vertical-align:top}@media screen and (min-width: 768px){.us-content figure figcaption{width:50%;margin-left:30px}}.us-content .strap{font-size:18px;font-size:1.125rem;line-height:1.618;padding-top:8.144px;padding-top:.509rem;margin-bottom:17.744px;margin-bottom:1.109rem}@media screen and (min-width: 768px){.us-content .strap{font-size:22px;font-size:1.375rem;line-height:1.618;padding-top:8.144px;padding-top:.509rem;margin-bottom:17.744px;margin-bottom:1.109rem;margin-bottom:2em}}.us-content .us-cta{font-size:16px}.us-content .plans-ending{list-style:none;border-top:1px solid #002396}.us-content .plans-ending>li{padding-top:.5em;padding-bottom:.5em;margin:0;border-bottom:1px solid #002396}.us-content .plans-ending ul{list-style:disc}.us-content .plans-ending .row{position:relative;font-weight:700;color:#002396;cursor:pointer;transition:color .3s}.us-content .plans-ending .row:after{position:absolute;top:50%;right:1em;margin-top:-.75em;font-size:2em;font-weight:700;content:"\27E9"}.us-content .plans-ending .row:hover{color:#008fe9}.us-content .plans-ending img{margin:0 1em 0 1em;vertical-align:middle}.us-content .plans-ending .table-container{margin-top:.5em}.js .us-content .plans-ending .table-container{display:none}.us-content .fuel-breakdown{width:100%;overflow:hidden;list-style:none}.us-content .fuel-breakdown li{float:left;padding:15px 0;font-size:16px;font-size:1rem;color:#fff;text-align:center;vertical-align:middle}.us-content .fuel-breakdown li b{display:block}.us-content .fuel-breakdown .coal{background-color:#b0b8bf}.us-content .fuel-breakdown .gas{background-color:#008fe9}.us-content .fuel-breakdown .nuclear{background-color:#f27930}.us-content .fuel-breakdown .renewable{background-color:#2aaa5b}.us-content .fuel-breakdown .other{background-color:#2f353a;text-indent:-999em}
|
|
1
|
+
/*! uStyle version 1.19.2. Copyright uSwitch limited, all rights reserved. *//*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}h1,.us-more-item-title,.us-heading--1,h2,.us-heading--2,h3,.us-loader__text,.us-more-item-title.small,.us-heading--3,h4,.us-news-item-title,.us-guide-item-title,.us-heading--4,h5,.us-heading--5,h6,.us-heading--6,.us-field>label,.us-field>.us-faux-label,.us-validation__icon,.us-btn--stronger,.us-tab-title,.us-cta__title,.us-article__title,.us-font--heading-p,.us-font--heading-s,.us-content h1,.us-content .us-heading--1,.us-content h2,.us-content .us-heading--2,.us-content h3,.us-content .us-heading--3,.us-content h4,.us-content .us-heading--4,.us-content h5,.us-content .us-heading--5,.us-content h6,.us-content .us-heading--6{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;font-weight:700}blockquote,html,.us-field-toggle label,.us-content .plans-ending .us-btn,.us-btn,.us-news-item-readmorelink,.us-guide-item-readmorelink,.us-related__item-title,.us-font--normal{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif}blockquote{font-style:italic}.us-crumbs,.us-related__item-title{font-size:.875em;line-height:1.15em}.us-crumbs__item,.us-float--left,.us-img--left{float:left}.us-float--right,.us-img--right{float:right}.us-content .internal-menu,.us-list,.us-content .plans-ending .us-btn,.us-btn,.us-hero-description,.us-crumbs,.us-progress__nav,.us-progress__item,.us-list--reset,.us-reset,.us-content table img,.us-content table p,.us-content .plans-ending,.us-content .plans-ending img,.us-content .fuel-breakdown{padding:0;margin:0}.us-container:before,.us-hero-container:before,.us-tabs-nav-wrapper:before,.us-tabs-container:before,.us-overlay__body:before,.us-grid-row:before,.us-field:before,.us-toggle:before,.us-crumbs:before,.us-related__item-link:before,.us-clearfix:before,.us-content .plans-ending:before,.us-content .fuel-breakdown:before,.us-container:after,.us-hero-container:after,.us-tabs-nav-wrapper:after,.us-tabs-container:after,.us-overlay__body:after,.us-grid-row:after,.us-field:after,.us-toggle:after,.us-crumbs:after,.us-related__item-link:after,.us-clearfix:after,.us-content .plans-ending:after,.us-content .fuel-breakdown:after{display:table;content:" "}.us-container:after,.us-hero-container:after,.us-tabs-nav-wrapper:after,.us-tabs-container:after,.us-overlay__body:after,.us-grid-row:after,.us-field:after,.us-toggle:after,.us-crumbs:after,.us-related__item-link:after,.us-clearfix:after,.us-content .plans-ending:after,.us-content .fuel-breakdown:after{clear:both}.us-news-item-link,.us-guide-item-link,.us-more-item-link{border:1px solid #b0b8bf;border-radius:.3125em}.us-news-item-link:hover,.us-guide-item-link:hover,.us-more-item-link:hover{border-color:#008fe9}.us-content .internal-menu a:after,.us-list a:after,.us-news-item-readmore:after,.us-guide-item-readmore:after,.us-related__item-link--more:after{position:relative;left:0;display:inline;margin:0 0 0 .5em;font-size:.5em;line-height:0;vertical-align:middle;content:"\25b6\fe0e";transition:left 200ms}.us-loader--centered{transform-style:preserve-3d}.us-loader--centered .us-loader__inner{top:50%;transform:translateY(-50%)}.us-news-item-link,.us-guide-item-link,.us-more-item-link,.us-news-item-image,.us-guide-item-image{-webkit-backface-visibility:hidden;backface-visibility:hidden}.us-form-input,.us-form-textarea,.us-content .plans-ending .us-btn,.us-btn{background-image:none}html{font-size:16px;line-height:1.618em}body{color:#2f353a}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.375em}h1,.us-more-item-title,.us-heading--1{font-size:2.25em;line-height:1.3em}h2,.us-heading--2{font-size:1.875em;line-height:1.3em}h3,.us-loader__text,.us-more-item-title.small,.us-heading--3{font-size:1.5em;line-height:1.25em}h4,.us-news-item-title,.us-guide-item-title,.us-heading--4{font-size:1.125em;line-height:1.25em}h5,.us-heading--5{font-size:1em;line-height:.95em}h6,.us-heading--6{font-size:1em;line-height:.95em}p,.trailered{margin:0 0 1.5em 0}.us-standfirst{font-size:18px;font-size:1.125rem;line-height:1.618;padding-top:8.144px;padding-top:.509rem;margin-bottom:17.744px;margin-bottom:1.109rem}ul li{margin-bottom:.5em}small{line-height:1.15em}blockquote{padding:15px;color:#1c1f4e;border-left:5px solid #b0b8bf}blockquote>p{padding:0;margin:0}.us-container,.us-hero-container,.us-tabs-nav-wrapper,.us-tabs-container,.us-overlay__body{position:relative;padding:0 15px;margin-right:auto;margin-left:auto}@media screen and (min-width: 768px){.us-container,.us-hero-container,.us-tabs-nav-wrapper,.us-tabs-container,.us-overlay__body{max-width:800px}}@media screen and (min-width: 992px){.us-container,.us-hero-container,.us-tabs-nav-wrapper,.us-tabs-container,.us-overlay__body{max-width:1000px}}@media screen and (min-width: 1200px){.us-container,.us-hero-container,.us-tabs-nav-wrapper,.us-tabs-container,.us-overlay__body{max-width:1200px}}*{box-sizing:border-box}@media screen and (min-width: 768px){.us-grid-row{margin-right:-15px;margin-left:-15px}}@media screen and (min-width: 768px){.us-col-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%;min-height:1px}.us-col-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%;min-height:1px}.us-col-3{float:left;padding-left:15px;padding-right:15px;width:25%;min-height:1px}.us-col-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%;min-height:1px}.us-col-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%;min-height:1px}.us-col-6{float:left;padding-left:15px;padding-right:15px;width:50%;min-height:1px}.us-col-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%;min-height:1px}.us-col-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%;min-height:1px}.us-col-9{float:left;padding-left:15px;padding-right:15px;width:75%;min-height:1px}.us-col-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%;min-height:1px}.us-col-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%;min-height:1px}.us-col-12{float:left;padding-left:15px;padding-right:15px;width:100%;min-height:1px}}.us-col-xsm-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%}.us-col-xsm-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%}.us-col-xsm-3{float:left;padding-left:15px;padding-right:15px;width:25%}.us-col-xsm-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%}.us-col-xsm-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%}.us-col-xsm-6{float:left;padding-left:15px;padding-right:15px;width:50%}.us-col-xsm-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%}.us-col-xsm-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%}.us-col-xsm-9{float:left;padding-left:15px;padding-right:15px;width:75%}.us-col-xsm-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%}.us-col-xsm-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%}.us-col-xsm-12{float:left;padding-left:15px;padding-right:15px;width:100%}@media screen and (min-width: 600px){.us-col-sm-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%}.us-col-sm-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%}.us-col-sm-3{float:left;padding-left:15px;padding-right:15px;width:25%}.us-col-sm-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%}.us-col-sm-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%}.us-col-sm-6{float:left;padding-left:15px;padding-right:15px;width:50%}.us-col-sm-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%}.us-col-sm-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%}.us-col-sm-9{float:left;padding-left:15px;padding-right:15px;width:75%}.us-col-sm-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%}.us-col-sm-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%}.us-col-sm-12{float:left;padding-left:15px;padding-right:15px;width:100%}}@media screen and (min-width: 768px){.us-col-md-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%}.us-col-md-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%}.us-col-md-3{float:left;padding-left:15px;padding-right:15px;width:25%}.us-col-md-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%}.us-col-md-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%}.us-col-md-6{float:left;padding-left:15px;padding-right:15px;width:50%}.us-col-md-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%}.us-col-md-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%}.us-col-md-9{float:left;padding-left:15px;padding-right:15px;width:75%}.us-col-md-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%}.us-col-md-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%}.us-col-md-12{float:left;padding-left:15px;padding-right:15px;width:100%}}@media screen and (min-width: 992px){.us-col-lg-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%}.us-col-lg-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%}.us-col-lg-3{float:left;padding-left:15px;padding-right:15px;width:25%}.us-col-lg-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%}.us-col-lg-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%}.us-col-lg-6{float:left;padding-left:15px;padding-right:15px;width:50%}.us-col-lg-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%}.us-col-lg-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%}.us-col-lg-9{float:left;padding-left:15px;padding-right:15px;width:75%}.us-col-lg-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%}.us-col-lg-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%}.us-col-lg-12{float:left;padding-left:15px;padding-right:15px;width:100%}}@media screen and (min-width: 1200px){.us-col-xlg-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%}.us-col-xlg-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%}.us-col-xlg-3{float:left;padding-left:15px;padding-right:15px;width:25%}.us-col-xlg-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%}.us-col-xlg-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%}.us-col-xlg-6{float:left;padding-left:15px;padding-right:15px;width:50%}.us-col-xlg-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%}.us-col-xlg-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%}.us-col-xlg-9{float:left;padding-left:15px;padding-right:15px;width:75%}.us-col-xlg-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%}.us-col-xlg-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%}.us-col-xlg-12{float:left;padding-left:15px;padding-right:15px;width:100%}}.us-form-input,.us-form-textarea,.us-form-select{border-color:#84909a;display:inline-block;color:#2f353a;vertical-align:middle;background:#fff;border-style:solid;border-width:1px;border-radius:.1875em;box-sizing:border-box;-ms-appearance:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.us-form-input:hover,.us-form-textarea:hover,.us-form-select:hover,.us-form-input:focus,.us-form-textarea:focus,.us-form-select:focus,.us-form-input:checked,.us-form-textarea:checked,.us-form-select:checked{border-color:#008fe9}.us-form-input:focus,.us-form-textarea:focus,.us-form-select:focus{box-shadow:inset 0 0 0 1px #008fe9}.us-form-input--error,.us-form-select--error{border-color:#d64226}.us-form-input--error:hover,.us-form-select--error:hover,.us-form-input--error:focus,.us-form-select--error:focus,.us-form-input--error:checked,.us-form-select--error:checked{border-color:#d64226}.us-form-input--error:focus,.us-form-select--error:focus{box-shadow:inset 0 0 0 1px #d64226}.us-form-input--success,.us-form-select--success{border-color:#2aaa5b}.us-form-input--success:hover,.us-form-select--success:hover,.us-form-input--success:focus,.us-form-select--success:focus,.us-form-input--success:checked,.us-form-select--success:checked{border-color:#2aaa5b}.us-form-input--success:focus,.us-form-select--success:focus{box-shadow:inset 0 0 0 1px #2aaa5b}.us-field-blocked>label,.us-field-blocked>.us-faux-label,.us-field--blocked>label,.us-field--blocked>.us-faux-label,.us-field--inline>label,.us-field--inline>.us-faux-label{display:block;margin-bottom:.25em}.us-field{margin-bottom:1em}.us-field>label,.us-field>.us-faux-label{margin-right:1em;font-size:1.125em;color:#2f353a}@media screen and (min-width: 768px){.us-field--inline>label,.us-field--inline>.us-faux-label{display:inline-block;min-width:6.66667em;vertical-align:middle}}.us-field-toggle label{padding:.35em .5em;font-weight:normal;line-height:1.5em;cursor:pointer}.us-form-input{height:37px;padding:0.35em 0.5em;font-size:1em;outline:0;box-shadow:none}.us-form-input::-webkit-input-placeholder{color:#84909a}.us-form-input::-moz-placeholder{color:#84909a;opacity:1}.us-form-input:-ms-input-placeholder{color:#84909a}.us-form-input:focus::-webkit-input-placeholder{color:#5e6a73}.us-form-input:focus::-moz-placeholder{color:#5e6a73;opacity:1}.us-form-input:focus:-ms-input-placeholder{color:#5e6a73}.us-form-input.large,.us-form-input--large{height:48px;padding:0.55em 0.5em;font-size:1.2em}.us-form-input--blocked{width:100%}.us-form-input:disabled,.us-form-input--disabled{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default}.us-form-input:disabled:hover,.us-form-input:disabled:focus,.us-form-input:disabled:checked,.us-form-input--disabled:hover,.us-form-input--disabled:focus,.us-form-input--disabled:checked{border-color:#ddd}.us-form-input:disabled:focus,.us-form-input--disabled:focus{box-shadow:inset 0 0 0 1px #ddd}.us-form-input:disabled::-webkit-input-placeholder,.us-form-input--disabled::-webkit-input-placeholder{color:#ddd}.us-form-input:disabled::-moz-placeholder,.us-form-input--disabled::-moz-placeholder{color:#ddd;opacity:1}.us-form-input:disabled:-ms-input-placeholder,.us-form-input--disabled:-ms-input-placeholder{color:#ddd}.us-form-input:disabled:focus,.us-form-input--disabled:focus{box-shadow:none}.us-form-input:disabled:focus::-webkit-input-placeholder,.us-form-input--disabled:focus::-webkit-input-placeholder{color:#ddd}.us-form-input:disabled:focus::-moz-placeholder,.us-form-input--disabled:focus::-moz-placeholder{color:#ddd;opacity:1}.us-form-input:disabled:focus:-ms-input-placeholder,.us-form-input--disabled:focus:-ms-input-placeholder{color:#ddd}.us-form-textarea{padding:0.35em 0.5em;font-size:1em;outline:0}.us-form-textarea:focus::-webkit-input-placeholder{color:#5e6a73}.us-form-textarea:focus::-moz-placeholder{color:#5e6a73;opacity:1}.us-form-textarea:focus:-ms-input-placeholder{color:#5e6a73}.us-form-textarea--blocked{width:100%}.us-form-textarea:disabled,.us-form-textarea--disabled{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default}.us-form-textarea:disabled:hover,.us-form-textarea:disabled:focus,.us-form-textarea:disabled:checked,.us-form-textarea--disabled:hover,.us-form-textarea--disabled:focus,.us-form-textarea--disabled:checked{border-color:#ddd}.us-form-textarea:disabled:focus,.us-form-textarea--disabled:focus{box-shadow:inset 0 0 0 1px #ddd}.us-form-textarea:disabled::-webkit-input-placeholder,.us-form-textarea--disabled::-webkit-input-placeholder{color:#ddd}.us-form-textarea:disabled::-moz-placeholder,.us-form-textarea--disabled::-moz-placeholder{color:#ddd;opacity:1}.us-form-textarea:disabled:-ms-input-placeholder,.us-form-textarea--disabled:-ms-input-placeholder{color:#ddd}.us-form-textarea:disabled:focus,.us-form-textarea--disabled:focus{box-shadow:none}.us-form-textarea:disabled:focus::-webkit-input-placeholder,.us-form-textarea--disabled:focus::-webkit-input-placeholder{color:#ddd}.us-form-textarea:disabled:focus::-moz-placeholder,.us-form-textarea--disabled:focus::-moz-placeholder{color:#ddd;opacity:1}.us-form-textarea:disabled:focus:-ms-input-placeholder,.us-form-textarea--disabled:focus:-ms-input-placeholder{color:#ddd}.us-input-group{position:relative;display:table;vertical-align:middle;border-collapse:separate}@media screen and (min-width: 768px){.us-input-group{display:inline-table}}.us-input-group .us-form-input{position:relative;display:table-cell;float:left;width:100%}.us-input-group--disabled .us-input-group__box{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default}.us-input-group--disabled .us-input-group__box:hover,.us-input-group--disabled .us-input-group__box:focus,.us-input-group--disabled .us-input-group__box:checked{border-color:#ddd}.us-input-group--disabled .us-input-group__box:focus{box-shadow:inset 0 0 0 1px #ddd}.us-input-group--disabled .us-input-group__box::-webkit-input-placeholder{color:#ddd}.us-input-group--disabled .us-input-group__box::-moz-placeholder{color:#ddd;opacity:1}.us-input-group--disabled .us-input-group__box:-ms-input-placeholder{color:#ddd}.us-input-group--disabled .us-input-group__box:focus{box-shadow:none}.us-input-group--disabled .us-input-group__box:focus::-webkit-input-placeholder{color:#ddd}.us-input-group--disabled .us-input-group__box:focus::-moz-placeholder{color:#ddd;opacity:1}.us-input-group--disabled .us-input-group__box:focus:-ms-input-placeholder{color:#ddd}.us-input-group--disabled .us-input-group__box [class^="us-icon--"],.us-input-group--disabled .us-input-group__box .us-icon{opacity:.35}.us-input-group--disabled .us-form-input{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default}.us-input-group--disabled .us-form-input:hover,.us-input-group--disabled .us-form-input:focus,.us-input-group--disabled .us-form-input:checked{border-color:#ddd}.us-input-group--disabled .us-form-input:focus{box-shadow:inset 0 0 0 1px #ddd}.us-input-group--disabled .us-form-input::-webkit-input-placeholder{color:#ddd}.us-input-group--disabled .us-form-input::-moz-placeholder{color:#ddd;opacity:1}.us-input-group--disabled .us-form-input:-ms-input-placeholder{color:#ddd}.us-input-group--disabled .us-form-input:focus{box-shadow:none}.us-input-group--disabled .us-form-input:focus::-webkit-input-placeholder{color:#ddd}.us-input-group--disabled .us-form-input:focus::-moz-placeholder{color:#ddd;opacity:1}.us-input-group--disabled .us-form-input:focus:-ms-input-placeholder{color:#ddd}.us-input-group--blocked{width:100%}.us-input-group--blocked .us-input-group__box{width:1%}.us-input-group__box{display:table-cell;width:1%;padding-right:.5em;padding-left:.5em;color:#84909a;text-align:center;white-space:nowrap;vertical-align:middle;background-color:#fff;border:1px solid #84909a;border-radius:3px}@media screen and (min-width: 768px){.us-input-group__box{width:auto}}.us-input-group__box [class^="us-icon--"],.us-input-group__box .us-icon{vertical-align:middle}.us-input-group__box:first-child{border-right:0}.us-input-group__box:last-child{border-left:0}.us-input-group__box:first-child,.us-input-group .us-form-input:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.us-input-group__box:last-child,.us-input-group .us-form-input:last-child{border-bottom-left-radius:0;border-top-left-radius:0}@media (-webkit-min-device-pixel-ratio: 0.1), (min-device-pixel-ratio: 0.1), (min-resolution: 0.1dppx){.us-form-input[type="checkbox"]:after{position:absolute;top:50%;left:50%;display:block;width:1em;height:1em;margin:-.5em 0 0 -.5em;pointer-events:none;background-image:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23008FE9%22%20d%3D%22M31.076%202.204c-9.734%205.965-16.798%2013.492-19.972%2017.27l-7.772-6.088L-.1%2016.152l13.43%2013.652c2.31-5.918%209.632-17.483%2018.57-25.7l-.824-1.9z%22%2F%3E%3C%2Fsvg%3E');background-position:0 75%;background-size:cover;content:"";opacity:0}.us-form-input[type="checkbox"]:checked:after{opacity:1}.us-form-input[type="checkbox"].us-form-input--disabled,.us-form-input[type="checkbox"]:disabled{background:#fafafa}.us-form-input[type="checkbox"].us-form-input--disabled:after,.us-form-input[type="checkbox"]:disabled:after{opacity:0}.us-form-input[type="checkbox"].us-form-input--disabled:checked:after{background-position:0 50%;opacity:.35}.us-form-input[type="radio"]:checked,.us-form-input[type="radio"]:checked:focus{background:#008fe9}.us-form-input[type="radio"]:focus{box-shadow:inset 0 0 0 1px #008fe9}.us-form-input[type="radio"]:checked{box-shadow:inset 0 0 0 .35em #fff}.us-form-input[type="radio"]:checked:focus{box-shadow:inset 0 0 0 1px #008fe9,inset 0 0 0 0.35em #fff}.us-form-input[type="radio"].us-form-input--disabled:checked{background:#ddd;box-shadow:inset 0 0 0 0.35em #fafafa}}.us-form-input[type="checkbox"],.us-form-input[type="radio"]{position:relative;width:1.6em;height:1.6em;padding:0;font-size:.8em;cursor:pointer}.us-field-toggle .us-form-input[type="checkbox"],.us-field-toggle .us-form-input[type="radio"]{margin-top:.1em;margin-right:.5em;vertical-align:top}.us-form-input[type="radio"]{border-radius:50%}.us-form-input[type="checkbox"]{border-radius:.3em}.us-toggle{display:block}@media screen and (min-width: 768px){.us-toggle{display:inline-block}}.us-toggle__label{position:relative;float:left;width:50%;vertical-align:middle;cursor:pointer}@media screen and (min-width: 768px){.us-toggle__label{width:auto}}.us-toggle__label .us-form-input{position:absolute;left:-999em}.us-toggle__btn{display:block;padding:5px 30px;color:#2f353a;text-align:center;background-color:#fff;border:1px solid #84909a}.us-toggle__label:hover .us-toggle__btn{border-color:#008fe9}.us-toggle__label:focus .us-toggle__btn,.us-toggle__label .us-form-input:focus+.us-toggle__btn{border-color:#008fe9;box-shadow:inset 0 0 0 1px #008fe9}.us-toggle__label .us-form-input.checked+.us-toggle__btn{background:#e4f8ff;border-color:#008fe9;text-shadow:1px 0 0 #2f353a}.us-toggle__label .us-form-input:checked+.us-toggle__btn{background:#e4f8ff;border-color:#008fe9;text-shadow:1px 0 0 #2f353a}.us-toggle__label:first-child .us-toggle__btn{border-bottom-left-radius:3px;border-top-left-radius:3px}.us-toggle__label:last-child .us-toggle__btn{border-top-right-radius:3px;border-bottom-right-radius:3px}.us-toggle__btn--disabled{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default}.us-toggle__btn--disabled:hover,.us-toggle__btn--disabled:focus,.us-toggle__btn--disabled:checked{border-color:#ddd}.us-toggle__btn--disabled:focus{box-shadow:inset 0 0 0 1px #ddd}.us-toggle__btn--disabled::-webkit-input-placeholder{color:#ddd}.us-toggle__btn--disabled::-moz-placeholder{color:#ddd;opacity:1}.us-toggle__btn--disabled:-ms-input-placeholder{color:#ddd}.us-toggle__btn--disabled:focus{box-shadow:none}.us-toggle__btn--disabled:focus::-webkit-input-placeholder{color:#ddd}.us-toggle__btn--disabled:focus::-moz-placeholder{color:#ddd;opacity:1}.us-toggle__btn--disabled:focus:-ms-input-placeholder{color:#ddd}.us-form-select-wrap{position:relative;display:inline-block}.us-form-select{background-image:url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIGJhc2VQcm9maWxlPSd0aW55JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHg9JzBweCcgeT0nMHB4JyB3aWR0aD0nNDBweCcgaGVpZ2h0PSc2cHgnIHZpZXdCb3g9JzAgMCA0MCA2Jz48cG9seWdvbiBmaWxsPScjODQ5MDlhJyBwb2ludHM9JzI1LjMsMCAyMC4zLDYgMTUuMywwICcvPjwvc3ZnPg==");height:37px;padding:0.35em 0.5em;font-size:1em;max-width:100%;padding-right:40px;cursor:pointer;background-position:100% 50%;background-repeat:no-repeat;outline:0}.us-form-select:hover,.us-form-select:focus{background-image:url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIGJhc2VQcm9maWxlPSd0aW55JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHg9JzBweCcgeT0nMHB4JyB3aWR0aD0nNDBweCcgaGVpZ2h0PSc2cHgnIHZpZXdCb3g9JzAgMCA0MCA2Jz48cG9seWdvbiBmaWxsPScjMDA4ZmU5JyBwb2ludHM9JzI1LjMsMCAyMC4zLDYgMTUuMywwICcvPjwvc3ZnPg==")}@-moz-document url-prefix(){.us-form-select{text-indent:.01px;text-overflow:"";-moz-appearance:none}}.us-form-select:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #2f353a}.us-form-select::-ms-expand{display:none}.ie9 .us-form-select{padding:0.35em 0.5em}.us-form-select-wrap--multiple,.us-form-select-wrap--multiple .us-form-select,.us-form-select--multiple,.us-form-select--multiple .us-form-select,.us-form-select[multiple],.us-form-select[multiple] .us-form-select,.us-form-select[size],.us-form-select[size] .us-form-select{height:auto;overflow:hidden;overflow-x:auto;overflow-y:auto;vertical-align:middle;cursor:default;background-image:none;-webkit-overflow-scrolling:touch}.us-form-select-wrap--multiple:hover,.us-form-select-wrap--multiple:focus,.us-form-select--multiple:hover,.us-form-select--multiple:focus,.us-form-select[multiple]:hover,.us-form-select[multiple]:focus,.us-form-select[size]:hover,.us-form-select[size]:focus{background-image:none}.us-form-select-wrap--multiple option,.us-form-select--multiple option,.us-form-select[multiple] option,.us-form-select[size] option{cursor:pointer}.us-form-select-wrap--multiple::-webkit-scrollbar,.us-form-select--multiple::-webkit-scrollbar,.us-form-select[multiple]::-webkit-scrollbar,.us-form-select[size]::-webkit-scrollbar{width:16px;height:16px}.us-form-select-wrap--multiple::-webkit-scrollbar:window-inactive,.us-form-select--multiple::-webkit-scrollbar:window-inactive,.us-form-select[multiple]::-webkit-scrollbar:window-inactive,.us-form-select[size]::-webkit-scrollbar:window-inactive{opacity:0}.us-form-select-wrap--multiple::-webkit-scrollbar-thumb,.us-form-select--multiple::-webkit-scrollbar-thumb,.us-form-select[multiple]::-webkit-scrollbar-thumb,.us-form-select[size]::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.2);border:4px solid transparent;border-radius:8px;background-clip:padding-box}.us-form-select-wrap--multiple::-webkit-scrollbar-corner,.us-form-select--multiple::-webkit-scrollbar-corner,.us-form-select[multiple]::-webkit-scrollbar-corner,.us-form-select[size]::-webkit-scrollbar-corner{background-color:transparent}.us-form-select-wrap--blocked,.us-form-select--blocked{width:100%}.us-form-select-wrap--disabled,.us-form-select-wrap--disabled .us-form-select,.us-form-select--disabled,.us-form-select--disabled .us-form-select,.us-form-select:disabled,.us-form-select:disabled .us-form-select{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default;background-image:url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIGJhc2VQcm9maWxlPSd0aW55JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHg9JzBweCcgeT0nMHB4JyB3aWR0aD0nNDBweCcgaGVpZ2h0PSc2cHgnIHZpZXdCb3g9JzAgMCA0MCA2Jz48cG9seWdvbiBmaWxsPScjZGRkJyBwb2ludHM9JzI1LjMsMCAyMC4zLDYgMTUuMywwICcvPjwvc3ZnPg==")}.us-form-select-wrap--disabled:hover,.us-form-select-wrap--disabled:focus,.us-form-select-wrap--disabled:checked,.us-form-select-wrap--disabled .us-form-select:hover,.us-form-select-wrap--disabled .us-form-select:focus,.us-form-select-wrap--disabled .us-form-select:checked,.us-form-select--disabled:hover,.us-form-select--disabled:focus,.us-form-select--disabled:checked,.us-form-select--disabled .us-form-select:hover,.us-form-select--disabled .us-form-select:focus,.us-form-select--disabled .us-form-select:checked,.us-form-select:disabled:hover,.us-form-select:disabled:focus,.us-form-select:disabled:checked,.us-form-select:disabled .us-form-select:hover,.us-form-select:disabled .us-form-select:focus,.us-form-select:disabled .us-form-select:checked{border-color:#ddd}.us-form-select-wrap--disabled:focus,.us-form-select-wrap--disabled .us-form-select:focus,.us-form-select--disabled:focus,.us-form-select--disabled .us-form-select:focus,.us-form-select:disabled:focus,.us-form-select:disabled .us-form-select:focus{box-shadow:inset 0 0 0 1px #ddd}.us-form-select-wrap--disabled::-webkit-input-placeholder,.us-form-select-wrap--disabled .us-form-select::-webkit-input-placeholder,.us-form-select--disabled::-webkit-input-placeholder,.us-form-select--disabled .us-form-select::-webkit-input-placeholder,.us-form-select:disabled::-webkit-input-placeholder,.us-form-select:disabled .us-form-select::-webkit-input-placeholder{color:#ddd}.us-form-select-wrap--disabled::-moz-placeholder,.us-form-select-wrap--disabled .us-form-select::-moz-placeholder,.us-form-select--disabled::-moz-placeholder,.us-form-select--disabled .us-form-select::-moz-placeholder,.us-form-select:disabled::-moz-placeholder,.us-form-select:disabled .us-form-select::-moz-placeholder{color:#ddd;opacity:1}.us-form-select-wrap--disabled:-ms-input-placeholder,.us-form-select-wrap--disabled .us-form-select:-ms-input-placeholder,.us-form-select--disabled:-ms-input-placeholder,.us-form-select--disabled .us-form-select:-ms-input-placeholder,.us-form-select:disabled:-ms-input-placeholder,.us-form-select:disabled .us-form-select:-ms-input-placeholder{color:#ddd}.us-form-select-wrap--disabled:focus,.us-form-select-wrap--disabled .us-form-select:focus,.us-form-select--disabled:focus,.us-form-select--disabled .us-form-select:focus,.us-form-select:disabled:focus,.us-form-select:disabled .us-form-select:focus{box-shadow:none}.us-form-select-wrap--disabled:focus::-webkit-input-placeholder,.us-form-select-wrap--disabled .us-form-select:focus::-webkit-input-placeholder,.us-form-select--disabled:focus::-webkit-input-placeholder,.us-form-select--disabled .us-form-select:focus::-webkit-input-placeholder,.us-form-select:disabled:focus::-webkit-input-placeholder,.us-form-select:disabled .us-form-select:focus::-webkit-input-placeholder{color:#ddd}.us-form-select-wrap--disabled:focus::-moz-placeholder,.us-form-select-wrap--disabled .us-form-select:focus::-moz-placeholder,.us-form-select--disabled:focus::-moz-placeholder,.us-form-select--disabled .us-form-select:focus::-moz-placeholder,.us-form-select:disabled:focus::-moz-placeholder,.us-form-select:disabled .us-form-select:focus::-moz-placeholder{color:#ddd;opacity:1}.us-form-select-wrap--disabled:focus:-ms-input-placeholder,.us-form-select-wrap--disabled .us-form-select:focus:-ms-input-placeholder,.us-form-select--disabled:focus:-ms-input-placeholder,.us-form-select--disabled .us-form-select:focus:-ms-input-placeholder,.us-form-select:disabled:focus:-ms-input-placeholder,.us-form-select:disabled .us-form-select:focus:-ms-input-placeholder{color:#ddd}.us-form-select-wrap--disabled:hover,.us-form-select-wrap--disabled:focus,.us-form-select-wrap--disabled .us-form-select:hover,.us-form-select-wrap--disabled .us-form-select:focus,.us-form-select--disabled:hover,.us-form-select--disabled:focus,.us-form-select--disabled .us-form-select:hover,.us-form-select--disabled .us-form-select:focus,.us-form-select:disabled:hover,.us-form-select:disabled:focus,.us-form-select:disabled .us-form-select:hover,.us-form-select:disabled .us-form-select:focus{background-image:url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIGJhc2VQcm9maWxlPSd0aW55JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHg9JzBweCcgeT0nMHB4JyB3aWR0aD0nNDBweCcgaGVpZ2h0PSc2cHgnIHZpZXdCb3g9JzAgMCA0MCA2Jz48cG9seWdvbiBmaWxsPScjZGRkJyBwb2ludHM9JzI1LjMsMCAyMC4zLDYgMTUuMywwICcvPjwvc3ZnPg==")}.us-validation__icon{position:absolute;color:#fff;text-align:center;border-radius:50%}.us-validation{position:relative;display:block;padding:0.25em 0 0.25em 31px}.us-validation .us-validation__message,.us-validation--error .us-validation__message{color:#d64226;border-color:#d64226}.us-validation .us-validation__message:before,.us-validation .us-validation__message:after,.us-validation--error .us-validation__message:before,.us-validation--error .us-validation__message:after{border-color:#d64226}.us-validation .us-validation__message:after,.us-validation--error .us-validation__message:after{border-right-color:#fff}.us-validation .us-validation__icon,.us-validation--error .us-validation__icon{background-color:#d64226}.us-validation .us-validation__icon:before,.us-validation--error .us-validation__icon:before{content:"!"}.us-validation--success .us-validation__message{color:#2aaa5b;border-color:#2aaa5b}.us-validation--success .us-validation__message:before,.us-validation--success .us-validation__message:after{border-color:#2aaa5b}.us-validation--success .us-validation__message:after{border-right-color:#fff}.us-validation--success .us-validation__icon{background-color:#2aaa5b}.us-validation--success .us-validation__icon:before{content:"✓"}.us-validation__message{position:relative;display:block;min-height:2.4em;padding:.35em .5em;margin:0;line-height:1.5}.us-validation__icon{top:10px;left:0;width:26px;height:26px;font-size:18px;line-height:26px}.us-table{width:100%;color:#63686b}.us-table{border-collapse:separate;border-spacing:0}@media screen and (max-width: 599px){.us-table thead{display:none}.us-table tbody,.us-table tr,.us-table td{display:block}}.us-table-head{padding:0 1em .5em 0}.us-table-head{color:#1c1f4e;text-align:left;vertical-align:middle;border-bottom:1px solid #cbcdce}@media screen and (max-width: 599px){.us-table-body-row{position:relative}.us-table-body-row:before,.us-table-body-row:after{display:table;content:" "}.us-table-body-row:after{clear:both}}.us-table-cell{padding-top:15px;padding-bottom:15px}.us-table-cell{text-align:left;vertical-align:top;border-bottom:1px solid #cbcdce}@media screen and (max-width: 599px){.us-table-cell{padding:0;border:0}}svg:not(:root){overflow:visible}svg.us-icon--before,svg.us-icon--after{display:inline-block;vertical-align:middle}svg.us-icon--before{margin-right:7.5px}svg.us-icon--after{margin-left:7.5px}.us-icon--centered{position:relative;top:50%;margin:0 auto;transform:translateY(-50%)}.us-icon--notext{display:inline-block;text-indent:-999em}svg.us-icon--white{fill:#fff}svg.us-icon--typegrey{fill:#2f353a}svg.us-icon--inputgrey{fill:#84909a}svg.us-icon--typecyan{fill:#008fe9}svg.us-icon--custom{fill:#1c1f4e}svg.us-icon--uswitch{fill:#002396}svg.us-icon--cross{fill:#d64226}svg.us-icon--tick{fill:#2aaa5b}svg.us-icon--facebook{fill:#3c5a99}svg.us-icon--google{fill:#dc4e41}svg.us-icon--renewable{fill:#2aaa5b}svg.us-icon--star-half{fill:#ffd32f}svg.us-icon--starline-half{fill:#ffd32f}svg.us-icon--star{fill:#ffd32f}svg.us-icon--starline{fill:#ffd32f}svg.us-icon--twitter{fill:#00aced}svg.us-icon--hover--white:hover{fill:#fff}svg.us-icon--hover--typegrey:hover{fill:#2f353a}svg.us-icon--hover--inputgrey:hover{fill:#84909a}svg.us-icon--hover--typecyan:hover{fill:#008fe9}svg.us-icon--hover--custom:hover{fill:#1c1f4e}.us-icon--small{width:16px;height:16px}.us-icon--medium{width:32px;height:32px}.us-icon--large{width:64px;height:64px}@media screen and (max-width: 767px){.us-icon--small--sm-tablet{width:16px;height:16px}.us-icon--medium--sm-tablet{width:32px;height:32px}.us-icon--large--sm-tablet{width:64px;height:64px}}@media screen and (max-width: 599px){.us-icon--small--mobile{width:16px;height:16px}.us-icon--medium--mobile{width:32px;height:32px}.us-icon--large--mobile{width:64px;height:64px}}.us-link,.us-content .internal-menu a,.us-list a,.us-content p a,.us-content ul a,.us-content blockquote a{border-bottom:1px solid}a,.us-link{color:#002396;text-decoration:none;transition:color 333ms, border-color 333ms}a:visited,.us-link:visited{color:#002396}a:focus,.us-link:focus{color:#00114a}a:hover,.us-link:hover{color:#008fe9}a:active,.us-link:active{color:#002396}.us-link--light{color:#fff}.us-link--light:visited{color:#fff}.us-link--light:focus{color:#fff}.us-link--light:hover{color:#fff}.us-link--light:active{color:#e9ebed}.us-content .internal-menu,.us-list{list-style:none}.us-content .internal-menu li,.us-list li{font-size:16px;margin:0}.us-content .internal-menu a,.us-list a{display:block;padding-top:.5em;padding-bottom:.5em}.us-content .internal-menu a:after,.us-list a:after{font-size:.8em}.us-content .internal-menu a:hover:after,.us-list a:hover:after{left:.5em}.us-hero .us-content .internal-menu,.us-content .us-hero .internal-menu,.us-hero .us-list{margin-top:1em}.us-hero .us-content .internal-menu a,.us-content .us-hero .internal-menu a,.us-hero .us-list a{color:#1c1f4e}.us-numbered-list,.us-ticked-list{padding:0;margin:1.5em 0;list-style:none}.us-numbered-list li,.us-ticked-list li{position:relative;padding-left:2em;margin:.5em 0}.us-numbered-list li:before,.us-ticked-list li:before{position:absolute;left:0}.us-numbered-list{counter-reset:number-counter}.us-numbered-list li{counter-increment:number-counter}.us-numbered-list li:before{top:0;width:1.5em;height:1.5em;padding-top:.25em;line-height:1;color:#008fe9;text-align:center;border-radius:2em;content:counter(number-counter);box-sizing:border-box}.us-hero .us-numbered-list li:before,.us-numbered-list.us-custom-list-alt li:before{color:#1c1f4e;background:#fff;background:rgba(255,255,255,0.7)}.us-ticked-list li{padding-left:0}.us-ticked-list li:before{top:50%;margin-top:-8px}.us-content .plans-ending .us-btn,.us-btn{display:inline-block;padding:.63em 1.25em;font-size:1em;line-height:1em;color:#2f353a;text-align:center;text-decoration:none;white-space:nowrap;vertical-align:middle;cursor:pointer;background-color:#e9ebed;border:1px solid #babcbe;border-radius:3px;transition:none}.us-content .plans-ending .us-btn:visited,.us-btn:visited{color:#2f353a}.us-content .plans-ending .us-btn:hover,.us-content .plans-ending .us-btn:focus,.us-btn:hover,.us-btn:focus{color:#008fe9;background-color:#e6f4fd;border-color:#008fe9}.us-content .plans-ending .us-btn:active,.us-btn:active{color:#fff;background-color:#008fe9}.us-btn--large{font-size:1.2em}.us-btn--small{padding:.4em .65em}.us-btn--blocked{display:block;width:100%;padding-right:0;padding-left:0}.us-btn--link{padding:0;line-height:1.618;color:#002396;background-color:transparent;border:0}.us-btn--link:hover{color:#1c1f4e;text-decoration:underline;background-color:transparent}.us-btn--disabled,.us-btn:disabled{pointer-events:none;opacity:.5}.us-content .plans-ending .us-btn,.us-content .plans-ending .us-btn:visited,.us-btn--primary,.us-btn--primary:visited{color:#fff;background-color:#d64226;border-color:#ab351e}.us-content .plans-ending .us-btn:hover,.us-content .plans-ending .us-btn:focus,.us-btn--primary:hover,.us-btn--primary:focus{color:#fff;background-color:#ab351e;border-color:#ab351e}.us-content .plans-ending .us-btn:active,.us-btn--primary:active{color:#fff;background-color:#6b2113;border-color:#6b2113}.us-btn--secondary,.us-btn--secondary:visited{color:#fff;background-color:#008fe9;border-color:#0072ba}.us-btn--secondary:hover,.us-btn--secondary:focus{color:#fff;background-color:#0072ba;border-color:#0072ba}.us-btn--secondary:active{color:#fff;background-color:#004875;border-color:#004875}.us-btn--action,.us-btn--action:visited{color:#fff;background-color:#2aaa5b;border-color:#228849}.us-btn--action:hover,.us-btn--action:focus{color:#fff;background-color:#228849;border-color:#228849}.us-btn--action:active{color:#fff;background-color:#15552e;border-color:#15552e}.us-btn--hero,.us-btn--hero:visited{color:#1c1f4e;background-color:transparent;border-color:#1c1f4e}.us-btn--hero:hover,.us-btn--hero:focus{color:#1c1f4e;border-color:#1c1f4e;background-color:#e8e9ed}.us-btn--hero:active{color:#fff;background-color:#1c1f4e;border-color:#1c1f4e}.us-btn--reversed,.us-btn--reversed:visited{color:#fff;background-color:transparent;border-color:#fff}.us-btn--reversed:hover,.us-btn--reversed:focus{color:#fff;border-color:#fff;background-color:rgba(255,255,255,0.2)}.us-btn--reversed:active{color:#2f353a;background-color:#fff;border-color:#fff}.us-hero{background-color:#99e2ff}.us-hero-container{padding-top:1.25em;padding-bottom:1.25em}@media screen and (min-width: 768px){.us-hero-container{padding-top:2.5em;padding-bottom:2.5em}}.us-hero-title{margin-bottom:0;font-size:1.25em}@media screen and (min-width: 768px){.us-hero-title{font-size:2.25em}}.us-hero-title,.us-hero-description{color:#1c1f4e}.us-hero-description{margin-bottom:0;padding-top:5px}.us-hero--double .us-hero-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start}@media screen and (min-width: 768px){.us-hero--double .us-hero-container{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}}@media screen and (min-width: 992px){.us-hero--double .us-hero-container{-ms-flex-align:start;align-items:flex-start}}@media screen and (max-width: 599px){.us-hero__block:nth-child(2){display:none}}@media screen and (min-width: 768px){.us-hero__block:nth-child(1){width:60%;max-width:60%;-ms-flex-positive:1;flex-grow:1;margin:0 100px 0 0}.us-hero__block:nth-child(2){width:40%;margin:0 100px 0 0;display:block}}@media screen and (min-width: 992px){.us-hero__block:nth-child(1){width:auto;max-width:100%;-ms-flex-positive:1;flex-grow:1;margin:0 100px 0 0}.us-hero__block:nth-child(2){width:50%;max-width:50%}}@media screen and (min-width: 768px){.us-content-group{padding-top:50px;padding-bottom:50px;border-bottom:1px solid #e9ebed}}@media screen and (max-width: 991px){.us-content-group.mobile-bordered{padding-top:15px;padding-bottom:15px;border-bottom:1px solid #e9ebed}}@keyframes tab-show{0%{opacity:0}100%{opacity:1}}.us-tabs-nav{display:none;background-color:#f4f5f6}@media screen and (min-width: 768px){.js .us-tabs-nav{display:block}}.us-tabs-nav-menu{display:table;display:-ms-flexbox;display:flex;width:100%;overflow:hidden;-ms-flex-flow:row;flex-flow:row}.us-tabs-nav-link{display:table-cell;width:16.66667%;padding:14px 1em 12px;text-align:center;vertical-align:middle;border-right:1px solid #fff;border-radius:0;transition:none}@media screen and (min-width: 768px){.us-tabs-nav-link{font-size:.875em;line-height:1.25em}}@media screen and (min-width: 992px){.us-tabs-nav-link{font-size:1em}}@media screen and (min-width: 1200px){.us-tabs-nav-link{font-size:1.125em}}.us-tabs-nav-link:last-child{border-right:0}.us-tabs-nav-link:hover,.us-tabs-nav-link.active{color:#008fe9}.us-tabs-nav-link:hover:before,.us-tabs-nav-link.active:before{background-color:#008fe9}.us-tabs-nav-link.active{cursor:default;background-color:#fff}.us-tabs-nav-link.active:hover{background-color:#fff}.us-tabs-nav-mainlink{color:#84909a;position:relative;background-color:#f4f5f6;transition:color 300ms, background-color 300ms}.us-tabs-nav-mainlink:visited{color:#84909a}.us-tabs-nav-mainlink:hover{color:#008fe9}.us-tabs-nav-mainlink:active{color:#008fe9}.us-tabs-nav-mainlink:before{position:absolute;top:0;right:0;left:0;height:5px;background-color:#f4f5f6;content:"";transition:background-color 300ms}.us-tabs-nav-mainlink:hover{background-color:rgba(255,255,255,0.35)}.us-tabs-nav-mainlink:hover .us-tabs-nav-chevron,.us-tabs-nav-mainlink:hover .us-tabs-nav-chevron-wrapper .us-icon,.us-tab.active .us-tabs-nav-mainlink .us-tabs-nav-chevron,.us-tab.active .us-tabs-nav-mainlink .us-tabs-nav-chevron-wrapper .us-icon{transform:rotate(-90deg);fill:#008fe9}.us-tabs-nav-mainlink:hover:before{background-color:#008fe9}.us-tab.active .us-tabs-nav-mainlink:before{background-color:#008fe9}.us-tabs-nav-link{display:-ms-flexbox;display:flex;-webkit-box-align:center;justify-content:center;-ms-flex-align:center;-ms-flex-pack:center;align-items:center}@media screen and (max-width: 991px){.us-tabs-container{padding:0}}.us-tab-title{font-size:1.125em;line-height:1.25em;position:relative;margin:0;font-weight:normal;border-bottom:1px solid #fff}@media screen and (min-width: 768px){.js .us-tab-title{display:none}}.us-tab-title .us-tabs-nav-mainlink{display:block;padding:0.75em 15px 0.5em}.us-tab.active .us-tab-title .us-tabs-nav-mainlink{color:#008fe9;background-color:#fff}.us-tab-title .us-tabs-nav-chevron,.us-tab-title .us-tabs-nav-chevron-wrapper .us-icon{position:absolute;right:15px;transform:rotate(90deg);transition:transform .2s ease}.us-tab-content{display:block;overflow:hidden;opacity:1}@media screen and (max-width: 991px){.us-tab-content{padding-right:15px;padding-left:15px}}.js .us-tab-content{max-height:0}@media screen and (min-width: 768px){.js .us-tab-content{display:none;max-height:none}}.us-tab.active .us-tab-content{max-height:9999px;padding-top:1em}@media screen and (min-width: 768px){.us-tab.active .us-tab-content{display:block;animation-duration:1s;animation-name:tab-show;animation-fill-mode:forwards}}@keyframes loader-intro{from{opacity:0}to{opacity:1}}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.us-loader,.us-loader__overlay{position:absolute;top:0;left:0;width:100%;height:100%}.us-loader--loading .us-loader__spinner{position:relative;z-index:2;display:inline-block;margin-top:1em;margin-bottom:1em;background-repeat:no-repeat}.us-loader--loading .us-loader__spinner{background:transparent url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22%23174695%22%3E%3Cpath%20opacity%3D%22.25%22%20d%3D%22M16%200a16%2016%200%200%200%200%2032%2016%2016%200%200%200%200-32m0%204a12%2012%200%200%201%200%2024%2012%2012%200%200%201%200-24%22%2F%3E%3Cpath%20d%3D%22M16%200a16%2016%200%200%201%2016%2016h-4A12%2012%200%200%200%2016%204z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;animation:spin 500ms infinite linear}.us-loader{z-index:1;display:none;text-align:center}.us-loader__container{position:relative}.us-loader--loading{display:block;animation:loader-intro 500ms forwards}.us-loader--centered{transform-style:preserve-3d}.us-loader__inner{position:relative;z-index:2}.us-loader--loading .us-loader__spinner{width:60px;height:60px;background-size:60px}.us-loader--centered .us-loader__spinner{margin-top:0}.us-loader__text{color:#1c1f4e}.us-loader__overlay{z-index:1;background-color:#fff;opacity:.8}.us-crumbs{margin-top:1em;margin-bottom:1em;list-style:none}.us-crumbs__item{margin-bottom:0;color:#2f353a}.us-crumbs__item:before{display:inline-block;margin:0 .35em;font-size:1.4em;font-weight:normal;content:"\203A"}.us-crumbs__item:first-child:before{width:0;margin:0;color:transparent}.us-crumbs__item:last-child{font-weight:bold}.us-crumbs__link{color:#2f353a}.us-crumbs__link:visited{color:#2f353a}.us-crumbs__link:hover{color:#2f353a;text-decoration:underline}.us-cta{padding:15px;margin-bottom:1.5em;background-color:#eaebeb;border-bottom:10px solid #1c1f4e}@media screen and (min-width: 768px){.us-cta{padding:20px;border-bottom:0;border-left:10px solid #1c1f4e}}.us-cta label{display:block}@media screen and (min-width: 992px){.us-cta label{display:inline-block}}.us-cta__title.us-cta__title{margin-top:0;font-size:18px;font-size:1.125rem}@media screen and (min-width: 768px){.us-cta__title.us-cta__title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:1.125em;line-height:1.25em}}@media screen and (min-width: 992px){.us-cta__title.us-cta__title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:1.5em;line-height:1.25em}}.us-cta--side{padding:15px;border-bottom:10px solid #1c1f4e;border-left:0}@media screen and (min-width: 992px){.us-cta--side{padding:20px}}.us-cta--side .us-form-input{width:100%}.us-overlay--open{overflow:hidden}.us-overlay-parent{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1003;visibility:hidden}.us-overlay-parent--visible{overflow:scroll;visibility:visible}.us-overlay{position:absolute;z-index:1003;width:100%;min-height:100%;background:#fff;transform:translate3d(-100%, 0, 0);transition:transform .3s ease-in,opacity .3s linear,box-shadow .3s linear;-webkit-overflow-scrolling:auto}.us-overlay-parent--active .us-overlay{opacity:1;transform:translate3d(0, 0, 0);box-shadow:1px 0 18px 0 rgba(0,0,0,0.3);transition-timing-function:ease-out}@media screen and (min-width: 600px){.us-overlay{width:340px}}.us-overlay--above{z-index:1004}.us-overlay-parent--active .us-overlay--above{box-shadow:1px 0 30px 5px rgba(0,0,0,0.3)}@media screen and (min-width: 992px){.us-overlay--modal{position:relative;width:60%;max-width:700px;min-height:0;margin:5% auto;opacity:0;transform:translate3d(0, -30px, 0)}.us-overlay-parent--active .us-overlay--modal{transform:translate3d(0, 0, 0);box-shadow:0 1px 18px 0 rgba(0,0,0,0.3)}.us-overlay-parent--active .us-overlay--modal.us-overlay--above{box-shadow:0 1px 30px 5px rgba(0,0,0,0.3)}}.us-overlay--right{right:0;transform:translate3d(100%, 0, 0)}.us-overlay-parent--active .us-overlay--right{transform:translate3d(0, 0, 0);box-shadow:-1px 0 18px 0 rgba(0,0,0,0.3)}.us-overlay-parent--active .us-overlay--right.us-overlay--above{box-shadow:-1px 0 30px 5px rgba(0,0,0,0.3)}.us-overlay__container{position:relative}.us-overlay__body{padding:1em;color:#2f353a}.us-overlay__header{position:relative;width:100%;min-height:55px;padding:1em;color:#fff;background:#1c1f4e}.us-overlay__title{width:calc(100% - 64px)}.us-overlay__close{position:absolute;top:.75em;right:1em}@media screen and (min-width: 768px){.us-tooltip--left .us-tooltip__note,.us-tooltip--right .us-tooltip__note{top:-1em}.us-tooltip--left .us-tooltip__note .us-tooltip__arrow,.us-tooltip--right .us-tooltip__note .us-tooltip__arrow{top:1em}.us-tooltip--left .us-tooltip__note .us-tooltip__arrow:after,.us-tooltip--right .us-tooltip__note .us-tooltip__arrow:after{top:-10px}}@media screen and (min-width: 768px){.us-tooltip--top .us-tooltip__note,.us-tooltip--bottom .us-tooltip__note{left:50%;margin-left:-150px}.us-tooltip--top .us-tooltip__note .us-tooltip__arrow,.us-tooltip--bottom .us-tooltip__note .us-tooltip__arrow,.us-tooltip--top .us-tooltip__note .us-tooltip__arrow:after,.us-tooltip--bottom .us-tooltip__note .us-tooltip__arrow:after{left:50%;margin-left:-10px}}@media screen and (max-width: 991px){.us-tooltip.us-tooltip--active .us-tooltip__note{display:block;pointer-events:all;opacity:1;visibility:visible;transition-delay:0ms}.us-tooltip.us-tooltip--active .us-tooltip__icon{background:#008fe9}}@media screen and (min-width: 768px){.us-tooltip:hover .us-tooltip__note{display:block;pointer-events:all;opacity:1;visibility:visible;transition-delay:0ms}.us-tooltip:hover .us-tooltip__icon{background:#008fe9}}.us-tooltip__wrapper{position:static;top:0;right:0}@media screen and (min-width: 768px){.us-tooltip__wrapper{position:absolute}}.us-tooltip__icon{position:absolute;top:0;right:0;width:22px;height:22px;font-weight:700;line-height:22px;color:#fff;text-align:center;cursor:pointer;background:#b0b8bf;border-radius:50%}@media screen and (min-width: 768px){.us-tooltip__icon{position:static}}.us-tooltip__icon:before{content:"?"}.us-tooltip__note{position:static;display:none;padding:.75em 1em;margin-top:1em;margin-bottom:1em;color:#2f353a;background:#fff;border:1px solid #008fe9;border-radius:4px}@media screen and (min-width: 768px){.us-tooltip__note{position:absolute;display:block;width:300px;margin-top:0;margin-bottom:0;pointer-events:none;opacity:0;visibility:hidden;transition:visibility 0ms ease 300ms, opacity 300ms ease}}.us-tooltip__arrow{position:absolute}.us-tooltip__arrow:after{position:absolute;content:""}.us-tooltip--small .us-tooltip__icon{width:16px;height:16px;font-size:.875em;line-height:16px}.us-tooltip--top .us-tooltip__note{bottom:32px}@media screen and (min-width: 768px){.us-tooltip--top .us-tooltip__note .us-tooltip__arrow{width:0;height:0;border-top:10px solid #008fe9;border-right:10px solid transparent;border-left:10px solid transparent;bottom:-10px}.us-tooltip--top .us-tooltip__note .us-tooltip__arrow:after{width:0;height:0;border-top:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent;bottom:1px}}.us-tooltip--bottom .us-tooltip__note{top:32px}@media screen and (min-width: 768px){.us-tooltip--bottom .us-tooltip__note .us-tooltip__arrow{width:0;height:0;border-right:10px solid transparent;border-bottom:10px solid #008fe9;border-left:10px solid transparent;top:-10px}.us-tooltip--bottom .us-tooltip__note .us-tooltip__arrow:after{width:0;height:0;border-right:10px solid transparent;border-bottom:10px solid #fff;border-left:10px solid transparent;top:1px}}.us-tooltip--left .us-tooltip__note{left:-315px}@media screen and (min-width: 768px){.us-tooltip--left .us-tooltip__note .us-tooltip__arrow{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #008fe9;right:-10px}.us-tooltip--left .us-tooltip__note .us-tooltip__arrow:after{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #fff;right:1px}}.us-tooltip--right .us-tooltip__note{right:-315px}@media screen and (min-width: 768px){.us-tooltip--right .us-tooltip__note .us-tooltip__arrow{width:0;height:0;border-top:10px solid transparent;border-right:10px solid #008fe9;border-bottom:10px solid transparent;left:-10px}.us-tooltip--right .us-tooltip__note .us-tooltip__arrow:after{width:0;height:0;border-top:10px solid transparent;border-right:10px solid #fff;border-bottom:10px solid transparent;left:1px}}.us-usp{display:inline-block;padding:0 10px;font-weight:bold;line-height:1.618;color:#fff;text-align:center;background-color:#008fe9}.us-usp--cyan{background-color:#99e2ff;color:#1c1f4e}.us-usp--typecyan{background-color:#008fe9}.us-usp--blue{background-color:#002396}.us-usp--navy{background-color:#1c1f4e}.us-usp--red{background-color:#d64226}.us-usp--green{background-color:#2aaa5b}.us-usp--purple{background-color:#9c55b8}.us-usp--orange{background-color:#f27930}.us-usp--yellow{background-color:#ffd32f;color:#2f353a}.us-usp--typegrey{background-color:#2f353a}.us-usp--annotated{font-weight:normal;color:#2f353a;text-align:left;background-color:#f4f5f6}.us-usp--annotated .us-usp{margin-right:10px;margin-left:-10px}.us-progress{position:relative;z-index:4;background-color:#1c1f4e}.us-progress__nav{list-style:none;counter-reset:number-counter}.us-progress__item{position:relative;float:left;line-height:1.5em;counter-increment:number-counter}@media screen and (min-width: 768px){.us-progress__item{margin-right:30px}}.us-progress__link{position:relative;display:block;padding-top:.5em;padding-bottom:.5em}@media screen and (min-width: 768px){.us-progress__link{padding-top:1em;padding-bottom:1em}}.us-progress__link:before{position:relative;display:inline-block;width:1.5em;height:1.5em;margin-right:10px;font-weight:700;color:#1c1f4e;text-align:center;border-radius:50%;content:counter(number-counter);transition:background-color .3s}.us-progress__link--next{color:#8e8fa7}.us-progress__link--next:before{background-color:#8e8fa7}.us-progress__link--current{color:#fff}.us-progress__link--current:before{background-color:#fff}.us-progress__link--complete{color:#99e2ff}.us-progress__link--complete:visited{color:#99e2ff}.us-progress__link--complete:focus{color:#fff}.us-progress__link--complete:hover{color:#fff}.us-progress__link--complete:active{color:#99e2ff}.us-progress__link--complete:before{background-color:#99e2ff}.us-progress__link--complete:hover:before,.us-progress__link--complete:active:before{background-color:#fff}.us-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1002;background:rgba(0,35,150,0.5);opacity:0;visibility:hidden}.us-backdrop--animated{transition:opacity 0.5s}.us-backdrop--visible{visibility:visible}.us-backdrop--active{opacity:1}.us-reminder{background-color:#e4f8ff;border:1px solid #008fe9;max-width:950px}@media screen and (max-width: 767px){.us-reminder.us-container{padding:0}}.us-reminder-title{background-color:#fff;padding:15px;font-weight:bold}.us-reminder-content{padding:15px 0}.us-reminder-content p{margin-bottom:15px}.us-tabs--page-nav{display:none;background-color:#f4f5f6}@media screen and (min-width: 768px){.us-tabs--page-nav{display:block}}.us-tabs__inner{width:100%;max-width:1200px;margin:0 auto}.us-tabs__links{display:-ms-flexbox;display:flex;padding:0;margin:0;list-style:none;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch}.us-tabs__links-item{position:relative;display:-ms-flexbox;display:flex;max-width:180px;margin:0;text-align:center;cursor:pointer;border-right:1px solid #fff;transition:background-color .2s;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:.875em;line-height:1.25em}@media screen and (min-width: 992px){.us-tabs__links-item{font-size:1em;line-height:1.25em}}.us-tabs__links-item a{display:block;color:#84909a;transition:color .2s;padding:14px 1em 12px}.us-tabs__links-item:last-child{border:0}.us-tabs__links-item::before{position:absolute;top:0;left:0;width:100%;border-top:5px solid #008fe9;content:"";opacity:0;transition:opacity .2s}.us-tabs__links-item:hover{background-color:#f8f9f9}.us-tabs__links-item:hover a{color:#008fe9}.us-tabs__links-item:hover::before{opacity:1}.us-tabs__links-item--active{background-color:#fff}.us-tabs__links-item--active a{color:#008fe9}.us-tabs__links-item--active::before{opacity:1}.us-table-toolbar{background:#f4f5f6;padding:15px;border-bottom:1px solid #e9ebed;margin:0 auto 15px}@media screen and (min-width: 768px){.us-table-toolbar{display:-ms-flexbox;display:flex;background-color:transparent;border-bottom:0;padding:30px 15px;-ms-flex-direction:row;flex-direction:row}}.us-table-toolbar__wrapper{display:-ms-flexbox;display:flex;-ms-flex:1 1;flex:1 1}.us-table-toolbar__wrapper:first-child{margin-bottom:15px}@media screen and (min-width: 768px){.us-table-toolbar__wrapper:first-child{margin-bottom:0}}.us-table-toolbar__sort{width:100%}@media screen and (min-width: 768px){.us-table-toolbar__sort{width:auto}}.us-table-toolbar__sort select{width:100%}@media screen and (min-width: 768px){.us-table-toolbar__sort select{width:auto}}.us-table-toolbar__wrapper--right{-ms-flex-pack:end;justify-content:flex-end}.us-table-toolbar__heading{font-size:18px}.us-comp-banner{width:100%;background-color:#99e2ff;padding:15px;text-align:center;font-size:14px;line-height:20px}.us-comp-banner__inner{width:100%;max-width:1200px;margin:0 auto}.us-comp-banner__text:last-child{padding:0;margin:0}.us-promo-banner{width:100%;padding:1.7em;background-color:#1c1f4e}.us-promo-banner__inner{display:-ms-flexbox;display:flex;width:100%;max-width:800px;margin:0 auto;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}@media screen and (min-width: 992px){.us-promo-banner__inner{max-width:1200px;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}}.us-promo-banner__list{display:-ms-flexbox;display:flex;width:100%;padding:0;margin:1em 0 1.2em 0;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}@media screen and (min-width: 992px){.us-promo-banner__list{width:70%;-ms-flex-direction:row;flex-direction:row;-ms-flex-positive:1;flex-grow:1}}.us-promo-banner__list-item{display:-ms-flexbox;display:flex;width:100%;margin:15px 0 0 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:start;justify-content:flex-start}@media screen and (min-width: 992px){.us-promo-banner__list-item{margin:0}}.us-promo-banner__list-item:first-child{margin:0}.us-promo-banner__title{font-size:1.2em;font-weight:700;color:#fff}@media screen and (min-width: 992px){.us-promo-banner__title{width:100%;font-size:1.5em}}.us-promo-banner__circle{display:inline-block;width:36px;height:36px;min-width:36px;min-height:36px;margin-right:10px;line-height:30px;color:#fff;text-align:center;background:#2aaa5b;border:solid 3px #fff;border-radius:50%;-ms-flex-item-align:start;align-self:flex-start}.us-promo-banner__text{padding:5px 10px 0 10px;color:#fff;-ms-flex-positive:1;flex-grow:1;-ms-flex-item-align:start;align-self:flex-start}.us-promo-banner__button{margin:0 auto}@media screen and (min-width: 992px){.us-promo-banner__button{width:auto;-ms-flex-positive:1;flex-grow:1}}.us-promo-banner__button a{width:100%}.us-ct-row{position:relative;display:block;margin-bottom:15px;color:#1c1f4e;background:#fff;border:1px solid #e9ebed;border-radius:5px}.us-ct-row--details-toggle{border-bottom-width:5px}.us-ct-row:hover{cursor:pointer}.us-ct-row__title{display:none;width:100%;padding:15px;border-bottom:1px solid #e9ebed}@media screen and (min-width: 992px){.us-ct-row__title{display:-ms-flexbox;display:flex}}.us-ct-row__title-text{margin:0 15px 0 0;font-weight:bold}.us-ct-row__product{position:relative;border-bottom:1px solid #e9ebed}@media screen and (min-width: 992px){.us-ct-row__product{display:-ms-flexbox;display:flex}}.us-ct-row__image{max-width:150px}@media screen and (min-width: 992px){.us-ct-row__image{max-width:100%;min-width:100%}}.us-ct-row__title--mobile{margin-top:10px}.us-ct-row__usp--mobile{display:-ms-flexbox;display:flex;margin-top:10px}@media screen and (min-width: 992px){.us-ct-row__title--mobile,.us-ct-row__usp--mobile{display:none}}.us-ct-row__col{padding:15px;border-top:1px solid #e9ebed}@media screen and (min-width: 992px){.us-ct-row__col{border-right:1px solid #e9ebed;text-align:center;border-top:0}}.us-ct-row__col--stretch{display:-ms-flexbox;display:flex;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-pack:justify;justify-content:space-between}@media screen and (min-width: 992px){.us-ct-row__col--stretch{display:block;-ms-flex:1 1;flex:1 1}}.us-ct-row__col--apply{position:absolute;top:0;right:0;border-top:0;width:calc(100% - 165px);max-width:200px;text-align:center}@media screen and (min-width: 768px){.us-ct-row__col--apply{max-width:250px}}@media screen and (min-width: 992px){.us-ct-row__col--apply{border-right:0;position:relative;-ms-flex:0 0 160px;flex:0 0 160px}}.us-ct-row__col--image{border-top:0}@media screen and (min-width: 992px){.us-ct-row__col--image{-ms-flex:0 0 150px;flex:0 0 150px}}@media screen and (min-width: 992px){.us-ct-row__col--image img{width:120px;height:auto}}.us-ct-row__more-info{display:inline-block;margin-top:10px;color:#008fe9;text-decoration:underline;white-space:nowrap;cursor:pointer}.us-ct-row__rep-ex{display:block;text-align:center;border-bottom:1px solid #e9ebed;padding:10px;font-weight:bold;width:100%}@media screen and (min-width: 600px){.us-ct-row__rep-ex{padding:10px 80px}}.us-ct-row__key-details-toggle{display:block;width:100%;padding:10px;font-size:16px;font-weight:700;color:#0c72bf;text-align:center;cursor:pointer;background:none;border:0;outline:0}.us-ct-row__key-details-chevron{width:20px;height:20px;padding:3px;margin-left:4px;border:1px solid;border-radius:5px;transform:translateY(5px) rotate(90deg);stroke-width:10px;transform-origin:center;fill:#0c72bf}.us-ct-row__key-details-toggle-open .us-ct-row__key-details-chevron{transform:translateY(5px) rotate(-90deg)}.us-ct-row__key-details-info{padding:0 15px;margin-top:20px;-ms-flex-pack:space-evenly;justify-content:space-evenly}@media screen and (min-width: 992px){.us-ct-row__key-details-info{display:-ms-flexbox;display:flex}}.us-ct-row__key-details-col{padding:0 15px;-ms-flex:1 1;flex:1 1}.us-ct-row__key-details-ul{padding:0 15px 0 20px}.us-ct-row__criteria{padding:0;list-style-type:none}.us-ct-row__criteria-li{position:relative;padding-left:30px}.us-ct-row__criteria-tick{position:absolute;top:4px;left:0}.us-ct-row__criteria-additional{font-size:14px}.us-ct-row__name{-ms-flex-order:2;order:2}.us-ct-row__value{font-size:14px;-ms-flex-order:1;order:1}.us-ct-row__eligibility{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0 0 10px 0}.us-ct-row__eligibility-score{font-weight:700}.us-ct-row__eligibility-link{white-space:nowrap;cursor:pointer;color:#008fe9;border-bottom:1px solid #008fe9}.us-ct-row__eligibility-progress{height:15px;width:100%;background:#e9ebed;margin:0 0 5px 0;position:relative}.us-ct-row__eligibility-bar{height:inherit;position:absolute;top:0;left:0}.us-calculator{position:relative;display:block;width:100%}.us-calculator__input{display:inline-table;width:calc(100% - 163px);margin-right:10px}.us-article{padding-top:1em;padding-bottom:1em;border-bottom:1px solid #e9ebed}@media screen and (min-width: 768px){.us-article{padding-top:2em;padding-bottom:2em}}.us-article__link{display:block;-webkit-tap-highlight-color:transparent}.us-article__link:hover .us-article__title{text-decoration:underline}.us-article__link,.us-article__link:hover,.us-article__link:visited{color:inherit}.us-article__title{font-size:1.125em;line-height:1.25em}@media screen and (min-width: 768px){.us-article__title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:1.5em;line-height:1.25em}}.us-article__meta,.us-article__description{color:#65717b}.us-article__meta{font-size:.875em}.us-article__description{margin-bottom:1em}@media screen and (min-width: 768px){.us-article__description{font-size:1.125em}}.us-article__image{border:1px solid #e9ebed}.us-news-item,.us-guide-item,.us-more-item{margin-bottom:1em}.us-news-item:hover .us-news-item-image,.us-guide-item:hover .us-news-item-image,.us-more-item:hover .us-news-item-image,.us-news-item:hover .us-guide-item-image,.us-guide-item:hover .us-guide-item-image,.us-more-item:hover .us-guide-item-image{opacity:.8}.us-news-item:hover .us-news-item-readmore:after,.us-guide-item:hover .us-news-item-readmore:after,.us-more-item:hover .us-news-item-readmore:after,.us-news-item:hover .us-guide-item-readmore:after,.us-guide-item:hover .us-guide-item-readmore:after,.us-more-item:hover .us-guide-item-readmore:after{left:.5em}@media screen and (max-width: 599px){.us-article-group .us-news-item,.us-article-group .us-guide-item,.us-article-group .us-more-item{padding:0;margin-bottom:0}}.us-news-item-link,.us-guide-item-link,.us-more-item-link{position:relative;display:block;overflow:hidden;text-decoration:none;background-color:#fff;transition:border-color 333ms, background-color 333ms}@media screen and (min-width: 600px){.us-news-item-link,.us-guide-item-link,.us-more-item-link{padding-bottom:2.1875em}}@media screen and (max-width: 599px){.us-article-group .us-news-item-link,.us-article-group .us-guide-item-link,.us-article-group .us-more-item-link{border-top-width:0;border-radius:0}}.us-news-item-title,.us-guide-item-title{padding:9px;margin:0;color:#1c1f4e}.us-news-item-snippet,.us-guide-item-description{font-size:14px;font-size:.875rem;line-height:1.618;padding-top:8.144px;padding-top:.509rem;margin-bottom:17.744px;margin-bottom:1.109rem;padding:0 9px;color:#1c1f4e}.us-news-item-image-container,.us-guide-item-image-container{display:none}@media screen and (min-width: 600px){.us-news-item-image-container,.us-guide-item-image-container{display:block}}.us-news-item-image,.us-guide-item-image{width:100%;height:auto;border-radius:.3125em .3125em 0 0;transition:opacity 333ms}.background.us-news-item-image,.background.us-guide-item-image{height:128px;background-position:center center;background-repeat:no-repeat;background-size:cover}.us-news-item-readmorelink,.us-guide-item-readmorelink{color:#008fe9;border-bottom:1px solid #008fe9}.us-news-item-readmorelink:visited,.us-guide-item-readmorelink:visited{color:#008fe9}.us-news-item-readmorelink:hover,.us-guide-item-readmorelink:hover{color:#008fe9}.us-news-item-readmorelink:active,.us-guide-item-readmorelink:active{color:#008fe9}.us-news-item-readmore,.us-guide-item-readmore{position:absolute;bottom:0;display:none;padding:9px;color:#008fe9;white-space:nowrap}@media screen and (min-width: 600px){.us-news-item-readmore,.us-guide-item-readmore{display:block}}@media screen and (max-width: 599px){.us-article-group{margin-bottom:1em;overflow:hidden}.us-article-group .us-news-item:first-child .us-news-item-link,.us-article-group .us-guide-item:first-child .us-news-item-link,.us-article-group .us-more-item:first-child .us-news-item-link,.us-article-group .us-news-item:first-child .us-guide-item-link,.us-article-group .us-guide-item:first-child .us-guide-item-link,.us-article-group .us-more-item:first-child .us-guide-item-link,.us-article-group .us-news-item:first-child .us-more-item-link,.us-article-group .us-guide-item:first-child .us-more-item-link,.us-article-group .us-more-item:first-child .us-more-item-link{border-top-width:1px;border-bottom-width:1px;border-radius:.3125em .3125em 0 0}.us-article-group .us-news-item:last-child .us-news-item-link,.us-article-group .us-guide-item:last-child .us-news-item-link,.us-article-group .us-more-item:last-child .us-news-item-link,.us-article-group .us-news-item:last-child .us-guide-item-link,.us-article-group .us-guide-item:last-child .us-guide-item-link,.us-article-group .us-more-item:last-child .us-guide-item-link,.us-article-group .us-news-item:last-child .us-more-item-link,.us-article-group .us-guide-item:last-child .us-more-item-link,.us-article-group .us-more-item:last-child .us-more-item-link{border-bottom-width:1px;border-radius:0 0 .3125em .3125em}}.us-news-meta{padding-right:9px;padding-left:9px;overflow:hidden}.us-news-meta .category,.us-news-meta .date{padding-top:.25em;padding-bottom:.25em;font-size:.8125em;font-weight:bold;color:#1c1f4e}@media screen and (min-width: 1200px){.us-news-meta .category,.us-news-meta .date{font-size:.875em}}.us-news-meta .date{display:block;float:right}.us-news-meta .category{display:block;float:left}.us-more-item-title{display:block;padding:9px;color:#008fe9}.us-related{margin-bottom:30px}.us-related__item{margin-bottom:0}.us-related__title{font-size:1.125em}.us-related__item-link{color:#65717b;display:block;padding-top:.5em;padding-bottom:.5em;border-bottom:1px solid #b0b8bf;transition:color .3s, border-color .3s}.us-related__item-link:visited{color:#65717b}.us-related__item-link:hover{color:#008fe9}.us-related__item-link:active{color:#65717b}.us-related__item-link--more{color:#2f353a;padding-right:.5em;text-align:right;background-color:#e4f8ff}.us-related__item-link--more:visited{color:#2f353a}.us-related__item-link--more:hover{color:#008fe9}.us-related__item-link--more:active{color:#2f353a}.us-related__item-title{vertical-align:middle}@media screen and (min-width: 992px){.us-related__item-title{display:inline-block;width:calc(100% - 90px);margin-left:7.5px}}@media screen and (min-width: 992px){.us-related__item-image{display:inline-block;width:70px;height:70px;vertical-align:middle;background-position:center center;background-repeat:no-repeat;background-size:100%}}.us-list--reset{list-style:none}.us-blocked{display:block}.us-trailered{margin-bottom:1em}.us-trailered--large{margin-bottom:1.5em}.us-trailered--small{margin-bottom:.5em}.us-align--left{text-align:left}.us-align--right{text-align:right}.us-align--center{text-align:center}.us-color--blue{color:#002396}.us-background-color--blue{background:#002396}.us-color--navy{color:#1c1f4e}.us-background-color--navy{background:#1c1f4e}.us-color--typecyan{color:#008fe9}.us-background-color--typecyan{background:#008fe9}.us-color--cyan{color:#99e2ff}.us-background-color--cyan{background:#99e2ff}.us-color--red{color:#d64226}.us-background-color--red{background:#d64226}.us-color--green{color:#2aaa5b}.us-background-color--green{background:#2aaa5b}.us-color--typegrey{color:#2f353a}.us-background-color--typegrey{background:#2f353a}.us-color--typegrey-2{color:#65717b}.us-background-color--typegrey-2{background:#65717b}.us-color--inputgrey{color:#84909a}.us-background-color--inputgrey{background:#84909a}.us-color--bordergrey{color:#b0b8bf}.us-background-color--bordergrey{background:#b0b8bf}.us-color--keylinegrey{color:#e9ebed}.us-background-color--keylinegrey{background:#e9ebed}.us-reset--padding{padding:0}.us-reset--margin{margin:0}.us-margin-top{margin-top:1em}.us-padding-top{padding-top:1em}.us-margin-top--small{margin-top:.5em}.us-padding-top--small{padding-top:.5em}.us-margin-top--large{margin-top:1.5em}.us-padding-top--large{padding-top:1.5em}.us-margin-right{margin-right:1em}.us-padding-right{padding-right:1em}.us-margin-right--small{margin-right:.5em}.us-padding-right--small{padding-right:.5em}.us-margin-right--large{margin-right:1.5em}.us-padding-right--large{padding-right:1.5em}.us-margin-bottom{margin-bottom:1em}.us-padding-bottom{padding-bottom:1em}.us-margin-bottom--small{margin-bottom:.5em}.us-padding-bottom--small{padding-bottom:.5em}.us-margin-bottom--large{margin-bottom:1.5em}.us-padding-bottom--large{padding-bottom:1.5em}.us-margin-left{margin-left:1em}.us-padding-left{padding-left:1em}.us-margin-left--small{margin-left:.5em}.us-padding-left--small{padding-left:.5em}.us-margin-left--large{margin-left:1.5em}.us-padding-left--large{padding-left:1.5em}.us-img--full{display:block;height:auto;max-width:100%;min-width:100%}.us-img--left{margin-right:1em;margin-bottom:1em}.us-img--right{margin-bottom:1em;margin-left:1em}@media screen and (min-width: 768px){.us-grid-md--push-1{padding-left:8.33333%}}@media screen and (min-width: 992px){.us-grid-lg--push-1{padding-left:8.33333%}}@media screen and (min-width: 768px){.us-grid-md--push-2{padding-left:16.66667%}}@media screen and (min-width: 992px){.us-grid-lg--push-2{padding-left:16.66667%}}@media screen and (min-width: 768px){.us-grid-md--push-3{padding-left:25%}}@media screen and (min-width: 992px){.us-grid-lg--push-3{padding-left:25%}}@media screen and (min-width: 768px){.us-grid-md--push-4{padding-left:33.33333%}}@media screen and (min-width: 992px){.us-grid-lg--push-4{padding-left:33.33333%}}@media screen and (max-width: 599px){.us-mobile--hidden{display:none}}.us-mobile--block{display:none}@media screen and (max-width: 599px){.us-mobile--block{display:block}}.us-mobile--inline-block{display:none}@media screen and (max-width: 599px){.us-mobile--inline-block{display:inline-block}}.us-mobile--inline{display:none}@media screen and (max-width: 599px){.us-mobile--inline{display:inline}}@media screen and (min-width: 600px){.us-sm-tablet--hidden{display:none}}.us-sm-tablet--block{display:none}@media screen and (min-width: 600px){.us-sm-tablet--block{display:block}}.us-sm-tablet--inline-block{display:none}@media screen and (min-width: 600px){.us-sm-tablet--inline-block{display:inline-block}}.us-sm-tablet--inline{display:none}@media screen and (min-width: 600px){.us-sm-tablet--inline{display:inline}}@media screen and (min-width: 768px){.us-tablet--hidden{display:none}}.us-tablet--block{display:none}@media screen and (min-width: 768px){.us-tablet--block{display:block}}.us-tablet--inline-block{display:none}@media screen and (min-width: 768px){.us-tablet--inline-block{display:inline-block}}.us-tablet--inline{display:none}@media screen and (min-width: 768px){.us-tablet--inline{display:inline}}@media screen and (min-width: 992px){.us-desktop--hidden{display:none}}.us-desktop--block{display:none}@media screen and (min-width: 992px){.us-desktop--block{display:block}}.us-desktop--inline-block{display:none}@media screen and (min-width: 992px){.us-desktop--inline-block{display:inline-block}}.us-desktop--inline{display:none}@media screen and (min-width: 992px){.us-desktop--inline{display:inline}}@media screen and (min-width: 1200px){.us-lg-desktop--hidden{display:none}}.us-lg-desktop--block{display:none}@media screen and (min-width: 1200px){.us-lg-desktop--block{display:block}}.us-lg-desktop--inline-block{display:none}@media screen and (min-width: 1200px){.us-lg-desktop--inline-block{display:inline-block}}.us-lg-desktop--inline{display:none}@media screen and (min-width: 1200px){.us-lg-desktop--inline{display:inline}}.us-content__header img{display:none;height:auto;max-width:100%;min-width:100%}@media screen and (min-width: 768px){.us-content__header img{display:block}}.us-content__title{position:relative;padding:.5em 0 0 0;margin:0;clear:both;font-size:1.6785em;color:#1c1f4e;background-color:#fff}@media screen and (min-width: 992px){.us-content__title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:2.25em;line-height:1.3em;padding:.5em 0 1em 0}}.us-social{padding-top:1em}.us-social-btn{display:inline-block;margin-right:.5em;vertical-align:top}.us-content{margin-bottom:30px;font-size:16px;font-size:1rem;line-height:1.618}@media screen and (min-width: 768px){.us-content{font-size:18px;font-size:1.125rem;line-height:1.618}}@media screen and (min-width: 992px){.us-content{font-size:20px;font-size:1.25rem;line-height:1.618;text-rendering:optimizeSpeed}}.us-content h1,.us-content .us-heading--1{font-size:1.875em;line-height:1.3em}.us-content h2,.us-content .us-heading--2{font-size:1.5em;line-height:1.3em}.us-content h3,.us-content .us-heading--3{font-size:1.25em;line-height:1.25em}.us-content h4,.us-content .us-heading--4{font-size:1.125em;line-height:1.25em}.us-content h5,.us-content .us-heading--5{font-size:1em;line-height:.95em}.us-content h6,.us-content .us-heading--6{font-size:1em;line-height:.95em}.us-content h2,.us-content h3,.us-content h4,.us-content h5,.us-content h6{margin-top:30px;margin-bottom:.5em}@media screen and (min-width: 768px){.us-content h2,.us-content h3,.us-content h4,.us-content h5,.us-content h6{margin-top:50px}}.us-content img{height:auto;max-width:100%;padding-top:1em;margin-bottom:1em}.us-content table{width:100%;font-size:16px;border-collapse:separate}.us-content table a{border:0}.us-content table td,.us-content table th{padding:7.5px;text-align:left;vertical-align:middle;border-bottom:1px solid #b0b8bf}.us-content table thead{background-color:#e9ebed}.us-content figure{padding:15px;margin:0;background-color:#f4f5f6;border:1px solid #e9ebed}.us-content figure img{padding-top:0;margin-bottom:0}.us-content figure figcaption{display:inline-block;vertical-align:top}@media screen and (min-width: 768px){.us-content figure figcaption{width:50%;margin-left:30px}}.us-content .strap{font-size:18px;font-size:1.125rem;line-height:1.618;padding-top:8.144px;padding-top:.509rem;margin-bottom:17.744px;margin-bottom:1.109rem}@media screen and (min-width: 768px){.us-content .strap{font-size:22px;font-size:1.375rem;line-height:1.618;padding-top:8.144px;padding-top:.509rem;margin-bottom:17.744px;margin-bottom:1.109rem;margin-bottom:2em}}.us-content .us-cta{font-size:16px}.us-content .plans-ending{list-style:none;border-top:1px solid #002396}.us-content .plans-ending>li{padding-top:.5em;padding-bottom:.5em;margin:0;border-bottom:1px solid #002396}.us-content .plans-ending ul{list-style:disc}.us-content .plans-ending .row{position:relative;font-weight:700;color:#002396;cursor:pointer;transition:color .3s}.us-content .plans-ending .row:after{position:absolute;top:50%;right:1em;margin-top:-.75em;font-size:2em;font-weight:700;content:"\27E9"}.us-content .plans-ending .row:hover{color:#008fe9}.us-content .plans-ending img{margin:0 1em 0 1em;vertical-align:middle}.us-content .plans-ending .table-container{margin-top:.5em}.js .us-content .plans-ending .table-container{display:none}.us-content .fuel-breakdown{width:100%;overflow:hidden;list-style:none}.us-content .fuel-breakdown li{float:left;padding:15px 0;font-size:16px;font-size:1rem;color:#fff;text-align:center;vertical-align:middle}.us-content .fuel-breakdown li b{display:block}.us-content .fuel-breakdown .coal{background-color:#b0b8bf}.us-content .fuel-breakdown .gas{background-color:#008fe9}.us-content .fuel-breakdown .nuclear{background-color:#f27930}.us-content .fuel-breakdown .renewable{background-color:#2aaa5b}.us-content .fuel-breakdown .other{background-color:#2f353a;text-indent:-999em}
|
data/dist/ustyle-latest.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
/*! uStyle version 1.16.2. Copyright uSwitch limited, all rights reserved. *//*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}h1,.us-more-item-title,.us-heading--1,h2,.us-heading--2,h3,.us-loader__text,.us-more-item-title.small,.us-heading--3,h4,.us-news-item-title,.us-guide-item-title,.us-heading--4,h5,.us-heading--5,h6,.us-heading--6,.us-field>label,.us-field>.us-faux-label,.us-validation__icon,.us-btn--stronger,.us-tab-title,.us-cta__title,.us-article__title,.us-font--heading-p,.us-font--heading-s{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;font-weight:700}blockquote,html,.us-field-toggle label,.us-btn,.us-news-item-readmorelink,.us-guide-item-readmorelink,.us-related__item-title,.us-font--normal{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif}blockquote{font-style:italic}.us-crumbs,.us-related__item-title{font-size:.875em;line-height:1.15em}.us-crumbs__item,.us-float--left,.us-img--left{float:left}.us-float--right,.us-img--right{float:right}.us-list,.us-btn,.us-hero-description,.us-crumbs,.us-progress__nav,.us-progress__item,.us-list--reset,.us-reset{padding:0;margin:0}.us-container:before,.us-hero-container:before,.us-tabs-nav-wrapper:before,.us-tabs-container:before,.us-overlay__body:before,.us-grid-row:before,.us-field:before,.us-toggle:before,.us-crumbs:before,.us-related__item-link:before,.us-clearfix:before,.us-container:after,.us-hero-container:after,.us-tabs-nav-wrapper:after,.us-tabs-container:after,.us-overlay__body:after,.us-grid-row:after,.us-field:after,.us-toggle:after,.us-crumbs:after,.us-related__item-link:after,.us-clearfix:after{display:table;content:" "}.us-container:after,.us-hero-container:after,.us-tabs-nav-wrapper:after,.us-tabs-container:after,.us-overlay__body:after,.us-grid-row:after,.us-field:after,.us-toggle:after,.us-crumbs:after,.us-related__item-link:after,.us-clearfix:after{clear:both}.us-news-item-link,.us-guide-item-link,.us-more-item-link{border:1px solid #b0b8bf;border-radius:.3125em}.us-news-item-link:hover,.us-guide-item-link:hover,.us-more-item-link:hover{border-color:#008fe9}.us-list a:after,.us-news-item-readmore:after,.us-guide-item-readmore:after,.us-related__item-link--more:after{position:relative;left:0;display:inline;margin:0 0 0 .5em;font-size:.5em;line-height:0;vertical-align:middle;content:"\25b6\fe0e";transition:left 200ms}.us-loader--centered{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.us-loader--centered .us-loader__inner{top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.us-news-item-link,.us-guide-item-link,.us-more-item-link,.us-news-item-image,.us-guide-item-image{-webkit-backface-visibility:hidden;backface-visibility:hidden}.us-form-input,.us-form-textarea,.us-btn{background-image:none}html{font-size:16px;line-height:1.618em}body{color:#2f353a}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.375em}h1,.us-more-item-title,.us-heading--1{font-size:2.25em;line-height:1.3em}h2,.us-heading--2{font-size:1.875em;line-height:1.3em}h3,.us-loader__text,.us-more-item-title.small,.us-heading--3{font-size:1.5em;line-height:1.25em}h4,.us-news-item-title,.us-guide-item-title,.us-heading--4{font-size:1.125em;line-height:1.25em}h5,.us-heading--5{font-size:1em;line-height:.95em}h6,.us-heading--6{font-size:1em;line-height:.95em}p,.trailered{margin:0 0 1.5em 0}.us-standfirst{font-size:18px;font-size:1.125rem;line-height:1.618;padding-top:8.144px;padding-top:.509rem;margin-bottom:17.744px;margin-bottom:1.109rem}ul li{margin-bottom:.5em}small{line-height:1.15em}blockquote{padding:15px;color:#1c1f4e;border-left:5px solid #b0b8bf}blockquote>p{padding:0;margin:0}.us-container,.us-hero-container,.us-tabs-nav-wrapper,.us-tabs-container,.us-overlay__body{position:relative;padding:0 15px;margin-right:auto;margin-left:auto}@media screen and (min-width: 768px){.us-container,.us-hero-container,.us-tabs-nav-wrapper,.us-tabs-container,.us-overlay__body{max-width:800px}}@media screen and (min-width: 992px){.us-container,.us-hero-container,.us-tabs-nav-wrapper,.us-tabs-container,.us-overlay__body{max-width:1000px}}@media screen and (min-width: 1200px){.us-container,.us-hero-container,.us-tabs-nav-wrapper,.us-tabs-container,.us-overlay__body{max-width:1200px}}*{box-sizing:border-box}@media screen and (min-width: 768px){.us-grid-row{margin-right:-15px;margin-left:-15px}}@media screen and (min-width: 768px){.us-col-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%;min-height:1px}.us-col-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%;min-height:1px}.us-col-3{float:left;padding-left:15px;padding-right:15px;width:25%;min-height:1px}.us-col-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%;min-height:1px}.us-col-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%;min-height:1px}.us-col-6{float:left;padding-left:15px;padding-right:15px;width:50%;min-height:1px}.us-col-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%;min-height:1px}.us-col-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%;min-height:1px}.us-col-9{float:left;padding-left:15px;padding-right:15px;width:75%;min-height:1px}.us-col-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%;min-height:1px}.us-col-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%;min-height:1px}.us-col-12{float:left;padding-left:15px;padding-right:15px;width:100%;min-height:1px}}.us-col-xsm-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%}.us-col-xsm-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%}.us-col-xsm-3{float:left;padding-left:15px;padding-right:15px;width:25%}.us-col-xsm-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%}.us-col-xsm-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%}.us-col-xsm-6{float:left;padding-left:15px;padding-right:15px;width:50%}.us-col-xsm-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%}.us-col-xsm-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%}.us-col-xsm-9{float:left;padding-left:15px;padding-right:15px;width:75%}.us-col-xsm-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%}.us-col-xsm-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%}.us-col-xsm-12{float:left;padding-left:15px;padding-right:15px;width:100%}@media screen and (min-width: 600px){.us-col-sm-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%}.us-col-sm-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%}.us-col-sm-3{float:left;padding-left:15px;padding-right:15px;width:25%}.us-col-sm-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%}.us-col-sm-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%}.us-col-sm-6{float:left;padding-left:15px;padding-right:15px;width:50%}.us-col-sm-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%}.us-col-sm-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%}.us-col-sm-9{float:left;padding-left:15px;padding-right:15px;width:75%}.us-col-sm-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%}.us-col-sm-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%}.us-col-sm-12{float:left;padding-left:15px;padding-right:15px;width:100%}}@media screen and (min-width: 768px){.us-col-md-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%}.us-col-md-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%}.us-col-md-3{float:left;padding-left:15px;padding-right:15px;width:25%}.us-col-md-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%}.us-col-md-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%}.us-col-md-6{float:left;padding-left:15px;padding-right:15px;width:50%}.us-col-md-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%}.us-col-md-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%}.us-col-md-9{float:left;padding-left:15px;padding-right:15px;width:75%}.us-col-md-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%}.us-col-md-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%}.us-col-md-12{float:left;padding-left:15px;padding-right:15px;width:100%}}@media screen and (min-width: 992px){.us-col-lg-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%}.us-col-lg-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%}.us-col-lg-3{float:left;padding-left:15px;padding-right:15px;width:25%}.us-col-lg-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%}.us-col-lg-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%}.us-col-lg-6{float:left;padding-left:15px;padding-right:15px;width:50%}.us-col-lg-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%}.us-col-lg-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%}.us-col-lg-9{float:left;padding-left:15px;padding-right:15px;width:75%}.us-col-lg-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%}.us-col-lg-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%}.us-col-lg-12{float:left;padding-left:15px;padding-right:15px;width:100%}}@media screen and (min-width: 1200px){.us-col-xlg-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%}.us-col-xlg-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%}.us-col-xlg-3{float:left;padding-left:15px;padding-right:15px;width:25%}.us-col-xlg-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%}.us-col-xlg-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%}.us-col-xlg-6{float:left;padding-left:15px;padding-right:15px;width:50%}.us-col-xlg-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%}.us-col-xlg-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%}.us-col-xlg-9{float:left;padding-left:15px;padding-right:15px;width:75%}.us-col-xlg-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%}.us-col-xlg-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%}.us-col-xlg-12{float:left;padding-left:15px;padding-right:15px;width:100%}}.us-form-input,.us-form-textarea,.us-form-select{border-color:#84909a;display:inline-block;color:#2f353a;vertical-align:middle;background:#fff;border-style:solid;border-width:1px;border-radius:.1875em;box-sizing:border-box;-ms-appearance:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.us-form-input:hover,.us-form-textarea:hover,.us-form-select:hover,.us-form-input:focus,.us-form-textarea:focus,.us-form-select:focus,.us-form-input:checked,.us-form-textarea:checked,.us-form-select:checked{border-color:#008fe9}.us-form-input:focus,.us-form-textarea:focus,.us-form-select:focus{box-shadow:inset 0 0 0 1px #008fe9}.us-form-input--error,.us-form-select--error{border-color:#d64226}.us-form-input--error:hover,.us-form-select--error:hover,.us-form-input--error:focus,.us-form-select--error:focus,.us-form-input--error:checked,.us-form-select--error:checked{border-color:#d64226}.us-form-input--error:focus,.us-form-select--error:focus{box-shadow:inset 0 0 0 1px #d64226}.us-form-input--success,.us-form-select--success{border-color:#2aaa5b}.us-form-input--success:hover,.us-form-select--success:hover,.us-form-input--success:focus,.us-form-select--success:focus,.us-form-input--success:checked,.us-form-select--success:checked{border-color:#2aaa5b}.us-form-input--success:focus,.us-form-select--success:focus{box-shadow:inset 0 0 0 1px #2aaa5b}.us-field-blocked>label,.us-field-blocked>.us-faux-label,.us-field--blocked>label,.us-field--blocked>.us-faux-label,.us-field--inline>label,.us-field--inline>.us-faux-label{display:block;margin-bottom:.25em}.us-field{margin-bottom:1em}.us-field>label,.us-field>.us-faux-label{margin-right:1em;font-size:1.125em;color:#2f353a}@media screen and (min-width: 768px){.us-field--inline>label,.us-field--inline>.us-faux-label{display:inline-block;min-width:6.66667em;vertical-align:middle}}.us-field-toggle label{padding:.35em .5em;font-weight:normal;line-height:1.5em;cursor:pointer}.us-form-input{height:37px;padding:0.35em 0.5em;font-size:1em;outline:0;box-shadow:none}.us-form-input::-webkit-input-placeholder{color:#84909a}.us-form-input::-moz-placeholder{color:#84909a;opacity:1}.us-form-input:-ms-input-placeholder{color:#84909a}.us-form-input:focus::-webkit-input-placeholder{color:#5e6a73}.us-form-input:focus::-moz-placeholder{color:#5e6a73;opacity:1}.us-form-input:focus:-ms-input-placeholder{color:#5e6a73}.us-form-input.large,.us-form-input--large{height:48px;padding:0.55em 0.5em;font-size:1.2em}.us-form-input--blocked{width:100%}.us-form-input:disabled,.us-form-input--disabled{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default}.us-form-input:disabled:hover,.us-form-input:disabled:focus,.us-form-input:disabled:checked,.us-form-input--disabled:hover,.us-form-input--disabled:focus,.us-form-input--disabled:checked{border-color:#ddd}.us-form-input:disabled:focus,.us-form-input--disabled:focus{box-shadow:inset 0 0 0 1px #ddd}.us-form-input:disabled::-webkit-input-placeholder,.us-form-input--disabled::-webkit-input-placeholder{color:#ddd}.us-form-input:disabled::-moz-placeholder,.us-form-input--disabled::-moz-placeholder{color:#ddd;opacity:1}.us-form-input:disabled:-ms-input-placeholder,.us-form-input--disabled:-ms-input-placeholder{color:#ddd}.us-form-input:disabled:focus,.us-form-input--disabled:focus{box-shadow:none}.us-form-input:disabled:focus::-webkit-input-placeholder,.us-form-input--disabled:focus::-webkit-input-placeholder{color:#ddd}.us-form-input:disabled:focus::-moz-placeholder,.us-form-input--disabled:focus::-moz-placeholder{color:#ddd;opacity:1}.us-form-input:disabled:focus:-ms-input-placeholder,.us-form-input--disabled:focus:-ms-input-placeholder{color:#ddd}.us-form-textarea{padding:0.35em 0.5em;font-size:1em;outline:0}.us-form-textarea:focus::-webkit-input-placeholder{color:#5e6a73}.us-form-textarea:focus::-moz-placeholder{color:#5e6a73;opacity:1}.us-form-textarea:focus:-ms-input-placeholder{color:#5e6a73}.us-form-textarea--blocked{width:100%}.us-form-textarea:disabled,.us-form-textarea--disabled{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default}.us-form-textarea:disabled:hover,.us-form-textarea:disabled:focus,.us-form-textarea:disabled:checked,.us-form-textarea--disabled:hover,.us-form-textarea--disabled:focus,.us-form-textarea--disabled:checked{border-color:#ddd}.us-form-textarea:disabled:focus,.us-form-textarea--disabled:focus{box-shadow:inset 0 0 0 1px #ddd}.us-form-textarea:disabled::-webkit-input-placeholder,.us-form-textarea--disabled::-webkit-input-placeholder{color:#ddd}.us-form-textarea:disabled::-moz-placeholder,.us-form-textarea--disabled::-moz-placeholder{color:#ddd;opacity:1}.us-form-textarea:disabled:-ms-input-placeholder,.us-form-textarea--disabled:-ms-input-placeholder{color:#ddd}.us-form-textarea:disabled:focus,.us-form-textarea--disabled:focus{box-shadow:none}.us-form-textarea:disabled:focus::-webkit-input-placeholder,.us-form-textarea--disabled:focus::-webkit-input-placeholder{color:#ddd}.us-form-textarea:disabled:focus::-moz-placeholder,.us-form-textarea--disabled:focus::-moz-placeholder{color:#ddd;opacity:1}.us-form-textarea:disabled:focus:-ms-input-placeholder,.us-form-textarea--disabled:focus:-ms-input-placeholder{color:#ddd}.us-input-group{position:relative;display:table;vertical-align:middle;border-collapse:separate}@media screen and (min-width: 768px){.us-input-group{display:inline-table}}.us-input-group .us-form-input{position:relative;display:table-cell;float:left;width:100%}.us-input-group--disabled .us-input-group__box{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default}.us-input-group--disabled .us-input-group__box:hover,.us-input-group--disabled .us-input-group__box:focus,.us-input-group--disabled .us-input-group__box:checked{border-color:#ddd}.us-input-group--disabled .us-input-group__box:focus{box-shadow:inset 0 0 0 1px #ddd}.us-input-group--disabled .us-input-group__box::-webkit-input-placeholder{color:#ddd}.us-input-group--disabled .us-input-group__box::-moz-placeholder{color:#ddd;opacity:1}.us-input-group--disabled .us-input-group__box:-ms-input-placeholder{color:#ddd}.us-input-group--disabled .us-input-group__box:focus{box-shadow:none}.us-input-group--disabled .us-input-group__box:focus::-webkit-input-placeholder{color:#ddd}.us-input-group--disabled .us-input-group__box:focus::-moz-placeholder{color:#ddd;opacity:1}.us-input-group--disabled .us-input-group__box:focus:-ms-input-placeholder{color:#ddd}.us-input-group--disabled .us-input-group__box [class^="us-icon--"],.us-input-group--disabled .us-input-group__box .us-icon{opacity:.35}.us-input-group--disabled .us-form-input{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default}.us-input-group--disabled .us-form-input:hover,.us-input-group--disabled .us-form-input:focus,.us-input-group--disabled .us-form-input:checked{border-color:#ddd}.us-input-group--disabled .us-form-input:focus{box-shadow:inset 0 0 0 1px #ddd}.us-input-group--disabled .us-form-input::-webkit-input-placeholder{color:#ddd}.us-input-group--disabled .us-form-input::-moz-placeholder{color:#ddd;opacity:1}.us-input-group--disabled .us-form-input:-ms-input-placeholder{color:#ddd}.us-input-group--disabled .us-form-input:focus{box-shadow:none}.us-input-group--disabled .us-form-input:focus::-webkit-input-placeholder{color:#ddd}.us-input-group--disabled .us-form-input:focus::-moz-placeholder{color:#ddd;opacity:1}.us-input-group--disabled .us-form-input:focus:-ms-input-placeholder{color:#ddd}.us-input-group--blocked{width:100%}.us-input-group--blocked .us-input-group__box{width:1%}.us-input-group__box{display:table-cell;width:1%;padding-right:.5em;padding-left:.5em;color:#84909a;text-align:center;white-space:nowrap;vertical-align:middle;background-color:#fff;border:1px solid #84909a;border-radius:3px}@media screen and (min-width: 768px){.us-input-group__box{width:auto}}.us-input-group__box [class^="us-icon--"],.us-input-group__box .us-icon{vertical-align:middle}.us-input-group__box:first-child{border-right:0}.us-input-group__box:last-child{border-left:0}.us-input-group__box:first-child,.us-input-group .us-form-input:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.us-input-group__box:last-child,.us-input-group .us-form-input:last-child{border-bottom-left-radius:0;border-top-left-radius:0}@media (-webkit-min-device-pixel-ratio: 0.1), (min-device-pixel-ratio: 0.1), (min-resolution: 0.1dppx){.us-form-input[type="checkbox"]:after{position:absolute;top:50%;left:50%;display:block;width:1em;height:1em;margin:-.5em 0 0 -.5em;pointer-events:none;background-image:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23008FE9%22%20d%3D%22M31.076%202.204c-9.734%205.965-16.798%2013.492-19.972%2017.27l-7.772-6.088L-.1%2016.152l13.43%2013.652c2.31-5.918%209.632-17.483%2018.57-25.7l-.824-1.9z%22%2F%3E%3C%2Fsvg%3E');background-position:0 75%;background-size:cover;content:"";opacity:0}.us-form-input[type="checkbox"]:checked:after{opacity:1}.us-form-input[type="checkbox"].us-form-input--disabled,.us-form-input[type="checkbox"]:disabled{background:#fafafa}.us-form-input[type="checkbox"].us-form-input--disabled:after,.us-form-input[type="checkbox"]:disabled:after{opacity:0}.us-form-input[type="checkbox"].us-form-input--disabled:checked:after{background-position:0 50%;opacity:.35}.us-form-input[type="radio"]:checked,.us-form-input[type="radio"]:checked:focus{background:#008fe9}.us-form-input[type="radio"]:focus{box-shadow:inset 0 0 0 1px #008fe9}.us-form-input[type="radio"]:checked{box-shadow:inset 0 0 0 .35em #fff}.us-form-input[type="radio"]:checked:focus{box-shadow:inset 0 0 0 1px #008fe9,inset 0 0 0 0.35em #fff}.us-form-input[type="radio"].us-form-input--disabled:checked{background:#ddd;box-shadow:inset 0 0 0 0.35em #fafafa}}.us-form-input[type="checkbox"],.us-form-input[type="radio"]{position:relative;width:1.6em;height:1.6em;padding:0;font-size:.8em;cursor:pointer}.us-field-toggle .us-form-input[type="checkbox"],.us-field-toggle .us-form-input[type="radio"]{margin-top:.1em;margin-right:.5em;vertical-align:top}.us-form-input[type="radio"]{border-radius:50%}.us-form-input[type="checkbox"]{border-radius:.3em}.us-toggle{display:block}@media screen and (min-width: 768px){.us-toggle{display:inline-block}}.us-toggle__label{position:relative;float:left;width:50%;vertical-align:middle;cursor:pointer}@media screen and (min-width: 768px){.us-toggle__label{width:auto}}.us-toggle__label .us-form-input{position:absolute;left:-999em}.us-toggle__btn{display:block;padding:5px 30px;color:#2f353a;text-align:center;background-color:#fff;border:1px solid #84909a}.us-toggle__label:hover .us-toggle__btn{border-color:#008fe9}.us-toggle__label:focus .us-toggle__btn,.us-toggle__label .us-form-input:focus+.us-toggle__btn{border-color:#008fe9;box-shadow:inset 0 0 0 1px #008fe9}.us-toggle__label .us-form-input.checked+.us-toggle__btn{background:#e4f8ff;border-color:#008fe9;text-shadow:1px 0 0 #2f353a}.us-toggle__label .us-form-input:checked+.us-toggle__btn{background:#e4f8ff;border-color:#008fe9;text-shadow:1px 0 0 #2f353a}.us-toggle__label:first-child .us-toggle__btn{border-bottom-left-radius:3px;border-top-left-radius:3px}.us-toggle__label:last-child .us-toggle__btn{border-top-right-radius:3px;border-bottom-right-radius:3px}.us-toggle__btn--disabled{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default}.us-toggle__btn--disabled:hover,.us-toggle__btn--disabled:focus,.us-toggle__btn--disabled:checked{border-color:#ddd}.us-toggle__btn--disabled:focus{box-shadow:inset 0 0 0 1px #ddd}.us-toggle__btn--disabled::-webkit-input-placeholder{color:#ddd}.us-toggle__btn--disabled::-moz-placeholder{color:#ddd;opacity:1}.us-toggle__btn--disabled:-ms-input-placeholder{color:#ddd}.us-toggle__btn--disabled:focus{box-shadow:none}.us-toggle__btn--disabled:focus::-webkit-input-placeholder{color:#ddd}.us-toggle__btn--disabled:focus::-moz-placeholder{color:#ddd;opacity:1}.us-toggle__btn--disabled:focus:-ms-input-placeholder{color:#ddd}.us-form-select-wrap{position:relative;display:inline-block}.us-form-select{background-image:url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIGJhc2VQcm9maWxlPSd0aW55JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHg9JzBweCcgeT0nMHB4JyB3aWR0aD0nNDBweCcgaGVpZ2h0PSc2cHgnIHZpZXdCb3g9JzAgMCA0MCA2Jz48cG9seWdvbiBmaWxsPScjODQ5MDlhJyBwb2ludHM9JzI1LjMsMCAyMC4zLDYgMTUuMywwICcvPjwvc3ZnPg==");height:37px;padding:0.35em 0.5em;font-size:1em;max-width:100%;padding-right:40px;cursor:pointer;background-position:100% 50%;background-repeat:no-repeat;outline:0}.us-form-select:hover,.us-form-select:focus{background-image:url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIGJhc2VQcm9maWxlPSd0aW55JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHg9JzBweCcgeT0nMHB4JyB3aWR0aD0nNDBweCcgaGVpZ2h0PSc2cHgnIHZpZXdCb3g9JzAgMCA0MCA2Jz48cG9seWdvbiBmaWxsPScjMDA4ZmU5JyBwb2ludHM9JzI1LjMsMCAyMC4zLDYgMTUuMywwICcvPjwvc3ZnPg==")}@-moz-document url-prefix(){.us-form-select{text-indent:.01px;text-overflow:"";-moz-appearance:none}}.us-form-select:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #2f353a}.us-form-select::-ms-expand{display:none}.ie9 .us-form-select{padding:0.35em 0.5em}.us-form-select-wrap--multiple,.us-form-select-wrap--multiple .us-form-select,.us-form-select--multiple,.us-form-select--multiple .us-form-select,.us-form-select[multiple],.us-form-select[multiple] .us-form-select,.us-form-select[size],.us-form-select[size] .us-form-select{height:auto;overflow:hidden;overflow-x:auto;overflow-y:auto;vertical-align:middle;cursor:default;background-image:none;-webkit-overflow-scrolling:touch}.us-form-select-wrap--multiple:hover,.us-form-select-wrap--multiple:focus,.us-form-select--multiple:hover,.us-form-select--multiple:focus,.us-form-select[multiple]:hover,.us-form-select[multiple]:focus,.us-form-select[size]:hover,.us-form-select[size]:focus{background-image:none}.us-form-select-wrap--multiple option,.us-form-select--multiple option,.us-form-select[multiple] option,.us-form-select[size] option{cursor:pointer}.us-form-select-wrap--multiple::-webkit-scrollbar,.us-form-select--multiple::-webkit-scrollbar,.us-form-select[multiple]::-webkit-scrollbar,.us-form-select[size]::-webkit-scrollbar{width:16px;height:16px}.us-form-select-wrap--multiple::-webkit-scrollbar:window-inactive,.us-form-select--multiple::-webkit-scrollbar:window-inactive,.us-form-select[multiple]::-webkit-scrollbar:window-inactive,.us-form-select[size]::-webkit-scrollbar:window-inactive{opacity:0}.us-form-select-wrap--multiple::-webkit-scrollbar-thumb,.us-form-select--multiple::-webkit-scrollbar-thumb,.us-form-select[multiple]::-webkit-scrollbar-thumb,.us-form-select[size]::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.2);border:4px solid transparent;border-radius:8px;background-clip:padding-box}.us-form-select-wrap--multiple::-webkit-scrollbar-corner,.us-form-select--multiple::-webkit-scrollbar-corner,.us-form-select[multiple]::-webkit-scrollbar-corner,.us-form-select[size]::-webkit-scrollbar-corner{background-color:transparent}.us-form-select-wrap--blocked,.us-form-select--blocked{width:100%}.us-form-select-wrap--disabled,.us-form-select-wrap--disabled .us-form-select,.us-form-select--disabled,.us-form-select--disabled .us-form-select,.us-form-select:disabled,.us-form-select:disabled .us-form-select{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default;background-image:url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIGJhc2VQcm9maWxlPSd0aW55JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHg9JzBweCcgeT0nMHB4JyB3aWR0aD0nNDBweCcgaGVpZ2h0PSc2cHgnIHZpZXdCb3g9JzAgMCA0MCA2Jz48cG9seWdvbiBmaWxsPScjZGRkJyBwb2ludHM9JzI1LjMsMCAyMC4zLDYgMTUuMywwICcvPjwvc3ZnPg==")}.us-form-select-wrap--disabled:hover,.us-form-select-wrap--disabled:focus,.us-form-select-wrap--disabled:checked,.us-form-select-wrap--disabled .us-form-select:hover,.us-form-select-wrap--disabled .us-form-select:focus,.us-form-select-wrap--disabled .us-form-select:checked,.us-form-select--disabled:hover,.us-form-select--disabled:focus,.us-form-select--disabled:checked,.us-form-select--disabled .us-form-select:hover,.us-form-select--disabled .us-form-select:focus,.us-form-select--disabled .us-form-select:checked,.us-form-select:disabled:hover,.us-form-select:disabled:focus,.us-form-select:disabled:checked,.us-form-select:disabled .us-form-select:hover,.us-form-select:disabled .us-form-select:focus,.us-form-select:disabled .us-form-select:checked{border-color:#ddd}.us-form-select-wrap--disabled:focus,.us-form-select-wrap--disabled .us-form-select:focus,.us-form-select--disabled:focus,.us-form-select--disabled .us-form-select:focus,.us-form-select:disabled:focus,.us-form-select:disabled .us-form-select:focus{box-shadow:inset 0 0 0 1px #ddd}.us-form-select-wrap--disabled::-webkit-input-placeholder,.us-form-select-wrap--disabled .us-form-select::-webkit-input-placeholder,.us-form-select--disabled::-webkit-input-placeholder,.us-form-select--disabled .us-form-select::-webkit-input-placeholder,.us-form-select:disabled::-webkit-input-placeholder,.us-form-select:disabled .us-form-select::-webkit-input-placeholder{color:#ddd}.us-form-select-wrap--disabled::-moz-placeholder,.us-form-select-wrap--disabled .us-form-select::-moz-placeholder,.us-form-select--disabled::-moz-placeholder,.us-form-select--disabled .us-form-select::-moz-placeholder,.us-form-select:disabled::-moz-placeholder,.us-form-select:disabled .us-form-select::-moz-placeholder{color:#ddd;opacity:1}.us-form-select-wrap--disabled:-ms-input-placeholder,.us-form-select-wrap--disabled .us-form-select:-ms-input-placeholder,.us-form-select--disabled:-ms-input-placeholder,.us-form-select--disabled .us-form-select:-ms-input-placeholder,.us-form-select:disabled:-ms-input-placeholder,.us-form-select:disabled .us-form-select:-ms-input-placeholder{color:#ddd}.us-form-select-wrap--disabled:focus,.us-form-select-wrap--disabled .us-form-select:focus,.us-form-select--disabled:focus,.us-form-select--disabled .us-form-select:focus,.us-form-select:disabled:focus,.us-form-select:disabled .us-form-select:focus{box-shadow:none}.us-form-select-wrap--disabled:focus::-webkit-input-placeholder,.us-form-select-wrap--disabled .us-form-select:focus::-webkit-input-placeholder,.us-form-select--disabled:focus::-webkit-input-placeholder,.us-form-select--disabled .us-form-select:focus::-webkit-input-placeholder,.us-form-select:disabled:focus::-webkit-input-placeholder,.us-form-select:disabled .us-form-select:focus::-webkit-input-placeholder{color:#ddd}.us-form-select-wrap--disabled:focus::-moz-placeholder,.us-form-select-wrap--disabled .us-form-select:focus::-moz-placeholder,.us-form-select--disabled:focus::-moz-placeholder,.us-form-select--disabled .us-form-select:focus::-moz-placeholder,.us-form-select:disabled:focus::-moz-placeholder,.us-form-select:disabled .us-form-select:focus::-moz-placeholder{color:#ddd;opacity:1}.us-form-select-wrap--disabled:focus:-ms-input-placeholder,.us-form-select-wrap--disabled .us-form-select:focus:-ms-input-placeholder,.us-form-select--disabled:focus:-ms-input-placeholder,.us-form-select--disabled .us-form-select:focus:-ms-input-placeholder,.us-form-select:disabled:focus:-ms-input-placeholder,.us-form-select:disabled .us-form-select:focus:-ms-input-placeholder{color:#ddd}.us-form-select-wrap--disabled:hover,.us-form-select-wrap--disabled:focus,.us-form-select-wrap--disabled .us-form-select:hover,.us-form-select-wrap--disabled .us-form-select:focus,.us-form-select--disabled:hover,.us-form-select--disabled:focus,.us-form-select--disabled .us-form-select:hover,.us-form-select--disabled .us-form-select:focus,.us-form-select:disabled:hover,.us-form-select:disabled:focus,.us-form-select:disabled .us-form-select:hover,.us-form-select:disabled .us-form-select:focus{background-image:url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIGJhc2VQcm9maWxlPSd0aW55JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHg9JzBweCcgeT0nMHB4JyB3aWR0aD0nNDBweCcgaGVpZ2h0PSc2cHgnIHZpZXdCb3g9JzAgMCA0MCA2Jz48cG9seWdvbiBmaWxsPScjZGRkJyBwb2ludHM9JzI1LjMsMCAyMC4zLDYgMTUuMywwICcvPjwvc3ZnPg==")}.us-validation__icon{position:absolute;color:#fff;text-align:center;border-radius:50%}.us-validation{position:relative;display:block;padding:0.25em 0 0.25em 31px}.us-validation .us-validation__message,.us-validation--error .us-validation__message{color:#d64226;border-color:#d64226}.us-validation .us-validation__message:before,.us-validation .us-validation__message:after,.us-validation--error .us-validation__message:before,.us-validation--error .us-validation__message:after{border-color:#d64226}.us-validation .us-validation__message:after,.us-validation--error .us-validation__message:after{border-right-color:#fff}.us-validation .us-validation__icon,.us-validation--error .us-validation__icon{background-color:#d64226}.us-validation .us-validation__icon:before,.us-validation--error .us-validation__icon:before{content:"!"}.us-validation--success .us-validation__message{color:#2aaa5b;border-color:#2aaa5b}.us-validation--success .us-validation__message:before,.us-validation--success .us-validation__message:after{border-color:#2aaa5b}.us-validation--success .us-validation__message:after{border-right-color:#fff}.us-validation--success .us-validation__icon{background-color:#2aaa5b}.us-validation--success .us-validation__icon:before{content:"✓"}.us-validation__message{position:relative;display:block;min-height:2.4em;padding:.35em .5em;margin:0;line-height:1.5}.us-validation__icon{top:10px;left:0;width:26px;height:26px;font-size:18px;line-height:26px}.us-table{width:100%;color:#63686b}.us-table{border-collapse:separate;border-spacing:0}@media screen and (max-width: 599px){.us-table thead{display:none}.us-table tbody,.us-table tr,.us-table td{display:block}}.us-table-head{padding:0 1em .5em 0}.us-table-head{color:#1c1f4e;text-align:left;vertical-align:middle;border-bottom:1px solid #cbcdce}@media screen and (max-width: 599px){.us-table-body-row{position:relative}.us-table-body-row:before,.us-table-body-row:after{display:table;content:" "}.us-table-body-row:after{clear:both}}.us-table-cell{padding-top:15px;padding-bottom:15px}.us-table-cell{text-align:left;vertical-align:top;border-bottom:1px solid #cbcdce}@media screen and (max-width: 599px){.us-table-cell{padding:0;border:0}}svg:not(:root){overflow:visible}svg.us-icon--before,svg.us-icon--after{display:inline-block;vertical-align:middle}svg.us-icon--before{margin-right:7.5px}svg.us-icon--after{margin-left:7.5px}.us-icon--centered{position:relative;top:50%;margin:0 auto;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%)}.us-icon--notext{display:inline-block;text-indent:-999em}svg.us-icon--white{fill:#fff}svg.us-icon--typegrey{fill:#2f353a}svg.us-icon--inputgrey{fill:#84909a}svg.us-icon--typecyan{fill:#008fe9}svg.us-icon--custom{fill:#1c1f4e}svg.us-icon--uswitch{fill:#002396}svg.us-icon--cross{fill:#d64226}svg.us-icon--tick{fill:#2aaa5b}svg.us-icon--facebook{fill:#3c5a99}svg.us-icon--google{fill:#dc4e41}svg.us-icon--renewable{fill:#2aaa5b}svg.us-icon--star-half{fill:#ffd32f}svg.us-icon--starline-half{fill:#ffd32f}svg.us-icon--star{fill:#ffd32f}svg.us-icon--starline{fill:#ffd32f}svg.us-icon--twitter{fill:#00aced}svg.us-icon--hover--white:hover{fill:#fff}svg.us-icon--hover--typegrey:hover{fill:#2f353a}svg.us-icon--hover--inputgrey:hover{fill:#84909a}svg.us-icon--hover--typecyan:hover{fill:#008fe9}svg.us-icon--hover--custom:hover{fill:#1c1f4e}.us-icon--small{width:16px;height:16px}.us-icon--medium{width:32px;height:32px}.us-icon--large{width:64px;height:64px}@media screen and (max-width: 767px){.us-icon--small--sm-tablet{width:16px;height:16px}.us-icon--medium--sm-tablet{width:32px;height:32px}.us-icon--large--sm-tablet{width:64px;height:64px}}@media screen and (max-width: 599px){.us-icon--small--mobile{width:16px;height:16px}.us-icon--medium--mobile{width:32px;height:32px}.us-icon--large--mobile{width:64px;height:64px}}.us-link,.us-list a{border-bottom:1px solid}a,.us-link{color:#002396;text-decoration:none;transition:color 333ms, border-color 333ms}a:visited,.us-link:visited{color:#002396}a:focus,.us-link:focus{color:#00114a}a:hover,.us-link:hover{color:#008fe9}a:active,.us-link:active{color:#002396}.us-link--light{color:#fff}.us-link--light:visited{color:#fff}.us-link--light:focus{color:#fff}.us-link--light:hover{color:#fff}.us-link--light:active{color:#e9ebed}.us-list{list-style:none}.us-list a{display:block;padding-top:.5em;padding-bottom:.5em}.us-list a:after{font-size:.8em}.us-list a:hover:after{left:.5em}.us-hero .us-list{margin-top:1em}.us-hero .us-list a{font-size:1.125em;color:#1c1f4e}.us-numbered-list,.us-ticked-list{padding:0;margin:1.5em 0;list-style:none}.us-numbered-list li,.us-ticked-list li{position:relative;padding-left:2em;margin:.5em 0}.us-numbered-list li:before,.us-ticked-list li:before{position:absolute;left:0}.us-numbered-list{counter-reset:number-counter}.us-numbered-list li{counter-increment:number-counter}.us-numbered-list li:before{top:0;width:1.5em;height:1.5em;padding-top:.25em;line-height:1;color:#008fe9;text-align:center;border-radius:2em;content:counter(number-counter);box-sizing:border-box}.us-hero .us-numbered-list li:before,.us-numbered-list.us-custom-list-alt li:before{color:#1c1f4e;background:#fff;background:rgba(255,255,255,0.7)}.us-ticked-list li{padding-left:0}.us-ticked-list li:before{top:50%;margin-top:-8px}.us-btn{display:inline-block;padding:.63em 1.25em;font-size:1em;line-height:1em;color:#2f353a;text-align:center;text-decoration:none;white-space:nowrap;vertical-align:middle;cursor:pointer;background-color:#e9ebed;border:1px solid #babcbe;border-radius:3px;outline:0;transition:none}.us-btn:visited{color:#2f353a}.us-btn:hover,.us-btn:focus{color:#008fe9;background-color:#e6f4fd;border-color:#008fe9}.us-btn:active{color:#fff;background-color:#008fe9}.us-btn--large{font-size:1.2em}.us-btn--small{padding:.4em .65em}.us-btn--blocked{display:block;width:100%;padding-right:0;padding-left:0}.us-btn--link{padding:0;line-height:1.618;color:#002396;background-color:transparent;border:0}.us-btn--link:hover{color:#1c1f4e;text-decoration:underline;background-color:transparent}.us-btn--disabled,.us-btn:disabled{pointer-events:none;opacity:.5}.us-btn--primary,.us-btn--primary:visited{color:#fff;background-color:#d64226;border-color:#ab351e}.us-btn--primary:hover,.us-btn--primary:focus{color:#fff;background-color:#ab351e;border-color:#ab351e}.us-btn--primary:active{color:#fff;background-color:#6b2113;border-color:#6b2113}.us-btn--secondary,.us-btn--secondary:visited{color:#fff;background-color:#008fe9;border-color:#0072ba}.us-btn--secondary:hover,.us-btn--secondary:focus{color:#fff;background-color:#0072ba;border-color:#0072ba}.us-btn--secondary:active{color:#fff;background-color:#004875;border-color:#004875}.us-btn--action,.us-btn--action:visited{color:#fff;background-color:#2aaa5b;border-color:#228849}.us-btn--action:hover,.us-btn--action:focus{color:#fff;background-color:#228849;border-color:#228849}.us-btn--action:active{color:#fff;background-color:#15552e;border-color:#15552e}.us-btn--hero,.us-btn--hero:visited{color:#1c1f4e;background-color:transparent;border-color:#1c1f4e}.us-btn--hero:hover,.us-btn--hero:focus{color:#1c1f4e;border-color:#1c1f4e;background-color:#e8e9ed}.us-btn--hero:active{color:#fff;background-color:#1c1f4e;border-color:#1c1f4e}.us-btn--reversed,.us-btn--reversed:visited{color:#fff;background-color:transparent;border-color:#fff}.us-btn--reversed:hover,.us-btn--reversed:focus{color:#fff;border-color:#fff;background-color:rgba(255,255,255,0.2)}.us-btn--reversed:active{color:#2f353a;background-color:#fff;border-color:#fff}.us-hero{background-color:#99e2ff}.us-hero-container{padding-top:2.5em;padding-bottom:2.5em}.us-hero-title{margin-top:0}.us-hero-title,.us-hero-description{color:#1c1f4e}@media screen and (min-width: 768px){.us-content-group{padding-top:50px;padding-bottom:50px;border-bottom:1px solid #e9ebed}}@media screen and (max-width: 991px){.us-content-group.mobile-bordered{padding-top:15px;padding-bottom:15px;border-bottom:1px solid #e9ebed}}@-webkit-keyframes tab-show{0%{opacity:0}100%{opacity:1}}@keyframes tab-show{0%{opacity:0}100%{opacity:1}}.us-tabs-nav{display:none;background-color:#f4f5f6}@media screen and (min-width: 768px){.js .us-tabs-nav{display:block}}.us-tabs-nav-menu{display:table;display:-webkit-flex;display:-webkit-box;display:-ms-flexbox;display:flex;width:100%;overflow:hidden;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-flow:row;-ms-flex-flow:row;flex-flow:row}.us-tabs-nav-link{display:table-cell;width:16.66667%;padding:14px 1em 12px;text-align:center;vertical-align:middle;border-right:1px solid #fff;border-radius:0;transition:none}@media screen and (min-width: 768px){.us-tabs-nav-link{font-size:.875em;line-height:1.25em}}@media screen and (min-width: 992px){.us-tabs-nav-link{font-size:1em}}@media screen and (min-width: 1200px){.us-tabs-nav-link{font-size:1.125em}}.us-tabs-nav-link:last-child{border-right:0}.us-tabs-nav-link:hover,.us-tabs-nav-link.active{color:#008fe9}.us-tabs-nav-link:hover:before,.us-tabs-nav-link.active:before{background-color:#008fe9}.us-tabs-nav-link.active{cursor:default;background-color:#fff}.us-tabs-nav-link.active:hover{background-color:#fff}.us-tabs-nav-mainlink{color:#84909a;position:relative;background-color:#f4f5f6;transition:color 300ms, background-color 300ms}.us-tabs-nav-mainlink:visited{color:#84909a}.us-tabs-nav-mainlink:hover{color:#008fe9}.us-tabs-nav-mainlink:active{color:#008fe9}.us-tabs-nav-mainlink:before{position:absolute;top:0;right:0;left:0;height:5px;background-color:#f4f5f6;content:"";transition:background-color 300ms}.us-tabs-nav-mainlink:hover{background-color:rgba(255,255,255,0.35)}.us-tabs-nav-mainlink:hover .us-tabs-nav-chevron,.us-tabs-nav-mainlink:hover .us-tabs-nav-chevron-wrapper .us-icon,.us-tab.active .us-tabs-nav-mainlink .us-tabs-nav-chevron,.us-tab.active .us-tabs-nav-mainlink .us-tabs-nav-chevron-wrapper .us-icon{-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);fill:#008fe9}.us-tabs-nav-mainlink:hover:before{background-color:#008fe9}.us-tab.active .us-tabs-nav-mainlink:before{background-color:#008fe9}.us-tabs-nav-link{display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-align:center;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-ms-flex-align:center;-ms-flex-pack:center;-webkit-align-items:center;align-items:center}@media screen and (max-width: 991px){.us-tabs-container{padding:0}}.us-tab-title{font-size:1.125em;line-height:1.25em;position:relative;margin:0;font-weight:normal;border-bottom:1px solid #fff}@media screen and (min-width: 768px){.js .us-tab-title{display:none}}.us-tab-title .us-tabs-nav-mainlink{display:block;padding:0.75em 15px 0.5em}.us-tab.active .us-tab-title .us-tabs-nav-mainlink{color:#008fe9;background-color:#fff}.us-tab-title .us-tabs-nav-chevron,.us-tab-title .us-tabs-nav-chevron-wrapper .us-icon{position:absolute;right:15px;-webkit-transform:rotate(90deg);-ms-transform:rotate(90deg);transform:rotate(90deg);transition:-webkit-transform .2s ease;transition:transform .2s ease;transition:transform .2s ease, -webkit-transform .2s ease}.us-tab-content{display:block;overflow:hidden;opacity:1}@media screen and (max-width: 991px){.us-tab-content{padding-right:15px;padding-left:15px}}.js .us-tab-content{max-height:0}@media screen and (min-width: 768px){.js .us-tab-content{display:none;max-height:none}}.us-tab.active .us-tab-content{max-height:9999px;padding-top:1em}@media screen and (min-width: 768px){.us-tab.active .us-tab-content{display:block;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-name:tab-show;animation-name:tab-show;-webkit-animation-fill-mode:forwards;animation-fill-mode:forwards}}@-webkit-keyframes loader-intro{from{opacity:0}to{opacity:1}}@keyframes loader-intro{from{opacity:0}to{opacity:1}}@-webkit-keyframes spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{from{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.us-loader,.us-loader__overlay{position:absolute;top:0;left:0;width:100%;height:100%}.us-loader--loading .us-loader__spinner{position:relative;z-index:2;display:inline-block;margin-top:1em;margin-bottom:1em;background-repeat:no-repeat}.us-loader--loading .us-loader__spinner{background:transparent url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22%23174695%22%3E%3Cpath%20opacity%3D%22.25%22%20d%3D%22M16%200a16%2016%200%200%200%200%2032%2016%2016%200%200%200%200-32m0%204a12%2012%200%200%201%200%2024%2012%2012%200%200%201%200-24%22%2F%3E%3Cpath%20d%3D%22M16%200a16%2016%200%200%201%2016%2016h-4A12%2012%200%200%200%2016%204z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;-webkit-animation:spin 500ms infinite linear;animation:spin 500ms infinite linear}.us-loader{z-index:1;display:none;text-align:center}.us-loader__container{position:relative}.us-loader--loading{display:block;-webkit-animation:loader-intro 500ms forwards;animation:loader-intro 500ms forwards}.us-loader--centered{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.us-loader__inner{position:relative;z-index:2}.us-loader--loading .us-loader__spinner{width:60px;height:60px;background-size:60px}.us-loader--centered .us-loader__spinner{margin-top:0}.us-loader__text{color:#1c1f4e}.us-loader__overlay{z-index:1;background-color:#fff;opacity:.8}.us-crumbs{margin-top:1em;margin-bottom:1em;list-style:none}.us-crumbs__item{margin-bottom:0;color:#2f353a}.us-crumbs__item:before{display:inline-block;margin:0 .35em;font-size:1.4em;font-weight:normal;content:"\203A"}.us-crumbs__item:first-child:before{width:0;margin:0;color:transparent}.us-crumbs__item:last-child{font-weight:bold}.us-crumbs__link{color:#2f353a}.us-crumbs__link:visited{color:#2f353a}.us-crumbs__link:hover{color:#2f353a;text-decoration:underline}.us-cta{padding:15px;margin-bottom:1.5em;background-color:#eaebeb;border-bottom:10px solid #1c1f4e}@media screen and (min-width: 768px){.us-cta{padding:20px;border-bottom:0;border-left:10px solid #1c1f4e}}.us-cta label{display:block}@media screen and (min-width: 992px){.us-cta label{display:inline-block}}.us-cta__title.us-cta__title{margin-top:0;font-size:18px;font-size:1.125rem}@media screen and (min-width: 768px){.us-cta__title.us-cta__title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:1.125em;line-height:1.25em}}@media screen and (min-width: 992px){.us-cta__title.us-cta__title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:1.5em;line-height:1.25em}}.us-cta--side{padding:15px;border-bottom:10px solid #1c1f4e;border-left:0}@media screen and (min-width: 992px){.us-cta--side{padding:20px}}.us-cta--side .us-form-input{width:100%}.us-overlay--open{overflow:hidden}.us-overlay-parent{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1003;visibility:hidden}.us-overlay-parent--visible{overflow:scroll;visibility:visible}.us-overlay{position:absolute;z-index:1003;width:100%;min-height:100%;background:#fff;-webkit-transform:translate3d(-100%, 0, 0);transform:translate3d(-100%, 0, 0);transition:opacity .3s linear,box-shadow .3s linear,-webkit-transform .3s ease-in;transition:transform .3s ease-in,opacity .3s linear,box-shadow .3s linear;transition:transform .3s ease-in,opacity .3s linear,box-shadow .3s linear,-webkit-transform .3s ease-in;-webkit-overflow-scrolling:auto}.us-overlay-parent--active .us-overlay{opacity:1;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);box-shadow:1px 0 18px 0 rgba(0,0,0,0.3);transition-timing-function:ease-out}@media screen and (min-width: 600px){.us-overlay{width:340px}}.us-overlay--above{z-index:1004}.us-overlay-parent--active .us-overlay--above{box-shadow:1px 0 30px 5px rgba(0,0,0,0.3)}@media screen and (min-width: 992px){.us-overlay--modal{position:relative;width:60%;max-width:700px;min-height:0;margin:5% auto;opacity:0;-webkit-transform:translate3d(0, -30px, 0);transform:translate3d(0, -30px, 0)}.us-overlay-parent--active .us-overlay--modal{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);box-shadow:0 1px 18px 0 rgba(0,0,0,0.3)}.us-overlay-parent--active .us-overlay--modal.us-overlay--above{box-shadow:0 1px 30px 5px rgba(0,0,0,0.3)}}.us-overlay--right{right:0;-webkit-transform:translate3d(100%, 0, 0);transform:translate3d(100%, 0, 0)}.us-overlay-parent--active .us-overlay--right{-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0);box-shadow:-1px 0 18px 0 rgba(0,0,0,0.3)}.us-overlay-parent--active .us-overlay--right.us-overlay--above{box-shadow:-1px 0 30px 5px rgba(0,0,0,0.3)}.us-overlay__container{position:relative}.us-overlay__body{padding:1em;color:#2f353a}.us-overlay__header{position:relative;width:100%;min-height:55px;padding:1em;color:#fff;background:#1c1f4e}.us-overlay__title{width:calc(100% - 64px)}.us-overlay__close{position:absolute;top:.75em;right:1em}@media screen and (min-width: 768px){.us-tooltip--left .us-tooltip__note,.us-tooltip--right .us-tooltip__note{top:-1em}.us-tooltip--left .us-tooltip__note .us-tooltip__arrow,.us-tooltip--right .us-tooltip__note .us-tooltip__arrow{top:1em}.us-tooltip--left .us-tooltip__note .us-tooltip__arrow:after,.us-tooltip--right .us-tooltip__note .us-tooltip__arrow:after{top:-10px}}@media screen and (min-width: 768px){.us-tooltip--top .us-tooltip__note,.us-tooltip--bottom .us-tooltip__note{left:50%;margin-left:-150px}.us-tooltip--top .us-tooltip__note .us-tooltip__arrow,.us-tooltip--bottom .us-tooltip__note .us-tooltip__arrow,.us-tooltip--top .us-tooltip__note .us-tooltip__arrow:after,.us-tooltip--bottom .us-tooltip__note .us-tooltip__arrow:after{left:50%;margin-left:-10px}}@media screen and (max-width: 991px){.us-tooltip.us-tooltip--active .us-tooltip__note{display:block;pointer-events:all;opacity:1;visibility:visible;transition-delay:0ms}.us-tooltip.us-tooltip--active .us-tooltip__icon{background:#008fe9}}@media screen and (min-width: 768px){.us-tooltip:hover .us-tooltip__note{display:block;pointer-events:all;opacity:1;visibility:visible;transition-delay:0ms}.us-tooltip:hover .us-tooltip__icon{background:#008fe9}}.us-tooltip__wrapper{position:static;top:0;right:0}@media screen and (min-width: 768px){.us-tooltip__wrapper{position:absolute}}.us-tooltip__icon{position:absolute;top:0;right:0;width:22px;height:22px;font-weight:700;line-height:22px;color:#fff;text-align:center;cursor:pointer;background:#b0b8bf;border-radius:50%}@media screen and (min-width: 768px){.us-tooltip__icon{position:static}}.us-tooltip__icon:before{content:"?"}.us-tooltip__note{position:static;display:none;padding:.75em 1em;margin-top:1em;margin-bottom:1em;color:#2f353a;background:#fff;border:1px solid #008fe9;border-radius:4px}@media screen and (min-width: 768px){.us-tooltip__note{position:absolute;display:block;width:300px;margin-top:0;margin-bottom:0;pointer-events:none;opacity:0;visibility:hidden;transition:visibility 0ms ease 300ms, opacity 300ms ease}}.us-tooltip__arrow{position:absolute}.us-tooltip__arrow:after{position:absolute;content:""}.us-tooltip--small .us-tooltip__icon{width:16px;height:16px;font-size:.875em;line-height:16px}.us-tooltip--top .us-tooltip__note{bottom:32px}@media screen and (min-width: 768px){.us-tooltip--top .us-tooltip__note .us-tooltip__arrow{width:0;height:0;border-top:10px solid #008fe9;border-right:10px solid transparent;border-left:10px solid transparent;bottom:-10px}.us-tooltip--top .us-tooltip__note .us-tooltip__arrow:after{width:0;height:0;border-top:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent;bottom:1px}}.us-tooltip--bottom .us-tooltip__note{top:32px}@media screen and (min-width: 768px){.us-tooltip--bottom .us-tooltip__note .us-tooltip__arrow{width:0;height:0;border-right:10px solid transparent;border-bottom:10px solid #008fe9;border-left:10px solid transparent;top:-10px}.us-tooltip--bottom .us-tooltip__note .us-tooltip__arrow:after{width:0;height:0;border-right:10px solid transparent;border-bottom:10px solid #fff;border-left:10px solid transparent;top:1px}}.us-tooltip--left .us-tooltip__note{left:-315px}@media screen and (min-width: 768px){.us-tooltip--left .us-tooltip__note .us-tooltip__arrow{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #008fe9;right:-10px}.us-tooltip--left .us-tooltip__note .us-tooltip__arrow:after{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #fff;right:1px}}.us-tooltip--right .us-tooltip__note{right:-315px}@media screen and (min-width: 768px){.us-tooltip--right .us-tooltip__note .us-tooltip__arrow{width:0;height:0;border-top:10px solid transparent;border-right:10px solid #008fe9;border-bottom:10px solid transparent;left:-10px}.us-tooltip--right .us-tooltip__note .us-tooltip__arrow:after{width:0;height:0;border-top:10px solid transparent;border-right:10px solid #fff;border-bottom:10px solid transparent;left:1px}}.us-usp{display:inline-block;padding:0 10px;font-weight:bold;line-height:1.618;color:#fff;text-align:center;background-color:#008fe9}.us-usp--cyan{background-color:#99e2ff;color:#1c1f4e}.us-usp--typecyan{background-color:#008fe9}.us-usp--blue{background-color:#002396}.us-usp--navy{background-color:#1c1f4e}.us-usp--red{background-color:#d64226}.us-usp--green{background-color:#2aaa5b}.us-usp--purple{background-color:#9c55b8}.us-usp--orange{background-color:#f27930}.us-usp--yellow{background-color:#ffd32f;color:#2f353a}.us-usp--typegrey{background-color:#2f353a}.us-usp--annotated{font-weight:normal;color:#2f353a;text-align:left;background-color:#f4f5f6}.us-usp--annotated .us-usp{margin-right:10px;margin-left:-10px}.us-progress{position:relative;z-index:4;background-color:#1c1f4e}.us-progress__nav{list-style:none;counter-reset:number-counter}.us-progress__item{position:relative;float:left;line-height:1.5em;counter-increment:number-counter}@media screen and (min-width: 768px){.us-progress__item{margin-right:30px}}.us-progress__link{position:relative;display:block;padding-top:.5em;padding-bottom:.5em}@media screen and (min-width: 768px){.us-progress__link{padding-top:1em;padding-bottom:1em}}.us-progress__link:before{position:relative;display:inline-block;width:1.5em;height:1.5em;margin-right:10px;font-weight:700;color:#1c1f4e;text-align:center;border-radius:50%;content:counter(number-counter);transition:background-color .3s}.us-progress__link--next{color:#8e8fa7}.us-progress__link--next:before{background-color:#8e8fa7}.us-progress__link--current{color:#fff}.us-progress__link--current:before{background-color:#fff}.us-progress__link--complete{color:#99e2ff}.us-progress__link--complete:visited{color:#99e2ff}.us-progress__link--complete:focus{color:#fff}.us-progress__link--complete:hover{color:#fff}.us-progress__link--complete:active{color:#99e2ff}.us-progress__link--complete:before{background-color:#99e2ff}.us-progress__link--complete:hover:before,.us-progress__link--complete:active:before{background-color:#fff}.us-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1002;background:rgba(0,35,150,0.5);opacity:0;visibility:hidden}.us-backdrop--animated{transition:opacity 0.5s}.us-backdrop--visible{visibility:visible}.us-backdrop--active{opacity:1}.us-article{padding-top:1em;padding-bottom:1em;border-bottom:1px solid #e9ebed}@media screen and (min-width: 768px){.us-article{padding-top:2em;padding-bottom:2em}}.us-article__link{display:block;-webkit-tap-highlight-color:transparent}.us-article__link:hover .us-article__title{text-decoration:underline}.us-article__link,.us-article__link:hover,.us-article__link:visited{color:inherit}.us-article__title{font-size:1.125em;line-height:1.25em}@media screen and (min-width: 768px){.us-article__title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:1.5em;line-height:1.25em}}.us-article__meta,.us-article__description{color:#65717b}.us-article__meta{font-size:.875em}.us-article__description{margin-bottom:1em}@media screen and (min-width: 768px){.us-article__description{font-size:1.125em}}.us-article__image{border:1px solid #e9ebed}.us-news-item,.us-guide-item,.us-more-item{margin-bottom:1em}.us-news-item:hover .us-news-item-image,.us-guide-item:hover .us-news-item-image,.us-more-item:hover .us-news-item-image,.us-news-item:hover .us-guide-item-image,.us-guide-item:hover .us-guide-item-image,.us-more-item:hover .us-guide-item-image{opacity:.8}.us-news-item:hover .us-news-item-readmore:after,.us-guide-item:hover .us-news-item-readmore:after,.us-more-item:hover .us-news-item-readmore:after,.us-news-item:hover .us-guide-item-readmore:after,.us-guide-item:hover .us-guide-item-readmore:after,.us-more-item:hover .us-guide-item-readmore:after{left:.5em}@media screen and (max-width: 599px){.us-article-group .us-news-item,.us-article-group .us-guide-item,.us-article-group .us-more-item{padding:0;margin-bottom:0}}.us-news-item-link,.us-guide-item-link,.us-more-item-link{position:relative;display:block;overflow:hidden;text-decoration:none;background-color:#fff;transition:border-color 333ms, background-color 333ms}@media screen and (min-width: 600px){.us-news-item-link,.us-guide-item-link,.us-more-item-link{padding-bottom:2.1875em}}@media screen and (max-width: 599px){.us-article-group .us-news-item-link,.us-article-group .us-guide-item-link,.us-article-group .us-more-item-link{border-top-width:0;border-radius:0}}.us-news-item-title,.us-guide-item-title{padding:9px;margin:0;color:#1c1f4e}.us-news-item-snippet,.us-guide-item-description{font-size:14px;font-size:.875rem;line-height:1.618;padding-top:8.144px;padding-top:.509rem;margin-bottom:17.744px;margin-bottom:1.109rem;padding:0 9px;color:#1c1f4e}.us-news-item-image-container,.us-guide-item-image-container{display:none}@media screen and (min-width: 600px){.us-news-item-image-container,.us-guide-item-image-container{display:block}}.us-news-item-image,.us-guide-item-image{width:100%;height:auto;border-radius:.3125em .3125em 0 0;transition:opacity 333ms}.background.us-news-item-image,.background.us-guide-item-image{height:128px;background-position:center center;background-repeat:no-repeat;background-size:cover}.us-news-item-readmorelink,.us-guide-item-readmorelink{color:#008fe9;border-bottom:1px solid #008fe9}.us-news-item-readmorelink:visited,.us-guide-item-readmorelink:visited{color:#008fe9}.us-news-item-readmorelink:hover,.us-guide-item-readmorelink:hover{color:#008fe9}.us-news-item-readmorelink:active,.us-guide-item-readmorelink:active{color:#008fe9}.us-news-item-readmore,.us-guide-item-readmore{position:absolute;bottom:0;display:none;padding:9px;color:#008fe9;white-space:nowrap}@media screen and (min-width: 600px){.us-news-item-readmore,.us-guide-item-readmore{display:block}}@media screen and (max-width: 599px){.us-article-group{margin-bottom:1em;overflow:hidden}.us-article-group .us-news-item:first-child .us-news-item-link,.us-article-group .us-guide-item:first-child .us-news-item-link,.us-article-group .us-more-item:first-child .us-news-item-link,.us-article-group .us-news-item:first-child .us-guide-item-link,.us-article-group .us-guide-item:first-child .us-guide-item-link,.us-article-group .us-more-item:first-child .us-guide-item-link,.us-article-group .us-news-item:first-child .us-more-item-link,.us-article-group .us-guide-item:first-child .us-more-item-link,.us-article-group .us-more-item:first-child .us-more-item-link{border-top-width:1px;border-bottom-width:1px;border-radius:.3125em .3125em 0 0}.us-article-group .us-news-item:last-child .us-news-item-link,.us-article-group .us-guide-item:last-child .us-news-item-link,.us-article-group .us-more-item:last-child .us-news-item-link,.us-article-group .us-news-item:last-child .us-guide-item-link,.us-article-group .us-guide-item:last-child .us-guide-item-link,.us-article-group .us-more-item:last-child .us-guide-item-link,.us-article-group .us-news-item:last-child .us-more-item-link,.us-article-group .us-guide-item:last-child .us-more-item-link,.us-article-group .us-more-item:last-child .us-more-item-link{border-bottom-width:1px;border-radius:0 0 .3125em .3125em}}.us-news-meta{padding-right:9px;padding-left:9px;overflow:hidden}.us-news-meta .category,.us-news-meta .date{padding-top:.25em;padding-bottom:.25em;font-size:.8125em;font-weight:bold;color:#1c1f4e}@media screen and (min-width: 1200px){.us-news-meta .category,.us-news-meta .date{font-size:.875em}}.us-news-meta .date{display:block;float:right}.us-news-meta .category{display:block;float:left}.us-more-item-title{display:block;padding:9px;color:#008fe9}.us-related{margin-bottom:30px}.us-related__item{margin-bottom:0}.us-related__item-link{color:#65717b;display:block;padding-top:.5em;padding-bottom:.5em;border-bottom:1px solid #b0b8bf;transition:color .3s, border-color .3s}.us-related__item-link:visited{color:#65717b}.us-related__item-link:hover{color:#008fe9}.us-related__item-link:active{color:#65717b}.us-related__item-link--more{color:#2f353a;padding-right:.5em;text-align:right;background-color:#e4f8ff}.us-related__item-link--more:visited{color:#2f353a}.us-related__item-link--more:hover{color:#008fe9}.us-related__item-link--more:active{color:#2f353a}.us-related__item-title{vertical-align:middle}@media screen and (min-width: 992px){.us-related__item-title{display:inline-block;width:calc(100% - 90px);margin-left:7.5px}}@media screen and (min-width: 992px){.us-related__item-image{display:inline-block;width:70px;height:70px;vertical-align:middle;background-position:center center;background-repeat:no-repeat;background-size:100%}}.us-list--reset{list-style:none}.us-blocked{display:block}.us-trailered{margin-bottom:1em}.us-trailered--large{margin-bottom:1.5em}.us-trailered--small{margin-bottom:.5em}.us-align--left{text-align:left}.us-align--right{text-align:right}.us-align--center{text-align:center}.us-color--blue{color:#002396}.us-background-color--blue{background:#002396}.us-color--navy{color:#1c1f4e}.us-background-color--navy{background:#1c1f4e}.us-color--typecyan{color:#008fe9}.us-background-color--typecyan{background:#008fe9}.us-color--cyan{color:#99e2ff}.us-background-color--cyan{background:#99e2ff}.us-color--red{color:#d64226}.us-background-color--red{background:#d64226}.us-color--green{color:#2aaa5b}.us-background-color--green{background:#2aaa5b}.us-color--typegrey{color:#2f353a}.us-background-color--typegrey{background:#2f353a}.us-color--typegrey-2{color:#65717b}.us-background-color--typegrey-2{background:#65717b}.us-color--inputgrey{color:#84909a}.us-background-color--inputgrey{background:#84909a}.us-color--bordergrey{color:#b0b8bf}.us-background-color--bordergrey{background:#b0b8bf}.us-color--keylinegrey{color:#e9ebed}.us-background-color--keylinegrey{background:#e9ebed}.us-reset--padding{padding:0}.us-reset--margin{margin:0}.us-margin-top{margin-top:1em}.us-padding-top{padding-top:1em}.us-margin-top--small{margin-top:.5em}.us-padding-top--small{padding-top:.5em}.us-margin-top--large{margin-top:1.5em}.us-padding-top--large{padding-top:1.5em}.us-margin-right{margin-right:1em}.us-padding-right{padding-right:1em}.us-margin-right--small{margin-right:.5em}.us-padding-right--small{padding-right:.5em}.us-margin-right--large{margin-right:1.5em}.us-padding-right--large{padding-right:1.5em}.us-margin-bottom{margin-bottom:1em}.us-padding-bottom{padding-bottom:1em}.us-margin-bottom--small{margin-bottom:.5em}.us-padding-bottom--small{padding-bottom:.5em}.us-margin-bottom--large{margin-bottom:1.5em}.us-padding-bottom--large{padding-bottom:1.5em}.us-margin-left{margin-left:1em}.us-padding-left{padding-left:1em}.us-margin-left--small{margin-left:.5em}.us-padding-left--small{padding-left:.5em}.us-margin-left--large{margin-left:1.5em}.us-padding-left--large{padding-left:1.5em}.us-img--full{display:block;height:auto;max-width:100%;min-width:100%}.us-img--left{margin-right:1em;margin-bottom:1em}.us-img--right{margin-bottom:1em;margin-left:1em}@media screen and (min-width: 768px){.us-grid-md--push-1{padding-left:8.33333%}}@media screen and (min-width: 992px){.us-grid-lg--push-1{padding-left:8.33333%}}@media screen and (min-width: 768px){.us-grid-md--push-2{padding-left:16.66667%}}@media screen and (min-width: 992px){.us-grid-lg--push-2{padding-left:16.66667%}}@media screen and (min-width: 768px){.us-grid-md--push-3{padding-left:25%}}@media screen and (min-width: 992px){.us-grid-lg--push-3{padding-left:25%}}@media screen and (min-width: 768px){.us-grid-md--push-4{padding-left:33.33333%}}@media screen and (min-width: 992px){.us-grid-lg--push-4{padding-left:33.33333%}}@media screen and (max-width: 599px){.us-mobile--hidden{display:none}}.us-mobile--block{display:none}@media screen and (max-width: 599px){.us-mobile--block{display:block}}.us-mobile--inline-block{display:none}@media screen and (max-width: 599px){.us-mobile--inline-block{display:inline-block}}.us-mobile--inline{display:none}@media screen and (max-width: 599px){.us-mobile--inline{display:inline}}@media screen and (min-width: 600px){.us-sm-tablet--hidden{display:none}}.us-sm-tablet--block{display:none}@media screen and (min-width: 600px){.us-sm-tablet--block{display:block}}.us-sm-tablet--inline-block{display:none}@media screen and (min-width: 600px){.us-sm-tablet--inline-block{display:inline-block}}.us-sm-tablet--inline{display:none}@media screen and (min-width: 600px){.us-sm-tablet--inline{display:inline}}@media screen and (min-width: 768px){.us-tablet--hidden{display:none}}.us-tablet--block{display:none}@media screen and (min-width: 768px){.us-tablet--block{display:block}}.us-tablet--inline-block{display:none}@media screen and (min-width: 768px){.us-tablet--inline-block{display:inline-block}}.us-tablet--inline{display:none}@media screen and (min-width: 768px){.us-tablet--inline{display:inline}}@media screen and (min-width: 992px){.us-desktop--hidden{display:none}}.us-desktop--block{display:none}@media screen and (min-width: 992px){.us-desktop--block{display:block}}.us-desktop--inline-block{display:none}@media screen and (min-width: 992px){.us-desktop--inline-block{display:inline-block}}.us-desktop--inline{display:none}@media screen and (min-width: 992px){.us-desktop--inline{display:inline}}@media screen and (min-width: 1200px){.us-lg-desktop--hidden{display:none}}.us-lg-desktop--block{display:none}@media screen and (min-width: 1200px){.us-lg-desktop--block{display:block}}.us-lg-desktop--inline-block{display:none}@media screen and (min-width: 1200px){.us-lg-desktop--inline-block{display:inline-block}}.us-lg-desktop--inline{display:none}@media screen and (min-width: 1200px){.us-lg-desktop--inline{display:inline}}
|
|
1
|
+
/*! uStyle version 1.19.2. Copyright uSwitch limited, all rights reserved. *//*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}h1,.us-more-item-title,.us-heading--1,h2,.us-heading--2,h3,.us-loader__text,.us-more-item-title.small,.us-heading--3,h4,.us-news-item-title,.us-guide-item-title,.us-heading--4,h5,.us-heading--5,h6,.us-heading--6,.us-field>label,.us-field>.us-faux-label,.us-validation__icon,.us-btn--stronger,.us-tab-title,.us-cta__title,.us-article__title,.us-font--heading-p,.us-font--heading-s{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;font-weight:700}blockquote,html,.us-field-toggle label,.us-btn,.us-news-item-readmorelink,.us-guide-item-readmorelink,.us-related__item-title,.us-font--normal{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif}blockquote{font-style:italic}.us-crumbs,.us-related__item-title{font-size:.875em;line-height:1.15em}.us-crumbs__item,.us-float--left,.us-img--left{float:left}.us-float--right,.us-img--right{float:right}.us-list,.us-btn,.us-hero-description,.us-crumbs,.us-progress__nav,.us-progress__item,.us-list--reset,.us-reset{padding:0;margin:0}.us-container:before,.us-hero-container:before,.us-tabs-nav-wrapper:before,.us-tabs-container:before,.us-overlay__body:before,.us-grid-row:before,.us-field:before,.us-toggle:before,.us-crumbs:before,.us-related__item-link:before,.us-clearfix:before,.us-container:after,.us-hero-container:after,.us-tabs-nav-wrapper:after,.us-tabs-container:after,.us-overlay__body:after,.us-grid-row:after,.us-field:after,.us-toggle:after,.us-crumbs:after,.us-related__item-link:after,.us-clearfix:after{display:table;content:" "}.us-container:after,.us-hero-container:after,.us-tabs-nav-wrapper:after,.us-tabs-container:after,.us-overlay__body:after,.us-grid-row:after,.us-field:after,.us-toggle:after,.us-crumbs:after,.us-related__item-link:after,.us-clearfix:after{clear:both}.us-news-item-link,.us-guide-item-link,.us-more-item-link{border:1px solid #b0b8bf;border-radius:.3125em}.us-news-item-link:hover,.us-guide-item-link:hover,.us-more-item-link:hover{border-color:#008fe9}.us-list a:after,.us-news-item-readmore:after,.us-guide-item-readmore:after,.us-related__item-link--more:after{position:relative;left:0;display:inline;margin:0 0 0 .5em;font-size:.5em;line-height:0;vertical-align:middle;content:"\25b6\fe0e";transition:left 200ms}.us-loader--centered{transform-style:preserve-3d}.us-loader--centered .us-loader__inner{top:50%;transform:translateY(-50%)}.us-news-item-link,.us-guide-item-link,.us-more-item-link,.us-news-item-image,.us-guide-item-image{-webkit-backface-visibility:hidden;backface-visibility:hidden}.us-form-input,.us-form-textarea,.us-btn{background-image:none}html{font-size:16px;line-height:1.618em}body{color:#2f353a}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.375em}h1,.us-more-item-title,.us-heading--1{font-size:2.25em;line-height:1.3em}h2,.us-heading--2{font-size:1.875em;line-height:1.3em}h3,.us-loader__text,.us-more-item-title.small,.us-heading--3{font-size:1.5em;line-height:1.25em}h4,.us-news-item-title,.us-guide-item-title,.us-heading--4{font-size:1.125em;line-height:1.25em}h5,.us-heading--5{font-size:1em;line-height:.95em}h6,.us-heading--6{font-size:1em;line-height:.95em}p,.trailered{margin:0 0 1.5em 0}.us-standfirst{font-size:18px;font-size:1.125rem;line-height:1.618;padding-top:8.144px;padding-top:.509rem;margin-bottom:17.744px;margin-bottom:1.109rem}ul li{margin-bottom:.5em}small{line-height:1.15em}blockquote{padding:15px;color:#1c1f4e;border-left:5px solid #b0b8bf}blockquote>p{padding:0;margin:0}.us-container,.us-hero-container,.us-tabs-nav-wrapper,.us-tabs-container,.us-overlay__body{position:relative;padding:0 15px;margin-right:auto;margin-left:auto}@media screen and (min-width: 768px){.us-container,.us-hero-container,.us-tabs-nav-wrapper,.us-tabs-container,.us-overlay__body{max-width:800px}}@media screen and (min-width: 992px){.us-container,.us-hero-container,.us-tabs-nav-wrapper,.us-tabs-container,.us-overlay__body{max-width:1000px}}@media screen and (min-width: 1200px){.us-container,.us-hero-container,.us-tabs-nav-wrapper,.us-tabs-container,.us-overlay__body{max-width:1200px}}*{box-sizing:border-box}@media screen and (min-width: 768px){.us-grid-row{margin-right:-15px;margin-left:-15px}}@media screen and (min-width: 768px){.us-col-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%;min-height:1px}.us-col-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%;min-height:1px}.us-col-3{float:left;padding-left:15px;padding-right:15px;width:25%;min-height:1px}.us-col-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%;min-height:1px}.us-col-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%;min-height:1px}.us-col-6{float:left;padding-left:15px;padding-right:15px;width:50%;min-height:1px}.us-col-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%;min-height:1px}.us-col-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%;min-height:1px}.us-col-9{float:left;padding-left:15px;padding-right:15px;width:75%;min-height:1px}.us-col-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%;min-height:1px}.us-col-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%;min-height:1px}.us-col-12{float:left;padding-left:15px;padding-right:15px;width:100%;min-height:1px}}.us-col-xsm-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%}.us-col-xsm-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%}.us-col-xsm-3{float:left;padding-left:15px;padding-right:15px;width:25%}.us-col-xsm-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%}.us-col-xsm-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%}.us-col-xsm-6{float:left;padding-left:15px;padding-right:15px;width:50%}.us-col-xsm-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%}.us-col-xsm-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%}.us-col-xsm-9{float:left;padding-left:15px;padding-right:15px;width:75%}.us-col-xsm-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%}.us-col-xsm-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%}.us-col-xsm-12{float:left;padding-left:15px;padding-right:15px;width:100%}@media screen and (min-width: 600px){.us-col-sm-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%}.us-col-sm-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%}.us-col-sm-3{float:left;padding-left:15px;padding-right:15px;width:25%}.us-col-sm-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%}.us-col-sm-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%}.us-col-sm-6{float:left;padding-left:15px;padding-right:15px;width:50%}.us-col-sm-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%}.us-col-sm-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%}.us-col-sm-9{float:left;padding-left:15px;padding-right:15px;width:75%}.us-col-sm-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%}.us-col-sm-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%}.us-col-sm-12{float:left;padding-left:15px;padding-right:15px;width:100%}}@media screen and (min-width: 768px){.us-col-md-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%}.us-col-md-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%}.us-col-md-3{float:left;padding-left:15px;padding-right:15px;width:25%}.us-col-md-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%}.us-col-md-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%}.us-col-md-6{float:left;padding-left:15px;padding-right:15px;width:50%}.us-col-md-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%}.us-col-md-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%}.us-col-md-9{float:left;padding-left:15px;padding-right:15px;width:75%}.us-col-md-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%}.us-col-md-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%}.us-col-md-12{float:left;padding-left:15px;padding-right:15px;width:100%}}@media screen and (min-width: 992px){.us-col-lg-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%}.us-col-lg-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%}.us-col-lg-3{float:left;padding-left:15px;padding-right:15px;width:25%}.us-col-lg-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%}.us-col-lg-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%}.us-col-lg-6{float:left;padding-left:15px;padding-right:15px;width:50%}.us-col-lg-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%}.us-col-lg-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%}.us-col-lg-9{float:left;padding-left:15px;padding-right:15px;width:75%}.us-col-lg-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%}.us-col-lg-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%}.us-col-lg-12{float:left;padding-left:15px;padding-right:15px;width:100%}}@media screen and (min-width: 1200px){.us-col-xlg-1{float:left;padding-left:15px;padding-right:15px;width:8.33333%}.us-col-xlg-2{float:left;padding-left:15px;padding-right:15px;width:16.66667%}.us-col-xlg-3{float:left;padding-left:15px;padding-right:15px;width:25%}.us-col-xlg-4{float:left;padding-left:15px;padding-right:15px;width:33.33333%}.us-col-xlg-5{float:left;padding-left:15px;padding-right:15px;width:41.66667%}.us-col-xlg-6{float:left;padding-left:15px;padding-right:15px;width:50%}.us-col-xlg-7{float:left;padding-left:15px;padding-right:15px;width:58.33333%}.us-col-xlg-8{float:left;padding-left:15px;padding-right:15px;width:66.66667%}.us-col-xlg-9{float:left;padding-left:15px;padding-right:15px;width:75%}.us-col-xlg-10{float:left;padding-left:15px;padding-right:15px;width:83.33333%}.us-col-xlg-11{float:left;padding-left:15px;padding-right:15px;width:91.66667%}.us-col-xlg-12{float:left;padding-left:15px;padding-right:15px;width:100%}}.us-form-input,.us-form-textarea,.us-form-select{border-color:#84909a;display:inline-block;color:#2f353a;vertical-align:middle;background:#fff;border-style:solid;border-width:1px;border-radius:.1875em;box-sizing:border-box;-ms-appearance:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.us-form-input:hover,.us-form-textarea:hover,.us-form-select:hover,.us-form-input:focus,.us-form-textarea:focus,.us-form-select:focus,.us-form-input:checked,.us-form-textarea:checked,.us-form-select:checked{border-color:#008fe9}.us-form-input:focus,.us-form-textarea:focus,.us-form-select:focus{box-shadow:inset 0 0 0 1px #008fe9}.us-form-input--error,.us-form-select--error{border-color:#d64226}.us-form-input--error:hover,.us-form-select--error:hover,.us-form-input--error:focus,.us-form-select--error:focus,.us-form-input--error:checked,.us-form-select--error:checked{border-color:#d64226}.us-form-input--error:focus,.us-form-select--error:focus{box-shadow:inset 0 0 0 1px #d64226}.us-form-input--success,.us-form-select--success{border-color:#2aaa5b}.us-form-input--success:hover,.us-form-select--success:hover,.us-form-input--success:focus,.us-form-select--success:focus,.us-form-input--success:checked,.us-form-select--success:checked{border-color:#2aaa5b}.us-form-input--success:focus,.us-form-select--success:focus{box-shadow:inset 0 0 0 1px #2aaa5b}.us-field-blocked>label,.us-field-blocked>.us-faux-label,.us-field--blocked>label,.us-field--blocked>.us-faux-label,.us-field--inline>label,.us-field--inline>.us-faux-label{display:block;margin-bottom:.25em}.us-field{margin-bottom:1em}.us-field>label,.us-field>.us-faux-label{margin-right:1em;font-size:1.125em;color:#2f353a}@media screen and (min-width: 768px){.us-field--inline>label,.us-field--inline>.us-faux-label{display:inline-block;min-width:6.66667em;vertical-align:middle}}.us-field-toggle label{padding:.35em .5em;font-weight:normal;line-height:1.5em;cursor:pointer}.us-form-input{height:37px;padding:0.35em 0.5em;font-size:1em;outline:0;box-shadow:none}.us-form-input::-webkit-input-placeholder{color:#84909a}.us-form-input::-moz-placeholder{color:#84909a;opacity:1}.us-form-input:-ms-input-placeholder{color:#84909a}.us-form-input:focus::-webkit-input-placeholder{color:#5e6a73}.us-form-input:focus::-moz-placeholder{color:#5e6a73;opacity:1}.us-form-input:focus:-ms-input-placeholder{color:#5e6a73}.us-form-input.large,.us-form-input--large{height:48px;padding:0.55em 0.5em;font-size:1.2em}.us-form-input--blocked{width:100%}.us-form-input:disabled,.us-form-input--disabled{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default}.us-form-input:disabled:hover,.us-form-input:disabled:focus,.us-form-input:disabled:checked,.us-form-input--disabled:hover,.us-form-input--disabled:focus,.us-form-input--disabled:checked{border-color:#ddd}.us-form-input:disabled:focus,.us-form-input--disabled:focus{box-shadow:inset 0 0 0 1px #ddd}.us-form-input:disabled::-webkit-input-placeholder,.us-form-input--disabled::-webkit-input-placeholder{color:#ddd}.us-form-input:disabled::-moz-placeholder,.us-form-input--disabled::-moz-placeholder{color:#ddd;opacity:1}.us-form-input:disabled:-ms-input-placeholder,.us-form-input--disabled:-ms-input-placeholder{color:#ddd}.us-form-input:disabled:focus,.us-form-input--disabled:focus{box-shadow:none}.us-form-input:disabled:focus::-webkit-input-placeholder,.us-form-input--disabled:focus::-webkit-input-placeholder{color:#ddd}.us-form-input:disabled:focus::-moz-placeholder,.us-form-input--disabled:focus::-moz-placeholder{color:#ddd;opacity:1}.us-form-input:disabled:focus:-ms-input-placeholder,.us-form-input--disabled:focus:-ms-input-placeholder{color:#ddd}.us-form-textarea{padding:0.35em 0.5em;font-size:1em;outline:0}.us-form-textarea:focus::-webkit-input-placeholder{color:#5e6a73}.us-form-textarea:focus::-moz-placeholder{color:#5e6a73;opacity:1}.us-form-textarea:focus:-ms-input-placeholder{color:#5e6a73}.us-form-textarea--blocked{width:100%}.us-form-textarea:disabled,.us-form-textarea--disabled{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default}.us-form-textarea:disabled:hover,.us-form-textarea:disabled:focus,.us-form-textarea:disabled:checked,.us-form-textarea--disabled:hover,.us-form-textarea--disabled:focus,.us-form-textarea--disabled:checked{border-color:#ddd}.us-form-textarea:disabled:focus,.us-form-textarea--disabled:focus{box-shadow:inset 0 0 0 1px #ddd}.us-form-textarea:disabled::-webkit-input-placeholder,.us-form-textarea--disabled::-webkit-input-placeholder{color:#ddd}.us-form-textarea:disabled::-moz-placeholder,.us-form-textarea--disabled::-moz-placeholder{color:#ddd;opacity:1}.us-form-textarea:disabled:-ms-input-placeholder,.us-form-textarea--disabled:-ms-input-placeholder{color:#ddd}.us-form-textarea:disabled:focus,.us-form-textarea--disabled:focus{box-shadow:none}.us-form-textarea:disabled:focus::-webkit-input-placeholder,.us-form-textarea--disabled:focus::-webkit-input-placeholder{color:#ddd}.us-form-textarea:disabled:focus::-moz-placeholder,.us-form-textarea--disabled:focus::-moz-placeholder{color:#ddd;opacity:1}.us-form-textarea:disabled:focus:-ms-input-placeholder,.us-form-textarea--disabled:focus:-ms-input-placeholder{color:#ddd}.us-input-group{position:relative;display:table;vertical-align:middle;border-collapse:separate}@media screen and (min-width: 768px){.us-input-group{display:inline-table}}.us-input-group .us-form-input{position:relative;display:table-cell;float:left;width:100%}.us-input-group--disabled .us-input-group__box{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default}.us-input-group--disabled .us-input-group__box:hover,.us-input-group--disabled .us-input-group__box:focus,.us-input-group--disabled .us-input-group__box:checked{border-color:#ddd}.us-input-group--disabled .us-input-group__box:focus{box-shadow:inset 0 0 0 1px #ddd}.us-input-group--disabled .us-input-group__box::-webkit-input-placeholder{color:#ddd}.us-input-group--disabled .us-input-group__box::-moz-placeholder{color:#ddd;opacity:1}.us-input-group--disabled .us-input-group__box:-ms-input-placeholder{color:#ddd}.us-input-group--disabled .us-input-group__box:focus{box-shadow:none}.us-input-group--disabled .us-input-group__box:focus::-webkit-input-placeholder{color:#ddd}.us-input-group--disabled .us-input-group__box:focus::-moz-placeholder{color:#ddd;opacity:1}.us-input-group--disabled .us-input-group__box:focus:-ms-input-placeholder{color:#ddd}.us-input-group--disabled .us-input-group__box [class^="us-icon--"],.us-input-group--disabled .us-input-group__box .us-icon{opacity:.35}.us-input-group--disabled .us-form-input{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default}.us-input-group--disabled .us-form-input:hover,.us-input-group--disabled .us-form-input:focus,.us-input-group--disabled .us-form-input:checked{border-color:#ddd}.us-input-group--disabled .us-form-input:focus{box-shadow:inset 0 0 0 1px #ddd}.us-input-group--disabled .us-form-input::-webkit-input-placeholder{color:#ddd}.us-input-group--disabled .us-form-input::-moz-placeholder{color:#ddd;opacity:1}.us-input-group--disabled .us-form-input:-ms-input-placeholder{color:#ddd}.us-input-group--disabled .us-form-input:focus{box-shadow:none}.us-input-group--disabled .us-form-input:focus::-webkit-input-placeholder{color:#ddd}.us-input-group--disabled .us-form-input:focus::-moz-placeholder{color:#ddd;opacity:1}.us-input-group--disabled .us-form-input:focus:-ms-input-placeholder{color:#ddd}.us-input-group--blocked{width:100%}.us-input-group--blocked .us-input-group__box{width:1%}.us-input-group__box{display:table-cell;width:1%;padding-right:.5em;padding-left:.5em;color:#84909a;text-align:center;white-space:nowrap;vertical-align:middle;background-color:#fff;border:1px solid #84909a;border-radius:3px}@media screen and (min-width: 768px){.us-input-group__box{width:auto}}.us-input-group__box [class^="us-icon--"],.us-input-group__box .us-icon{vertical-align:middle}.us-input-group__box:first-child{border-right:0}.us-input-group__box:last-child{border-left:0}.us-input-group__box:first-child,.us-input-group .us-form-input:first-child{border-top-right-radius:0;border-bottom-right-radius:0}.us-input-group__box:last-child,.us-input-group .us-form-input:last-child{border-bottom-left-radius:0;border-top-left-radius:0}@media (-webkit-min-device-pixel-ratio: 0.1), (min-device-pixel-ratio: 0.1), (min-resolution: 0.1dppx){.us-form-input[type="checkbox"]:after{position:absolute;top:50%;left:50%;display:block;width:1em;height:1em;margin:-.5em 0 0 -.5em;pointer-events:none;background-image:url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%3E%3Cpath%20fill%3D%22%23008FE9%22%20d%3D%22M31.076%202.204c-9.734%205.965-16.798%2013.492-19.972%2017.27l-7.772-6.088L-.1%2016.152l13.43%2013.652c2.31-5.918%209.632-17.483%2018.57-25.7l-.824-1.9z%22%2F%3E%3C%2Fsvg%3E');background-position:0 75%;background-size:cover;content:"";opacity:0}.us-form-input[type="checkbox"]:checked:after{opacity:1}.us-form-input[type="checkbox"].us-form-input--disabled,.us-form-input[type="checkbox"]:disabled{background:#fafafa}.us-form-input[type="checkbox"].us-form-input--disabled:after,.us-form-input[type="checkbox"]:disabled:after{opacity:0}.us-form-input[type="checkbox"].us-form-input--disabled:checked:after{background-position:0 50%;opacity:.35}.us-form-input[type="radio"]:checked,.us-form-input[type="radio"]:checked:focus{background:#008fe9}.us-form-input[type="radio"]:focus{box-shadow:inset 0 0 0 1px #008fe9}.us-form-input[type="radio"]:checked{box-shadow:inset 0 0 0 .35em #fff}.us-form-input[type="radio"]:checked:focus{box-shadow:inset 0 0 0 1px #008fe9,inset 0 0 0 0.35em #fff}.us-form-input[type="radio"].us-form-input--disabled:checked{background:#ddd;box-shadow:inset 0 0 0 0.35em #fafafa}}.us-form-input[type="checkbox"],.us-form-input[type="radio"]{position:relative;width:1.6em;height:1.6em;padding:0;font-size:.8em;cursor:pointer}.us-field-toggle .us-form-input[type="checkbox"],.us-field-toggle .us-form-input[type="radio"]{margin-top:.1em;margin-right:.5em;vertical-align:top}.us-form-input[type="radio"]{border-radius:50%}.us-form-input[type="checkbox"]{border-radius:.3em}.us-toggle{display:block}@media screen and (min-width: 768px){.us-toggle{display:inline-block}}.us-toggle__label{position:relative;float:left;width:50%;vertical-align:middle;cursor:pointer}@media screen and (min-width: 768px){.us-toggle__label{width:auto}}.us-toggle__label .us-form-input{position:absolute;left:-999em}.us-toggle__btn{display:block;padding:5px 30px;color:#2f353a;text-align:center;background-color:#fff;border:1px solid #84909a}.us-toggle__label:hover .us-toggle__btn{border-color:#008fe9}.us-toggle__label:focus .us-toggle__btn,.us-toggle__label .us-form-input:focus+.us-toggle__btn{border-color:#008fe9;box-shadow:inset 0 0 0 1px #008fe9}.us-toggle__label .us-form-input.checked+.us-toggle__btn{background:#e4f8ff;border-color:#008fe9;text-shadow:1px 0 0 #2f353a}.us-toggle__label .us-form-input:checked+.us-toggle__btn{background:#e4f8ff;border-color:#008fe9;text-shadow:1px 0 0 #2f353a}.us-toggle__label:first-child .us-toggle__btn{border-bottom-left-radius:3px;border-top-left-radius:3px}.us-toggle__label:last-child .us-toggle__btn{border-top-right-radius:3px;border-bottom-right-radius:3px}.us-toggle__btn--disabled{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default}.us-toggle__btn--disabled:hover,.us-toggle__btn--disabled:focus,.us-toggle__btn--disabled:checked{border-color:#ddd}.us-toggle__btn--disabled:focus{box-shadow:inset 0 0 0 1px #ddd}.us-toggle__btn--disabled::-webkit-input-placeholder{color:#ddd}.us-toggle__btn--disabled::-moz-placeholder{color:#ddd;opacity:1}.us-toggle__btn--disabled:-ms-input-placeholder{color:#ddd}.us-toggle__btn--disabled:focus{box-shadow:none}.us-toggle__btn--disabled:focus::-webkit-input-placeholder{color:#ddd}.us-toggle__btn--disabled:focus::-moz-placeholder{color:#ddd;opacity:1}.us-toggle__btn--disabled:focus:-ms-input-placeholder{color:#ddd}.us-form-select-wrap{position:relative;display:inline-block}.us-form-select{background-image:url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIGJhc2VQcm9maWxlPSd0aW55JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHg9JzBweCcgeT0nMHB4JyB3aWR0aD0nNDBweCcgaGVpZ2h0PSc2cHgnIHZpZXdCb3g9JzAgMCA0MCA2Jz48cG9seWdvbiBmaWxsPScjODQ5MDlhJyBwb2ludHM9JzI1LjMsMCAyMC4zLDYgMTUuMywwICcvPjwvc3ZnPg==");height:37px;padding:0.35em 0.5em;font-size:1em;max-width:100%;padding-right:40px;cursor:pointer;background-position:100% 50%;background-repeat:no-repeat;outline:0}.us-form-select:hover,.us-form-select:focus{background-image:url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIGJhc2VQcm9maWxlPSd0aW55JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHg9JzBweCcgeT0nMHB4JyB3aWR0aD0nNDBweCcgaGVpZ2h0PSc2cHgnIHZpZXdCb3g9JzAgMCA0MCA2Jz48cG9seWdvbiBmaWxsPScjMDA4ZmU5JyBwb2ludHM9JzI1LjMsMCAyMC4zLDYgMTUuMywwICcvPjwvc3ZnPg==")}@-moz-document url-prefix(){.us-form-select{text-indent:.01px;text-overflow:"";-moz-appearance:none}}.us-form-select:focus:-moz-focusring{color:transparent;text-shadow:0 0 0 #2f353a}.us-form-select::-ms-expand{display:none}.ie9 .us-form-select{padding:0.35em 0.5em}.us-form-select-wrap--multiple,.us-form-select-wrap--multiple .us-form-select,.us-form-select--multiple,.us-form-select--multiple .us-form-select,.us-form-select[multiple],.us-form-select[multiple] .us-form-select,.us-form-select[size],.us-form-select[size] .us-form-select{height:auto;overflow:hidden;overflow-x:auto;overflow-y:auto;vertical-align:middle;cursor:default;background-image:none;-webkit-overflow-scrolling:touch}.us-form-select-wrap--multiple:hover,.us-form-select-wrap--multiple:focus,.us-form-select--multiple:hover,.us-form-select--multiple:focus,.us-form-select[multiple]:hover,.us-form-select[multiple]:focus,.us-form-select[size]:hover,.us-form-select[size]:focus{background-image:none}.us-form-select-wrap--multiple option,.us-form-select--multiple option,.us-form-select[multiple] option,.us-form-select[size] option{cursor:pointer}.us-form-select-wrap--multiple::-webkit-scrollbar,.us-form-select--multiple::-webkit-scrollbar,.us-form-select[multiple]::-webkit-scrollbar,.us-form-select[size]::-webkit-scrollbar{width:16px;height:16px}.us-form-select-wrap--multiple::-webkit-scrollbar:window-inactive,.us-form-select--multiple::-webkit-scrollbar:window-inactive,.us-form-select[multiple]::-webkit-scrollbar:window-inactive,.us-form-select[size]::-webkit-scrollbar:window-inactive{opacity:0}.us-form-select-wrap--multiple::-webkit-scrollbar-thumb,.us-form-select--multiple::-webkit-scrollbar-thumb,.us-form-select[multiple]::-webkit-scrollbar-thumb,.us-form-select[size]::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.2);border:4px solid transparent;border-radius:8px;background-clip:padding-box}.us-form-select-wrap--multiple::-webkit-scrollbar-corner,.us-form-select--multiple::-webkit-scrollbar-corner,.us-form-select[multiple]::-webkit-scrollbar-corner,.us-form-select[size]::-webkit-scrollbar-corner{background-color:transparent}.us-form-select-wrap--blocked,.us-form-select--blocked{width:100%}.us-form-select-wrap--disabled,.us-form-select-wrap--disabled .us-form-select,.us-form-select--disabled,.us-form-select--disabled .us-form-select,.us-form-select:disabled,.us-form-select:disabled .us-form-select{border-color:#ddd;color:#ddd;background-color:#fafafa;cursor:default;background-image:url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIGJhc2VQcm9maWxlPSd0aW55JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHg9JzBweCcgeT0nMHB4JyB3aWR0aD0nNDBweCcgaGVpZ2h0PSc2cHgnIHZpZXdCb3g9JzAgMCA0MCA2Jz48cG9seWdvbiBmaWxsPScjZGRkJyBwb2ludHM9JzI1LjMsMCAyMC4zLDYgMTUuMywwICcvPjwvc3ZnPg==")}.us-form-select-wrap--disabled:hover,.us-form-select-wrap--disabled:focus,.us-form-select-wrap--disabled:checked,.us-form-select-wrap--disabled .us-form-select:hover,.us-form-select-wrap--disabled .us-form-select:focus,.us-form-select-wrap--disabled .us-form-select:checked,.us-form-select--disabled:hover,.us-form-select--disabled:focus,.us-form-select--disabled:checked,.us-form-select--disabled .us-form-select:hover,.us-form-select--disabled .us-form-select:focus,.us-form-select--disabled .us-form-select:checked,.us-form-select:disabled:hover,.us-form-select:disabled:focus,.us-form-select:disabled:checked,.us-form-select:disabled .us-form-select:hover,.us-form-select:disabled .us-form-select:focus,.us-form-select:disabled .us-form-select:checked{border-color:#ddd}.us-form-select-wrap--disabled:focus,.us-form-select-wrap--disabled .us-form-select:focus,.us-form-select--disabled:focus,.us-form-select--disabled .us-form-select:focus,.us-form-select:disabled:focus,.us-form-select:disabled .us-form-select:focus{box-shadow:inset 0 0 0 1px #ddd}.us-form-select-wrap--disabled::-webkit-input-placeholder,.us-form-select-wrap--disabled .us-form-select::-webkit-input-placeholder,.us-form-select--disabled::-webkit-input-placeholder,.us-form-select--disabled .us-form-select::-webkit-input-placeholder,.us-form-select:disabled::-webkit-input-placeholder,.us-form-select:disabled .us-form-select::-webkit-input-placeholder{color:#ddd}.us-form-select-wrap--disabled::-moz-placeholder,.us-form-select-wrap--disabled .us-form-select::-moz-placeholder,.us-form-select--disabled::-moz-placeholder,.us-form-select--disabled .us-form-select::-moz-placeholder,.us-form-select:disabled::-moz-placeholder,.us-form-select:disabled .us-form-select::-moz-placeholder{color:#ddd;opacity:1}.us-form-select-wrap--disabled:-ms-input-placeholder,.us-form-select-wrap--disabled .us-form-select:-ms-input-placeholder,.us-form-select--disabled:-ms-input-placeholder,.us-form-select--disabled .us-form-select:-ms-input-placeholder,.us-form-select:disabled:-ms-input-placeholder,.us-form-select:disabled .us-form-select:-ms-input-placeholder{color:#ddd}.us-form-select-wrap--disabled:focus,.us-form-select-wrap--disabled .us-form-select:focus,.us-form-select--disabled:focus,.us-form-select--disabled .us-form-select:focus,.us-form-select:disabled:focus,.us-form-select:disabled .us-form-select:focus{box-shadow:none}.us-form-select-wrap--disabled:focus::-webkit-input-placeholder,.us-form-select-wrap--disabled .us-form-select:focus::-webkit-input-placeholder,.us-form-select--disabled:focus::-webkit-input-placeholder,.us-form-select--disabled .us-form-select:focus::-webkit-input-placeholder,.us-form-select:disabled:focus::-webkit-input-placeholder,.us-form-select:disabled .us-form-select:focus::-webkit-input-placeholder{color:#ddd}.us-form-select-wrap--disabled:focus::-moz-placeholder,.us-form-select-wrap--disabled .us-form-select:focus::-moz-placeholder,.us-form-select--disabled:focus::-moz-placeholder,.us-form-select--disabled .us-form-select:focus::-moz-placeholder,.us-form-select:disabled:focus::-moz-placeholder,.us-form-select:disabled .us-form-select:focus::-moz-placeholder{color:#ddd;opacity:1}.us-form-select-wrap--disabled:focus:-ms-input-placeholder,.us-form-select-wrap--disabled .us-form-select:focus:-ms-input-placeholder,.us-form-select--disabled:focus:-ms-input-placeholder,.us-form-select--disabled .us-form-select:focus:-ms-input-placeholder,.us-form-select:disabled:focus:-ms-input-placeholder,.us-form-select:disabled .us-form-select:focus:-ms-input-placeholder{color:#ddd}.us-form-select-wrap--disabled:hover,.us-form-select-wrap--disabled:focus,.us-form-select-wrap--disabled .us-form-select:hover,.us-form-select-wrap--disabled .us-form-select:focus,.us-form-select--disabled:hover,.us-form-select--disabled:focus,.us-form-select--disabled .us-form-select:hover,.us-form-select--disabled .us-form-select:focus,.us-form-select:disabled:hover,.us-form-select:disabled:focus,.us-form-select:disabled .us-form-select:hover,.us-form-select:disabled .us-form-select:focus{background-image:url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPScxLjEnIGJhc2VQcm9maWxlPSd0aW55JyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHg9JzBweCcgeT0nMHB4JyB3aWR0aD0nNDBweCcgaGVpZ2h0PSc2cHgnIHZpZXdCb3g9JzAgMCA0MCA2Jz48cG9seWdvbiBmaWxsPScjZGRkJyBwb2ludHM9JzI1LjMsMCAyMC4zLDYgMTUuMywwICcvPjwvc3ZnPg==")}.us-validation__icon{position:absolute;color:#fff;text-align:center;border-radius:50%}.us-validation{position:relative;display:block;padding:0.25em 0 0.25em 31px}.us-validation .us-validation__message,.us-validation--error .us-validation__message{color:#d64226;border-color:#d64226}.us-validation .us-validation__message:before,.us-validation .us-validation__message:after,.us-validation--error .us-validation__message:before,.us-validation--error .us-validation__message:after{border-color:#d64226}.us-validation .us-validation__message:after,.us-validation--error .us-validation__message:after{border-right-color:#fff}.us-validation .us-validation__icon,.us-validation--error .us-validation__icon{background-color:#d64226}.us-validation .us-validation__icon:before,.us-validation--error .us-validation__icon:before{content:"!"}.us-validation--success .us-validation__message{color:#2aaa5b;border-color:#2aaa5b}.us-validation--success .us-validation__message:before,.us-validation--success .us-validation__message:after{border-color:#2aaa5b}.us-validation--success .us-validation__message:after{border-right-color:#fff}.us-validation--success .us-validation__icon{background-color:#2aaa5b}.us-validation--success .us-validation__icon:before{content:"✓"}.us-validation__message{position:relative;display:block;min-height:2.4em;padding:.35em .5em;margin:0;line-height:1.5}.us-validation__icon{top:10px;left:0;width:26px;height:26px;font-size:18px;line-height:26px}.us-table{width:100%;color:#63686b}.us-table{border-collapse:separate;border-spacing:0}@media screen and (max-width: 599px){.us-table thead{display:none}.us-table tbody,.us-table tr,.us-table td{display:block}}.us-table-head{padding:0 1em .5em 0}.us-table-head{color:#1c1f4e;text-align:left;vertical-align:middle;border-bottom:1px solid #cbcdce}@media screen and (max-width: 599px){.us-table-body-row{position:relative}.us-table-body-row:before,.us-table-body-row:after{display:table;content:" "}.us-table-body-row:after{clear:both}}.us-table-cell{padding-top:15px;padding-bottom:15px}.us-table-cell{text-align:left;vertical-align:top;border-bottom:1px solid #cbcdce}@media screen and (max-width: 599px){.us-table-cell{padding:0;border:0}}svg:not(:root){overflow:visible}svg.us-icon--before,svg.us-icon--after{display:inline-block;vertical-align:middle}svg.us-icon--before{margin-right:7.5px}svg.us-icon--after{margin-left:7.5px}.us-icon--centered{position:relative;top:50%;margin:0 auto;transform:translateY(-50%)}.us-icon--notext{display:inline-block;text-indent:-999em}svg.us-icon--white{fill:#fff}svg.us-icon--typegrey{fill:#2f353a}svg.us-icon--inputgrey{fill:#84909a}svg.us-icon--typecyan{fill:#008fe9}svg.us-icon--custom{fill:#1c1f4e}svg.us-icon--uswitch{fill:#002396}svg.us-icon--cross{fill:#d64226}svg.us-icon--tick{fill:#2aaa5b}svg.us-icon--facebook{fill:#3c5a99}svg.us-icon--google{fill:#dc4e41}svg.us-icon--renewable{fill:#2aaa5b}svg.us-icon--star-half{fill:#ffd32f}svg.us-icon--starline-half{fill:#ffd32f}svg.us-icon--star{fill:#ffd32f}svg.us-icon--starline{fill:#ffd32f}svg.us-icon--twitter{fill:#00aced}svg.us-icon--hover--white:hover{fill:#fff}svg.us-icon--hover--typegrey:hover{fill:#2f353a}svg.us-icon--hover--inputgrey:hover{fill:#84909a}svg.us-icon--hover--typecyan:hover{fill:#008fe9}svg.us-icon--hover--custom:hover{fill:#1c1f4e}.us-icon--small{width:16px;height:16px}.us-icon--medium{width:32px;height:32px}.us-icon--large{width:64px;height:64px}@media screen and (max-width: 767px){.us-icon--small--sm-tablet{width:16px;height:16px}.us-icon--medium--sm-tablet{width:32px;height:32px}.us-icon--large--sm-tablet{width:64px;height:64px}}@media screen and (max-width: 599px){.us-icon--small--mobile{width:16px;height:16px}.us-icon--medium--mobile{width:32px;height:32px}.us-icon--large--mobile{width:64px;height:64px}}.us-link,.us-list a{border-bottom:1px solid}a,.us-link{color:#002396;text-decoration:none;transition:color 333ms, border-color 333ms}a:visited,.us-link:visited{color:#002396}a:focus,.us-link:focus{color:#00114a}a:hover,.us-link:hover{color:#008fe9}a:active,.us-link:active{color:#002396}.us-link--light{color:#fff}.us-link--light:visited{color:#fff}.us-link--light:focus{color:#fff}.us-link--light:hover{color:#fff}.us-link--light:active{color:#e9ebed}.us-list{list-style:none}.us-list li{font-size:16px;margin:0}.us-list a{display:block;padding-top:.5em;padding-bottom:.5em}.us-list a:after{font-size:.8em}.us-list a:hover:after{left:.5em}.us-hero .us-list{margin-top:1em}.us-hero .us-list a{color:#1c1f4e}.us-numbered-list,.us-ticked-list{padding:0;margin:1.5em 0;list-style:none}.us-numbered-list li,.us-ticked-list li{position:relative;padding-left:2em;margin:.5em 0}.us-numbered-list li:before,.us-ticked-list li:before{position:absolute;left:0}.us-numbered-list{counter-reset:number-counter}.us-numbered-list li{counter-increment:number-counter}.us-numbered-list li:before{top:0;width:1.5em;height:1.5em;padding-top:.25em;line-height:1;color:#008fe9;text-align:center;border-radius:2em;content:counter(number-counter);box-sizing:border-box}.us-hero .us-numbered-list li:before,.us-numbered-list.us-custom-list-alt li:before{color:#1c1f4e;background:#fff;background:rgba(255,255,255,0.7)}.us-ticked-list li{padding-left:0}.us-ticked-list li:before{top:50%;margin-top:-8px}.us-btn{display:inline-block;padding:.63em 1.25em;font-size:1em;line-height:1em;color:#2f353a;text-align:center;text-decoration:none;white-space:nowrap;vertical-align:middle;cursor:pointer;background-color:#e9ebed;border:1px solid #babcbe;border-radius:3px;transition:none}.us-btn:visited{color:#2f353a}.us-btn:hover,.us-btn:focus{color:#008fe9;background-color:#e6f4fd;border-color:#008fe9}.us-btn:active{color:#fff;background-color:#008fe9}.us-btn--large{font-size:1.2em}.us-btn--small{padding:.4em .65em}.us-btn--blocked{display:block;width:100%;padding-right:0;padding-left:0}.us-btn--link{padding:0;line-height:1.618;color:#002396;background-color:transparent;border:0}.us-btn--link:hover{color:#1c1f4e;text-decoration:underline;background-color:transparent}.us-btn--disabled,.us-btn:disabled{pointer-events:none;opacity:.5}.us-btn--primary,.us-btn--primary:visited{color:#fff;background-color:#d64226;border-color:#ab351e}.us-btn--primary:hover,.us-btn--primary:focus{color:#fff;background-color:#ab351e;border-color:#ab351e}.us-btn--primary:active{color:#fff;background-color:#6b2113;border-color:#6b2113}.us-btn--secondary,.us-btn--secondary:visited{color:#fff;background-color:#008fe9;border-color:#0072ba}.us-btn--secondary:hover,.us-btn--secondary:focus{color:#fff;background-color:#0072ba;border-color:#0072ba}.us-btn--secondary:active{color:#fff;background-color:#004875;border-color:#004875}.us-btn--action,.us-btn--action:visited{color:#fff;background-color:#2aaa5b;border-color:#228849}.us-btn--action:hover,.us-btn--action:focus{color:#fff;background-color:#228849;border-color:#228849}.us-btn--action:active{color:#fff;background-color:#15552e;border-color:#15552e}.us-btn--hero,.us-btn--hero:visited{color:#1c1f4e;background-color:transparent;border-color:#1c1f4e}.us-btn--hero:hover,.us-btn--hero:focus{color:#1c1f4e;border-color:#1c1f4e;background-color:#e8e9ed}.us-btn--hero:active{color:#fff;background-color:#1c1f4e;border-color:#1c1f4e}.us-btn--reversed,.us-btn--reversed:visited{color:#fff;background-color:transparent;border-color:#fff}.us-btn--reversed:hover,.us-btn--reversed:focus{color:#fff;border-color:#fff;background-color:rgba(255,255,255,0.2)}.us-btn--reversed:active{color:#2f353a;background-color:#fff;border-color:#fff}.us-hero{background-color:#99e2ff}.us-hero-container{padding-top:1.25em;padding-bottom:1.25em}@media screen and (min-width: 768px){.us-hero-container{padding-top:2.5em;padding-bottom:2.5em}}.us-hero-title{margin-bottom:0;font-size:1.25em}@media screen and (min-width: 768px){.us-hero-title{font-size:2.25em}}.us-hero-title,.us-hero-description{color:#1c1f4e}.us-hero-description{margin-bottom:0;padding-top:5px}.us-hero--double .us-hero-container{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:start;justify-content:flex-start}@media screen and (min-width: 768px){.us-hero--double .us-hero-container{-ms-flex-direction:row;flex-direction:row;-ms-flex-align:center;align-items:center}}@media screen and (min-width: 992px){.us-hero--double .us-hero-container{-ms-flex-align:start;align-items:flex-start}}@media screen and (max-width: 599px){.us-hero__block:nth-child(2){display:none}}@media screen and (min-width: 768px){.us-hero__block:nth-child(1){width:60%;max-width:60%;-ms-flex-positive:1;flex-grow:1;margin:0 100px 0 0}.us-hero__block:nth-child(2){width:40%;margin:0 100px 0 0;display:block}}@media screen and (min-width: 992px){.us-hero__block:nth-child(1){width:auto;max-width:100%;-ms-flex-positive:1;flex-grow:1;margin:0 100px 0 0}.us-hero__block:nth-child(2){width:50%;max-width:50%}}@media screen and (min-width: 768px){.us-content-group{padding-top:50px;padding-bottom:50px;border-bottom:1px solid #e9ebed}}@media screen and (max-width: 991px){.us-content-group.mobile-bordered{padding-top:15px;padding-bottom:15px;border-bottom:1px solid #e9ebed}}@keyframes tab-show{0%{opacity:0}100%{opacity:1}}.us-tabs-nav{display:none;background-color:#f4f5f6}@media screen and (min-width: 768px){.js .us-tabs-nav{display:block}}.us-tabs-nav-menu{display:table;display:-ms-flexbox;display:flex;width:100%;overflow:hidden;-ms-flex-flow:row;flex-flow:row}.us-tabs-nav-link{display:table-cell;width:16.66667%;padding:14px 1em 12px;text-align:center;vertical-align:middle;border-right:1px solid #fff;border-radius:0;transition:none}@media screen and (min-width: 768px){.us-tabs-nav-link{font-size:.875em;line-height:1.25em}}@media screen and (min-width: 992px){.us-tabs-nav-link{font-size:1em}}@media screen and (min-width: 1200px){.us-tabs-nav-link{font-size:1.125em}}.us-tabs-nav-link:last-child{border-right:0}.us-tabs-nav-link:hover,.us-tabs-nav-link.active{color:#008fe9}.us-tabs-nav-link:hover:before,.us-tabs-nav-link.active:before{background-color:#008fe9}.us-tabs-nav-link.active{cursor:default;background-color:#fff}.us-tabs-nav-link.active:hover{background-color:#fff}.us-tabs-nav-mainlink{color:#84909a;position:relative;background-color:#f4f5f6;transition:color 300ms, background-color 300ms}.us-tabs-nav-mainlink:visited{color:#84909a}.us-tabs-nav-mainlink:hover{color:#008fe9}.us-tabs-nav-mainlink:active{color:#008fe9}.us-tabs-nav-mainlink:before{position:absolute;top:0;right:0;left:0;height:5px;background-color:#f4f5f6;content:"";transition:background-color 300ms}.us-tabs-nav-mainlink:hover{background-color:rgba(255,255,255,0.35)}.us-tabs-nav-mainlink:hover .us-tabs-nav-chevron,.us-tabs-nav-mainlink:hover .us-tabs-nav-chevron-wrapper .us-icon,.us-tab.active .us-tabs-nav-mainlink .us-tabs-nav-chevron,.us-tab.active .us-tabs-nav-mainlink .us-tabs-nav-chevron-wrapper .us-icon{transform:rotate(-90deg);fill:#008fe9}.us-tabs-nav-mainlink:hover:before{background-color:#008fe9}.us-tab.active .us-tabs-nav-mainlink:before{background-color:#008fe9}.us-tabs-nav-link{display:-ms-flexbox;display:flex;-webkit-box-align:center;justify-content:center;-ms-flex-align:center;-ms-flex-pack:center;align-items:center}@media screen and (max-width: 991px){.us-tabs-container{padding:0}}.us-tab-title{font-size:1.125em;line-height:1.25em;position:relative;margin:0;font-weight:normal;border-bottom:1px solid #fff}@media screen and (min-width: 768px){.js .us-tab-title{display:none}}.us-tab-title .us-tabs-nav-mainlink{display:block;padding:0.75em 15px 0.5em}.us-tab.active .us-tab-title .us-tabs-nav-mainlink{color:#008fe9;background-color:#fff}.us-tab-title .us-tabs-nav-chevron,.us-tab-title .us-tabs-nav-chevron-wrapper .us-icon{position:absolute;right:15px;transform:rotate(90deg);transition:transform .2s ease}.us-tab-content{display:block;overflow:hidden;opacity:1}@media screen and (max-width: 991px){.us-tab-content{padding-right:15px;padding-left:15px}}.js .us-tab-content{max-height:0}@media screen and (min-width: 768px){.js .us-tab-content{display:none;max-height:none}}.us-tab.active .us-tab-content{max-height:9999px;padding-top:1em}@media screen and (min-width: 768px){.us-tab.active .us-tab-content{display:block;animation-duration:1s;animation-name:tab-show;animation-fill-mode:forwards}}@keyframes loader-intro{from{opacity:0}to{opacity:1}}@keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.us-loader,.us-loader__overlay{position:absolute;top:0;left:0;width:100%;height:100%}.us-loader--loading .us-loader__spinner{position:relative;z-index:2;display:inline-block;margin-top:1em;margin-bottom:1em;background-repeat:no-repeat}.us-loader--loading .us-loader__spinner{background:transparent url('data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20width%3D%2260%22%20height%3D%2260%22%20fill%3D%22%23174695%22%3E%3Cpath%20opacity%3D%22.25%22%20d%3D%22M16%200a16%2016%200%200%200%200%2032%2016%2016%200%200%200%200-32m0%204a12%2012%200%200%201%200%2024%2012%2012%200%200%201%200-24%22%2F%3E%3Cpath%20d%3D%22M16%200a16%2016%200%200%201%2016%2016h-4A12%2012%200%200%200%2016%204z%22%2F%3E%3C%2Fsvg%3E') no-repeat center center;animation:spin 500ms infinite linear}.us-loader{z-index:1;display:none;text-align:center}.us-loader__container{position:relative}.us-loader--loading{display:block;animation:loader-intro 500ms forwards}.us-loader--centered{transform-style:preserve-3d}.us-loader__inner{position:relative;z-index:2}.us-loader--loading .us-loader__spinner{width:60px;height:60px;background-size:60px}.us-loader--centered .us-loader__spinner{margin-top:0}.us-loader__text{color:#1c1f4e}.us-loader__overlay{z-index:1;background-color:#fff;opacity:.8}.us-crumbs{margin-top:1em;margin-bottom:1em;list-style:none}.us-crumbs__item{margin-bottom:0;color:#2f353a}.us-crumbs__item:before{display:inline-block;margin:0 .35em;font-size:1.4em;font-weight:normal;content:"\203A"}.us-crumbs__item:first-child:before{width:0;margin:0;color:transparent}.us-crumbs__item:last-child{font-weight:bold}.us-crumbs__link{color:#2f353a}.us-crumbs__link:visited{color:#2f353a}.us-crumbs__link:hover{color:#2f353a;text-decoration:underline}.us-cta{padding:15px;margin-bottom:1.5em;background-color:#eaebeb;border-bottom:10px solid #1c1f4e}@media screen and (min-width: 768px){.us-cta{padding:20px;border-bottom:0;border-left:10px solid #1c1f4e}}.us-cta label{display:block}@media screen and (min-width: 992px){.us-cta label{display:inline-block}}.us-cta__title.us-cta__title{margin-top:0;font-size:18px;font-size:1.125rem}@media screen and (min-width: 768px){.us-cta__title.us-cta__title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:1.125em;line-height:1.25em}}@media screen and (min-width: 992px){.us-cta__title.us-cta__title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:1.5em;line-height:1.25em}}.us-cta--side{padding:15px;border-bottom:10px solid #1c1f4e;border-left:0}@media screen and (min-width: 992px){.us-cta--side{padding:20px}}.us-cta--side .us-form-input{width:100%}.us-overlay--open{overflow:hidden}.us-overlay-parent{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1003;visibility:hidden}.us-overlay-parent--visible{overflow:scroll;visibility:visible}.us-overlay{position:absolute;z-index:1003;width:100%;min-height:100%;background:#fff;transform:translate3d(-100%, 0, 0);transition:transform .3s ease-in,opacity .3s linear,box-shadow .3s linear;-webkit-overflow-scrolling:auto}.us-overlay-parent--active .us-overlay{opacity:1;transform:translate3d(0, 0, 0);box-shadow:1px 0 18px 0 rgba(0,0,0,0.3);transition-timing-function:ease-out}@media screen and (min-width: 600px){.us-overlay{width:340px}}.us-overlay--above{z-index:1004}.us-overlay-parent--active .us-overlay--above{box-shadow:1px 0 30px 5px rgba(0,0,0,0.3)}@media screen and (min-width: 992px){.us-overlay--modal{position:relative;width:60%;max-width:700px;min-height:0;margin:5% auto;opacity:0;transform:translate3d(0, -30px, 0)}.us-overlay-parent--active .us-overlay--modal{transform:translate3d(0, 0, 0);box-shadow:0 1px 18px 0 rgba(0,0,0,0.3)}.us-overlay-parent--active .us-overlay--modal.us-overlay--above{box-shadow:0 1px 30px 5px rgba(0,0,0,0.3)}}.us-overlay--right{right:0;transform:translate3d(100%, 0, 0)}.us-overlay-parent--active .us-overlay--right{transform:translate3d(0, 0, 0);box-shadow:-1px 0 18px 0 rgba(0,0,0,0.3)}.us-overlay-parent--active .us-overlay--right.us-overlay--above{box-shadow:-1px 0 30px 5px rgba(0,0,0,0.3)}.us-overlay__container{position:relative}.us-overlay__body{padding:1em;color:#2f353a}.us-overlay__header{position:relative;width:100%;min-height:55px;padding:1em;color:#fff;background:#1c1f4e}.us-overlay__title{width:calc(100% - 64px)}.us-overlay__close{position:absolute;top:.75em;right:1em}@media screen and (min-width: 768px){.us-tooltip--left .us-tooltip__note,.us-tooltip--right .us-tooltip__note{top:-1em}.us-tooltip--left .us-tooltip__note .us-tooltip__arrow,.us-tooltip--right .us-tooltip__note .us-tooltip__arrow{top:1em}.us-tooltip--left .us-tooltip__note .us-tooltip__arrow:after,.us-tooltip--right .us-tooltip__note .us-tooltip__arrow:after{top:-10px}}@media screen and (min-width: 768px){.us-tooltip--top .us-tooltip__note,.us-tooltip--bottom .us-tooltip__note{left:50%;margin-left:-150px}.us-tooltip--top .us-tooltip__note .us-tooltip__arrow,.us-tooltip--bottom .us-tooltip__note .us-tooltip__arrow,.us-tooltip--top .us-tooltip__note .us-tooltip__arrow:after,.us-tooltip--bottom .us-tooltip__note .us-tooltip__arrow:after{left:50%;margin-left:-10px}}@media screen and (max-width: 991px){.us-tooltip.us-tooltip--active .us-tooltip__note{display:block;pointer-events:all;opacity:1;visibility:visible;transition-delay:0ms}.us-tooltip.us-tooltip--active .us-tooltip__icon{background:#008fe9}}@media screen and (min-width: 768px){.us-tooltip:hover .us-tooltip__note{display:block;pointer-events:all;opacity:1;visibility:visible;transition-delay:0ms}.us-tooltip:hover .us-tooltip__icon{background:#008fe9}}.us-tooltip__wrapper{position:static;top:0;right:0}@media screen and (min-width: 768px){.us-tooltip__wrapper{position:absolute}}.us-tooltip__icon{position:absolute;top:0;right:0;width:22px;height:22px;font-weight:700;line-height:22px;color:#fff;text-align:center;cursor:pointer;background:#b0b8bf;border-radius:50%}@media screen and (min-width: 768px){.us-tooltip__icon{position:static}}.us-tooltip__icon:before{content:"?"}.us-tooltip__note{position:static;display:none;padding:.75em 1em;margin-top:1em;margin-bottom:1em;color:#2f353a;background:#fff;border:1px solid #008fe9;border-radius:4px}@media screen and (min-width: 768px){.us-tooltip__note{position:absolute;display:block;width:300px;margin-top:0;margin-bottom:0;pointer-events:none;opacity:0;visibility:hidden;transition:visibility 0ms ease 300ms, opacity 300ms ease}}.us-tooltip__arrow{position:absolute}.us-tooltip__arrow:after{position:absolute;content:""}.us-tooltip--small .us-tooltip__icon{width:16px;height:16px;font-size:.875em;line-height:16px}.us-tooltip--top .us-tooltip__note{bottom:32px}@media screen and (min-width: 768px){.us-tooltip--top .us-tooltip__note .us-tooltip__arrow{width:0;height:0;border-top:10px solid #008fe9;border-right:10px solid transparent;border-left:10px solid transparent;bottom:-10px}.us-tooltip--top .us-tooltip__note .us-tooltip__arrow:after{width:0;height:0;border-top:10px solid #fff;border-right:10px solid transparent;border-left:10px solid transparent;bottom:1px}}.us-tooltip--bottom .us-tooltip__note{top:32px}@media screen and (min-width: 768px){.us-tooltip--bottom .us-tooltip__note .us-tooltip__arrow{width:0;height:0;border-right:10px solid transparent;border-bottom:10px solid #008fe9;border-left:10px solid transparent;top:-10px}.us-tooltip--bottom .us-tooltip__note .us-tooltip__arrow:after{width:0;height:0;border-right:10px solid transparent;border-bottom:10px solid #fff;border-left:10px solid transparent;top:1px}}.us-tooltip--left .us-tooltip__note{left:-315px}@media screen and (min-width: 768px){.us-tooltip--left .us-tooltip__note .us-tooltip__arrow{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #008fe9;right:-10px}.us-tooltip--left .us-tooltip__note .us-tooltip__arrow:after{width:0;height:0;border-top:10px solid transparent;border-bottom:10px solid transparent;border-left:10px solid #fff;right:1px}}.us-tooltip--right .us-tooltip__note{right:-315px}@media screen and (min-width: 768px){.us-tooltip--right .us-tooltip__note .us-tooltip__arrow{width:0;height:0;border-top:10px solid transparent;border-right:10px solid #008fe9;border-bottom:10px solid transparent;left:-10px}.us-tooltip--right .us-tooltip__note .us-tooltip__arrow:after{width:0;height:0;border-top:10px solid transparent;border-right:10px solid #fff;border-bottom:10px solid transparent;left:1px}}.us-usp{display:inline-block;padding:0 10px;font-weight:bold;line-height:1.618;color:#fff;text-align:center;background-color:#008fe9}.us-usp--cyan{background-color:#99e2ff;color:#1c1f4e}.us-usp--typecyan{background-color:#008fe9}.us-usp--blue{background-color:#002396}.us-usp--navy{background-color:#1c1f4e}.us-usp--red{background-color:#d64226}.us-usp--green{background-color:#2aaa5b}.us-usp--purple{background-color:#9c55b8}.us-usp--orange{background-color:#f27930}.us-usp--yellow{background-color:#ffd32f;color:#2f353a}.us-usp--typegrey{background-color:#2f353a}.us-usp--annotated{font-weight:normal;color:#2f353a;text-align:left;background-color:#f4f5f6}.us-usp--annotated .us-usp{margin-right:10px;margin-left:-10px}.us-progress{position:relative;z-index:4;background-color:#1c1f4e}.us-progress__nav{list-style:none;counter-reset:number-counter}.us-progress__item{position:relative;float:left;line-height:1.5em;counter-increment:number-counter}@media screen and (min-width: 768px){.us-progress__item{margin-right:30px}}.us-progress__link{position:relative;display:block;padding-top:.5em;padding-bottom:.5em}@media screen and (min-width: 768px){.us-progress__link{padding-top:1em;padding-bottom:1em}}.us-progress__link:before{position:relative;display:inline-block;width:1.5em;height:1.5em;margin-right:10px;font-weight:700;color:#1c1f4e;text-align:center;border-radius:50%;content:counter(number-counter);transition:background-color .3s}.us-progress__link--next{color:#8e8fa7}.us-progress__link--next:before{background-color:#8e8fa7}.us-progress__link--current{color:#fff}.us-progress__link--current:before{background-color:#fff}.us-progress__link--complete{color:#99e2ff}.us-progress__link--complete:visited{color:#99e2ff}.us-progress__link--complete:focus{color:#fff}.us-progress__link--complete:hover{color:#fff}.us-progress__link--complete:active{color:#99e2ff}.us-progress__link--complete:before{background-color:#99e2ff}.us-progress__link--complete:hover:before,.us-progress__link--complete:active:before{background-color:#fff}.us-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1002;background:rgba(0,35,150,0.5);opacity:0;visibility:hidden}.us-backdrop--animated{transition:opacity 0.5s}.us-backdrop--visible{visibility:visible}.us-backdrop--active{opacity:1}.us-reminder{background-color:#e4f8ff;border:1px solid #008fe9;max-width:950px}@media screen and (max-width: 767px){.us-reminder.us-container{padding:0}}.us-reminder-title{background-color:#fff;padding:15px;font-weight:bold}.us-reminder-content{padding:15px 0}.us-reminder-content p{margin-bottom:15px}.us-tabs--page-nav{display:none;background-color:#f4f5f6}@media screen and (min-width: 768px){.us-tabs--page-nav{display:block}}.us-tabs__inner{width:100%;max-width:1200px;margin:0 auto}.us-tabs__links{display:-ms-flexbox;display:flex;padding:0;margin:0;list-style:none;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:nowrap;flex-wrap:nowrap;-ms-flex-align:stretch;align-items:stretch}.us-tabs__links-item{position:relative;display:-ms-flexbox;display:flex;max-width:180px;margin:0;text-align:center;cursor:pointer;border-right:1px solid #fff;transition:background-color .2s;-ms-flex-positive:1;flex-grow:1;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;font-size:.875em;line-height:1.25em}@media screen and (min-width: 992px){.us-tabs__links-item{font-size:1em;line-height:1.25em}}.us-tabs__links-item a{display:block;color:#84909a;transition:color .2s;padding:14px 1em 12px}.us-tabs__links-item:last-child{border:0}.us-tabs__links-item::before{position:absolute;top:0;left:0;width:100%;border-top:5px solid #008fe9;content:"";opacity:0;transition:opacity .2s}.us-tabs__links-item:hover{background-color:#f8f9f9}.us-tabs__links-item:hover a{color:#008fe9}.us-tabs__links-item:hover::before{opacity:1}.us-tabs__links-item--active{background-color:#fff}.us-tabs__links-item--active a{color:#008fe9}.us-tabs__links-item--active::before{opacity:1}.us-table-toolbar{background:#f4f5f6;padding:15px;border-bottom:1px solid #e9ebed;margin:0 auto 15px}@media screen and (min-width: 768px){.us-table-toolbar{display:-ms-flexbox;display:flex;background-color:transparent;border-bottom:0;padding:30px 15px;-ms-flex-direction:row;flex-direction:row}}.us-table-toolbar__wrapper{display:-ms-flexbox;display:flex;-ms-flex:1 1;flex:1 1}.us-table-toolbar__wrapper:first-child{margin-bottom:15px}@media screen and (min-width: 768px){.us-table-toolbar__wrapper:first-child{margin-bottom:0}}.us-table-toolbar__sort{width:100%}@media screen and (min-width: 768px){.us-table-toolbar__sort{width:auto}}.us-table-toolbar__sort select{width:100%}@media screen and (min-width: 768px){.us-table-toolbar__sort select{width:auto}}.us-table-toolbar__wrapper--right{-ms-flex-pack:end;justify-content:flex-end}.us-table-toolbar__heading{font-size:18px}.us-comp-banner{width:100%;background-color:#99e2ff;padding:15px;text-align:center;font-size:14px;line-height:20px}.us-comp-banner__inner{width:100%;max-width:1200px;margin:0 auto}.us-comp-banner__text:last-child{padding:0;margin:0}.us-promo-banner{width:100%;padding:1.7em;background-color:#1c1f4e}.us-promo-banner__inner{display:-ms-flexbox;display:flex;width:100%;max-width:800px;margin:0 auto;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}@media screen and (min-width: 992px){.us-promo-banner__inner{max-width:1200px;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}}.us-promo-banner__list{display:-ms-flexbox;display:flex;width:100%;padding:0;margin:1em 0 1.2em 0;-ms-flex-align:start;align-items:flex-start;-ms-flex-direction:column;flex-direction:column;-ms-flex-pack:center;justify-content:center}@media screen and (min-width: 992px){.us-promo-banner__list{width:70%;-ms-flex-direction:row;flex-direction:row;-ms-flex-positive:1;flex-grow:1}}.us-promo-banner__list-item{display:-ms-flexbox;display:flex;width:100%;margin:15px 0 0 0;-ms-flex-align:center;align-items:center;-ms-flex-direction:row;flex-direction:row;-ms-flex-pack:start;justify-content:flex-start}@media screen and (min-width: 992px){.us-promo-banner__list-item{margin:0}}.us-promo-banner__list-item:first-child{margin:0}.us-promo-banner__title{font-size:1.2em;font-weight:700;color:#fff}@media screen and (min-width: 992px){.us-promo-banner__title{width:100%;font-size:1.5em}}.us-promo-banner__circle{display:inline-block;width:36px;height:36px;min-width:36px;min-height:36px;margin-right:10px;line-height:30px;color:#fff;text-align:center;background:#2aaa5b;border:solid 3px #fff;border-radius:50%;-ms-flex-item-align:start;align-self:flex-start}.us-promo-banner__text{padding:5px 10px 0 10px;color:#fff;-ms-flex-positive:1;flex-grow:1;-ms-flex-item-align:start;align-self:flex-start}.us-promo-banner__button{margin:0 auto}@media screen and (min-width: 992px){.us-promo-banner__button{width:auto;-ms-flex-positive:1;flex-grow:1}}.us-promo-banner__button a{width:100%}.us-ct-row{position:relative;display:block;margin-bottom:15px;color:#1c1f4e;background:#fff;border:1px solid #e9ebed;border-radius:5px}.us-ct-row--details-toggle{border-bottom-width:5px}.us-ct-row:hover{cursor:pointer}.us-ct-row__title{display:none;width:100%;padding:15px;border-bottom:1px solid #e9ebed}@media screen and (min-width: 992px){.us-ct-row__title{display:-ms-flexbox;display:flex}}.us-ct-row__title-text{margin:0 15px 0 0;font-weight:bold}.us-ct-row__product{position:relative;border-bottom:1px solid #e9ebed}@media screen and (min-width: 992px){.us-ct-row__product{display:-ms-flexbox;display:flex}}.us-ct-row__image{max-width:150px}@media screen and (min-width: 992px){.us-ct-row__image{max-width:100%;min-width:100%}}.us-ct-row__title--mobile{margin-top:10px}.us-ct-row__usp--mobile{display:-ms-flexbox;display:flex;margin-top:10px}@media screen and (min-width: 992px){.us-ct-row__title--mobile,.us-ct-row__usp--mobile{display:none}}.us-ct-row__col{padding:15px;border-top:1px solid #e9ebed}@media screen and (min-width: 992px){.us-ct-row__col{border-right:1px solid #e9ebed;text-align:center;border-top:0}}.us-ct-row__col--stretch{display:-ms-flexbox;display:flex;-ms-flex-item-align:stretch;align-self:stretch;-ms-flex-pack:justify;justify-content:space-between}@media screen and (min-width: 992px){.us-ct-row__col--stretch{display:block;-ms-flex:1 1;flex:1 1}}.us-ct-row__col--apply{position:absolute;top:0;right:0;border-top:0;width:calc(100% - 165px);max-width:200px;text-align:center}@media screen and (min-width: 768px){.us-ct-row__col--apply{max-width:250px}}@media screen and (min-width: 992px){.us-ct-row__col--apply{border-right:0;position:relative;-ms-flex:0 0 160px;flex:0 0 160px}}.us-ct-row__col--image{border-top:0}@media screen and (min-width: 992px){.us-ct-row__col--image{-ms-flex:0 0 150px;flex:0 0 150px}}@media screen and (min-width: 992px){.us-ct-row__col--image img{width:120px;height:auto}}.us-ct-row__more-info{display:inline-block;margin-top:10px;color:#008fe9;text-decoration:underline;white-space:nowrap;cursor:pointer}.us-ct-row__rep-ex{display:block;text-align:center;border-bottom:1px solid #e9ebed;padding:10px;font-weight:bold;width:100%}@media screen and (min-width: 600px){.us-ct-row__rep-ex{padding:10px 80px}}.us-ct-row__key-details-toggle{display:block;width:100%;padding:10px;font-size:16px;font-weight:700;color:#0c72bf;text-align:center;cursor:pointer;background:none;border:0;outline:0}.us-ct-row__key-details-chevron{width:20px;height:20px;padding:3px;margin-left:4px;border:1px solid;border-radius:5px;transform:translateY(5px) rotate(90deg);stroke-width:10px;transform-origin:center;fill:#0c72bf}.us-ct-row__key-details-toggle-open .us-ct-row__key-details-chevron{transform:translateY(5px) rotate(-90deg)}.us-ct-row__key-details-info{padding:0 15px;margin-top:20px;-ms-flex-pack:space-evenly;justify-content:space-evenly}@media screen and (min-width: 992px){.us-ct-row__key-details-info{display:-ms-flexbox;display:flex}}.us-ct-row__key-details-col{padding:0 15px;-ms-flex:1 1;flex:1 1}.us-ct-row__key-details-ul{padding:0 15px 0 20px}.us-ct-row__criteria{padding:0;list-style-type:none}.us-ct-row__criteria-li{position:relative;padding-left:30px}.us-ct-row__criteria-tick{position:absolute;top:4px;left:0}.us-ct-row__criteria-additional{font-size:14px}.us-ct-row__name{-ms-flex-order:2;order:2}.us-ct-row__value{font-size:14px;-ms-flex-order:1;order:1}.us-ct-row__eligibility{display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;width:100%;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;padding:0 0 10px 0}.us-ct-row__eligibility-score{font-weight:700}.us-ct-row__eligibility-link{white-space:nowrap;cursor:pointer;color:#008fe9;border-bottom:1px solid #008fe9}.us-ct-row__eligibility-progress{height:15px;width:100%;background:#e9ebed;margin:0 0 5px 0;position:relative}.us-ct-row__eligibility-bar{height:inherit;position:absolute;top:0;left:0}.us-calculator{position:relative;display:block;width:100%}.us-calculator__input{display:inline-table;width:calc(100% - 163px);margin-right:10px}.us-article{padding-top:1em;padding-bottom:1em;border-bottom:1px solid #e9ebed}@media screen and (min-width: 768px){.us-article{padding-top:2em;padding-bottom:2em}}.us-article__link{display:block;-webkit-tap-highlight-color:transparent}.us-article__link:hover .us-article__title{text-decoration:underline}.us-article__link,.us-article__link:hover,.us-article__link:visited{color:inherit}.us-article__title{font-size:1.125em;line-height:1.25em}@media screen and (min-width: 768px){.us-article__title{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Arial,sans-serif;font-weight:700;font-size:1.5em;line-height:1.25em}}.us-article__meta,.us-article__description{color:#65717b}.us-article__meta{font-size:.875em}.us-article__description{margin-bottom:1em}@media screen and (min-width: 768px){.us-article__description{font-size:1.125em}}.us-article__image{border:1px solid #e9ebed}.us-news-item,.us-guide-item,.us-more-item{margin-bottom:1em}.us-news-item:hover .us-news-item-image,.us-guide-item:hover .us-news-item-image,.us-more-item:hover .us-news-item-image,.us-news-item:hover .us-guide-item-image,.us-guide-item:hover .us-guide-item-image,.us-more-item:hover .us-guide-item-image{opacity:.8}.us-news-item:hover .us-news-item-readmore:after,.us-guide-item:hover .us-news-item-readmore:after,.us-more-item:hover .us-news-item-readmore:after,.us-news-item:hover .us-guide-item-readmore:after,.us-guide-item:hover .us-guide-item-readmore:after,.us-more-item:hover .us-guide-item-readmore:after{left:.5em}@media screen and (max-width: 599px){.us-article-group .us-news-item,.us-article-group .us-guide-item,.us-article-group .us-more-item{padding:0;margin-bottom:0}}.us-news-item-link,.us-guide-item-link,.us-more-item-link{position:relative;display:block;overflow:hidden;text-decoration:none;background-color:#fff;transition:border-color 333ms, background-color 333ms}@media screen and (min-width: 600px){.us-news-item-link,.us-guide-item-link,.us-more-item-link{padding-bottom:2.1875em}}@media screen and (max-width: 599px){.us-article-group .us-news-item-link,.us-article-group .us-guide-item-link,.us-article-group .us-more-item-link{border-top-width:0;border-radius:0}}.us-news-item-title,.us-guide-item-title{padding:9px;margin:0;color:#1c1f4e}.us-news-item-snippet,.us-guide-item-description{font-size:14px;font-size:.875rem;line-height:1.618;padding-top:8.144px;padding-top:.509rem;margin-bottom:17.744px;margin-bottom:1.109rem;padding:0 9px;color:#1c1f4e}.us-news-item-image-container,.us-guide-item-image-container{display:none}@media screen and (min-width: 600px){.us-news-item-image-container,.us-guide-item-image-container{display:block}}.us-news-item-image,.us-guide-item-image{width:100%;height:auto;border-radius:.3125em .3125em 0 0;transition:opacity 333ms}.background.us-news-item-image,.background.us-guide-item-image{height:128px;background-position:center center;background-repeat:no-repeat;background-size:cover}.us-news-item-readmorelink,.us-guide-item-readmorelink{color:#008fe9;border-bottom:1px solid #008fe9}.us-news-item-readmorelink:visited,.us-guide-item-readmorelink:visited{color:#008fe9}.us-news-item-readmorelink:hover,.us-guide-item-readmorelink:hover{color:#008fe9}.us-news-item-readmorelink:active,.us-guide-item-readmorelink:active{color:#008fe9}.us-news-item-readmore,.us-guide-item-readmore{position:absolute;bottom:0;display:none;padding:9px;color:#008fe9;white-space:nowrap}@media screen and (min-width: 600px){.us-news-item-readmore,.us-guide-item-readmore{display:block}}@media screen and (max-width: 599px){.us-article-group{margin-bottom:1em;overflow:hidden}.us-article-group .us-news-item:first-child .us-news-item-link,.us-article-group .us-guide-item:first-child .us-news-item-link,.us-article-group .us-more-item:first-child .us-news-item-link,.us-article-group .us-news-item:first-child .us-guide-item-link,.us-article-group .us-guide-item:first-child .us-guide-item-link,.us-article-group .us-more-item:first-child .us-guide-item-link,.us-article-group .us-news-item:first-child .us-more-item-link,.us-article-group .us-guide-item:first-child .us-more-item-link,.us-article-group .us-more-item:first-child .us-more-item-link{border-top-width:1px;border-bottom-width:1px;border-radius:.3125em .3125em 0 0}.us-article-group .us-news-item:last-child .us-news-item-link,.us-article-group .us-guide-item:last-child .us-news-item-link,.us-article-group .us-more-item:last-child .us-news-item-link,.us-article-group .us-news-item:last-child .us-guide-item-link,.us-article-group .us-guide-item:last-child .us-guide-item-link,.us-article-group .us-more-item:last-child .us-guide-item-link,.us-article-group .us-news-item:last-child .us-more-item-link,.us-article-group .us-guide-item:last-child .us-more-item-link,.us-article-group .us-more-item:last-child .us-more-item-link{border-bottom-width:1px;border-radius:0 0 .3125em .3125em}}.us-news-meta{padding-right:9px;padding-left:9px;overflow:hidden}.us-news-meta .category,.us-news-meta .date{padding-top:.25em;padding-bottom:.25em;font-size:.8125em;font-weight:bold;color:#1c1f4e}@media screen and (min-width: 1200px){.us-news-meta .category,.us-news-meta .date{font-size:.875em}}.us-news-meta .date{display:block;float:right}.us-news-meta .category{display:block;float:left}.us-more-item-title{display:block;padding:9px;color:#008fe9}.us-related{margin-bottom:30px}.us-related__item{margin-bottom:0}.us-related__title{font-size:1.125em}.us-related__item-link{color:#65717b;display:block;padding-top:.5em;padding-bottom:.5em;border-bottom:1px solid #b0b8bf;transition:color .3s, border-color .3s}.us-related__item-link:visited{color:#65717b}.us-related__item-link:hover{color:#008fe9}.us-related__item-link:active{color:#65717b}.us-related__item-link--more{color:#2f353a;padding-right:.5em;text-align:right;background-color:#e4f8ff}.us-related__item-link--more:visited{color:#2f353a}.us-related__item-link--more:hover{color:#008fe9}.us-related__item-link--more:active{color:#2f353a}.us-related__item-title{vertical-align:middle}@media screen and (min-width: 992px){.us-related__item-title{display:inline-block;width:calc(100% - 90px);margin-left:7.5px}}@media screen and (min-width: 992px){.us-related__item-image{display:inline-block;width:70px;height:70px;vertical-align:middle;background-position:center center;background-repeat:no-repeat;background-size:100%}}.us-list--reset{list-style:none}.us-blocked{display:block}.us-trailered{margin-bottom:1em}.us-trailered--large{margin-bottom:1.5em}.us-trailered--small{margin-bottom:.5em}.us-align--left{text-align:left}.us-align--right{text-align:right}.us-align--center{text-align:center}.us-color--blue{color:#002396}.us-background-color--blue{background:#002396}.us-color--navy{color:#1c1f4e}.us-background-color--navy{background:#1c1f4e}.us-color--typecyan{color:#008fe9}.us-background-color--typecyan{background:#008fe9}.us-color--cyan{color:#99e2ff}.us-background-color--cyan{background:#99e2ff}.us-color--red{color:#d64226}.us-background-color--red{background:#d64226}.us-color--green{color:#2aaa5b}.us-background-color--green{background:#2aaa5b}.us-color--typegrey{color:#2f353a}.us-background-color--typegrey{background:#2f353a}.us-color--typegrey-2{color:#65717b}.us-background-color--typegrey-2{background:#65717b}.us-color--inputgrey{color:#84909a}.us-background-color--inputgrey{background:#84909a}.us-color--bordergrey{color:#b0b8bf}.us-background-color--bordergrey{background:#b0b8bf}.us-color--keylinegrey{color:#e9ebed}.us-background-color--keylinegrey{background:#e9ebed}.us-reset--padding{padding:0}.us-reset--margin{margin:0}.us-margin-top{margin-top:1em}.us-padding-top{padding-top:1em}.us-margin-top--small{margin-top:.5em}.us-padding-top--small{padding-top:.5em}.us-margin-top--large{margin-top:1.5em}.us-padding-top--large{padding-top:1.5em}.us-margin-right{margin-right:1em}.us-padding-right{padding-right:1em}.us-margin-right--small{margin-right:.5em}.us-padding-right--small{padding-right:.5em}.us-margin-right--large{margin-right:1.5em}.us-padding-right--large{padding-right:1.5em}.us-margin-bottom{margin-bottom:1em}.us-padding-bottom{padding-bottom:1em}.us-margin-bottom--small{margin-bottom:.5em}.us-padding-bottom--small{padding-bottom:.5em}.us-margin-bottom--large{margin-bottom:1.5em}.us-padding-bottom--large{padding-bottom:1.5em}.us-margin-left{margin-left:1em}.us-padding-left{padding-left:1em}.us-margin-left--small{margin-left:.5em}.us-padding-left--small{padding-left:.5em}.us-margin-left--large{margin-left:1.5em}.us-padding-left--large{padding-left:1.5em}.us-img--full{display:block;height:auto;max-width:100%;min-width:100%}.us-img--left{margin-right:1em;margin-bottom:1em}.us-img--right{margin-bottom:1em;margin-left:1em}@media screen and (min-width: 768px){.us-grid-md--push-1{padding-left:8.33333%}}@media screen and (min-width: 992px){.us-grid-lg--push-1{padding-left:8.33333%}}@media screen and (min-width: 768px){.us-grid-md--push-2{padding-left:16.66667%}}@media screen and (min-width: 992px){.us-grid-lg--push-2{padding-left:16.66667%}}@media screen and (min-width: 768px){.us-grid-md--push-3{padding-left:25%}}@media screen and (min-width: 992px){.us-grid-lg--push-3{padding-left:25%}}@media screen and (min-width: 768px){.us-grid-md--push-4{padding-left:33.33333%}}@media screen and (min-width: 992px){.us-grid-lg--push-4{padding-left:33.33333%}}@media screen and (max-width: 599px){.us-mobile--hidden{display:none}}.us-mobile--block{display:none}@media screen and (max-width: 599px){.us-mobile--block{display:block}}.us-mobile--inline-block{display:none}@media screen and (max-width: 599px){.us-mobile--inline-block{display:inline-block}}.us-mobile--inline{display:none}@media screen and (max-width: 599px){.us-mobile--inline{display:inline}}@media screen and (min-width: 600px){.us-sm-tablet--hidden{display:none}}.us-sm-tablet--block{display:none}@media screen and (min-width: 600px){.us-sm-tablet--block{display:block}}.us-sm-tablet--inline-block{display:none}@media screen and (min-width: 600px){.us-sm-tablet--inline-block{display:inline-block}}.us-sm-tablet--inline{display:none}@media screen and (min-width: 600px){.us-sm-tablet--inline{display:inline}}@media screen and (min-width: 768px){.us-tablet--hidden{display:none}}.us-tablet--block{display:none}@media screen and (min-width: 768px){.us-tablet--block{display:block}}.us-tablet--inline-block{display:none}@media screen and (min-width: 768px){.us-tablet--inline-block{display:inline-block}}.us-tablet--inline{display:none}@media screen and (min-width: 768px){.us-tablet--inline{display:inline}}@media screen and (min-width: 992px){.us-desktop--hidden{display:none}}.us-desktop--block{display:none}@media screen and (min-width: 992px){.us-desktop--block{display:block}}.us-desktop--inline-block{display:none}@media screen and (min-width: 992px){.us-desktop--inline-block{display:inline-block}}.us-desktop--inline{display:none}@media screen and (min-width: 992px){.us-desktop--inline{display:inline}}@media screen and (min-width: 1200px){.us-lg-desktop--hidden{display:none}}.us-lg-desktop--block{display:none}@media screen and (min-width: 1200px){.us-lg-desktop--block{display:block}}.us-lg-desktop--inline-block{display:none}@media screen and (min-width: 1200px){.us-lg-desktop--inline-block{display:inline-block}}.us-lg-desktop--inline{display:none}@media screen and (min-width: 1200px){.us-lg-desktop--inline{display:inline}}
|
data/dist/ustyle.js
CHANGED
|
@@ -483,7 +483,7 @@ window.Tabs = (function(Utils) {
|
|
|
483
483
|
};
|
|
484
484
|
|
|
485
485
|
var getSelector = function(clicked) {
|
|
486
|
-
return clicked.getAttribute("data-target") || clicked.getAttribute("href");
|
|
486
|
+
if(clicked) return clicked.getAttribute("data-target") || clicked.getAttribute("href");
|
|
487
487
|
};
|
|
488
488
|
|
|
489
489
|
return Tabs;
|
|
@@ -565,9 +565,3 @@ window.ClassToggler = (function(Utils) {
|
|
|
565
565
|
return ClassToggler;
|
|
566
566
|
|
|
567
567
|
})(this.Utils);
|
|
568
|
-
|
|
569
|
-
window.RadioToggle = function() {
|
|
570
|
-
var message = "RadioToggle is now deprecated";
|
|
571
|
-
if (window.Raven) window.Raven.captureMessage(message);
|
|
572
|
-
console.warn(message);
|
|
573
|
-
};
|
data/dist/ustyle.json
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"pages":[{"name":"Framework","page":"index.html","template":"styleguide/templates/simple.tpl","section":"brand","content":"<h2 id=\"we-believe-in-simplicity-\">We believe in simplicity.</h2>\n<p>That’s why we’ve made these guidelines really simple. They inform the way we look, feel, behave and sound as a company. They help ensure we remain consistent, impactful and recognisable across all of our communications.</p>\n<h3 id=\"our-values\">Our values</h3>\n<ul>\n<li>Fairness</li>\n<li>Knowledge</li>\n<li>Clarity</li>\n<li>Confidence</li>\n<li>Possibilities</li>\n</ul>\n<h3 id=\"our-mission\">Our mission</h3>\n<p>Using our expansive market knowledge and customer insight, we want to provide a simple, relevant service allowing customers to switch with minimal hassle.</p>\n<h3 id=\"our-ambition\">Our ambition</h3>\n<p>To be the UK’s leading comparison site for all consumers who wish to make their money go further.</p>\n<h3 id=\"our-vision\">Our vision</h3>\n<p>We are the comparison service of choice – because we make it relevant, personal and simple to use for consumers and partners.</p>\n<h3 id=\"our-benefit\">Our benefit</h3>\n<p>We help our customers feel like life just keeps on switching for the better, allowing their time and money to be spent on what really matters.</p>\n<h3 id=\"our-personality\">Our personality</h3>\n<ul>\n<li>Expert</li>\n<li>Frank</li>\n<li>Connected</li>\n<li>Human</li>\n<li>Advisory</li>\n</ul>\n<h2 id=\"brand-positioning\">Brand positioning</h2>\n<h3 id=\"intuitive-and-focused\">Intuitive and focused</h3>\n<p>We are connected to the individual needs of our customers. In fact, we work to understand them better than anyone. We use masses of customer data, constantly capturing more and more to continually improve the relevance of our advice. Add that to our commitment to ensure ours is the most simple and comprehensive switching service available, and our customers can find clarity in a confusing marketplace and build confidence in our brand.</p>\n<h3 id=\"authoritative-and-directional\">Authoritative and directional</h3>\n<p>We know what we’re talking about because we’re experts in what we do. We can demonstrate an unparalleled in-depth and connected understanding of our customers, the economy, household finances and the industries in which we operate. We’re always frank. We fight for what we believe is fair. And we do what we believe is right to build respect and trust.</p>\n<h3 id=\"personal-and-engaging\">Personal and engaging</h3>\n<p>We are a human brand that talks to our customers, not preaches. We treat them like knowledgeable peers. Always consistent in our tone, look and customer experience across all touch points. To make things easy to understand, information is visualised and brought to life, enabling our customers to see how they can save money or get better value for money.</p>\n<h3 id=\"experimental-and-bold\">Experimental and bold</h3>\n<p>We are pro-active, always adapting and pre-empting changes in customer mood and wider markets in which we exist. It lets our customers connect and interact with us with confidence.And we are proud of our BETA mindset. We stay agile, but we never look unpredictably experimental. Rather, we are open, current, honest, committed and consistent with our advice</p>\n","subNav":[]},{"name":"Introduction","page":"index.html","template":"styleguide/templates/simple.tpl","section":"pattern-library","content":"<p>\n Our pattern library comes as an easily distributed package, ready to use in multiple programming environments. It contains our basic CSS components and correct usage, as well as JavaScript components that are widely used across the website.\n</p>\n<a class=\"us-btn us-btn--small\" href=\"https://github.com/uswitch/ustyle\">View on GitHub</a>\n<div class=\"us-content-group mobile-bordered\">\n <h2 class=\"trailered\">Distribution methods</h2>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6 trailered\">\n <img src=\"/images/ruby-logo.png\" alt=\"Ruby logo\" class=\"distro-image\">\n <h3>Ruby gem</h3>\n <p>uStyle was initially created as a gem. Some of the Sass functions rely on Ruby to run. You can install it via any Gemfile and it will install the required dependencies.</p>\n <pre><code class=\"ruby\">gem 'ustyle', git: "git@github.com:uswitch/ustyle.git"</code></pre>\n </div>\n <div class=\"us-col-md-6 trailered\">\n <img src=\"/images/bower-logo.png\" alt=\"Bower logo\" class=\"distro-image\">\n <h3>Bower package</h3>\n <p>Install it as a bower package. This will pull down the original <code>.scss</code> files and compiled static CSS + JS.</p>\n <pre><code class=\"javascript\">\n "dependencies": {\n "ustyle": "git@github.com:uswitch/ustyle.git#~0.19.1"\n }\n </code></pre>\n </div>\n </div>\n</div>\n<div class=\"us-content-group mobile-bordered\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6 trailered\">\n <img src=\"/images/cloudfront-logo.png\" alt=\"Cloudfront logo\" class=\"distro-image\">\n <h3>Cloudfront</h3>\n <p>Every time uStyle gets a new version, the version gets updated across our Cloudfront distributions.\n <pre><code class=\"html\">\n <!-- get latest -->\n <link href='//assets0.uswitch.com/s3/uswitch-assets-eu/ustyle/ustyle-latest.css' media='all' rel='stylesheet' type='text/css' />\n <!-- get versioned -->\n <link href='//assets0.uswitch.com/s3/uswitch-assets-eu/ustyle/VERSION/ustyle-latest.css' media='all' rel='stylesheet' type='text/css' />\n </code></pre>\n </p></div>\n <div class=\"us-col-md-6\">\n <img src=\"/images/npm-logo.png\" alt=\"NPM logo\" class=\"distro-image\">\n <h3>NPM Package</h3>\n <pre><code class=\"javascript\">\n "devDependencies": {\n "ustyle": "git@github.com:uswitch/ustyle.git#~0.19.1"\n }\n </code></pre>\n </div>\n </div>\n</div>\n<div class=\"us-content-group mobile-bordered\">\n <h2>Browser support</h2>\n <p>We use <a href=\"https://github.com/postcss/autoprefixer\">Autoprefixer + Browserlist</a> to decide what vendor prefixes to apply to our <code>Sass</code> files. We have a slightly wider browser support than the default (<a href=\"https://github.com/ai/browserslist#browserslist-\">here</a>). Currently we support all the way to IE9.</p>\n <p>Below is what we support. Each line is the minimum version or % use based on CanIUse metrics</p>\n <table class=\"pure-table pure-table-bordered\">\n <thead>\n <tr>\n <th>Browser</th>\n <th>Minimum version supported</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Safari, Chrome</td>\n <td>Last 5 versions</td>\n </tr>\n <tr>\n <td>Firefox</td>\n <td>ESR</td>\n </tr>\n <tr>\n <td>Opera</td>\n <td>18</td>\n </tr>\n <tr>\n <td>Internet Explorer</td>\n <td>9</td>\n </tr>\n <tr>\n <td>Global usage</td>\n <td>> 1%</td>\n </tr>\n </tbody>\n </table>\n</div>\n<div class=\"us-content-group mobile-bordered\">\n <h2>Installation</h2>\n <p>See our <a href=\"https://github.com/uswitch/ustyle\">GitHub</a> for documentation on installing this across applications.</p>\n</div>\n","subNav":[]},{"name":"uSwitch living styleguide","page":"index.html","template":"styleguide/templates/simple.tpl","section":"","content":"<p>\n The sum of our efforts towards style guidelines, a pattern library and an automated front-end. Made with ❤ at <a href=\"https://www.uswitch.com\" target=\"_blank\"><strong class=\"us-color--blue\">uSwitch.com</strong></a>\n</p>\n<div class=\"us-content-group mobile-bordered\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <h3>Design guidelines</h3>\n <p>uStyle includes documentation and guidelines relating to our core design principles. It is where we document everything that happens within our brand, UX and front-end development.</p>\n </div>\n <div class=\"us-col-md-6\">\n <h3>Automated development</h3>\n <p>uStyle is a gem, a bower package, a npm package and static assets. This allows our team setup to choose how they wish to implement the core front-end of uSwitch. We've tried to be as accessible as possible.</p>\n </div>\n </div>\n</div>\n<div class=\"us-content-group mobile-bordered\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <h3>Pattern library</h3>\n <p>At its core, uStyle is a pattern library. It contains all current components and elements of the uSwitch UI. These are documented in the <a href=\"/pattern-library/\">pattern library</a> section.</p>\n </div>\n <div class=\"us-col-md-6\">\n <h3>Designer + developer happiness</h3>\n <p>Delivering designer + developer happiness is very important to us. uStyle provides a base for all our design and development work and allows our designers and developers to focus on the things that matter, whilst making their lives easier when prototyping.</p>\n </div>\n </div>\n</div>\n<div class=\"us-content-group\">\n <h2>The logo</h2>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-2\">\n <svg class=\"us-icon--large us-icon--ustyle\" role=\"img\">\n <use xlink:href=\"/images/icons.svg#icon-ustyle\"/>\n </svg>\n </div>\n <div class=\"us-col-md-10\">\n <p>There is no reason for this logo other than it's funny and unicorns are all the rage just now.</p>\n\n <p><strong>Disclaimer:</strong> uSwitch is not a unicorn company.\n </p></div>\n </div>\n</div>\n<div class=\"us-content-group\">\n <h2>We're looking for great talent</h2>\n <p>Want to help us build more things like uStyle? We're constantly trying to deliver a better experience for customers and developers, and we're looking for passionate people to join our team.</p>\n <p>Fire us an email at <a href=\"mailto:jobs+developer@uswitch.com\">jobs@uswitch.com</a> with your CV and tell us a bit about yourself.</p>\n</div>\n","subNav":[]},{"name":"Imagery","page":"index.html","template":"styleguide/templates/simple.tpl","section":"design","content":"\n\n<div class=\"us-content-group\" id=\"how-to-select-an-image\">\n <h2>How to select an image</h2>\n <p>We use imagery to relate and engage with our customers, to support our message, and to aid in understanding. These guidelines are here to help you chose images that reflect our brand values and personality. If you’re questioning whether an image is suitable, ask a designer – they’ll be happy to help.</p>\n\n <h3>Principles</h3>\n\n <h4>Focused</h4>\n <p>Images are more interesting when they have a point of focus.</p>\n\n <h4>Contextual</h4>\n <p>People and objects should be properly contextualised. Avoid cropping an image so severely that it’s setting is lost.</p>\n\n <h4>Local</h4>\n <p>Make sure clothing, architectural features, light and style have a UK feel.</p>\n\n <h3>Mood</h3>\n <p>Relatable, genuine, optimistic, affirmative.</p>\n\n <h4>Colour</h4>\n <p>Our preference is for natural light where possible. Colours should be warm, vibrant and saturated where possible – avoid images that are “washed out”. Do not use dramatic filters, colourisation effects, or black and white.</p>\n\n <h4>People and lifestyle</h4>\n <p>Lifestyle shots should be reportage in style, documenting people in their day-to-day lives. Subjects should be unposed, and within their natural environment. People should never be cut out or appear over solid backgrounds. Images should be relatable and feature real, everyday people. Avoid fake or forced emotions as it can seem ingenuine. A range of gender, race, and age should be represented.</p>\n\n <h4>Products and objects</h4>\n <p>Object focused imagery may be cut out and appear over our brand colours or on white. When cut out, the whole object must be appear – edges must never be cut off.</p>\n\n <p>When objects aren’t cut out, they should be realistic in their setting and not appear staged. Images should be straightforward, not overly metaphor based, and should not appear noticeably manipulated.</p>\n\n <h4>Illustrations</h4>\n <p>Illustrations may be used to add understanding and delight to an experience.</p>\n\n <p>Our illustrative style is simple and geometric. Our brand colours should be used predominantly, although variations in shades and saturation may be necessarily. Illustrations should generally appear over solid colour or white backgrounds. Avoid using illustrations that are clichéd or overly metaphor based.</p>\n\n <h4>Generating new photography</h4>\n <p>We generally try to avoid commissioning photography unless completely necessary as it can prove to be extremely expensive. Before commissioning new photography, carefully consider:</p>\n\n <ol>\n <li>Do we already have what’s needed in our image library?</li>\n <li>If not, can you find it – in stock, from a press office or other legitimate source?</li>\n </ol>\n\n <p>Where we do shoot our own (product shots, staff portraits etc being examples of where this may be necessary) we follow these guidelines.</p>\n</div>\n\n<div class=\"us-content-group\" id=\"cropping\">\n <h2>Cropping</h2>\n <p>Images will often need to be cropped to fit various size requirements. When cropped, images should still follow all guidelines.</p>\n</div>\n\n<div class=\"us-content-group\" id=\"where-to-get-images\">\n <h2>Where to get images</h2>\n <p>The following sites are our preferred resources as images are royalty-free, reasonably priced, and generally good quality. There are shared uSwitch logins for these sites – get in touch with the Service Desk if you don't have access.</p>\n\n <ol>\n <li><a href=\"http://www.shutterstock.com\">www.shutterstock.com</a></li>\n <p>Monthly subscription which allows us to download 750 images per month</p>\n\n <li><a href=\"http://www.istock.com\">www.istock.com</a></li>\n <p>Monthly subscription which allows us to download 10 signature images per month</p>\n\n <li><a href=\"http://www.500px.com\">www.500px.com</a></li>\n <p>Images are purchased individually.</p>\n </ol>\n</div>\n\n<div class=\"us-content-group\" id=\"what-to-purchase\">\n <h2>What to purchase</h2>\n <h3>Dimensions</h3>\n <p>Stock sites often allow you to purchase images in Small, Medium and Large sizes. Purchasing the largest option is recommended as this will cover most of our online use cases and allow for flexibility when it comes to cropping.</p>\n\n <h3>File types</h3>\n <h4>Photography</h4>\n <p>Most photography that you purchase from stock sites will be either JPG or TIFF format. Either is fine, but if it’s a TIFF, it will need to be converted to a JPG before using online.</p>\n\n <h4>Graphics and Illustrations</h4>\n <p>Graphics and illustrations are usually available in EPS, SVG, or PNG format. When available, EPS or SVG files are preferred as they can be scaled to any size. EPS files will need to be converted to an SVG or PNG before using online.</p>\n</div>\n\n\n<div class=\"us-content-group\" id=\"types-of-licenses\">\n <h2>Types of licenses</h2>\n\n <h3>1. Rights-managed</h3>\n <p>Rights-managed images often have limitations in regards to the following:</p>\n\n <ul>\n <li>How many times you can use them</li>\n <li>Regions you can use them in</li>\n <li>Type of media you can use them on</li>\n <li>Length of time you can use them for</li>\n </ul>\n\n <h3>2. Royalty-free</h3>\n <p>Royalty-free images can generally be used on multiple projects for an unlimited amount of time. They should not be confused with “free”. You must still pay a one-off cost to use them.</p>\n\n <p>We prefer royalty-free images as there’s fewer restrictions around using them. However even with this type of licence, there may be some usage restrictions, so it’s important to read the licence agreements and act accordingly.</p>\n\n <ul>\n <li><a href=\"http://www.shutterstock.com/license\">Shutterstock licensing</a></li>\n <li><a href=\"http://www.istockphoto.com/legal/license-agreement\">iStock licensing</a></li>\n <li><a href=\"http://static.500px.net/docs/commercial_licensing_agreement.pdf\">500px licensing</a></li>\n </ul>\n\n <h3>3. Creative Commons</h3>\n <p>Creative Commons means the owner of an image has made it available for use under certain restrictions. Restrictions often include that you must attribute the image to the owner, that you may not use it for commercial purposes, or that you may not alter the image.</p>\n\n <p><a href=\"http://www.flickr.com\">Flickr</a> is a good resource for images that have been made available through Creative Commons, but make sure you understand and comply with any restrictions they’re being offered under.</p>\n\n <h3>4. Public Domain</h3>\n <p>Public Domain refers to images that do not have a copyright and therefore free for anyone to use. It can apply to images that are very old or where the creator has given up their copyright.</p>\n\n <h3>How do you know if you can use an image?</h3>\n <h4>Only use an image if:</h4>\n <ol type=\"a\">\n <li>You’ve purchased it</li>\n <li>You’ve taken it yourself or hired a photographer to take it for you</li>\n <li>You have written permission from the owner of the image</li>\n <li>It’s Creative Commons and you’ve complied with any usage conditions</li>\n <li>It’s Public Domain</li>\n </ol>\n\n <h4>Never take images directly from:</h4>\n <ul>\n <li>Search engines (Google images etc.)</li>\n <li>Other people’s or organisation’s social media (embedding a tweet is ok if you ask the owner’s permission)</li>\n <li>News outlets</li>\n </ul>\n\n <p>Keep in mind that manipulating an image that isn’t yours (adding a filter, cropping etc) doesn’t give you the right to use it.</p>\n</div>\n\n<div class=\"us-content-group\" id=\"image-storage\">\n <h2>Image Storage</h2>\n <h3>Where to store images</h3>\n <p>Purchased images should be added to our shared Google Drive storage within the appropriate category. <strong>This should be the original, full-sized, uncropped and uncompressed image only.</strong> This allows for cross vertical sharing as well as usage in other mediums such as email.</p>\n\n <p>While the shared library exists so images can be reused, try not to overuse images to the point that they lose their impact.</p>\n\n <h3>What to name images</h3>\n <p>Images should be named with a few descriptive words, with words separated by hyphens. Images that are an illustration should have the prefix of "illustation-".</p>\n\n <p>For mobile phones, image names should be formatted as follows:</p>\n <p><strong>yyyy-mm-dd-manufacturer-phonename-phoneversion.png</strong></p>\n <p>For example:<strong> 2015-04-10-samsung-galaxy-s6.png</strong></p>\n <p>The date refers to the <u>date of the phone release.</u></p>\n\n <h3>Tagging images</h3>\n <p>For searchability, it's important to include descriptive tags for each image you add to Google Drive. You can do this under the "Description" field. The first two tags should be the stock site you got the image from, as well as the image number. Include any other tags that might be useful, separating each tag with commas. </p>\n</div>\n\n<div class=\"us-content-group\" id=\"about-retina\">\n <h2>About Retina</h2>\n <p><strong>Retina display</strong> refers to monitors and devices that have a very high pixel density, making screen content appear very crisp and sharp.</p>\n\n <p>To take advantage of these high-quality displays, we must use <strong>Retina images</strong>. That simply means that we need to double the intended size of our images. </p>\n</div>\n\n<div class=\"us-content-group\" id=\"our-image-sizes\">\n <h2>Our image sizes</h2>\n <p>Below are the minimum required sizes for our images in various materials. If an image does not meet this size, it can’t be used and an alternate image will need to be sourced. An image must not be scaled up in order to meet the minimum required size.</p>\n\n <h3>Emails</h3>\n\n <h4>Insights</h4>\n\n <strong>Hero article</strong>\n <ul>\n <li>Display size: 130w x 147h</li>\n <li>Minimum required size: 260w x 294h</li>\n </ul>\n\n <strong>Article</strong>\n <ul>\n <li>Display size: 150w x 170h</li>\n <li>Minimum required size: 300w x 340h</li>\n </ul>\n\n <strong>Mobile phones</strong>\n <ul>\n <li>Display size: 75w x 125h</li>\n <li>Minimum required size: 150w x 250h</li>\n </ul>\n\n <strong>Provider logos</strong>\n <ul>\n <li>Display size: 100w x 35h</li>\n <li>Minimum required size: 200w x 70h</li>\n </ul>\n\n <h4>Tacticals</h4>\n\n <strong>Hero article</strong>\n <ul>\n <li>Display size: 250w x 200h</li>\n <li>Minimum required size: 500w x 400h</li>\n </ul>\n\n <h4>Guides</h4>\n\n <strong>Top banner</strong>\n <ul>\n <li>Display size: 1170hw x 168h</li>\n <li>Minimum required size: Not currently Retina</li>\n </ul>\n\n <strong>Content</strong>\n <ul>\n <li>Display size: 770w x flexible height</li>\n <li>Minimum required size: Not currently Retina</li>\n </ul>\n\n <h4>News</h4>\n\n <strong>Content</strong>\n <ul>\n <li>Display size: 800w x flexible height</li>\n <li>Minimum required size: Not currently Retina</li>\n </ul>\n</div>\n\n<div class=\"us-content-group\" id=\"alt-text\">\n <h2>Alternative (alt) text</h2>\n <p>Alt text is an important aspect of web accessibility. All images on our site should include meaningful alt text. <a href=\"http://webaim.org/techniques/alttext/\">See here</a> for best practices.</p>\n <p>If the image is purely decorative, it should have a blank alternative text\n so something unintended (like the image file name) is not read out by a screenreader.</p>\n</div>\n\n<div class=\"us-content-group\" id=\"examples\">\n <h2>Examples</h2>\n <div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/natural-1.jpg\" alt=\"\">\n <img class=\"us-img--full\" src=\"/images/natural-2.jpg\" alt=\"\">\n <img class=\"us-img--full\" src=\"/images/natural-3.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--green\">Do</strong><br>\n Images feel natural and authentic.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/unnatural-1.jpg\" alt=\"\">\n <img class=\"us-img--full\" src=\"/images/unnatural-2.jpg\" alt=\"\">\n <img class=\"us-img--full\" src=\"/images/unnatural-3.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--red\">Don't</strong><br>\n Images appear staged.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/good-subject.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--green\">Do</strong><br>\n Subject is contextualised.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/bad-subject.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--red\">Don't</strong><br>\n Image is too closely cropped.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/accurate-housing.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--green\">Do</strong><br>\n Houses are a typical UK style.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/innaccurate-housing.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--red\">Don't</strong><br>\n Houses feel american style.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/warm.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--green\">Do</strong><br>\n Image has warm tones.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/cold.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--red\">Don't</strong><br>\n Image is too cool.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/unaltered.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--green\">Do</strong><br>\n Image does not appear altered.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/altered.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--red\">Don't</strong><br>\n Image is noticeably manipulated.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/realistic.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--green\">Do</strong><br>\n Image is realistic and relatable.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/cliche.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--red\">Don't</strong><br>\n Image is cliché and metaphor based.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-tip\">\n <img class=\"us-img--full\" src=\"/images/not-centered.jpg\" alt=\"\">\n </div>\n <div class=\"us-col-xsm-6 image-tip\">\n <img class=\"us-img--full\" src=\"/images/centered.jpg\" alt=\"\">\n </div>\n <div class=\"image-tip image-tip__reason us-col-xsm-12\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--green\">Tip</strong><br>\n Images where subjects are placed to the left/right and top/bottom are more interesting than those placed centrally.\n </p>\n </div>\n <div>\n <div class=\"us-col-xsm-6 image-tip\">\n <img class=\"us-img--full\" src=\"/images/illustrations_1.png\" alt=\"\">\n <img class=\"us-img--full\" src=\"/images/illustrations_2.png\" alt=\"\">\n <img class=\"us-img--full\" src=\"/images/illustrations_3.png\" alt=\"\">\n </div>\n <div class=\"us-col-xsm-6 image-tip\">\n <img class=\"us-img--full\" src=\"/images/illustrations_4.png\" alt=\"\">\n <img class=\"us-img--full\" src=\"/images/illustrations_5.png\" alt=\"\">\n <img class=\"us-img--full\" src=\"/images/illustrations_6.png\" alt=\"\">\n </div>\n <div class=\"image-tip image-tip__reason us-col-xsm-12\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--green\">Do</strong><br>\n Illustrations are simple, geometric and consist primarily of brand colours (or shade/tones of brand colours).\n </p>\n </div>\n </div>\n </div>\n</div>\n","subNav":[{"name":"How to select an image","link":"#how-to-select-an-image"},{"name":"Cropping","link":"#cropping"},{"name":"Where to get images","link":"#where-to-get-images"},{"name":"What to purchase","link":"#what-to-purchase"},{"name":"Types of licenses","link":"#types-of-licenses"},{"name":"Image storage","link":"#image-storage"},{"name":"About Retina","link":"#about-retina"},{"name":"Our image sizes","link":"#our-image-sizes"},{"name":"Alt text","link":"#alt-text"},{"name":"Examples","link":"#examples"}]},{"name":"Typography","page":"typography.html","template":"styleguide/templates/simple.tpl","section":"design","content":"<p>Typography is a key element of how we communicate at uSwitch. We've recently revised our type settings and removed Open Sans from our fonts to increase legibility across devices.</p>\n<p>We have chosen to use system fonts across the website for multiple reasons:</p>\n<ul>\n<li>Improved legibility in operating systems</li>\n<li>No performance overhead in loading custom fonts</li>\n<li>Users are accustomed to their operating system fonts</li>\n</ul>\n<p>Depending on the operating system you are on, you will get one of the following fonts:</p>\n<table class=\"pure-table pure-table-bordered\">\n<thead>\n<tr class=\"header\">\n<th>Font</th>\n<th>Device Targeted</th>\n</tr>\n</thead>\n<tbody>\n<tr class=\"odd\">\n<td>-apple-system (San Francisco)</td>\n<td>iOS Safari, macOS Safari, macOS Firefox</td>\n</tr>\n<tr class=\"even\">\n<td>BlinkMacSystemFont (San Francisco)</td>\n<td>macOS Chrome</td>\n</tr>\n<tr class=\"odd\">\n<td>Segoe UI</td>\n<td>Windows</td>\n</tr>\n<tr class=\"even\">\n<td>Roboto</td>\n<td>Android, Chrome OS</td>\n</tr>\n<tr class=\"odd\">\n<td>Oxygen / Oxygen-Sans</td>\n<td>KDE</td>\n</tr>\n<tr class=\"even\">\n<td>Fira Sans</td>\n<td>Firefox OS</td>\n</tr>\n<tr class=\"odd\">\n<td>Droid Sans</td>\n<td>Older versions of Android</td>\n</tr>\n<tr class=\"even\">\n<td>Ubuntu</td>\n<td>Ubuntu</td>\n</tr>\n<tr class=\"odd\">\n<td>Cantarell</td>\n<td>GNOME</td>\n</tr>\n<tr class=\"even\">\n<td>Helvetica Neue</td>\n<td>macOS versions < 10.11</td>\n</tr>\n<tr class=\"odd\">\n<td>Arial</td>\n<td>Any</td>\n</tr>\n<tr class=\"even\">\n<td>sans-serif</td>\n<td>Any</td>\n</tr>\n</tbody>\n</table>","subNav":[]},{"name":"Articles","page":"articles.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Articles","name":"Base article","description":"<p> Article listings for news are important on the landing pages.</p>\n","markup":{"example":" <article class='us-article'>\n <a class='us-article__link' href=\"#\">\n <div class='us-grid-row'>\n <div class='us-col-md-8'>\n <h3 class='us-article__title'>Car insurance guides</h3>\n <p class='us-article__description'>\n A quarter of 18-34 year olds believe that tech companies could offer better financial services than banks\n </p>\n <div class=\"us-article__meta\">\n <span class=\"date\">2 months ago</span>\n in\n <span class=\"category\">Banking</span>\n </div>\n </div>\n <div class='us-col-md-4 us-tablet--block'>\n <img class='us-img--full us-article__image' src='https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg' />\n </div>\n </a>\n </div>\n </article>","escaped":" <article class='us-article'>\n <a class='us-article__link' href=\"#\">\n <div class='us-grid-row'>\n <div class='us-col-md-8'>\n <h3 class='us-article__title'>Car insurance guides</h3>\n <p class='us-article__description'>\n A quarter of 18-34 year olds believe that tech companies could offer better financial services than banks\n </p>\n <div class=\"us-article__meta\">\n <span class=\"date\">2 months ago</span>\n in\n <span class=\"category\">Banking</span>\n </div>\n </div>\n <div class='us-col-md-4 us-tablet--block'>\n <img class='us-img--full us-article__image' src='https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg' />\n </div>\n </a>\n </div>\n </article>"},"path":"vendor/assets/stylesheets/ustyle/articles/_base.scss","file":"_base.scss","link":"base_article"},{"page":"Pattern Library/Articles","name":"Guide article","description":"<p> Our guide and news articles are used across the site to communicate news/guide snippets. The layout is decided by our grid, by default they have 100% width.</p>\n","markup":{"example":" <div class='us-article-group'>\n <div class='us-guide-item us-col-md-4'>\n <a class='us-guide-item-link' href='#'>\n <div class='us-guide-item-image-container'>\n <div class='us-guide-item-image background' style='background-image: url(https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg)'></div>\n </div>\n <div class='us-guide-item-content'>\n <h4 class='us-guide-item-title'>Car insurance guides</h4>\n <p class='us-guide-item-description'>Read our car insurance advice guides for the facts on why you need car insurance, the types of cover available, and tips on how to make a claim.</p>\n </div>\n <div class='us-guide-item-readmore'>\n <span class='us-news-item-readmorelink'>Read more</span>\n </div>\n </a>\n </div>\n </div>","escaped":" <div class='us-article-group'>\n <div class='us-guide-item us-col-md-4'>\n <a class='us-guide-item-link' href='#'>\n <div class='us-guide-item-image-container'>\n <div class='us-guide-item-image background' style='background-image: url(https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg)'></div>\n </div>\n <div class='us-guide-item-content'>\n <h4 class='us-guide-item-title'>Car insurance guides</h4>\n <p class='us-guide-item-description'>Read our car insurance advice guides for the facts on why you need car insurance, the types of cover available, and tips on how to make a claim.</p>\n </div>\n <div class='us-guide-item-readmore'>\n <span class='us-news-item-readmorelink'>Read more</span>\n </div>\n </a>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/articles/_guide.scss","file":"_guide.scss","link":"guide_article"},{"page":"Pattern Library/Articles","name":"More article","description":"<p> If the article listing has more in a category, we use this to let a user navigate to that category.</p>\n","markup":{"example":" <div class='us-more-item us-col-md-4'>\n <a class='us-more-item-link' href='#'>\n <span class='us-more-item-title'>See more banking news</span>\n </a>\n </div>","escaped":" <div class='us-more-item us-col-md-4'>\n <a class='us-more-item-link' href='#'>\n <span class='us-more-item-title'>See more banking news</span>\n </a>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/articles/_more.scss","file":"_more.scss","link":"more_article"},{"page":"Pattern Library/Articles","name":"News article","description":"<p> The news item article standard. It mirrors the guide article. The news item image is a background image as the problem of not displaying <code><img></code> tags on mobile hasn't been resolved.</p>\n","markup":{"example":" <div class='us-article-group'>\n <div class='us-news-item us-col-md-4'>\n <a class='us-news-item-link' href='#'>\n <div class='us-news-item-image-container'>\n <div class='us-news-item-image background' style='background-image: url(https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg)'></div>\n </div>\n <div class='us-news-meta'>\n <span class='category'>Consumer rights</span>\n <span class='date'>14 Nov 2014</span>\n </div>\n <h3 class='us-news-item-title'>Customer uses promoted tweet to complain about BA</h3>\n <p class='us-news-item-snippet'>Sign of things to come? Social media helps to empower disgruntled consumer amid lost luggage row</p>\n <div class='us-news-item-readmore'>\n <span class='us-news-item-readmorelink'>More consumer rights</span>\n </div>\n </a>\n </div>\n </div>","escaped":" <div class='us-article-group'>\n <div class='us-news-item us-col-md-4'>\n <a class='us-news-item-link' href='#'>\n <div class='us-news-item-image-container'>\n <div class='us-news-item-image background' style='background-image: url(https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg)'></div>\n </div>\n <div class='us-news-meta'>\n <span class='category'>Consumer rights</span>\n <span class='date'>14 Nov 2014</span>\n </div>\n <h3 class='us-news-item-title'>Customer uses promoted tweet to complain about BA</h3>\n <p class='us-news-item-snippet'>Sign of things to come? Social media helps to empower disgruntled consumer amid lost luggage row</p>\n <div class='us-news-item-readmore'>\n <span class='us-news-item-readmorelink'>More consumer rights</span>\n </div>\n </a>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/articles/_news.scss","file":"_news.scss","link":"news_article"},{"page":"Pattern Library/Articles","name":"Related items","description":"<p> Related lists used for content sidebars.</p>\n","markup":{"example":" <ul class=\"us-related us-list--reset\">\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">Car accident claims — How to make a car insurance claim</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">How to get the best car insurance deals</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">No claims bonus explained: how to protect a no claims discount</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link us-related__item-link--more\" href=\"#\">See more guides</a>\n </li>\n </ul>","escaped":" <ul class=\"us-related us-list--reset\">\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">Car accident claims — How to make a car insurance claim</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">How to get the best car insurance deals</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">No claims bonus explained: how to protect a no claims discount</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link us-related__item-link--more\" href=\"#\">See more guides</a>\n </li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/articles/_related.scss","file":"_related.scss","link":"related_items"}]},{"name":"Utilities","page":"utilities.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Utilities","name":"General","description":"<p> These utility classes allow for some basic CSS properties to be applied across elements. The classname applies to the property that is getting set, with the value as the modifier.</p>\n","state":[{"name":".us-clearfix","escaped":"us-clearfix","description":"Clear floats.","markup":{"example":" <div class='us-clearfix'>\n <p>content</p>\n </div>"}},{"name":".us-float--left","escaped":"us-float--left","description":"Float element to the left.","markup":{"example":" <div class='us-float--left'>\n <p>content</p>\n </div>"}},{"name":".us-float--right","escaped":"us-float--right","description":"Float element to the right.","markup":{"example":" <div class='us-float--right'>\n <p>content</p>\n </div>"}},{"name":".us-align--left","escaped":"us-align--left","description":"Align content of the element to the left.","markup":{"example":" <div class='us-align--left'>\n <p>content</p>\n </div>"}},{"name":".us-align--center","escaped":"us-align--center","description":"Align content of the element to the center.","markup":{"example":" <div class='us-align--center'>\n <p>content</p>\n </div>"}},{"name":".us-align--right","escaped":"us-align--right","description":"Align content of the element to the right.","markup":{"example":" <div class='us-align--right'>\n <p>content</p>\n </div>"}},{"name":".us-block","escaped":"us-block","description":"Display element as a block.","markup":{"example":" <div class='us-block'>\n <p>content</p>\n </div>"}},{"name":".us-color--cyan","escaped":"us-color--cyan","description":"Change content color to blue, navy, typecyan, cyan, red, green.","markup":{"example":" <div class='us-color--cyan'>\n <p>content</p>\n </div>"}},{"name":".us-list--reset","escaped":"us-list--reset","description":"Reset list style.","markup":{"example":" <div class='us-list--reset'>\n <p>content</p>\n </div>"}}],"markup":{"example":" <div class='{$modifiers}'>\n <p>content</p>\n </div>","escaped":" <div>\n <p>content</p>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/utilities/_general.scss","file":"_general.scss","link":"general"},{"page":"Pattern Library/Utilities","name":"Images","description":"<p> Helpful image classes for making images full width or floating within content.</p>\n","state":[{"name":".us-img--full","escaped":"us-img--full","description":"Full width image.","markup":{"example":" <p>\n <img class=\"us-img--full\" src=\"https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>"}},{"name":".us-img--left","escaped":"us-img--left","description":"Left floated image.","markup":{"example":" <p>\n <img class=\"us-img--left\" src=\"https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>"}},{"name":".us-img--right","escaped":"us-img--right","description":"Right floated image.","markup":{"example":" <p>\n <img class=\"us-img--right\" src=\"https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>"}}],"markup":{"example":" <p>\n <img class=\"{$modifiers}\" src=\"https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>","escaped":" <p>\n <img src=\"https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>"},"path":"vendor/assets/stylesheets/ustyle/utilities/_images.scss","file":"_images.scss","link":"images"},{"page":"Pattern Library/Utilities","name":"Responsive","description":"<p> Responsive classes to allow display of elements across devices. You have the option of displaying them as <code>block</code>, <code>inline-block</code> or <code>inline</code> elements.</p>\n<p> You can also hide elements by <code>.us-{DEVICE}--hidden</code> and will hide those elements above that breakpoint.</p>\n","markup":{"example":" <div class='us-lg-desktop--block'><strong>.us-lg-desktop--block</strong> Shows on large desktop and up</div>\n <div class='us-desktop--block'><strong>.us-desktop--block</strong> Shows on desktop and up</div>\n <div class='us-tablet--block'><strong>.us-tablet--block</strong> Shows on tablet and up</div>\n <div class='us-sm-tablet--block'><strong>.us-sm-tablet--block</strong> Shows on small tablet and up</div>\n <div class='us-mobile--block'><strong>.us-mobile--block</strong> Shows on mobile only</div>\n <div class='us-tablet--hidden'><strong>.us-tablet--hidden</strong> Hidden on tablet and up</div>","escaped":" <div class='us-lg-desktop--block'><strong>.us-lg-desktop--block</strong> Shows on large desktop and up</div>\n <div class='us-desktop--block'><strong>.us-desktop--block</strong> Shows on desktop and up</div>\n <div class='us-tablet--block'><strong>.us-tablet--block</strong> Shows on tablet and up</div>\n <div class='us-sm-tablet--block'><strong>.us-sm-tablet--block</strong> Shows on small tablet and up</div>\n <div class='us-mobile--block'><strong>.us-mobile--block</strong> Shows on mobile only</div>\n <div class='us-tablet--hidden'><strong>.us-tablet--hidden</strong> Hidden on tablet and up</div>"},"path":"vendor/assets/stylesheets/ustyle/utilities/_responsive.scss","file":"_responsive.scss","link":"responsive"},{"page":"Pattern Library/Utilities","name":"Spacing","description":"<p> Allow control of spacing around an element. You can set margin or padding for an element without creating an extra class.</p>\n<p> An example of this <code>.us-margin-top</code>, <code>.us-margin-top--small</code>, <code>.us-margin-top--large</code> where <code>margin</code> can be replaced by <code>padding</code> and <code>top</code> can be replaced by <code>bottom</code>, <code>left</code> or <code>right</code>.</p>\n<p> Default space for margin and padding is 1em, <code>small</code> modifier uses .5em and <code>large</code> modifier uses 1.5em.</p>\n","state":[{"name":".us-margin-top","escaped":"us-margin-top","description":"Use default top margin (1em).","markup":{"example":"<div class='class-goes-here us-margin-top'>Sample content</div>"}},{"name":".us-margin-top--small","escaped":"us-margin-top--small","description":"Use small top margin (.5em).","markup":{"example":"<div class='class-goes-here us-margin-top--small'>Sample content</div>"}},{"name":".us-margin-top--large","escaped":"us-margin-top--large","description":"Use large top margin (1.5em).","markup":{"example":"<div class='class-goes-here us-margin-top--large'>Sample content</div>"}},{"name":".us-margin-bottom","escaped":"us-margin-bottom","description":"Use default bottom margin (1em).","markup":{"example":"<div class='class-goes-here us-margin-bottom'>Sample content</div>"}},{"name":".us-margin-bottom--small","escaped":"us-margin-bottom--small","description":"Use small bottom margin (.5em).","markup":{"example":"<div class='class-goes-here us-margin-bottom--small'>Sample content</div>"}},{"name":".us-margin-bottom--large","escaped":"us-margin-bottom--large","description":"Use large bottom margin (1.5em).","markup":{"example":"<div class='class-goes-here us-margin-bottom--large'>Sample content</div>"}},{"name":".us-margin-left","escaped":"us-margin-left","description":"Use default left margin (1em).","markup":{"example":"<div class='class-goes-here us-margin-left'>Sample content</div>"}},{"name":".us-margin-left--small","escaped":"us-margin-left--small","description":"Use small left margin (.5em).","markup":{"example":"<div class='class-goes-here us-margin-left--small'>Sample content</div>"}},{"name":".us-margin-left--large","escaped":"us-margin-left--large","description":"Use large left margin (1.5em).","markup":{"example":"<div class='class-goes-here us-margin-left--large'>Sample content</div>"}},{"name":".us-margin-right","escaped":"us-margin-right","description":"Use default right margin (1em).","markup":{"example":"<div class='class-goes-here us-margin-right'>Sample content</div>"}},{"name":".us-margin-right--small","escaped":"us-margin-right--small","description":"Use small right margin (.5em).","markup":{"example":"<div class='class-goes-here us-margin-right--small'>Sample content</div>"}},{"name":".us-margin-right--large","escaped":"us-margin-right--large","description":"Use large right margin (1.5em).","markup":{"example":"<div class='class-goes-here us-margin-right--large'>Sample content</div>"}},{"name":".us-padding-top","escaped":"us-padding-top","description":"Use default top padding (1em).","markup":{"example":"<div class='class-goes-here us-padding-top'>Sample content</div>"}},{"name":".us-padding-top--small","escaped":"us-padding-top--small","description":"Use small top padding (.5em).","markup":{"example":"<div class='class-goes-here us-padding-top--small'>Sample content</div>"}},{"name":".us-padding-top--large","escaped":"us-padding-top--large","description":"Use large top padding (1.5em).","markup":{"example":"<div class='class-goes-here us-padding-top--large'>Sample content</div>"}},{"name":".us-padding-bottom","escaped":"us-padding-bottom","description":"Use default bottom padding (1em).","markup":{"example":"<div class='class-goes-here us-padding-bottom'>Sample content</div>"}},{"name":".us-padding-bottom--small","escaped":"us-padding-bottom--small","description":"Use small bottom padding (.5em).","markup":{"example":"<div class='class-goes-here us-padding-bottom--small'>Sample content</div>"}},{"name":".us-padding-bottom--large","escaped":"us-padding-bottom--large","description":"Use large bottom padding (1.5em).","markup":{"example":"<div class='class-goes-here us-padding-bottom--large'>Sample content</div>"}},{"name":".us-padding-left","escaped":"us-padding-left","description":"Use default left padding (1em).","markup":{"example":"<div class='class-goes-here us-padding-left'>Sample content</div>"}},{"name":".us-padding-left--small","escaped":"us-padding-left--small","description":"Use small left padding (.5em).","markup":{"example":"<div class='class-goes-here us-padding-left--small'>Sample content</div>"}},{"name":".us-padding-left--large","escaped":"us-padding-left--large","description":"Use large left padding (1.5em).","markup":{"example":"<div class='class-goes-here us-padding-left--large'>Sample content</div>"}},{"name":".us-padding-right","escaped":"us-padding-right","description":"Use default right padding (1em).","markup":{"example":"<div class='class-goes-here us-padding-right'>Sample content</div>"}},{"name":".us-padding-right--small","escaped":"us-padding-right--small","description":"Use small right padding (.5em).","markup":{"example":"<div class='class-goes-here us-padding-right--small'>Sample content</div>"}},{"name":".us-padding-right--large","escaped":"us-padding-right--large","description":"Use large right padding (1.5em).","markup":{"example":"<div class='class-goes-here us-padding-right--large'>Sample content</div>"}},{"name":".us-reset--padding","escaped":"us-reset--padding","description":"Reset padding to 0.","markup":{"example":"<div class='class-goes-here us-reset--padding'>Sample content</div>"}},{"name":".us-reset--margin","escaped":"us-reset--margin","description":"Reset margin to 0.","markup":{"example":"<div class='class-goes-here us-reset--margin'>Sample content</div>"}},{"name":".us-reset","escaped":"us-reset","description":"Reset padding and margin to 0.","markup":{"example":"<div class='class-goes-here us-reset'>Sample content</div>"}}],"markup":{"example":"<div class='class-goes-here {$modifiers}'>Sample content</div>","escaped":"<div class='class-goes-here'>Sample content</div>"},"path":"vendor/assets/stylesheets/ustyle/utilities/_spacing.scss","file":"_spacing.scss","link":"spacing"}]},{"name":"Typography","page":"typography.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Typography","name":"Headings","description":"<p> The default heading styling across all uSwitch pages.</p>\n<p> We allow extending the sizes of these headings with <code>%heading-{$i}</code> so that we don't repeat similar font sizes across the site.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>Headings are for structure, not presentation</p>\n</li>\n<li><p>The first heading on the page should be an H1</p>\n</li>\n<li><p>Headings should be listed in consecutive order [H1, H2, H3], not [H1, H5, H2]</p>\n</li>\n</ul>\n","markup":{"example":" <h1>Heading 1</h1>\n <h2>Heading 2</h2>\n <h3>Heading 3</h3>\n <h4>Heading 4</h4>\n <h5>Heading 5</h5>\n <h6>Heading 6</h6>","escaped":" <h1>Heading 1</h1>\n <h2>Heading 2</h2>\n <h3>Heading 3</h3>\n <h4>Heading 4</h4>\n <h5>Heading 5</h5>\n <h6>Heading 6</h6>"},"path":"vendor/assets/stylesheets/ustyle/basics/_typography.scss","file":"_typography.scss","link":"headings"},{"page":"Pattern Library/Typography","name":"Paragraphs","description":"<p> Default paragraph styling with a margin bottom.</p>\n","state":[{"name":".us-standfirst","escaped":"us-standfirst","description":"Used for heros and introductory paragraphs.","markup":{"example":" <p class=\"us-standfirst\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus. Nunc consequat condimentum porttitor.\n Cras at mi sed quam hendrerit bibendum ac a lorem. Mauris a sapien vitae massa lacinia malesuada.\n </p>"}}],"markup":{"example":" <p class=\"{$modifiers}\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus. Nunc consequat condimentum porttitor.\n Cras at mi sed quam hendrerit bibendum ac a lorem. Mauris a sapien vitae massa lacinia malesuada.\n </p>","escaped":" <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus. Nunc consequat condimentum porttitor.\n Cras at mi sed quam hendrerit bibendum ac a lorem. Mauris a sapien vitae massa lacinia malesuada.\n </p>"},"path":"vendor/assets/stylesheets/ustyle/basics/_typography.scss","file":"_typography.scss","link":"paragraphs"},{"page":"Pattern Library/Typography","name":"Lists","description":"<p> Normal list styling.</p>\n","markup":{"example":" <ul>\n <li>List item 1</li>\n <li>List item 2</li>\n <li>List item 3</li>\n </ul>","escaped":" <ul>\n <li>List item 1</li>\n <li>List item 2</li>\n <li>List item 3</li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/basics/_typography.scss","file":"_typography.scss","link":"lists"},{"page":"Pattern Library/Typography","name":"Blockquote","description":"<p> Default blockquote.</p>\n","markup":{"example":" <blockquote>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus.\n </p>\n </blockquote>","escaped":" <blockquote>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus.\n </p>\n </blockquote>"},"path":"vendor/assets/stylesheets/ustyle/basics/_typography.scss","file":"_typography.scss","link":"blockquote"},{"page":"Pattern Library/Typography","name":"Numbered list","description":"<p> Our default numbered list styling.</p>\n","state":[{"name":".us-custom-list-alt","escaped":"us-custom-list-alt","description":"Allows us to use the lists on hero/blue backgrounds.","markup":{"example":" <ul class='us-numbered-list us-custom-list-alt'>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n </ul>"}}],"markup":{"example":" <ul class='us-numbered-list {$modifiers}'>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n </ul>","escaped":" <ul class='us-numbered-list'>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/components/_lists-li.scss","file":"_lists-li.scss","link":"numbered_list"},{"page":"Pattern Library/Typography","name":"Ticked list","description":"<p> Our default ticked list styling.</p>\n","state":[{"name":".us-custom-list-alt","escaped":"us-custom-list-alt","description":"Allows us to use the lists on hero/blue backgrounds.","markup":{"example":" <ul class='us-ticked-list'>\n <li>\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon us-icon--small us-icon--before us-icon--typegrey\"><use xlink:href=\"/images/icons.svg#icon-tick\"/></svg>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n <li>\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon us-icon--small us-icon--before us-icon--typegrey\"><use xlink:href=\"/images/icons.svg#icon-tick\"/></svg>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n </ul>"}}],"markup":{"example":" <ul class='us-ticked-list'>\n <li>\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon us-icon--small us-icon--before us-icon--typegrey\"><use xlink:href=\"/images/icons.svg#icon-tick\"/></svg>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n <li>\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon us-icon--small us-icon--before us-icon--typegrey\"><use xlink:href=\"/images/icons.svg#icon-tick\"/></svg>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n </ul>","escaped":" <ul class='us-ticked-list'>\n <li>\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon us-icon--small us-icon--before us-icon--typegrey\"><use xlink:href=\"/images/icons.svg#icon-tick\"/></svg>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n <li>\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon us-icon--small us-icon--before us-icon--typegrey\"><use xlink:href=\"/images/icons.svg#icon-tick\"/></svg>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/components/_lists-li.scss","file":"_lists-li.scss","link":"ticked_list"}]},{"name":"uSwitch tone of voice","page":"tone.html","template":"styleguide/templates/simple.tpl","section":"language","content":"<p>Here at uSwitch, we offer everyone ‘Supportive Switching’.</p>\n<p>That means we’re not just passively comparing prices, we’re actively enabling and supporting the decision to switch.</p>\n<p>What we write, the way we speak to customers and every conversation we have must give people clear, timely and relevant information. And we should communicate that information in a simple but attractive way.</p>\n<p>With the right tone of voice, our words create a decisive moment: we take people from passively knowing they should switch to actively having the confidence to make the right switch</p>\n<p><span id=\"Three core principles\"></span></p>\n<h2 id=\"3-core-principles-of-the-uswitch-tone-of-voice\">3 core principles of the uSwitch tone of voice</h2>\n<p><strong>- Empathetic</strong><br><strong>- Expert</strong><br><strong>- Empowering</strong> </p>\n<p>To give people the support they need to switch, we need to be able to deliver the right kind of message at the right time. That means our voice needs to be able to flex from simply informative – for example when we’re describing features of a product – to inspirational, when people are at the decisive moment and need extra encouragement to switch. </p>\n<p>The trick is to strike the right balance. Our three core principles will help us do this, guiding our communications and making sure that we deliver each message in the most appropriate way. </p>\n<p>Everything we say should always carry some elements of our core principles in varying degrees. The following framework is designed to make sure we get the balance right. </p>\n<p><span id=\"Framework\"></span></p>\n<h2 id=\"tone-framework\">Tone framework</h2>\n<p>Our three principles work together, and we adjust the emphasis and balance depending on who we’re talking to, why and when. </p>\n<p>One voice principle doesn’t exclude another; it’s how we mix them that gives uSwitch a rounded and distinctive voice. </p>\n<p>And, as with people, we’re not one thing all the time, or everything at once — but we have a consistent basis that’s us. For uSwitch, that means we’re always Empathetic. We dial up and down the Expert and Empowering qualities of our voice as needed. </p>\n<p>The key thing is to think about the main reason(s) to communicate – and use the principles accordingly. </p>\n<p><img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/tone-framework.png\"></p>\n<p><span id=\"Empathetic\"></span></p>\n<h2 id=\"principle-1-empathetic\">Principle 1: Empathetic</h2>\n<p><strong>Being empathetic means being:</strong> </p>\n<ul>\n<li>Positive </li>\n<li>Encouraging </li>\n<li>Relevant </li>\n</ul>\n<p>Our experience gives us insight and understanding, so being Empathetic means our writing is practical, good humoured and down to earth. </p>\n<p>Being empathetic also means we don’t make assumptions about what people know and don’t know. \nWe shouldn’t assume confidence either. We show people that we understand what’s important to them and talk about topics and issues that are directly relevant to them. </p>\n<p>When we write or speak, our language is outgoing and conversational, positive but never over the top. </p>\n<p>We want people to know they can rely on us to find the switch that’s right for them - and support them through it. </p>\n<p><strong>How we show empathy in our writing</strong> </p>\n<ol>\n<li>Use active, direct and positive language. </li>\n<li>Companies don’t show empathy, people do. We should always sound like a person – if you wouldn’t say it like that, don’t write it like that. </li>\n<li>Whether verbal or written, we should build a dialogue with customers, using relevant questions and topics of interest to engage people. </li>\n<li>Focus on answers not problems (but don’t gloss over issues and concerns). </li>\n<li>Make it personal by using ‘you’ as much as ‘we’. </li>\n<li>Don’t use the passive voice unless it’s absolutely necessary to make your point. \nUsing slang that’s accepted and understood can help connect. But be careful; we don’t want to alienate audiences by using jargon or patronising language – nor by trying to ‘talk cool’ to younger audiences. </li>\n<li>Put yourself in your customer’s shoes (and be honest). Would that headline you’re writing entice you to click on it? Is that error text going to provide support or only create more questions? </li>\n</ol>\n<p><span id=\"Expert\"></span></p>\n<h2 id=\"principle-2-expert\">Principle 2: Expert</h2>\n<p><strong>Being expert means being:</strong> </p>\n<ul>\n<li>Trusted </li>\n<li>Clear </li>\n<li>Accessible </li>\n</ul>\n<p>It’s our responsibility to direct people to the information or product that’s relevant for them. So we make information quick and easy to find, and ensure the pros and cons for switching are obvious and understandable. </p>\n<p>We don’t blind with science and we don’t dumb down. We give information succinctly and simply — but never rush the conversation. </p>\n<p>At all times we are scrupulously balanced, accurate and honest, and this reassures people by clearly showing that we know what we’re talking about. </p>\n<p><strong>How we show expertise in our writing</strong> </p>\n<ol>\n<li>Be relevant and accurate with facts and figures, and get the punctuation and spelling right. Even small mistakes undermine what you’re saying. </li>\n<li>Write succinctly and use simple sentence structures. Our prime objective is always that our audience understands us. In that way, we make complex topics simple, concise and accessible. Remember: simple isn’t simplistic; it’s just the easiest way to ensure we’re understood. </li>\n<li>Too many facts at once can be counterproductive. Don’t overload people with unnecessary detail. Get to the point, avoiding verbal padding and meaningless phrases. </li>\n<li>Don’t close down conversations – always have alternative options. </li>\n<li>Avoid marketing speak and sales patter. </li>\n<li>Don’t hide important facts. Start with what’s most relevant and individually important to your customer or audience. </li>\n</ol>\n<p><span id=\"Empowering\"></span></p>\n<h2 id=\"principle-3-empowering\">Principle 3: Empowering</h2>\n<p><strong>Being empowering means being:</strong></p>\n<ul>\n<li>Inspiring </li>\n<li>Energetic </li>\n<li>Credible </li>\n</ul>\n<p>We write and speak to inform and change minds, giving people the straightforward facts and, in turn, the confidence they need to switch. </p>\n<p>Our explanations and opinions should challenge, involve, entertain, pleasantly surprise and convince – we’re good company. </p>\n<p>The facts and figures are important, and we know them inside and out. But we make them more compelling by putting them in context, helping people see what switching could mean for them — whether that’s finally feeling in control of their household bills or that much closer to their dream holiday savings goal. </p>\n<p>We know who we are and what we’re about. So we believe wholeheartedly in what we do, knowing that it benefits everyone. So we’re never afraid to show our enthusiasm and commitment in our writing. </p>\n<p><strong>How we empower with our writing:</strong> </p>\n<ol>\n<li>Wherever possible, lead with emotional benefits that customers will be able to identify with – particularly at headline level. Look for familiar or universal situations related to our subject matter. </li>\n<li>Use real-life examples and stories wherever possible – they’re more convincing than anything you could invent. </li>\n<li>Don’t overpromise or over-exaggerate; there’s no need. </li>\n<li>Refresh your vocabulary and thinking; don’t keeping saying the same things in the same way\nHave an opinion and be prepared to defend it. </li>\n<li>Don’t be afraid to (politely and tactfully) challenge or say no. The customer is not always right but our advice should be. </li>\n<li>Be direct and positive but not flippant. Never forget that switching is a big step for many\nBring a sense of humour where it’s appropriate – wit is a great connector. </li>\n<li>Focus on wants and needs, not just prices. </li>\n</ol>\n","subNav":[{"name":"Three core principles","link":"#Three core principles"},{"name":" Tone framework","link":"#Framework"},{"name":"Principle 1: Empathetic","link":"#Empathetic"},{"name":"Principle 2: Expert","link":"#Expert"},{"name":"Principle 3: Empowering","link":"#Empowering"}]},{"name":"Colours","page":"colours.html","template":"styleguide/templates/styleguide.tpl","section":"brand","blocks":[{"page":"Brand/Colours","name":"Primary palette","partial":"colour","description":"<p> Our colours (with a "u", we're a UK company) are divided into primary, secondary and tertiary palettes. The primary and secondary are core to all our design work and supported by the tertiary which we use in infographics, graphs and the like. CMYK equivalents are available for print work.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>Do not rely only on colour to provide information. A green circle means little, a green circle with "success" in the middle gives actual information.</p>\n</li>\n<li><p>Make sure your text is <a href=\"http://a11yproject.com/posts/what-is-color-contrast/\">sufficiently contrasted</a> against its background</p>\n</li>\n</ul>\n","variable":[{"name":"c-cyan","description":"Hero banners","value":"#99e2ff"},{"name":"c-navy","description":"Text with emphasis","value":"#1c1f4e"},{"name":"c-blue","description":"Logo","value":"#002396"},{"name":"c-typecyan","description":"Text links, icons","value":"#008fe9"},{"name":"c-typegrey","description":"Body text","value":"#2f353a"},{"name":"c-typegrey-2","description":"Text without emphasis","value":"#65717b"},{"name":"c-bggrey","description":"Backgrounds","value":"#f4f5f6"},{"name":"c-red","description":"Primary buttons","value":"#d64226"},{"name":"c-green","description":"Action buttons, USPs","value":"#2aaa5b"}],"path":"vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss","file":"_colors.scss","link":"primary_palette"},{"page":"Brand/Colours","name":"Secondary palette","partial":"colour","variable":[{"name":"c-inputgrey","description":"Dropdowns, icons","value":"#84909a"},{"name":"c-bordergrey","description":"Borders","value":"#b0b8bf"},{"name":"c-keylinegrey","description":"Keylines, separators","value":"#e9ebed"},{"name":"c-blue-light","description":"","value":"#0c72bf"},{"name":"c-typecyan-light","description":"","value":"#4cc0f4"},{"name":"c-cyan-light","description":"","value":"#e4f8ff"},{"name":"c-yellow","description":"USPs","value":"#ffd32f"},{"name":"c-orange","description":"USPs","value":"#f27930"},{"name":"c-purple","description":"USPs","value":"#9c55b8"}],"path":"vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss","file":"_colors.scss","link":"secondary_palette"},{"page":"Brand/Colours","name":"Tertiary palette","partial":"colour","variable":[{"name":"c-red-dark","description":"","value":"#b53820"},{"name":"c-green-dark","description":"","value":"#23904d"},{"name":"c-red-lightest","description":"","value":"#eeb3a8"},{"name":"c-green-lightest","description":"","value":"#adebc5"},{"name":"c-yellow-lightest","description":"","value":"#ffedab"},{"name":"c-orange-lightest","description":"","value":"#f9c9ac"},{"name":"c-purple-lightest","description":"","value":"#d7bbe2"}],"path":"vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss","file":"_colors.scss","link":"tertiary_palette"}]},{"name":"Style","page":"grammar.html","template":"styleguide/templates/simple.tpl","section":"language","content":"<p>The smallest mistake can undermine the biggest (and most important) of messages. Those writing for uSwitch should ensure they follow these style rules that cover everything from headlines to hyphens, and numbers to names.</p>\n<p><span id=\"Abbreviations\"></span>\n<strong>Abbreviations</strong></p>\n<p>For names of companies or organisations, if an abbreviation is more familiar than the full form (e.g. BBC, IBM) use that. If not, write the name in full the first time you mention it, followed by the abbreviation in brackets. The next time you refer to it, use only the abbreviation.</p>\n<p><span id=\"Acronyms\"></span>\n<strong>Acronyms</strong></p>\n<p>Write out in first use, noting the acronym in brackets; then use just the acronym going forward. Familiar acronyms such as WiFi, HTML, HMRC and BT are exempt from this rule.</p>\n<blockquote>\n The TaxPayers’ Alliance (TPA) has warned that the campaigns being led by lobbies could lead to higher household bills. Matthew Sinclair, director of the TPA ... \n</blockquote>\n\n<p><span id=\"Ampersand\"></span>\n<strong>Ampersand</strong></p>\n<p>Do not use the “&” symbol unless it is part of a company or product name.</p>\n<p><span id=\"Apostrophes\"></span>\n<strong>Apostrophes</strong></p>\n<p>Avoid common misuse of apostrophes:</p>\n<ul>\n<li>Mixing up it’s (it is) and its (possessive)</li>\n<li>Using to denote plural: DVD’s (wrong) vs DVDs (correct)</li>\n<li>When writing Dos and Don’ts (not Do’s and Don’ts)</li>\n<li>When writing decades 1990s (not 1990’s); the ’80s (not the 80’s)</li>\n</ul>\n<p><span id=\"British English\"></span>\n<strong>British English</strong></p>\n<p>Use the British ‘s’ in words such as ‘realise’, and ‘specialise’, rather than the American ‘z’.</p>\n<p><span id=\"Bullet points\"></span>\n<strong>Bullet points</strong></p>\n<p>Bullet points are a good way to make web copy easier to scan for readers. Bullet points should always be round, and limit bullets to six or fewer. Make sure they are grammatically logical.</p>\n<p><span id=\"Capital letters\"></span>\n<strong>Capital letters</strong></p>\n<p>Never use all capital letters. Headlines follow usual sentence structure, with only the first word and proper nouns utilising capitals.</p>\n<p><span id=\"Company names and references\"></span>\n<strong>Company names and references</strong></p>\n<p>Follow punctuation and capitalisation of company names and products as they are branded.</p>\n<blockquote>\n E.ON, iPhone, iSaver\n</blockquote> \n\n<p>When referencing a company in a news or guide, remember to always keep them in the singular.</p>\n<blockquote>\n BT is launching a new ... (not BT are launching a new ...)\n</blockquote>\n\n<p><span id=\"Contractions\"></span>\n<strong>Contractions</strong></p>\n<p>Our tone of voice is friendly and familiar, so it’s fine to use contractions like ‘they’ll’, ‘it’ll’, ‘isn’t’.</p>\n<p><span id=\"Dashes and hyphens\"></span>\n<strong>Dashes and hyphens</strong></p>\n<p>If you use a dash within a sentence to create emphasis, then use a long em dash – rather than a hyphen (-).\nCompound adjectives before a noun generally use a hyphen (e.g. ‘the well-organised energy provider’). After a noun, they should be separated (e.g. ‘the energy provider was well organised’).</p>\n<p><span id=\"Dates\"></span>\n<strong>Dates</strong></p>\n<p>Always write out the date, using day, month, year format in news and guides: </p>\n<blockquote>\n 9 December 2013. When using dates in tables, this may be shortened for space reasons to 9/12/13\n</blockquote> \n\n<p>In forms when asking for a date we always use the DD/MM/YYYY format.</p>\n<p><span id=\"Exclamation marks\"></span>\n<strong>Exclamation marks</strong></p>\n<p>Use sparingly, never in headers or intro copy, best suited for marketing/promotional material or news/blogs. </p>\n<p><span id=\"Full stops\"></span>\n<strong>Full stops</strong></p>\n<p>Don’t use full stops at the end of headlines.</p>\n<p><span id=\"Government\"></span>\n<strong>Government</strong></p>\n<p>Do not capitalise unless starting a sentence. The abbreviated Gov’t can be used in headlines and desk heads/straplines. </p>\n<p><span id=\"Legals, disclaimers and caveats\"></span>\n<strong>Legals, disclaimers and caveats</strong></p>\n<p>Superscript numbering should be used when there is more than one caveat, however, when there is only one caveat in a communication, an asterisk (*) should be used.</p>\n<p><span id=\"Less vs. Fewer\"></span>\n<strong>Less vs. Fewer</strong></p>\n<p>Use “less” when the subject is something that cannot be counted</p>\n<blockquote>\nShe wants to have less clutter on her desk.\n</blockquote>\n\n<p>Use “fewer” when the subject is something that can be counted</p>\n<blockquote>\nHe sent fewer texts after getting a £100 phone bill.\n</blockquote>\n\n<p><span id=\"Numbers\"></span>\n<strong>Numbers</strong></p>\n<ul>\n<li>Numbers nine and below must be written out: one, two, three, etc. </li>\n<li>Numbers 10 and higher use numerals: 15, 67, 987, etc.</li>\n<li>Spell out any amount when it starts a sentence: Three hundred and twenty customers surveyed said they had been wrongly billed on more than 15 occasions. </li>\n<li>Use commas with figures 1,000 and above. </li>\n<li>With million and billion, write out in body copy; the abbreviation (£43bn) is acceptable in news headlines for space reasons.</li>\n<li>Always use numerals when using the “£” or “%” symbols</li>\n</ul>\n<p><span id=\"OK\"></span>\n<strong>OK</strong></p>\n<p>Not Ok or okay.</p>\n<p><span id=\"Percentages\"></span>\n<strong>Percentages</strong></p>\n<p>Always use the “%” symbol; only use “per cent” at the start of a sentence. Always use numerals when talking about percentages (54%), unless it starts a sentence. We never use abbreviation “pc” when talking about percentages.</p>\n<blockquote>\n Fifty-five per cent of the population own an iPhone.\n</blockquote>\n\n<blockquote>\n Of those surveyed, 55% said they had been denied a credit card. \n</blockquote>\n\n<p><span id=\"Plans vs tariffs\"></span>\n<strong>Plans vs tariffs</strong></p>\n<p>Plans is the preferred term, only switch to use of tariff when trying to avoid repetition within one email or guide.</p>\n<p><span id=\"Quotation marks\"></span>\n<strong>Quotation marks</strong></p>\n<p>Always use double quotation marks (“) when placing a direct quote in body copy.</p>\n<p>Use single quote marks (‘) in headlines, standfirsts/dek heads and when quoting within a quote:</p>\n<blockquote>\n Super-fast broadband uptake ‘reaches 20% in UK’\n</blockquote> \n\n<blockquote>\n “Super-fast broadband will be the engine for growth for the broadband future of Britain," he said. \n</blockquote> \n\n<p><span id=\"Titles and Names\"></span>\n<strong>Titles and Names</strong></p>\n<p>Professional titles are not capitalised unless it directly precedes a name:</p>\n<blockquote>\n Director of Consumer Policy Jane Smith said that the news was a shock.\n</blockquote>\n\n<blockquote>\n Jane Smith, director of consumer policy at the company, said the news came as a shock.\n</blockquote>\n\n<p>On first reference, use the person’s first and last name. On subsequent references, last name only is used. </p>\n<p>Mr/Mrs/Miss/Ms is never used.</p>\n<blockquote>\n Energy Secretary Ed Davey was on-hand to field questions about the news. Davey arrived late, citing a long-running meeting.\n</blockquote>\n\n<p><span id=\"Wi-Fi\"></span>\n<strong>Wi-Fi</strong></p>\n<p>Not wifi, WIFI, WiFi, etc. </p>\n","subNav":[{"name":"Abbreviations","link":"#Abbreviations"},{"name":" Acronyms","link":"#Acronyms"},{"name":"Ampersand","link":"#Ampersand"},{"name":"Apostrophes","link":"#Apostrophes"},{"name":"British English","link":"#British English"},{"name":"Bullet points","link":"#Bullet points"},{"name":"Capital letters","link":"#Capital letters"},{"name":"Company names and references","link":"#Company names and references"},{"name":"Contractions","link":"#Contractions"},{"name":"Dashes and hyphens","link":"#Dashes and hyphens"},{"name":"Dates","link":"#Dates"},{"name":"Full stops","link":"#Full stops"},{"name":"Government","link":"#Government"},{"name":"Legals, disclaimers and caveats","link":"#Legals, disclaimers and caveats"},{"name":"Less vs. Fewer","link":"#Less vs. Fewer"},{"name":"Numbers","link":"#Numbers"},{"name":"OK","link":"#OK"},{"name":"Percentages","link":"#Percentages"},{"name":"Plans vs tariffs","link":"#Plans vs tariffs"},{"name":"Quotation marks","link":"#Quotation marks"},{"name":"Titles and Names","link":"#Titles and Names"},{"name":"Wi-Fi","link":"#Wi-Fi"}]},{"name":"Usability testing","page":"validating-designs.html","template":"styleguide/templates/simple.tpl","section":"design","content":"<!-- Index -->\n\n\n\n<!-- Intro -->\n<p>Usability testing can be used to establish problems that need solving, validate a hypothesis or to test a solution. Depending on what's required, there are different types of testing availability.</p> \n\n<p>However, not every change needs to be tested. This page is deisgned to highlight when should and shouldn't use testing, and how we should do it when we do.</p>\n\n<!-- When don’t we need validation of our designs? -->\n<div class=\"us-content-group\">\n <a id=\"no-validation\"></a>\n <h2>When don’t we need validation of our designs?</h2>\n <p>Plenty of design changes don’t require upfront hypothesis validation. If the design change is due to any of the following it may not need validation from users:</p>\n <ul>\n <li><a href=\"#Site-consistency\">Site consistency</a></li>\n <li><a href=\"#Design-conventions\">Design conventions</a></li>\n <li><a href=\"#Usability-conventions\">Usability conventions</a></li>\n <li><a href=\"#External-requirements\">External requirements</a></li>\n </ul>\n\n <a id=\"Site-consistency\"></a>\n <h3>Site consistency</h3>\n <p>Colour, font, shading, button types, and anything in uStyle is a given. We want to achieve site consistency for brand reasons.</p>\n <p>Functionality, UI, hierarchy are not 'look and feel' consistency.</p>\n <h4>Example</h4>\n <p>Moving the first two Broadband designs ('Oldest stlye' and 'Old style') to be more ‘in line’ with the third design ('New style') is an on-going project of consistency.</p>\n <p>Changing the colours of the first design or moving to a consistent layout would not require testing.</p>\n <p>Similarly, changing the row-data presentation in the second example to be more consistent with the third example would not require testing.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <i>Oldest style</i><img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/site-consistency01.png\">\n <i>New style</i><img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/site-consistency03.png\">\n </div>\n <div class=\"us-col-md-6\">\n <i>Old style</i><img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/site-consistency02.png\">\n </div>\n </div>\n\n <a id=\"Design-conventions\"></a>\n <h3>Design conventions</h3>\n <p>There are certain web-design standards, and in our aim for a consistent user experience, maintaining web consistency is an important part of that.</p>\n <p>The following is a non-exhaustive list of design conventions:</p>\n <ul>\n <li>Logos top (left) and links to HP</li>\n <li>Navigation is top of the page</li>\n <li>Text links are blue (pre-click)</li>\n <li>Buttons link to stuff (affordance)</li>\n <li>Icons (search)</li>\n <li>Visual hierarchy</li>\n <li>Search (top right)</li>\n <li>Clickable form fields</li>\n </ul>\n <h4>Example</h4>\n <p>A basic UI convention is the distinction between active elements and inactive elements, with inactive elements being 'greyed out'.</p>\n <p>The below car insurance has an overlay that must be interacted with to continue with the page below, but only part of the page is greyed out.</p>\n <p>Five clickable elements on this page aren’t greyed out, despite not being clickable:</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/design-conventions.png\">\n </div>\n </div>\n\n <a id=\"Usability-conventions\"></a>\n <h3>Usability conventions</h3>\n <p>The <a href=\"https://www.nngroup.com/articles/ten-usability-heuristics/\">ten basic usability heurisitcs</a>, like basic design rules, give us a number of usability principles that must be sense-checked against. Designs that do not meet these requirements give us a clear problem to be solved without the requirement of validation. </p>\n\n <h4>Visibility of system status</h4> \n <p>Keep users informed about what is going on through appropriate feedback within reasonable time. In the example below the user cannot see what impact selecting a dropdown option has because the overlay covers the results table:</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-8\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/ux-conventions-visibility.png\">\n <p>\n <i>"Did updating those filters do anything?"</i>\n </p>\n </div>\n </div>\n \n <h4>Match between system and the real world</h4>\n <p>Speak the users' language with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-4\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/ux-conventions-real-world.png\">\n <p>\n <i>"Large as in size of people or house? Doesn’t it depend what they’re doing? What’s a Plusnet safeguard?"</i>\n </p>\n </div>\n </div>\n \n <h4>User control and freedom</h4>\n <p>If a user makes a mistake, let them undo, redo, go back, etc...</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-10\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/ux-conventions-freedom.png\">\n <p>\n <i>"I wanted more details...and now i've left the site....how do I get back?”</i>\n </p>\n </div>\n </div>\n \n <h4>Consistency and standards</h4>\n <p>Users should not have to wonder whether different words, situations, or actions mean the same thing.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-8\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/ux-conventions-consistency.png\">\n <p>\n <i>"Is a plan and a tariff the same thing?”</i>\n </p>\n </div>\n </div>\n \n <h4>Error prevention</h4>\n <p>Even better than good error messages is a careful design which prevents a problem from occurring in the first place.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-8\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/ux-conventions-error.png\">\n <p>\n <i>"No deals, why did you present it as an option?"</i>\n </p>\n </div>\n </div>\n \n <h4>Recognition rather than recall</h4>\n <p>Minimise the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part to another.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-4\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/ux-conventions-recognition.png\">\n <p>\n <i>"I’ve filtered these results, but by what?"</i>\n </p>\n </div>\n </div>\n \n <h4>Flexibility and efficiency of use</h4>\n <p>llow users to tailor frequent actions. 1-button checkout via Amazon, or Add to my wishlist via Airbnb.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-8\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/ux-conventions-flexibility.png\">\n <p>\n <i>"I personalised all these details yesterday, why has it just reverted?"</i>\n </p>\n </div>\n </div>\n \n <h4>Aesthetic and minimalist design</h4>\n <p>Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/ux-conventions-minimalist.png\">\n <p>\n <i>"What am I supposed to do on this page?"</i>\n </p>\n </div>\n </div>\n \n <h4>Help users recognise, diagnose, and recover from errors</h4>\n <p>Error messages should be expressed in plain language, precisely indicate the problem, and constructively suggest a solution.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/ux-conventions-errors.png\">\n <p>\n <i>"Ahhhh....the ol' requested format..."</i>\n </p>\n </div>\n </div>\n \n <h4>Help and documentation</h4>\n <p>Any such help information should be easy to find, focused on the user's task, list concrete steps to be carried out, and not be too wordy.</p>\n\n <a id=\"External-requirements\"></a>\n <h3>External requirements</h3>\n <p>Sometimes design is dictated - commercial or regulatory or business.</p>\n <p>If there is flexibility around how these are implemented we can enter the design process. Sometimes there isn’t though, and they have to be implemented.</p>\n <h4>Example</h4>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/external-requirements.png\">\n <p>\n <i>"The brand red clashes with this provider's red."</i>\n </p>\n </div>\n </div> \n</div>\n\n\n<!-- When do we need validation of our designs? -->\n\n<div class=\"us-content-group\">\n <a id=\"validation\"></a>\n <h2>When do we need validation?</h2>\n <p>If our change isn’t down to one of the above then it’s problem solving, so we need to structure our approach to design differently - we need to <strong>understand the problem</strong> first.</p>\n \n <h3>Symptoms not problems</h3>\n <p>A problem statement is the design brief, but first we need a good problem.</p>\n <p>Data tells us about results, not causes. It tells us that it looks like there is a problem, but now what the problem is. Data comes from:</p>\n <ul>\n <li>GA</li>\n <li>Fullstory</li>\n <li>Crazyegg</li>\n </ul>\n <p>Similarly business objectives are things we desire to happen. They tell us what we want to the outcome to be. Objectives sound like:</p>\n <ul>\n <li>Increase conversion by…</li>\n <li>Reduce drop out by…</li>\n <li>Stop people bouncing on…</li>\n <li>Stop people clicking out on…</li>\n <li>Get people to click on…</li>\n </ul>\n <p>These tell us there is a problem, but we don’t know what it is.</p>\n <p>A real problems is something we’ve observed a significant number of occasions.</p>\n\n <h3>How to define the problem</h3>\n <p>Testing designed to steer design, or validate assumptions about what problems users are encountering, is known as ‘formative’ testing. It’s open-ended, and the tasks are simply to run a comparison, or to go through a journey start to finish.</p>\n <p>Any type of testing, whether it be face-to-face, guerilla, remote, or interviews, can help define the problem. This allows us to frame the problem with a problem statement. A problem statement is:</p>\n <blockquote>A concise description of the issues that need to be addressed - it is specific, measurable and explains what it impacts. There are no assumptions or solutions.</blockquote>\n\n <h3>Only with a problem can you design a solution</h3>\n <p>Once the problem is clearly defined, start trying to solve it (one problem at a time), but remember to validate the solutions as soon as possible.</p>\n <p>'Summative' usability testing can help validate. Summative testing gives the user a particular task to complete that tests the solution against the problem. Again, any type of testing can perform this function.</p>\n\n <h3>But wait!</h3>\n <p>User testing is great to validate flows, designs and interactions, but it's not exhaustive. There might be bugs, or solutions that don't work in certain scenarios. This is where in-house testing and the device lab comes in.</p>\n</div>\n\n\n\n<!-- Testing -->\n\n<a id=\"testing\"></a>\n<div class=\"us-content-group\">\n <h2>How to test</h2>\n <p>So what type of testing should we use, and when?</p>\n <a href=\"https://www.nngroup.com/articles/which-ux-research-methods/\">This article by Nielsen Norman Group</a> is a great starting point to understand testing methods and when to apply each.<p></p> \n <p>There are over 20 types of validation, including quant methods, but here at uSwitch we predominantly use the following:</p>\n <ul>\n <li><a href=\"#interviews\">Interviews</a></li>\n <li><a href=\"#face-to-face\">Face-to-face usability testing</a></li>\n <li><a href=\"#guerilla-testing\">Guerilla testing</a></li>\n <li><a href=\"#in-house-testing\">In-house testing</a></li>\n </ul>\n \n <a id=\"interviews\"></a>\n <h3>Interviews</h3>\n <p>Interviews are designed to understand behaviours, needs and pain-points around a particular task.</p> \n <p>They are open-ended and can help define design personas - archetypes that can be used as a reference point for any design changes for that product.</p> \n <h4>How</h4>\n <p>See the interview checklist</p>\n <h4>When</h4>\n <p>Interviews are most commonly used at the earliest stage of product development to determine the needs/problems that the product will address.</p> \n\n <a id=\"face-to-face\"></a>\n <h3>Face-to-face usability testing</h3>\n <p>Face-to-face testing can be used in a formative or summative sense, and can be combined with an interview and simple exercises, like card sorting.</p>\n <p>This is the highest-fidelity form of validation. The feedback you receive will be of the highest quality, but it will also take you the most time.</p> \n \n <h4>How</h4>\n <p>Face-to-face testing consists of preparing a particular task, putting it in front of real users, and seeing how they get on.</p> \n <p>As it’s face-to-face, you can also interview users in this format, or ask them to complete exercises such as:</p>\n <ul>\n <li>Product Reaction Cards - Used to determine how desirable a product or process is</li>\n <li>Unmarked Semantic Differential Scales - Used to understand reactions to particular words and phrases</li>\n <li>Card sorting - Used to understand hierarchy of importance, or expected flows</li>\n </ul>\n <p>See the testing checklist for a step-by-step guide to setting up and running a test. The most crucial components are:</p>\n <ul>\n <li>Goals - What are you trying to achieve?</li>\n <li>Tasks - Every task you ask a user to complete should answer a question you need answered. Formative testing on an exisiting product will have open-ended goals, whereas tasks designed to test a solution should be specific.</li>\n <li>Test plan - Script, scenario, tasks, participants, questions, anything the moderators needs. Write it all down so you have it to hand during the test.</li> \n <li>Test the test - Something will go wrong, promise, so test it first.</li>\n <li>Get your team involved - There's nothing like seeing your solution fail first hand.</li>\n </ul>\n <h4>When</h4>\n <p>Anytime. For an existing product where the objective is to discover problems, an open-ended test asking users to complete the most common journey. This should be done at least once a year.</p>\n <p>For a new product or feature face-to-face testing is always a good idea. The objective here is to <strong>test the solution against the problem</strong> using particular tasks.</p> \n\n <a id=\"guerilla-testing\"></a>\n <h3>Guerilla testing</h3> \n <p>A lower-fidelity version of face-to-face testing, guerilla testing sacrifices quality for speed. The feedback you receive will be of lower quality as the participants may not fit user types, and the testing environment is more ‘ad-hoc’ (think coffee shops, sandwich places).</p>\n <p>Just like face-to-face testing, guerilla testing involves preparing a particular task, putting it in front of real users, and seeing how they get on. You can also do interviews and get quant feedback but again, the feedback will be lower quality.</p> \n <h4>How</h4>\n <p>See the guerilla testing checklist for a step-by-step guide to setting up and running a test.</p>\n <p>The number of participants should be at least 5 for guerilla testing, but you can use your discretion.</p> \n <h4>When</h4>\n <p>Guerilla testing is perfect at the early stage of a design, when you want to sense check a particular flow, component, or wording.</p> \n <p>Any fidelity of design can be used. Guerilla testing works best when kept relatively informal, and the participant feels at ease.</p>\n \n <a id=\"in-house-testing\"></a>\n <h3>In-house testing</h3>\n <p>Asking your colleagues in the office for feedback. This is the quickest but lowest quality form of validation.</p> \n <p>Like guerilla testing this is an informal type of testing, but the quality is considerably lower owing to familiarity with the product, bias based on personal relationships and a mismatch between persona types and testers.</p> \n <p>In-house testing is perfect for bug testing, seeing if anyone can ‘break’ your design, and last-minute tweaks. It is not for designed to surface flow or interaction changes.</p> \n <h4>How</h4>\n <p>See the bug-testing checklist</p>\n <h4>When</h4>\n <p>A few days before release</p> \n \n</div>","subNav":[{"name":"When don't we need user validation?","link":"#no-validation"},{"name":"When do we need user validation?","link":"#validation"},{"name":"How to test","link":"#testing"}]},{"name":"Icons","page":"icons.html","template":"styleguide/templates/styleguide.tpl","section":"design","blocks":[{"page":"Design/Icons","name":"Icons","partial":"icons","description":"<p> Our icons are displayed via <code>xlink:href</code> in the <code><use></code> tags. This allows us to directly embed SVGs in a flexible manner and be able to apply transformations and any sort of colours onto them.</p>\n<p> We use an SVG sprite called <code>icons.svg</code> that is versioned just like ustyle. As per the examples, the icons are referenced via the ID, like this: <code>icons.svg#icon-bookmark</code></p>\n<p> <strong>Accessibility</strong>: In most cases, icons are purely presentational elements. In this scenario, you want to add: <code>aria-hidden="true"</code> and <code>role="presentation"</code> to your code.</p>\n<h4 id=\"usage\">Usage</h4>\n<ul>\n<li><p>Suffixing with <code>--{size}</code> where size is one of <em>small</em>, <em>medium</em> or <em>large</em> will change the size of the icon from 16px, 32px and 64px respectively.</p>\n</li>\n<li><p><code>.us-icon--{size}--sm-tablet</code> and <code>.us-icon--{size}--mobile</code> will override icon sizes for those screen size</p>\n</li>\n<li><p><code>.us-icon--notext</code> allows you to set any element with no content to an icon</p>\n</li>\n<li><p>blue, typegrey, inputgrey, typecyan and custom are colors that can be set on the icon with <code>.us-icon--{color}</code></p>\n</li>\n<li><p>Colors can be changed by adding your own <code>fill:</code> style to the SVG.</p>\n</li>\n<li><p><a href=\"https://github.com/jonathantneal/svg4everybody\">svg4everybody.js</a> is needed for Internet Explorer browsers</p>\n</li>\n</ul>\n","state":[{"name":"alarm","escaped":"alarm","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--alarm\">\n <use xlink:href=\"/images/icons.svg#icon-alarm\"></use>\n </svg>"}},{"name":"android","escaped":"android","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--android\">\n <use xlink:href=\"/images/icons.svg#icon-android\"></use>\n </svg>"}},{"name":"arrow-circle","escaped":"arrow-circle","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--arrow-circle\">\n <use xlink:href=\"/images/icons.svg#icon-arrow-circle\"></use>\n </svg>"}},{"name":"arrow-up","escaped":"arrow-up","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--arrow-up\">\n <use xlink:href=\"/images/icons.svg#icon-arrow-up\"></use>\n </svg>"}},{"name":"arrow-down","escaped":"arrow-down","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--arrow-down\">\n <use xlink:href=\"/images/icons.svg#icon-arrow-down\"></use>\n </svg>"}},{"name":"book","escaped":"book","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--book\">\n <use xlink:href=\"/images/icons.svg#icon-book\"></use>\n </svg>"}},{"name":"bookmark","escaped":"bookmark","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--bookmark\">\n <use xlink:href=\"/images/icons.svg#icon-bookmark\"></use>\n </svg>"}},{"name":"breadcrumb","escaped":"breadcrumb","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--breadcrumb\">\n <use xlink:href=\"/images/icons.svg#icon-breadcrumb\"></use>\n </svg>"}},{"name":"calculator","escaped":"calculator","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--calculator\">\n <use xlink:href=\"/images/icons.svg#icon-calculator\"></use>\n </svg>"}},{"name":"calendar","escaped":"calendar","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--calendar\">\n <use xlink:href=\"/images/icons.svg#icon-calendar\"></use>\n </svg>"}},{"name":"car","escaped":"car","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--car\">\n <use xlink:href=\"/images/icons.svg#icon-car\"></use>\n </svg>"}},{"name":"checkbox-tick","escaped":"checkbox-tick","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--checkbox-tick\">\n <use xlink:href=\"/images/icons.svg#icon-checkbox-tick\"></use>\n </svg>"}},{"name":"chevron-right","escaped":"chevron-right","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--chevron-right\">\n <use xlink:href=\"/images/icons.svg#icon-chevron-right\"></use>\n </svg>"}},{"name":"clock","escaped":"clock","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--clock\">\n <use xlink:href=\"/images/icons.svg#icon-clock\"></use>\n </svg>"}},{"name":"close","escaped":"close","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--close\">\n <use xlink:href=\"/images/icons.svg#icon-close\"></use>\n </svg>"}},{"name":"cog","escaped":"cog","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--cog\">\n <use xlink:href=\"/images/icons.svg#icon-cog\"></use>\n </svg>"}},{"name":"credit-card","escaped":"credit-card","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--credit-card\">\n <use xlink:href=\"/images/icons.svg#icon-credit-card\"></use>\n </svg>"}},{"name":"cross","escaped":"cross","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--cross\">\n <use xlink:href=\"/images/icons.svg#icon-cross\"></use>\n </svg>"}},{"name":"dual-fuel","escaped":"dual-fuel","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--dual-fuel\">\n <use xlink:href=\"/images/icons.svg#icon-dual-fuel\"></use>\n </svg>"}},{"name":"electric-light","escaped":"electric-light","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--electric-light\">\n <use xlink:href=\"/images/icons.svg#icon-electric-light\"></use>\n </svg>"}},{"name":"envelope","escaped":"envelope","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--envelope\">\n <use xlink:href=\"/images/icons.svg#icon-envelope\"></use>\n </svg>"}},{"name":"exit-noexit","escaped":"exit-noexit","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--exit-noexit\">\n <use xlink:href=\"/images/icons.svg#icon-exit-noexit\"></use>\n </svg>"}},{"name":"facebook","escaped":"facebook","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--facebook\">\n <use xlink:href=\"/images/icons.svg#icon-facebook\"></use>\n </svg>"}},{"name":"facebook-brand","escaped":"facebook-brand","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--facebook-brand\">\n <use xlink:href=\"/images/icons.svg#icon-facebook-brand\"></use>\n </svg>"}},{"name":"filter","escaped":"filter","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--filter\">\n <use xlink:href=\"/images/icons.svg#icon-filter\"></use>\n </svg>"}},{"name":"fixed-variable","escaped":"fixed-variable","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--fixed-variable\">\n <use xlink:href=\"/images/icons.svg#icon-fixed-variable\"></use>\n </svg>"}},{"name":"gas","escaped":"gas","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--gas\">\n <use xlink:href=\"/images/icons.svg#icon-gas\"></use>\n </svg>"}},{"name":"gauge","escaped":"gauge","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--gauge\">\n <use xlink:href=\"/images/icons.svg#icon-gauge\"></use>\n </svg>"}},{"name":"github","escaped":"github","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--github\">\n <use xlink:href=\"/images/icons.svg#icon-github\"></use>\n </svg>"}},{"name":"google","escaped":"google","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--google\">\n <use xlink:href=\"/images/icons.svg#icon-google\"></use>\n </svg>"}},{"name":"google-brand","escaped":"google-brand","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--google-brand\">\n <use xlink:href=\"/images/icons.svg#icon-google-brand\"></use>\n </svg>"}},{"name":"graph-up","escaped":"graph-up","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--graph-up\">\n <use xlink:href=\"/images/icons.svg#icon-graph-up\"></use>\n </svg>"}},{"name":"home","escaped":"home","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--home\">\n <use xlink:href=\"/images/icons.svg#icon-home\"></use>\n </svg>"}},{"name":"hot","escaped":"hot","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--hot\">\n <use xlink:href=\"/images/icons.svg#icon-hot\"></use>\n </svg>"}},{"name":"info","escaped":"info","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--info\">\n <use xlink:href=\"/images/icons.svg#icon-info\"></use>\n </svg>"}},{"name":"kettle","escaped":"kettle","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--kettle\">\n <use xlink:href=\"/images/icons.svg#icon-kettle\"></use>\n </svg>"}},{"name":"key","escaped":"key","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--key\">\n <use xlink:href=\"/images/icons.svg#icon-key\"></use>\n </svg>"}},{"name":"lock","escaped":"lock","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--lock\">\n <use xlink:href=\"/images/icons.svg#icon-lock\"></use>\n </svg>"}},{"name":"magnify-in","escaped":"magnify-in","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--magnify-in\">\n <use xlink:href=\"/images/icons.svg#icon-magnify-in\"></use>\n </svg>"}},{"name":"magnify","escaped":"magnify","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--magnify\">\n <use xlink:href=\"/images/icons.svg#icon-magnify\"></use>\n </svg>"}},{"name":"menu","escaped":"menu","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--menu\">\n <use xlink:href=\"/images/icons.svg#icon-menu\"></use>\n </svg>"}},{"name":"message","escaped":"message","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--message\">\n <use xlink:href=\"/images/icons.svg#icon-message\"></use>\n </svg>"}},{"name":"mobile","escaped":"mobile","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--mobile\">\n <use xlink:href=\"/images/icons.svg#icon-mobile\"></use>\n </svg>"}},{"name":"monthly-dd","escaped":"monthly-dd","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--monthly-dd\">\n <use xlink:href=\"/images/icons.svg#icon-monthly-dd\"></use>\n </svg>"}},{"name":"network","escaped":"network","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--network\">\n <use xlink:href=\"/images/icons.svg#icon-network\"></use>\n </svg>"}},{"name":"no-exit","escaped":"no-exit","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--no-exit\">\n <use xlink:href=\"/images/icons.svg#icon-no-exit\"></use>\n </svg>"}},{"name":"pdf","escaped":"pdf","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--pdf\">\n <use xlink:href=\"/images/icons.svg#icon-pdf\"></use>\n </svg>"}},{"name":"pencil","escaped":"pencil","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--pencil\">\n <use xlink:href=\"/images/icons.svg#icon-pencil\"></use>\n </svg>"}},{"name":"person-add","escaped":"person-add","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--person-add\">\n <use xlink:href=\"/images/icons.svg#icon-person-add\"></use>\n </svg>"}},{"name":"person","escaped":"person","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--person\">\n <use xlink:href=\"/images/icons.svg#icon-person\"></use>\n </svg>"}},{"name":"phone","escaped":"phone","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--phone\">\n <use xlink:href=\"/images/icons.svg#icon-phone\"></use>\n </svg>"}},{"name":"piggy-bank","escaped":"piggy-bank","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--piggy-bank\">\n <use xlink:href=\"/images/icons.svg#icon-piggy-bank\"></use>\n </svg>"}},{"name":"pin","escaped":"pin","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--pin\">\n <use xlink:href=\"/images/icons.svg#icon-pin\"></use>\n </svg>"}},{"name":"pound-note","escaped":"pound-note","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--pound-note\">\n <use xlink:href=\"/images/icons.svg#icon-pound-note\"></use>\n </svg>"}},{"name":"present","escaped":"present","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--present\">\n <use xlink:href=\"/images/icons.svg#icon-present\"></use>\n </svg>"}},{"name":"print","escaped":"print","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--print\">\n <use xlink:href=\"/images/icons.svg#icon-print\"></use>\n </svg>"}},{"name":"quarterly-dd","escaped":"quarterly-dd","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--quarterly-dd\">\n <use xlink:href=\"/images/icons.svg#icon-quarterly-dd\"></use>\n </svg>"}},{"name":"question-circle","escaped":"question-circle","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--question-circle\">\n <use xlink:href=\"/images/icons.svg#icon-question-circle\"></use>\n </svg>"}},{"name":"quote","escaped":"quote","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--quote\">\n <use xlink:href=\"/images/icons.svg#icon-quote\"></use>\n </svg>"}},{"name":"recycle","escaped":"recycle","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--recycle\">\n <use xlink:href=\"/images/icons.svg#icon-recycle\"></use>\n </svg>"}},{"name":"remove","escaped":"remove","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--remove\">\n <use xlink:href=\"/images/icons.svg#icon-remove\"></use>\n </svg>"}},{"name":"renewable","escaped":"renewable","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--renewable\">\n <use xlink:href=\"/images/icons.svg#icon-renewable\"></use>\n </svg>"}},{"name":"results","escaped":"results","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--results\">\n <use xlink:href=\"/images/icons.svg#icon-results\"></use>\n </svg>"}},{"name":"save","escaped":"save","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--save\">\n <use xlink:href=\"/images/icons.svg#icon-save\"></use>\n </svg>"}},{"name":"share","escaped":"share","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--share\">\n <use xlink:href=\"/images/icons.svg#icon-share\"></use>\n </svg>"}},{"name":"sim","escaped":"sim","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--sim\">\n <use xlink:href=\"/images/icons.svg#icon-sim\"></use>\n </svg>"}},{"name":"smiley","escaped":"smiley","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--smiley\">\n <use xlink:href=\"/images/icons.svg#icon-smiley\"></use>\n </svg>"}},{"name":"sort","escaped":"sort","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--sort\">\n <use xlink:href=\"/images/icons.svg#icon-sort\"></use>\n </svg>"}},{"name":"speech-circle","escaped":"speech-circle","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--speech-circle\">\n <use xlink:href=\"/images/icons.svg#icon-speech-circle\"></use>\n </svg>"}},{"name":"speech","escaped":"speech","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--speech\">\n <use xlink:href=\"/images/icons.svg#icon-speech\"></use>\n </svg>"}},{"name":"spinner","escaped":"spinner","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--spinner\">\n <use xlink:href=\"/images/icons.svg#icon-spinner\"></use>\n </svg>"}},{"name":"star-half","escaped":"star-half","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--star-half\">\n <use xlink:href=\"/images/icons.svg#icon-star-half\"></use>\n </svg>"}},{"name":"star","escaped":"star","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--star\">\n <use xlink:href=\"/images/icons.svg#icon-star\"></use>\n </svg>"}},{"name":"starline-half","escaped":"starline-half","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--starline-half\">\n <use xlink:href=\"/images/icons.svg#icon-starline-half\"></use>\n </svg>"}},{"name":"starline","escaped":"starline","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--starline\">\n <use xlink:href=\"/images/icons.svg#icon-starline\"></use>\n </svg>"}},{"name":"talk","escaped":"talk","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--talk\">\n <use xlink:href=\"/images/icons.svg#icon-talk\"></use>\n </svg>"}},{"name":"tick-circle","escaped":"tick-circle","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--tick-circle\">\n <use xlink:href=\"/images/icons.svg#icon-tick-circle\"></use>\n </svg>"}},{"name":"tick","escaped":"tick","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--tick\">\n <use xlink:href=\"/images/icons.svg#icon-tick\"></use>\n </svg>"}},{"name":"tv","escaped":"tv","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--tv\">\n <use xlink:href=\"/images/icons.svg#icon-tv\"></use>\n </svg>"}},{"name":"twitter","escaped":"twitter","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--twitter\">\n <use xlink:href=\"/images/icons.svg#icon-twitter\"></use>\n </svg>"}},{"name":"twitter-brand","escaped":"twitter-brand","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--twitter-brand\">\n <use xlink:href=\"/images/icons.svg#icon-twitter-brand\"></use>\n </svg>"}},{"name":"uswitch","escaped":"uswitch","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--uswitch\">\n <use xlink:href=\"/images/icons.svg#icon-uswitch\"></use>\n </svg>"}},{"name":"variable","escaped":"variable","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--variable\">\n <use xlink:href=\"/images/icons.svg#icon-variable\"></use>\n </svg>"}},{"name":"warning-circle","escaped":"warning-circle","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--warning-circle\">\n <use xlink:href=\"/images/icons.svg#icon-warning-circle\"></use>\n </svg>"}},{"name":"wifi","escaped":"wifi","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--wifi\">\n <use xlink:href=\"/images/icons.svg#icon-wifi\"></use>\n </svg>"}},{"name":"wiki","escaped":"wiki","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--wiki\">\n <use xlink:href=\"/images/icons.svg#icon-wiki\"></use>\n </svg>"}},{"name":"xml","escaped":"xml","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--xml\">\n <use xlink:href=\"/images/icons.svg#icon-xml\"></use>\n </svg>"}},{"name":"play","escaped":"play","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--play\">\n <use xlink:href=\"/images/icons.svg#icon-play\"></use>\n </svg>"}},{"name":"pound-circle","escaped":"pound-circle","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--pound-circle\">\n <use xlink:href=\"/images/icons.svg#icon-pound-circle\"></use>\n </svg>"}},{"name":"dashcam","escaped":"dashcam","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--dashcam\">\n <use xlink:href=\"/images/icons.svg#icon-dashcam\"></use>\n </svg>"}},{"name":"warning","escaped":"warning","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--warning\">\n <use xlink:href=\"/images/icons.svg#icon-warning\"></use>\n </svg>"}},{"name":"chevron-left","escaped":"chevron-left","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--chevron-left\">\n <use xlink:href=\"/images/icons.svg#icon-chevron-left\"></use>\n </svg>"}},{"name":"controller","escaped":"controller","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--controller\">\n <use xlink:href=\"/images/icons.svg#icon-controller\"></use>\n </svg>"}}],"markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--{$modifiers}\">\n <use xlink:href=\"/images/icons.svg#icon-{$modifiers}\"></use>\n </svg>","escaped":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--{$modifiers}\">\n <use xlink:href=\"/images/icons.svg#icon-{$modifiers}\"></use>\n </svg>"},"path":"vendor/assets/stylesheets/ustyle/icons/_base.scss","file":"_base.scss","link":"icons"}]},{"name":"Forms","page":"forms.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Forms","name":"Fields","description":"<p> This is the basic form field, <code>.us-field</code> wrapper for any single input or select. It sets a few layout options by default (margin) and styles any labels within. You can create a fake label style with <code>.us-faux-label</code></p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>All form inputs must have a corresponding label, linked to the input</p>\n</li>\n<li><p>The label should be visible; placeholders should not be relied on as not every browser can see them, nor can all screenreaders. A visible permanent label provides continuous context</p>\n</li>\n<li><p>For text inputs that are optional, add "(optional)" to the input label</p>\n</li>\n<li><p>Add <code>aria-required</code> to any input field that must to be filled in</p>\n</li>\n<li><p>See our best practices for <a href=\"../language/microcopy.html#Form text, form labels\">writing form labels</a></p>\n</li>\n</ul>\n","state":[{"name":".us-field--blocked","escaped":"us-field--blocked","description":"Blocked label styling.","markup":{"example":" <div class=\"us-field us-field--blocked\">\n <label for=\"name\">Name</label>\n <input class=\"us-form-input\" id=\"name\" name=\"name\" placeholder=\"Please enter your name\">\n </div>"}},{"name":".us-field--inline","escaped":"us-field--inline","description":"Inline label styling.","markup":{"example":" <div class=\"us-field us-field--inline\">\n <label for=\"name\">Name</label>\n <input class=\"us-form-input\" id=\"name\" name=\"name\" placeholder=\"Please enter your name\">\n </div>"}}],"markup":{"example":" <div class=\"us-field {$modifiers}\">\n <label for=\"name\">Name</label>\n <input class=\"us-form-input\" id=\"name\" name=\"name\" placeholder=\"Please enter your name\">\n </div>","escaped":" <div class=\"us-field\">\n <label for=\"name\">Name</label>\n <input class=\"us-form-input\" id=\"name\" name=\"name\" placeholder=\"Please enter your name\">\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_fields.scss","file":"_fields.scss","link":"fields"},{"page":"Pattern Library/Forms","name":"Input group","description":"<p> Input groups allow you to add "boxes" to the left or right of an input. These boxes usually contain a visual icon to represent the usage of the input.</p>\n","state":[{"name":".us-input-group--disabled","escaped":"us-input-group--disabled","description":"Disabled state for input groups.","markup":{"example":" <div class=\"us-input-group us-margin-bottom us-input-group--disabled\">\n <span class=\"us-input-group__box\"><svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon--small us-icon--inputgrey\"><use xlink:href=\"/images/icons.svg#icon-envelope\"></use></svg></span>\n <input class=\"us-form-input\" type=\"text\" id=\"email\" placeholder=\"Email\" />\n </div>\n <div class=\"us-input-group us-margin-bottom us-input-group--disabled\">\n <input class=\"us-form-input\" type=\"text\" id=\"kwh\" />\n <span class=\"us-input-group__box\">kWh</span>\n </div>"}},{"name":".us-input-group--blocked","escaped":"us-input-group--blocked","description":"Fluid style.","markup":{"example":" <div class=\"us-input-group us-margin-bottom us-input-group--blocked\">\n <span class=\"us-input-group__box\"><svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon--small us-icon--inputgrey\"><use xlink:href=\"/images/icons.svg#icon-envelope\"></use></svg></span>\n <input class=\"us-form-input\" type=\"text\" id=\"email\" placeholder=\"Email\" />\n </div>\n <div class=\"us-input-group us-margin-bottom us-input-group--blocked\">\n <input class=\"us-form-input\" type=\"text\" id=\"kwh\" />\n <span class=\"us-input-group__box\">kWh</span>\n </div>"}}],"markup":{"example":" <div class=\"us-input-group us-margin-bottom {$modifiers}\">\n <span class=\"us-input-group__box\"><svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon--small us-icon--inputgrey\"><use xlink:href=\"/images/icons.svg#icon-envelope\"></use></svg></span>\n <input class=\"us-form-input\" type=\"text\" id=\"email\" placeholder=\"Email\" />\n </div>\n <div class=\"us-input-group us-margin-bottom {$modifiers}\">\n <input class=\"us-form-input\" type=\"text\" id=\"kwh\" />\n <span class=\"us-input-group__box\">kWh</span>\n </div>","escaped":" <div class=\"us-input-group us-margin-bottom\">\n <span class=\"us-input-group__box\"><svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon--small us-icon--inputgrey\"><use xlink:href=\"/images/icons.svg#icon-envelope\"></use></svg></span>\n <input class=\"us-form-input\" type=\"text\" id=\"email\" placeholder=\"Email\" />\n </div>\n <div class=\"us-input-group us-margin-bottom\">\n <input class=\"us-form-input\" type=\"text\" id=\"kwh\" />\n <span class=\"us-input-group__box\">kWh</span>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_input-group.scss","file":"_input-group.scss","link":"input_group"},{"page":"Pattern Library/Forms","name":"Inputs","description":"<p> Our standard input styling across the website. This is specifically for text, email, password, search etc. type inputs.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>Specifying an appropriate <a href=\"https://developer.mozilla.org/en/docs/Web/HTML/Element/Input#attr-type\">type attribute</a> (e.g. type="tel" for telephone number fields) will not only control what input is displayed, but also helps mobile devices select a keyboard layout suitable for entering that type of data.</p>\n</li>\n<li><p>Where appropriate use the <a href=\"https://developer.mozilla.org/en/docs/Web/HTML/Element/Input#attr-autocomplete\">autocomplete attribute</a> to make it easier for the browser to fill in fields on the users behalf, saving them time on lengthy forms.</p>\n</li>\n</ul>\n","state":[{"name":".us-form-input--large","escaped":"us-form-input--large","description":"Larger input style.","markup":{"example":"<input class=\"us-form-input us-form-input--large\" type=\"text\" placeholder=\"Placeholder\">"}},{"name":".us-form-input--blocked","escaped":"us-form-input--blocked","description":"Fluid input style.","markup":{"example":"<input class=\"us-form-input us-form-input--blocked\" type=\"text\" placeholder=\"Placeholder\">"}},{"name":".us-form-input--error","escaped":"us-form-input--error","description":"Visual feedback for when the input has an error.","markup":{"example":"<input class=\"us-form-input us-form-input--error\" type=\"text\" placeholder=\"Placeholder\">"}},{"name":".us-form-input--success","escaped":"us-form-input--success","description":"Visual feedback for when success needs to be communicated to the user.","markup":{"example":"<input class=\"us-form-input us-form-input--success\" type=\"text\" placeholder=\"Placeholder\">"}},{"name":".us-form-input--disabled","escaped":"us-form-input--disabled","description":"Inactive state for form inputs that can't be interacted with.","markup":{"example":"<input class=\"us-form-input us-form-input--disabled\" type=\"text\" placeholder=\"Placeholder\">"}}],"markup":{"example":"<input class=\"us-form-input {$modifiers}\" type=\"text\" placeholder=\"Placeholder\">","escaped":"<input class=\"us-form-input\" type=\"text\" placeholder=\"Placeholder\">"},"path":"vendor/assets/stylesheets/ustyle/forms/_input.scss","file":"_input.scss","link":"inputs"},{"page":"Pattern Library/Forms","name":"Radios and checkboxes","description":"<p> Browsers that support screen density media features display our font icon tick or a box shadow circle. Other browsers fallback to default styling.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>Like select boxes, radio buttons are good for making a selection from a mutually exclusive list of options. The main difference between the two is that with radio buttons, the user must choose exactly one of the options.</p>\n</li>\n<li><p>Use radio buttons when each of the choices matters to the user. Each needs to be considered before they make their choice.</p>\n</li>\n<li><p>Checkboxes in a group should be used for choosing zero or more options from a list of independent options. Toggling one should not change the state of others in the group.</p>\n</li>\n<li><p>A stand-alone checkbox is good for toggling something on/off or opting in/out.</p>\n</li>\n<li><p>Provide a default selection to radio and checkbox groups if it's necessary and wont be changed by 90% of your users.</p>\n</li>\n<li><p>Try to keep the number of radio buttons and checkboxes in the same group to a maximum of 6.</p>\n</li>\n</ul>\n","state":[{"name":"us-form-input--disabled","escaped":"us-form-input--disabled","description":"Like other types of form inputs, adding this class to the element in conjunction with the disabled attribute helps to make the element look like it can't be interacted with.","markup":{"example":" <div class=\"us-field us-field--blocked\">\n <label>Do you have a different billing address?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input us-form-input--disabled\" name=\"null\" type=\"radio\">\n Yes\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"radio\">\n No\n </label>\n </div>\n </div>\n <div class=\"us-field us-field--blocked\">\n <label>How would you like to be contacted?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input us-form-input--disabled\" name=\"null\" type=\"checkbox\">\n Mobile\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"checkbox\">\n Email\n </label>\n </div>\n </div>"}}],"markup":{"example":" <div class=\"us-field us-field--blocked\">\n <label>Do you have a different billing address?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input {$modifiers}\" name=\"null\" type=\"radio\">\n Yes\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"radio\">\n No\n </label>\n </div>\n </div>\n <div class=\"us-field us-field--blocked\">\n <label>How would you like to be contacted?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input {$modifiers}\" name=\"null\" type=\"checkbox\">\n Mobile\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"checkbox\">\n Email\n </label>\n </div>\n </div>","escaped":" <div class=\"us-field us-field--blocked\">\n <label>Do you have a different billing address?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input\" name=\"null\" type=\"radio\">\n Yes\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"radio\">\n No\n </label>\n </div>\n </div>\n <div class=\"us-field us-field--blocked\">\n <label>How would you like to be contacted?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input\" name=\"null\" type=\"checkbox\">\n Mobile\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"checkbox\">\n Email\n </label>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_radio-checkbox.scss","file":"_radio-checkbox.scss","link":"radios_and_checkboxes"},{"page":"Pattern Library/Forms","name":"Selects","description":"<p> Select boxes allow users to choose an option or options from a list of options.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>Use select boxes when choosing one or more options from a list of related, but mutually exclusive options e.g. profession, title, month.</p>\n</li>\n<li><p>It can be tempting to put many things in a select box for users to choose from. Try to keep the list of options to between 4 and 15 so the user doesn't become overwhelmed with choices.</p>\n</li>\n</ul>\n","state":[{"name":".us-form-select--multiple","escaped":"us-form-select--multiple","description":"Removes the drop down arrow and adjusts the padding of <option> elements. Useful when using <select> elements that have the size=\"\" attribute set to anything higher than 1.","markup":{"example":" <select class=\"us-form-select us-form-select--multiple\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"}},{"name":".us-form-select--blocked","escaped":"us-form-select--blocked","description":"Fluid style.","markup":{"example":" <select class=\"us-form-select us-form-select--blocked\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"}},{"name":".us-form-select--error","escaped":"us-form-select--error","description":"Visual feedback for when the input has an error.","markup":{"example":" <select class=\"us-form-select us-form-select--error\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"}},{"name":".us-form-select--success","escaped":"us-form-select--success","description":"Visual feedback for when success needs to be communicated to the user.","markup":{"example":" <select class=\"us-form-select us-form-select--success\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"}},{"name":".us-form-select--disabled","escaped":"us-form-select--disabled","description":"Inactive state for select boxes. You may also just add the disabled attribute to the <select> element in order to achieve the same effect.","markup":{"example":" <select class=\"us-form-select us-form-select--disabled\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"}}],"markup":{"example":" <select class=\"us-form-select {$modifiers}\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>","escaped":" <select class=\"us-form-select\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"},"path":"vendor/assets/stylesheets/ustyle/forms/_select.scss","file":"_select.scss","link":"selects"},{"page":"Pattern Library/Forms","name":"Textarea","description":"<p> Our standard textarea styling across the website.</p>\n","state":[{"name":".us-form-textarea--blocked","escaped":"us-form-textarea--blocked","description":"Fluid textarea style.","markup":{"example":"<textarea class=\"us-form-textarea us-form-textarea--blocked\"></textarea>"}},{"name":".us-form-textarea--disabled","escaped":"us-form-textarea--disabled","description":"Inactive state for textareas that can't be interacted with.","markup":{"example":"<textarea class=\"us-form-textarea us-form-textarea--disabled\"></textarea>"}}],"markup":{"example":"<textarea class=\"us-form-textarea {$modifiers}\"></textarea>","escaped":"<textarea class=\"us-form-textarea\"></textarea>"},"path":"vendor/assets/stylesheets/ustyle/forms/_textarea.scss","file":"_textarea.scss","link":"textarea"},{"page":"Pattern Library/Forms","name":"Toggle","description":"<p> Toggle buttons provide an alternative way of displaying radio groups with a small number of options to a user.</p>\n<p> IE8 support is included with <code>radioToggle.js</code> which sets a <code>.checked</code> class on the radio button when clicked.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>Use as an alternative to radio groups that have short labels for each option (Yes/No, Opt-in/Opt-out).</p>\n</li>\n<li><p>For forms that have many short radio group questions in them, toggle buttons provide a better experience for quickly selecting answers on both desktop and mobile due to larger visible click areas for each option.</p>\n</li>\n<li><p>Limit the number of options in the toggle group to 3.</p>\n</li>\n</ul>\n","state":[{"name":".us-toggle__btn--disabled","escaped":"us-toggle__btn--disabled","description":"Visual styling for toggle buttons that can't be interacted with.","markup":{"example":" <div class=\"us-field us-field--blocked\">\n <label>Answer truthfully</label>\n <div class=\"us-toggle\">\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn us-toggle__btn--disabled\">\n Yes\n </span>\n </label>\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn\">\n No\n </span>\n </label>\n </div>\n </div>"}}],"javascript":"\n var radioToggle = new RadioToggle({\n $target: $(".us-toggle")\n })\n ","markup":{"example":" <div class=\"us-field us-field--blocked\">\n <label>Answer truthfully</label>\n <div class=\"us-toggle\">\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn {$modifiers}\">\n Yes\n </span>\n </label>\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn\">\n No\n </span>\n </label>\n </div>\n </div>","escaped":" <div class=\"us-field us-field--blocked\">\n <label>Answer truthfully</label>\n <div class=\"us-toggle\">\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn\">\n Yes\n </span>\n </label>\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn\">\n No\n </span>\n </label>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_toggle.scss","file":"_toggle.scss","link":"toggle"},{"page":"Pattern Library/Forms","name":"Validation messages","description":"<p> Used to provide more detailed feedback about the data users have entered into forms.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>For inputs that have a label above them, place the validation message between the input and the label.</p>\n</li>\n<li><p>Use success validation messages only when it makes sense to contextually. For example, they can help to reassure users about the data they entered when multiple criteria need to be satisfied, e.g. password fields.</p>\n</li>\n</ul>\n","state":[{"name":".us-validation--error","escaped":"us-validation--error","description":"Error styling for incorrect data on forms.","markup":{"example":" <div class=\"us-field\">\n <label>Email</label>\n <div class=\"us-validation us-validation--error\">\n <div class=\"us-validation__icon\"></div>\n <div class=\"us-validation__message\">Validation message here</div>\n </div>\n <input type=\"email\" class=\"us-form-input\" name=\"email\" />\n </div>"}},{"name":".us-validation--success","escaped":"us-validation--success","description":"Success styling for correct forms.","markup":{"example":" <div class=\"us-field\">\n <label>Email</label>\n <div class=\"us-validation us-validation--success\">\n <div class=\"us-validation__icon\"></div>\n <div class=\"us-validation__message\">Validation message here</div>\n </div>\n <input type=\"email\" class=\"us-form-input\" name=\"email\" />\n </div>"}}],"markup":{"example":" <div class=\"us-field\">\n <label>Email</label>\n <div class=\"us-validation {$modifiers}\">\n <div class=\"us-validation__icon\"></div>\n <div class=\"us-validation__message\">Validation message here</div>\n </div>\n <input type=\"email\" class=\"us-form-input\" name=\"email\" />\n </div>","escaped":" <div class=\"us-field\">\n <label>Email</label>\n <div class=\"us-validation\">\n <div class=\"us-validation__icon\"></div>\n <div class=\"us-validation__message\">Validation message here</div>\n </div>\n <input type=\"email\" class=\"us-form-input\" name=\"email\" />\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_validation.scss","file":"_validation.scss","link":"validation_messages"}]},{"name":"JavaScript","page":"javascript.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/JavaScript","name":"Overlay","description":"<p> <code>.us-overlay</code> slides in from either side of the viewport, or can be shown as a modal window.</p>\n","javascript":"\n var overlay = new Overlay({\n bodyActiveClass: 'us-overlay--open',\n activeClass: 'us-overlay-parent--active',\n visibleClass: 'us-overlay-parent--visible',\n overlay: $('.us-overlay-parent'),\n openButton: '.js-open-overlay',\n closeButton: '.js-close-overlay',\n historyStatus: '#seedeal',\n history: false,\n preventDefault: true\n });\n ","state":[{"name":".us-overlay--modal","escaped":"us-overlay--modal","description":"Overlay appears as a modal window.","markup":{"example":" <button class=\"us-btn js-open-overlay\" modifier=\"us-overlay--modal\">Open</button>\n <div class=\"us-overlay-parent\" modifier=\"us-overlay--modal\">\n <div class=\"us-overlay us-overlay--modal\">\n <div class=\"us-overlay__container\">\n <div class=\"us-overlay__header\">\n <div class=\"us-overlay__title\">\n Overlay\n </div>\n <button class=\"us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay\">Close</button>\n </div>\n <div class=\"us-overlay__body\">\n Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.\n Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.\n Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.\n Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.\n Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.\n </div>\n </div>\n </div>\n </div>"}},{"name":".us-overlay--right","escaped":"us-overlay--right","description":"Overlay appears on the right side of the viewport (not applicable when used in conjunction with .us-overlay--modal).","markup":{"example":" <button class=\"us-btn js-open-overlay\" modifier=\"us-overlay--right\">Open</button>\n <div class=\"us-overlay-parent\" modifier=\"us-overlay--right\">\n <div class=\"us-overlay us-overlay--right\">\n <div class=\"us-overlay__container\">\n <div class=\"us-overlay__header\">\n <div class=\"us-overlay__title\">\n Overlay\n </div>\n <button class=\"us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay\">Close</button>\n </div>\n <div class=\"us-overlay__body\">\n Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.\n Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.\n Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.\n Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.\n Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.\n </div>\n </div>\n </div>\n </div>"}},{"name":".us-overlay--above","escaped":"us-overlay--above","description":"Overlay appears over the top of another open overlay.","markup":{"example":" <button class=\"us-btn js-open-overlay\" modifier=\"us-overlay--above\">Open</button>\n <div class=\"us-overlay-parent\" modifier=\"us-overlay--above\">\n <div class=\"us-overlay us-overlay--above\">\n <div class=\"us-overlay__container\">\n <div class=\"us-overlay__header\">\n <div class=\"us-overlay__title\">\n Overlay\n </div>\n <button class=\"us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay\">Close</button>\n </div>\n <div class=\"us-overlay__body\">\n Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.\n Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.\n Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.\n Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.\n Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.\n </div>\n </div>\n </div>\n </div>"}}],"markup":{"example":" <button class=\"us-btn js-open-overlay\" modifier=\"{$modifiers}\">Open</button>\n <div class=\"us-overlay-parent\" modifier=\"{$modifiers}\">\n <div class=\"us-overlay {$modifiers}\">\n <div class=\"us-overlay__container\">\n <div class=\"us-overlay__header\">\n <div class=\"us-overlay__title\">\n Overlay\n </div>\n <button class=\"us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay\">Close</button>\n </div>\n <div class=\"us-overlay__body\">\n Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.\n Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.\n Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.\n Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.\n Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.\n </div>\n </div>\n </div>\n </div>","escaped":" <button class=\"us-btn js-open-overlay\" modifier=\"{$modifiers}\">Open</button>\n <div class=\"us-overlay-parent\" modifier=\"{$modifiers}\">\n <div class=\"us-overlay\">\n <div class=\"us-overlay__container\">\n <div class=\"us-overlay__header\">\n <div class=\"us-overlay__title\">\n Overlay\n </div>\n <button class=\"us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay\">Close</button>\n </div>\n <div class=\"us-overlay__body\">\n Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.\n Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.\n Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.\n Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.\n Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.\n </div>\n </div>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_overlay.scss","file":"_overlay.scss","link":"overlay"},{"page":"Pattern Library/JavaScript","name":"Tabs","description":"<p> These are the basic tabs used for landing pages. You can either reference a data-target for the urls or href for the target tabs. They have a non-js fallback and fold over to accordion when in small tablet view. They are initialised on page load if the tabs classes exist.</p>\n","javascript":"\n var tabs = new Tabs({\n tabContainer: ".us-tabs",\n tabLinks: ".us-tabs-nav-mainlink",\n tabTitle: "us-tab-title",\n activeClass: "active",\n changeUrls: true,\n collapsible: true,\n autoScroll: false\n });\n ","markup":{"example":" <div class='us-tabs'>\n <nav class='us-tabs-nav'>\n <div class='us-tabs-nav-wrapper'>\n <div class='us-tabs-nav-menu'>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab1\">Tab 1</a>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab2\">Tab 2</a>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab3\">Tab 3</a>\n </div>\n </div>\n </nav>\n <div class='us-tabs-container'>\n <div class='us-tab' id='tab1'>\n <h2 class='us-tab-title'>\n <a class=\"us-tabs-nav-mainlink\" href=\"#tab1\">\n Test 1\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-tabs-nav-chevron us-icon us-icon--small us-icon--after us-icon--inputgrey\"><use xlink:href=\"/images/icons.svg#icon-chevron-right\"/></svg>\n </a>\n </h2>\n <div class='us-tab-content'>\n <p>Fatback capicola leberkas pork loin pork jowl. Meatloaf shoulder pancetta, salami prosciutto ribeye andouille chuck landjaeger short loin filet mignon sirloin. Pork chop tri-tip ham pork hamburger frankfurter leberkas short ribs biltong. Prosciutto ham hock rump, andouille tongue flank sirloin tri-tip ball tip frankfurter ham drumstick meatloaf pork loin.</p>\n </div>\n </div>\n <div class='us-tab' id='tab2'>\n <h2 class='us-tab-title'>\n <a class=\"us-tabs-nav-mainlink\" href=\"#tab2\">\n Test 2\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-tabs-nav-chevron us-icon us-icon--small us-icon--after us-icon--inputgrey\"><use xlink:href=\"/images/icons.svg#icon-chevron-right\"/></svg>\n </a>\n </h2>\n <div class='us-tab-content'>\n <p>Kielbasa tenderloin spare ribs, andouille doner brisket chuck drumstick bresaola short loin pork t-bone ground round jowl. Ball tip pork loin doner tongue filet mignon biltong hamburger leberkas. Filet mignon kielbasa kevin short ribs, drumstick chuck shankle spare ribs tri-tip.</p>\n </div>\n </div>\n <div class='us-tab' id='tab3'>\n <h2 class='us-tab-title'>\n <a class=\"us-tabs-nav-mainlink\" href=\"#tab3\">\n Test 3\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-tabs-nav-chevron us-icon us-icon--small us-icon--after us-icon--inputgrey\"><use xlink:href=\"/images/icons.svg#icon-chevron-right\"/></svg>\n </a>\n </h2>\n <div class='us-tab-content'>\n <p>Pig pastrami pork loin kielbasa, filet mignon meatloaf short ribs tenderloin. Pork loin leberkas kevin fatback porchetta bresaola. Cow rump shoulder pastrami. Andouille pork belly t-bone short ribs brisket. Bresaola pork belly tail salami capicola meatball. Pork belly beef ham landjaeger.</p>\n </div>\n </div>\n </div>\n </div>","escaped":" <div class='us-tabs'>\n <nav class='us-tabs-nav'>\n <div class='us-tabs-nav-wrapper'>\n <div class='us-tabs-nav-menu'>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab1\">Tab 1</a>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab2\">Tab 2</a>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab3\">Tab 3</a>\n </div>\n </div>\n </nav>\n <div class='us-tabs-container'>\n <div class='us-tab' id='tab1'>\n <h2 class='us-tab-title'>\n <a class=\"us-tabs-nav-mainlink\" href=\"#tab1\">\n Test 1\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-tabs-nav-chevron us-icon us-icon--small us-icon--after us-icon--inputgrey\"><use xlink:href=\"/images/icons.svg#icon-chevron-right\"/></svg>\n </a>\n </h2>\n <div class='us-tab-content'>\n <p>Fatback capicola leberkas pork loin pork jowl. Meatloaf shoulder pancetta, salami prosciutto ribeye andouille chuck landjaeger short loin filet mignon sirloin. Pork chop tri-tip ham pork hamburger frankfurter leberkas short ribs biltong. Prosciutto ham hock rump, andouille tongue flank sirloin tri-tip ball tip frankfurter ham drumstick meatloaf pork loin.</p>\n </div>\n </div>\n <div class='us-tab' id='tab2'>\n <h2 class='us-tab-title'>\n <a class=\"us-tabs-nav-mainlink\" href=\"#tab2\">\n Test 2\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-tabs-nav-chevron us-icon us-icon--small us-icon--after us-icon--inputgrey\"><use xlink:href=\"/images/icons.svg#icon-chevron-right\"/></svg>\n </a>\n </h2>\n <div class='us-tab-content'>\n <p>Kielbasa tenderloin spare ribs, andouille doner brisket chuck drumstick bresaola short loin pork t-bone ground round jowl. Ball tip pork loin doner tongue filet mignon biltong hamburger leberkas. Filet mignon kielbasa kevin short ribs, drumstick chuck shankle spare ribs tri-tip.</p>\n </div>\n </div>\n <div class='us-tab' id='tab3'>\n <h2 class='us-tab-title'>\n <a class=\"us-tabs-nav-mainlink\" href=\"#tab3\">\n Test 3\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-tabs-nav-chevron us-icon us-icon--small us-icon--after us-icon--inputgrey\"><use xlink:href=\"/images/icons.svg#icon-chevron-right\"/></svg>\n </a>\n </h2>\n <div class='us-tab-content'>\n <p>Pig pastrami pork loin kielbasa, filet mignon meatloaf short ribs tenderloin. Pork loin leberkas kevin fatback porchetta bresaola. Cow rump shoulder pastrami. Andouille pork belly t-bone short ribs brisket. Bresaola pork belly tail salami capicola meatball. Pork belly beef ham landjaeger.</p>\n </div>\n </div>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_tabs.scss","file":"_tabs.scss","link":"tabs"},{"page":"Pattern Library/JavaScript","name":"Tooltip","description":"<p> <code>.us-tooltip</code> can be applied to any parent, and by hovering over it, it will toggle the visibility of <code>.us-tooltip__note</code>. Please note that on mobile viewports, the tooltip will appeat underneath the element that is aligned with the tooltip icon.</p>\n","state":[{"name":".us-tooltip--top","escaped":"us-tooltip--top","description":"","markup":{"example":" <div class=\"tooltip-demo us-tooltip us-tooltip--top\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"}},{"name":".us-tooltip--bottom","escaped":"us-tooltip--bottom","description":"","markup":{"example":" <div class=\"tooltip-demo us-tooltip us-tooltip--bottom\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"}},{"name":".us-tooltip--left","escaped":"us-tooltip--left","description":"","markup":{"example":" <div class=\"tooltip-demo us-tooltip us-tooltip--left\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"}},{"name":".us-tooltip--right","escaped":"us-tooltip--right","description":"","markup":{"example":" <div class=\"tooltip-demo us-tooltip us-tooltip--right\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"}},{"name":".us-tooltip--small","escaped":"us-tooltip--small","description":"","markup":{"example":" <div class=\"tooltip-demo us-tooltip us-tooltip--small\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"}}],"javascript":"\n var tooltips = new ClassToggler({\n containerClass: '.us-tooltip',\n $target: $('.us-tooltip__icon'),\n activeClass: "us-tooltip--active"\n });\n ","markup":{"example":" <div class=\"tooltip-demo us-tooltip {$modifiers}\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>","escaped":" <div class=\"tooltip-demo us-tooltip\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_tooltip.scss","file":"_tooltip.scss","link":"tooltip"}]},{"name":"Components","page":"components.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Components","name":"Breadcrumbs","description":"<p> Breadcrumbs are used to provide signposting of a users location and to enable quick navigation around the site. They are only to be used as a secondary means of navigation however. Pages should also be navigable through other means.</p>\n","markup":{"example":" <ul class=\"us-crumbs\">\n <li class=\"us-crumbs__item\"><a href=\"/\" class=\"us-crumbs__link\">uSwitch.com</a></li>\n <li class=\"us-crumbs__item\"><a class=\"us-crumbs__link\" href=\"http://www.uswitch.com/credit-reports/\">Credit report</a></li>\n <li class=\"us-crumbs__item\"><a class=\"us-crumbs__link\" href=\"http://www.uswitch.com/credit-reports/guides/\">Credit reports guides</a></li>\n <li class=\"us-crumbs__item\">Statutory credit reports</li>\n </ul>","escaped":" <ul class=\"us-crumbs\">\n <li class=\"us-crumbs__item\"><a href=\"/\" class=\"us-crumbs__link\">uSwitch.com</a></li>\n <li class=\"us-crumbs__item\"><a class=\"us-crumbs__link\" href=\"http://www.uswitch.com/credit-reports/\">Credit report</a></li>\n <li class=\"us-crumbs__item\"><a class=\"us-crumbs__link\" href=\"http://www.uswitch.com/credit-reports/guides/\">Credit reports guides</a></li>\n <li class=\"us-crumbs__item\">Statutory credit reports</li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/components/_breadcrumbs.scss","file":"_breadcrumbs.scss","link":"breadcrumbs"},{"page":"Pattern Library/Components","name":"Buttons","description":"<p> Our buttons used across the site. The states give different use cases. Both <code><a></code> and <code><button></code> tags are supported. Please use <code>role='button'</code> when using an <code><a></code> tag.</p>\n","state":[{"name":".us-btn--primary","escaped":"us-btn--primary","description":"Used as a save/update button.","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--primary\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--primary\">Button Element</button>"}},{"name":".us-btn--action","escaped":"us-btn--action","description":"Navigational button.","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--action\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--action\">Button Element</button>"}},{"name":".us-btn--secondary","escaped":"us-btn--secondary","description":"Secondary.","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--secondary\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--secondary\">Button Element</button>"}},{"name":".us-btn--hero","escaped":"us-btn--hero","description":"Navy outline used for buttons on hero banners.","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--hero\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--hero\">Button Element</button>"}},{"name":".us-btn--reversed","escaped":"us-btn--reversed","description":"White outline for dark backgrounds.","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--reversed\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--reversed\">Button Element</button>"}},{"name":".us-btn--large","escaped":"us-btn--large","description":"Larger button for heros.","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--large\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--large\">Button Element</button>"}},{"name":".us-btn--small","escaped":"us-btn--small","description":"Smaller button for mobile tables.","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--small\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--small\">Button Element</button>"}},{"name":".us-btn--blocked","escaped":"us-btn--blocked","description":"Full width button.","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--blocked\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--blocked\">Button Element</button>"}},{"name":".us-btn--link","escaped":"us-btn--link","description":"link style button.","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--link\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--link\">Button Element</button>"}},{"name":".us-btn--stronger","escaped":"us-btn--stronger","description":"Emphasis button.","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--stronger\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--stronger\">Button Element</button>"}},{"name":".us-btn--disabled","escaped":"us-btn--disabled","description":"Disabled styling (can also be styled with :disabled).","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--disabled\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--disabled\">Button Element</button>"}}],"markup":{"example":" <a href=\"#\" class=\"us-btn {$modifiers}\" role=\"button\">Link Button</a>\n <button class=\"us-btn {$modifiers}\">Button Element</button>","escaped":" <a href=\"#\" class=\"us-btn\" role=\"button\">Link Button</a>\n <button class=\"us-btn\">Button Element</button>"},"path":"vendor/assets/stylesheets/ustyle/components/_button.scss","file":"_button.scss","link":"buttons"},{"page":"Pattern Library/Components","name":"Content group","description":"<p> The <code>.us-content-group</code> is a separator element for content groupings. Ideal to split up landing pages with reasonable padding.</p>\n","state":[{"name":".mobile-bordered","escaped":"mobile-bordered","description":"Adds a smaller border and padding to mobile devices.","markup":{"example":" <div class='us-content-group mobile-bordered'>\n <p>\n Swat at dog intrigued by the shower missing until dinner time and run in circles use lap as chair.\n </p>\n </div>"}}],"markup":{"example":" <div class='us-content-group {$modifiers}'>\n <p>\n Swat at dog intrigued by the shower missing until dinner time and run in circles use lap as chair.\n </p>\n </div>","escaped":" <div class='us-content-group'>\n <p>\n Swat at dog intrigued by the shower missing until dinner time and run in circles use lap as chair.\n </p>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_content-group.scss","file":"_content-group.scss","link":"content_group"},{"page":"Pattern Library/Components","name":"CTAs","description":"<p> Used within guide and news articles, these CTAs (Calls to Action) are intended to not interupt the content but to integrate in more subtle means.</p>\n","markup":{"example":" <section class=\"us-cta cta cta-column\">\n <form>\n <h3 class=\"us-cta__title\">It's your report</h3>\n <p>Join the campaign to fight for free annual credit reports for everyone</p>\n <a href=\"/money/itsmyreport/\" class=\"us-btn us-btn--primary\" rel=\"nofollow\">Sign the petition</a>\n </form>\n </section>","escaped":" <section class=\"us-cta cta cta-column\">\n <form>\n <h3 class=\"us-cta__title\">It's your report</h3>\n <p>Join the campaign to fight for free annual credit reports for everyone</p>\n <a href=\"/money/itsmyreport/\" class=\"us-btn us-btn--primary\" rel=\"nofollow\">Sign the petition</a>\n </form>\n </section>"},"path":"vendor/assets/stylesheets/ustyle/components/_cta.scss","file":"_cta.scss","link":"ctas"},{"page":"Pattern Library/Components","name":"Hero","description":"<p> The <code>.us-hero</code> is used for the upper part of most pages, where the calls to action are usually kept.</p>\n<p> It is intended to draw attention with <code>$c-cyan</code> as it's background color, and should be used across all landing pages.</p>\n","markup":{"example":" <div class='us-hero'>\n <div class='us-hero-container'>\n <h1 class='us-hero-title'>Hero title</h1>\n <p class='us-hero-description us-standfirst'>Swat at dog intrigued by the shower missing until dinner time.</p>\n </div>\n </div>","escaped":" <div class='us-hero'>\n <div class='us-hero-container'>\n <h1 class='us-hero-title'>Hero title</h1>\n <p class='us-hero-description us-standfirst'>Swat at dog intrigued by the shower missing until dinner time.</p>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_hero.scss","file":"_hero.scss","link":"hero"},{"page":"Pattern Library/Components","name":"Anchor links","description":"<p> Anchor tag styling, with and without a border.</p>\n","state":[{"name":".us-link","escaped":"us-link","description":"Adds a border bottom to the link.","markup":{"example":"<a href=\"#\" class=\"us-link\">Link</a>"}},{"name":".us-link--light","escaped":"us-link--light","description":"Changes the link colours to white for when links are placed on dark backgrounds.","markup":{"example":"<a href=\"#\" class=\"us-link--light\">Link</a>"}}],"markup":{"example":"<a href=\"#\" class=\"{$modifiers}\">Link</a>","escaped":"<a href=\"#\">Link</a>"},"path":"vendor/assets/stylesheets/ustyle/components/_links.scss","file":"_links.scss","link":"anchor_links"},{"page":"Pattern Library/Components","name":"Link lists","description":"<p> The default list styling for lists that have anchors to take you to other pages.</p>\n","markup":{"example":" <ul class='us-list'>\n <li><a href=\"#\">List item 1</a></li>\n <li><a href=\"#\">List item 2</a></li>\n <li><a href=\"#\">List item 3</a></li>\n </ul>","escaped":" <ul class='us-list'>\n <li><a href=\"#\">List item 1</a></li>\n <li><a href=\"#\">List item 2</a></li>\n <li><a href=\"#\">List item 3</a></li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/components/_lists.scss","file":"_lists.scss","link":"link_lists"},{"page":"Pattern Library/Components","name":"Loader","description":"<p> Loader component to be added to any AJAX/filter loads across uSwitch. We use them specifically in tables when loading new rows.</p>\n<p> <code>.us-loader--loading</code> will initiate the animation and <code>.us-loader--centered</code> will vertically center the loading SVG.</p>\n","markup":{"example":" <div class='us-loader__container'>\n <div class='us-loader us-loader--loading us-loader--centered'>\n <div class='us-loader__inner'>\n <div class='us-loader__spinner'></div>\n <div class='us-loader__text'>\n Loading deals\n </div>\n </div>\n <div class='us-loader__overlay'></div>\n </div>\n <!-- EXAMPLE CONTENT -->\n <ul class='us-list'>\n <li><a href=\"#\">List item 1</a></li>\n <li><a href=\"#\">List item 2</a></li>\n <li><a href=\"#\">List item 3</a></li>\n <li><a href=\"#\">List item 4</a></li>\n </ul>\n <!-- END EXAMPLE -->\n </div>","escaped":" <div class='us-loader__container'>\n <div class='us-loader us-loader--loading us-loader--centered'>\n <div class='us-loader__inner'>\n <div class='us-loader__spinner'></div>\n <div class='us-loader__text'>\n Loading deals\n </div>\n </div>\n <div class='us-loader__overlay'></div>\n </div>\n <!-- EXAMPLE CONTENT -->\n <ul class='us-list'>\n <li><a href=\"#\">List item 1</a></li>\n <li><a href=\"#\">List item 2</a></li>\n <li><a href=\"#\">List item 3</a></li>\n <li><a href=\"#\">List item 4</a></li>\n </ul>\n <!-- END EXAMPLE -->\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_loader.scss","file":"_loader.scss","link":"loader"},{"page":"Pattern Library/Components","name":"Progress navigation","description":"<p> The progress navigation should be used for any funnel journeys on the website. Once a section has been completed the user should be able to get back to that step.</p>\n<p> The mobile view of the navigation just has the dotted numbers.</p>\n","markup":{"example":" <div class=\"us-progress\">\n <nav>\n <ul class=\"us-progress__nav us-clearfix\">\n <li class=\"us-progress__item\">\n <a href=\"#\" class=\"us-progress__link us-progress__link--complete\">\n <span class=\"us-tablet--inline\">Current supplier</span>\n </a>\n </li>\n <li class=\"us-progress__item\">\n <a href=\"#\" class=\"us-progress__link us-progress__link--complete\">\n <span class=\"us-tablet--inline\">Usage</span>\n </a>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--current\">\n <span class=\"us-tablet--inline\">Results</span>\n </span>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--next\">\n <span class=\"us-tablet--inline\">New tariff</span>\n </span>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--next\">\n <span class=\"us-tablet--inline\">Apply</span>\n </span>\n </li>\n </ul>\n </nav>\n </div>","escaped":" <div class=\"us-progress\">\n <nav>\n <ul class=\"us-progress__nav us-clearfix\">\n <li class=\"us-progress__item\">\n <a href=\"#\" class=\"us-progress__link us-progress__link--complete\">\n <span class=\"us-tablet--inline\">Current supplier</span>\n </a>\n </li>\n <li class=\"us-progress__item\">\n <a href=\"#\" class=\"us-progress__link us-progress__link--complete\">\n <span class=\"us-tablet--inline\">Usage</span>\n </a>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--current\">\n <span class=\"us-tablet--inline\">Results</span>\n </span>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--next\">\n <span class=\"us-tablet--inline\">New tariff</span>\n </span>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--next\">\n <span class=\"us-tablet--inline\">Apply</span>\n </span>\n </li>\n </ul>\n </nav>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_progress.scss","file":"_progress.scss","link":"progress_navigation"},{"page":"Pattern Library/Components","name":"USPs","description":"<p> USPs (Unique Selling Points) are used within tables and on splash pages to highlight offers within a deal, and also to differentiate deals.</p>\n<p> General guidelines; There should only be one USP per deal. Text within USPs should be written in sentence case (not uppercase).</p>\n","state":[{"name":".us-usp--blue","escaped":"us-usp--blue","description":"uSwitch related.","markup":{"example":" <div class='us-usp us-usp--blue'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--blue'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--orange","escaped":"us-usp--orange","description":"Rewards (money/points).","markup":{"example":" <div class='us-usp us-usp--orange'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--orange'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--purple","escaped":"us-usp--purple","description":"Gifts eg. free TV.","markup":{"example":" <div class='us-usp us-usp--purple'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--purple'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--yellow","escaped":"us-usp--yellow","description":"Vouchers.","markup":{"example":" <div class='us-usp us-usp--yellow'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--yellow'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--typecyan","escaped":"us-usp--typecyan","description":"Micro persuasions eg. most popular, half price.","markup":{"example":" <div class='us-usp us-usp--typecyan'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--typecyan'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--green","escaped":"us-usp--green","description":"Renewable and environmentally friendly.","markup":{"example":" <div class='us-usp us-usp--green'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--green'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--navy","escaped":"us-usp--navy","description":"Generic vertical specific USP.","markup":{"example":" <div class='us-usp us-usp--navy'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--navy'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--cyan","escaped":"us-usp--cyan","description":"Generic vertical specific USP.","markup":{"example":" <div class='us-usp us-usp--cyan'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--cyan'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--typegrey","escaped":"us-usp--typegrey","description":"Generic vertical specific USP.","markup":{"example":" <div class='us-usp us-usp--typegrey'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--typegrey'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--red","escaped":"us-usp--red","description":"Generic vertical specific USP.","markup":{"example":" <div class='us-usp us-usp--red'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--red'>Annotated USP</div>\n More information about USP goes here\n </div>"}}],"markup":{"example":" <div class='us-usp {$modifiers}'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp {$modifiers}'>Annotated USP</div>\n More information about USP goes here\n </div>","escaped":" <div class='us-usp'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp'>Annotated USP</div>\n More information about USP goes here\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_usp.scss","file":"_usp.scss","link":"usps"}]},{"name":"Grid","page":"grid.html","template":"styleguide/templates/simple.tpl","section":"pattern-library","content":"<div class=\"styleguide__block\">\n <p>\n Our grid is a 12 column grid, with similar sizes to that of Bootstrap. We also adhere to the same naming standards for device breakpoints.\n </p>\n <ul>\n <li>Default gutter width: <strong>15px either side</strong>.</li>\n <li>Large container width: <strong>1170px</strong>.</li>\n <li>Desktop container width: <strong>970px</strong>.</li>\n <li>Tablet container width: <strong>770px</strong>.</li>\n </ul>\n <ul>\n <li>The parent container is <code>.us-container</code>, you must have this to start building the uSwitch layouts.</li>\n <li><code>.us-grid-row</code> is then used when you are building rows of columns (gives a negative margin to the container so they align correctly).</li>\n <li>All grid class names are prefixed with <code>.us-col-</code>.</li>\n </ul>\n</div>\n<div class=\"styleguide__block\">\n <h2 class=\"styleguide__block-title\">Example</h2>\n <p>Here is an example of a grid which will turn into 100% width columns on mobile.</p>\n <div class=\"grid-example\">\n <div class=\"us-grid-row\">\n <div class=\"col-example us-col-md-2\">.us-col-md-2</div>\n <div class=\"col-example us-col-md-2\">.us-col-md-2</div>\n <div class=\"col-example us-col-md-4\">.us-col-md-4</div>\n <div class=\"col-example us-col-md-4\">.us-col-md-4</div>\n </div>\n <div class=\"us-grid-row\">\n <div class=\"col-example us-col-md-8\">.us-col-md-8</div>\n <div class=\"col-example us-col-md-4\">.us-col-md-4</div>\n </div>\n <div class=\"us-grid-row\">\n <div class=\"col-example us-col-md-6\">.us-col-md-6</div>\n <div class=\"col-example us-col-md-6\">.us-col-md-6</div>\n </div>\n </div>\n <pre><code class=\"html\">\n<div class="us-grid-row">\n <div class="us-col-md-2">.us-col-md-2</div>\n <div class="us-col-md-2">.us-col-md-2</div>\n <div class="us-col-md-4">.us-col-md-4</div>\n <div class="us-col-md-4">.us-col-md-4</div>\n</div>\n<div class="us-grid-row">\n <div class="us-col-md-8">.us-col-md-8</div>\n <div class="us-col-md-4">.us-col-md-4</div>\n</div>\n<div class="us-grid-row">\n <div class="us-col-md-6">.us-col-md-6</div>\n <div class="us-col-md-6">.us-col-md-6</div>\n</div>\n </code></pre>\n</div>\n<div class=\"styleguide__block\">\n <h2 class=\"styleguide__block-title\">Example with mobile columns</h2>\n <div class=\"grid-example\">\n <div class=\"us-grid-row\">\n <div class=\"col-example us-col-xsm-6 us-col-md-2\">.us-col-xsm-6.us-col-md-2</div>\n <div class=\"col-example us-col-xsm-6 us-col-md-2\">.us-col-xsm-6.us-col-md-2</div>\n <div class=\"col-example us-col-sm-6 us-col-md-4\">.us-col-sm-6.us-col-md-4</div>\n <div class=\"col-example us-col-sm-6 us-col-md-4\">.us-col-sm-6.us-col-md-4</div>\n </div>\n </div>\n </div>\n\n","subNav":[]},{"name":"Logo","page":"logo.html","template":"styleguide/templates/simple.tpl","section":"brand","content":"\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <h3 id=\"orientation\">Orientation</h3>\n <p>\n We've made our logo available in vertical and horizontal formats to\n allow for flexibility in various layouts. Choose the format that best\n suits the usage.\n </p>\n </div>\n </div>\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <div class=\"logo__state logo__vertical logo--blue\">\n <svg><use xlink:href=\"#uicon-logo-vertical\"/></svg>\n </div>\n <p>\n Vertical orientation\n </p>\n </div>\n <div class=\"us-col-6\">\n <div class=\"logo__state logo__horizontal logo--blue\">\n <svg><use xlink:href=\"#uicon-logo\"/></svg>\n </div>\n <p>\n Horizontal orientation\n </p>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <h3 id=\"colour\">Colour</h3>\n <p>\n Our logo should only appear in our approved colours. The brand blue logo\n is the preferred version. It can also be displayed on a cyan background.\n </p>\n </div>\n </div>\n\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-4\">\n <div class=\"logo__state logo__vertical logo--blue\">\n <svg><use xlink:href=\"#uicon-logo-vertical\"/></svg>\n </div>\n <p>\n Brand blue is the preferred version of the logo.\n </p>\n </div>\n <div class=\"us-col-4\">\n <div class=\"logo__state logo__vertical logo--white\">\n <svg><use xlink:href=\"#uicon-logo-vertical\"/></svg>\n </div>\n <p>\n Alternatively it can also be used in white on dark backgrounds.\n </p>\n </div>\n <div class=\"us-col-4\">\n <div class=\"logo__state logo__vertical logo--cyan\">\n <svg><use xlink:href=\"#uicon-logo-vertical\"/></svg>\n </div>\n <p>\n It can also be used on a cyan background.\n </p>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <p>\n The black and white versions of our logo should only be used when colour\n reproduction is not available. Choose the option that will provide the\n most contrast with the background.\n </p>\n </div>\n </div>\n\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <div class=\"logo__state logo__horizontal logo--bwwhite\">\n <svg><use xlink:href=\"#uicon-logo\"/></svg>\n </div>\n <p>\n The black logo is for use on light backgrounds where colour\n reproduction is not available.\n </p>\n </div>\n <div class=\"us-col-6\">\n <div class=\"logo__state logo__horizontal logo--bwblack\">\n <svg><use xlink:href=\"#uicon-logo\"/></svg>\n </div>\n <p>\n The white logo is for use on dark backgrounds where colour\n reproduction is not available.\n </p>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <h3 id=\"exclusion-zone\">Exclusion Zone</h3>\n <p>\n Always leave plenty of room around the logo. This will enable it to\n feature prominently without clutter.\n </p>\n </div>\n </div>\n\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <div class=\"logo__state logo__vertical logo__spacer--vertical logo--blue\">\n <svg><use xlink:href=\"#uicon-logo-vertical\"/></svg>\n </div>\n </div>\n <br>\n <div class=\"us-col-6\">\n <div class=\"logo__state logo__horizontal logo__spacer--horizontal logo--white\">\n <svg><use xlink:href=\"#uicon-logo\"/></svg>\n </div>\n </div>\n </div>\n <p>\n The 'S' from our wordmark can be used to measure out the exclusion zone.\n </p>\n </div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <h3 id=\"alternate-logo\">Alternate logo for use at smaller sizes</h3>\n <p>\n An alternative version of our logo must be used when it's being displayed\n at smaller sizes. It ensures that the arrowhead, a key element of our\n brand, remains clear and prominent.\n </p>\n </div>\n </div>\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <div class=\"logo__state logo__vertical--alternate logo--blue\">\n <svg><use xlink:href=\"#uicon-logo-vertical-small\"/>\n <div class=\"logo__sizing h98\">98px</div>\n </svg></div>\n <p>\n Use the alternative version of the vertical logo when using at a\n height of 98px or less.\n </p>\n </div>\n <div class=\"us-col-6\">\n <div class=\"logo__state logo__horizontal--alternate logo--white\">\n <svg><use xlink:href=\"#uicon-logo-small\"/></svg>\n <div class=\"logo__sizing h64\">64px</div>\n </div>\n <p>\n Use the alternate version of the horizontal logo when using at a\n height of 64px or less.\n </p>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <h3 id=\"minimum-sizes\">Minimum Size</h3>\n <p>To ensure legibility of our logo, it must not be used below the\n minimum size.</p>\n <div class=\"us-col-6\">\n <div class=\"logo__state logo__vertical--alternate-min logo--blue\">\n <svg><use xlink:href=\"#uicon-logo-vertical-small\"/>\n <div class=\"logo__sizing h50\">50px</div>\n </svg></div>\n <p>\n The minimum height that the vertical logo may be used at is 50px.\n </p>\n </div>\n <div class=\"us-col-6\">\n <div class=\"logo__state logo__horizontal--alternate-min logo--white\">\n <svg><use xlink:href=\"#uicon-logo-small\"/></svg>\n <div class=\"logo__sizing h25\">25px</div>\n </div>\n <p>\n The minimum height that the horizontal logo may be used at is 25px.\n </p>\n </div>\n </div>\n </div>\n </div>\n\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <h3 id=\"icon-only\">Icon only</h3>\n <p>\n Our icon and wordmark must always be used together. The only\n exceptions are our app icon, website favicon and awards logos. Do not\n separate the icon and wordmark in any other instances.\n </p>\n <div class=\"logo__icon-standalone us-margin-bottom\">\n <svg role=\"image\" class=\"us-icon--large us-icon--white us-icon--notext\">\n <use xlink:href=\"/images/icons.svg#icon-uswitch\"/>\n </svg>\n </div>\n <p>\n The icon may only be used separately from the wordmark in approved\n situations, such as our app icon.\n </p>\n\n <p><strong>Do not separate the elements in any other situations.</strong></p>\n </div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <h3 id=\"usage-rules\">Usage rules</h3>\n <p>Please make sure you’re not tempted to do any of the following to the logo:</p>\n <ul>\n <li>Change elements of it</li>\n <li>Outline or put a keyline around it</li>\n <li>Use a different blue</li>\n <li>Use a gradient or tint</li>\n <li>Rotate the logo</li>\n </ul>\n </div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <h3 id=\"logo-downloads\">Logo Downloads</h3>\n <p>\n Here you can download the standard and smaller versions of the uSwitch\n logo. Each .zip file comes with .eps, .svg and .svg versions of the logo.\n </p>\n <ul>\n <li><a href=\"https://s3-eu-west-1.amazonaws.com/uswitch-assets-eu/ustyle-assets/logo/Standard+logo+assets.zip\">Standard Logo</a></li>\n <li><a href=\"https://s3-eu-west-1.amazonaws.com/uswitch-assets-eu/ustyle-assets/logo/Small+logo+assets.zip\">Logo for smaller sizes</a></li>\n </ul>\n </div>\n </div>\n</div>\n","subNav":[{"name":"Orientation","link":"#orientation"},{"name":"Colour","link":"#colour"},{"name":"Exclusion zone","link":"#exclusion-zone"},{"name":"Alternate logo (small)","link":"#alternate-logo"},{"name":"Minimum sizes","link":"#minimum-sizes"},{"name":"Icon only","link":"#icon-only"},{"name":"Usage rules","link":"#usage-rules"},{"name":"Logo Downloads","link":"#logo-downloads"}]},{"name":"Microcopy","page":"microcopy.html","template":"styleguide/templates/simple.tpl","section":"language","content":"<h2 id=\"microcopy\">Microcopy</h2>\n<p><em>Anything shorter than a paragraph is classified as microcopy. Think anything from tooltips to button text.</em> </p>\n<p><span id=\"Help text/tool tips\"></span>\n<strong>Help text/tool tips</strong> </p>\n<p><img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/tooltip.png\"></p>\n<p>Tooltips are an interruption, use them sparingly (or not at all). </p>\n<p>Keep the tooltip text concise. Tooltips are perfect for short sentences and sentence fragments; large blocks of text can be overwhelming and should be avoided.</p>\n<p>Tooltip text must be informative. Don't make it obvious or just repeat what is already on the screen. Because tooltip text isn't always visible, it should be supplemental info that users don't have to read. </p>\n<p><span id=\"Badge/label/USP\"></span>\n<strong>Badge/label/USP</strong></p>\n<p><img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/badge-label-usp.png\"></p>\n<p>Very short text (1-4 words max) to distinguish products from one another and highlight features of a product that are otherwise not included on the results table. Annotated versions are paired with a descriptive line.</p>\n<p>Should be written in sentence case, not upper case. The label should be 1-4 words, while descriptive lines should be as concise as possible without wrapping on any device.</p>\n<p>Must be quantifiable facts about a product, deal or plan be honest and as descriptive as possible. No exclamation points.</p>\n<p><span id=\"Product info\"></span>\n<strong>Product info</strong></p>\n<p>Summary of product features relevant to users. Must be concise, relevant and quantifiable facts about a product, deal or plan – be honest and as descriptive as possible</p>\n<p>Be consistent in the way and the order information is presented and the types of information shown. Second person is ok (e.g. “More people in your region switched to this plan than any other”)</p>\n<p><span id=\"Small print\"></span>\n<strong>Small print</strong></p>\n<p><img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/tsandcs.png\"></p>\n<p>Small print reassures users and is vital for transparency. </p>\n<p>As long as any compliance rules are taken into account, you should treat this copy like any other, and have a responsibility to make this text as comprehensible as possible to a user</p>\n<p><span id=\"Caveats\"></span>\n<strong>Caveats</strong> </p>\n<p><img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/caveat.png\"></p>\n<p>Small print text to back up any absolute claims (i.e. savings figures), denoted with an asterisk, followed by an anchor and double-anchor for further caveats. The caveat must appear on the same page as the symbol. </p>\n<ul>\n<li>For the first caveat on a page use *</li>\n<li>For the second use †</li>\n<li>And for the third, use ‡</li>\n</ul>\n\n<p>Examples of when caveats are required...</p>\n<ul>\n <li>Get the best iPhone deal with uSwitch*</li>\n <li>Get the cheapest iPhone deal with uSwitch†</li>\n</ul>\n\n<p>And when they're not required...</p>\n<ul>\n <li>Find a better energy deal</li>\n <li>How to find the best iphone deal</li>\n</ul>\n\n<p><span id=\"Button text\"></span>\n<strong>Button text</strong></p>\n<p>Very short (1-3 words) actionable description of what happens when the button clicked, namely, what's on the next page. </p>\n<p>Button text should “keep its promise” and properly set up expectations of what comes next</p>\n<p>It should be concise (1-3 words), should not contain exclamation points, should feel actionable (e.g. “buy” “switch” “get” “apply” “compare”), and can make use of urgency (e.g. “today” “now”)</p>\n<p>First person can be used (e.g. “Tell me more”).</p>\n<p><span id=\"CTAs\"></span>\n<strong>CTAs</strong> </p>\n<div class=\"us-grid-row\">\n <div class=\"us-col-md-10\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/CTAs.png\">\n </div>\n</div>\n\n<p>An introduction to button text, usually one to two lines, that provides a reason to click the accompanying button</p>\n<p>This is only used on editorial pages. Sentence case should be used, no exclamation points, and the text must relate to the button and its action. A CTA should not end with punctuation (unlike a standard paragraph).</p>\n<p>Should not be more than two lines, usually made up of a title and copy.</p>\n<p><span id=\"Form text, form labels\"></span>\n<strong>Form text, form labels</strong> </p>\n<p>Description of what information is required from the user. Always aim for clarity and be consistent – if using questions ('Where do you live?') or statements ('Address')</p>\n<p>Second person is acceptable, and use tool tips to explain any terms that may be unfamiliar</p>\n<p>Form label naming conventions:</p>\n<ul>\n<li>First name </li>\n<li>Last name</li>\n<li>Date of birth </li>\n<li>Email </li>\n<li>Password</li>\n<li>Postcode </li>\n<li>Address </li>\n<li>Main account holder’s name</li>\n<li>Driver’s name</li>\n<li>Employment status</li>\n<li>Annual income (before tax)</li>\n</ul>\n<p><span id=\"Placeholder text for fields\"></span>\n<strong>Placeholder text for fields</strong> </p>\n<p>Pre-populated text in a field that is supposed to serve as an example or a necessary instruction. </p>\n<p>We only use placeholder text for instructions, as a last resort, when we have no space for labels, or for email/password. </p>\n<p>Symbols can be used (e.g. £ ) and we use sentence case. Our standard placeholder text is:</p>\n<ul>\n<li>Please select</li>\n<li>Enter postcode</li>\n<li>DD/MM/YYYY</li>\n<li>Email address</li>\n<li>Password</li>\n</ul>\n<p><span id=\"Error text\"></span>\n<strong>Error text</strong></p>\n<p><img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/error-texts.png\"></p>\n<p>Text that is triggered by a user trying to move forward without providing requested info.</p>\n<p>Error text should be as specific and as useful/helpful as possible, but should also be short; sentence fragments are acceptable.</p>\n<p>Never be alarming, technical, or condescending (in life, but especially when it comes to error text)</p>\n<p><span id=\"H1\"></span>\n<strong>H1</strong> </p>\n<p>Short description of the page, at a glance. </p>\n<p>This text should be genuinely helpful, in sentence case, and should be kept as short as possible.</p>\n<p><span id=\"H1\"></span>\n<strong>Introductory text</strong></p>\n<p>A short (two lines at most) introduction that follows on from the H1. Describes the following content and encourages the user to read on, and provides as much relevant information as possible. </p>\n<p>This text should be genuinely helpful, sentence case, and should tell the user whether they are in the right place. </p>\n","subNav":[{"name":"Help text/tool tips","link":"#Help text/tool tips"},{"name":"Badge/label/USP","link":"#Badge/label/USP"},{"name":"Product info","link":"#Product info"},{"name":"Small print","link":"#Small print"},{"name":"Caveats","link":"#Caveats"},{"name":"Button text","link":"#Button text"},{"name":"CTAs","link":"#CTAs"},{"name":"Form text, form labels","link":"#Form text, form labels"},{"name":"Placeholder text for fields","link":"#Placeholder text for fields"},{"name":"Error text","link":"#Error text"}]},{"name":"Accessibility testing","page":"accessibility-testing.html","template":"styleguide/templates/simple.tpl","section":"design","content":"<p>Everyone experiences disability at some point in their life, whether permanent\n(blindness, deafness, motor impairment) or temporary (fatigue, migraines, a broken arm).\nThese things may make the things we build difficult to use.</p>\n<p>Below, you'll find recommended tools and processes that will help make it easier\nfor folk to use the things we build without frustration.</p>\n<p>The web is for everyone, and it is our job to make sure that everyone can access it.</p>\n<h2 id=\"recommended-free-tools\">Recommended (Free) Tools</h2>\n<ul>\n<li><a href=\"https://github.com/pa11y/dashboard\">Pa11y Dashboard</a></li>\n<li><a href=\"https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd\">aXe Chrome Extension</a></li>\n<li><a href=\"https://khan.github.io/tota11y/\">tota11y</a></li>\n<li><a href=\"https://github.com/GoogleChrome/lighthouse\">Lighthouse</a></li>\n<li><a href=\"https://www.npmjs.com/package/a11y\">a11y</a></li>\n</ul>\n<h2 id=\"how-to-test\">How to test</h2>\n<h3 id=\"using-automated-tools\">Using automated tools</h3>\n<p>There are a lot of options, both free and paid for, to automatically test the\naccessibility of our products. From the most basic like <a href=\"https://khan.github.io/tota11y/\">tota11y</a> and <a href=\"https://www.npmjs.com/package/a11y\">a11y</a>\n, to\nthe more involved like Chrome’s Accessibility Audit tool and aXe. These tools can\nprovide a great overview of where we might be going wrong, and even suggest ways\nto improve.</p>\n<p>But with great power, comes great responsibility. We cannot rely on automated tool\nto help us find and fix all the issues.\n<a href=\"https://accessibility.blog.gov.uk/2017/02/24/what-we-found-when-we-tested-tools-on-the-worlds-least-accessible-webpage\">GDS discovered</a>\nthat even a tool like Chrome's Accessibility auditor only surface 17% of accessibility issues.</p>\n<p>Just because a tool says something is broken, we should still manually test to\nprove it is. These automated tools provide solutions, but they are neither the\nonly or the most suitable solution for our users.</p>\n<h3 id=\"manual-testing\">Manual Testing</h3>\n<p>Nothing really beats manual testing. The more you do this, the easier you’ll find\nit to spot potential accessibility errors.</p>\n<h4 id=\"keyboard-only\">Keyboard Only</h4>\n<ul>\n<li>Can the page be navigated just by using a keyboard?</li>\n<li>Can you TAB to all interactive elements (links, buttons, form inputs) and interact\nwith such elements using traditional keys (ESC, Arrows)?</li>\n<li>When TABbing, do you lose track of where the keyboard is focused, suggesting that\nthere are hidden elements on the page you shouldn’t be able to navigate to?</li>\n</ul>\n<h4 id=\"screen-readers\">Screen Readers</h4>\n<p>Use a screen reader like <a href=\"https://www.nvaccess.org/\">NVDA</a>,\n<a href=\"http://www.freedomscientific.com/Products/Blindness/Jaws\">JAWS</a>, or\n<a href=\"https://www.apple.com/accessibility/mac/vision/\">VoiceOver</a> to go through your\nweb page.</p>\n<ul>\n<li>Can you access and understand all of the content someone not using a screen reader can?</li>\n<li>Does the hierarchy of the content make sense?</li>\n<li>Can one easily navigate to different landmarks on the page\n(e.g header, navigation, main content, supplementary content like an aside or footer)?</li>\n</ul>\n<p>Note that you shouldn’t sink time into becoming an expert with a screen reader.\nUnless you use a screen reader every day and have a legitimate need to do so, you\nare unlikely to ever use a screen reader how they should be used.</p>\n<p>It's important to note here that you cannot truly say your product is accessible\nuntil you've tested them with folk who benefit from this work.</p>\n<hr>\n<p>For more about how we can make uSwitch and the world more accessible, check out\nour blog posts on <a href=\"https://labs.uswitch.com/four-accessibility-wins/\">quick wins</a>\nand <a href=\"https://labs.uswitch.com/how-to-do-an-accessibility-audit/\">how to perform an accessibility audit</a>.</p>\n<p>Check out our tips on <a href=\"../design/validating-designs.html\">usability testing</a>, too.</p>\n","subNav":[]},{"name":"Stats","page":"stats.html","section":"pattern-library","content":{"report":[{"stylesheets":1,"size":67613,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.16.1"},{"stylesheets":1,"size":67613,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.16.0"},{"stylesheets":1,"size":67491,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.15.3"},{"stylesheets":1,"size":68346,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.15.1"},{"stylesheets":1,"size":68346,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.15.0"},{"stylesheets":1,"size":67604,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.14.11"},{"stylesheets":1,"size":68341,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.14.10"},{"stylesheets":1,"size":67639,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.14.9"},{"stylesheets":1,"size":68353,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.14.8"},{"stylesheets":1,"size":68321,"rules":713,"selectors":1154,"simplicity":0.6178509532062392,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.14.7"},{"stylesheets":1,"size":68321,"rules":713,"selectors":1154,"simplicity":0.6178509532062392,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.14.6"},{"stylesheets":1,"size":68183,"rules":712,"selectors":1153,"simplicity":0.6175195143104943,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.14.4"},{"stylesheets":1,"size":67990,"rules":712,"selectors":1150,"simplicity":0.6191304347826087,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.14.3"},{"stylesheets":1,"size":67867,"rules":712,"selectors":1148,"simplicity":0.6202090592334495,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.14.1"},{"stylesheets":1,"size":68161,"rules":712,"selectors":1148,"simplicity":0.6202090592334495,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.14.0"},{"stylesheets":1,"size":67661,"rules":712,"selectors":1148,"simplicity":0.6202090592334495,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.13.0"},{"stylesheets":1,"size":70420,"rules":733,"selectors":1171,"simplicity":0.6259607173356105,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":93,"version":"1.12.6"},{"stylesheets":1,"size":70420,"rules":733,"selectors":1171,"simplicity":0.6259607173356105,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":93,"version":"1.12.5"},{"stylesheets":1,"size":70465,"rules":733,"selectors":1171,"simplicity":0.6259607173356105,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":93,"version":"1.12.4"},{"stylesheets":1,"size":70465,"rules":733,"selectors":1171,"simplicity":0.6259607173356105,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":93,"version":"1.12.3"},{"stylesheets":1,"size":70420,"rules":733,"selectors":1171,"simplicity":0.6259607173356105,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":93,"version":"1.12.2"},{"stylesheets":1,"size":70479,"rules":733,"selectors":1171,"simplicity":0.6259607173356105,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":93,"version":"1.12.1"},{"stylesheets":1,"size":70448,"rules":732,"selectors":1170,"simplicity":0.6256410256410256,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":93,"version":"1.12.0"},{"stylesheets":1,"size":70278,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.11.2"},{"stylesheets":1,"size":70214,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.11.1"},{"stylesheets":1,"size":70273,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.11.0"},{"stylesheets":1,"size":70255,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.9.0"},{"stylesheets":1,"size":70209,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.8.7"},{"stylesheets":1,"size":70255,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.8.6"},{"stylesheets":1,"size":70209,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.8.5"},{"stylesheets":1,"size":70209,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.8.4"},{"stylesheets":1,"size":70255,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.8.3"},{"stylesheets":1,"size":70255,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.8.2"},{"stylesheets":1,"size":69994,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.8.1"},{"stylesheets":1,"size":70654,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.8.0"},{"stylesheets":1,"size":79441,"rules":801,"selectors":1268,"simplicity":0.6317034700315457,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.7.1"},{"stylesheets":1,"size":79441,"rules":801,"selectors":1268,"simplicity":0.6317034700315457,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.7.0"},{"stylesheets":1,"size":79368,"rules":801,"selectors":1268,"simplicity":0.6317034700315457,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.6.1"},{"stylesheets":1,"size":79369,"rules":801,"selectors":1268,"simplicity":0.6317034700315457,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.6.0"},{"stylesheets":1,"size":79369,"rules":801,"selectors":1268,"simplicity":0.6317034700315457,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.5.8"},{"stylesheets":1,"size":79367,"rules":801,"selectors":1268,"simplicity":0.6317034700315457,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.5.7"},{"stylesheets":1,"size":79367,"rules":801,"selectors":1268,"simplicity":0.6317034700315457,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.5.5"},{"stylesheets":1,"size":79333,"rules":800,"selectors":1268,"simplicity":0.6309148264984227,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.5.4"},{"stylesheets":1,"size":79190,"rules":800,"selectors":1268,"simplicity":0.6309148264984227,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.5.3"},{"stylesheets":1,"size":79190,"rules":800,"selectors":1268,"simplicity":0.6309148264984227,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.5.2"},{"stylesheets":1,"size":79190,"rules":800,"selectors":1268,"simplicity":0.6309148264984227,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.5.1"},{"stylesheets":1,"size":79190,"rules":800,"selectors":1268,"simplicity":0.6309148264984227,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.5.0"},{"stylesheets":1,"size":79333,"rules":800,"selectors":1268,"simplicity":0.6309148264984227,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.4.1"},{"stylesheets":1,"size":79241,"rules":799,"selectors":1267,"simplicity":0.6306235201262825,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.4.0"},{"stylesheets":1,"size":79132,"rules":799,"selectors":1267,"simplicity":0.6306235201262825,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.19"},{"stylesheets":1,"size":79132,"rules":799,"selectors":1267,"simplicity":0.6306235201262825,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.18"},{"stylesheets":1,"size":79109,"rules":799,"selectors":1268,"simplicity":0.6301261829652997,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.17"},{"stylesheets":1,"size":79043,"rules":799,"selectors":1268,"simplicity":0.6301261829652997,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.16"},{"stylesheets":1,"size":78577,"rules":788,"selectors":1257,"simplicity":0.6268894192521878,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.15"},{"stylesheets":1,"size":77378,"rules":784,"selectors":1236,"simplicity":0.6343042071197411,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.14"},{"stylesheets":1,"size":77230,"rules":783,"selectors":1235,"simplicity":0.6340080971659919,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.13"},{"stylesheets":1,"size":77228,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.12"},{"stylesheets":1,"size":77228,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.11"},{"stylesheets":1,"size":77228,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.10"},{"stylesheets":1,"size":77226,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.9"},{"stylesheets":1,"size":77122,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.8"},{"stylesheets":1,"size":77211,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.7"},{"stylesheets":1,"size":77211,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.6"},{"stylesheets":1,"size":77211,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.5"},{"stylesheets":1,"size":77585,"rules":782,"selectors":1239,"simplicity":0.6311541565778854,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.4"},{"stylesheets":1,"size":77585,"rules":782,"selectors":1239,"simplicity":0.6311541565778854,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.3"},{"stylesheets":1,"size":77585,"rules":782,"selectors":1239,"simplicity":0.6311541565778854,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.2"},{"stylesheets":1,"size":76931,"rules":793,"selectors":1218,"simplicity":0.6510673234811166,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":92,"version":"1.3.1"},{"stylesheets":1,"size":76905,"rules":793,"selectors":1217,"simplicity":0.6516023007395234,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":92,"version":"1.3.0"},{"stylesheets":1,"size":75981,"rules":779,"selectors":1201,"simplicity":0.6486261448792673,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.2.2"},{"stylesheets":1,"size":75959,"rules":779,"selectors":1201,"simplicity":0.6486261448792673,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.2.1"},{"stylesheets":1,"size":71768,"rules":784,"selectors":1119,"simplicity":0.7006255585344057,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.2.0"},{"stylesheets":1,"size":71982,"rules":786,"selectors":1125,"simplicity":0.6986666666666667,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.1.3"},{"stylesheets":1,"size":71982,"rules":786,"selectors":1125,"simplicity":0.6986666666666667,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.1.2"},{"stylesheets":1,"size":71982,"rules":786,"selectors":1125,"simplicity":0.6986666666666667,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.1.1"},{"stylesheets":1,"size":71982,"rules":786,"selectors":1125,"simplicity":0.6986666666666667,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.1.0"},{"stylesheets":1,"size":68662,"rules":713,"selectors":1006,"simplicity":0.7087475149105368,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":95,"version":"1.0.6"},{"stylesheets":1,"size":68662,"rules":713,"selectors":1006,"simplicity":0.7087475149105368,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":95,"version":"1.0.5"},{"stylesheets":1,"size":69077,"rules":716,"selectors":1009,"simplicity":0.709613478691774,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"1.0.4"},{"stylesheets":1,"size":69806,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"1.0.3"},{"stylesheets":1,"size":69806,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"1.0.2"},{"stylesheets":1,"size":69810,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"1.0.1"},{"stylesheets":1,"size":69755,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"1.0.0"},{"stylesheets":1,"size":69757,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"0.20.0"},{"stylesheets":1,"size":69757,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"0.19.1"},{"stylesheets":1,"size":69684,"rules":721,"selectors":1016,"simplicity":0.7096456692913385,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"0.19.0"},{"stylesheets":1,"size":69240,"rules":720,"selectors":1018,"simplicity":0.7072691552062869,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":99,"version":"0.18.2"},{"stylesheets":1,"size":70447,"rules":731,"selectors":1035,"simplicity":0.706280193236715,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":104,"version":"0.17.2"},{"stylesheets":1,"size":70451,"rules":731,"selectors":1035,"simplicity":0.706280193236715,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":104,"version":"0.17.1"},{"stylesheets":1,"size":70461,"rules":731,"selectors":1035,"simplicity":0.706280193236715,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":104,"version":"0.17.0"},{"stylesheets":1,"size":73656,"rules":711,"selectors":1018,"simplicity":0.6984282907662083,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":98,"version":"0.16.0"},{"stylesheets":1,"size":66536,"rules":639,"selectors":917,"simplicity":0.6968375136314068,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.15.2"},{"stylesheets":1,"size":66200,"rules":639,"selectors":917,"simplicity":0.6968375136314068,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.15.1"},{"stylesheets":1,"size":66536,"rules":639,"selectors":917,"simplicity":0.6968375136314068,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.15.0"},{"stylesheets":1,"size":67418,"rules":637,"selectors":912,"simplicity":0.6984649122807017,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.14.4"},{"stylesheets":1,"size":67445,"rules":637,"selectors":912,"simplicity":0.6984649122807017,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.14.3"},{"stylesheets":1,"size":67445,"rules":637,"selectors":912,"simplicity":0.6984649122807017,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.14.2"},{"stylesheets":1,"size":67406,"rules":637,"selectors":912,"simplicity":0.6984649122807017,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.14.1"},{"stylesheets":1,"size":67406,"rules":637,"selectors":912,"simplicity":0.6984649122807017,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.14.0"},{"stylesheets":1,"size":88578,"rules":883,"selectors":1256,"simplicity":0.7030254777070064,"idSelectors":47,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":25,"mediaQueries":122,"version":"0.13.0"},{"stylesheets":1,"size":88440,"rules":870,"selectors":1243,"simplicity":0.6999195494770716,"idSelectors":47,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":25,"mediaQueries":122,"version":"0.12.0"},{"stylesheets":1,"size":59825,"rules":511,"selectors":808,"simplicity":0.6324257425742574,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":18,"mediaQueries":50,"version":"0.11.0"},{"stylesheets":1,"size":54633,"rules":494,"selectors":748,"simplicity":0.660427807486631,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":20,"mediaQueries":44,"version":"0.10.0"},{"stylesheets":1,"size":54633,"rules":494,"selectors":748,"simplicity":0.660427807486631,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":20,"mediaQueries":44,"version":"0.9.21"},{"stylesheets":1,"size":54570,"rules":493,"selectors":747,"simplicity":0.6599732262382865,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":20,"mediaQueries":44,"version":"0.9.20"},{"stylesheets":1,"size":54718,"rules":493,"selectors":747,"simplicity":0.6599732262382865,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":20,"mediaQueries":44,"version":"0.9.19"},{"stylesheets":1,"size":51858,"rules":469,"selectors":703,"simplicity":0.6671408250355618,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":18,"mediaQueries":44,"version":"0.9.18"},{"stylesheets":1,"size":51858,"rules":469,"selectors":703,"simplicity":0.6671408250355618,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":18,"mediaQueries":44,"version":"0.9.17"},{"stylesheets":1,"size":51259,"rules":463,"selectors":687,"simplicity":0.6739446870451238,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":14,"mediaQueries":43,"version":"0.9.15"},{"stylesheets":1,"size":53483,"rules":464,"selectors":676,"simplicity":0.6863905325443787,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":14,"mediaQueries":43,"version":"0.9.13"},{"stylesheets":1,"size":53483,"rules":464,"selectors":676,"simplicity":0.6863905325443787,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":14,"mediaQueries":43,"version":"0.9.12"},{"stylesheets":1,"size":47186,"rules":383,"selectors":588,"simplicity":0.6513605442176871,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":14,"mediaQueries":41,"version":"0.9.11"},{"stylesheets":1,"size":47184,"rules":383,"selectors":588,"simplicity":0.6513605442176871,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":14,"mediaQueries":41,"version":"0.9.10"}]},"template":"styleguide/templates/stats.tpl"}],"navigation":["brand","pattern-library","design","language"],"project":{"name":"ustyle","version":"1.16.2","description":"A living styleguide and pattern library by uSwitch.","keywords":["css","sass","scss","js","javascript","front-end","styleguide","uswitch","ustyle"],"homepage":"http://ustyle.guide","bugs":{"url":"https://github.com/uswitch/ustyle/issues"},"license":"Apache-2.0","author":{"name":"uSwitch Limited","email":"frontend@uswitch.com"},"main":"index.js","files":["dist","vendor/assets/stylesheets","vendor/assets/images/forms","index.js"],"repository":"uswitch/ustyle","engines":{"npm":"^5.4.2"},"scripts":{"start":"grunt","depcheck":"depcheck --specials=grunt --ignores=depcheck,grunt-*"},"devDependencies":{"async":"^0.9.0","autoprefixer":"^6.5.0","browser-sync":"^1.8.2","cheerio":"^0.20.0","depcheck":"^0.6.7","dss":"^1.0.4","gray-matter":"^2.0.0","grunt":"^0.4.5","grunt-build-control":"^0.3.0","grunt-cli":"^1.2.0","grunt-contrib-concat":"^0.5.0","grunt-contrib-copy":"^0.8.0","grunt-contrib-sass":"^0.9.2","grunt-contrib-uglify":"^0.9.2","grunt-contrib-watch":"^0.6.1","grunt-env":"^0.4.2","grunt-newer":"^1.1.0","grunt-postcss":"^0.8.0","grunt-sassdoc":"^2.0.0","grunt-scss-lint":"~0.3.4","grunt-shell":"^1.1.1","grunt-standard":"^3.1.0","grunt-svgmin":"^2.0.0","grunt-svgstore":"^1.0.0","grunt-version":"^1.0.0","handlebars":"^4.0.11","load-grunt-tasks":"~3.1.0","lodash":"^2.4.1","marked":"^0.3.9","node-sass":"^4.5.3","semver":"^4.3.3","simple-git":"^1.3.0","stylestats":"^4.2.2","underscore.string":"^3.0.2"}}}
|
|
1
|
+
{"pages":[{"name":"Framework","page":"index.html","template":"styleguide/templates/simple.tpl","section":"brand","content":"<h2 id=\"we-believe-in-simplicity-\">We believe in simplicity.</h2>\n<p>That’s why we’ve made these guidelines really simple. They inform the way we look, feel, behave and sound as a company. They help ensure we remain consistent, impactful and recognisable across all of our communications.</p>\n<h3 id=\"our-values\">Our values</h3>\n<ul>\n<li>Fairness</li>\n<li>Knowledge</li>\n<li>Clarity</li>\n<li>Confidence</li>\n<li>Possibilities</li>\n</ul>\n<h3 id=\"our-mission\">Our mission</h3>\n<p>Using our expansive market knowledge and customer insight, we want to provide a simple, relevant service allowing customers to switch with minimal hassle.</p>\n<h3 id=\"our-ambition\">Our ambition</h3>\n<p>To be the UK’s leading comparison site for all consumers who wish to make their money go further.</p>\n<h3 id=\"our-vision\">Our vision</h3>\n<p>We are the comparison service of choice – because we make it relevant, personal and simple to use for consumers and partners.</p>\n<h3 id=\"our-benefit\">Our benefit</h3>\n<p>We help our customers feel like life just keeps on switching for the better, allowing their time and money to be spent on what really matters.</p>\n<h3 id=\"our-personality\">Our personality</h3>\n<ul>\n<li>Expert</li>\n<li>Frank</li>\n<li>Connected</li>\n<li>Human</li>\n<li>Advisory</li>\n</ul>\n<h2 id=\"brand-positioning\">Brand positioning</h2>\n<h3 id=\"intuitive-and-focused\">Intuitive and focused</h3>\n<p>We are connected to the individual needs of our customers. In fact, we work to understand them better than anyone. We use masses of customer data, constantly capturing more and more to continually improve the relevance of our advice. Add that to our commitment to ensure ours is the most simple and comprehensive switching service available, and our customers can find clarity in a confusing marketplace and build confidence in our brand.</p>\n<h3 id=\"authoritative-and-directional\">Authoritative and directional</h3>\n<p>We know what we’re talking about because we’re experts in what we do. We can demonstrate an unparalleled in-depth and connected understanding of our customers, the economy, household finances and the industries in which we operate. We’re always frank. We fight for what we believe is fair. And we do what we believe is right to build respect and trust.</p>\n<h3 id=\"personal-and-engaging\">Personal and engaging</h3>\n<p>We are a human brand that talks to our customers, not preaches. We treat them like knowledgeable peers. Always consistent in our tone, look and customer experience across all touch points. To make things easy to understand, information is visualised and brought to life, enabling our customers to see how they can save money or get better value for money.</p>\n<h3 id=\"experimental-and-bold\">Experimental and bold</h3>\n<p>We are pro-active, always adapting and pre-empting changes in customer mood and wider markets in which we exist. It lets our customers connect and interact with us with confidence.And we are proud of our BETA mindset. We stay agile, but we never look unpredictably experimental. Rather, we are open, current, honest, committed and consistent with our advice</p>\n","subNav":[]},{"name":"Introduction","page":"index.html","template":"styleguide/templates/simple.tpl","section":"pattern-library","content":"<p>\n Our pattern library comes as an easily distributed package, ready to use in multiple programming environments. It contains our basic CSS components and correct usage, as well as JavaScript components that are widely used across the website.\n</p>\n<a class=\"us-btn us-btn--small\" href=\"https://github.com/uswitch/ustyle\">View on GitHub</a>\n<div class=\"us-content-group mobile-bordered\">\n <h2 class=\"trailered\">Distribution methods</h2>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6 trailered\">\n <img src=\"/images/ruby-logo.png\" alt=\"Ruby logo\" class=\"distro-image\">\n <h3>Ruby gem</h3>\n <p>uStyle was initially created as a gem. Some of the Sass functions rely on Ruby to run. You can install it via any Gemfile and it will install the required dependencies.</p>\n <pre><code class=\"ruby\">gem 'ustyle', git: "git@github.com:uswitch/ustyle.git"</code></pre>\n </div>\n <div class=\"us-col-md-6 trailered\">\n <img src=\"/images/bower-logo.png\" alt=\"Bower logo\" class=\"distro-image\">\n <h3>Bower package</h3>\n <p>Install it as a bower package. This will pull down the original <code>.scss</code> files and compiled static CSS + JS.</p>\n <pre><code class=\"javascript\">\n "dependencies": {\n "ustyle": "git@github.com:uswitch/ustyle.git#~0.19.1"\n }\n </code></pre>\n </div>\n </div>\n</div>\n<div class=\"us-content-group mobile-bordered\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6 trailered\">\n <img src=\"/images/cloudfront-logo.png\" alt=\"Cloudfront logo\" class=\"distro-image\">\n <h3>Cloudfront</h3>\n <p>Every time uStyle gets a new version, the version gets updated across our Cloudfront distributions.\n <pre><code class=\"html\">\n <!-- get latest -->\n <link href='//assets0.uswitch.com/s3/uswitch-assets-eu/ustyle/ustyle-latest.css' media='all' rel='stylesheet' type='text/css' />\n <!-- get versioned -->\n <link href='//assets0.uswitch.com/s3/uswitch-assets-eu/ustyle/VERSION/ustyle-latest.css' media='all' rel='stylesheet' type='text/css' />\n </code></pre>\n </p></div>\n <div class=\"us-col-md-6\">\n <img src=\"/images/npm-logo.png\" alt=\"NPM logo\" class=\"distro-image\">\n <h3>NPM Package</h3>\n <pre><code class=\"javascript\">\n "devDependencies": {\n "ustyle": "git@github.com:uswitch/ustyle.git#~0.19.1"\n }\n </code></pre>\n </div>\n </div>\n</div>\n<div class=\"us-content-group mobile-bordered\">\n <h2>Browser support</h2>\n <p>We use <a href=\"https://github.com/postcss/autoprefixer\">Autoprefixer + Browserlist</a> to decide what vendor prefixes to apply to our <code>Sass</code> files. We have a slightly wider browser support than the default (<a href=\"https://github.com/ai/browserslist#browserslist-\">here</a>). Currently we support all the way to IE9.</p>\n <p>Below is what we support. Each line is the minimum version or % use based on CanIUse metrics</p>\n <table class=\"pure-table pure-table-bordered\">\n <thead>\n <tr>\n <th>Browser</th>\n <th>Minimum version supported</th>\n </tr>\n </thead>\n <tbody>\n <tr>\n <td>Safari, Chrome, Opera</td>\n <td>Last 5 versions</td>\n </tr>\n <tr>\n <td>Firefox</td>\n <td>ESR</td>\n </tr>\n <tr>\n <td>Internet Explorer</td>\n <td>10</td>\n </tr>\n <tr>\n <td>Global usage</td>\n <td>> 1%</td>\n </tr>\n </tbody>\n </table>\n</div>\n<div class=\"us-content-group mobile-bordered\">\n <h2>Installation</h2>\n <p>See our <a href=\"https://github.com/uswitch/ustyle\">GitHub</a> for documentation on installing this across applications.</p>\n</div>\n","subNav":[]},{"name":"uSwitch living styleguide","page":"index.html","template":"styleguide/templates/simple.tpl","section":"","content":"<p>\n The sum of our efforts towards style guidelines, a pattern library and an automated front-end. Made with ❤ at <a href=\"https://www.uswitch.com\" target=\"_blank\"><strong class=\"us-color--blue\">uSwitch.com</strong></a>\n</p>\n<div class=\"us-content-group mobile-bordered\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <h3>Design guidelines</h3>\n <p>uStyle includes documentation and guidelines relating to our core design principles. It is where we document everything that happens within our brand, UX and front-end development.</p>\n </div>\n <div class=\"us-col-md-6\">\n <h3>Automated development</h3>\n <p>uStyle is a gem, a bower package, a npm package and static assets. This allows our team setup to choose how they wish to implement the core front-end of uSwitch. We've tried to be as accessible as possible.</p>\n </div>\n </div>\n</div>\n<div class=\"us-content-group mobile-bordered\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <h3>Pattern library</h3>\n <p>At its core, uStyle is a pattern library. It contains all current components and elements of the uSwitch UI. These are documented in the <a href=\"/pattern-library/\">pattern library</a> section.</p>\n </div>\n <div class=\"us-col-md-6\">\n <h3>Designer + developer happiness</h3>\n <p>Delivering designer + developer happiness is very important to us. uStyle provides a base for all our design and development work and allows our designers and developers to focus on the things that matter, whilst making their lives easier when prototyping.</p>\n </div>\n </div>\n</div>\n<div class=\"us-content-group\">\n <h2>The logo</h2>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-2\">\n <svg class=\"us-icon--large us-icon--ustyle\" role=\"img\">\n <use xlink:href=\"/images/icons.svg#icon-ustyle\"/>\n </svg>\n </div>\n <div class=\"us-col-md-10\">\n <p>There is no reason for this logo other than it's funny and unicorns are all the rage just now.</p>\n\n <p><strong>Disclaimer:</strong> uSwitch is not a unicorn company.\n </p></div>\n </div>\n</div>\n<div class=\"us-content-group\">\n <h2>We're looking for great talent</h2>\n <p>Want to help us build more things like uStyle? We're constantly trying to deliver a better experience for customers and developers, and we're looking for passionate people to join our team.</p>\n <p>Fire us an email at <a href=\"mailto:jobs+developer@uswitch.com\">jobs@uswitch.com</a> with your CV and tell us a bit about yourself.</p>\n</div>\n","subNav":[]},{"name":"Imagery","page":"index.html","template":"styleguide/templates/simple.tpl","section":"design","content":"\n\n<div class=\"us-content-group\" id=\"how-to-select-an-image\">\n <h2>How to select an image</h2>\n <p>We use imagery to relate and engage with our customers, to support our message, and to aid in understanding. These guidelines are here to help you chose images that reflect our brand values and personality. If you’re questioning whether an image is suitable, ask a designer – they’ll be happy to help.</p>\n\n <h3>Principles</h3>\n\n <h4>Focused</h4>\n <p>Images are more interesting when they have a point of focus.</p>\n\n <h4>Contextual</h4>\n <p>People and objects should be properly contextualised. Avoid cropping an image so severely that it’s setting is lost.</p>\n\n <h4>Local</h4>\n <p>Make sure clothing, architectural features, light and style have a UK feel.</p>\n\n <h3>Mood</h3>\n <p>Relatable, genuine, optimistic, affirmative.</p>\n\n <h4>Colour</h4>\n <p>Our preference is for natural light where possible. Colours should be warm, vibrant and saturated where possible – avoid images that are “washed out”. Do not use dramatic filters, colourisation effects, or black and white.</p>\n\n <h4>People and lifestyle</h4>\n <p>Lifestyle shots should be reportage in style, documenting people in their day-to-day lives. Subjects should be unposed, and within their natural environment. People should never be cut out or appear over solid backgrounds. Images should be relatable and feature real, everyday people. Avoid fake or forced emotions as it can seem ingenuine. A range of gender, race, and age should be represented.</p>\n\n <h4>Products and objects</h4>\n <p>Object focused imagery may be cut out and appear over our brand colours or on white. When cut out, the whole object must be appear – edges must never be cut off.</p>\n\n <p>When objects aren’t cut out, they should be realistic in their setting and not appear staged. Images should be straightforward, not overly metaphor based, and should not appear noticeably manipulated.</p>\n\n <h4>Illustrations</h4>\n <p>Illustrations may be used to add understanding and delight to an experience.</p>\n\n <p>Our illustrative style is simple and geometric. Our brand colours should be used predominantly, although variations in shades and saturation may be necessarily. Illustrations should generally appear over solid colour or white backgrounds. Avoid using illustrations that are clichéd or overly metaphor based.</p>\n\n <h4>Generating new photography</h4>\n <p>We generally try to avoid commissioning photography unless completely necessary as it can prove to be extremely expensive. Before commissioning new photography, carefully consider:</p>\n\n <ol>\n <li>Do we already have what’s needed in our image library?</li>\n <li>If not, can you find it – in stock, from a press office or other legitimate source?</li>\n </ol>\n\n <p>Where we do shoot our own (product shots, staff portraits etc being examples of where this may be necessary) we follow these guidelines.</p>\n</div>\n\n<div class=\"us-content-group\" id=\"cropping\">\n <h2>Cropping</h2>\n <p>Images will often need to be cropped to fit various size requirements. When cropped, images should still follow all guidelines.</p>\n</div>\n\n<div class=\"us-content-group\" id=\"where-to-get-images\">\n <h2>Where to get images</h2>\n <p>The following sites are our preferred resources as images are royalty-free, reasonably priced, and generally good quality. There are shared uSwitch logins for these sites – get in touch with the Service Desk if you don't have access.</p>\n\n <ol>\n <li><a href=\"http://www.shutterstock.com\">www.shutterstock.com</a></li>\n <p>Monthly subscription which allows us to download 750 images per month</p>\n\n <li><a href=\"http://www.istock.com\">www.istock.com</a></li>\n <p>Monthly subscription which allows us to download 10 signature images per month</p>\n\n <li><a href=\"http://www.500px.com\">www.500px.com</a></li>\n <p>Images are purchased individually.</p>\n </ol>\n</div>\n\n<div class=\"us-content-group\" id=\"what-to-purchase\">\n <h2>What to purchase</h2>\n <h3>Dimensions</h3>\n <p>Stock sites often allow you to purchase images in Small, Medium and Large sizes. Purchasing the largest option is recommended as this will cover most of our online use cases and allow for flexibility when it comes to cropping.</p>\n\n <h3>File types</h3>\n <h4>Photography</h4>\n <p>Most photography that you purchase from stock sites will be either JPG or TIFF format. Either is fine, but if it’s a TIFF, it will need to be converted to a JPG before using online.</p>\n\n <h4>Graphics and Illustrations</h4>\n <p>Graphics and illustrations are usually available in EPS, SVG, or PNG format. When available, EPS or SVG files are preferred as they can be scaled to any size. EPS files will need to be converted to an SVG or PNG before using online.</p>\n</div>\n\n\n<div class=\"us-content-group\" id=\"types-of-licenses\">\n <h2>Types of licenses</h2>\n\n <h3>1. Rights-managed</h3>\n <p>Rights-managed images often have limitations in regards to the following:</p>\n\n <ul>\n <li>How many times you can use them</li>\n <li>Regions you can use them in</li>\n <li>Type of media you can use them on</li>\n <li>Length of time you can use them for</li>\n </ul>\n\n <h3>2. Royalty-free</h3>\n <p>Royalty-free images can generally be used on multiple projects for an unlimited amount of time. They should not be confused with “free”. You must still pay a one-off cost to use them.</p>\n\n <p>We prefer royalty-free images as there’s fewer restrictions around using them. However even with this type of licence, there may be some usage restrictions, so it’s important to read the licence agreements and act accordingly.</p>\n\n <ul>\n <li><a href=\"http://www.shutterstock.com/license\">Shutterstock licensing</a></li>\n <li><a href=\"http://www.istockphoto.com/legal/license-agreement\">iStock licensing</a></li>\n <li><a href=\"http://static.500px.net/docs/commercial_licensing_agreement.pdf\">500px licensing</a></li>\n </ul>\n\n <h3>3. Creative Commons</h3>\n <p>Creative Commons means the owner of an image has made it available for use under certain restrictions. Restrictions often include that you must attribute the image to the owner, that you may not use it for commercial purposes, or that you may not alter the image.</p>\n\n <p><a href=\"http://www.flickr.com\">Flickr</a> is a good resource for images that have been made available through Creative Commons, but make sure you understand and comply with any restrictions they’re being offered under.</p>\n\n <h3>4. Public Domain</h3>\n <p>Public Domain refers to images that do not have a copyright and therefore free for anyone to use. It can apply to images that are very old or where the creator has given up their copyright.</p>\n\n <h3>How do you know if you can use an image?</h3>\n <h4>Only use an image if:</h4>\n <ol type=\"a\">\n <li>You’ve purchased it</li>\n <li>You’ve taken it yourself or hired a photographer to take it for you</li>\n <li>You have written permission from the owner of the image</li>\n <li>It’s Creative Commons and you’ve complied with any usage conditions</li>\n <li>It’s Public Domain</li>\n </ol>\n\n <h4>Never take images directly from:</h4>\n <ul>\n <li>Search engines (Google images etc.)</li>\n <li>Other people’s or organisation’s social media (embedding a tweet is ok if you ask the owner’s permission)</li>\n <li>News outlets</li>\n </ul>\n\n <p>Keep in mind that manipulating an image that isn’t yours (adding a filter, cropping etc) doesn’t give you the right to use it.</p>\n</div>\n\n<div class=\"us-content-group\" id=\"image-storage\">\n <h2>Image Storage</h2>\n <h3>Where to store images</h3>\n <p>Purchased images should be added to our shared Google Drive storage within the appropriate category. <strong>This should be the original, full-sized, uncropped and uncompressed image only.</strong> This allows for cross vertical sharing as well as usage in other mediums such as email.</p>\n\n <p>While the shared library exists so images can be reused, try not to overuse images to the point that they lose their impact.</p>\n\n <h3>What to name images</h3>\n <p>Images should be named with a few descriptive words, with words separated by hyphens. Images that are an illustration should have the prefix of "illustation-".</p>\n\n <p>For mobile phones, image names should be formatted as follows:</p>\n <p><strong>yyyy-mm-dd-manufacturer-phonename-phoneversion.png</strong></p>\n <p>For example:<strong> 2015-04-10-samsung-galaxy-s6.png</strong></p>\n <p>The date refers to the <u>date of the phone release.</u></p>\n\n <h3>Tagging images</h3>\n <p>For searchability, it's important to include descriptive tags for each image you add to Google Drive. You can do this under the "Description" field. The first two tags should be the stock site you got the image from, as well as the image number. Include any other tags that might be useful, separating each tag with commas. </p>\n</div>\n\n<div class=\"us-content-group\" id=\"about-retina\">\n <h2>About Retina</h2>\n <p><strong>Retina display</strong> refers to monitors and devices that have a very high pixel density, making screen content appear very crisp and sharp.</p>\n\n <p>To take advantage of these high-quality displays, we must use <strong>Retina images</strong>. That simply means that we need to double the intended size of our images. </p>\n</div>\n\n<div class=\"us-content-group\" id=\"our-image-sizes\">\n <h2>Our image sizes</h2>\n <p>Below are the minimum required sizes for our images in various materials. If an image does not meet this size, it can’t be used and an alternate image will need to be sourced. An image must not be scaled up in order to meet the minimum required size.</p>\n\n <h3>Emails</h3>\n\n <h4>Insights</h4>\n\n <strong>Hero article</strong>\n <ul>\n <li>Display size: 130w x 147h</li>\n <li>Minimum required size: 260w x 294h</li>\n </ul>\n\n <strong>Article</strong>\n <ul>\n <li>Display size: 150w x 170h</li>\n <li>Minimum required size: 300w x 340h</li>\n </ul>\n\n <strong>Mobile phones</strong>\n <ul>\n <li>Display size: 75w x 125h</li>\n <li>Minimum required size: 150w x 250h</li>\n </ul>\n\n <strong>Provider logos</strong>\n <ul>\n <li>Display size: 100w x 35h</li>\n <li>Minimum required size: 200w x 70h</li>\n </ul>\n\n <h4>Tacticals</h4>\n\n <strong>Hero article</strong>\n <ul>\n <li>Display size: 250w x 200h</li>\n <li>Minimum required size: 500w x 400h</li>\n </ul>\n\n <h4>Guides</h4>\n\n <strong>Top banner</strong>\n <ul>\n <li>Display size: 1170hw x 168h</li>\n <li>Minimum required size: Not currently Retina</li>\n </ul>\n\n <strong>Content</strong>\n <ul>\n <li>Display size: 770w x flexible height</li>\n <li>Minimum required size: Not currently Retina</li>\n </ul>\n\n <h4>News</h4>\n\n <strong>Content</strong>\n <ul>\n <li>Display size: 800w x flexible height</li>\n <li>Minimum required size: Not currently Retina</li>\n </ul>\n</div>\n\n<div class=\"us-content-group\" id=\"alt-text\">\n <h2>Alternative (alt) text</h2>\n <p>Alt text is an important aspect of web accessibility. All images on our site should include meaningful alt text. <a href=\"http://webaim.org/techniques/alttext/\">See here</a> for best practices.</p>\n <p>If the image is purely decorative, it should have a blank alternative text\n so something unintended (like the image file name) is not read out by a screenreader.</p>\n</div>\n\n<div class=\"us-content-group\" id=\"examples\">\n <h2>Examples</h2>\n <div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/natural-1.jpg\" alt=\"\">\n <img class=\"us-img--full\" src=\"/images/natural-2.jpg\" alt=\"\">\n <img class=\"us-img--full\" src=\"/images/natural-3.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--green\">Do</strong><br>\n Images feel natural and authentic.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/unnatural-1.jpg\" alt=\"\">\n <img class=\"us-img--full\" src=\"/images/unnatural-2.jpg\" alt=\"\">\n <img class=\"us-img--full\" src=\"/images/unnatural-3.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--red\">Don't</strong><br>\n Images appear staged.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/good-subject.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--green\">Do</strong><br>\n Subject is contextualised.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/bad-subject.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--red\">Don't</strong><br>\n Image is too closely cropped.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/accurate-housing.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--green\">Do</strong><br>\n Houses are a typical UK style.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/innaccurate-housing.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--red\">Don't</strong><br>\n Houses feel american style.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/warm.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--green\">Do</strong><br>\n Image has warm tones.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/cold.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--red\">Don't</strong><br>\n Image is too cool.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/unaltered.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--green\">Do</strong><br>\n Image does not appear altered.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/altered.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--red\">Don't</strong><br>\n Image is noticeably manipulated.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/realistic.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--green\">Do</strong><br>\n Image is realistic and relatable.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-examples\">\n <img class=\"us-img--full\" src=\"/images/cliche.jpg\" alt=\"\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--red\">Don't</strong><br>\n Image is cliché and metaphor based.\n </p>\n </div>\n <div class=\"us-col-xsm-6 image-tip\">\n <img class=\"us-img--full\" src=\"/images/not-centered.jpg\" alt=\"\">\n </div>\n <div class=\"us-col-xsm-6 image-tip\">\n <img class=\"us-img--full\" src=\"/images/centered.jpg\" alt=\"\">\n </div>\n <div class=\"image-tip image-tip__reason us-col-xsm-12\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--green\">Tip</strong><br>\n Images where subjects are placed to the left/right and top/bottom are more interesting than those placed centrally.\n </p>\n </div>\n <div>\n <div class=\"us-col-xsm-6 image-tip\">\n <img class=\"us-img--full\" src=\"/images/illustrations_1.png\" alt=\"\">\n <img class=\"us-img--full\" src=\"/images/illustrations_2.png\" alt=\"\">\n <img class=\"us-img--full\" src=\"/images/illustrations_3.png\" alt=\"\">\n </div>\n <div class=\"us-col-xsm-6 image-tip\">\n <img class=\"us-img--full\" src=\"/images/illustrations_4.png\" alt=\"\">\n <img class=\"us-img--full\" src=\"/images/illustrations_5.png\" alt=\"\">\n <img class=\"us-img--full\" src=\"/images/illustrations_6.png\" alt=\"\">\n </div>\n <div class=\"image-tip image-tip__reason us-col-xsm-12\">\n <p class=\"image-example-reason\">\n <strong class=\"us-color--green\">Do</strong><br>\n Illustrations are simple, geometric and consist primarily of brand colours (or shade/tones of brand colours).\n </p>\n </div>\n </div>\n </div>\n</div>\n","subNav":[{"name":"How to select an image","link":"#how-to-select-an-image"},{"name":"Cropping","link":"#cropping"},{"name":"Where to get images","link":"#where-to-get-images"},{"name":"What to purchase","link":"#what-to-purchase"},{"name":"Types of licenses","link":"#types-of-licenses"},{"name":"Image storage","link":"#image-storage"},{"name":"About Retina","link":"#about-retina"},{"name":"Our image sizes","link":"#our-image-sizes"},{"name":"Alt text","link":"#alt-text"},{"name":"Examples","link":"#examples"}]},{"name":"Typography","page":"typography.html","template":"styleguide/templates/simple.tpl","section":"design","content":"<p>Typography is a key element of how we communicate at uSwitch. We've recently revised our type settings and removed Open Sans from our fonts to increase legibility across devices.</p>\n<p>We have chosen to use system fonts across the website for multiple reasons:</p>\n<ul>\n<li>Improved legibility in operating systems</li>\n<li>No performance overhead in loading custom fonts</li>\n<li>Users are accustomed to their operating system fonts</li>\n</ul>\n<p>Depending on the operating system you are on, you will get one of the following fonts:</p>\n<table class=\"pure-table pure-table-bordered\">\n<thead>\n<tr class=\"header\">\n<th>Font</th>\n<th>Device Targeted</th>\n</tr>\n</thead>\n<tbody>\n<tr class=\"odd\">\n<td>-apple-system (San Francisco)</td>\n<td>iOS Safari, macOS Safari, macOS Firefox</td>\n</tr>\n<tr class=\"even\">\n<td>BlinkMacSystemFont (San Francisco)</td>\n<td>macOS Chrome</td>\n</tr>\n<tr class=\"odd\">\n<td>Segoe UI</td>\n<td>Windows</td>\n</tr>\n<tr class=\"even\">\n<td>Roboto</td>\n<td>Android, Chrome OS</td>\n</tr>\n<tr class=\"odd\">\n<td>Oxygen / Oxygen-Sans</td>\n<td>KDE</td>\n</tr>\n<tr class=\"even\">\n<td>Fira Sans</td>\n<td>Firefox OS</td>\n</tr>\n<tr class=\"odd\">\n<td>Droid Sans</td>\n<td>Older versions of Android</td>\n</tr>\n<tr class=\"even\">\n<td>Ubuntu</td>\n<td>Ubuntu</td>\n</tr>\n<tr class=\"odd\">\n<td>Cantarell</td>\n<td>GNOME</td>\n</tr>\n<tr class=\"even\">\n<td>Helvetica Neue</td>\n<td>macOS versions < 10.11</td>\n</tr>\n<tr class=\"odd\">\n<td>Arial</td>\n<td>Any</td>\n</tr>\n<tr class=\"even\">\n<td>sans-serif</td>\n<td>Any</td>\n</tr>\n</tbody>\n</table>","subNav":[]},{"name":"Articles","page":"articles.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Articles","name":"Base article","description":"<p> Article listings for news are important on the landing pages.</p>\n","markup":{"example":" <article class='us-article'>\n <a class='us-article__link' href=\"#\">\n <div class='us-grid-row'>\n <div class='us-col-md-8'>\n <h3 class='us-article__title'>Car insurance guides</h3>\n <p class='us-article__description'>\n A quarter of 18-34 year olds believe that tech companies could offer better financial services than banks\n </p>\n <div class=\"us-article__meta\">\n <span class=\"date\">2 months ago</span>\n in\n <span class=\"category\">Banking</span>\n </div>\n </div>\n <div class='us-col-md-4 us-tablet--block'>\n <img class='us-img--full us-article__image' src='https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg' />\n </div>\n </a>\n </div>\n </article>","escaped":" <article class='us-article'>\n <a class='us-article__link' href=\"#\">\n <div class='us-grid-row'>\n <div class='us-col-md-8'>\n <h3 class='us-article__title'>Car insurance guides</h3>\n <p class='us-article__description'>\n A quarter of 18-34 year olds believe that tech companies could offer better financial services than banks\n </p>\n <div class=\"us-article__meta\">\n <span class=\"date\">2 months ago</span>\n in\n <span class=\"category\">Banking</span>\n </div>\n </div>\n <div class='us-col-md-4 us-tablet--block'>\n <img class='us-img--full us-article__image' src='https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg' />\n </div>\n </a>\n </div>\n </article>"},"path":"vendor/assets/stylesheets/ustyle/articles/_base.scss","file":"_base.scss","link":"base_article"},{"page":"Pattern Library/Articles","name":"Guide article","description":"<p> Our guide and news articles are used across the site to communicate news/guide snippets. The layout is decided by our grid, by default they have 100% width.</p>\n","markup":{"example":" <div class='us-article-group'>\n <div class='us-guide-item us-col-md-4'>\n <a class='us-guide-item-link' href='#'>\n <div class='us-guide-item-image-container'>\n <div class='us-guide-item-image background' style='background-image: url(https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg)'></div>\n </div>\n <div class='us-guide-item-content'>\n <h4 class='us-guide-item-title'>Car insurance guides</h4>\n <p class='us-guide-item-description'>Read our car insurance advice guides for the facts on why you need car insurance, the types of cover available, and tips on how to make a claim.</p>\n </div>\n <div class='us-guide-item-readmore'>\n <span class='us-news-item-readmorelink'>Read more</span>\n </div>\n </a>\n </div>\n </div>","escaped":" <div class='us-article-group'>\n <div class='us-guide-item us-col-md-4'>\n <a class='us-guide-item-link' href='#'>\n <div class='us-guide-item-image-container'>\n <div class='us-guide-item-image background' style='background-image: url(https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg)'></div>\n </div>\n <div class='us-guide-item-content'>\n <h4 class='us-guide-item-title'>Car insurance guides</h4>\n <p class='us-guide-item-description'>Read our car insurance advice guides for the facts on why you need car insurance, the types of cover available, and tips on how to make a claim.</p>\n </div>\n <div class='us-guide-item-readmore'>\n <span class='us-news-item-readmorelink'>Read more</span>\n </div>\n </a>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/articles/_guide.scss","file":"_guide.scss","link":"guide_article"},{"page":"Pattern Library/Articles","name":"More article","description":"<p> If the article listing has more in a category, we use this to let a user navigate to that category.</p>\n","markup":{"example":" <div class='us-more-item us-col-md-4'>\n <a class='us-more-item-link' href='#'>\n <span class='us-more-item-title'>See more banking news</span>\n </a>\n </div>","escaped":" <div class='us-more-item us-col-md-4'>\n <a class='us-more-item-link' href='#'>\n <span class='us-more-item-title'>See more banking news</span>\n </a>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/articles/_more.scss","file":"_more.scss","link":"more_article"},{"page":"Pattern Library/Articles","name":"News article","description":"<p> The news item article standard. It mirrors the guide article. The news item image is a background image as the problem of not displaying <code><img></code> tags on mobile hasn't been resolved.</p>\n","markup":{"example":" <div class='us-article-group'>\n <div class='us-news-item us-col-md-4'>\n <a class='us-news-item-link' href='#'>\n <div class='us-news-item-image-container'>\n <div class='us-news-item-image background' style='background-image: url(https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg)'></div>\n </div>\n <div class='us-news-meta'>\n <span class='category'>Consumer rights</span>\n <span class='date'>14 Nov 2014</span>\n </div>\n <h3 class='us-news-item-title'>Customer uses promoted tweet to complain about BA</h3>\n <p class='us-news-item-snippet'>Sign of things to come? Social media helps to empower disgruntled consumer amid lost luggage row</p>\n <div class='us-news-item-readmore'>\n <span class='us-news-item-readmorelink'>More consumer rights</span>\n </div>\n </a>\n </div>\n </div>","escaped":" <div class='us-article-group'>\n <div class='us-news-item us-col-md-4'>\n <a class='us-news-item-link' href='#'>\n <div class='us-news-item-image-container'>\n <div class='us-news-item-image background' style='background-image: url(https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg)'></div>\n </div>\n <div class='us-news-meta'>\n <span class='category'>Consumer rights</span>\n <span class='date'>14 Nov 2014</span>\n </div>\n <h3 class='us-news-item-title'>Customer uses promoted tweet to complain about BA</h3>\n <p class='us-news-item-snippet'>Sign of things to come? Social media helps to empower disgruntled consumer amid lost luggage row</p>\n <div class='us-news-item-readmore'>\n <span class='us-news-item-readmorelink'>More consumer rights</span>\n </div>\n </a>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/articles/_news.scss","file":"_news.scss","link":"news_article"},{"page":"Pattern Library/Articles","name":"Related items","description":"<p> Related lists used for content sidebars.</p>\n","markup":{"example":" <h2 class=\"us-related__title\">Title here</h2>\n <ul class=\"us-related us-list--reset\">\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">Car accident claims — How to make a car insurance claim</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">How to get the best car insurance deals</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">No claims bonus explained: how to protect a no claims discount</a>\n </li>\n </ul>","escaped":" <h2 class=\"us-related__title\">Title here</h2>\n <ul class=\"us-related us-list--reset\">\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">Car accident claims — How to make a car insurance claim</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">How to get the best car insurance deals</a>\n </li>\n <li class=\"us-related__item\">\n <a class=\"us-related__item-link\" href=\"#\">No claims bonus explained: how to protect a no claims discount</a>\n </li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/articles/_related.scss","file":"_related.scss","link":"related_items"}]},{"name":"Utilities","page":"utilities.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Utilities","name":"General","description":"<p> These utility classes allow for some basic CSS properties to be applied across elements. The classname applies to the property that is getting set, with the value as the modifier.</p>\n","state":[{"name":".us-clearfix","escaped":"us-clearfix","description":"Clear floats.","markup":{"example":" <div class='us-clearfix'>\n <p>content</p>\n </div>"}},{"name":".us-float--left","escaped":"us-float--left","description":"Float element to the left.","markup":{"example":" <div class='us-float--left'>\n <p>content</p>\n </div>"}},{"name":".us-float--right","escaped":"us-float--right","description":"Float element to the right.","markup":{"example":" <div class='us-float--right'>\n <p>content</p>\n </div>"}},{"name":".us-align--left","escaped":"us-align--left","description":"Align content of the element to the left.","markup":{"example":" <div class='us-align--left'>\n <p>content</p>\n </div>"}},{"name":".us-align--center","escaped":"us-align--center","description":"Align content of the element to the center.","markup":{"example":" <div class='us-align--center'>\n <p>content</p>\n </div>"}},{"name":".us-align--right","escaped":"us-align--right","description":"Align content of the element to the right.","markup":{"example":" <div class='us-align--right'>\n <p>content</p>\n </div>"}},{"name":".us-block","escaped":"us-block","description":"Display element as a block.","markup":{"example":" <div class='us-block'>\n <p>content</p>\n </div>"}},{"name":".us-color--cyan","escaped":"us-color--cyan","description":"Change content color to blue, navy, typecyan, cyan, red, green.","markup":{"example":" <div class='us-color--cyan'>\n <p>content</p>\n </div>"}},{"name":".us-list--reset","escaped":"us-list--reset","description":"Reset list style.","markup":{"example":" <div class='us-list--reset'>\n <p>content</p>\n </div>"}}],"markup":{"example":" <div class='{$modifiers}'>\n <p>content</p>\n </div>","escaped":" <div>\n <p>content</p>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/utilities/_general.scss","file":"_general.scss","link":"general"},{"page":"Pattern Library/Utilities","name":"Images","description":"<p> Helpful image classes for making images full width or floating within content.</p>\n","state":[{"name":".us-img--full","escaped":"us-img--full","description":"Full width image.","markup":{"example":" <p>\n <img class=\"us-img--full\" src=\"https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>"}},{"name":".us-img--left","escaped":"us-img--left","description":"Left floated image.","markup":{"example":" <p>\n <img class=\"us-img--left\" src=\"https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>"}},{"name":".us-img--right","escaped":"us-img--right","description":"Right floated image.","markup":{"example":" <p>\n <img class=\"us-img--right\" src=\"https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>"}}],"markup":{"example":" <p>\n <img class=\"{$modifiers}\" src=\"https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>","escaped":" <p>\n <img src=\"https://assets0.uswitch.com/s3/uswitch-wp-cms-assets/money/guides/wp-content/uploads/2014/11/DB2011AU01018_SMALL.jpg\" width=\"400\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas mattis sit amet magna porta mollis. Pellentesque id pretium quam. Proin nec blandit ligula. Sed lectus orci, mattis ac hendrerit at, ultrices eget metus. Vestibulum dignissim venenatis malesuada. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Praesent eget convallis urna, at ultrices ligula. Donec bibendum, lectus at consequat feugiat, nisi leo tincidunt purus, et condimentum lorem diam scelerisque neque. Nam imperdiet aliquet arcu a rhoncus.\n </p>"},"path":"vendor/assets/stylesheets/ustyle/utilities/_images.scss","file":"_images.scss","link":"images"},{"page":"Pattern Library/Utilities","name":"Responsive","description":"<p> Responsive classes to allow display of elements across devices. You have the option of displaying them as <code>block</code>, <code>inline-block</code> or <code>inline</code> elements.</p>\n<p> You can also hide elements by <code>.us-{DEVICE}--hidden</code> and will hide those elements above that breakpoint.</p>\n","markup":{"example":" <div class='us-lg-desktop--block'><strong>.us-lg-desktop--block</strong> Shows on large desktop and up</div>\n <div class='us-desktop--block'><strong>.us-desktop--block</strong> Shows on desktop and up</div>\n <div class='us-tablet--block'><strong>.us-tablet--block</strong> Shows on tablet and up</div>\n <div class='us-sm-tablet--block'><strong>.us-sm-tablet--block</strong> Shows on small tablet and up</div>\n <div class='us-mobile--block'><strong>.us-mobile--block</strong> Shows on mobile only</div>\n <div class='us-tablet--hidden'><strong>.us-tablet--hidden</strong> Hidden on tablet and up</div>","escaped":" <div class='us-lg-desktop--block'><strong>.us-lg-desktop--block</strong> Shows on large desktop and up</div>\n <div class='us-desktop--block'><strong>.us-desktop--block</strong> Shows on desktop and up</div>\n <div class='us-tablet--block'><strong>.us-tablet--block</strong> Shows on tablet and up</div>\n <div class='us-sm-tablet--block'><strong>.us-sm-tablet--block</strong> Shows on small tablet and up</div>\n <div class='us-mobile--block'><strong>.us-mobile--block</strong> Shows on mobile only</div>\n <div class='us-tablet--hidden'><strong>.us-tablet--hidden</strong> Hidden on tablet and up</div>"},"path":"vendor/assets/stylesheets/ustyle/utilities/_responsive.scss","file":"_responsive.scss","link":"responsive"},{"page":"Pattern Library/Utilities","name":"Spacing","description":"<p> Allow control of spacing around an element. You can set margin or padding for an element without creating an extra class.</p>\n<p> An example of this <code>.us-margin-top</code>, <code>.us-margin-top--small</code>, <code>.us-margin-top--large</code> where <code>margin</code> can be replaced by <code>padding</code> and <code>top</code> can be replaced by <code>bottom</code>, <code>left</code> or <code>right</code>.</p>\n<p> Default space for margin and padding is 1em, <code>small</code> modifier uses .5em and <code>large</code> modifier uses 1.5em.</p>\n","state":[{"name":".us-margin-top","escaped":"us-margin-top","description":"Use default top margin (1em).","markup":{"example":"<div class='class-goes-here us-margin-top'>Sample content</div>"}},{"name":".us-margin-top--small","escaped":"us-margin-top--small","description":"Use small top margin (.5em).","markup":{"example":"<div class='class-goes-here us-margin-top--small'>Sample content</div>"}},{"name":".us-margin-top--large","escaped":"us-margin-top--large","description":"Use large top margin (1.5em).","markup":{"example":"<div class='class-goes-here us-margin-top--large'>Sample content</div>"}},{"name":".us-margin-bottom","escaped":"us-margin-bottom","description":"Use default bottom margin (1em).","markup":{"example":"<div class='class-goes-here us-margin-bottom'>Sample content</div>"}},{"name":".us-margin-bottom--small","escaped":"us-margin-bottom--small","description":"Use small bottom margin (.5em).","markup":{"example":"<div class='class-goes-here us-margin-bottom--small'>Sample content</div>"}},{"name":".us-margin-bottom--large","escaped":"us-margin-bottom--large","description":"Use large bottom margin (1.5em).","markup":{"example":"<div class='class-goes-here us-margin-bottom--large'>Sample content</div>"}},{"name":".us-margin-left","escaped":"us-margin-left","description":"Use default left margin (1em).","markup":{"example":"<div class='class-goes-here us-margin-left'>Sample content</div>"}},{"name":".us-margin-left--small","escaped":"us-margin-left--small","description":"Use small left margin (.5em).","markup":{"example":"<div class='class-goes-here us-margin-left--small'>Sample content</div>"}},{"name":".us-margin-left--large","escaped":"us-margin-left--large","description":"Use large left margin (1.5em).","markup":{"example":"<div class='class-goes-here us-margin-left--large'>Sample content</div>"}},{"name":".us-margin-right","escaped":"us-margin-right","description":"Use default right margin (1em).","markup":{"example":"<div class='class-goes-here us-margin-right'>Sample content</div>"}},{"name":".us-margin-right--small","escaped":"us-margin-right--small","description":"Use small right margin (.5em).","markup":{"example":"<div class='class-goes-here us-margin-right--small'>Sample content</div>"}},{"name":".us-margin-right--large","escaped":"us-margin-right--large","description":"Use large right margin (1.5em).","markup":{"example":"<div class='class-goes-here us-margin-right--large'>Sample content</div>"}},{"name":".us-padding-top","escaped":"us-padding-top","description":"Use default top padding (1em).","markup":{"example":"<div class='class-goes-here us-padding-top'>Sample content</div>"}},{"name":".us-padding-top--small","escaped":"us-padding-top--small","description":"Use small top padding (.5em).","markup":{"example":"<div class='class-goes-here us-padding-top--small'>Sample content</div>"}},{"name":".us-padding-top--large","escaped":"us-padding-top--large","description":"Use large top padding (1.5em).","markup":{"example":"<div class='class-goes-here us-padding-top--large'>Sample content</div>"}},{"name":".us-padding-bottom","escaped":"us-padding-bottom","description":"Use default bottom padding (1em).","markup":{"example":"<div class='class-goes-here us-padding-bottom'>Sample content</div>"}},{"name":".us-padding-bottom--small","escaped":"us-padding-bottom--small","description":"Use small bottom padding (.5em).","markup":{"example":"<div class='class-goes-here us-padding-bottom--small'>Sample content</div>"}},{"name":".us-padding-bottom--large","escaped":"us-padding-bottom--large","description":"Use large bottom padding (1.5em).","markup":{"example":"<div class='class-goes-here us-padding-bottom--large'>Sample content</div>"}},{"name":".us-padding-left","escaped":"us-padding-left","description":"Use default left padding (1em).","markup":{"example":"<div class='class-goes-here us-padding-left'>Sample content</div>"}},{"name":".us-padding-left--small","escaped":"us-padding-left--small","description":"Use small left padding (.5em).","markup":{"example":"<div class='class-goes-here us-padding-left--small'>Sample content</div>"}},{"name":".us-padding-left--large","escaped":"us-padding-left--large","description":"Use large left padding (1.5em).","markup":{"example":"<div class='class-goes-here us-padding-left--large'>Sample content</div>"}},{"name":".us-padding-right","escaped":"us-padding-right","description":"Use default right padding (1em).","markup":{"example":"<div class='class-goes-here us-padding-right'>Sample content</div>"}},{"name":".us-padding-right--small","escaped":"us-padding-right--small","description":"Use small right padding (.5em).","markup":{"example":"<div class='class-goes-here us-padding-right--small'>Sample content</div>"}},{"name":".us-padding-right--large","escaped":"us-padding-right--large","description":"Use large right padding (1.5em).","markup":{"example":"<div class='class-goes-here us-padding-right--large'>Sample content</div>"}},{"name":".us-reset--padding","escaped":"us-reset--padding","description":"Reset padding to 0.","markup":{"example":"<div class='class-goes-here us-reset--padding'>Sample content</div>"}},{"name":".us-reset--margin","escaped":"us-reset--margin","description":"Reset margin to 0.","markup":{"example":"<div class='class-goes-here us-reset--margin'>Sample content</div>"}},{"name":".us-reset","escaped":"us-reset","description":"Reset padding and margin to 0.","markup":{"example":"<div class='class-goes-here us-reset'>Sample content</div>"}}],"markup":{"example":"<div class='class-goes-here {$modifiers}'>Sample content</div>","escaped":"<div class='class-goes-here'>Sample content</div>"},"path":"vendor/assets/stylesheets/ustyle/utilities/_spacing.scss","file":"_spacing.scss","link":"spacing"}]},{"name":"Typography","page":"typography.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Typography","name":"Headings","description":"<p> The default heading styling across all uSwitch pages.</p>\n<p> We allow extending the sizes of these headings with <code>%heading-{$i}</code> so that we don't repeat similar font sizes across the site.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>Headings are for structure, not presentation</p>\n</li>\n<li><p>The first heading on the page should be an H1</p>\n</li>\n<li><p>Headings should be listed in consecutive order [H1, H2, H3], not [H1, H5, H2]</p>\n</li>\n</ul>\n","markup":{"example":" <h1>Heading 1</h1>\n <h2>Heading 2</h2>\n <h3>Heading 3</h3>\n <h4>Heading 4</h4>\n <h5>Heading 5</h5>\n <h6>Heading 6</h6>","escaped":" <h1>Heading 1</h1>\n <h2>Heading 2</h2>\n <h3>Heading 3</h3>\n <h4>Heading 4</h4>\n <h5>Heading 5</h5>\n <h6>Heading 6</h6>"},"path":"vendor/assets/stylesheets/ustyle/basics/_typography.scss","file":"_typography.scss","link":"headings"},{"page":"Pattern Library/Typography","name":"Paragraphs","description":"<p> Default paragraph styling with a margin bottom.</p>\n","state":[{"name":".us-standfirst","escaped":"us-standfirst","description":"Used for heros and introductory paragraphs.","markup":{"example":" <p class=\"us-standfirst\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus. Nunc consequat condimentum porttitor.\n Cras at mi sed quam hendrerit bibendum ac a lorem. Mauris a sapien vitae massa lacinia malesuada.\n </p>"}}],"markup":{"example":" <p class=\"{$modifiers}\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus. Nunc consequat condimentum porttitor.\n Cras at mi sed quam hendrerit bibendum ac a lorem. Mauris a sapien vitae massa lacinia malesuada.\n </p>","escaped":" <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus. Nunc consequat condimentum porttitor.\n Cras at mi sed quam hendrerit bibendum ac a lorem. Mauris a sapien vitae massa lacinia malesuada.\n </p>"},"path":"vendor/assets/stylesheets/ustyle/basics/_typography.scss","file":"_typography.scss","link":"paragraphs"},{"page":"Pattern Library/Typography","name":"Lists","description":"<p> Normal list styling.</p>\n","markup":{"example":" <ul>\n <li>List item 1</li>\n <li>List item 2</li>\n <li>List item 3</li>\n </ul>","escaped":" <ul>\n <li>List item 1</li>\n <li>List item 2</li>\n <li>List item 3</li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/basics/_typography.scss","file":"_typography.scss","link":"lists"},{"page":"Pattern Library/Typography","name":"Blockquote","description":"<p> Default blockquote.</p>\n","markup":{"example":" <blockquote>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus.\n </p>\n </blockquote>","escaped":" <blockquote>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n Aenean vel arcu non magna varius sagittis vel at elit.\n Vivamus et orci pretium, commodo eros vitae, tincidunt purus.\n </p>\n </blockquote>"},"path":"vendor/assets/stylesheets/ustyle/basics/_typography.scss","file":"_typography.scss","link":"blockquote"},{"page":"Pattern Library/Typography","name":"Numbered list","description":"<p> Our default numbered list styling.</p>\n","state":[{"name":".us-custom-list-alt","escaped":"us-custom-list-alt","description":"Allows us to use the lists on hero/blue backgrounds.","markup":{"example":" <ul class='us-numbered-list us-custom-list-alt'>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n </ul>"}}],"markup":{"example":" <ul class='us-numbered-list {$modifiers}'>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n </ul>","escaped":" <ul class='us-numbered-list'>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc sollicitudin iaculis bibendum.</li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/components/_lists-li.scss","file":"_lists-li.scss","link":"numbered_list"},{"page":"Pattern Library/Typography","name":"Ticked list","description":"<p> Our default ticked list styling.</p>\n","state":[{"name":".us-custom-list-alt","escaped":"us-custom-list-alt","description":"Allows us to use the lists on hero/blue backgrounds.","markup":{"example":" <ul class='us-ticked-list'>\n <li>\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon us-icon--small us-icon--before us-icon--typegrey\"><use xlink:href=\"/images/icons.svg#icon-tick\"/></svg>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n <li>\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon us-icon--small us-icon--before us-icon--typegrey\"><use xlink:href=\"/images/icons.svg#icon-tick\"/></svg>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n </ul>"}}],"markup":{"example":" <ul class='us-ticked-list'>\n <li>\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon us-icon--small us-icon--before us-icon--typegrey\"><use xlink:href=\"/images/icons.svg#icon-tick\"/></svg>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n <li>\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon us-icon--small us-icon--before us-icon--typegrey\"><use xlink:href=\"/images/icons.svg#icon-tick\"/></svg>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n </ul>","escaped":" <ul class='us-ticked-list'>\n <li>\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon us-icon--small us-icon--before us-icon--typegrey\"><use xlink:href=\"/images/icons.svg#icon-tick\"/></svg>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n <li>\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon us-icon--small us-icon--before us-icon--typegrey\"><use xlink:href=\"/images/icons.svg#icon-tick\"/></svg>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n </li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/components/_lists-li.scss","file":"_lists-li.scss","link":"ticked_list"}]},{"name":"uSwitch tone of voice","page":"tone.html","template":"styleguide/templates/simple.tpl","section":"language","content":"<p>Here at uSwitch, we offer everyone ‘Supportive Switching’.</p>\n<p>That means we’re not just passively comparing prices, we’re actively enabling and supporting the decision to switch.</p>\n<p>What we write, the way we speak to customers and every conversation we have must give people clear, timely and relevant information. And we should communicate that information in a simple but attractive way.</p>\n<p>With the right tone of voice, our words create a decisive moment: we take people from passively knowing they should switch to actively having the confidence to make the right switch</p>\n<p><span id=\"Three core principles\"></span></p>\n<h2 id=\"3-core-principles-of-the-uswitch-tone-of-voice\">3 core principles of the uSwitch tone of voice</h2>\n<p><strong>- Empathetic</strong><br><strong>- Expert</strong><br><strong>- Empowering</strong> </p>\n<p>To give people the support they need to switch, we need to be able to deliver the right kind of message at the right time. That means our voice needs to be able to flex from simply informative – for example when we’re describing features of a product – to inspirational, when people are at the decisive moment and need extra encouragement to switch. </p>\n<p>The trick is to strike the right balance. Our three core principles will help us do this, guiding our communications and making sure that we deliver each message in the most appropriate way. </p>\n<p>Everything we say should always carry some elements of our core principles in varying degrees. The following framework is designed to make sure we get the balance right. </p>\n<p><span id=\"Framework\"></span></p>\n<h2 id=\"tone-framework\">Tone framework</h2>\n<p>Our three principles work together, and we adjust the emphasis and balance depending on who we’re talking to, why and when. </p>\n<p>One voice principle doesn’t exclude another; it’s how we mix them that gives uSwitch a rounded and distinctive voice. </p>\n<p>And, as with people, we’re not one thing all the time, or everything at once — but we have a consistent basis that’s us. For uSwitch, that means we’re always Empathetic. We dial up and down the Expert and Empowering qualities of our voice as needed. </p>\n<p>The key thing is to think about the main reason(s) to communicate – and use the principles accordingly. </p>\n<p><img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/tone-framework.png\"></p>\n<p><span id=\"Empathetic\"></span></p>\n<h2 id=\"principle-1-empathetic\">Principle 1: Empathetic</h2>\n<p><strong>Being empathetic means being:</strong> </p>\n<ul>\n<li>Positive </li>\n<li>Encouraging </li>\n<li>Relevant </li>\n</ul>\n<p>Our experience gives us insight and understanding, so being Empathetic means our writing is practical, good humoured and down to earth. </p>\n<p>Being empathetic also means we don’t make assumptions about what people know and don’t know. \nWe shouldn’t assume confidence either. We show people that we understand what’s important to them and talk about topics and issues that are directly relevant to them. </p>\n<p>When we write or speak, our language is outgoing and conversational, positive but never over the top. </p>\n<p>We want people to know they can rely on us to find the switch that’s right for them - and support them through it. </p>\n<p><strong>How we show empathy in our writing</strong> </p>\n<ol>\n<li>Use active, direct and positive language. </li>\n<li>Companies don’t show empathy, people do. We should always sound like a person – if you wouldn’t say it like that, don’t write it like that. </li>\n<li>Whether verbal or written, we should build a dialogue with customers, using relevant questions and topics of interest to engage people. </li>\n<li>Focus on answers not problems (but don’t gloss over issues and concerns). </li>\n<li>Make it personal by using ‘you’ as much as ‘we’. </li>\n<li>Don’t use the passive voice unless it’s absolutely necessary to make your point. \nUsing slang that’s accepted and understood can help connect. But be careful; we don’t want to alienate audiences by using jargon or patronising language – nor by trying to ‘talk cool’ to younger audiences. </li>\n<li>Put yourself in your customer’s shoes (and be honest). Would that headline you’re writing entice you to click on it? Is that error text going to provide support or only create more questions? </li>\n</ol>\n<p><span id=\"Expert\"></span></p>\n<h2 id=\"principle-2-expert\">Principle 2: Expert</h2>\n<p><strong>Being expert means being:</strong> </p>\n<ul>\n<li>Trusted </li>\n<li>Clear </li>\n<li>Accessible </li>\n</ul>\n<p>It’s our responsibility to direct people to the information or product that’s relevant for them. So we make information quick and easy to find, and ensure the pros and cons for switching are obvious and understandable. </p>\n<p>We don’t blind with science and we don’t dumb down. We give information succinctly and simply — but never rush the conversation. </p>\n<p>At all times we are scrupulously balanced, accurate and honest, and this reassures people by clearly showing that we know what we’re talking about. </p>\n<p><strong>How we show expertise in our writing</strong> </p>\n<ol>\n<li>Be relevant and accurate with facts and figures, and get the punctuation and spelling right. Even small mistakes undermine what you’re saying. </li>\n<li>Write succinctly and use simple sentence structures. Our prime objective is always that our audience understands us. In that way, we make complex topics simple, concise and accessible. Remember: simple isn’t simplistic; it’s just the easiest way to ensure we’re understood. </li>\n<li>Too many facts at once can be counterproductive. Don’t overload people with unnecessary detail. Get to the point, avoiding verbal padding and meaningless phrases. </li>\n<li>Don’t close down conversations – always have alternative options. </li>\n<li>Avoid marketing speak and sales patter. </li>\n<li>Don’t hide important facts. Start with what’s most relevant and individually important to your customer or audience. </li>\n</ol>\n<p><span id=\"Empowering\"></span></p>\n<h2 id=\"principle-3-empowering\">Principle 3: Empowering</h2>\n<p><strong>Being empowering means being:</strong></p>\n<ul>\n<li>Inspiring </li>\n<li>Energetic </li>\n<li>Credible </li>\n</ul>\n<p>We write and speak to inform and change minds, giving people the straightforward facts and, in turn, the confidence they need to switch. </p>\n<p>Our explanations and opinions should challenge, involve, entertain, pleasantly surprise and convince – we’re good company. </p>\n<p>The facts and figures are important, and we know them inside and out. But we make them more compelling by putting them in context, helping people see what switching could mean for them — whether that’s finally feeling in control of their household bills or that much closer to their dream holiday savings goal. </p>\n<p>We know who we are and what we’re about. So we believe wholeheartedly in what we do, knowing that it benefits everyone. So we’re never afraid to show our enthusiasm and commitment in our writing. </p>\n<p><strong>How we empower with our writing:</strong> </p>\n<ol>\n<li>Wherever possible, lead with emotional benefits that customers will be able to identify with – particularly at headline level. Look for familiar or universal situations related to our subject matter. </li>\n<li>Use real-life examples and stories wherever possible – they’re more convincing than anything you could invent. </li>\n<li>Don’t overpromise or over-exaggerate; there’s no need. </li>\n<li>Refresh your vocabulary and thinking; don’t keeping saying the same things in the same way\nHave an opinion and be prepared to defend it. </li>\n<li>Don’t be afraid to (politely and tactfully) challenge or say no. The customer is not always right but our advice should be. </li>\n<li>Be direct and positive but not flippant. Never forget that switching is a big step for many\nBring a sense of humour where it’s appropriate – wit is a great connector. </li>\n<li>Focus on wants and needs, not just prices. </li>\n</ol>\n","subNav":[{"name":"Three core principles","link":"#Three core principles"},{"name":" Tone framework","link":"#Framework"},{"name":"Principle 1: Empathetic","link":"#Empathetic"},{"name":"Principle 2: Expert","link":"#Expert"},{"name":"Principle 3: Empowering","link":"#Empowering"}]},{"name":"Colours","page":"colours.html","template":"styleguide/templates/styleguide.tpl","section":"brand","blocks":[{"page":"Brand/Colours","name":"Primary palette","partial":"colour","description":"<p> Our colours (with a "u", we're a UK company) are divided into primary, secondary and tertiary palettes. The primary and secondary are core to all our design work and supported by the tertiary which we use in infographics, graphs and the like. CMYK equivalents are available for print work.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>Do not rely only on colour to provide information. A green circle means little, a green circle with "success" in the middle gives actual information.</p>\n</li>\n<li><p>Make sure your text is <a href=\"http://a11yproject.com/posts/what-is-color-contrast/\">sufficiently contrasted</a> against its background</p>\n</li>\n</ul>\n","variable":[{"name":"c-cyan","description":"Hero banners","value":"#99e2ff"},{"name":"c-navy","description":"Text with emphasis","value":"#1c1f4e"},{"name":"c-blue","description":"Logo","value":"#002396"},{"name":"c-typecyan","description":"Text links, icons","value":"#008fe9"},{"name":"c-typegrey","description":"Body text","value":"#2f353a"},{"name":"c-typegrey-2","description":"Text without emphasis","value":"#65717b"},{"name":"c-bggrey","description":"Backgrounds","value":"#f4f5f6"},{"name":"c-red","description":"Primary buttons","value":"#d64226"},{"name":"c-green","description":"Action buttons, USPs","value":"#2aaa5b"}],"path":"vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss","file":"_colors.scss","link":"primary_palette"},{"page":"Brand/Colours","name":"Secondary palette","partial":"colour","variable":[{"name":"c-inputgrey","description":"Dropdowns, icons","value":"#84909a"},{"name":"c-bordergrey","description":"Borders","value":"#b0b8bf"},{"name":"c-keylinegrey","description":"Keylines, separators","value":"#e9ebed"},{"name":"c-blue-light","description":"","value":"#0c72bf"},{"name":"c-typecyan-light","description":"","value":"#4cc0f4"},{"name":"c-cyan-light","description":"","value":"#e4f8ff"},{"name":"c-yellow","description":"USPs","value":"#ffd32f"},{"name":"c-orange","description":"USPs","value":"#f27930"},{"name":"c-purple","description":"USPs","value":"#9c55b8"}],"path":"vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss","file":"_colors.scss","link":"secondary_palette"},{"page":"Brand/Colours","name":"Tertiary palette","partial":"colour","variable":[{"name":"c-red-dark","description":"","value":"#b53820"},{"name":"c-green-dark","description":"","value":"#23904d"},{"name":"c-red-lightest","description":"","value":"#eeb3a8"},{"name":"c-green-lightest","description":"","value":"#adebc5"},{"name":"c-yellow-lightest","description":"","value":"#ffedab"},{"name":"c-orange-lightest","description":"","value":"#f9c9ac"},{"name":"c-purple-lightest","description":"","value":"#d7bbe2"}],"path":"vendor/assets/stylesheets/ustyle/basics/variables/_colors.scss","file":"_colors.scss","link":"tertiary_palette"}]},{"name":"Style","page":"grammar.html","template":"styleguide/templates/simple.tpl","section":"language","content":"<p>The smallest mistake can undermine the biggest (and most important) of messages. Those writing for uSwitch should ensure they follow these style rules that cover everything from headlines to hyphens, and numbers to names.</p>\n<p><span id=\"Abbreviations\"></span>\n<strong>Abbreviations</strong></p>\n<p>For names of companies or organisations, if an abbreviation is more familiar than the full form (e.g. BBC, IBM) use that. If not, write the name in full the first time you mention it, followed by the abbreviation in brackets. The next time you refer to it, use only the abbreviation.</p>\n<p><span id=\"Acronyms\"></span>\n<strong>Acronyms</strong></p>\n<p>Write out in first use, noting the acronym in brackets; then use just the acronym going forward. Familiar acronyms such as WiFi, HTML, HMRC and BT are exempt from this rule.</p>\n<blockquote>\n The TaxPayers’ Alliance (TPA) has warned that the campaigns being led by lobbies could lead to higher household bills. Matthew Sinclair, director of the TPA ... \n</blockquote>\n\n<p><span id=\"Ampersand\"></span>\n<strong>Ampersand</strong></p>\n<p>Do not use the “&” symbol unless it is part of a company or product name.</p>\n<p><span id=\"Apostrophes\"></span>\n<strong>Apostrophes</strong></p>\n<p>Avoid common misuse of apostrophes:</p>\n<ul>\n<li>Mixing up it’s (it is) and its (possessive)</li>\n<li>Using to denote plural: DVD’s (wrong) vs DVDs (correct)</li>\n<li>When writing Dos and Don’ts (not Do’s and Don’ts)</li>\n<li>When writing decades 1990s (not 1990’s); the ’80s (not the 80’s)</li>\n</ul>\n<p><span id=\"British English\"></span>\n<strong>British English</strong></p>\n<p>Use the British ‘s’ in words such as ‘realise’, and ‘specialise’, rather than the American ‘z’.</p>\n<p><span id=\"Bullet points\"></span>\n<strong>Bullet points</strong></p>\n<p>Bullet points are a good way to make web copy easier to scan for readers. Bullet points should always be round, and limit bullets to six or fewer. Make sure they are grammatically logical.</p>\n<p><span id=\"Capital letters\"></span>\n<strong>Capital letters</strong></p>\n<p>Never use all capital letters. Headlines follow usual sentence structure, with only the first word and proper nouns utilising capitals.</p>\n<p><span id=\"Company names and references\"></span>\n<strong>Company names and references</strong></p>\n<p>Follow punctuation and capitalisation of company names and products as they are branded.</p>\n<blockquote>\n E.ON, iPhone, iSaver\n</blockquote> \n\n<p>When referencing a company in a news or guide, remember to always keep them in the singular.</p>\n<blockquote>\n BT is launching a new ... (not BT are launching a new ...)\n</blockquote>\n\n<p><span id=\"Contractions\"></span>\n<strong>Contractions</strong></p>\n<p>Our tone of voice is friendly and familiar, so it’s fine to use contractions like ‘they’ll’, ‘it’ll’, ‘isn’t’.</p>\n<p><span id=\"Dashes and hyphens\"></span>\n<strong>Dashes and hyphens</strong></p>\n<p>If you use a dash within a sentence to create emphasis, then use a long em dash – rather than a hyphen (-).\nCompound adjectives before a noun generally use a hyphen (e.g. ‘the well-organised energy provider’). After a noun, they should be separated (e.g. ‘the energy provider was well organised’).</p>\n<p><span id=\"Dates\"></span>\n<strong>Dates</strong></p>\n<p>Always write out the date, using day, month, year format in news and guides: </p>\n<blockquote>\n 9 December 2013. When using dates in tables, this may be shortened for space reasons to 9/12/13\n</blockquote> \n\n<p>In forms when asking for a date we always use the DD/MM/YYYY format.</p>\n<p><span id=\"Exclamation marks\"></span>\n<strong>Exclamation marks</strong></p>\n<p>Use sparingly, never in headers or intro copy, best suited for marketing/promotional material or news/blogs. </p>\n<p><span id=\"Full stops\"></span>\n<strong>Full stops</strong></p>\n<p>Don’t use full stops at the end of headlines.</p>\n<p><span id=\"Government\"></span>\n<strong>Government</strong></p>\n<p>Do not capitalise unless starting a sentence. The abbreviated Gov’t can be used in headlines and desk heads/straplines. </p>\n<p><span id=\"Legals, disclaimers and caveats\"></span>\n<strong>Legals, disclaimers and caveats</strong></p>\n<p>Superscript numbering should be used when there is more than one caveat, however, when there is only one caveat in a communication, an asterisk (*) should be used.</p>\n<p><span id=\"Less vs. Fewer\"></span>\n<strong>Less vs. Fewer</strong></p>\n<p>Use “less” when the subject is something that cannot be counted</p>\n<blockquote>\nShe wants to have less clutter on her desk.\n</blockquote>\n\n<p>Use “fewer” when the subject is something that can be counted</p>\n<blockquote>\nHe sent fewer texts after getting a £100 phone bill.\n</blockquote>\n\n<p><span id=\"Numbers\"></span>\n<strong>Numbers</strong></p>\n<ul>\n<li>Numbers nine and below must be written out: one, two, three, etc. </li>\n<li>Numbers 10 and higher use numerals: 15, 67, 987, etc.</li>\n<li>Spell out any amount when it starts a sentence: Three hundred and twenty customers surveyed said they had been wrongly billed on more than 15 occasions. </li>\n<li>Use commas with figures 1,000 and above. </li>\n<li>With million and billion, write out in body copy; the abbreviation (£43bn) is acceptable in news headlines for space reasons.</li>\n<li>Always use numerals when using the “£” or “%” symbols</li>\n</ul>\n<p><span id=\"OK\"></span>\n<strong>OK</strong></p>\n<p>Not Ok or okay.</p>\n<p><span id=\"Percentages\"></span>\n<strong>Percentages</strong></p>\n<p>Always use the “%” symbol; only use “per cent” at the start of a sentence. Always use numerals when talking about percentages (54%), unless it starts a sentence. We never use abbreviation “pc” when talking about percentages.</p>\n<blockquote>\n Fifty-five per cent of the population own an iPhone.\n</blockquote>\n\n<blockquote>\n Of those surveyed, 55% said they had been denied a credit card. \n</blockquote>\n\n<p><span id=\"Plans vs tariffs\"></span>\n<strong>Plans vs tariffs</strong></p>\n<p>Plans is the preferred term, only switch to use of tariff when trying to avoid repetition within one email or guide.</p>\n<p><span id=\"Quotation marks\"></span>\n<strong>Quotation marks</strong></p>\n<p>Always use double quotation marks (“) when placing a direct quote in body copy.</p>\n<p>Use single quote marks (‘) in headlines, standfirsts/dek heads and when quoting within a quote:</p>\n<blockquote>\n Super-fast broadband uptake ‘reaches 20% in UK’\n</blockquote> \n\n<blockquote>\n “Super-fast broadband will be the engine for growth for the broadband future of Britain," he said. \n</blockquote> \n\n<p><span id=\"Titles and Names\"></span>\n<strong>Titles and Names</strong></p>\n<p>Professional titles are not capitalised unless it directly precedes a name:</p>\n<blockquote>\n Director of Consumer Policy Jane Smith said that the news was a shock.\n</blockquote>\n\n<blockquote>\n Jane Smith, director of consumer policy at the company, said the news came as a shock.\n</blockquote>\n\n<p>On first reference, use the person’s first and last name. On subsequent references, last name only is used. </p>\n<p>Mr/Mrs/Miss/Ms is never used.</p>\n<blockquote>\n Energy Secretary Ed Davey was on-hand to field questions about the news. Davey arrived late, citing a long-running meeting.\n</blockquote>\n\n<p><span id=\"Wi-Fi\"></span>\n<strong>Wi-Fi</strong></p>\n<p>Not wifi, WIFI, WiFi, etc. </p>\n","subNav":[{"name":"Abbreviations","link":"#Abbreviations"},{"name":" Acronyms","link":"#Acronyms"},{"name":"Ampersand","link":"#Ampersand"},{"name":"Apostrophes","link":"#Apostrophes"},{"name":"British English","link":"#British English"},{"name":"Bullet points","link":"#Bullet points"},{"name":"Capital letters","link":"#Capital letters"},{"name":"Company names and references","link":"#Company names and references"},{"name":"Contractions","link":"#Contractions"},{"name":"Dashes and hyphens","link":"#Dashes and hyphens"},{"name":"Dates","link":"#Dates"},{"name":"Full stops","link":"#Full stops"},{"name":"Government","link":"#Government"},{"name":"Legals, disclaimers and caveats","link":"#Legals, disclaimers and caveats"},{"name":"Less vs. Fewer","link":"#Less vs. Fewer"},{"name":"Numbers","link":"#Numbers"},{"name":"OK","link":"#OK"},{"name":"Percentages","link":"#Percentages"},{"name":"Plans vs tariffs","link":"#Plans vs tariffs"},{"name":"Quotation marks","link":"#Quotation marks"},{"name":"Titles and Names","link":"#Titles and Names"},{"name":"Wi-Fi","link":"#Wi-Fi"}]},{"name":"Usability testing","page":"validating-designs.html","template":"styleguide/templates/simple.tpl","section":"design","content":"<!-- Index -->\n\n\n\n<!-- Intro -->\n<p>Usability testing can be used to establish problems that need solving, validate a hypothesis or to test a solution. Depending on what's required, there are different types of testing availability.</p> \n\n<p>However, not every change needs to be tested. This page is deisgned to highlight when should and shouldn't use testing, and how we should do it when we do.</p>\n\n<!-- When don’t we need validation of our designs? -->\n<div class=\"us-content-group\">\n <a id=\"no-validation\"></a>\n <h2>When don’t we need validation of our designs?</h2>\n <p>Plenty of design changes don’t require upfront hypothesis validation. If the design change is due to any of the following it may not need validation from users:</p>\n <ul>\n <li><a href=\"#Site-consistency\">Site consistency</a></li>\n <li><a href=\"#Design-conventions\">Design conventions</a></li>\n <li><a href=\"#Usability-conventions\">Usability conventions</a></li>\n <li><a href=\"#External-requirements\">External requirements</a></li>\n </ul>\n\n <a id=\"Site-consistency\"></a>\n <h3>Site consistency</h3>\n <p>Colour, font, shading, button types, and anything in uStyle is a given. We want to achieve site consistency for brand reasons.</p>\n <p>Functionality, UI, hierarchy are not 'look and feel' consistency.</p>\n <h4>Example</h4>\n <p>Moving the first two Broadband designs ('Oldest stlye' and 'Old style') to be more ‘in line’ with the third design ('New style') is an on-going project of consistency.</p>\n <p>Changing the colours of the first design or moving to a consistent layout would not require testing.</p>\n <p>Similarly, changing the row-data presentation in the second example to be more consistent with the third example would not require testing.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <i>Oldest style</i><img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/site-consistency01.png\">\n <i>New style</i><img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/site-consistency03.png\">\n </div>\n <div class=\"us-col-md-6\">\n <i>Old style</i><img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/site-consistency02.png\">\n </div>\n </div>\n\n <a id=\"Design-conventions\"></a>\n <h3>Design conventions</h3>\n <p>There are certain web-design standards, and in our aim for a consistent user experience, maintaining web consistency is an important part of that.</p>\n <p>The following is a non-exhaustive list of design conventions:</p>\n <ul>\n <li>Logos top (left) and links to HP</li>\n <li>Navigation is top of the page</li>\n <li>Text links are blue (pre-click)</li>\n <li>Buttons link to stuff (affordance)</li>\n <li>Icons (search)</li>\n <li>Visual hierarchy</li>\n <li>Search (top right)</li>\n <li>Clickable form fields</li>\n </ul>\n <h4>Example</h4>\n <p>A basic UI convention is the distinction between active elements and inactive elements, with inactive elements being 'greyed out'.</p>\n <p>The below car insurance has an overlay that must be interacted with to continue with the page below, but only part of the page is greyed out.</p>\n <p>Five clickable elements on this page aren’t greyed out, despite not being clickable:</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/design-conventions.png\">\n </div>\n </div>\n\n <a id=\"Usability-conventions\"></a>\n <h3>Usability conventions</h3>\n <p>The <a href=\"https://www.nngroup.com/articles/ten-usability-heuristics/\">ten basic usability heurisitcs</a>, like basic design rules, give us a number of usability principles that must be sense-checked against. Designs that do not meet these requirements give us a clear problem to be solved without the requirement of validation. </p>\n\n <h4>Visibility of system status</h4> \n <p>Keep users informed about what is going on through appropriate feedback within reasonable time. In the example below the user cannot see what impact selecting a dropdown option has because the overlay covers the results table:</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-8\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/ux-conventions-visibility.png\">\n <p>\n <i>"Did updating those filters do anything?"</i>\n </p>\n </div>\n </div>\n \n <h4>Match between system and the real world</h4>\n <p>Speak the users' language with words, phrases and concepts familiar to the user, rather than system-oriented terms. Follow real-world conventions, making information appear in a natural and logical order.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-4\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/ux-conventions-real-world.png\">\n <p>\n <i>"Large as in size of people or house? Doesn’t it depend what they’re doing? What’s a Plusnet safeguard?"</i>\n </p>\n </div>\n </div>\n \n <h4>User control and freedom</h4>\n <p>If a user makes a mistake, let them undo, redo, go back, etc...</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-10\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/ux-conventions-freedom.png\">\n <p>\n <i>"I wanted more details...and now i've left the site....how do I get back?”</i>\n </p>\n </div>\n </div>\n \n <h4>Consistency and standards</h4>\n <p>Users should not have to wonder whether different words, situations, or actions mean the same thing.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-8\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/ux-conventions-consistency.png\">\n <p>\n <i>"Is a plan and a tariff the same thing?”</i>\n </p>\n </div>\n </div>\n \n <h4>Error prevention</h4>\n <p>Even better than good error messages is a careful design which prevents a problem from occurring in the first place.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-8\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/ux-conventions-error.png\">\n <p>\n <i>"No deals, why did you present it as an option?"</i>\n </p>\n </div>\n </div>\n \n <h4>Recognition rather than recall</h4>\n <p>Minimise the user's memory load by making objects, actions, and options visible. The user should not have to remember information from one part to another.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-4\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/ux-conventions-recognition.png\">\n <p>\n <i>"I’ve filtered these results, but by what?"</i>\n </p>\n </div>\n </div>\n \n <h4>Flexibility and efficiency of use</h4>\n <p>llow users to tailor frequent actions. 1-button checkout via Amazon, or Add to my wishlist via Airbnb.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-8\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/ux-conventions-flexibility.png\">\n <p>\n <i>"I personalised all these details yesterday, why has it just reverted?"</i>\n </p>\n </div>\n </div>\n \n <h4>Aesthetic and minimalist design</h4>\n <p>Every extra unit of information in a dialogue competes with the relevant units of information and diminishes their relative visibility.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/ux-conventions-minimalist.png\">\n <p>\n <i>"What am I supposed to do on this page?"</i>\n </p>\n </div>\n </div>\n \n <h4>Help users recognise, diagnose, and recover from errors</h4>\n <p>Error messages should be expressed in plain language, precisely indicate the problem, and constructively suggest a solution.</p>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/ux-conventions-errors.png\">\n <p>\n <i>"Ahhhh....the ol' requested format..."</i>\n </p>\n </div>\n </div>\n \n <h4>Help and documentation</h4>\n <p>Any such help information should be easy to find, focused on the user's task, list concrete steps to be carried out, and not be too wordy.</p>\n\n <a id=\"External-requirements\"></a>\n <h3>External requirements</h3>\n <p>Sometimes design is dictated - commercial or regulatory or business.</p>\n <p>If there is flexibility around how these are implemented we can enter the design process. Sometimes there isn’t though, and they have to be implemented.</p>\n <h4>Example</h4>\n <div class=\"us-grid-row\">\n <div class=\"us-col-md-6\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/external-requirements.png\">\n <p>\n <i>"The brand red clashes with this provider's red."</i>\n </p>\n </div>\n </div> \n</div>\n\n\n<!-- When do we need validation of our designs? -->\n\n<div class=\"us-content-group\">\n <a id=\"validation\"></a>\n <h2>When do we need validation?</h2>\n <p>If our change isn’t down to one of the above then it’s problem solving, so we need to structure our approach to design differently - we need to <strong>understand the problem</strong> first.</p>\n \n <h3>Symptoms not problems</h3>\n <p>A problem statement is the design brief, but first we need a good problem.</p>\n <p>Data tells us about results, not causes. It tells us that it looks like there is a problem, but now what the problem is. Data comes from:</p>\n <ul>\n <li>GA</li>\n <li>Fullstory</li>\n <li>Crazyegg</li>\n </ul>\n <p>Similarly business objectives are things we desire to happen. They tell us what we want to the outcome to be. Objectives sound like:</p>\n <ul>\n <li>Increase conversion by…</li>\n <li>Reduce drop out by…</li>\n <li>Stop people bouncing on…</li>\n <li>Stop people clicking out on…</li>\n <li>Get people to click on…</li>\n </ul>\n <p>These tell us there is a problem, but we don’t know what it is.</p>\n <p>A real problems is something we’ve observed a significant number of occasions.</p>\n\n <h3>How to define the problem</h3>\n <p>Testing designed to steer design, or validate assumptions about what problems users are encountering, is known as ‘formative’ testing. It’s open-ended, and the tasks are simply to run a comparison, or to go through a journey start to finish.</p>\n <p>Any type of testing, whether it be face-to-face, guerilla, remote, or interviews, can help define the problem. This allows us to frame the problem with a problem statement. A problem statement is:</p>\n <blockquote>A concise description of the issues that need to be addressed - it is specific, measurable and explains what it impacts. There are no assumptions or solutions.</blockquote>\n\n <h3>Only with a problem can you design a solution</h3>\n <p>Once the problem is clearly defined, start trying to solve it (one problem at a time), but remember to validate the solutions as soon as possible.</p>\n <p>'Summative' usability testing can help validate. Summative testing gives the user a particular task to complete that tests the solution against the problem. Again, any type of testing can perform this function.</p>\n\n <h3>But wait!</h3>\n <p>User testing is great to validate flows, designs and interactions, but it's not exhaustive. There might be bugs, or solutions that don't work in certain scenarios. This is where in-house testing and the device lab comes in.</p>\n</div>\n\n\n\n<!-- Testing -->\n\n<a id=\"testing\"></a>\n<div class=\"us-content-group\">\n <h2>How to test</h2>\n <p>So what type of testing should we use, and when?</p>\n <a href=\"https://www.nngroup.com/articles/which-ux-research-methods/\">This article by Nielsen Norman Group</a> is a great starting point to understand testing methods and when to apply each.<p></p> \n <p>There are over 20 types of validation, including quant methods, but here at uSwitch we predominantly use the following:</p>\n <ul>\n <li><a href=\"#interviews\">Interviews</a></li>\n <li><a href=\"#face-to-face\">Face-to-face usability testing</a></li>\n <li><a href=\"#guerilla-testing\">Guerilla testing</a></li>\n <li><a href=\"#in-house-testing\">In-house testing</a></li>\n </ul>\n \n <a id=\"interviews\"></a>\n <h3>Interviews</h3>\n <p>Interviews are designed to understand behaviours, needs and pain-points around a particular task.</p> \n <p>They are open-ended and can help define design personas - archetypes that can be used as a reference point for any design changes for that product.</p> \n <h4>How</h4>\n <p>See the interview checklist</p>\n <h4>When</h4>\n <p>Interviews are most commonly used at the earliest stage of product development to determine the needs/problems that the product will address.</p> \n\n <a id=\"face-to-face\"></a>\n <h3>Face-to-face usability testing</h3>\n <p>Face-to-face testing can be used in a formative or summative sense, and can be combined with an interview and simple exercises, like card sorting.</p>\n <p>This is the highest-fidelity form of validation. The feedback you receive will be of the highest quality, but it will also take you the most time.</p> \n \n <h4>How</h4>\n <p>Face-to-face testing consists of preparing a particular task, putting it in front of real users, and seeing how they get on.</p> \n <p>As it’s face-to-face, you can also interview users in this format, or ask them to complete exercises such as:</p>\n <ul>\n <li>Product Reaction Cards - Used to determine how desirable a product or process is</li>\n <li>Unmarked Semantic Differential Scales - Used to understand reactions to particular words and phrases</li>\n <li>Card sorting - Used to understand hierarchy of importance, or expected flows</li>\n </ul>\n <p>See the testing checklist for a step-by-step guide to setting up and running a test. The most crucial components are:</p>\n <ul>\n <li>Goals - What are you trying to achieve?</li>\n <li>Tasks - Every task you ask a user to complete should answer a question you need answered. Formative testing on an exisiting product will have open-ended goals, whereas tasks designed to test a solution should be specific.</li>\n <li>Test plan - Script, scenario, tasks, participants, questions, anything the moderators needs. Write it all down so you have it to hand during the test.</li> \n <li>Test the test - Something will go wrong, promise, so test it first.</li>\n <li>Get your team involved - There's nothing like seeing your solution fail first hand.</li>\n </ul>\n <h4>When</h4>\n <p>Anytime. For an existing product where the objective is to discover problems, an open-ended test asking users to complete the most common journey. This should be done at least once a year.</p>\n <p>For a new product or feature face-to-face testing is always a good idea. The objective here is to <strong>test the solution against the problem</strong> using particular tasks.</p> \n\n <a id=\"guerilla-testing\"></a>\n <h3>Guerilla testing</h3> \n <p>A lower-fidelity version of face-to-face testing, guerilla testing sacrifices quality for speed. The feedback you receive will be of lower quality as the participants may not fit user types, and the testing environment is more ‘ad-hoc’ (think coffee shops, sandwich places).</p>\n <p>Just like face-to-face testing, guerilla testing involves preparing a particular task, putting it in front of real users, and seeing how they get on. You can also do interviews and get quant feedback but again, the feedback will be lower quality.</p> \n <h4>How</h4>\n <p>See the guerilla testing checklist for a step-by-step guide to setting up and running a test.</p>\n <p>The number of participants should be at least 5 for guerilla testing, but you can use your discretion.</p> \n <h4>When</h4>\n <p>Guerilla testing is perfect at the early stage of a design, when you want to sense check a particular flow, component, or wording.</p> \n <p>Any fidelity of design can be used. Guerilla testing works best when kept relatively informal, and the participant feels at ease.</p>\n \n <a id=\"in-house-testing\"></a>\n <h3>In-house testing</h3>\n <p>Asking your colleagues in the office for feedback. This is the quickest but lowest quality form of validation.</p> \n <p>Like guerilla testing this is an informal type of testing, but the quality is considerably lower owing to familiarity with the product, bias based on personal relationships and a mismatch between persona types and testers.</p> \n <p>In-house testing is perfect for bug testing, seeing if anyone can ‘break’ your design, and last-minute tweaks. It is not for designed to surface flow or interaction changes.</p> \n <h4>How</h4>\n <p>See the bug-testing checklist</p>\n <h4>When</h4>\n <p>A few days before release</p> \n \n</div>","subNav":[{"name":"When don't we need user validation?","link":"#no-validation"},{"name":"When do we need user validation?","link":"#validation"},{"name":"How to test","link":"#testing"}]},{"name":"Icons","page":"icons.html","template":"styleguide/templates/styleguide.tpl","section":"design","blocks":[{"page":"Design/Icons","name":"Icons","partial":"icons","description":"<p> Our icons are displayed via <code>xlink:href</code> in the <code><use></code> tags. This allows us to directly embed SVGs in a flexible manner and be able to apply transformations and any sort of colours onto them.</p>\n<p> We use an SVG sprite called <code>icons.svg</code> that is versioned just like ustyle. As per the examples, the icons are referenced via the ID, like this: <code>icons.svg#icon-bookmark</code></p>\n<p> <strong>Accessibility</strong>: In most cases, icons are purely presentational elements. In this scenario, you want to add: <code>aria-hidden="true"</code> and <code>role="presentation"</code> to your code.</p>\n<h4 id=\"usage\">Usage</h4>\n<ul>\n<li><p>Suffixing with <code>--{size}</code> where size is one of <em>small</em>, <em>medium</em> or <em>large</em> will change the size of the icon from 16px, 32px and 64px respectively.</p>\n</li>\n<li><p><code>.us-icon--{size}--sm-tablet</code> and <code>.us-icon--{size}--mobile</code> will override icon sizes for those screen size</p>\n</li>\n<li><p><code>.us-icon--notext</code> allows you to set any element with no content to an icon</p>\n</li>\n<li><p>blue, typegrey, inputgrey, typecyan and custom are colors that can be set on the icon with <code>.us-icon--{color}</code></p>\n</li>\n<li><p>Colors can be changed by adding your own <code>fill:</code> style to the SVG.</p>\n</li>\n<li><p><a href=\"https://github.com/jonathantneal/svg4everybody\">svg4everybody.js</a> is needed for Internet Explorer browsers</p>\n</li>\n</ul>\n","state":[{"name":"alarm","escaped":"alarm","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--alarm\">\n <use xlink:href=\"/images/icons.svg#icon-alarm\"></use>\n </svg>"}},{"name":"android","escaped":"android","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--android\">\n <use xlink:href=\"/images/icons.svg#icon-android\"></use>\n </svg>"}},{"name":"arrow-circle","escaped":"arrow-circle","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--arrow-circle\">\n <use xlink:href=\"/images/icons.svg#icon-arrow-circle\"></use>\n </svg>"}},{"name":"arrow-up","escaped":"arrow-up","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--arrow-up\">\n <use xlink:href=\"/images/icons.svg#icon-arrow-up\"></use>\n </svg>"}},{"name":"arrow-down","escaped":"arrow-down","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--arrow-down\">\n <use xlink:href=\"/images/icons.svg#icon-arrow-down\"></use>\n </svg>"}},{"name":"book","escaped":"book","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--book\">\n <use xlink:href=\"/images/icons.svg#icon-book\"></use>\n </svg>"}},{"name":"bookmark","escaped":"bookmark","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--bookmark\">\n <use xlink:href=\"/images/icons.svg#icon-bookmark\"></use>\n </svg>"}},{"name":"breadcrumb","escaped":"breadcrumb","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--breadcrumb\">\n <use xlink:href=\"/images/icons.svg#icon-breadcrumb\"></use>\n </svg>"}},{"name":"calculator","escaped":"calculator","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--calculator\">\n <use xlink:href=\"/images/icons.svg#icon-calculator\"></use>\n </svg>"}},{"name":"calendar","escaped":"calendar","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--calendar\">\n <use xlink:href=\"/images/icons.svg#icon-calendar\"></use>\n </svg>"}},{"name":"car","escaped":"car","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--car\">\n <use xlink:href=\"/images/icons.svg#icon-car\"></use>\n </svg>"}},{"name":"checkbox-tick","escaped":"checkbox-tick","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--checkbox-tick\">\n <use xlink:href=\"/images/icons.svg#icon-checkbox-tick\"></use>\n </svg>"}},{"name":"chevron-right","escaped":"chevron-right","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--chevron-right\">\n <use xlink:href=\"/images/icons.svg#icon-chevron-right\"></use>\n </svg>"}},{"name":"clock","escaped":"clock","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--clock\">\n <use xlink:href=\"/images/icons.svg#icon-clock\"></use>\n </svg>"}},{"name":"close","escaped":"close","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--close\">\n <use xlink:href=\"/images/icons.svg#icon-close\"></use>\n </svg>"}},{"name":"cog","escaped":"cog","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--cog\">\n <use xlink:href=\"/images/icons.svg#icon-cog\"></use>\n </svg>"}},{"name":"credit-card","escaped":"credit-card","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--credit-card\">\n <use xlink:href=\"/images/icons.svg#icon-credit-card\"></use>\n </svg>"}},{"name":"cross","escaped":"cross","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--cross\">\n <use xlink:href=\"/images/icons.svg#icon-cross\"></use>\n </svg>"}},{"name":"dual-fuel","escaped":"dual-fuel","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--dual-fuel\">\n <use xlink:href=\"/images/icons.svg#icon-dual-fuel\"></use>\n </svg>"}},{"name":"electric-light","escaped":"electric-light","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--electric-light\">\n <use xlink:href=\"/images/icons.svg#icon-electric-light\"></use>\n </svg>"}},{"name":"envelope","escaped":"envelope","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--envelope\">\n <use xlink:href=\"/images/icons.svg#icon-envelope\"></use>\n </svg>"}},{"name":"exit-noexit","escaped":"exit-noexit","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--exit-noexit\">\n <use xlink:href=\"/images/icons.svg#icon-exit-noexit\"></use>\n </svg>"}},{"name":"facebook","escaped":"facebook","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--facebook\">\n <use xlink:href=\"/images/icons.svg#icon-facebook\"></use>\n </svg>"}},{"name":"facebook-brand","escaped":"facebook-brand","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--facebook-brand\">\n <use xlink:href=\"/images/icons.svg#icon-facebook-brand\"></use>\n </svg>"}},{"name":"filter","escaped":"filter","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--filter\">\n <use xlink:href=\"/images/icons.svg#icon-filter\"></use>\n </svg>"}},{"name":"fixed-variable","escaped":"fixed-variable","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--fixed-variable\">\n <use xlink:href=\"/images/icons.svg#icon-fixed-variable\"></use>\n </svg>"}},{"name":"gas","escaped":"gas","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--gas\">\n <use xlink:href=\"/images/icons.svg#icon-gas\"></use>\n </svg>"}},{"name":"gauge","escaped":"gauge","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--gauge\">\n <use xlink:href=\"/images/icons.svg#icon-gauge\"></use>\n </svg>"}},{"name":"github","escaped":"github","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--github\">\n <use xlink:href=\"/images/icons.svg#icon-github\"></use>\n </svg>"}},{"name":"google","escaped":"google","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--google\">\n <use xlink:href=\"/images/icons.svg#icon-google\"></use>\n </svg>"}},{"name":"google-brand","escaped":"google-brand","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--google-brand\">\n <use xlink:href=\"/images/icons.svg#icon-google-brand\"></use>\n </svg>"}},{"name":"graph-up","escaped":"graph-up","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--graph-up\">\n <use xlink:href=\"/images/icons.svg#icon-graph-up\"></use>\n </svg>"}},{"name":"home","escaped":"home","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--home\">\n <use xlink:href=\"/images/icons.svg#icon-home\"></use>\n </svg>"}},{"name":"hot","escaped":"hot","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--hot\">\n <use xlink:href=\"/images/icons.svg#icon-hot\"></use>\n </svg>"}},{"name":"info","escaped":"info","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--info\">\n <use xlink:href=\"/images/icons.svg#icon-info\"></use>\n </svg>"}},{"name":"kettle","escaped":"kettle","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--kettle\">\n <use xlink:href=\"/images/icons.svg#icon-kettle\"></use>\n </svg>"}},{"name":"key","escaped":"key","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--key\">\n <use xlink:href=\"/images/icons.svg#icon-key\"></use>\n </svg>"}},{"name":"lock","escaped":"lock","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--lock\">\n <use xlink:href=\"/images/icons.svg#icon-lock\"></use>\n </svg>"}},{"name":"magnify-in","escaped":"magnify-in","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--magnify-in\">\n <use xlink:href=\"/images/icons.svg#icon-magnify-in\"></use>\n </svg>"}},{"name":"magnify","escaped":"magnify","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--magnify\">\n <use xlink:href=\"/images/icons.svg#icon-magnify\"></use>\n </svg>"}},{"name":"menu","escaped":"menu","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--menu\">\n <use xlink:href=\"/images/icons.svg#icon-menu\"></use>\n </svg>"}},{"name":"message","escaped":"message","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--message\">\n <use xlink:href=\"/images/icons.svg#icon-message\"></use>\n </svg>"}},{"name":"mobile","escaped":"mobile","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--mobile\">\n <use xlink:href=\"/images/icons.svg#icon-mobile\"></use>\n </svg>"}},{"name":"monthly-dd","escaped":"monthly-dd","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--monthly-dd\">\n <use xlink:href=\"/images/icons.svg#icon-monthly-dd\"></use>\n </svg>"}},{"name":"network","escaped":"network","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--network\">\n <use xlink:href=\"/images/icons.svg#icon-network\"></use>\n </svg>"}},{"name":"no-exit","escaped":"no-exit","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--no-exit\">\n <use xlink:href=\"/images/icons.svg#icon-no-exit\"></use>\n </svg>"}},{"name":"pdf","escaped":"pdf","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--pdf\">\n <use xlink:href=\"/images/icons.svg#icon-pdf\"></use>\n </svg>"}},{"name":"pencil","escaped":"pencil","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--pencil\">\n <use xlink:href=\"/images/icons.svg#icon-pencil\"></use>\n </svg>"}},{"name":"person-add","escaped":"person-add","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--person-add\">\n <use xlink:href=\"/images/icons.svg#icon-person-add\"></use>\n </svg>"}},{"name":"person","escaped":"person","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--person\">\n <use xlink:href=\"/images/icons.svg#icon-person\"></use>\n </svg>"}},{"name":"phone","escaped":"phone","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--phone\">\n <use xlink:href=\"/images/icons.svg#icon-phone\"></use>\n </svg>"}},{"name":"piggy-bank","escaped":"piggy-bank","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--piggy-bank\">\n <use xlink:href=\"/images/icons.svg#icon-piggy-bank\"></use>\n </svg>"}},{"name":"pin","escaped":"pin","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--pin\">\n <use xlink:href=\"/images/icons.svg#icon-pin\"></use>\n </svg>"}},{"name":"pound-note","escaped":"pound-note","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--pound-note\">\n <use xlink:href=\"/images/icons.svg#icon-pound-note\"></use>\n </svg>"}},{"name":"present","escaped":"present","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--present\">\n <use xlink:href=\"/images/icons.svg#icon-present\"></use>\n </svg>"}},{"name":"print","escaped":"print","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--print\">\n <use xlink:href=\"/images/icons.svg#icon-print\"></use>\n </svg>"}},{"name":"quarterly-dd","escaped":"quarterly-dd","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--quarterly-dd\">\n <use xlink:href=\"/images/icons.svg#icon-quarterly-dd\"></use>\n </svg>"}},{"name":"question-circle","escaped":"question-circle","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--question-circle\">\n <use xlink:href=\"/images/icons.svg#icon-question-circle\"></use>\n </svg>"}},{"name":"quote","escaped":"quote","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--quote\">\n <use xlink:href=\"/images/icons.svg#icon-quote\"></use>\n </svg>"}},{"name":"recycle","escaped":"recycle","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--recycle\">\n <use xlink:href=\"/images/icons.svg#icon-recycle\"></use>\n </svg>"}},{"name":"remove","escaped":"remove","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--remove\">\n <use xlink:href=\"/images/icons.svg#icon-remove\"></use>\n </svg>"}},{"name":"renewable","escaped":"renewable","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--renewable\">\n <use xlink:href=\"/images/icons.svg#icon-renewable\"></use>\n </svg>"}},{"name":"results","escaped":"results","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--results\">\n <use xlink:href=\"/images/icons.svg#icon-results\"></use>\n </svg>"}},{"name":"save","escaped":"save","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--save\">\n <use xlink:href=\"/images/icons.svg#icon-save\"></use>\n </svg>"}},{"name":"share","escaped":"share","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--share\">\n <use xlink:href=\"/images/icons.svg#icon-share\"></use>\n </svg>"}},{"name":"shield","escaped":"shield","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--shield\">\n <use xlink:href=\"/images/icons.svg#icon-shield\"></use>\n </svg>"}},{"name":"sim","escaped":"sim","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--sim\">\n <use xlink:href=\"/images/icons.svg#icon-sim\"></use>\n </svg>"}},{"name":"smiley","escaped":"smiley","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--smiley\">\n <use xlink:href=\"/images/icons.svg#icon-smiley\"></use>\n </svg>"}},{"name":"sort","escaped":"sort","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--sort\">\n <use xlink:href=\"/images/icons.svg#icon-sort\"></use>\n </svg>"}},{"name":"speech-circle","escaped":"speech-circle","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--speech-circle\">\n <use xlink:href=\"/images/icons.svg#icon-speech-circle\"></use>\n </svg>"}},{"name":"speech","escaped":"speech","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--speech\">\n <use xlink:href=\"/images/icons.svg#icon-speech\"></use>\n </svg>"}},{"name":"spinner","escaped":"spinner","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--spinner\">\n <use xlink:href=\"/images/icons.svg#icon-spinner\"></use>\n </svg>"}},{"name":"star-half","escaped":"star-half","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--star-half\">\n <use xlink:href=\"/images/icons.svg#icon-star-half\"></use>\n </svg>"}},{"name":"star","escaped":"star","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--star\">\n <use xlink:href=\"/images/icons.svg#icon-star\"></use>\n </svg>"}},{"name":"starline-half","escaped":"starline-half","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--starline-half\">\n <use xlink:href=\"/images/icons.svg#icon-starline-half\"></use>\n </svg>"}},{"name":"starline","escaped":"starline","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--starline\">\n <use xlink:href=\"/images/icons.svg#icon-starline\"></use>\n </svg>"}},{"name":"talk","escaped":"talk","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--talk\">\n <use xlink:href=\"/images/icons.svg#icon-talk\"></use>\n </svg>"}},{"name":"tick-circle","escaped":"tick-circle","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--tick-circle\">\n <use xlink:href=\"/images/icons.svg#icon-tick-circle\"></use>\n </svg>"}},{"name":"tick","escaped":"tick","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--tick\">\n <use xlink:href=\"/images/icons.svg#icon-tick\"></use>\n </svg>"}},{"name":"tv","escaped":"tv","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--tv\">\n <use xlink:href=\"/images/icons.svg#icon-tv\"></use>\n </svg>"}},{"name":"twitter","escaped":"twitter","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--twitter\">\n <use xlink:href=\"/images/icons.svg#icon-twitter\"></use>\n </svg>"}},{"name":"twitter-brand","escaped":"twitter-brand","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--twitter-brand\">\n <use xlink:href=\"/images/icons.svg#icon-twitter-brand\"></use>\n </svg>"}},{"name":"uswitch","escaped":"uswitch","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--uswitch\">\n <use xlink:href=\"/images/icons.svg#icon-uswitch\"></use>\n </svg>"}},{"name":"variable","escaped":"variable","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--variable\">\n <use xlink:href=\"/images/icons.svg#icon-variable\"></use>\n </svg>"}},{"name":"warning-circle","escaped":"warning-circle","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--warning-circle\">\n <use xlink:href=\"/images/icons.svg#icon-warning-circle\"></use>\n </svg>"}},{"name":"wifi","escaped":"wifi","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--wifi\">\n <use xlink:href=\"/images/icons.svg#icon-wifi\"></use>\n </svg>"}},{"name":"wiki","escaped":"wiki","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--wiki\">\n <use xlink:href=\"/images/icons.svg#icon-wiki\"></use>\n </svg>"}},{"name":"xml","escaped":"xml","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--xml\">\n <use xlink:href=\"/images/icons.svg#icon-xml\"></use>\n </svg>"}},{"name":"play","escaped":"play","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--play\">\n <use xlink:href=\"/images/icons.svg#icon-play\"></use>\n </svg>"}},{"name":"pound-circle","escaped":"pound-circle","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--pound-circle\">\n <use xlink:href=\"/images/icons.svg#icon-pound-circle\"></use>\n </svg>"}},{"name":"dashcam","escaped":"dashcam","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--dashcam\">\n <use xlink:href=\"/images/icons.svg#icon-dashcam\"></use>\n </svg>"}},{"name":"warning","escaped":"warning","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--warning\">\n <use xlink:href=\"/images/icons.svg#icon-warning\"></use>\n </svg>"}},{"name":"chevron-left","escaped":"chevron-left","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--chevron-left\">\n <use xlink:href=\"/images/icons.svg#icon-chevron-left\"></use>\n </svg>"}},{"name":"controller","escaped":"controller","description":"","markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--controller\">\n <use xlink:href=\"/images/icons.svg#icon-controller\"></use>\n </svg>"}}],"markup":{"example":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--{$modifiers}\">\n <use xlink:href=\"/images/icons.svg#icon-{$modifiers}\"></use>\n </svg>","escaped":" <svg role=\"image\" class=\"us-icon--medium us-icon--custom us-icon--{$modifiers}\">\n <use xlink:href=\"/images/icons.svg#icon-{$modifiers}\"></use>\n </svg>"},"path":"vendor/assets/stylesheets/ustyle/icons/_base.scss","file":"_base.scss","link":"icons"}]},{"name":"Forms","page":"forms.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Forms","name":"Fields","description":"<p> This is the basic form field, <code>.us-field</code> wrapper for any single input or select. It sets a few layout options by default (margin) and styles any labels within. You can create a fake label style with <code>.us-faux-label</code></p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>All form inputs must have a corresponding label, linked to the input</p>\n</li>\n<li><p>The label should be visible; placeholders should not be relied on as not every browser can see them, nor can all screenreaders. A visible permanent label provides continuous context</p>\n</li>\n<li><p>For text inputs that are optional, add "(optional)" to the input label</p>\n</li>\n<li><p>Add <code>aria-required</code> to any input field that must to be filled in</p>\n</li>\n<li><p>See our best practices for <a href=\"../language/microcopy.html#Form text, form labels\">writing form labels</a></p>\n</li>\n</ul>\n","state":[{"name":".us-field--blocked","escaped":"us-field--blocked","description":"Blocked label styling.","markup":{"example":" <div class=\"us-field us-field--blocked\">\n <label for=\"name\">Name</label>\n <input class=\"us-form-input\" id=\"name\" name=\"name\" placeholder=\"Please enter your name\">\n </div>"}},{"name":".us-field--inline","escaped":"us-field--inline","description":"Inline label styling.","markup":{"example":" <div class=\"us-field us-field--inline\">\n <label for=\"name\">Name</label>\n <input class=\"us-form-input\" id=\"name\" name=\"name\" placeholder=\"Please enter your name\">\n </div>"}}],"markup":{"example":" <div class=\"us-field {$modifiers}\">\n <label for=\"name\">Name</label>\n <input class=\"us-form-input\" id=\"name\" name=\"name\" placeholder=\"Please enter your name\">\n </div>","escaped":" <div class=\"us-field\">\n <label for=\"name\">Name</label>\n <input class=\"us-form-input\" id=\"name\" name=\"name\" placeholder=\"Please enter your name\">\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_fields.scss","file":"_fields.scss","link":"fields"},{"page":"Pattern Library/Forms","name":"Input group","description":"<p> Input groups allow you to add "boxes" to the left or right of an input. These boxes usually contain a visual icon to represent the usage of the input.</p>\n","state":[{"name":".us-input-group--disabled","escaped":"us-input-group--disabled","description":"Disabled state for input groups.","markup":{"example":" <div class=\"us-input-group us-margin-bottom us-input-group--disabled\">\n <span class=\"us-input-group__box\"><svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon--small us-icon--inputgrey\"><use xlink:href=\"/images/icons.svg#icon-envelope\"></use></svg></span>\n <input class=\"us-form-input\" type=\"text\" id=\"email\" placeholder=\"Email\" />\n </div>\n <div class=\"us-input-group us-margin-bottom us-input-group--disabled\">\n <input class=\"us-form-input\" type=\"text\" id=\"kwh\" />\n <span class=\"us-input-group__box\">kWh</span>\n </div>"}},{"name":".us-input-group--blocked","escaped":"us-input-group--blocked","description":"Fluid style.","markup":{"example":" <div class=\"us-input-group us-margin-bottom us-input-group--blocked\">\n <span class=\"us-input-group__box\"><svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon--small us-icon--inputgrey\"><use xlink:href=\"/images/icons.svg#icon-envelope\"></use></svg></span>\n <input class=\"us-form-input\" type=\"text\" id=\"email\" placeholder=\"Email\" />\n </div>\n <div class=\"us-input-group us-margin-bottom us-input-group--blocked\">\n <input class=\"us-form-input\" type=\"text\" id=\"kwh\" />\n <span class=\"us-input-group__box\">kWh</span>\n </div>"}}],"markup":{"example":" <div class=\"us-input-group us-margin-bottom {$modifiers}\">\n <span class=\"us-input-group__box\"><svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon--small us-icon--inputgrey\"><use xlink:href=\"/images/icons.svg#icon-envelope\"></use></svg></span>\n <input class=\"us-form-input\" type=\"text\" id=\"email\" placeholder=\"Email\" />\n </div>\n <div class=\"us-input-group us-margin-bottom {$modifiers}\">\n <input class=\"us-form-input\" type=\"text\" id=\"kwh\" />\n <span class=\"us-input-group__box\">kWh</span>\n </div>","escaped":" <div class=\"us-input-group us-margin-bottom\">\n <span class=\"us-input-group__box\"><svg role=\"presentation\" aria-hidden=\"true\" class=\"us-icon--small us-icon--inputgrey\"><use xlink:href=\"/images/icons.svg#icon-envelope\"></use></svg></span>\n <input class=\"us-form-input\" type=\"text\" id=\"email\" placeholder=\"Email\" />\n </div>\n <div class=\"us-input-group us-margin-bottom\">\n <input class=\"us-form-input\" type=\"text\" id=\"kwh\" />\n <span class=\"us-input-group__box\">kWh</span>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_input-group.scss","file":"_input-group.scss","link":"input_group"},{"page":"Pattern Library/Forms","name":"Inputs","description":"<p> Our standard input styling across the website. This is specifically for text, email, password, search etc. type inputs.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>Specifying an appropriate <a href=\"https://developer.mozilla.org/en/docs/Web/HTML/Element/Input#attr-type\">type attribute</a> (e.g. type="tel" for telephone number fields) will not only control what input is displayed, but also helps mobile devices select a keyboard layout suitable for entering that type of data.</p>\n</li>\n<li><p>Where appropriate use the <a href=\"https://developer.mozilla.org/en/docs/Web/HTML/Element/Input#attr-autocomplete\">autocomplete attribute</a> to make it easier for the browser to fill in fields on the users behalf, saving them time on lengthy forms.</p>\n</li>\n</ul>\n","state":[{"name":".us-form-input--large","escaped":"us-form-input--large","description":"Larger input style.","markup":{"example":"<input class=\"us-form-input us-form-input--large\" type=\"text\" placeholder=\"Placeholder\">"}},{"name":".us-form-input--blocked","escaped":"us-form-input--blocked","description":"Fluid input style.","markup":{"example":"<input class=\"us-form-input us-form-input--blocked\" type=\"text\" placeholder=\"Placeholder\">"}},{"name":".us-form-input--error","escaped":"us-form-input--error","description":"Visual feedback for when the input has an error.","markup":{"example":"<input class=\"us-form-input us-form-input--error\" type=\"text\" placeholder=\"Placeholder\">"}},{"name":".us-form-input--success","escaped":"us-form-input--success","description":"Visual feedback for when success needs to be communicated to the user.","markup":{"example":"<input class=\"us-form-input us-form-input--success\" type=\"text\" placeholder=\"Placeholder\">"}},{"name":".us-form-input--disabled","escaped":"us-form-input--disabled","description":"Inactive state for form inputs that can't be interacted with.","markup":{"example":"<input class=\"us-form-input us-form-input--disabled\" type=\"text\" placeholder=\"Placeholder\">"}}],"markup":{"example":"<input class=\"us-form-input {$modifiers}\" type=\"text\" placeholder=\"Placeholder\">","escaped":"<input class=\"us-form-input\" type=\"text\" placeholder=\"Placeholder\">"},"path":"vendor/assets/stylesheets/ustyle/forms/_input.scss","file":"_input.scss","link":"inputs"},{"page":"Pattern Library/Forms","name":"Radios and checkboxes","description":"<p> Browsers that support screen density media features display our font icon tick or a box shadow circle. Other browsers fallback to default styling.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>Like select boxes, radio buttons are good for making a selection from a mutually exclusive list of options. The main difference between the two is that with radio buttons, the user must choose exactly one of the options.</p>\n</li>\n<li><p>Use radio buttons when each of the choices matters to the user. Each needs to be considered before they make their choice.</p>\n</li>\n<li><p>Checkboxes in a group should be used for choosing zero or more options from a list of independent options. Toggling one should not change the state of others in the group.</p>\n</li>\n<li><p>A stand-alone checkbox is good for toggling something on/off or opting in/out.</p>\n</li>\n<li><p>Provide a default selection to radio and checkbox groups if it's necessary and wont be changed by 90% of your users.</p>\n</li>\n<li><p>Try to keep the number of radio buttons and checkboxes in the same group to a maximum of 6.</p>\n</li>\n</ul>\n","state":[{"name":"us-form-input--disabled","escaped":"us-form-input--disabled","description":"Like other types of form inputs, adding this class to the element in conjunction with the disabled attribute helps to make the element look like it can't be interacted with.","markup":{"example":" <div class=\"us-field us-field--blocked\">\n <label>Do you have a different billing address?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input us-form-input--disabled\" name=\"null\" type=\"radio\">\n Yes\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"radio\">\n No\n </label>\n </div>\n </div>\n <div class=\"us-field us-field--blocked\">\n <label>How would you like to be contacted?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input us-form-input--disabled\" name=\"null\" type=\"checkbox\">\n Mobile\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"checkbox\">\n Email\n </label>\n </div>\n </div>"}}],"markup":{"example":" <div class=\"us-field us-field--blocked\">\n <label>Do you have a different billing address?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input {$modifiers}\" name=\"null\" type=\"radio\">\n Yes\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"radio\">\n No\n </label>\n </div>\n </div>\n <div class=\"us-field us-field--blocked\">\n <label>How would you like to be contacted?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input {$modifiers}\" name=\"null\" type=\"checkbox\">\n Mobile\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"checkbox\">\n Email\n </label>\n </div>\n </div>","escaped":" <div class=\"us-field us-field--blocked\">\n <label>Do you have a different billing address?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input\" name=\"null\" type=\"radio\">\n Yes\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"radio\">\n No\n </label>\n </div>\n </div>\n <div class=\"us-field us-field--blocked\">\n <label>How would you like to be contacted?</label>\n <div class=\"us-field-toggle\">\n <label>\n <input checked=\"checked\" class=\"us-form-input\" name=\"null\" type=\"checkbox\">\n Mobile\n </label>\n <label>\n <input class=\"us-form-input\" name=\"null\" type=\"checkbox\">\n Email\n </label>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_radio-checkbox.scss","file":"_radio-checkbox.scss","link":"radios_and_checkboxes"},{"page":"Pattern Library/Forms","name":"Selects","description":"<p> Select boxes allow users to choose an option or options from a list of options.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>Use select boxes when choosing one or more options from a list of related, but mutually exclusive options e.g. profession, title, month.</p>\n</li>\n<li><p>It can be tempting to put many things in a select box for users to choose from. Try to keep the list of options to between 4 and 15 so the user doesn't become overwhelmed with choices.</p>\n</li>\n</ul>\n","state":[{"name":".us-form-select--multiple","escaped":"us-form-select--multiple","description":"Removes the drop down arrow and adjusts the padding of <option> elements. Useful when using <select> elements that have the size=\"\" attribute set to anything higher than 1.","markup":{"example":" <select class=\"us-form-select us-form-select--multiple\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"}},{"name":".us-form-select--blocked","escaped":"us-form-select--blocked","description":"Fluid style.","markup":{"example":" <select class=\"us-form-select us-form-select--blocked\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"}},{"name":".us-form-select--error","escaped":"us-form-select--error","description":"Visual feedback for when the input has an error.","markup":{"example":" <select class=\"us-form-select us-form-select--error\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"}},{"name":".us-form-select--success","escaped":"us-form-select--success","description":"Visual feedback for when success needs to be communicated to the user.","markup":{"example":" <select class=\"us-form-select us-form-select--success\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"}},{"name":".us-form-select--disabled","escaped":"us-form-select--disabled","description":"Inactive state for select boxes. You may also just add the disabled attribute to the <select> element in order to achieve the same effect.","markup":{"example":" <select class=\"us-form-select us-form-select--disabled\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"}}],"markup":{"example":" <select class=\"us-form-select {$modifiers}\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>","escaped":" <select class=\"us-form-select\">\n <option>A select menu</option>\n <option>With lots of options</option>\n <option>And a few more</option>\n </select>"},"path":"vendor/assets/stylesheets/ustyle/forms/_select.scss","file":"_select.scss","link":"selects"},{"page":"Pattern Library/Forms","name":"Textarea","description":"<p> Our standard textarea styling across the website.</p>\n","state":[{"name":".us-form-textarea--blocked","escaped":"us-form-textarea--blocked","description":"Fluid textarea style.","markup":{"example":"<textarea class=\"us-form-textarea us-form-textarea--blocked\"></textarea>"}},{"name":".us-form-textarea--disabled","escaped":"us-form-textarea--disabled","description":"Inactive state for textareas that can't be interacted with.","markup":{"example":"<textarea class=\"us-form-textarea us-form-textarea--disabled\"></textarea>"}}],"markup":{"example":"<textarea class=\"us-form-textarea {$modifiers}\"></textarea>","escaped":"<textarea class=\"us-form-textarea\"></textarea>"},"path":"vendor/assets/stylesheets/ustyle/forms/_textarea.scss","file":"_textarea.scss","link":"textarea"},{"page":"Pattern Library/Forms","name":"Toggle","description":"<p> Toggle buttons provide an alternative way of displaying radio groups with a small number of options to a user.</p>\n<p> IE8 support is included with <code>radioToggle.js</code> which sets a <code>.checked</code> class on the radio button when clicked.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>Use as an alternative to radio groups that have short labels for each option (Yes/No, Opt-in/Opt-out).</p>\n</li>\n<li><p>For forms that have many short radio group questions in them, toggle buttons provide a better experience for quickly selecting answers on both desktop and mobile due to larger visible click areas for each option.</p>\n</li>\n<li><p>Limit the number of options in the toggle group to 3.</p>\n</li>\n</ul>\n","state":[{"name":".us-toggle__btn--disabled","escaped":"us-toggle__btn--disabled","description":"Visual styling for toggle buttons that can't be interacted with.","markup":{"example":" <div class=\"us-field us-field--blocked\">\n <label>Answer truthfully</label>\n <div class=\"us-toggle\">\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn us-toggle__btn--disabled\">\n Yes\n </span>\n </label>\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn\">\n No\n </span>\n </label>\n </div>\n </div>"}}],"javascript":"\n var radioToggle = new RadioToggle({\n $target: $(".us-toggle")\n })\n ","markup":{"example":" <div class=\"us-field us-field--blocked\">\n <label>Answer truthfully</label>\n <div class=\"us-toggle\">\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn {$modifiers}\">\n Yes\n </span>\n </label>\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn\">\n No\n </span>\n </label>\n </div>\n </div>","escaped":" <div class=\"us-field us-field--blocked\">\n <label>Answer truthfully</label>\n <div class=\"us-toggle\">\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn\">\n Yes\n </span>\n </label>\n <label class=\"us-toggle__label\">\n <input class=\"us-form-input\" name=\"choice\" type=\"radio\">\n <span class=\"us-toggle__btn\">\n No\n </span>\n </label>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_toggle.scss","file":"_toggle.scss","link":"toggle"},{"page":"Pattern Library/Forms","name":"Validation messages","description":"<p> Used to provide more detailed feedback about the data users have entered into forms.</p>\n<h4 id=\"best-practices\">Best practices</h4>\n<ul>\n<li><p>For inputs that have a label above them, place the validation message between the input and the label.</p>\n</li>\n<li><p>Use success validation messages only when it makes sense to contextually. For example, they can help to reassure users about the data they entered when multiple criteria need to be satisfied, e.g. password fields.</p>\n</li>\n</ul>\n","state":[{"name":".us-validation--error","escaped":"us-validation--error","description":"Error styling for incorrect data on forms.","markup":{"example":" <div class=\"us-field\">\n <label>Email</label>\n <div class=\"us-validation us-validation--error\">\n <div class=\"us-validation__icon\"></div>\n <div class=\"us-validation__message\">Validation message here</div>\n </div>\n <input type=\"email\" class=\"us-form-input\" name=\"email\" />\n </div>"}},{"name":".us-validation--success","escaped":"us-validation--success","description":"Success styling for correct forms.","markup":{"example":" <div class=\"us-field\">\n <label>Email</label>\n <div class=\"us-validation us-validation--success\">\n <div class=\"us-validation__icon\"></div>\n <div class=\"us-validation__message\">Validation message here</div>\n </div>\n <input type=\"email\" class=\"us-form-input\" name=\"email\" />\n </div>"}}],"markup":{"example":" <div class=\"us-field\">\n <label>Email</label>\n <div class=\"us-validation {$modifiers}\">\n <div class=\"us-validation__icon\"></div>\n <div class=\"us-validation__message\">Validation message here</div>\n </div>\n <input type=\"email\" class=\"us-form-input\" name=\"email\" />\n </div>","escaped":" <div class=\"us-field\">\n <label>Email</label>\n <div class=\"us-validation\">\n <div class=\"us-validation__icon\"></div>\n <div class=\"us-validation__message\">Validation message here</div>\n </div>\n <input type=\"email\" class=\"us-form-input\" name=\"email\" />\n </div>"},"path":"vendor/assets/stylesheets/ustyle/forms/_validation.scss","file":"_validation.scss","link":"validation_messages"}]},{"name":"JavaScript","page":"javascript.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/JavaScript","name":"Overlay","description":"<p> <code>.us-overlay</code> slides in from either side of the viewport, or can be shown as a modal window.</p>\n","javascript":"\n var overlay = new Overlay({\n bodyActiveClass: 'us-overlay--open',\n activeClass: 'us-overlay-parent--active',\n visibleClass: 'us-overlay-parent--visible',\n overlay: $('.us-overlay-parent'),\n openButton: '.js-open-overlay',\n closeButton: '.js-close-overlay',\n historyStatus: '#seedeal',\n history: false,\n preventDefault: true\n });\n ","state":[{"name":".us-overlay--modal","escaped":"us-overlay--modal","description":"Overlay appears as a modal window.","markup":{"example":" <button class=\"us-btn js-open-overlay\" modifier=\"us-overlay--modal\">Open</button>\n <div class=\"us-overlay-parent\" modifier=\"us-overlay--modal\">\n <div class=\"us-overlay us-overlay--modal\">\n <div class=\"us-overlay__container\">\n <div class=\"us-overlay__header\">\n <div class=\"us-overlay__title\">\n Overlay\n </div>\n <button class=\"us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay\">Close</button>\n </div>\n <div class=\"us-overlay__body\">\n Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.\n Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.\n Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.\n Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.\n Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.\n </div>\n </div>\n </div>\n </div>"}},{"name":".us-overlay--right","escaped":"us-overlay--right","description":"Overlay appears on the right side of the viewport (not applicable when used in conjunction with .us-overlay--modal).","markup":{"example":" <button class=\"us-btn js-open-overlay\" modifier=\"us-overlay--right\">Open</button>\n <div class=\"us-overlay-parent\" modifier=\"us-overlay--right\">\n <div class=\"us-overlay us-overlay--right\">\n <div class=\"us-overlay__container\">\n <div class=\"us-overlay__header\">\n <div class=\"us-overlay__title\">\n Overlay\n </div>\n <button class=\"us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay\">Close</button>\n </div>\n <div class=\"us-overlay__body\">\n Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.\n Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.\n Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.\n Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.\n Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.\n </div>\n </div>\n </div>\n </div>"}},{"name":".us-overlay--above","escaped":"us-overlay--above","description":"Overlay appears over the top of another open overlay.","markup":{"example":" <button class=\"us-btn js-open-overlay\" modifier=\"us-overlay--above\">Open</button>\n <div class=\"us-overlay-parent\" modifier=\"us-overlay--above\">\n <div class=\"us-overlay us-overlay--above\">\n <div class=\"us-overlay__container\">\n <div class=\"us-overlay__header\">\n <div class=\"us-overlay__title\">\n Overlay\n </div>\n <button class=\"us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay\">Close</button>\n </div>\n <div class=\"us-overlay__body\">\n Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.\n Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.\n Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.\n Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.\n Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.\n </div>\n </div>\n </div>\n </div>"}}],"markup":{"example":" <button class=\"us-btn js-open-overlay\" modifier=\"{$modifiers}\">Open</button>\n <div class=\"us-overlay-parent\" modifier=\"{$modifiers}\">\n <div class=\"us-overlay {$modifiers}\">\n <div class=\"us-overlay__container\">\n <div class=\"us-overlay__header\">\n <div class=\"us-overlay__title\">\n Overlay\n </div>\n <button class=\"us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay\">Close</button>\n </div>\n <div class=\"us-overlay__body\">\n Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.\n Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.\n Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.\n Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.\n Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.\n </div>\n </div>\n </div>\n </div>","escaped":" <button class=\"us-btn js-open-overlay\" modifier=\"{$modifiers}\">Open</button>\n <div class=\"us-overlay-parent\" modifier=\"{$modifiers}\">\n <div class=\"us-overlay\">\n <div class=\"us-overlay__container\">\n <div class=\"us-overlay__header\">\n <div class=\"us-overlay__title\">\n Overlay\n </div>\n <button class=\"us-overlay__close us-btn us-btn--reversed us-btn--small js-close-overlay\">Close</button>\n </div>\n <div class=\"us-overlay__body\">\n Bacon ipsum dolor amet exercitation ground round voluptate, fatback qui cupidatat sunt consectetur. Dolore strip steak pancetta ground round, venison rump tenderloin fatback frankfurter prosciutto deserunt do ex. In cupim ullamco bresaola, beef meatball aliqua laborum landjaeger consectetur tail cupidatat pariatur meatloaf ball tip. Anim cupim dolore, filet mignon kielbasa tri-tip short ribs esse porchetta landjaeger qui pork loin.\n Ground round nostrud pastrami tempor cow short loin. Ut short ribs alcatra laboris brisket leberkas cow ham hock pork loin excepteur porchetta labore meatloaf. Labore filet mignon ball tip eu pork chop tri-tip porchetta alcatra. Ut consequat cupim ad corned beef sunt proident strip steak tongue irure pastrami kielbasa t-bone.\n Cow in tenderloin minim, aliqua in turkey anim filet mignon adipisicing reprehenderit bacon. Kielbasa turducken sunt dolore, velit alcatra filet mignon sint commodo beef ribs consectetur pork belly frankfurter pork chop meatloaf. Veniam in ad pork belly deserunt. Kevin sed cupidatat magna, swine incididunt reprehenderit tongue short loin pig kielbasa ham hock frankfurter salami beef ribs. Est corned beef shoulder ipsum, pancetta pork shankle meatloaf in beef in drumstick fatback velit pork chop. Meatloaf velit brisket mollit, ut kielbasa t-bone ex landjaeger pork chop adipisicing prosciutto shankle. Brisket turkey ham hock beef ribs, voluptate venison swine flank doner capicola rump tempor.\n Reprehenderit proident turkey mollit ut ipsum magna chuck ut brisket venison do. Exercitation boudin cillum prosciutto. Incididunt excepteur sint pork labore pork loin tri-tip salami cow elit bresaola beef ribs aliquip duis. Dolore nisi frankfurter ut magna.\n Et anim ad commodo, pork aliquip occaecat. Frankfurter kielbasa dolore, landjaeger chuck pork in drumstick fatback. Nulla minim dolor, ut filet mignon ground round id esse beef strip steak do laboris. Kielbasa hamburger consectetur, picanha fatback incididunt aute turducken pig in rump landjaeger qui pork tongue. Sausage cupim consectetur, drumstick et ea fatback consequat leberkas alcatra meatloaf. Duis rump velit est cupidatat in.\n </div>\n </div>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_overlay.scss","file":"_overlay.scss","link":"overlay"},{"page":"Pattern Library/JavaScript","name":"Tabs","description":"<p> These are the basic tabs used for landing pages. You can either reference a data-target for the urls or href for the target tabs. They have a non-js fallback and fold over to accordion when in small tablet view. They are initialised on page load if the tabs classes exist.</p>\n","javascript":"\n var tabs = new Tabs({\n tabContainer: ".us-tabs",\n tabLinks: ".us-tabs-nav-mainlink",\n tabTitle: "us-tab-title",\n activeClass: "active",\n changeUrls: true,\n collapsible: true,\n autoScroll: false\n });\n ","markup":{"example":" <div class='us-tabs'>\n <nav class='us-tabs-nav'>\n <div class='us-tabs-nav-wrapper'>\n <div class='us-tabs-nav-menu'>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab1\">Tab 1</a>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab2\">Tab 2</a>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab3\">Tab 3</a>\n </div>\n </div>\n </nav>\n <div class='us-tabs-container'>\n <div class='us-tab' id='tab1'>\n <h2 class='us-tab-title'>\n <a class=\"us-tabs-nav-mainlink\" href=\"#tab1\">\n Test 1\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-tabs-nav-chevron us-icon us-icon--small us-icon--after us-icon--inputgrey\"><use xlink:href=\"/images/icons.svg#icon-chevron-right\"/></svg>\n </a>\n </h2>\n <div class='us-tab-content'>\n <p>Fatback capicola leberkas pork loin pork jowl. Meatloaf shoulder pancetta, salami prosciutto ribeye andouille chuck landjaeger short loin filet mignon sirloin. Pork chop tri-tip ham pork hamburger frankfurter leberkas short ribs biltong. Prosciutto ham hock rump, andouille tongue flank sirloin tri-tip ball tip frankfurter ham drumstick meatloaf pork loin.</p>\n </div>\n </div>\n <div class='us-tab' id='tab2'>\n <h2 class='us-tab-title'>\n <a class=\"us-tabs-nav-mainlink\" href=\"#tab2\">\n Test 2\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-tabs-nav-chevron us-icon us-icon--small us-icon--after us-icon--inputgrey\"><use xlink:href=\"/images/icons.svg#icon-chevron-right\"/></svg>\n </a>\n </h2>\n <div class='us-tab-content'>\n <p>Kielbasa tenderloin spare ribs, andouille doner brisket chuck drumstick bresaola short loin pork t-bone ground round jowl. Ball tip pork loin doner tongue filet mignon biltong hamburger leberkas. Filet mignon kielbasa kevin short ribs, drumstick chuck shankle spare ribs tri-tip.</p>\n </div>\n </div>\n <div class='us-tab' id='tab3'>\n <h2 class='us-tab-title'>\n <a class=\"us-tabs-nav-mainlink\" href=\"#tab3\">\n Test 3\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-tabs-nav-chevron us-icon us-icon--small us-icon--after us-icon--inputgrey\"><use xlink:href=\"/images/icons.svg#icon-chevron-right\"/></svg>\n </a>\n </h2>\n <div class='us-tab-content'>\n <p>Pig pastrami pork loin kielbasa, filet mignon meatloaf short ribs tenderloin. Pork loin leberkas kevin fatback porchetta bresaola. Cow rump shoulder pastrami. Andouille pork belly t-bone short ribs brisket. Bresaola pork belly tail salami capicola meatball. Pork belly beef ham landjaeger.</p>\n </div>\n </div>\n </div>\n </div>","escaped":" <div class='us-tabs'>\n <nav class='us-tabs-nav'>\n <div class='us-tabs-nav-wrapper'>\n <div class='us-tabs-nav-menu'>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab1\">Tab 1</a>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab2\">Tab 2</a>\n <a class=\"us-tabs-nav-mainlink us-tabs-nav-link\" href=\"#tab3\">Tab 3</a>\n </div>\n </div>\n </nav>\n <div class='us-tabs-container'>\n <div class='us-tab' id='tab1'>\n <h2 class='us-tab-title'>\n <a class=\"us-tabs-nav-mainlink\" href=\"#tab1\">\n Test 1\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-tabs-nav-chevron us-icon us-icon--small us-icon--after us-icon--inputgrey\"><use xlink:href=\"/images/icons.svg#icon-chevron-right\"/></svg>\n </a>\n </h2>\n <div class='us-tab-content'>\n <p>Fatback capicola leberkas pork loin pork jowl. Meatloaf shoulder pancetta, salami prosciutto ribeye andouille chuck landjaeger short loin filet mignon sirloin. Pork chop tri-tip ham pork hamburger frankfurter leberkas short ribs biltong. Prosciutto ham hock rump, andouille tongue flank sirloin tri-tip ball tip frankfurter ham drumstick meatloaf pork loin.</p>\n </div>\n </div>\n <div class='us-tab' id='tab2'>\n <h2 class='us-tab-title'>\n <a class=\"us-tabs-nav-mainlink\" href=\"#tab2\">\n Test 2\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-tabs-nav-chevron us-icon us-icon--small us-icon--after us-icon--inputgrey\"><use xlink:href=\"/images/icons.svg#icon-chevron-right\"/></svg>\n </a>\n </h2>\n <div class='us-tab-content'>\n <p>Kielbasa tenderloin spare ribs, andouille doner brisket chuck drumstick bresaola short loin pork t-bone ground round jowl. Ball tip pork loin doner tongue filet mignon biltong hamburger leberkas. Filet mignon kielbasa kevin short ribs, drumstick chuck shankle spare ribs tri-tip.</p>\n </div>\n </div>\n <div class='us-tab' id='tab3'>\n <h2 class='us-tab-title'>\n <a class=\"us-tabs-nav-mainlink\" href=\"#tab3\">\n Test 3\n <svg role=\"presentation\" aria-hidden=\"true\" class=\"us-tabs-nav-chevron us-icon us-icon--small us-icon--after us-icon--inputgrey\"><use xlink:href=\"/images/icons.svg#icon-chevron-right\"/></svg>\n </a>\n </h2>\n <div class='us-tab-content'>\n <p>Pig pastrami pork loin kielbasa, filet mignon meatloaf short ribs tenderloin. Pork loin leberkas kevin fatback porchetta bresaola. Cow rump shoulder pastrami. Andouille pork belly t-bone short ribs brisket. Bresaola pork belly tail salami capicola meatball. Pork belly beef ham landjaeger.</p>\n </div>\n </div>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_tabs.scss","file":"_tabs.scss","link":"tabs"},{"page":"Pattern Library/JavaScript","name":"Tooltip","description":"<p> <code>.us-tooltip</code> can be applied to any parent, and by hovering over it, it will toggle the visibility of <code>.us-tooltip__note</code>. Please note that on mobile viewports, the tooltip will appeat underneath the element that is aligned with the tooltip icon.</p>\n","state":[{"name":".us-tooltip--top","escaped":"us-tooltip--top","description":"","markup":{"example":" <div class=\"tooltip-demo us-tooltip us-tooltip--top\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"}},{"name":".us-tooltip--bottom","escaped":"us-tooltip--bottom","description":"","markup":{"example":" <div class=\"tooltip-demo us-tooltip us-tooltip--bottom\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"}},{"name":".us-tooltip--left","escaped":"us-tooltip--left","description":"","markup":{"example":" <div class=\"tooltip-demo us-tooltip us-tooltip--left\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"}},{"name":".us-tooltip--right","escaped":"us-tooltip--right","description":"","markup":{"example":" <div class=\"tooltip-demo us-tooltip us-tooltip--right\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"}},{"name":".us-tooltip--small","escaped":"us-tooltip--small","description":"","markup":{"example":" <div class=\"tooltip-demo us-tooltip us-tooltip--small\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"}}],"javascript":"\n var tooltips = new ClassToggler({\n containerClass: '.us-tooltip',\n $target: $('.us-tooltip__icon'),\n activeClass: "us-tooltip--active"\n });\n ","markup":{"example":" <div class=\"tooltip-demo us-tooltip {$modifiers}\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>","escaped":" <div class=\"tooltip-demo us-tooltip\">\n <div class=\"us-field\">\n <label for='name'>Name</label>\n <input class='us-form-input' id='name' name='name' placeholder='Please enter your name'>\n </div>\n <div class=\"us-tooltip__wrapper\">\n <div class=\"us-tooltip__icon\"></div>\n <div class=\"us-tooltip__note\">\n <div class=\"us-tooltip__arrow\"></div>\n <strong>Tooltip</strong> message content\n </div>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_tooltip.scss","file":"_tooltip.scss","link":"tooltip"}]},{"name":"Components","page":"components.html","template":"styleguide/templates/styleguide.tpl","section":"pattern-library","blocks":[{"page":"Pattern Library/Components","name":"Breadcrumbs","description":"<p> Breadcrumbs are used to provide signposting of a users location and to enable quick navigation around the site. They are only to be used as a secondary means of navigation however. Pages should also be navigable through other means.</p>\n","markup":{"example":" <ul class=\"us-crumbs\">\n <li class=\"us-crumbs__item\"><a href=\"/\" class=\"us-crumbs__link\">uSwitch.com</a></li>\n <li class=\"us-crumbs__item\"><a class=\"us-crumbs__link\" href=\"http://www.uswitch.com/credit-reports/\">Credit report</a></li>\n <li class=\"us-crumbs__item\"><a class=\"us-crumbs__link\" href=\"http://www.uswitch.com/credit-reports/guides/\">Credit reports guides</a></li>\n <li class=\"us-crumbs__item\">Statutory credit reports</li>\n </ul>","escaped":" <ul class=\"us-crumbs\">\n <li class=\"us-crumbs__item\"><a href=\"/\" class=\"us-crumbs__link\">uSwitch.com</a></li>\n <li class=\"us-crumbs__item\"><a class=\"us-crumbs__link\" href=\"http://www.uswitch.com/credit-reports/\">Credit report</a></li>\n <li class=\"us-crumbs__item\"><a class=\"us-crumbs__link\" href=\"http://www.uswitch.com/credit-reports/guides/\">Credit reports guides</a></li>\n <li class=\"us-crumbs__item\">Statutory credit reports</li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/components/_breadcrumbs.scss","file":"_breadcrumbs.scss","link":"breadcrumbs"},{"page":"Pattern Library/Components","name":"Buttons","description":"<p> Our buttons used across the site. The states give different use cases. Both <code><a></code> and <code><button></code> tags are supported. Please use <code>role='button'</code> when using an <code><a></code> tag.</p>\n","state":[{"name":".us-btn--primary","escaped":"us-btn--primary","description":"Used as a save/update button.","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--primary\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--primary\">Button Element</button>"}},{"name":".us-btn--action","escaped":"us-btn--action","description":"Navigational button.","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--action\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--action\">Button Element</button>"}},{"name":".us-btn--secondary","escaped":"us-btn--secondary","description":"Secondary.","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--secondary\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--secondary\">Button Element</button>"}},{"name":".us-btn--hero","escaped":"us-btn--hero","description":"Navy outline used for buttons on hero banners.","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--hero\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--hero\">Button Element</button>"}},{"name":".us-btn--reversed","escaped":"us-btn--reversed","description":"White outline for dark backgrounds.","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--reversed\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--reversed\">Button Element</button>"}},{"name":".us-btn--large","escaped":"us-btn--large","description":"Larger button for heros.","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--large\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--large\">Button Element</button>"}},{"name":".us-btn--small","escaped":"us-btn--small","description":"Smaller button for mobile tables.","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--small\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--small\">Button Element</button>"}},{"name":".us-btn--blocked","escaped":"us-btn--blocked","description":"Full width button.","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--blocked\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--blocked\">Button Element</button>"}},{"name":".us-btn--link","escaped":"us-btn--link","description":"link style button.","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--link\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--link\">Button Element</button>"}},{"name":".us-btn--stronger","escaped":"us-btn--stronger","description":"Emphasis button.","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--stronger\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--stronger\">Button Element</button>"}},{"name":".us-btn--disabled","escaped":"us-btn--disabled","description":"Disabled styling (can also be styled with :disabled).","markup":{"example":" <a href=\"#\" class=\"us-btn us-btn--disabled\" role=\"button\">Link Button</a>\n <button class=\"us-btn us-btn--disabled\">Button Element</button>"}}],"markup":{"example":" <a href=\"#\" class=\"us-btn {$modifiers}\" role=\"button\">Link Button</a>\n <button class=\"us-btn {$modifiers}\">Button Element</button>","escaped":" <a href=\"#\" class=\"us-btn\" role=\"button\">Link Button</a>\n <button class=\"us-btn\">Button Element</button>"},"path":"vendor/assets/stylesheets/ustyle/components/_button.scss","file":"_button.scss","link":"buttons"},{"page":"Pattern Library/Components","name":"Calculator","description":"<p> The calculator tends to sit in the table toolbar component and is used to refine results from comparison tables, and give estimated info about products based on the input.</p>\n","markup":{"example":" <form class='us-calculator'>\n <h2 class='us-table-toolbar__heading'>How much would you like to transfer?</h2>\n <div class='us-calculator__input us-input-group'>\n <div class='us-input-group__box'>£</div>\n <input type='text' class='us-form-input' pattern='[0-9]*' name='amount' id='amount' value='3000' />\n </div>\n <button class='us-calculator__btn us-btn us-btn--primary'>Update results</button>\n <div class='us-tooltip us-tooltip--right'>\n <div class='us-tooltip__wrapper'>\n <div class='us-tooltip__icon'></div>\n <div class='us-tooltip__note'>\n <div class='us-tooltip__arrow'></div>\n Note that this is illustrative and this figure does not reflect the credit limit you will be offered.\n </div>\n </div>\n </div>\n </form>","escaped":" <form class='us-calculator'>\n <h2 class='us-table-toolbar__heading'>How much would you like to transfer?</h2>\n <div class='us-calculator__input us-input-group'>\n <div class='us-input-group__box'>£</div>\n <input type='text' class='us-form-input' pattern='[0-9]*' name='amount' id='amount' value='3000' />\n </div>\n <button class='us-calculator__btn us-btn us-btn--primary'>Update results</button>\n <div class='us-tooltip us-tooltip--right'>\n <div class='us-tooltip__wrapper'>\n <div class='us-tooltip__icon'></div>\n <div class='us-tooltip__note'>\n <div class='us-tooltip__arrow'></div>\n Note that this is illustrative and this figure does not reflect the credit limit you will be offered.\n </div>\n </div>\n </div>\n </form>"},"path":"vendor/assets/stylesheets/ustyle/components/_calculator.scss","file":"_calculator.scss","link":"calculator"},{"page":"Pattern Library/Components","name":"Comp table row","description":"<p> The <code>.us-ct__row</code> appears in the comparison tables, and contains a single product.</p>\n","state":[{"name":".us-ct-row--details-toggle","escaped":"us-ct-row--details-toggle","description":"Used for a thicker bottom border when the toggle is showing.","markup":{"example":" <div class=\"us-ct-row us-ct-row--details-toggle\">\n <div class=\"us-ct-row__title\">\n <p class=\"us-ct-row__title-text\">aqua Reward With Cashback</p>\n <div class=\"us-usp us-usp--orange\">£20 Amazon voucher</div>\n <div class=\"us-usp us-usp--green\">Cashback</div>\n </div>\n <div class=\"us-ct-row__product\">\n <div class=\"us-ct-row__col us-ct-row__col--image\">\n <img src=\"https://uswitch-cms.imgix.net/uswitch-assets-eu/banking/credit-cards/cards/aqua-2017-large.png?w=170&h=107&fit=auto&bg=0fff&fm=png8\" class=\"us-ct-row__image\" />\n <div class=\"us-ct-row__title--mobile\"><strong>aqua Reward With Cashback</strong></div>\n <div class=\"us-ct-row__usp--mobile\">\n <div class=\"us-usp us-usp--orange\">£20 Amazon voucher</div>\n <div class=\"us-usp us-usp--green\">Cashback</div>\n </div>\n </div>\n <div class=\"us-ct-row__col us-ct-row__col--stretch\">\n <div class=\"us-ct-row__name\"><strong>34.9% APR</strong></div><div class=\"us-ct-row__value\">Representative (variable)</div>\n </div>\n <div class=\"us-ct-row__col us-ct-row__col--stretch\">\n <div class=\"us-ct-row__name\"><strong>£250</strong></div><div class=\"us-ct-row__value\">Minimum credit limit</div>\n </div>\n <div class=\"us-ct-row__col us-ct-row__col--stretch\">\n <div class=\"us-ct-row__name\"><strong>£1250</strong></div><div class=\"us-ct-row__value\">Maximum credit limit</div>\n </div>\n <div class=\"us-ct-row__col us-ct-row__col--apply\">\n <a class=\"us-btn us-btn--primary us-btn--blocked\" href=\"#\" role=\"button\">Apply</a>\n <a href=\"#\" class=\"us-ct-row__more-info\">More info</a>\n </div>\n </div>\n <span class=\"us-ct-row__rep-ex\">Representative example: When you spend £1,200 at a rate of 34.91% (variable) per annum, your representative APR is 34.9% APR (variable)</span>\n <div class=\"us-ct-row__key-details\">\n <button class=\"us-ct-row__key-details-toggle us-ct-row__key-details-toggle-open\">View key details <svg role=\"presentation\" class=\"us-ct-row__key-details-chevron\"><use xlink:href=\"/images/icons.svg#icon-chevron-right\"></use></svg></button>\n <div class=\"us-ct-row__key-details-info\">\n <div class=\"us-ct-row__key-details-col\">\n <strong>Card details</strong>\n <ul class=\"us-ct-row__key-details-ul\">\n <li>£20 Amazon gift certificate exclusively through uSwitch (terms apply)</li>\n <li>0.5% cashback and no foreign transaction fees</li>\n <li>Credit limit increase possible after four months</li>\n </ul>\n </div>\n <div class=\"us-ct-row__key-details-col\">\n <strong>To get this card you must at least:</strong>\n <ul class=\"us-ct-row__criteria us-ct-row__key-details-ul\">\n <li class=\"us-ct-row__criteria-li\"><svg role=\"presentation\" class=\"us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick\"><use xlink:href=\"/images/icons.svg#icon-tick\"></use></svg>be 18 or older</li>\n <li class=\"us-ct-row__criteria-li\"><svg role=\"presentation\" class=\"us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick\"><use xlink:href=\"/images/icons.svg#icon-tick\"></use></svg>have a permanent UK address</li>\n <li class=\"us-ct-row__criteria-li\"><svg role=\"presentation\" class=\"us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick\"><use xlink:href=\"/images/icons.svg#icon-tick\"></use></svg>have a UK current bank or building society account</li>\n <li class=\"us-ct-row__criteria-li\"><svg role=\"presentation\" class=\"us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick\"><use xlink:href=\"/images/icons.svg#icon-tick\"></use></svg>not be registered bankrupt in past 18 months or have proceedings</li>\n <li class=\"us-ct-row__criteria-li\"><svg role=\"presentation\" class=\"us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick\"><use xlink:href=\"/images/icons.svg#icon-tick\"></use></svg>have no CCJs (past 12 months)</li>\n </ul>\n <p class=\"us-ct-row__criteria-additional\">Additional criteria for acceptance from the lender may apply.</p>\n </div>\n </div>\n </div>\n </div>"}}],"markup":{"example":" <div class=\"us-ct-row {$modifiers}\">\n <div class=\"us-ct-row__title\">\n <p class=\"us-ct-row__title-text\">aqua Reward With Cashback</p>\n <div class=\"us-usp us-usp--orange\">£20 Amazon voucher</div>\n <div class=\"us-usp us-usp--green\">Cashback</div>\n </div>\n <div class=\"us-ct-row__product\">\n <div class=\"us-ct-row__col us-ct-row__col--image\">\n <img src=\"https://uswitch-cms.imgix.net/uswitch-assets-eu/banking/credit-cards/cards/aqua-2017-large.png?w=170&h=107&fit=auto&bg=0fff&fm=png8\" class=\"us-ct-row__image\" />\n <div class=\"us-ct-row__title--mobile\"><strong>aqua Reward With Cashback</strong></div>\n <div class=\"us-ct-row__usp--mobile\">\n <div class=\"us-usp us-usp--orange\">£20 Amazon voucher</div>\n <div class=\"us-usp us-usp--green\">Cashback</div>\n </div>\n </div>\n <div class=\"us-ct-row__col us-ct-row__col--stretch\">\n <div class=\"us-ct-row__name\"><strong>34.9% APR</strong></div><div class=\"us-ct-row__value\">Representative (variable)</div>\n </div>\n <div class=\"us-ct-row__col us-ct-row__col--stretch\">\n <div class=\"us-ct-row__name\"><strong>£250</strong></div><div class=\"us-ct-row__value\">Minimum credit limit</div>\n </div>\n <div class=\"us-ct-row__col us-ct-row__col--stretch\">\n <div class=\"us-ct-row__name\"><strong>£1250</strong></div><div class=\"us-ct-row__value\">Maximum credit limit</div>\n </div>\n <div class=\"us-ct-row__col us-ct-row__col--apply\">\n <a class=\"us-btn us-btn--primary us-btn--blocked\" href=\"#\" role=\"button\">Apply</a>\n <a href=\"#\" class=\"us-ct-row__more-info\">More info</a>\n </div>\n </div>\n <span class=\"us-ct-row__rep-ex\">Representative example: When you spend £1,200 at a rate of 34.91% (variable) per annum, your representative APR is 34.9% APR (variable)</span>\n <div class=\"us-ct-row__key-details\">\n <button class=\"us-ct-row__key-details-toggle us-ct-row__key-details-toggle-open\">View key details <svg role=\"presentation\" class=\"us-ct-row__key-details-chevron\"><use xlink:href=\"/images/icons.svg#icon-chevron-right\"></use></svg></button>\n <div class=\"us-ct-row__key-details-info\">\n <div class=\"us-ct-row__key-details-col\">\n <strong>Card details</strong>\n <ul class=\"us-ct-row__key-details-ul\">\n <li>£20 Amazon gift certificate exclusively through uSwitch (terms apply)</li>\n <li>0.5% cashback and no foreign transaction fees</li>\n <li>Credit limit increase possible after four months</li>\n </ul>\n </div>\n <div class=\"us-ct-row__key-details-col\">\n <strong>To get this card you must at least:</strong>\n <ul class=\"us-ct-row__criteria us-ct-row__key-details-ul\">\n <li class=\"us-ct-row__criteria-li\"><svg role=\"presentation\" class=\"us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick\"><use xlink:href=\"/images/icons.svg#icon-tick\"></use></svg>be 18 or older</li>\n <li class=\"us-ct-row__criteria-li\"><svg role=\"presentation\" class=\"us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick\"><use xlink:href=\"/images/icons.svg#icon-tick\"></use></svg>have a permanent UK address</li>\n <li class=\"us-ct-row__criteria-li\"><svg role=\"presentation\" class=\"us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick\"><use xlink:href=\"/images/icons.svg#icon-tick\"></use></svg>have a UK current bank or building society account</li>\n <li class=\"us-ct-row__criteria-li\"><svg role=\"presentation\" class=\"us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick\"><use xlink:href=\"/images/icons.svg#icon-tick\"></use></svg>not be registered bankrupt in past 18 months or have proceedings</li>\n <li class=\"us-ct-row__criteria-li\"><svg role=\"presentation\" class=\"us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick\"><use xlink:href=\"/images/icons.svg#icon-tick\"></use></svg>have no CCJs (past 12 months)</li>\n </ul>\n <p class=\"us-ct-row__criteria-additional\">Additional criteria for acceptance from the lender may apply.</p>\n </div>\n </div>\n </div>\n </div>","escaped":" <div class=\"us-ct-row\">\n <div class=\"us-ct-row__title\">\n <p class=\"us-ct-row__title-text\">aqua Reward With Cashback</p>\n <div class=\"us-usp us-usp--orange\">£20 Amazon voucher</div>\n <div class=\"us-usp us-usp--green\">Cashback</div>\n </div>\n <div class=\"us-ct-row__product\">\n <div class=\"us-ct-row__col us-ct-row__col--image\">\n <img src=\"https://uswitch-cms.imgix.net/uswitch-assets-eu/banking/credit-cards/cards/aqua-2017-large.png?w=170&h=107&fit=auto&bg=0fff&fm=png8\" class=\"us-ct-row__image\" />\n <div class=\"us-ct-row__title--mobile\"><strong>aqua Reward With Cashback</strong></div>\n <div class=\"us-ct-row__usp--mobile\">\n <div class=\"us-usp us-usp--orange\">£20 Amazon voucher</div>\n <div class=\"us-usp us-usp--green\">Cashback</div>\n </div>\n </div>\n <div class=\"us-ct-row__col us-ct-row__col--stretch\">\n <div class=\"us-ct-row__name\"><strong>34.9% APR</strong></div><div class=\"us-ct-row__value\">Representative (variable)</div>\n </div>\n <div class=\"us-ct-row__col us-ct-row__col--stretch\">\n <div class=\"us-ct-row__name\"><strong>£250</strong></div><div class=\"us-ct-row__value\">Minimum credit limit</div>\n </div>\n <div class=\"us-ct-row__col us-ct-row__col--stretch\">\n <div class=\"us-ct-row__name\"><strong>£1250</strong></div><div class=\"us-ct-row__value\">Maximum credit limit</div>\n </div>\n <div class=\"us-ct-row__col us-ct-row__col--apply\">\n <a class=\"us-btn us-btn--primary us-btn--blocked\" href=\"#\" role=\"button\">Apply</a>\n <a href=\"#\" class=\"us-ct-row__more-info\">More info</a>\n </div>\n </div>\n <span class=\"us-ct-row__rep-ex\">Representative example: When you spend £1,200 at a rate of 34.91% (variable) per annum, your representative APR is 34.9% APR (variable)</span>\n <div class=\"us-ct-row__key-details\">\n <button class=\"us-ct-row__key-details-toggle us-ct-row__key-details-toggle-open\">View key details <svg role=\"presentation\" class=\"us-ct-row__key-details-chevron\"><use xlink:href=\"/images/icons.svg#icon-chevron-right\"></use></svg></button>\n <div class=\"us-ct-row__key-details-info\">\n <div class=\"us-ct-row__key-details-col\">\n <strong>Card details</strong>\n <ul class=\"us-ct-row__key-details-ul\">\n <li>£20 Amazon gift certificate exclusively through uSwitch (terms apply)</li>\n <li>0.5% cashback and no foreign transaction fees</li>\n <li>Credit limit increase possible after four months</li>\n </ul>\n </div>\n <div class=\"us-ct-row__key-details-col\">\n <strong>To get this card you must at least:</strong>\n <ul class=\"us-ct-row__criteria us-ct-row__key-details-ul\">\n <li class=\"us-ct-row__criteria-li\"><svg role=\"presentation\" class=\"us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick\"><use xlink:href=\"/images/icons.svg#icon-tick\"></use></svg>be 18 or older</li>\n <li class=\"us-ct-row__criteria-li\"><svg role=\"presentation\" class=\"us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick\"><use xlink:href=\"/images/icons.svg#icon-tick\"></use></svg>have a permanent UK address</li>\n <li class=\"us-ct-row__criteria-li\"><svg role=\"presentation\" class=\"us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick\"><use xlink:href=\"/images/icons.svg#icon-tick\"></use></svg>have a UK current bank or building society account</li>\n <li class=\"us-ct-row__criteria-li\"><svg role=\"presentation\" class=\"us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick\"><use xlink:href=\"/images/icons.svg#icon-tick\"></use></svg>not be registered bankrupt in past 18 months or have proceedings</li>\n <li class=\"us-ct-row__criteria-li\"><svg role=\"presentation\" class=\"us-icon us-icon--small us-icon--tick us-ct-row__criteria-tick\"><use xlink:href=\"/images/icons.svg#icon-tick\"></use></svg>have no CCJs (past 12 months)</li>\n </ul>\n <p class=\"us-ct-row__criteria-additional\">Additional criteria for acceptance from the lender may apply.</p>\n </div>\n </div>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_comp-table-row.scss","file":"_comp-table-row.scss","link":"comp_table_row"},{"page":"Pattern Library/Components","name":"Compliance banner","description":"<p> Compliance banner and disclaimer below the comparison table</p>\n","markup":{"example":" <div class=\"us-comp-banner\">\n <div class=\"us-comp-banner__inner\">\n <p class=\"us-comp-banner__text\">uSwitch Limited is a credit broker, not a lender, for consumer credit products.</p>\n <p class=\"us-comp-banner__text\">uSwitch services are provided at no cost to you, but we may receive a commission from the companies we refer you to.</p>\n </div>\n </div>","escaped":" <div class=\"us-comp-banner\">\n <div class=\"us-comp-banner__inner\">\n <p class=\"us-comp-banner__text\">uSwitch Limited is a credit broker, not a lender, for consumer credit products.</p>\n <p class=\"us-comp-banner__text\">uSwitch services are provided at no cost to you, but we may receive a commission from the companies we refer you to.</p>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_compliance-banner.scss","file":"_compliance-banner.scss","link":"compliance_banner"},{"page":"Pattern Library/Components","name":"Content group","description":"<p> The <code>.us-content-group</code> is a separator element for content groupings. Ideal to split up landing pages with reasonable padding.</p>\n","state":[{"name":".mobile-bordered","escaped":"mobile-bordered","description":"Adds a smaller border and padding to mobile devices.","markup":{"example":" <div class='us-content-group mobile-bordered'>\n <p>\n Swat at dog intrigued by the shower missing until dinner time and run in circles use lap as chair.\n </p>\n </div>"}}],"markup":{"example":" <div class='us-content-group {$modifiers}'>\n <p>\n Swat at dog intrigued by the shower missing until dinner time and run in circles use lap as chair.\n </p>\n </div>","escaped":" <div class='us-content-group'>\n <p>\n Swat at dog intrigued by the shower missing until dinner time and run in circles use lap as chair.\n </p>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_content-group.scss","file":"_content-group.scss","link":"content_group"},{"page":"Pattern Library/Components","name":"CTAs","description":"<p> Used within guide and news articles, these CTAs (Calls to Action) are intended to not interupt the content but to integrate in more subtle means.</p>\n","markup":{"example":" <section class=\"us-cta cta cta-column\">\n <form>\n <h3 class=\"us-cta__title\">It's your report</h3>\n <p>Join the campaign to fight for free annual credit reports for everyone</p>\n <a href=\"/money/itsmyreport/\" class=\"us-btn us-btn--primary\" rel=\"nofollow\">Sign the petition</a>\n </form>\n </section>","escaped":" <section class=\"us-cta cta cta-column\">\n <form>\n <h3 class=\"us-cta__title\">It's your report</h3>\n <p>Join the campaign to fight for free annual credit reports for everyone</p>\n <a href=\"/money/itsmyreport/\" class=\"us-btn us-btn--primary\" rel=\"nofollow\">Sign the petition</a>\n </form>\n </section>"},"path":"vendor/assets/stylesheets/ustyle/components/_cta.scss","file":"_cta.scss","link":"ctas"},{"page":"Pattern Library/Components","name":"Hero","description":"<p> The <code>.us-hero</code> is used for the upper part of most pages, where the calls to action are usually kept.</p>\n<p> It is intended to draw attention with <code>$c-cyan</code> as it's background color, and should be used across all landing pages.</p>\n","markup":{"example":" <div class='us-hero'>\n <div class='us-hero-container'>\n <h1 class='us-hero-title'>Hero title</h1>\n <p class='us-hero-description us-standfirst us-mobile--hidden'>Swat at dog intrigued by the shower missing until dinner time.</p>\n </div>\n </div>\n <div class='us-hero us-hero--double'>\n <div class='us-hero-container'>\n <div class=\"us-hero__block\">\n <h1 class='us-hero-title'>Hero title</h1>\n <p class='us-hero-description us-standfirst us-mobile--hidden'>Swat at dog intrigued by the shower missing until dinner time.</p>\n </div>\n <div class=\"us-hero__block\"></div>\n </div>\n </div>","escaped":" <div class='us-hero'>\n <div class='us-hero-container'>\n <h1 class='us-hero-title'>Hero title</h1>\n <p class='us-hero-description us-standfirst us-mobile--hidden'>Swat at dog intrigued by the shower missing until dinner time.</p>\n </div>\n </div>\n <div class='us-hero us-hero--double'>\n <div class='us-hero-container'>\n <div class=\"us-hero__block\">\n <h1 class='us-hero-title'>Hero title</h1>\n <p class='us-hero-description us-standfirst us-mobile--hidden'>Swat at dog intrigued by the shower missing until dinner time.</p>\n </div>\n <div class=\"us-hero__block\"></div>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_hero.scss","file":"_hero.scss","link":"hero"},{"page":"Pattern Library/Components","name":"Anchor links","description":"<p> Anchor tag styling, with and without a border.</p>\n","state":[{"name":".us-link","escaped":"us-link","description":"Adds a border bottom to the link.","markup":{"example":"<a href=\"#\" class=\"us-link\">Link</a>"}},{"name":".us-link--light","escaped":"us-link--light","description":"Changes the link colours to white for when links are placed on dark backgrounds.","markup":{"example":"<a href=\"#\" class=\"us-link--light\">Link</a>"}}],"markup":{"example":"<a href=\"#\" class=\"{$modifiers}\">Link</a>","escaped":"<a href=\"#\">Link</a>"},"path":"vendor/assets/stylesheets/ustyle/components/_links.scss","file":"_links.scss","link":"anchor_links"},{"page":"Pattern Library/Components","name":"Link lists","description":"<p> The default list styling for lists that have anchors to take you to other pages.</p>\n","markup":{"example":" <ul class='us-list'>\n <li><a href=\"#\">List item 1</a></li>\n <li><a href=\"#\">List item 2</a></li>\n <li><a href=\"#\">List item 3</a></li>\n </ul>","escaped":" <ul class='us-list'>\n <li><a href=\"#\">List item 1</a></li>\n <li><a href=\"#\">List item 2</a></li>\n <li><a href=\"#\">List item 3</a></li>\n </ul>"},"path":"vendor/assets/stylesheets/ustyle/components/_lists.scss","file":"_lists.scss","link":"link_lists"},{"page":"Pattern Library/Components","name":"Loader","description":"<p> Loader component to be added to any AJAX/filter loads across uSwitch. We use them specifically in tables when loading new rows.</p>\n<p> <code>.us-loader--loading</code> will initiate the animation and <code>.us-loader--centered</code> will vertically center the loading SVG.</p>\n","markup":{"example":" <div class='us-loader__container'>\n <div class='us-loader us-loader--loading us-loader--centered'>\n <div class='us-loader__inner'>\n <div class='us-loader__spinner'></div>\n <div class='us-loader__text'>\n Loading deals\n </div>\n </div>\n <div class='us-loader__overlay'></div>\n </div>\n <!-- EXAMPLE CONTENT -->\n <ul class='us-list'>\n <li><a href=\"#\">List item 1</a></li>\n <li><a href=\"#\">List item 2</a></li>\n <li><a href=\"#\">List item 3</a></li>\n <li><a href=\"#\">List item 4</a></li>\n </ul>\n <!-- END EXAMPLE -->\n </div>","escaped":" <div class='us-loader__container'>\n <div class='us-loader us-loader--loading us-loader--centered'>\n <div class='us-loader__inner'>\n <div class='us-loader__spinner'></div>\n <div class='us-loader__text'>\n Loading deals\n </div>\n </div>\n <div class='us-loader__overlay'></div>\n </div>\n <!-- EXAMPLE CONTENT -->\n <ul class='us-list'>\n <li><a href=\"#\">List item 1</a></li>\n <li><a href=\"#\">List item 2</a></li>\n <li><a href=\"#\">List item 3</a></li>\n <li><a href=\"#\">List item 4</a></li>\n </ul>\n <!-- END EXAMPLE -->\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_loader.scss","file":"_loader.scss","link":"loader"},{"page":"Pattern Library/Components","name":"Progress navigation","description":"<p> The progress navigation should be used for any funnel journeys on the website. Once a section has been completed the user should be able to get back to that step.</p>\n<p> The mobile view of the navigation just has the dotted numbers.</p>\n","markup":{"example":" <div class=\"us-progress\">\n <nav>\n <ul class=\"us-progress__nav us-clearfix\">\n <li class=\"us-progress__item\">\n <a href=\"#\" class=\"us-progress__link us-progress__link--complete\">\n <span class=\"us-tablet--inline\">Current supplier</span>\n </a>\n </li>\n <li class=\"us-progress__item\">\n <a href=\"#\" class=\"us-progress__link us-progress__link--complete\">\n <span class=\"us-tablet--inline\">Usage</span>\n </a>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--current\">\n <span class=\"us-tablet--inline\">Results</span>\n </span>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--next\">\n <span class=\"us-tablet--inline\">New tariff</span>\n </span>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--next\">\n <span class=\"us-tablet--inline\">Apply</span>\n </span>\n </li>\n </ul>\n </nav>\n </div>","escaped":" <div class=\"us-progress\">\n <nav>\n <ul class=\"us-progress__nav us-clearfix\">\n <li class=\"us-progress__item\">\n <a href=\"#\" class=\"us-progress__link us-progress__link--complete\">\n <span class=\"us-tablet--inline\">Current supplier</span>\n </a>\n </li>\n <li class=\"us-progress__item\">\n <a href=\"#\" class=\"us-progress__link us-progress__link--complete\">\n <span class=\"us-tablet--inline\">Usage</span>\n </a>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--current\">\n <span class=\"us-tablet--inline\">Results</span>\n </span>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--next\">\n <span class=\"us-tablet--inline\">New tariff</span>\n </span>\n </li>\n <li class=\"us-progress__item\">\n <span class=\"us-progress__link us-progress__link--next\">\n <span class=\"us-tablet--inline\">Apply</span>\n </span>\n </li>\n </ul>\n </nav>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_progress.scss","file":"_progress.scss","link":"progress_navigation"},{"page":"Pattern Library/Components","name":"Promo banner","description":"<p> Promotional banner</p>\n","markup":{"example":" <div class=\"us-promo-banner\">\n <div class=\"us-promo-banner__inner\">\n <h3 class=\"us-promo-banner__title\">Title block here</h3>\n <ul class=\"us-promo-banner__list\">\n <li class=\"us-promo-banner__list-item\">\n <span class=\"us-promo-banner__circle\">1</span>\n <span class=\"us-promo-banner__text\">Text here</span>\n </li>\n <li class=\"us-promo-banner__list-item\">\n <span class=\"us-promo-banner__circle\">2</span>\n <span class=\"us-promo-banner__text\">Text here</span>\n </li>\n <li class=\"us-promo-banner__list-item\">\n <span class=\"us-promo-banner__circle\">3</span>\n <span class=\"us-promo-banner__text\">Text here</span>\n </li>\n </ul>\n <div class=\"us-promo-banner__button\"><a class=\"us-btn us-btn--action us-btn--large\" href=\"#\">Promo CTA text</a></div>\n </div>\n </div>","escaped":" <div class=\"us-promo-banner\">\n <div class=\"us-promo-banner__inner\">\n <h3 class=\"us-promo-banner__title\">Title block here</h3>\n <ul class=\"us-promo-banner__list\">\n <li class=\"us-promo-banner__list-item\">\n <span class=\"us-promo-banner__circle\">1</span>\n <span class=\"us-promo-banner__text\">Text here</span>\n </li>\n <li class=\"us-promo-banner__list-item\">\n <span class=\"us-promo-banner__circle\">2</span>\n <span class=\"us-promo-banner__text\">Text here</span>\n </li>\n <li class=\"us-promo-banner__list-item\">\n <span class=\"us-promo-banner__circle\">3</span>\n <span class=\"us-promo-banner__text\">Text here</span>\n </li>\n </ul>\n <div class=\"us-promo-banner__button\"><a class=\"us-btn us-btn--action us-btn--large\" href=\"#\">Promo CTA text</a></div>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_promo-banner.scss","file":"_promo-banner.scss","link":"promo_banner"},{"page":"Pattern Library/Components","name":"Reminder","description":"<p> Placed underneath some tables to enable reminders</p>\n","markup":{"example":" <div class=\"us-container us-reminder\">\n <div class=\"us-grid-row us-reminder-title\">Got a balance transfer card?</div>\n <div class=\"us-grid-row us-reminder-content\">\n <div class=\"us-col-xsm-9\">\n <p>Create a reminder and we'll let you know when you're nearing the end of your 0% period</p>\n <a class=\"us-btn us-btn--action\" data-widget-creative=\"banner\" data-widget-name=\"reminder-credit-cards\" data-widget-position=\"table\" data-event=\"\" data-event-category=\"reminders\" data-event-action=\"banner-click\" data-event-label=\"credit-cards\" href=\"/account/signin?origin=https://www.uswitch.com/account/reminders#credit-cards&source=credit-cards.reminders\" data-overlay-title=\"Sign up to create a reminder\" data-source=\"credit-cards.reminders\" data-origin=\"https://www.uswitch.com/account/reminders#credit-cards\" onclick=\"uSwitch.openSignin(event)\">\n Create a reminder\n </a>\n </div>\n <div class=\"us-col-xsm-3\">\n <svg class=\"us-icon--large us-icon--notext us-icon--inputgrey us-float--right\" role=\"presentation\">\n <use xlink:href=\"/images/icons.svg#icon-calendar\"></use>\n </svg>\n </div>\n </div>\n </div>","escaped":" <div class=\"us-container us-reminder\">\n <div class=\"us-grid-row us-reminder-title\">Got a balance transfer card?</div>\n <div class=\"us-grid-row us-reminder-content\">\n <div class=\"us-col-xsm-9\">\n <p>Create a reminder and we'll let you know when you're nearing the end of your 0% period</p>\n <a class=\"us-btn us-btn--action\" data-widget-creative=\"banner\" data-widget-name=\"reminder-credit-cards\" data-widget-position=\"table\" data-event=\"\" data-event-category=\"reminders\" data-event-action=\"banner-click\" data-event-label=\"credit-cards\" href=\"/account/signin?origin=https://www.uswitch.com/account/reminders#credit-cards&source=credit-cards.reminders\" data-overlay-title=\"Sign up to create a reminder\" data-source=\"credit-cards.reminders\" data-origin=\"https://www.uswitch.com/account/reminders#credit-cards\" onclick=\"uSwitch.openSignin(event)\">\n Create a reminder\n </a>\n </div>\n <div class=\"us-col-xsm-3\">\n <svg class=\"us-icon--large us-icon--notext us-icon--inputgrey us-float--right\" role=\"presentation\">\n <use xlink:href=\"/images/icons.svg#icon-calendar\"></use>\n </svg>\n </div>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_reminder.scss","file":"_reminder.scss","link":"reminder"},{"page":"Pattern Library/Components","name":"Tab navigation","description":"<p> Above table, tab-style navigation</p>\n","markup":{"example":" <div class=\"us-tabs us-tabs--page-nav\">\n <div class=\"us-tabs__inner\">\n <ul class=\"us-tabs__links\">\n <li class=\"us-tabs__links-item us-tabs__links-item--active\"><a href=\"#\">Link here</a></li>\n <li class=\"us-tabs__links-item\"><a>Link here</a></li>\n <li class=\"us-tabs__links-item\"><a>Link here</a></li>\n <li class=\"us-tabs__links-item\"><a>Link here</a></li>\n <li class=\"us-tabs__links-item\"><a>Link here</a></li>\n <li class=\"us-tabs__links-item\"><a>Link here</a></li>\n <li class=\"us-tabs__links-item\"><a>Link here</a></li>\n <li class=\"us-tabs__links-item\"><a>Link here</a></li>\n <li class=\"us-tabs__links-item\"><a>Link here</a></li>\n <li class=\"us-tabs__links-item\"><a>Link here</a></li>\n <li class=\"us-tabs__links-item\"><a>Link here</a></li>\n </ul>\n </div>\n </div>","escaped":" <div class=\"us-tabs us-tabs--page-nav\">\n <div class=\"us-tabs__inner\">\n <ul class=\"us-tabs__links\">\n <li class=\"us-tabs__links-item us-tabs__links-item--active\"><a href=\"#\">Link here</a></li>\n <li class=\"us-tabs__links-item\"><a>Link here</a></li>\n <li class=\"us-tabs__links-item\"><a>Link here</a></li>\n <li class=\"us-tabs__links-item\"><a>Link here</a></li>\n <li class=\"us-tabs__links-item\"><a>Link here</a></li>\n <li class=\"us-tabs__links-item\"><a>Link here</a></li>\n <li class=\"us-tabs__links-item\"><a>Link here</a></li>\n <li class=\"us-tabs__links-item\"><a>Link here</a></li>\n <li class=\"us-tabs__links-item\"><a>Link here</a></li>\n <li class=\"us-tabs__links-item\"><a>Link here</a></li>\n <li class=\"us-tabs__links-item\"><a>Link here</a></li>\n </ul>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_tab-navigation.scss","file":"_tab-navigation.scss","link":"tab_navigation"},{"page":"Pattern Library/Components","name":"Table toolbar","description":"<p> The table toolbar sits above comparison tables and holds search refinement and filtering tools.</p>\n","markup":{"example":" <div class=\"us-table-toolbar\">\n <div class=\"us-table-toolbar__wrapper\">\n <form class='us-calculator'>\n <h2 class='us-table-toolbar__heading'>How much would you like to transfer?</h2>\n <div class='us-input-group us-calculator__input'>\n <div class='us-input-group__box'>£</div>\n <input type='text' class='us-form-input' pattern='[0-9]*' name='amount' id='amount' value='3000' />\n </div>\n <button class='us-btn us-btn--primary'>Update results</button>\n <div class='us-tooltip us-tooltip--right'>\n <div class='us-tooltip__wrapper'>\n <div class='us-tooltip__icon'></div>\n <div class='us-tooltip__note'>\n <div class='us-tooltip__arrow'></div>\n Note that this is illustrative and this figure does not reflect the credit limit you will be offered.\n </div>\n </div>\n </div>\n </form>\n </div>\n <div class=\"us-table-toolbar__wrapper us-table-toolbar__wrapper--right\">\n <div class=\"us-table-toolbar__sort\">\n <h3 class=\"us-table-toolbar__heading\">Sort by:</h3>\n <select class=\"us-form-select name=\"sort\"\">\n <option value=\"popularity\">Popularity</option>\n <option value=\"apr\">Lowest APR</option>\n <option value=\"min-credit-limit\">Minimum credit limit</option>\n <option value=\"max-credit-limit\">Maximum credit limit</option>\n </select>\n </div>\n </div>\n </div>","escaped":" <div class=\"us-table-toolbar\">\n <div class=\"us-table-toolbar__wrapper\">\n <form class='us-calculator'>\n <h2 class='us-table-toolbar__heading'>How much would you like to transfer?</h2>\n <div class='us-input-group us-calculator__input'>\n <div class='us-input-group__box'>£</div>\n <input type='text' class='us-form-input' pattern='[0-9]*' name='amount' id='amount' value='3000' />\n </div>\n <button class='us-btn us-btn--primary'>Update results</button>\n <div class='us-tooltip us-tooltip--right'>\n <div class='us-tooltip__wrapper'>\n <div class='us-tooltip__icon'></div>\n <div class='us-tooltip__note'>\n <div class='us-tooltip__arrow'></div>\n Note that this is illustrative and this figure does not reflect the credit limit you will be offered.\n </div>\n </div>\n </div>\n </form>\n </div>\n <div class=\"us-table-toolbar__wrapper us-table-toolbar__wrapper--right\">\n <div class=\"us-table-toolbar__sort\">\n <h3 class=\"us-table-toolbar__heading\">Sort by:</h3>\n <select class=\"us-form-select name=\"sort\"\">\n <option value=\"popularity\">Popularity</option>\n <option value=\"apr\">Lowest APR</option>\n <option value=\"min-credit-limit\">Minimum credit limit</option>\n <option value=\"max-credit-limit\">Maximum credit limit</option>\n </select>\n </div>\n </div>\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_table-toolbar.scss","file":"_table-toolbar.scss","link":"table_toolbar"},{"page":"Pattern Library/Components","name":"USPs","description":"<p> USPs (Unique Selling Points) are used within tables and on splash pages to highlight offers within a deal, and also to differentiate deals.</p>\n<p> General guidelines; There should only be one USP per deal. Text within USPs should be written in sentence case (not uppercase).</p>\n","state":[{"name":".us-usp--blue","escaped":"us-usp--blue","description":"uSwitch related.","markup":{"example":" <div class='us-usp us-usp--blue'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--blue'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--orange","escaped":"us-usp--orange","description":"Rewards (money/points).","markup":{"example":" <div class='us-usp us-usp--orange'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--orange'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--purple","escaped":"us-usp--purple","description":"Gifts eg. free TV.","markup":{"example":" <div class='us-usp us-usp--purple'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--purple'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--yellow","escaped":"us-usp--yellow","description":"Vouchers.","markup":{"example":" <div class='us-usp us-usp--yellow'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--yellow'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--typecyan","escaped":"us-usp--typecyan","description":"Micro persuasions eg. most popular, half price.","markup":{"example":" <div class='us-usp us-usp--typecyan'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--typecyan'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--green","escaped":"us-usp--green","description":"Renewable and environmentally friendly.","markup":{"example":" <div class='us-usp us-usp--green'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--green'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--navy","escaped":"us-usp--navy","description":"Generic vertical specific USP.","markup":{"example":" <div class='us-usp us-usp--navy'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--navy'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--cyan","escaped":"us-usp--cyan","description":"Generic vertical specific USP.","markup":{"example":" <div class='us-usp us-usp--cyan'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--cyan'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--typegrey","escaped":"us-usp--typegrey","description":"Generic vertical specific USP.","markup":{"example":" <div class='us-usp us-usp--typegrey'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--typegrey'>Annotated USP</div>\n More information about USP goes here\n </div>"}},{"name":".us-usp--red","escaped":"us-usp--red","description":"Generic vertical specific USP.","markup":{"example":" <div class='us-usp us-usp--red'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp us-usp--red'>Annotated USP</div>\n More information about USP goes here\n </div>"}}],"markup":{"example":" <div class='us-usp {$modifiers}'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp {$modifiers}'>Annotated USP</div>\n More information about USP goes here\n </div>","escaped":" <div class='us-usp'>Shortened USP</div>\n <div class='us-usp us-usp--annotated'>\n <div class='us-usp'>Annotated USP</div>\n More information about USP goes here\n </div>"},"path":"vendor/assets/stylesheets/ustyle/components/_usp.scss","file":"_usp.scss","link":"usps"}]},{"name":"Grid","page":"grid.html","template":"styleguide/templates/simple.tpl","section":"pattern-library","content":"<div class=\"styleguide__block\">\n <p>\n Our grid is a 12 column grid, with similar sizes to that of Bootstrap. We also adhere to the same naming standards for device breakpoints.\n </p>\n <ul>\n <li>Default gutter width: <strong>15px either side</strong>.</li>\n <li>Large container width: <strong>1170px</strong>.</li>\n <li>Desktop container width: <strong>970px</strong>.</li>\n <li>Tablet container width: <strong>770px</strong>.</li>\n </ul>\n <ul>\n <li>The parent container is <code>.us-container</code>, you must have this to start building the uSwitch layouts.</li>\n <li><code>.us-grid-row</code> is then used when you are building rows of columns (gives a negative margin to the container so they align correctly).</li>\n <li>All grid class names are prefixed with <code>.us-col-</code>.</li>\n </ul>\n</div>\n<div class=\"styleguide__block\">\n <h2 class=\"styleguide__block-title\">Example</h2>\n <p>Here is an example of a grid which will turn into 100% width columns on mobile.</p>\n <div class=\"grid-example\">\n <div class=\"us-grid-row\">\n <div class=\"col-example us-col-md-2\">.us-col-md-2</div>\n <div class=\"col-example us-col-md-2\">.us-col-md-2</div>\n <div class=\"col-example us-col-md-4\">.us-col-md-4</div>\n <div class=\"col-example us-col-md-4\">.us-col-md-4</div>\n </div>\n <div class=\"us-grid-row\">\n <div class=\"col-example us-col-md-8\">.us-col-md-8</div>\n <div class=\"col-example us-col-md-4\">.us-col-md-4</div>\n </div>\n <div class=\"us-grid-row\">\n <div class=\"col-example us-col-md-6\">.us-col-md-6</div>\n <div class=\"col-example us-col-md-6\">.us-col-md-6</div>\n </div>\n </div>\n <pre><code class=\"html\">\n<div class="us-grid-row">\n <div class="us-col-md-2">.us-col-md-2</div>\n <div class="us-col-md-2">.us-col-md-2</div>\n <div class="us-col-md-4">.us-col-md-4</div>\n <div class="us-col-md-4">.us-col-md-4</div>\n</div>\n<div class="us-grid-row">\n <div class="us-col-md-8">.us-col-md-8</div>\n <div class="us-col-md-4">.us-col-md-4</div>\n</div>\n<div class="us-grid-row">\n <div class="us-col-md-6">.us-col-md-6</div>\n <div class="us-col-md-6">.us-col-md-6</div>\n</div>\n </code></pre>\n</div>\n<div class=\"styleguide__block\">\n <h2 class=\"styleguide__block-title\">Example with mobile columns</h2>\n <div class=\"grid-example\">\n <div class=\"us-grid-row\">\n <div class=\"col-example us-col-xsm-6 us-col-md-2\">.us-col-xsm-6.us-col-md-2</div>\n <div class=\"col-example us-col-xsm-6 us-col-md-2\">.us-col-xsm-6.us-col-md-2</div>\n <div class=\"col-example us-col-sm-6 us-col-md-4\">.us-col-sm-6.us-col-md-4</div>\n <div class=\"col-example us-col-sm-6 us-col-md-4\">.us-col-sm-6.us-col-md-4</div>\n </div>\n </div>\n </div>\n\n","subNav":[]},{"name":"Logo","page":"logo.html","template":"styleguide/templates/simple.tpl","section":"brand","content":"\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <h3 id=\"orientation\">Orientation</h3>\n <p>\n We've made our logo available in vertical and horizontal formats to\n allow for flexibility in various layouts. Choose the format that best\n suits the usage.\n </p>\n </div>\n </div>\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <div class=\"logo__state logo__vertical logo--blue\">\n <svg><use xlink:href=\"#uicon-logo-vertical\"/></svg>\n </div>\n <p>\n Vertical orientation\n </p>\n </div>\n <div class=\"us-col-6\">\n <div class=\"logo__state logo__horizontal logo--blue\">\n <svg><use xlink:href=\"#uicon-logo\"/></svg>\n </div>\n <p>\n Horizontal orientation\n </p>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <h3 id=\"colour\">Colour</h3>\n <p>\n Our logo should only appear in our approved colours. The brand blue logo\n is the preferred version. It can also be displayed on a cyan background.\n </p>\n </div>\n </div>\n\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-4\">\n <div class=\"logo__state logo__vertical logo--blue\">\n <svg><use xlink:href=\"#uicon-logo-vertical\"/></svg>\n </div>\n <p>\n Brand blue is the preferred version of the logo.\n </p>\n </div>\n <div class=\"us-col-4\">\n <div class=\"logo__state logo__vertical logo--white\">\n <svg><use xlink:href=\"#uicon-logo-vertical\"/></svg>\n </div>\n <p>\n Alternatively it can also be used in white on dark backgrounds.\n </p>\n </div>\n <div class=\"us-col-4\">\n <div class=\"logo__state logo__vertical logo--cyan\">\n <svg><use xlink:href=\"#uicon-logo-vertical\"/></svg>\n </div>\n <p>\n It can also be used on a cyan background.\n </p>\n </div>\n </div>\n </div>\n </div>\n\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <p>\n The black and white versions of our logo should only be used when colour\n reproduction is not available. Choose the option that will provide the\n most contrast with the background.\n </p>\n </div>\n </div>\n\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <div class=\"logo__state logo__horizontal logo--bwwhite\">\n <svg><use xlink:href=\"#uicon-logo\"/></svg>\n </div>\n <p>\n The black logo is for use on light backgrounds where colour\n reproduction is not available.\n </p>\n </div>\n <div class=\"us-col-6\">\n <div class=\"logo__state logo__horizontal logo--bwblack\">\n <svg><use xlink:href=\"#uicon-logo\"/></svg>\n </div>\n <p>\n The white logo is for use on dark backgrounds where colour\n reproduction is not available.\n </p>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <h3 id=\"exclusion-zone\">Exclusion Zone</h3>\n <p>\n Always leave plenty of room around the logo. This will enable it to\n feature prominently without clutter.\n </p>\n </div>\n </div>\n\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <div class=\"logo__state logo__vertical logo__spacer--vertical logo--blue\">\n <svg><use xlink:href=\"#uicon-logo-vertical\"/></svg>\n </div>\n </div>\n <br>\n <div class=\"us-col-6\">\n <div class=\"logo__state logo__horizontal logo__spacer--horizontal logo--white\">\n <svg><use xlink:href=\"#uicon-logo\"/></svg>\n </div>\n </div>\n </div>\n <p>\n The 'S' from our wordmark can be used to measure out the exclusion zone.\n </p>\n </div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <h3 id=\"alternate-logo\">Alternate logo for use at smaller sizes</h3>\n <p>\n An alternative version of our logo must be used when it's being displayed\n at smaller sizes. It ensures that the arrowhead, a key element of our\n brand, remains clear and prominent.\n </p>\n </div>\n </div>\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-6\">\n <div class=\"logo__state logo__vertical--alternate logo--blue\">\n <svg><use xlink:href=\"#uicon-logo-vertical-small\"/>\n <div class=\"logo__sizing h98\">98px</div>\n </svg></div>\n <p>\n Use the alternative version of the vertical logo when using at a\n height of 98px or less.\n </p>\n </div>\n <div class=\"us-col-6\">\n <div class=\"logo__state logo__horizontal--alternate logo--white\">\n <svg><use xlink:href=\"#uicon-logo-small\"/></svg>\n <div class=\"logo__sizing h64\">64px</div>\n </div>\n <p>\n Use the alternate version of the horizontal logo when using at a\n height of 64px or less.\n </p>\n </div>\n </div>\n </div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <h3 id=\"minimum-sizes\">Minimum Size</h3>\n <p>To ensure legibility of our logo, it must not be used below the\n minimum size.</p>\n <div class=\"us-col-6\">\n <div class=\"logo__state logo__vertical--alternate-min logo--blue\">\n <svg><use xlink:href=\"#uicon-logo-vertical-small\"/>\n <div class=\"logo__sizing h50\">50px</div>\n </svg></div>\n <p>\n The minimum height that the vertical logo may be used at is 50px.\n </p>\n </div>\n <div class=\"us-col-6\">\n <div class=\"logo__state logo__horizontal--alternate-min logo--white\">\n <svg><use xlink:href=\"#uicon-logo-small\"/></svg>\n <div class=\"logo__sizing h25\">25px</div>\n </div>\n <p>\n The minimum height that the horizontal logo may be used at is 25px.\n </p>\n </div>\n </div>\n </div>\n </div>\n\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <h3 id=\"icon-only\">Icon only</h3>\n <p>\n Our icon and wordmark must always be used together. The only\n exceptions are our app icon, website favicon and awards logos. Do not\n separate the icon and wordmark in any other instances.\n </p>\n <div class=\"logo__icon-standalone us-margin-bottom\">\n <svg role=\"image\" class=\"us-icon--large us-icon--white us-icon--notext\">\n <use xlink:href=\"/images/icons.svg#icon-uswitch\"/>\n </svg>\n </div>\n <p>\n The icon may only be used separately from the wordmark in approved\n situations, such as our app icon.\n </p>\n\n <p><strong>Do not separate the elements in any other situations.</strong></p>\n </div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <h3 id=\"usage-rules\">Usage rules</h3>\n <p>Please make sure you’re not tempted to do any of the following to the logo:</p>\n <ul>\n <li>Change elements of it</li>\n <li>Outline or put a keyline around it</li>\n <li>Use a different blue</li>\n <li>Use a gradient or tint</li>\n <li>Rotate the logo</li>\n </ul>\n </div>\n </div>\n</div>\n\n<div class=\"us-content-group\">\n <div class=\"us-grid-row\">\n <div class=\"us-col-12\">\n <h3 id=\"logo-downloads\">Logo Downloads</h3>\n <p>\n Here you can download the standard and smaller versions of the uSwitch\n logo. Each .zip file comes with .eps, .svg and .svg versions of the logo.\n </p>\n <ul>\n <li><a href=\"https://s3-eu-west-1.amazonaws.com/uswitch-assets-eu/ustyle-assets/logo/Standard+logo+assets.zip\">Standard Logo</a></li>\n <li><a href=\"https://s3-eu-west-1.amazonaws.com/uswitch-assets-eu/ustyle-assets/logo/Small+logo+assets.zip\">Logo for smaller sizes</a></li>\n </ul>\n </div>\n </div>\n</div>\n","subNav":[{"name":"Orientation","link":"#orientation"},{"name":"Colour","link":"#colour"},{"name":"Exclusion zone","link":"#exclusion-zone"},{"name":"Alternate logo (small)","link":"#alternate-logo"},{"name":"Minimum sizes","link":"#minimum-sizes"},{"name":"Icon only","link":"#icon-only"},{"name":"Usage rules","link":"#usage-rules"},{"name":"Logo Downloads","link":"#logo-downloads"}]},{"name":"Microcopy","page":"microcopy.html","template":"styleguide/templates/simple.tpl","section":"language","content":"<h2 id=\"microcopy\">Microcopy</h2>\n<p><em>Anything shorter than a paragraph is classified as microcopy. Think anything from tooltips to button text.</em> </p>\n<p><span id=\"Help text/tool tips\"></span>\n<strong>Help text/tool tips</strong> </p>\n<p><img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/tooltip.png\"></p>\n<p>Tooltips are an interruption, use them sparingly (or not at all). </p>\n<p>Keep the tooltip text concise. Tooltips are perfect for short sentences and sentence fragments; large blocks of text can be overwhelming and should be avoided.</p>\n<p>Tooltip text must be informative. Don't make it obvious or just repeat what is already on the screen. Because tooltip text isn't always visible, it should be supplemental info that users don't have to read. </p>\n<p><span id=\"Badge/label/USP\"></span>\n<strong>Badge/label/USP</strong></p>\n<p><img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/badge-label-usp.png\"></p>\n<p>Very short text (1-4 words max) to distinguish products from one another and highlight features of a product that are otherwise not included on the results table. Annotated versions are paired with a descriptive line.</p>\n<p>Should be written in sentence case, not upper case. The label should be 1-4 words, while descriptive lines should be as concise as possible without wrapping on any device.</p>\n<p>Must be quantifiable facts about a product, deal or plan be honest and as descriptive as possible. No exclamation points.</p>\n<p><span id=\"Product info\"></span>\n<strong>Product info</strong></p>\n<p>Summary of product features relevant to users. Must be concise, relevant and quantifiable facts about a product, deal or plan – be honest and as descriptive as possible</p>\n<p>Be consistent in the way and the order information is presented and the types of information shown. Second person is ok (e.g. “More people in your region switched to this plan than any other”)</p>\n<p><span id=\"Small print\"></span>\n<strong>Small print</strong></p>\n<p><img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/tsandcs.png\"></p>\n<p>Small print reassures users and is vital for transparency. </p>\n<p>As long as any compliance rules are taken into account, you should treat this copy like any other, and have a responsibility to make this text as comprehensible as possible to a user</p>\n<p><span id=\"Caveats\"></span>\n<strong>Caveats</strong> </p>\n<p><img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/caveat.png\"></p>\n<p>Small print text to back up any absolute claims (i.e. savings figures), denoted with an asterisk, followed by an anchor and double-anchor for further caveats. The caveat must appear on the same page as the symbol. </p>\n<ul>\n<li>For the first caveat on a page use *</li>\n<li>For the second use †</li>\n<li>And for the third, use ‡</li>\n</ul>\n\n<p>Examples of when caveats are required...</p>\n<ul>\n <li>Get the best iPhone deal with uSwitch*</li>\n <li>Get the cheapest iPhone deal with uSwitch†</li>\n</ul>\n\n<p>And when they're not required...</p>\n<ul>\n <li>Find a better energy deal</li>\n <li>How to find the best iphone deal</li>\n</ul>\n\n<p><span id=\"Button text\"></span>\n<strong>Button text</strong></p>\n<p>Very short (1-3 words) actionable description of what happens when the button clicked, namely, what's on the next page. </p>\n<p>Button text should “keep its promise” and properly set up expectations of what comes next</p>\n<p>It should be concise (1-3 words), should not contain exclamation points, should feel actionable (e.g. “buy” “switch” “get” “apply” “compare”), and can make use of urgency (e.g. “today” “now”)</p>\n<p>First person can be used (e.g. “Tell me more”).</p>\n<p><span id=\"CTAs\"></span>\n<strong>CTAs</strong> </p>\n<div class=\"us-grid-row\">\n <div class=\"us-col-md-10\">\n <img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/CTAs.png\">\n </div>\n</div>\n\n<p>An introduction to button text, usually one to two lines, that provides a reason to click the accompanying button</p>\n<p>This is only used on editorial pages. Sentence case should be used, no exclamation points, and the text must relate to the button and its action. A CTA should not end with punctuation (unlike a standard paragraph).</p>\n<p>Should not be more than two lines, usually made up of a title and copy.</p>\n<p><span id=\"Form text, form labels\"></span>\n<strong>Form text, form labels</strong> </p>\n<p>Description of what information is required from the user. Always aim for clarity and be consistent – if using questions ('Where do you live?') or statements ('Address')</p>\n<p>Second person is acceptable, and use tool tips to explain any terms that may be unfamiliar</p>\n<p>Form label naming conventions:</p>\n<ul>\n<li>First name </li>\n<li>Last name</li>\n<li>Date of birth </li>\n<li>Email </li>\n<li>Password</li>\n<li>Postcode </li>\n<li>Address </li>\n<li>Main account holder’s name</li>\n<li>Driver’s name</li>\n<li>Employment status</li>\n<li>Annual income (before tax)</li>\n</ul>\n<p><span id=\"Placeholder text for fields\"></span>\n<strong>Placeholder text for fields</strong> </p>\n<p>Pre-populated text in a field that is supposed to serve as an example or a necessary instruction. </p>\n<p>We only use placeholder text for instructions, as a last resort, when we have no space for labels, or for email/password. </p>\n<p>Symbols can be used (e.g. £ ) and we use sentence case. Our standard placeholder text is:</p>\n<ul>\n<li>Please select</li>\n<li>Enter postcode</li>\n<li>DD/MM/YYYY</li>\n<li>Email address</li>\n<li>Password</li>\n</ul>\n<p><span id=\"Error text\"></span>\n<strong>Error text</strong></p>\n<p><img alt=\"image\" class=\"us-img--full trailered\" src=\"/images/error-texts.png\"></p>\n<p>Text that is triggered by a user trying to move forward without providing requested info.</p>\n<p>Error text should be as specific and as useful/helpful as possible, but should also be short; sentence fragments are acceptable.</p>\n<p>Never be alarming, technical, or condescending (in life, but especially when it comes to error text)</p>\n<p><span id=\"H1\"></span>\n<strong>H1</strong> </p>\n<p>Short description of the page, at a glance. </p>\n<p>This text should be genuinely helpful, in sentence case, and should be kept as short as possible.</p>\n<p><span id=\"H1\"></span>\n<strong>Introductory text</strong></p>\n<p>A short (two lines at most) introduction that follows on from the H1. Describes the following content and encourages the user to read on, and provides as much relevant information as possible. </p>\n<p>This text should be genuinely helpful, sentence case, and should tell the user whether they are in the right place. </p>\n","subNav":[{"name":"Help text/tool tips","link":"#Help text/tool tips"},{"name":"Badge/label/USP","link":"#Badge/label/USP"},{"name":"Product info","link":"#Product info"},{"name":"Small print","link":"#Small print"},{"name":"Caveats","link":"#Caveats"},{"name":"Button text","link":"#Button text"},{"name":"CTAs","link":"#CTAs"},{"name":"Form text, form labels","link":"#Form text, form labels"},{"name":"Placeholder text for fields","link":"#Placeholder text for fields"},{"name":"Error text","link":"#Error text"}]},{"name":"Accessibility testing","page":"accessibility-testing.html","template":"styleguide/templates/simple.tpl","section":"design","content":"<p>Everyone experiences disability at some point in their life, whether permanent\n(blindness, deafness, motor impairment) or temporary (fatigue, migraines, a broken arm).\nThese things may make the things we build difficult to use.</p>\n<p>Below, you'll find recommended tools and processes that will help make it easier\nfor folk to use the things we build without frustration.</p>\n<p>The web is for everyone, and it is our job to make sure that everyone can access it.</p>\n<h2 id=\"recommended-free-tools\">Recommended (Free) Tools</h2>\n<ul>\n<li><a href=\"https://github.com/pa11y/dashboard\">Pa11y Dashboard</a></li>\n<li><a href=\"https://chrome.google.com/webstore/detail/axe/lhdoppojpmngadmnindnejefpokejbdd\">aXe Chrome Extension</a></li>\n<li><a href=\"https://khan.github.io/tota11y/\">tota11y</a></li>\n<li><a href=\"https://github.com/GoogleChrome/lighthouse\">Lighthouse</a></li>\n<li><a href=\"https://www.npmjs.com/package/a11y\">a11y</a></li>\n</ul>\n<h2 id=\"how-to-test\">How to test</h2>\n<h3 id=\"using-automated-tools\">Using automated tools</h3>\n<p>There are a lot of options, both free and paid for, to automatically test the\naccessibility of our products. From the most basic like <a href=\"https://khan.github.io/tota11y/\">tota11y</a> and <a href=\"https://www.npmjs.com/package/a11y\">a11y</a>\n, to\nthe more involved like Chrome’s Accessibility Audit tool and aXe. These tools can\nprovide a great overview of where we might be going wrong, and even suggest ways\nto improve.</p>\n<p>But with great power, comes great responsibility. We cannot rely on automated tool\nto help us find and fix all the issues.\n<a href=\"https://accessibility.blog.gov.uk/2017/02/24/what-we-found-when-we-tested-tools-on-the-worlds-least-accessible-webpage\">GDS discovered</a>\nthat even a tool like Chrome's Accessibility auditor only surface 17% of accessibility issues.</p>\n<p>Just because a tool says something is broken, we should still manually test to\nprove it is. These automated tools provide solutions, but they are neither the\nonly or the most suitable solution for our users.</p>\n<h3 id=\"manual-testing\">Manual Testing</h3>\n<p>Nothing really beats manual testing. The more you do this, the easier you’ll find\nit to spot potential accessibility errors.</p>\n<h4 id=\"keyboard-only\">Keyboard Only</h4>\n<ul>\n<li>Can the page be navigated just by using a keyboard?</li>\n<li>Can you TAB to all interactive elements (links, buttons, form inputs) and interact\nwith such elements using traditional keys (ESC, Arrows)?</li>\n<li>When TABbing, do you lose track of where the keyboard is focused, suggesting that\nthere are hidden elements on the page you shouldn’t be able to navigate to?</li>\n</ul>\n<h4 id=\"screen-readers\">Screen Readers</h4>\n<p>Use a screen reader like <a href=\"https://www.nvaccess.org/\">NVDA</a>,\n<a href=\"http://www.freedomscientific.com/Products/Blindness/Jaws\">JAWS</a>, or\n<a href=\"https://www.apple.com/accessibility/mac/vision/\">VoiceOver</a> to go through your\nweb page.</p>\n<ul>\n<li>Can you access and understand all of the content someone not using a screen reader can?</li>\n<li>Does the hierarchy of the content make sense?</li>\n<li>Can one easily navigate to different landmarks on the page\n(e.g header, navigation, main content, supplementary content like an aside or footer)?</li>\n</ul>\n<p>Note that you shouldn’t sink time into becoming an expert with a screen reader.\nUnless you use a screen reader every day and have a legitimate need to do so, you\nare unlikely to ever use a screen reader how they should be used.</p>\n<p>It's important to note here that you cannot truly say your product is accessible\nuntil you've tested them with folk who benefit from this work.</p>\n<hr>\n<p>For more about how we can make uSwitch and the world more accessible, check out\nour blog posts on <a href=\"https://labs.uswitch.com/four-accessibility-wins/\">quick wins</a>\nand <a href=\"https://labs.uswitch.com/how-to-do-an-accessibility-audit/\">how to perform an accessibility audit</a>.</p>\n<p>Check out our tips on <a href=\"../design/validating-designs.html\">usability testing</a>, too.</p>\n","subNav":[]},{"name":"Stats","page":"stats.html","section":"pattern-library","content":{"report":[{"stylesheets":1,"size":67494,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.18.1"},{"stylesheets":1,"size":67494,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.18.0"},{"stylesheets":1,"size":67613,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.17.0"},{"stylesheets":1,"size":67613,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.16.4"},{"stylesheets":1,"size":67613,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.16.2"},{"stylesheets":1,"size":67613,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.16.1"},{"stylesheets":1,"size":67613,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.16.0"},{"stylesheets":1,"size":67491,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.15.3"},{"stylesheets":1,"size":68346,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.15.1"},{"stylesheets":1,"size":68346,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.15.0"},{"stylesheets":1,"size":67604,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.14.11"},{"stylesheets":1,"size":68341,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.14.10"},{"stylesheets":1,"size":67639,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.14.9"},{"stylesheets":1,"size":68353,"rules":714,"selectors":1155,"simplicity":0.6181818181818182,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.14.8"},{"stylesheets":1,"size":68321,"rules":713,"selectors":1154,"simplicity":0.6178509532062392,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.14.7"},{"stylesheets":1,"size":68321,"rules":713,"selectors":1154,"simplicity":0.6178509532062392,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.14.6"},{"stylesheets":1,"size":68183,"rules":712,"selectors":1153,"simplicity":0.6175195143104943,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.14.4"},{"stylesheets":1,"size":67990,"rules":712,"selectors":1150,"simplicity":0.6191304347826087,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.14.3"},{"stylesheets":1,"size":67867,"rules":712,"selectors":1148,"simplicity":0.6202090592334495,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.14.1"},{"stylesheets":1,"size":68161,"rules":712,"selectors":1148,"simplicity":0.6202090592334495,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.14.0"},{"stylesheets":1,"size":67661,"rules":712,"selectors":1148,"simplicity":0.6202090592334495,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.13.0"},{"stylesheets":1,"size":70420,"rules":733,"selectors":1171,"simplicity":0.6259607173356105,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":93,"version":"1.12.6"},{"stylesheets":1,"size":70420,"rules":733,"selectors":1171,"simplicity":0.6259607173356105,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":93,"version":"1.12.5"},{"stylesheets":1,"size":70465,"rules":733,"selectors":1171,"simplicity":0.6259607173356105,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":93,"version":"1.12.4"},{"stylesheets":1,"size":70465,"rules":733,"selectors":1171,"simplicity":0.6259607173356105,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":93,"version":"1.12.3"},{"stylesheets":1,"size":70420,"rules":733,"selectors":1171,"simplicity":0.6259607173356105,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":93,"version":"1.12.2"},{"stylesheets":1,"size":70479,"rules":733,"selectors":1171,"simplicity":0.6259607173356105,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":93,"version":"1.12.1"},{"stylesheets":1,"size":70448,"rules":732,"selectors":1170,"simplicity":0.6256410256410256,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":93,"version":"1.12.0"},{"stylesheets":1,"size":70278,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.11.2"},{"stylesheets":1,"size":70214,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.11.1"},{"stylesheets":1,"size":70273,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.11.0"},{"stylesheets":1,"size":70255,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.9.0"},{"stylesheets":1,"size":70209,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.8.7"},{"stylesheets":1,"size":70255,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.8.6"},{"stylesheets":1,"size":70209,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.8.5"},{"stylesheets":1,"size":70209,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.8.4"},{"stylesheets":1,"size":70255,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.8.3"},{"stylesheets":1,"size":70255,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":0,"mediaQueries":91,"version":"1.8.2"},{"stylesheets":1,"size":69994,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.8.1"},{"stylesheets":1,"size":70654,"rules":705,"selectors":1143,"simplicity":0.6167979002624672,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.8.0"},{"stylesheets":1,"size":79441,"rules":801,"selectors":1268,"simplicity":0.6317034700315457,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.7.1"},{"stylesheets":1,"size":79441,"rules":801,"selectors":1268,"simplicity":0.6317034700315457,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.7.0"},{"stylesheets":1,"size":79368,"rules":801,"selectors":1268,"simplicity":0.6317034700315457,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.6.1"},{"stylesheets":1,"size":79369,"rules":801,"selectors":1268,"simplicity":0.6317034700315457,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.6.0"},{"stylesheets":1,"size":79369,"rules":801,"selectors":1268,"simplicity":0.6317034700315457,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.5.8"},{"stylesheets":1,"size":79367,"rules":801,"selectors":1268,"simplicity":0.6317034700315457,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.5.7"},{"stylesheets":1,"size":79367,"rules":801,"selectors":1268,"simplicity":0.6317034700315457,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.5.5"},{"stylesheets":1,"size":79333,"rules":800,"selectors":1268,"simplicity":0.6309148264984227,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.5.4"},{"stylesheets":1,"size":79190,"rules":800,"selectors":1268,"simplicity":0.6309148264984227,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.5.3"},{"stylesheets":1,"size":79190,"rules":800,"selectors":1268,"simplicity":0.6309148264984227,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.5.2"},{"stylesheets":1,"size":79190,"rules":800,"selectors":1268,"simplicity":0.6309148264984227,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.5.1"},{"stylesheets":1,"size":79190,"rules":800,"selectors":1268,"simplicity":0.6309148264984227,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.5.0"},{"stylesheets":1,"size":79333,"rules":800,"selectors":1268,"simplicity":0.6309148264984227,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.4.1"},{"stylesheets":1,"size":79241,"rules":799,"selectors":1267,"simplicity":0.6306235201262825,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.4.0"},{"stylesheets":1,"size":79132,"rules":799,"selectors":1267,"simplicity":0.6306235201262825,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.19"},{"stylesheets":1,"size":79132,"rules":799,"selectors":1267,"simplicity":0.6306235201262825,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.18"},{"stylesheets":1,"size":79109,"rules":799,"selectors":1268,"simplicity":0.6301261829652997,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.17"},{"stylesheets":1,"size":79043,"rules":799,"selectors":1268,"simplicity":0.6301261829652997,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.16"},{"stylesheets":1,"size":78577,"rules":788,"selectors":1257,"simplicity":0.6268894192521878,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.15"},{"stylesheets":1,"size":77378,"rules":784,"selectors":1236,"simplicity":0.6343042071197411,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.14"},{"stylesheets":1,"size":77230,"rules":783,"selectors":1235,"simplicity":0.6340080971659919,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.13"},{"stylesheets":1,"size":77228,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.12"},{"stylesheets":1,"size":77228,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.11"},{"stylesheets":1,"size":77228,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.10"},{"stylesheets":1,"size":77226,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.9"},{"stylesheets":1,"size":77122,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.8"},{"stylesheets":1,"size":77211,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.7"},{"stylesheets":1,"size":77211,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.6"},{"stylesheets":1,"size":77211,"rules":781,"selectors":1238,"simplicity":0.6308562197092084,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.5"},{"stylesheets":1,"size":77585,"rules":782,"selectors":1239,"simplicity":0.6311541565778854,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.4"},{"stylesheets":1,"size":77585,"rules":782,"selectors":1239,"simplicity":0.6311541565778854,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.3"},{"stylesheets":1,"size":77585,"rules":782,"selectors":1239,"simplicity":0.6311541565778854,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.3.2"},{"stylesheets":1,"size":76931,"rules":793,"selectors":1218,"simplicity":0.6510673234811166,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":92,"version":"1.3.1"},{"stylesheets":1,"size":76905,"rules":793,"selectors":1217,"simplicity":0.6516023007395234,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":92,"version":"1.3.0"},{"stylesheets":1,"size":75981,"rules":779,"selectors":1201,"simplicity":0.6486261448792673,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.2.2"},{"stylesheets":1,"size":75959,"rules":779,"selectors":1201,"simplicity":0.6486261448792673,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.2.1"},{"stylesheets":1,"size":71768,"rules":784,"selectors":1119,"simplicity":0.7006255585344057,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":90,"version":"1.2.0"},{"stylesheets":1,"size":71982,"rules":786,"selectors":1125,"simplicity":0.6986666666666667,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.1.3"},{"stylesheets":1,"size":71982,"rules":786,"selectors":1125,"simplicity":0.6986666666666667,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.1.2"},{"stylesheets":1,"size":71982,"rules":786,"selectors":1125,"simplicity":0.6986666666666667,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.1.1"},{"stylesheets":1,"size":71982,"rules":786,"selectors":1125,"simplicity":0.6986666666666667,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":4,"mediaQueries":91,"version":"1.1.0"},{"stylesheets":1,"size":68662,"rules":713,"selectors":1006,"simplicity":0.7087475149105368,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":95,"version":"1.0.6"},{"stylesheets":1,"size":68662,"rules":713,"selectors":1006,"simplicity":0.7087475149105368,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":95,"version":"1.0.5"},{"stylesheets":1,"size":69077,"rules":716,"selectors":1009,"simplicity":0.709613478691774,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"1.0.4"},{"stylesheets":1,"size":69806,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"1.0.3"},{"stylesheets":1,"size":69806,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"1.0.2"},{"stylesheets":1,"size":69810,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"1.0.1"},{"stylesheets":1,"size":69755,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"1.0.0"},{"stylesheets":1,"size":69757,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"0.20.0"},{"stylesheets":1,"size":69757,"rules":722,"selectors":1016,"simplicity":0.7106299212598425,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"0.19.1"},{"stylesheets":1,"size":69684,"rules":721,"selectors":1016,"simplicity":0.7096456692913385,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":96,"version":"0.19.0"},{"stylesheets":1,"size":69240,"rules":720,"selectors":1018,"simplicity":0.7072691552062869,"idSelectors":0,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":99,"version":"0.18.2"},{"stylesheets":1,"size":70447,"rules":731,"selectors":1035,"simplicity":0.706280193236715,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":104,"version":"0.17.2"},{"stylesheets":1,"size":70451,"rules":731,"selectors":1035,"simplicity":0.706280193236715,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":104,"version":"0.17.1"},{"stylesheets":1,"size":70461,"rules":731,"selectors":1035,"simplicity":0.706280193236715,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":6,"mediaQueries":104,"version":"0.17.0"},{"stylesheets":1,"size":73656,"rules":711,"selectors":1018,"simplicity":0.6984282907662083,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":98,"version":"0.16.0"},{"stylesheets":1,"size":66536,"rules":639,"selectors":917,"simplicity":0.6968375136314068,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.15.2"},{"stylesheets":1,"size":66200,"rules":639,"selectors":917,"simplicity":0.6968375136314068,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.15.1"},{"stylesheets":1,"size":66536,"rules":639,"selectors":917,"simplicity":0.6968375136314068,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.15.0"},{"stylesheets":1,"size":67418,"rules":637,"selectors":912,"simplicity":0.6984649122807017,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.14.4"},{"stylesheets":1,"size":67445,"rules":637,"selectors":912,"simplicity":0.6984649122807017,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.14.3"},{"stylesheets":1,"size":67445,"rules":637,"selectors":912,"simplicity":0.6984649122807017,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.14.2"},{"stylesheets":1,"size":67406,"rules":637,"selectors":912,"simplicity":0.6984649122807017,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.14.1"},{"stylesheets":1,"size":67406,"rules":637,"selectors":912,"simplicity":0.6984649122807017,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":17,"mediaQueries":87,"version":"0.14.0"},{"stylesheets":1,"size":88578,"rules":883,"selectors":1256,"simplicity":0.7030254777070064,"idSelectors":47,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":25,"mediaQueries":122,"version":"0.13.0"},{"stylesheets":1,"size":88440,"rules":870,"selectors":1243,"simplicity":0.6999195494770716,"idSelectors":47,"universalSelectors":3,"javascriptSpecificSelectors":0,"importantKeywords":25,"mediaQueries":122,"version":"0.12.0"},{"stylesheets":1,"size":59825,"rules":511,"selectors":808,"simplicity":0.6324257425742574,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":18,"mediaQueries":50,"version":"0.11.0"},{"stylesheets":1,"size":54633,"rules":494,"selectors":748,"simplicity":0.660427807486631,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":20,"mediaQueries":44,"version":"0.10.0"},{"stylesheets":1,"size":54633,"rules":494,"selectors":748,"simplicity":0.660427807486631,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":20,"mediaQueries":44,"version":"0.9.21"},{"stylesheets":1,"size":54570,"rules":493,"selectors":747,"simplicity":0.6599732262382865,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":20,"mediaQueries":44,"version":"0.9.20"},{"stylesheets":1,"size":54718,"rules":493,"selectors":747,"simplicity":0.6599732262382865,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":20,"mediaQueries":44,"version":"0.9.19"},{"stylesheets":1,"size":51858,"rules":469,"selectors":703,"simplicity":0.6671408250355618,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":18,"mediaQueries":44,"version":"0.9.18"},{"stylesheets":1,"size":51858,"rules":469,"selectors":703,"simplicity":0.6671408250355618,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":18,"mediaQueries":44,"version":"0.9.17"},{"stylesheets":1,"size":51259,"rules":463,"selectors":687,"simplicity":0.6739446870451238,"idSelectors":0,"universalSelectors":1,"javascriptSpecificSelectors":0,"importantKeywords":14,"mediaQueries":43,"version":"0.9.15"},{"stylesheets":1,"size":53483,"rules":464,"selectors":676,"simplicity":0.6863905325443787,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":14,"mediaQueries":43,"version":"0.9.13"},{"stylesheets":1,"size":53483,"rules":464,"selectors":676,"simplicity":0.6863905325443787,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":14,"mediaQueries":43,"version":"0.9.12"},{"stylesheets":1,"size":47186,"rules":383,"selectors":588,"simplicity":0.6513605442176871,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":14,"mediaQueries":41,"version":"0.9.11"},{"stylesheets":1,"size":47184,"rules":383,"selectors":588,"simplicity":0.6513605442176871,"idSelectors":0,"universalSelectors":2,"javascriptSpecificSelectors":0,"importantKeywords":14,"mediaQueries":41,"version":"0.9.10"}]},"template":"styleguide/templates/stats.tpl"}],"navigation":["brand","pattern-library","design","language"],"project":{"name":"ustyle","version":"1.19.2","description":"A living styleguide and pattern library by uSwitch.","keywords":["css","sass","scss","js","javascript","front-end","styleguide","uswitch","ustyle"],"homepage":"http://ustyle.guide","bugs":{"url":"https://github.com/uswitch/ustyle/issues"},"license":"Apache-2.0","author":{"name":"uSwitch Limited","email":"frontend@uswitch.com"},"main":"index.js","files":["dist","vendor/assets/stylesheets","vendor/assets/images/forms","vendor/assets/images/icons","index.js"],"repository":"uswitch/ustyle","engines":{"npm":"^5.4.2"},"scripts":{"start":"grunt","build":"grunt build","publish":"grunt publish","depcheck":"depcheck --specials=grunt --ignores=depcheck,grunt-*"},"devDependencies":{"async":"^0.9.0","autoprefixer":"^6.5.0","browser-sync":"^1.8.2","cheerio":"^0.20.0","depcheck":"^0.6.7","dss":"^1.0.4","gray-matter":"^2.0.0","grunt":"^0.4.5","grunt-build-control":"^0.3.0","grunt-cli":"^1.2.0","grunt-contrib-concat":"^0.5.0","grunt-contrib-copy":"^0.8.0","grunt-contrib-sass":"^0.9.2","grunt-contrib-uglify":"^0.9.2","grunt-contrib-watch":"^0.6.1","grunt-env":"^0.4.2","grunt-newer":"^1.1.0","grunt-postcss":"^0.8.0","grunt-sassdoc":"^2.0.0","grunt-scss-lint":"~0.3.4","grunt-shell":"^1.1.1","grunt-standard":"^3.1.0","grunt-svgmin":"^2.0.0","grunt-svgstore":"^1.0.0","grunt-version":"^1.0.0","handlebars":"^4.0.11","load-grunt-tasks":"~3.1.0","lodash":"^2.4.1","marked":"^0.3.9","node-sass":"^4.5.3","semver":"^4.3.3","simple-git":"^1.3.0","stylestats":"^4.2.2","underscore.string":"^3.0.2"},"browserslist":["> 1%","last 5 versions","Firefox ESR","IE 10","not Explorer < 10"],"dependencies":{"grunt-contrib-clean":"^1.1.0"}}}
|
data/dist/ustyle.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var slice=[].slice,hasProp={}.hasOwnProperty;null==this.Utils&&(this.Utils={modules:[]});var addClass=function(a,b){return removeClass(a,b),a.className+=" "+b+" "},removeClass=function(a,b){var c=new RegExp("(\\s|^)"+b+"(\\s|$)","gi");return a.className=a.className.replace(c,"")},hasClass=function(a,b){return new RegExp("(^| )"+b+"( |$)","gi").test(a.className)},merge=function(){var a,b,c,d,e=arguments[0],f=2<=arguments.length?slice.call(arguments,1):[];for(b=0,c=f.length;b<c;b++){a=f[b];for(d in a)hasProp.call(a,d)&&(e[d]=a[d])}return e},setOptions=function(a,b){return merge({},b,a)},deleteUndefined=function(a){var b,c,d=[];for(b in a)c=a[b],null===c||void 0===c?d.push(delete a[b]):d.push(void 0);return d},transformKey=function(){var a,b,c,d=document.createElement("div"),e=["transform","webkitTransform","OTransform","MozTransform","msTransform"];for(a=0,c=e.length;a<c;a++)if(b=e[a],void 0!==d.style[b])return b}(),requestAnimationFrame=function(a){var b,c,d,e=["ms","moz","webkit","o"];for(b=0,c=e.length;b<c&&(d=e[b],!a.requestAnimationFrame);b++)a.requestAnimationFrame=a[d+"RequestAnimationFrame"];return a.requestAnimationFrame||(a.requestAnimationFrame=function(a){return setTimeout(a,1e3/60)})}(window),forEach=function(a,b,c){for(var d=a.length-1;d>=0;d--)b.call(c,d,a[d])};this.Utils={addClass:addClass,removeClass:removeClass,hasClass:hasClass,merge:merge,setOptions:setOptions,deleteUndefined:deleteUndefined,transformKey:transformKey,requestAnimationFrame:requestAnimationFrame,forEach:forEach},window.Backdrop=function(){function a(){null==(d=document.querySelector(".us-backdrop"))&&(d=b())}var b,c=0,d=null;return a.prototype.element=d,b=function(){return d=document.createElement("div"),Utils.addClass(d,"us-backdrop"),document.body.appendChild(d)},a.prototype.retain=function(){var a;if(1===++c)return Utils.addClass(d,"us-backdrop--visible"),a=function(){if(c>=1)return Utils.addClass(d,"us-backdrop--active")},Utils.requestAnimationFrame.call(window,a)},a.prototype.release=function(){var a;return 1===c&&(Utils.removeClass(d,"us-backdrop--active"),a=function(){return setTimeout(function(){if(0===c)return Utils.removeClass(d,"us-backdrop--visible")},300)},Utils.requestAnimationFrame.call(window,a)),c=Math.max(0,c-1)},a}(),window.Overlay=function(a){function b(a){if(this.overlay=(this.options=f(a,h)).overlay,this.overlay instanceof jQuery&&(this.overlay=document.querySelector(this.overlay.selector)),this.options.openButton instanceof jQuery&&(this.options.openButton=document.querySelector(this.options.openButton.selector)),null==this.overlay||"undefined"==typeof Backdrop||null===Backdrop)throw new Error("There's no overlay or you haven't included Backdrop");this.backdrop=new Backdrop,this.addEventListeners()}var c=a.addClass,d=a.hasClass,e=a.removeClass,f=a.setOptions,g=a.requestAnimationFrame,h={bodyActiveClass:"us-overlay--open",activeClass:"us-overlay-parent--active",visibleClass:"us-overlay-parent--visible",overlay:document.querySelector(".us-overlay-parent"),openButton:".js-open-overlay",closeButton:".js-close-overlay",historyStatus:"#seedeal",history:!1,preventDefault:!0,animationSpeed:300};return b.prototype.addEventListeners=function(){var a=new CustomEvent("click.open-overlay"),b=new CustomEvent("click.close-overlay"),c="string"==typeof this.options.openButton?document.querySelector(this.options.openButton):this.options.openButton,d=function(b){return function(d){return b.options.preventDefault&&d.preventDefault(),c.dispatchEvent(a),b.show(d)}}(this);c&&c.addEventListener("click",d);var e=function(a){return function(c){for(var d=[],e=a.overlay.querySelectorAll(a.options.closeButton),f=[a.overlay].concat(Array.prototype.slice.call(e)),g=f.length-1;g>=0;g--){var h=f[g];if(c.target===h){a.options.preventDefault&&c.preventDefault(),a.hide(c);break}d.push(void 0)}return a.overlay.dispatchEvent(b),d}}(this);if(this.overlay.addEventListener("click",e),this.hasHistory())return window.onpopstate=function(a){return function(b){if(a.isOpen())return a.hide(b)}}(this)},b.prototype.show=function(a){var b,d=this;if(c(document.body,this.options.bodyActiveClass),this.backdrop.retain(),c(this.overlay,this.options.visibleClass),b=function(){return c(d.overlay,d.options.activeClass),setTimeout(function(){var b;return"function"==typeof(b=d.options).onOpen?b.onOpen(a):void 0},d.options.animationSpeed)},g.call(window,b),this.hasHistory())return history.pushState("open",window.document.title,this.options.historyStatus)},b.prototype.hide=function(a){var b,c=this;if(e(document.body,this.options.bodyActiveClass),this.backdrop.release(),b=function(){return e(c.overlay,c.options.activeClass),setTimeout(function(){var b;return e(c.overlay,c.options.visibleClass),"function"==typeof(b=c.options).onClose?b.onClose(a):void 0},c.options.animationSpeed)},g.call(window,b),this.hasHistory()&&"open"===history.state)return history.back()},b.prototype.isOpen=function(){return d(this.overlay,this.options.activeClass)},b.prototype.hasHistory=function(){return this.options.history&&window.history&&window.history.pushState},b}(this.Utils),window.Tabs=function(a){function b(a){var b=this.options=f(a,this.defaults),c=b.tabContainer,d=b.tabLinks;if(this.activeTabEvent=new CustomEvent("ustyle.tab.active"),this.tabs=document.querySelectorAll(c+" "+d),this.tabs.length){this.filter=this.tabs.item(0).getAttribute("data-target")?"data-target":"href",this.init();var e=function(a){return function(b){var c=b.currentTarget;return a.isAccordion()&&a.options.collapsible&&a.isActive(c)?(a.collapse(c),a.hashClear()):(a.navigateTo(c),a.scrollToTab(c),a.hashChange(c)),b.preventDefault()}}(this);g(this.tabs,function(a,b){b.addEventListener("click",e)})}}var c=a.addClass,d=a.hasClass,e=a.removeClass,f=a.setOptions,g=a.forEach;b.prototype.defaults={tabContainer:".us-tabs",tabLinks:".us-tabs-nav-mainlink",tabNav:".us-tabs-nav",changeUrls:!0,activeClass:"active",collapsible:!1,autoScroll:!0},b.prototype.init=function(){var a=this.activeTab(),b=this.tabFromHash();return b?this.navigateTo(b):a?this.navigateTo(a):this.options.collapsible&&this.isAccordion()?void 0:this.navigateTo(this.tabs.item(0))},b.prototype.hashChange=function(a){if(this.options.changeUrls)return window.location.replace("#!"+h(a).replace(/#/,""))},b.prototype.hashClear=function(){if(this.options.changeUrls){var a=window.location.pathname+window.location.search;return"function"==typeof history.replaceState?history.replaceState("",document.title,a):void 0}},b.prototype.navigateTo=function(a){var b=h(a),d=document.querySelector(b),f=this.options.activeClass,i=this.filter;return g(this.tabs,function(a,b){e(b,f)}),g(this.tabs,function(a,d){if(d.getAttribute(i)===b)return c(d,f)}),g(d.parentNode.children,function(a,b){b!==d&&e(b,f)}),c(d,f),d.dispatchEvent(this.activeTabEvent)},b.prototype.collapse=function(a){var b=document.querySelector(h(a)),c=this.options.activeClass;return g(this.tabs,function(a,b){e(b,c)}),e(b,c)},b.prototype.scrollToTab=function(a){if(this.isAccordion()&&this.options.autoScroll){return document.querySelector(h(a)).scrollIntoView()}},b.prototype.activeTab=function(){var a=this.options.activeClass,b=null;return g(this.tabs,function(c,e){if(d(e,a))return b=e}),b},b.prototype.tabFromHash=function(){var a=window.location.hash.replace("!",""),b=this.filter,c=null;return g(this.tabs,function(d,e){if(e.getAttribute(b)===a)return c=e}),c},b.prototype.isActive=function(a){return h(a)===h(this.activeTab())},b.prototype.isAccordion=function(){var a=document.querySelector(this.options.tabNav);return!(a.offsetWidth>0||a.offsetHeight>0)};var h=function(a){return a.getAttribute("data-target")||a.getAttribute("href")};return b}(this.Utils),window.ClassToggler=function(a){function b(b){this.options=a.setOptions(b,f),!this.options.target&&this.options.$target&&this.options.$target instanceof jQuery&&(this.options.target=document.querySelectorAll(this.options.$target.selector)),this.options.target?this.addEventListeners():console.trace("ClassToggle",this.options)}var c=(a.addClass,a.hasClass),d=a.removeClass,e=a.forEach,f={containerClass:null,target:null,activeClass:"active",inactiveClass:null,toggleOn:"click"},g=function(a,b){for(;(a=a.parentElement)&&!c(a,b););return a};return b.prototype.addEventListeners=function(){var a=this.options.toggleOn,b=function(a){return function(b){var c=a.options.containerClass?g(b.target,a.options.containerClass):b.delegateTarget;return a.isActive(c)?a.hide(c,b):a.show(c,b)}}(this);e(this.options.target,function(c,d){d.addEventListener(a,b)})},b.prototype.isActive=function(a){return c(a,this.options.activeClass)},b.prototype.show=function(a,b){var c;return"function"==typeof(c=this.options).onShow&&c.onShow(a,b),a.addClass(this.options.activeClass)},b.prototype.hide=function(a,b){var c;return"function"==typeof(c=this.options).onHide&&c.onHide(a,b),d(a,this.options.activeClass)},b}(this.Utils)
|
|
1
|
+
var slice=[].slice,hasProp={}.hasOwnProperty;null==this.Utils&&(this.Utils={modules:[]});var addClass=function(a,b){return removeClass(a,b),a.className+=" "+b+" "},removeClass=function(a,b){var c=new RegExp("(\\s|^)"+b+"(\\s|$)","gi");return a.className=a.className.replace(c,"")},hasClass=function(a,b){return new RegExp("(^| )"+b+"( |$)","gi").test(a.className)},merge=function(){var a,b,c,d,e=arguments[0],f=2<=arguments.length?slice.call(arguments,1):[];for(b=0,c=f.length;b<c;b++){a=f[b];for(d in a)hasProp.call(a,d)&&(e[d]=a[d])}return e},setOptions=function(a,b){return merge({},b,a)},deleteUndefined=function(a){var b,c,d=[];for(b in a)c=a[b],null===c||void 0===c?d.push(delete a[b]):d.push(void 0);return d},transformKey=function(){var a,b,c,d=document.createElement("div"),e=["transform","webkitTransform","OTransform","MozTransform","msTransform"];for(a=0,c=e.length;a<c;a++)if(b=e[a],void 0!==d.style[b])return b}(),requestAnimationFrame=function(a){var b,c,d,e=["ms","moz","webkit","o"];for(b=0,c=e.length;b<c&&(d=e[b],!a.requestAnimationFrame);b++)a.requestAnimationFrame=a[d+"RequestAnimationFrame"];return a.requestAnimationFrame||(a.requestAnimationFrame=function(a){return setTimeout(a,1e3/60)})}(window),forEach=function(a,b,c){for(var d=a.length-1;d>=0;d--)b.call(c,d,a[d])};this.Utils={addClass:addClass,removeClass:removeClass,hasClass:hasClass,merge:merge,setOptions:setOptions,deleteUndefined:deleteUndefined,transformKey:transformKey,requestAnimationFrame:requestAnimationFrame,forEach:forEach},window.Backdrop=function(){function a(){null==(d=document.querySelector(".us-backdrop"))&&(d=b())}var b,c=0,d=null;return a.prototype.element=d,b=function(){return d=document.createElement("div"),Utils.addClass(d,"us-backdrop"),document.body.appendChild(d)},a.prototype.retain=function(){var a;if(1===++c)return Utils.addClass(d,"us-backdrop--visible"),a=function(){if(c>=1)return Utils.addClass(d,"us-backdrop--active")},Utils.requestAnimationFrame.call(window,a)},a.prototype.release=function(){var a;return 1===c&&(Utils.removeClass(d,"us-backdrop--active"),a=function(){return setTimeout(function(){if(0===c)return Utils.removeClass(d,"us-backdrop--visible")},300)},Utils.requestAnimationFrame.call(window,a)),c=Math.max(0,c-1)},a}(),window.Overlay=function(a){function b(a){if(this.overlay=(this.options=f(a,h)).overlay,this.overlay instanceof jQuery&&(this.overlay=document.querySelector(this.overlay.selector)),this.options.openButton instanceof jQuery&&(this.options.openButton=document.querySelector(this.options.openButton.selector)),null==this.overlay||"undefined"==typeof Backdrop||null===Backdrop)throw new Error("There's no overlay or you haven't included Backdrop");this.backdrop=new Backdrop,this.addEventListeners()}var c=a.addClass,d=a.hasClass,e=a.removeClass,f=a.setOptions,g=a.requestAnimationFrame,h={bodyActiveClass:"us-overlay--open",activeClass:"us-overlay-parent--active",visibleClass:"us-overlay-parent--visible",overlay:document.querySelector(".us-overlay-parent"),openButton:".js-open-overlay",closeButton:".js-close-overlay",historyStatus:"#seedeal",history:!1,preventDefault:!0,animationSpeed:300};return b.prototype.addEventListeners=function(){var a=new CustomEvent("click.open-overlay"),b=new CustomEvent("click.close-overlay"),c="string"==typeof this.options.openButton?document.querySelector(this.options.openButton):this.options.openButton,d=function(b){return function(d){return b.options.preventDefault&&d.preventDefault(),c.dispatchEvent(a),b.show(d)}}(this);c&&c.addEventListener("click",d);var e=function(a){return function(c){for(var d=[],e=a.overlay.querySelectorAll(a.options.closeButton),f=[a.overlay].concat(Array.prototype.slice.call(e)),g=f.length-1;g>=0;g--){var h=f[g];if(c.target===h){a.options.preventDefault&&c.preventDefault(),a.hide(c);break}d.push(void 0)}return a.overlay.dispatchEvent(b),d}}(this);if(this.overlay.addEventListener("click",e),this.hasHistory())return window.onpopstate=function(a){return function(b){if(a.isOpen())return a.hide(b)}}(this)},b.prototype.show=function(a){var b,d=this;if(c(document.body,this.options.bodyActiveClass),this.backdrop.retain(),c(this.overlay,this.options.visibleClass),b=function(){return c(d.overlay,d.options.activeClass),setTimeout(function(){var b;return"function"==typeof(b=d.options).onOpen?b.onOpen(a):void 0},d.options.animationSpeed)},g.call(window,b),this.hasHistory())return history.pushState("open",window.document.title,this.options.historyStatus)},b.prototype.hide=function(a){var b,c=this;if(e(document.body,this.options.bodyActiveClass),this.backdrop.release(),b=function(){return e(c.overlay,c.options.activeClass),setTimeout(function(){var b;return e(c.overlay,c.options.visibleClass),"function"==typeof(b=c.options).onClose?b.onClose(a):void 0},c.options.animationSpeed)},g.call(window,b),this.hasHistory()&&"open"===history.state)return history.back()},b.prototype.isOpen=function(){return d(this.overlay,this.options.activeClass)},b.prototype.hasHistory=function(){return this.options.history&&window.history&&window.history.pushState},b}(this.Utils),window.Tabs=function(a){function b(a){var b=this.options=f(a,this.defaults),c=b.tabContainer,d=b.tabLinks;if(this.activeTabEvent=new CustomEvent("ustyle.tab.active"),this.tabs=document.querySelectorAll(c+" "+d),this.tabs.length){this.filter=this.tabs.item(0).getAttribute("data-target")?"data-target":"href",this.init();var e=function(a){return function(b){var c=b.currentTarget;return a.isAccordion()&&a.options.collapsible&&a.isActive(c)?(a.collapse(c),a.hashClear()):(a.navigateTo(c),a.scrollToTab(c),a.hashChange(c)),b.preventDefault()}}(this);g(this.tabs,function(a,b){b.addEventListener("click",e)})}}var c=a.addClass,d=a.hasClass,e=a.removeClass,f=a.setOptions,g=a.forEach;b.prototype.defaults={tabContainer:".us-tabs",tabLinks:".us-tabs-nav-mainlink",tabNav:".us-tabs-nav",changeUrls:!0,activeClass:"active",collapsible:!1,autoScroll:!0},b.prototype.init=function(){var a=this.activeTab(),b=this.tabFromHash();return b?this.navigateTo(b):a?this.navigateTo(a):this.options.collapsible&&this.isAccordion()?void 0:this.navigateTo(this.tabs.item(0))},b.prototype.hashChange=function(a){if(this.options.changeUrls)return window.location.replace("#!"+h(a).replace(/#/,""))},b.prototype.hashClear=function(){if(this.options.changeUrls){var a=window.location.pathname+window.location.search;return"function"==typeof history.replaceState?history.replaceState("",document.title,a):void 0}},b.prototype.navigateTo=function(a){var b=h(a),d=document.querySelector(b),f=this.options.activeClass,i=this.filter;return g(this.tabs,function(a,b){e(b,f)}),g(this.tabs,function(a,d){if(d.getAttribute(i)===b)return c(d,f)}),g(d.parentNode.children,function(a,b){b!==d&&e(b,f)}),c(d,f),d.dispatchEvent(this.activeTabEvent)},b.prototype.collapse=function(a){var b=document.querySelector(h(a)),c=this.options.activeClass;return g(this.tabs,function(a,b){e(b,c)}),e(b,c)},b.prototype.scrollToTab=function(a){if(this.isAccordion()&&this.options.autoScroll){return document.querySelector(h(a)).scrollIntoView()}},b.prototype.activeTab=function(){var a=this.options.activeClass,b=null;return g(this.tabs,function(c,e){if(d(e,a))return b=e}),b},b.prototype.tabFromHash=function(){var a=window.location.hash.replace("!",""),b=this.filter,c=null;return g(this.tabs,function(d,e){if(e.getAttribute(b)===a)return c=e}),c},b.prototype.isActive=function(a){return h(a)===h(this.activeTab())},b.prototype.isAccordion=function(){var a=document.querySelector(this.options.tabNav);return!(a.offsetWidth>0||a.offsetHeight>0)};var h=function(a){if(a)return a.getAttribute("data-target")||a.getAttribute("href")};return b}(this.Utils),window.ClassToggler=function(a){function b(b){this.options=a.setOptions(b,f),!this.options.target&&this.options.$target&&this.options.$target instanceof jQuery&&(this.options.target=document.querySelectorAll(this.options.$target.selector)),this.options.target?this.addEventListeners():console.trace("ClassToggle",this.options)}var c=(a.addClass,a.hasClass),d=a.removeClass,e=a.forEach,f={containerClass:null,target:null,activeClass:"active",inactiveClass:null,toggleOn:"click"},g=function(a,b){for(;(a=a.parentElement)&&!c(a,b););return a};return b.prototype.addEventListeners=function(){var a=this.options.toggleOn,b=function(a){return function(b){var c=a.options.containerClass?g(b.target,a.options.containerClass):b.delegateTarget;return a.isActive(c)?a.hide(c,b):a.show(c,b)}}(this);e(this.options.target,function(c,d){d.addEventListener(a,b)})},b.prototype.isActive=function(a){return c(a,this.options.activeClass)},b.prototype.show=function(a,b){var c;return"function"==typeof(c=this.options).onShow&&c.onShow(a,b),a.addClass(this.options.activeClass)},b.prototype.hide=function(a,b){var c;return"function"==typeof(c=this.options).onHide&&c.onHide(a,b),d(a,this.options.activeClass)},b}(this.Utils);
|
data/index.js
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
const types = require('node-sass').types
|
|
2
2
|
const path = require('path')
|
|
3
3
|
const fs = require('fs')
|
|
4
|
+
const packageVersion = require('./package.json')['version']
|
|
4
5
|
|
|
5
6
|
const base64encode = string => {
|
|
6
7
|
const stringBuffer = Buffer.from(string.getValue())
|
|
@@ -21,9 +22,14 @@ const inlineSVG = source => {
|
|
|
21
22
|
return types.String(dataUrl)
|
|
22
23
|
}
|
|
23
24
|
|
|
25
|
+
const version = function () {
|
|
26
|
+
return types.String(packageVersion)
|
|
27
|
+
}
|
|
28
|
+
|
|
24
29
|
const SassHelpers = {
|
|
25
30
|
'base64encode($string)': base64encode,
|
|
26
|
-
'inline-svg($source)': inlineSVG
|
|
31
|
+
'inline-svg($source)': inlineSVG,
|
|
32
|
+
'version': version
|
|
27
33
|
}
|
|
28
34
|
|
|
29
35
|
module.exports = {
|
data/lib/ustyle/version.rb
CHANGED
data/package-lock.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ustyle",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.19.2",
|
|
4
4
|
"lockfileVersion": 1,
|
|
5
5
|
"requires": true,
|
|
6
6
|
"dependencies": {
|
|
@@ -514,8 +514,7 @@
|
|
|
514
514
|
"balanced-match": {
|
|
515
515
|
"version": "1.0.0",
|
|
516
516
|
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
|
|
517
|
-
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
|
|
518
|
-
"dev": true
|
|
517
|
+
"integrity": "sha1-ibTRmasr7kneFk6gK4nORi1xt2c="
|
|
519
518
|
},
|
|
520
519
|
"base64-arraybuffer": {
|
|
521
520
|
"version": "0.1.5",
|
|
@@ -685,7 +684,6 @@
|
|
|
685
684
|
"version": "1.1.8",
|
|
686
685
|
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz",
|
|
687
686
|
"integrity": "sha1-wHshHHyVLsH479Uad+8NHTmQopI=",
|
|
688
|
-
"dev": true,
|
|
689
687
|
"requires": {
|
|
690
688
|
"balanced-match": "1.0.0",
|
|
691
689
|
"concat-map": "0.0.1"
|
|
@@ -1082,8 +1080,7 @@
|
|
|
1082
1080
|
"concat-map": {
|
|
1083
1081
|
"version": "0.0.1",
|
|
1084
1082
|
"resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
|
|
1085
|
-
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
|
|
1086
|
-
"dev": true
|
|
1083
|
+
"integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
|
|
1087
1084
|
},
|
|
1088
1085
|
"concat-stream": {
|
|
1089
1086
|
"version": "1.6.0",
|
|
@@ -2935,8 +2932,7 @@
|
|
|
2935
2932
|
"fs.realpath": {
|
|
2936
2933
|
"version": "1.0.0",
|
|
2937
2934
|
"resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
|
|
2938
|
-
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
|
|
2939
|
-
"dev": true
|
|
2935
|
+
"integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
|
|
2940
2936
|
},
|
|
2941
2937
|
"fstream": {
|
|
2942
2938
|
"version": "1.0.11",
|
|
@@ -3499,6 +3495,56 @@
|
|
|
3499
3495
|
}
|
|
3500
3496
|
}
|
|
3501
3497
|
},
|
|
3498
|
+
"grunt-contrib-clean": {
|
|
3499
|
+
"version": "1.1.0",
|
|
3500
|
+
"resolved": "https://registry.npmjs.org/grunt-contrib-clean/-/grunt-contrib-clean-1.1.0.tgz",
|
|
3501
|
+
"integrity": "sha1-Vkq/LQN4qYOhW54/MO51tzjEBjg=",
|
|
3502
|
+
"requires": {
|
|
3503
|
+
"async": "1.5.2",
|
|
3504
|
+
"rimraf": "2.6.2"
|
|
3505
|
+
},
|
|
3506
|
+
"dependencies": {
|
|
3507
|
+
"async": {
|
|
3508
|
+
"version": "1.5.2",
|
|
3509
|
+
"resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
|
|
3510
|
+
"integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo="
|
|
3511
|
+
},
|
|
3512
|
+
"glob": {
|
|
3513
|
+
"version": "7.1.2",
|
|
3514
|
+
"resolved": "https://registry.npmjs.org/glob/-/glob-7.1.2.tgz",
|
|
3515
|
+
"integrity": "sha512-MJTUg1kjuLeQCJ+ccE4Vpa6kKVXkPYJ2mOCQyUuKLcLQsdrMCpBPUi8qVE6+YuaJkozeA9NusTAw3hLr8Xe5EQ==",
|
|
3516
|
+
"requires": {
|
|
3517
|
+
"fs.realpath": "1.0.0",
|
|
3518
|
+
"inflight": "1.0.6",
|
|
3519
|
+
"inherits": "2.0.3",
|
|
3520
|
+
"minimatch": "3.0.4",
|
|
3521
|
+
"once": "1.4.0",
|
|
3522
|
+
"path-is-absolute": "1.0.1"
|
|
3523
|
+
}
|
|
3524
|
+
},
|
|
3525
|
+
"inherits": {
|
|
3526
|
+
"version": "2.0.3",
|
|
3527
|
+
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
|
|
3528
|
+
"integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
|
|
3529
|
+
},
|
|
3530
|
+
"minimatch": {
|
|
3531
|
+
"version": "3.0.4",
|
|
3532
|
+
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
|
|
3533
|
+
"integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
|
|
3534
|
+
"requires": {
|
|
3535
|
+
"brace-expansion": "1.1.8"
|
|
3536
|
+
}
|
|
3537
|
+
},
|
|
3538
|
+
"rimraf": {
|
|
3539
|
+
"version": "2.6.2",
|
|
3540
|
+
"resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
|
|
3541
|
+
"integrity": "sha512-lreewLK/BlghmxtfH36YYVg1i8IAce4TI7oao75I1g245+6BctqTVQiBP3YUJ9C6DQOXJmkYR9X9fCLtCOJc5w==",
|
|
3542
|
+
"requires": {
|
|
3543
|
+
"glob": "7.1.2"
|
|
3544
|
+
}
|
|
3545
|
+
}
|
|
3546
|
+
}
|
|
3547
|
+
},
|
|
3502
3548
|
"grunt-contrib-concat": {
|
|
3503
3549
|
"version": "0.5.1",
|
|
3504
3550
|
"resolved": "https://registry.npmjs.org/grunt-contrib-concat/-/grunt-contrib-concat-0.5.1.tgz",
|
|
@@ -4404,7 +4450,6 @@
|
|
|
4404
4450
|
"version": "1.0.6",
|
|
4405
4451
|
"resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
|
|
4406
4452
|
"integrity": "sha1-Sb1jMdfQLQwJvJEKEHW6gWW1bfk=",
|
|
4407
|
-
"dev": true,
|
|
4408
4453
|
"requires": {
|
|
4409
4454
|
"once": "1.4.0",
|
|
4410
4455
|
"wrappy": "1.0.2"
|
|
@@ -6138,7 +6183,6 @@
|
|
|
6138
6183
|
"version": "1.4.0",
|
|
6139
6184
|
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
|
|
6140
6185
|
"integrity": "sha1-WDsap3WWHUsROsF9nFC6753Xa9E=",
|
|
6141
|
-
"dev": true,
|
|
6142
6186
|
"requires": {
|
|
6143
6187
|
"wrappy": "1.0.2"
|
|
6144
6188
|
}
|
|
@@ -6454,8 +6498,7 @@
|
|
|
6454
6498
|
"path-is-absolute": {
|
|
6455
6499
|
"version": "1.0.1",
|
|
6456
6500
|
"resolved": "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
|
|
6457
|
-
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
|
|
6458
|
-
"dev": true
|
|
6501
|
+
"integrity": "sha1-F0uSaHNVNP+8es5r9TpanhtcX18="
|
|
6459
6502
|
},
|
|
6460
6503
|
"path-is-inside": {
|
|
6461
6504
|
"version": "1.0.2",
|
|
@@ -9113,8 +9156,7 @@
|
|
|
9113
9156
|
"wrappy": {
|
|
9114
9157
|
"version": "1.0.2",
|
|
9115
9158
|
"resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
|
|
9116
|
-
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
|
|
9117
|
-
"dev": true
|
|
9159
|
+
"integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
|
|
9118
9160
|
},
|
|
9119
9161
|
"write": {
|
|
9120
9162
|
"version": "0.2.1",
|
data/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "ustyle",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.19.2",
|
|
4
4
|
"description": "A living styleguide and pattern library by uSwitch.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"css",
|
|
@@ -27,6 +27,7 @@
|
|
|
27
27
|
"dist",
|
|
28
28
|
"vendor/assets/stylesheets",
|
|
29
29
|
"vendor/assets/images/forms",
|
|
30
|
+
"vendor/assets/images/icons",
|
|
30
31
|
"index.js"
|
|
31
32
|
],
|
|
32
33
|
"repository": "uswitch/ustyle",
|
|
@@ -35,6 +36,8 @@
|
|
|
35
36
|
},
|
|
36
37
|
"scripts": {
|
|
37
38
|
"start": "grunt",
|
|
39
|
+
"build": "grunt build",
|
|
40
|
+
"publish": "grunt publish",
|
|
38
41
|
"depcheck": "depcheck --specials=grunt --ignores=depcheck,grunt-*"
|
|
39
42
|
},
|
|
40
43
|
"devDependencies": {
|
|
@@ -72,5 +75,15 @@
|
|
|
72
75
|
"simple-git": "^1.3.0",
|
|
73
76
|
"stylestats": "^4.2.2",
|
|
74
77
|
"underscore.string": "^3.0.2"
|
|
78
|
+
},
|
|
79
|
+
"browserslist": [
|
|
80
|
+
"> 1%",
|
|
81
|
+
"last 5 versions",
|
|
82
|
+
"Firefox ESR",
|
|
83
|
+
"IE 10",
|
|
84
|
+
"not Explorer < 10"
|
|
85
|
+
],
|
|
86
|
+
"dependencies": {
|
|
87
|
+
"grunt-contrib-clean": "^1.1.0"
|
|
75
88
|
}
|
|
76
89
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg"><symbol viewBox="0 0 32 32" id="icon-alarm"><title>alarm</title><path d="M24.04 5.978c.256 0 .512-.1.707-.3l3.263-3.342c.39-.4.39-1.048 0-1.447-.39-.4-1.023-.4-1.414 0l-3.263 3.34c-.39.4-.39 1.05 0 1.45.196.19.45.29.707.29zm.68 3.592c.107.26.306.453.542.553.237.1.51.108.765 0l4.264-1.808c.51-.216.76-.815.55-1.337-.21-.522-.79-.77-1.3-.554l-4.27 1.808c-.51.216-.75.814-.54 1.337zM31 12h-4.616c-.552 0-1 .578-1 1.143 0 .283.112.455.292.64.182.186.432.217.708.217H31c.552 0 1-.434 1-1 0-.565-.447-1-1-1zM7.347 5.69c.195.2.45.3.707.3s.512-.1.707-.3c.4-.4.4-1.05 0-1.45L5.5.9C5.108.5 4.474.5 4.083.9c-.39.4-.39 1.048 0 1.447L7.347 5.69zM1.71 8.315l4.263 1.808c.255.108.53.1.765 0 .237-.1.435-.293.54-.554.212-.53-.03-1.13-.54-1.34L2.473 6.42c-.51-.214-1.095.034-1.306.556-.21.523.03 1.12.542 1.338zm4.612 5.528c.18-.185.293-.49.293-.772 0-.56-.448-1.07-1-1.07H1c-.553 0-1 .44-1 1s.448 1 1 1h4.616c.276 0 .526.03.706-.15zm21.486 11.71c0 .03-.006.05-.007.078.01.03.02.04.02.06l.01-.13h-.01zm.005.14c0-.016.01.053.01.037s-.01-.025-.01-.04v.004zm-.328-.68c-6.147-9.345-3.416-7.977-5.032-14.04-.426-1.873-1.61-3.448-3.202-4.37.18-.425.27-.89.27-1.38 0-1.99-1.57-3.607-3.52-3.607s-3.52 1.614-3.52 3.606c0 .493.1.962.28 1.39-1.5.87-2.64 2.316-3.12 4.053l-.02.072c-1.76 6.353 1.14 4.803-5.14 14.345l-.01.206c-.01.025-.03.257-.05.263-.02 0-.04-.08-.06-.04-.03.06-.052-.43-.07-.37-.047.13-.077-.13-.08-.13h.03c.037 1 .457 1 .985 1h21.62c.51 0 .92.28.977-.65-.027-.22-.116-.24-.27-.4-.02-.02-.027.09-.046.07zM16 6.783c-.84 0-1.522-.7-1.522-1.56 0-.86.683-1.56 1.522-1.56.84 0 1.522.7 1.522 1.56 0 .86-.683 1.557-1.522 1.557zm.005 24.61c1.875 0 3.394-.394 3.497-3.394h-6.994c.103 3 1.622 3.39 3.497 3.39z"/></symbol><symbol viewBox="0 0 32 32" id="icon-android"><title>android</title><path d="M27.9 10.004c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2s2-.9 2-2v-8c0-1.1-.9-2-2-2zm-24 0c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2s2-.9 2-2v-8c0-1.1-.9-2-2-2zm3 13c0 1.657 1.343 3 3 3h1v4c0 1.1.9 2 2 2s2-.9 2-2v-4h2v4c0 1.1.9 2 2 2s2-.9 2-2v-4h1c1.657 0 3-1.343 3-3v-11h-18v11zM19.606 2.8L20.872.37c.064-.122.016-.274-.106-.337s-.274-.016-.337.106L19.14 2.6c-1.008-.388-2.1-.6-3.246-.6s-2.238.215-3.245.604L11.37.14c-.063-.123-.214-.17-.336-.107-.122.063-.17.215-.106.337l1.266 2.43c-2.832 1.284-4.882 3.99-5.238 7.205h17.89c-.357-3.216-2.407-5.92-5.24-7.203zM11.9 8.455c-.8 0-1.45-.65-1.45-1.45s.65-1.45 1.45-1.45 1.45.65 1.45 1.45c0 .8-.65 1.45-1.45 1.45zm8 0c-.8 0-1.45-.65-1.45-1.45s.65-1.45 1.45-1.45c.8 0 1.45.65 1.45 1.45s-.65 1.45-1.45 1.45z"/></symbol><symbol viewBox="0 0 32 32" id="icon-arrow-circle"><title>arrow-circle</title><path d="M15.9.004c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zm10.113 16.41l-8.703 8.703c-.166.166-.575.216-.792.126-.217-.09-.518-.302-.518-.536V20H8.198c-.154 0-.11-.137-.22-.246-.108-.11.022-.333.022-.486V12.74c0-.32-.123-.74.198-.74H16V7.3c0-.234.3-.445.518-.535s.546-.04.712.126l8.743 8.71c.11.11.19.26.19.41 0 .16-.04.3-.15.41z"/></symbol><symbol viewBox="0 0 32 32" id="icon-arrow-down"><title>arrow-down</title><path d="M.3 16.7l15 15c.2.2.4.3.7.3.3 0 .5-.1.7-.3l15-15c.3-.3.4-.7.2-1.1-.1-.4-.5-.6-.9-.6h-8V1c0-.6-.8-1-1.4-1H10.4c-.3 0-.7.1-.9.3-.2.2-.5.4-.5.7v14H1c-.4 0-.8.2-.9.6-.2.4-.1.8.2 1.1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-arrow-up"><title>arrow-up</title><path d="M31.707 15.297l-15-15C16.52.11 16.265.004 16 .004c-.265 0-.52.105-.707.293l-15 15c-.286.286-.372.714-.217 1.088.155.373.52.615.924.615h8v14.004c0 .552.823.996 1.375.996h11.25c.265 0 .707-.103.895-.29.188-.19.48-.44.48-.706V17h8c.404 0 .77-.242.924-.615.155-.374.07-.802-.217-1.088z"/></symbol><symbol viewBox="0 0 32 32" id="icon-book"><title>book</title><path d="M27.026 0h-.002L7.1.56c-1.045.006-2.01.27-2.79.76-.438.278-.684.616-.943 1.003C3.06 2.78 3 3.32 3 3.848v23.61c0 .528.06 1.07.368 1.526.382.567.893 1.014 1.625 1.33.65.28 1.34.423 2.067.428l15.276 1.253c.064.006.12.01.183.01.57 0 1.27-.224 1.68-.628.4-.406.8-.948.8-1.524v-1.17l2.36-.08c1.07-.033 1.63-.898 1.63-1.97V2.13C29 .96 28.26 0 27.02 0zm-9.274 14.995c-.027 0-.054 0-.082-.003l-7.396-.607c-.543-.045-.948-.522-.904-1.065.044-.543.516-.943 1.066-.904l7.396.607c.543.045.948.522.904 1.065-.042.516-.474.907-.984.907zm2.235-3.736c-.027 0-.054-.01-.082-.01L8.04 10.28c-.543-.045-.948-.522-.904-1.065.046-.544.51-.938 1.066-.904l11.865.98c.543.05.948.52.904 1.07-.04.52-.47.91-.98.91zM26 24.74c0 .537-.296.983-.832.994l-.188.01c-.122 0 .02-.1.02-.22V7.614c0-1.125-1.013-2.144-2.135-2.243L7.158 4h-.055c-.558 0-1.008-.065-1.23-.208-.023-.015-.043.02-.06.007.063-.05.156-.09.28-.14.287-.13.652-.18 1.048-.18l17.85-.5c.64 0 1.01.52 1.01 1.15v20.6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-bookmark"><title>bookmark</title><path d="M25.412 0H6.588C6.068 0 6 .426 6 .945v30.118c0 .38.053.724.405.87.35.144.667.064.937-.204l8.702-8.75 8.724 8.74c.18.18.41.27.655.27.122 0 .062-.03.178-.07.36-.15.4-.49.4-.87V.94c0-.52-.07-.942-.58-.942z"/></symbol><symbol viewBox="0 0 32 32" id="icon-breadcrumb"><title>breadcrumb</title><path d="M21.307 15.32L13.114.714c-.377-.67-1.222-.904-1.89-.53-.667.374-.905 1.22-.53 1.888L18.508 16l-7.745 13.94c-.372.67-.13 1.515.54 1.887.213.118.444.175.672.175.487 0 .96-.258 1.214-.714l8.12-14.616c.23-.422.23-.933-.01-1.353z"/></symbol><symbol viewBox="0 0 32 32" id="icon-calculator"><title>calculator</title><path d="M27 2.22C27 .994 26.006 0 24.78 0H7.22C5.994 0 5 .994 5 2.22v27.56C5 31.006 5.994 32 7.22 32h17.56c1.226 0 2.22-.994 2.22-2.22V2.22zM12 29H8v-4h4v4zm0-6H8v-4h4v4zm0-6H8v-4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4v-4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4v-4h4v4zm0-7H8V3h16v7z"/></symbol><symbol viewBox="0 0 32 32" id="icon-calendar"><title>calendar</title><path d="M5 23h4v4H5zm6 0h4v4h-4zm6 0h4v4h-4zM5 17h4v4H5zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12-6h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM7.5 5.63c.828 0 1.5-.673 1.5-1.5V1.503c0-.828-.672-1.5-1.5-1.5S6 .676 6 1.503v2.624c0 .83.672 1.502 1.5 1.502zm17 0c.828 0 1.5-.673 1.5-1.5V1.503c0-.828-.672-1.5-1.5-1.5s-1.5.672-1.5 1.5v2.623c0 .83.672 1.502 1.5 1.502zM29 3h-1v1.13c0 1.93-1.57 3.5-3.5 3.5S21 6.06 21 4.13V3H11v1.13c0 1.93-1.57 3.5-3.5 3.5S4 6.06 4 4.13V3H3C1.343 3 0 4.57 0 6.227V28.84C0 30.5 1.343 32 3 32h26c1.657 0 3-1.502 3-3.16V6.228C32 4.57 30.657 3 29 3zm0 26H3V9h26v20z"/></symbol><symbol viewBox="0 0 32 32" id="icon-car"><title>car</title><path d="M30.326 12.646l-3.193-9.69C26.93 2.336 26.356 2 25.707 2H6.293c-.65 0-1.224.338-1.426.955l-3.193 9.73C.688 13.178 0 14.15 0 15.32v6.59c0 1.565 1 2.846 3 2.976v3.28C3 29.266 3.65 30 4.75 30h1.917C7.767 30 9 29.266 9 28.166V25h14v3.103c0 1.1 1.233 1.897 2.333 1.897h1.917c1.1 0 1.75-.797 1.75-1.897v-3.217c2-.13 3-1.41 3-2.975v-6.59c0-1.17-.688-2.18-1.674-2.67zm-23.268 7.97c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm17.884 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM4.937 12L7.38 5h17.24l2.443 7H4.937z"/></symbol><symbol viewBox="0 0 32 32" id="icon-checkbox-tick"><title>checkbox-tick</title><path d="M31.076 2.204c-9.734 5.965-16.798 13.492-19.972 17.27l-7.772-6.088L-.1 16.152l13.43 13.652c2.31-5.918 9.632-17.483 18.57-25.7l-.824-1.9z"/></symbol><symbol viewBox="0 0 32 32" id="icon-chevron-left"><title>chevron-left</title><path d="M13.462.9c-1.2 1.1-12.4 12.9-12.4 12.9-.6.6-.9 1.4-.9 2.2 0 .8.3 1.6.9 2.2 0 0 11.3 11.8 12.4 13 1.2 1.1 3.2 1.2 4.5 0 1.2-1.2 1.3-2.9 0-4.3L7.562 16l10.3-10.8c1.3-1.5 1.2-3.1 0-4.3-1.2-1.2-3.3-1.2-4.4 0z"/></symbol><symbol viewBox="0 0 32 32" id="icon-chevron-right"><title>chevron-right</title><path d="M11.6.9C12.8 2 24 13.8 24 13.8c.6.6.9 1.4.9 2.2s-.3 1.6-.9 2.2c0 0-11.3 11.8-12.4 13-1.2 1.1-3.2 1.2-4.5 0-1.2-1.2-1.3-2.9 0-4.3L17.5 16 7.2 5.2C5.9 3.7 6 2.1 7.2.9c1.2-1.2 3.3-1.2 4.4 0z"/></symbol><symbol viewBox="0 0 32 32" id="icon-clock"><title>clock</title><path d="M15.918.004c-8.837 0-16 7.164-16 16 0 8.837 7.163 16 16 16s16-7.163 16-16c0-8.836-7.163-16-16-16zm0 29c-7.16 0-12.985-5.832-12.985-13s5.825-13 12.985-13c7.16 0 12.985 5.832 12.985 13s-5.825 13-12.985 13zm1.264-13.557l-.03-8.282c0-.69-.564-1.165-1.256-1.165h-.004c-.694 0-1.254.483-1.253 1.173l.03 8.938c0 .4.19.71.47.94.05.05.08.11.14.15l5.88 4.16c.22.16.47.23.72.23.39 0 .78-.18 1.02-.53.403-.56.27-1.34-.294-1.74l-5.45-3.86z"/></symbol><symbol viewBox="0 0 32 32" id="icon-close"><title>close</title><path d="M16 .004c-8.836 0-16 7.163-16 16s7.164 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zm8 21.172l-2.828 2.828L16 18.834l-5.172 5.17L8 21.177l5.172-5.172L8 10.832l2.828-2.828L16 13.176l5.172-5.172L24 10.832l-5.172 5.172L24 21.176z"/></symbol><symbol viewBox="0 0 32 32" id="icon-cog"><title>cog</title><path d="M31.31 13.274l-3.698-1.207-.63-1.52L28.67 6.98c.18-.38.102-.834-.197-1.133L26.06 3.433c-.307-.307-.775-.38-1.16-.185L21.43 5.01l-1.52-.63L18.58.667c-.146-.4-.523-.667-.945-.667H14.22c-.432 0-.815.28-.95.692l-1.206 3.7-1.52.63-3.567-1.684c-.38-.18-.836-.1-1.134.197L3.43 5.95c-.308.305-.382.773-.186 1.16l1.763 3.47-.63 1.518-3.714 1.33c-.397.142-.663.52-.663.94v3.415c0 .433.278.816.69.95l3.7 1.208.628 1.52-1.685 3.57c-.18.38-.102.84.197 1.14l2.413 2.42c.306.31.775.38 1.16.19l3.47-1.77 1.52.63 1.33 3.71c.143.4.52.67.942.67h3.414c.43 0 .81-.273.95-.69l1.2-3.693 1.52-.63 3.56 1.68c.38.18.83.1 1.13-.2l2.41-2.414c.302-.304.38-.77.182-1.16l-1.764-3.47.63-1.52 3.713-1.33c.397-.142.663-.52.663-.94v-3.42c0-.432-.28-.816-.69-.95zM16 20.597c-2.532 0-4.593-2.06-4.593-4.593 0-2.532 2.06-4.593 4.594-4.593 2.54 0 4.6 2.07 4.6 4.6s-2.06 4.6-4.59 4.6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-controller"><title>controller</title><path d="M30.2 9.6H1.9c-1 0-1.9.7-1.9 1.8v9.2c0 1 .9 1.9 1.9 1.9h28.2c1.1 0 1.9-.9 1.9-2v-9.2c.1-1-.8-1.7-1.8-1.7zM9.7 16.7H7.8v1.8H6.3v-1.9H4.4v-1.5h1.9v-1.9h1.5v1.9h1.9v1.6zm12.2.9c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5c0 .9-.7 1.5-1.5 1.5zm4.9-.9c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5z"/></symbol><symbol viewBox="0 0 32 32" id="icon-credit-card"><title>credit-card</title><path d="M32 6.997C32 5.342 30.658 4 29.003 4H2.997C1.342 4 0 5.342 0 6.997v18.005C0 26.658 1.342 28 2.997 28h26.005C30.658 28 32 26.658 32 25.003V6.997zM29 25H3V15h26v10zm0-15H3V7h26v3zM5.96 23h3c.552 0 1-.448 1-1s-.448-1-1-1h-3c-.55 0-.998.448-.998 1s.447 1 1 1zm6.995 0h7.993c.552 0 1-.448 1-1s-.448-1-1-1h-7.993c-.552 0-1 .448-1 1s.448 1 1 1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-cross"><title>cross</title><path d="M26.5 9.61l-4.106-4.106L16 11.898 9.606 5.504 5.5 9.61l6.394 6.394L5.5 22.398l4.106 4.106L16 20.11l6.394 6.394 4.106-4.106-6.394-6.394z"/></symbol><symbol viewBox="0 0 32 32" id="icon-dashcam"><title>dashcam</title><g transform="translate(0 5)"><circle cx="16" cy="9" r="5"/><path d="M11.506 18H7.992C3.578 18 0 14.422 0 10V8c0-4.418 3.578-8 7.992-8h16.016C28.422 0 32 3.578 32 8v2c0 4.418-3.578 8-7.992 8h-3.514C21.43 19.046 22 20.42 22 21.927H10c0-1.506.57-2.88 1.506-3.927zM16 16c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7z"/></g></symbol><symbol viewBox="0 0 32 32" id="icon-dual-fuel"><title>dual-fuel</title><path d="M13.166 15.992c-.277-.99-.152-2.03.353-2.93.14-.25.31-.475.5-.684-.4-.432-.7-.955-.86-1.542-.28-.99-.15-2.03.35-2.93.03-.065.08-.12.12-.182-.71-.997-1.47-1.93-2.29-2.78-1.08-1.13-2.25-2.137-3.47-3.032-.5-.366-1.01-.715-1.53-1.045-.4-.255-.79-.51-1.2-.74-.18-.1-.39-.168-.58-.08-.06.027-.11.068-.158.12-.02.023-.035.047-.05.073-.158.253-.136.614-.083.93.3 1.776.12 3.965-.16 5.735-.437 2.774-1.356 5.403-2.55 7.783C.012 17.806-.35 21.702.32 25.183c.502 2.625 2.087 4.616 4.093 5.843-.06-.094-.128-.183-.18-.285-1.488-2.82-.444-6.08.794-8.69.633-1.33 1.36-2.62 1.93-3.99.283-.68.502-1.42.64-2.17.114-.63.158-1.37.085-2.01-.026-.23 0-.51.163-.62.084-.05.184-.04.276-.02.56.13 1.04.63 1.49 1.03.56.49 1.07 1.05 1.54 1.66.49.63.93 1.31 1.34 2.01 1.78 3.11 2.11 7.14 1.2 10.65-.32 1.24-.87 2.528-1.7 3.45 2.19-.708 3.61-2.18 4.54-4.17C15.62 27.1 15 26 15 24.767V23.16c0-1.464 1-2.747 2-3.444V18.9c0-.04-.185-.072-.268-.09-1.683-.048-3.12-1.196-3.566-2.818zm18.77-5.24c-.276-.986-1.297-1.562-2.283-1.287L16.377 13.17c-.984.273-1.56 1.298-1.285 2.283.226.82.972 1.453 1.783 1.453.02 0 .043.094.063.094h.016c.08 0 .863.118 1.523.53.22.136.413.47.588.47H19v2h3v-2.142c0-.36-.395-.69-.588-.98-.26-.393-.61-.718-.92-.99l6.098-1.71 1.075.983c-.074.04-.156.08-.23.13-.597.35-1.207.97-1.83 1.6-.132.13-.605.5-.605.98V21h-5.893C18.002 21 17 22.056 17 23.16v1.6c0 1.106 1 2 2 2v2.244C19 30.66 20.45 32 22.107 32h2.844c1.66 0 3.05-1.34 3.05-2.996v-2.246c1-.017 2-.903 2-1.997v-1.6c0-1.1-.97-2.16-2.08-2.16H28v-3.14c0-.36.76-.63 1.183-.79.265-.1.498-.17.67-.21.084-.02.144-.03.185-.03h.036c.46-.05.847-.37.99-.81.14-.44.008-.92-.334-1.23l-1.477-1.33 1.395-.39c.986-.272 1.56-1.295 1.287-2.28zm-16.17-4.627c.315.237.705.37 1.11.37.164 0 .332-.022.5-.068l9.883-2.734c.12-.035.24-.08.35-.137.21-.113.4-.266.56-.447.07-.1.14-.19.2-.3.11-.21.19-.44.22-.68.03-.24.01-.49-.06-.74-.05-.19-.14-.35-.24-.51l-.06-.09c-.1-.14-.22-.268-.36-.37L27.8.37c-.144-.1-.297-.185-.463-.242 0-.005-.004-.007-.007-.007-.17-.05-.346-.08-.527-.08-.02 0-.04-.01-.06-.01-.02 0-.036.01-.05.01-.15.01-.3.02-.45.067L16.37 2.85c-.983.275-1.56 1.298-1.286 2.286.115.41.36.748.675.985zm-.674 4.17c.226.82.972 1.36 1.783 1.36.164 0 .33-.024.498-.07L30.648 7.88c.986-.274 1.56-1.296 1.287-2.282-.275-.988-1.296-1.565-2.282-1.29L16.377 8.012c-.984.277-1.56 1.3-1.285 2.286z"/></symbol><symbol viewBox="0 0 32 32" id="icon-electric-light"><title>electric-light</title><path d="M7.567 10.265c.227.822.973 1.36 1.785 1.36.164 0 .332-.023.498-.07l13.294-3.708c.988-.276 1.563-1.3 1.29-2.287-.276-.99-1.3-1.567-2.286-1.29L8.854 7.976c-.985.276-1.563 1.3-1.287 2.288zM9.354 6.46c.164 0 .332-.023.498-.07l9.9-2.737c.987-.277 1.563-1.3 1.288-2.29-.274-.987-1.298-1.566-2.285-1.29l-9.9 2.74c-.985.274-1.563 1.3-1.29 2.288.23.82.977 1.36 1.79 1.36zM22.15 9.433l-13.296 3.71c-.985.274-1.563 1.3-1.287 2.286.227.82.973 1.46 1.785 1.46.022 0 .043.1.064.1h.016c.08 0 .864.11 1.525.53.22.13.413.47.59.47H12v2h2v-2.16c0-.36-.153-.69-.347-.98-.26-.4-.49-.72-.8-1l6.167-1.71 1.107.98c-.075.04-.14.08-.216.12-.59.35-1.08.86-1.56 1.59-.19.29-.34.62-.34.98V21H11.6c-1.12 0-1.6 1.04-1.6 2.148v1.604c0 1.106 0 2.003 2 2.003V29c0 1.66.932 3 2.592 3h2.848C19.1 32 20 30.66 20 29v-2.25c2-.016 2-.903 2-2v-1.603C22 22.04 21.52 21 20.413 21H20v-3.163c1-.365 1.008-.63 1.432-.797.265-.107.622-.172.793-.21.085-.02.207-.03.248-.038.018-.003.06-.005.066-.006.46-.05.86-.372 1-.813.14-.442.01-.928-.33-1.24L21.74 13.4l1.4-.39c.987-.274 1.563-1.3 1.29-2.287-.276-.99-1.3-1.566-2.285-1.29z"/></symbol><symbol viewBox="0 0 32 32" id="icon-envelope"><title>envelope</title><path d="M31.562 4.464c-.377-.626-.974-1.098-1.685-1.317C29.597 3.062 29.307 3 29 3H3c-.307 0-.598.062-.877.148-.712.22-1.308.69-1.685 1.316C.166 4.914 0 5.44 0 6.004v20c0 .307.06.598.146.877.22.72.688 1.31 1.313 1.69.45.27.97.44 1.54.44h26c.56 0 1.09-.16 1.54-.43.62-.38 1.09-.97 1.31-1.68.08-.28.14-.57.14-.87v-20c0-.563-.17-1.09-.44-1.54zM27.022 6L19 14.024l-1.5 1.5-.793.795c-.39.39-1.023.39-1.414 0l-.793-.8-1.5-1.5L4.978 6H27.02zM3 7.026l8.5 8.5-8.5 8.5v-17zM4.02 26L13 17.024l1.586 1.587c.78.79 2.047.79 2.828.01L19 17.03 27.978 26H4.02zM29 24.026l-8.5-8.5 8.5-8.5v17z"/></symbol><symbol viewBox="0 0 32 32" id="icon-exit-noexit"><title>exit-noexit</title><path d="M7.874 16.004c4.388 0 7.945-3.582 7.945-8s-3.56-8-7.95-8c-4.39 0-7.95 3.582-7.95 8s3.55 8 7.94 8zM4.636 7.388l1.576 1.604 4.9-4.988 1.48 1.505L6.212 12 3.157 8.89l1.48-1.506zM31.176.51c-.592-.595-1.552-.595-2.143 0L.343 29.4c-.59.595-.59 1.56 0 2.157.297.298.685.446 1.073.446.388 0 .776-.148 1.072-.446L31.176 2.67c.59-.597.59-1.564 0-2.16zm.724 19.427l-2.932-2.932-4.568 4.567-4.567-4.567-2.933 2.932 4.567 4.567L16.9 29.07l2.933 2.934 4.567-4.567 4.568 4.567L31.9 29.07l-4.567-4.566z"/></symbol><symbol viewBox="0 0 31.99 32" id="icon-facebook-brand"><title>facebook-brand</title><path d="M30.23 0H1.77A1.77 1.77 0 0 0 0 1.77v28.46A1.77 1.77 0 0 0 1.77 32h15.32V19.61h-4.17v-4.83h4.17v-3.56c0-4.13 2.52-6.39 6.21-6.39A34 34 0 0 1 27 5v4.34h-2.53c-2 0-2.39 1-2.39 2.35v3.08h4.78l-.63 4.83h-4.16V32h8.15A1.77 1.77 0 0 0 32 30.23V1.77A1.76 1.76 0 0 0 30.23 0" fill="#3b5999"/></symbol><symbol viewBox="0 0 32 32" id="icon-facebook"><title>facebook</title><path d="M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16S24.837 0 16 0zm4 11h-1.546C17.32 11 17 11.733 17 12.524V14h2.905l-.352 3H17v7h-3v-7h-2v-3h2v-1.746c0-2.337 1.618-3.61 3.703-3.61 1 0 2.026.074 2.297.108V11z"/></symbol><symbol viewBox="0 0 32 32" id="icon-filter"><title>filter</title><path d="M30.5 15h-2.714c-.542-2-2.014-2.7-3.765-2.7-1.75 0-3.22.7-3.76 2.7H1.5c-.828 0-1.5.672-1.5 1.5 0 .83.672 1.5 1.5 1.5h18.912c.64 1 2.01 2.3 3.61 2.3 1.598 0 2.968-1.3 3.608-2.3h2.87c.828 0 1.5-.67 1.5-1.5 0-.828-.672-1.5-1.5-1.5zm0 10H11.786c-.542-2-2.014-2.7-3.765-2.7-1.75 0-3.22.7-3.76 2.7H1.5c-.828 0-1.5.672-1.5 1.5 0 .83.672 1.5 1.5 1.5h2.912c.64 1 2.01 2.3 3.61 2.3 1.598 0 2.968-1.3 3.608-2.3H30.5c.828 0 1.5-.67 1.5-1.5 0-.828-.672-1.5-1.5-1.5zM1.5 8h8.912c.64 1 2.01 2.3 3.61 2.3C15.62 10.3 16.99 9 17.63 8H30.5c.828 0 1.5-.67 1.5-1.5 0-.828-.672-1.5-1.5-1.5H17.786c-.542-2-2.014-2.7-3.765-2.7-1.75 0-3.22.7-3.76 2.7H1.5C.672 5 0 5.672 0 6.5 0 7.33.672 8 1.5 8z"/></symbol><symbol viewBox="0 0 32 32" id="icon-fixed-variable"><title>fixed-variable</title><path d="M30.833.53c-.58-.594-1.52-.594-2.1 0L.636 29.406c-.58.595-.58 1.562 0 2.157.29.298.67.446 1.05.446s.76-.15 1.05-.45L30.833 2.69c.58-.595.58-1.562 0-2.157zm1.27 26.44c-.05-.12-.163.03-.29.03H30v-5.478c0-.177-.93-.522-1.1-.522h-3.5c-.082 0-.206.135-.264.195-.058.06-.136.242-.136.327V27h-2.514c-.126 0-.24-.15-.287-.03-.05.12-.03.03.06.123l4.66 4.793c.05.06.13.094.22.094s.16-.034.22-.094l4.66-4.793c.09-.092.11-.003.07-.122zm-8.395-2.01c.058-.06.292-.086.292-.17V20h2.202c.126 0 .24-.196.287-.315.04-.12.02-.375-.07-.466l-4.67-4.8c-.06-.06-.14-.1-.22-.1-.08 0-.16.03-.22.09l-4.67 4.79c-.09.09-.12.34-.07.46.05.12.16.31.28.31H20v4.79c0 .173-.383.21-.21.21h3.497c.083 0 .363.02.42-.04zM1.9 16h10c.825 0 1.1-.675 1.1-1.5V9c0-.825-.275-1-1.1-1H11V4.5C11 2.02 8.98 0 6.5 0S2 2.02 2 4.5V8c-1 0-2 .175-2 1v5.5c0 .825 1.075 1.5 1.9 1.5zM4 4.5C4 3.12 5.12 2 6.5 2S9 3.12 9 4.5V8H4V4.5z"/></symbol><symbol viewBox="0 0 32 32" id="icon-gas"><title>gas</title><path d="M26.616 15.188c-1.317-4.09-4.083-7.55-7.437-10.244-1.41-1.132-2.92-2.138-4.5-3.033-.65-.36-1.31-.71-1.98-1.04-.51-.26-1.01-.51-1.54-.74-.24-.1-.51-.17-.75-.08-.08.03-.14.07-.2.12-.03.02-.05.05-.07.08-.21.25-.18.61-.11.93.38 1.78.15 3.97-.21 5.74-.57 2.778-1.76 5.407-3.3 7.787-2.02 3.12-2.49 7.01-1.62 10.493.65 2.622 2.7 4.613 5.29 5.84-.07-.095-.16-.184-.23-.286-1.92-2.82-.57-6.08 1.03-8.69.813-1.336 1.753-2.62 2.49-3.99.364-.684.65-1.42.823-2.173.144-.63.2-1.37.11-2.01-.037-.23 0-.51.21-.62.11-.05.24-.043.355-.02.72.13 1.34.625 1.92 1.025.72.49 1.38 1.045 1.995 1.654.63.63 1.2 1.307 1.72 2.01 2.3 3.11 2.722 7.136 1.546 10.644-.417 1.24-1.13 2.52-2.2 3.44 4.702-1.18 6.92-4.46 7.4-8.777.3-2.7.08-5.45-.76-8.04z"/></symbol><symbol viewBox="0 0 32 32" id="icon-gauge"><title>gauge</title><path d="M16 .004c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zm-1 4.063c0-.553.447-1 1-1 .553 0 1 .447 1 1v1.875c0 .553-.447 1-1 1-.553 0-1-.447-1-1V4.067zm-4.91 5.635c-.385.396-1.017.404-1.413.02L7.334 8.41c-.396-.382-.404-1.014-.02-1.41.387-.397 1.02-.406 1.415-.02l1.34 1.308c.39.386.4 1.018.02 1.414zm1.43-2.598l-.79-1.7c-.234-.5-.018-1.095.483-1.33.5-.232 1.095-.016 1.33.485l.79 1.7c.234.5.018 1.09-.483 1.32-.502.23-1.096.01-1.33-.49zm7.555 17.386c-.613 1.552-2.368 2.312-3.92 1.7-1.552-.614-2.445-2.37-1.83-3.92.333-.848.675-1.447 1.675-1.728v-8.91c0-.553.447-1 1-1 .553 0 1 .447 1 1v8.906c0 .013.207.017.244.03 1.55.615 2.444 2.37 1.83 3.922zm2.727-19.085l-.792 1.7c-.233.5-.828.718-1.33.484-.5-.24-.717-.83-.483-1.33l.792-1.7c.23-.5.82-.72 1.32-.49.5.23.72.82.48 1.33zm3.395 3.008L23.854 9.72c-.396.387-1.03.378-1.414-.018s-.377-1.03.02-1.414L23.8 6.98c.396-.386 1.03-.377 1.414.02.386.395.378 1.027-.02 1.413z"/></symbol><symbol viewBox="0 0 32 32" id="icon-github"><title>github</title><path fill-rule="evenodd" fill="#221E1B" d="M16 0C7.2 0 0 7.3 0 16.4 0 23.7 4.6 29.8 10.9 32c.8.2 1.1-.4 1.1-.8v-2.8c-4.5 1-5.4-2.2-5.4-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.4 2.5 3.7 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.3-1.8-7.3-8.1 0-1.8.6-3.3 1.6-4.4-.2-.4-.7-2.1.2-4.3 0 0 1.3-.4 4.4 1.7 1.3-.4 2.6-.5 4-.6 1.4 0 2.7.2 4 .6 3.1-2.1 4.4-1.7 4.4-1.7.9 2.3.3 3.9.2 4.3 1 1.1 1.6 2.6 1.6 4.4 0 6.3-3.7 7.7-7.3 8.1.6.5 1.1 1.5 1.1 3v4.5c0 .4.3.9 1.1.8C27.4 29.8 32 23.7 32 16.4 32 7.3 24.8 0 16 0z"/></symbol><symbol viewBox="0 0 31.36 32" id="icon-google-brand"><title>google-brand</title><path d="M31.36 16.36a18.49 18.49 0 0 0-.29-3.27H16v6.19h8.61a7.35 7.35 0 0 1-3.19 4.83v4h5.17a15.6 15.6 0 0 0 4.77-11.76z" fill="#4285f4"/><path d="M16 32a15.28 15.28 0 0 0 10.59-3.88l-5.17-4A9.66 9.66 0 0 1 7.05 19H1.68v4.14A16 16 0 0 0 16 32z" fill="#34a853"/><path d="M7.05 19a9.46 9.46 0 0 1 0-6.08V8.81H1.68a16 16 0 0 0 0 14.37z" fill="#fbbc05"/><path d="M16 6.36a8.64 8.64 0 0 1 6.12 2.39l4.56-4.58A15.39 15.39 0 0 0 16 0 16 16 0 0 0 1.68 8.81L7.05 13A9.54 9.54 0 0 1 16 6.36z" fill="#ea4335"/></symbol><symbol viewBox="0 0 32 32" id="icon-google"><title>google</title><path d="M16 0C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0zm-4.2 23.4c-4.1 0-7.4-3.3-7.4-7.4s3.3-7.4 7.4-7.4c2 0 3.7.7 5 1.9l-2 1.9c-.5-.5-1.5-1.2-3-1.2-2.4 0-4.6 2.1-4.6 4.7s2 4.7 4.6 4.7c3 0 4-2.1 4.2-3.2h-4.2V15h7c0 .4.1.7.1 1.3 0 4.1-2.9 7.1-7.1 7.1zm13.8-6.3v2.1h-2.1v-2.1h-2.1V15h2.1v-2.1h2.1V15h2.1v2.1h-2.1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-graph-up"><title>graph-up</title><path d="M10 17.336V32h5V19.065l-3.362-3.375zm7 3.576V32h5V15.895l-3.662 3.675zm6.903-7.124L23.9 31.976l5.1.028V8.837l-.375.31zm-19.597 9.42L3 24.372V32h5V20h-.358zM31.486 0h-8.054c-.44 0-.662.534-.35.846l2.635 2.644.015.016-9.006 9.04-5.28-5.303L0 18.75l2.795 2.805 8.65-8.7 5.282 5.304.08-.08 3.653-3.67 8.067-8.1 2.61 2.61c.315.31.863.09.863-.36V.5c0-.272-.237-.5-.513-.5z"/></symbol><symbol viewBox="0 0 32 32" id="icon-home"><title>home</title><path d="M31.407 15.023L26 9.885V2h-4v3.79L16.776.39c-.516-.514-1.334-.514-1.85 0L.292 15.023c-.393.392-.486.8-.273 1.313.21.513.74.664 1.29.664H3v13H1.977c-.575 0-1.04.427-1.04 1s.465 1 1.04 1H30.17c.574 0 1.04-.427 1.04-1s-.466-1-1.04-1H29V17h1.684c.557 0 .933-.15 1.147-.664.22-.513-.03-.92-.42-1.313zM14 30H8V17h6v13zm10-7h-6v-6h6v6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-hot"><title>hot</title><path d="M17 19.195v-7.93c0-.666-.337-1.205-1-1.205-.66 0-1 .538-1 1.205v7.93c-2 .517-3.03 2.1-3.03 3.973 0 2.294 1.8 4.154 4.08 4.154 2.28 0 4.003-1.86 4.003-4.154 0-1.873-1.053-3.456-3.053-3.973zm5-2.923V5.526C22 2.48 19.025.004 16 .004c-3.026 0-6 2.477-6 5.522v10.746c-2 1.66-3.038 4.19-3.038 6.896 0 4.872 4.068 8.836 8.91 8.836 4.84 0 9.1-3.963 9.1-8.836 0-2.705-.972-5.236-2.972-6.896zm-6 13.32c-3.526 0-6.34-2.874-6.34-6.423 0-2.42 1.34-4.53 3.34-5.63V5.52c0-1.72 1.294-3.11 3-3.11 1.707 0 3 1.397 3 3.11v12.03c2 1.094 3.338 3.2 3.338 5.617 0 3.55-2.81 6.425-6.338 6.425z"/></symbol><symbol viewBox="0 0 32 32" id="icon-info"><title>info</title><path d="M15.9.004c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM13.792 5.54c.534-.494 1.17-.74 1.91-.74s1.374.246 1.903.74c.53.492.794 1.085.794 1.78 0 .693-.27 1.284-.81 1.772s-1.17.732-1.9.732c-.74 0-1.38-.244-1.91-.732s-.8-1.08-.8-1.773c0-.7.26-1.29.8-1.78zM20 26h-8v-1.008c0-.018.343-.04.57-.068.23-.027.362-.073.526-.137.292-.11.553-.267.67-.472.12-.206.234-.477.234-.815v-7.968c0-.32-.16-.6-.306-.842s-.372-.436-.59-.582c-.165-.11-.137-.214-.47-.315-.333-.1-.634-.163-.634-.19v-1l6.25-.356-.25.205v10.87c0 .32.227.59.364.815.137.224.412.39.668.5.183.082.224.155.443.22.22.062.525.108.525.135V26z"/></symbol><symbol viewBox="0 0 32 32" id="icon-kettle"><title>kettle</title><path d="M31.983 26c0-3.997-1.984-7.12-3.983-9.62v-5.855c0-5.8-4.65-10.52-10.5-10.52S7 4.723 7 10.525v5.855c0 .283-.44.575-.672.878l-1.16-1.18c-.78-.774-2.03-.774-2.81 0L.592 17.834c-.78.774-.777 2.028.004 2.802l3.055 3.132c.6.86.35 6.253.35 6.253 0 1.1.37 1.98 1.48 1.98h24.51c1.1 0 2.01-.88 2.01-1.97v-3.97c0-.04 0-.05-.01-.06zM14.815 10.67c0 .447.053.865.235 1.242-1.806.337-3.05 1.006-5.05 1.948v-3.336c0-4.162 3.302-7.55 7.5-7.55S25 6.36 25 10.524v3.336c-1-.942-3.015-1.61-4.82-1.95.18-.376.377-.794.377-1.24 0-1.596-1.262-2.89-2.87-2.89s-2.872 1.295-2.872 2.89zM28.237 29H25v-4.84c0-2.842-3.52-8.2-6.61-8.623 6.635.294 9.932 5.245 9.9 8.74-.033 3.495-.053 4.723-.053 4.723z"/></symbol><symbol viewBox="0 0 32 32" id="icon-key"><title>key</title><path d="M32 25.774c.01-.175-.054-.346-.178-.47L19.714 13.197c1.118-3.49.3-7.464-2.468-10.233C13.3-.98 6.904-.98 2.96 2.964-.987 6.91-.987 13.306 2.96 17.25c2.768 2.77 6.74 3.587 10.23 2.47l1.755 1.755c.12.12.284.183.454.177l4.78-.187L20 26.14c-.012.34.293.648.63.63l4.676-.18-.185 4.79c0 .17.06.333.18.452.16.146.3.187.47.176l5.67.002c.31-.02.55-.263.57-.565V25.78zM9.663 9.668C8.43 10.9 6.433 10.9 5.2 9.668s-1.234-3.232 0-4.465 3.23-1.233 4.464 0 1.233 3.233 0 4.465z"/></symbol><symbol viewBox="0 0 32 32" id="icon-lock"><title>lock</title><path d="M25.9 15H25V9.004c0-4.963-4.037-9-9-9s-9 4.037-9 9V15H5.9C4.25 15 3 16.354 3 18.004v11C3 30.654 4.25 32 5.9 32h20c1.65 0 3.1-1.346 3.1-2.996v-11C29 16.354 27.55 15 25.9 15zM11 9.004c0-2.76 2.24-5 5-5s5 2.24 5 5V15H11V9.004z"/></symbol><symbol viewBox="0 0 32 32" id="icon-magnify-in"><title>magnify-in</title><path d="M15 6h-4v5H6v3h5v5h4v-5h4v-3h-4zm16.415 20.99l-.193-.192-7.69-7.722c1.067-1.848 1.688-4 1.703-6.29C25.28 5.773 19.655 0 12.675 0h-.085C5.647 0-.005 5.438-.05 12.42-.092 19.43 5.53 25 12.513 25h.083c2.32 0 4.496-.428 6.367-1.526l7.684 7.817c.192.2.193.25.193.25.58.59 1.522.61 2.103.03l2.472-2.47c.58-.58.58-1.51 0-2.1zM19.23 19.338C17.455 21.11 15.098 22 12.596 22h-.062c-5.193 0-9.39-4.347-9.358-9.56C3.208 7.26 7.432 3 12.59 3h.064c2.516 0 4.875 1.144 6.642 2.94 1.767 1.798 2.732 4.2 2.716 6.728-.017 2.514-1.004 4.898-2.78 6.67z"/></symbol><symbol viewBox="0 0 32 32" id="icon-magnify"><title>magnify</title><path d="M31.415 26.982l-.193-.193-7.69-7.73c1.067-1.85 1.688-4 1.703-6.29.045-7-5.58-12.77-12.56-12.77h-.084C5.65 0 0 5.43-.05 12.42-.092 19.43 5.53 25 12.513 25h.083c2.32 0 4.673-.433 6.544-1.53L27 31.288v.047l.015.217c.58.584 1.435.595 2.016.012l2.43-2.475c.58-.59.54-1.53-.04-2.11zm-12.184-7.65C17.46 21.106 15.1 22 12.6 22h-.062c-5.193 0-9.39-4.347-9.358-9.56C3.208 7.26 7.432 3 12.59 3h.064c2.516 0 4.875 1.14 6.642 2.936 1.767 1.797 2.732 4.2 2.716 6.727-.017 2.515-1.004 4.898-2.78 6.67z"/></symbol><symbol viewBox="0 0 32 32" id="icon-menu"><title>menu</title><path d="M29.5 13h-27C1.12 13 0 14.343 0 16s1.12 3 2.5 3h27c1.38 0 2.5-1.343 2.5-3s-1.12-3-2.5-3zm0 10h-27C1.12 23 0 24.343 0 26s1.12 3 2.5 3h27c1.38 0 2.5-1.343 2.5-3s-1.12-3-2.5-3zM2.5 9h27C30.88 9 32 7.657 32 6s-1.12-3-2.5-3h-27C1.12 3 0 4.343 0 6s1.12 3 2.5 3z"/></symbol><symbol viewBox="0 0 32 32" id="icon-message"><title>message</title><path d="M28.7 1H3.1C1.333 1 0 3.104 0 4.87v16C0 22.64 1.333 24 3.1 24H5v5.05s-.18 1.155.67 1.56c1.067.503 2.032-.346 2.032-.346L13.85 24H28.7c1.767 0 3.3-1.362 3.3-3.13v-16C32 3.105 30.468 1 28.7 1zm.3 19.87c0 .11-.19.13-.3.13H12.697L8 25.877V21H3.1c-.11 0-.1-.02-.1-.13v-16c0-.11-.01-.87.1-.87h25.6c.11 0 .3.76.3.87v16zM23.915 14H7.885c-.768 0-1.39.73-1.39 1.5s.622 1.5 1.39 1.5h16.03c.77 0 1.392-.73 1.392-1.5s-.623-1.5-1.392-1.5zm0-6H7.885c-.768 0-1.39.73-1.39 1.5s.622 1.5 1.39 1.5h16.03c.77 0 1.392-.73 1.392-1.5S24.684 8 23.915 8z"/></symbol><symbol viewBox="0 0 32 32" id="icon-mobile"><title>mobile</title><path d="M25 2.836C25 1.27 23.73 0 22.164 0H9.836C8.27 0 7 1.27 7 2.836v26.33C7 30.73 8.27 32 9.836 32h12.33C23.73 32 25 30.73 25 29.164V2.836zM12.898 2H18.9c.498 0 .9.504.9 1s-.402 1-.898 1H12.9c-.498 0-.9-.504-.9-1s.402-1 .898-1zM15.9 30.372c-.832 0-1.512-.68-1.512-1.512 0-.83.68-1.512 1.512-1.512s1.512.68 1.512 1.512-.68 1.512-1.512 1.512zM23 26H9V5h14v21z"/></symbol><symbol viewBox="0 0 32 32" id="icon-monthly-dd"><title>monthly-dd</title><path d="M7.5 5.625c.828 0 1.5-.672 1.5-1.5V1.5C9 .672 8.328 0 7.5 0S6 .672 6 1.5v2.623c0 .83.672 1.502 1.5 1.502zm17 0c.828 0 1.5-.672 1.5-1.5V1.5c0-.828-.672-1.5-1.5-1.5S23 .672 23 1.5v2.623c0 .83.672 1.502 1.5 1.502zM29 3h-1v1.125c0 1.93-1.57 3.5-3.5 3.5s-3.5-1.57-3.5-3.5V3H11v1.125c0 1.93-1.57 3.5-3.5 3.5S4 6.055 4 4.125V3H3C1.343 3 0 4.567 0 6.223v22.614C0 30.494 1.343 32 3 32h26c1.657 0 3-1.506 3-3.163V6.223C32 4.567 30.657 3 29 3zm0 26H3V9h26v20zM15 19c0-2.977-.83-5-3.94-5H7v10h4.06c3.11 0 3.94-2.054 3.94-5zm-6 3v-6h1.31c1.62 0 2.69 1.288 2.69 3 0 1.71-1.07 3-2.69 3H9zm16-3c0-2.977-1.113-5-4.224-5H17v10h3.776C23.886 24 25 21.946 25 19zm-6 3v-6h1.31c1.62 0 2.69 1.29 2.69 3 0 1.712-1.07 3-2.69 3H19z"/></symbol><symbol viewBox="0 0 32 32" id="icon-network"><title>network</title><path d="M28.5 24c-1.4 0-2.6.8-3.2 2H9v-.6l11.1-11.1c1.2.4 2.7.2 3.6-.8 1.4-1.4 1.4-3.6 0-4.9-1.4-1.4-3.6-1.4-4.9 0-1 1-1.2 2.4-.8 3.6L7.2 23H6V6.7c1.2-.6 2-1.8 2-3.2C8 1.6 6.4 0 4.5 0S1 1.6 1 3.5c0 1.4.8 2.6 2 3.2V23H0v9h9v-3h16.3c.6 1.2 1.8 2 3.2 2 1.9 0 3.5-1.6 3.5-3.5S30.4 24 28.5 24z"/></symbol><symbol viewBox="0 0 32 32" id="icon-no-exit"><title>no-exit</title><path d="M15.9.004c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zm0 28c-6.627 0-12-5.373-12-12 0-2.29.64-4.427 1.753-6.247l16.495 16.495c-1.82 1.11-3.96 1.752-6.248 1.752zm10.248-5.753L9.653 5.76c1.82-1.112 3.96-1.753 6.247-1.753 6.627 0 12 5.373 12 12 0 2.29-.64 4.428-1.752 6.247z"/></symbol><symbol viewBox="0 0 32 32" id="icon-pdf"><title>pdf</title><path d="M26.213 18.425c-.427-.42-1.372-.643-2.812-.662-.97-.01-2.14.075-3.38.248-.55-.31-1.12-.66-1.56-1.08-1.2-1.12-2.2-2.68-2.83-4.39.04-.16.08-.3.11-.44 0 0 .68-3.84.5-5.14-.02-.18-.04-.23-.09-.37l-.06-.15c-.18-.42-.54-.65-1.11-.63l-.33.2h-.01c-.63 0-1.14.11-1.28.59-.41 1.52.02 3.67.78 6.6l-.19.43c-.55 1.34-1.24 2.66-1.84 3.86l-.08.14c-.64 1.25-1.22 2.308-1.744 3.207l-.545.28c-.04.02-.97.51-1.185.645-1.85 1.107-3.08 2.36-3.28 3.357-.067.32-.02.724.31.913l.526.26c.23.11.47.17.716.17 1.32 0 2.85-1.643 4.96-5.324 2.438-.798 5.21-1.45 7.64-1.82 1.85 1.044 4.126 1.77 5.564 1.77.253 0 .473-.027.652-.075.278-.07.51-.23.65-.44.28-.42.337-1 .26-1.59-.023-.175-.163-.39-.315-.54zm-19.7 7.018c.24-.658 1.194-1.958 2.6-3.11.09-.073.308-.277.507-.467-1.472 2.348-2.457 3.284-3.106 3.577zm8.338-19.2c.43 0 .67 1.07.69 2.07s-.21 1.706-.5 2.226c-.24-.77-.35-1.99-.35-2.78 0 0-.01-1.52.18-1.52zm-2.48 13.683c.3-.53.61-1.086.92-1.677.77-1.45 1.25-2.58 1.61-3.52.72 1.3 1.61 2.41 2.66 3.29.13.11.27.22.42.33-2.13.42-3.97.93-5.59 1.56zm13.44-.12c-.13.08-.5.128-.74.128-.77 0-1.72-.353-3.06-.927.52-.038.99-.057 1.41-.057.78 0 1.01-.003 1.76.19s.77.584.64.666zm2.38-13.57L23.7 1.77C22.725.798 20.775 0 19.4 0h-15C3.025 0 2 1.13 2 2.504v27C2 30.88 3.025 32 4.4 32h23c1.375 0 2.6-1.12 2.6-2.496v-19c0-1.375-.845-3.296-1.818-4.268zm-1.47 1.412c.1.098.2.352.29.352H22V2.896c0 .095.206.19.304.29l4.414 4.462zM28 29.504c0 .27-.33.496-.6.496h-23c-.27 0-.4-.225-.4-.496v-27c0-.27.13-.504.4-.504h15c.15 0 .6.023.6.057V10h7.847c.034 0 .153.353.153.504v19z"/></symbol><symbol viewBox="0 0 32 32" id="icon-pencil"><title>pencil</title><path d="M21.877.004l-2.916 2.83s9.73 9.76 9.73 9.663c0-.098 2.82-2.928 2.82-2.928L21.88 0zm-3.79 3.904L2.443 20.488.5 32.003l11.665-1.757L27.71 13.57l-9.624-9.662zM5.167 28.88l-1.46-1.463.78-4.978 1.146-1.24.035.03-.02.02 5.745 5.69-1.175 1.23-5.054.68z"/></symbol><symbol viewBox="0 0 32 32" id="icon-person-add"><title>person-add</title><path d="M30.443 21.938c-.306-.58-.69-1.11-1.14-1.572-.3-.31-.627-.588-.98-.833-1.055-.736-2.327-1.166-3.695-1.166-1.368 0-2.64.43-3.697 1.166-.35.245-.68.525-.98.833-.44.463-.83.992-1.14 1.572-.51.966-.8 2.072-.8 3.247 0 1.175.29 2.282.8 3.248 1.13 2.125 3.31 3.57 5.82 3.57 2.51 0 4.7-1.445 5.82-3.57.51-.966.8-2.073.8-3.248 0-1.175-.29-2.28-.8-3.247zM28 26h-2v2.163c0 .55-.45 1-1 1s-1-.45-1-1V26h-2c-.55 0-1-.45-1-1s.45-1 1-1h2v-1.837c0-.55.45-1 1-1s1 .45 1 1V24h2c.55 0 1 .45 1 1s-.45 1-1 1zm-10.958 3.366c-.674-1.277-1.03-2.723-1.03-4.18 0-1.46.355-2.904 1.03-4.182.393-.745.89-1.427 1.473-2.03.387-.4.814-.763 1.27-1.08.764-.532 1.597-.92 2.47-1.176 1.09-1.754 1.75-3.95 1.75-6.348 0-1.18-.166-2.31-.455-3.366-1.114-4.07-4.182-7-7.802-7-3.307 0-6.15 2.447-7.47 5.972-.497 1.336-.785 2.82-.785 4.394 0 3.778 1.615 7.075 4.02 8.886.24 1.424-.604 2.342-2.004 3.012-5.46.788-9.27 2.572-9.27 4.65 0 2.808 6.94 5.084 15.5 5.084 1.13 0 2.22-.052 3.29-.13-.8-.693-1.49-1.53-2-2.506z"/></symbol><symbol viewBox="0 0 32 32" id="icon-person"><title>person</title><path d="M22.847 22.33c-1.604-.713-2.538-1.7-2.156-3.297 2.32-1.853 3.85-5.038 3.85-8.663 0-1.18-.17-2.31-.47-3.366-1.15-4.07-4.31-7-8.05-7-3.41 0-6.34 2.447-7.7 5.972-.51 1.336-.81 2.82-.81 4.394 0 3.778 1.67 7.075 4.15 8.886.25 1.424-.62 2.342-2.07 3.012C3.96 23.056.02 24.84.02 26.92c0 2.807 7.162 5.083 16 5.083s16-2.276 16-5.083c0-2.03-3.755-3.777-9.17-4.59z"/></symbol><symbol viewBox="0 0 32 32" id="icon-phone"><title>phone</title><path d="M3.25 9.87c.82 3.74 3.61 8.43 7.83 12.65 4.22 4.22 8.91 7 12.65 7.83 2.42.53 4.45.24 5.7-1.01l2.12-2.11c.88-.88.88-2.31 0-3.19l-5.36-3.68c-.88-.88-2.31-.88-3.19 0l-1.76 1.76c-1.07 1.07-4.11-.25-6.8-2.94-2.69-2.69-4.01-5.74-2.94-6.8l1.76-1.76c.88-.88.88-2.31 0-3.19l-3.7-5.37c-.88-.88-2.31-.88-3.19 0L4.26 4.17c-1.25 1.25-1.54 3.28-1.01 5.7z"/></symbol><symbol viewBox="0 0 32 32" id="icon-piggy-bank"><title>piggy-bank</title><path d="M32 11.007c0-1.3-1.078-2.356-2.407-2.356-.583 0-1.11.22-1.526.55C25.492 5.99 21.053 3.86 16 3.86c-1.99 0-3.888.33-5.613.927l-3.3-1.63c-.42-.206-.98-.187-1.38.054-.4.24-.707.67-.707 1.13v3.58C4 8.8 3.414 10 2.83 11h-.864C.886 11 0 11.724 0 12.783v5.72C0 19.56.885 20 1.966 20h.864C3.473 22 4 22.685 5 23.624v4.223C5 28.883 6.276 29 7.335 29h2.888c1.06 0 1.777-.117 1.777-1.154v-.853c1 .278 2.664.438 4 .438 1.336 0 3-.16 4-.43v.86c0 1.04.718 1.16 1.777 1.16h2.888c1.06 0 2.335-.11 2.335-1.15v-4.23c2-2.1 3.624-4.892 3.624-7.98 0-.8-.202-1.58-.39-2.34 1.07-.24 1.766-1.17 1.766-2.29zm-24.766 2.72c-.827 0-1.498-.655-1.498-1.465s.67-1.466 1.498-1.466 1.498.656 1.498 1.466-.67 1.466-1.498 1.466z"/></symbol><symbol viewBox="0 0 32 32" id="icon-pin"><title>pin</title><path d="M15.9.004c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zm0 16c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-play"><title>play</title><path d="M16 2C8.3 2 2 8.3 2 16s6.3 14 14 14 14-6.3 14-14S23.7 2 16 2zm-3.1 19.6V10.4l8.4 5.6-8.4 5.6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-pound-circle"><title>pound-circle</title><path d="M16 0C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0zm3.1 14.5v2.4h-4.2v4.7h6V24H9.6v-2.4h2.2v-4.7H10v-2.4h1.8v-2.2c0-2.8 2.2-4.8 5.2-4.8 1.2 0 2.5.3 3.9.8l-.8 2.3c-.9-.4-1.7-.6-2.5-.6-1.5 0-2.6 1-2.6 2.5v1.9h4.1v.1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-pound-note"><title>pound-note</title><path d="M32 7.997C32 6.342 30.658 5 29.003 5H2.997C1.342 5 0 6.342 0 7.997v17.005C0 26.658 1.342 28 2.997 28h26.005C30.658 28 32 26.658 32 25.003V7.997zM29 26H3V8h26v18zM8.49 17c0-2.94 1.696-5 4.16-7H5v14h7.65c-2.464-2-4.16-4.06-4.16-7zm15.02 0c0 2.94-1.696 5-4.16 7H27V10h-7.65c2.464 2 4.16 4.06 4.16 7zm-10.8-2.02c.136.34.274 1.02.412 1.02H12v2h1.606c.072 0 .134-.356.185-.205.05.152.08-.025.08.13 0 .248-.04.317-.14.543-.09.224-.21.35-.35.543-.14.2-.31.33-.49.49-.18.16-.37.28-.57.4l.86 1.26c.27-.2.54-.34.81-.41.27-.07.53-.1.78-.1.31 0 .56.03.76.08.2.06.406.12.608.19.19.07.404.12.635.17.23.05.52.07.87.07.348 0 .71-.06 1.087-.19.38-.12.73-.35 1.06-.67l-.82-1.39c-.248.27-.468.43-.654.5-.19.07-.374.1-.555.1-.185 0-.362-.01-.54-.044-.172-.033-.35-.07-.534-.12-.186-.034-.365-.07-.545-.1-.18-.033-.36-.05-.542-.05-.126 0-.26.02-.4.058-.136.037-.315.126-.535.26l-.03-.026c.308-.24.57-.51.8-.82.22-.306.33-.676.33-1.106 0-.155-.004.36-.02.225-.012-.142-.043.248-.09.248H17v-2h-1.77c-.138 0-.247-.706-.323-.88-.078-.175-.134-.454-.165-.586-.033-.136-.053-.315-.064-.415-.01-.1-.015-.235-.015-.35 0-.38.124-.703.365-.932.245-.23.572-.352.986-.352.348 0 .622.07.82.21.197.14.343.31.44.5.097.196.158.74.185.95.02.206.04.86.05.86h1.86c0-1-.3-2.32-.88-2.903-.59-.59-1.41-1.055-2.47-1.055-.58 0-1.09-.015-1.53.13-.44.15-.81.304-1.1.556-.29.254-.52.524-.67.854-.15.33-.23.79-.23 1.16 0 .42.07.91.2 1.246z"/></symbol><symbol viewBox="0 0 32 32" id="icon-present"><title>present</title><path d="M15 9H5.892C4.24 9 3 10.31 3 11.964V19h12V9zm10.932 23C27.585 32 29 30.65 29 28.998V21H17v11h8.932zM15 32V21H3v7.998C3 30.65 4.24 32 5.892 32H15zM25.932 9H17v10h12v-7.036C29 10.31 27.585 9 25.932 9zM21.05.004c-1.863 0-2.992 1.6-3.9 2.886-.17.243-.34.482-.51.704l-.468.623-.26.346-.263-.35-.47-.62c-.17-.22-.34-.46-.51-.703-.91-1.286-2.04-2.886-3.9-2.886-2.19 0-3.96 1.776-3.96 3.958 0 2.183 1.77 3.96 3.95 3.96.34 0 1.09-.006 1.98-.012 1.03-.007 2.22-.014 3.16-.016.93.003 2.13.01 3.16.016.89.006 1.64.01 1.98.01 2.18 0 3.96-1.775 3.96-3.958C25 1.78 23.22.004 21.04.004zm-8.313 5.902c-.88.006-1.63.01-1.965.01-1.077 0-1.954-.876-1.954-1.954 0-1.077.877-1.954 1.954-1.954.826 0 1.556 1.035 2.263 2.037.186.263.37.523.553.764l.455.6.362.48-1.668.01zm8.314.01c-.33 0-1.08-.004-1.96-.01l-1.67-.01.36-.48.46-.607c.19-.25.37-.51.56-.77.71-1 1.44-2.04 2.27-2.04 1.08 0 1.96.87 1.96 1.95S22.15 5.9 21.08 5.9z"/></symbol><symbol viewBox="0 0 32 32" id="icon-print"><title>print</title><path d="M20.247 15H11.75c-.55 0-.998.448-.998 1s.447 1 1 1h8.495c.552 0 1-.448 1-1s-.448-1-1-1zm0 4H11.75c-.55 0-.998.448-.998 1s.447 1 1 1h8.495c.552 0 1-.448 1-1s-.448-1-1-1zm8.755-12H25V3.128C25 2.008 24.253 1 23.133 1H8.867C7.747 1 7 2.01 7 3.128V7H2.998C1.348 7 0 7.937 0 9.586v8.864C0 20.1 1.35 21 2.998 21H7v3.663l1.946 2.026 2.15 2.23L13.083 31h10.05C24.253 31 25 30 25 28.88V21h4.002c1.65 0 2.998-.9 2.998-2.55V9.586C32 7.936 30.65 7 29.002 7zM9 3h14v4H9V3zm18 16h-2v-4h-2v14h-7.918L15 28.88v-4.216C15 23.56 14.186 23 13.083 23H9v-8H7v4H5v-6h22v6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-quarterly-dd"><title>quarterly-dd</title><path d="M16 0C7.164 0 0 7.163 0 16s7.164 16 16 16 16-7.163 16-16S24.836 0 16 0zm0 29C8.832 29 3 23.168 3 16S8.832 3 16 3v13h13c0 7.168-5.832 13-13 13z"/></symbol><symbol viewBox="0 0 32 32" id="icon-question-circle"><title>question-circle</title><path d="M16 .004c-8.835 0-16 7.165-16 16s7.165 16 16 16 16-7.165 16-16-7.165-16-16-16zm-.266 26.87c-1.406 0-2.408-1.096-2.408-2.503 0-1.37 1.002-2.31 2.408-2.31 1.405 0 2.408.94 2.408 2.32 0 1.41-1.003 2.51-2.408 2.51zm1.72-7.35l-.03.476H14v-1.01c0-3.693 4.264-4.785 4.264-7.6 0-1.72-1.297-2.877-3.08-2.877-1.316 0-2.56.564-3.96 1.437l-1.53-2.847c1.907-1.282 4.003-1.968 6.13-1.968 3.79 0 6.477 2.488 6.477 5.805 0 4.5-4.53 5.96-4.84 8.585z"/></symbol><symbol viewBox="0 0 32 32" id="icon-quote"><title>quote</title><path d="M28.232 6.235L23.768 1.77C22.795.796 20.875 0 19.5 0h-15C3.127 0 2 1.127 2 2.502v27.003C2 30.88 3.126 32 4.5 32h23c1.374 0 2.5-1.12 2.5-2.494V10.503c0-1.375-.796-3.296-1.768-4.268zM22 2.895c0 .095.255.192.353.29l4.464 4.463c.098.098.195.352.29.352H22V2.895zm6 26.61c0 .272-.23.495-.5.495h-23c-.27 0-.5-.223-.5-.494V2.502c0-.27.23-.502.5-.502h15c.15 0 .5.022.5.056V10h7.945c.034 0 .055.352.055.503v19.003zM8.5 15H17c.552 0 1-.447 1-1 0-.553-.448-1-1-1H8.5c-.553 0-1 .447-1 1 0 .553.447 1 1 1zM23 18H8.5c-.553 0-1 .447-1 1 0 .553.447 1 1 1H23c.552 0 1-.447 1-1 0-.553-.448-1-1-1zm0 5H8.5c-.553 0-1 .447-1 1 0 .553.447 1 1 1H23c.552 0 1-.447 1-1 0-.553-.448-1-1-1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-recycle"><title>recycle</title><path d="M31.164.87L27.312 4.7C24.417 1.812 20.417.002 16 .002 7.132.002-.048 7 0 16h4.004S4 15.987 4 15.958C4 12.762 5.246 9.8 7.513 7.54 9.78 5.28 12.793 4.035 16 4.035s6.218 1.244 8.484 3.504l-3.62 3.6c-.32.32-.093.85.36.85h9.766c.558 0 1.01-.44 1.01-1V1.22c0-.435-.528-.664-.836-.356zM28 16.046c0 3.196-1.247 6.16-3.514 8.42-2.267 2.26-5.28 3.505-8.485 3.505s-6.21-1.24-8.48-3.5l3.62-3.61c.32-.31.1-.85-.36-.85H1.01C.453 20 0 20.45 0 21v9.78c0 .436.528.665.836.357l3.85-3.83c2.896 2.89 6.896 4.695 11.314 4.695C24.867 32.002 32.047 25 32 16h-4.004s.005.017.005.046z"/></symbol><symbol viewBox="0 0 32 32" id="icon-remove"><title>remove</title><path d="M24.63 10H7.37c-1 0-1.743.906-1.653 2l1.488 18.007C7.295 31.1 8.187 32 9.187 32h13.627c1 0 1.89-.894 1.98-1.988L26.284 12c.09-1.095-.653-2-1.653-2zM12 28.05c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5V13.81c0-.827.448-1.498 1-1.498s1 .67 1 1.5V28.05zm5 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5V13.81c0-.827.448-1.498 1-1.498s1 .67 1 1.5V28.05zm5 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5V13.81c0-.827.448-1.498 1-1.498s1 .67 1 1.5V28.05zM24.993 4H23V1.003C23 .45 22.497 0 21.944 0H10.478C9.926 0 9 .45 9 1.003V4H7.007C5.35 4 4 5.367 4 7.023V8h24v-.977C28 5.367 26.65 4 24.993 4zM21 4H11V2h10v2z"/></symbol><symbol viewBox="0 0 32 32" id="icon-renewable"><title>renewable</title><path d="M15.902.004C7.065.004-.1 7.166-.1 16.004c0 4.614 1.968 8.765 5.097 11.682.275-3.668 1.398-6.39 2.935-8.334 1.795-2.268 4.17-3.507 6.532-3.912 3.447-.594 5.26-1.512 6.252-2.39.543-.547.785-2.07.785-2.07s-1.45.9-2.04 1.22c-.73.502-2.35 1.317-5.24 1.812-2.68.458-5.4 1.882-7.42 4.442-.36.462-.71.963-1.02 1.5-2.38-5.23 2.79-9.246 8.63-10.018 6.41-.846 9.49-2.82 9.49-2.82.61 6.205-1.64 12.942-6.96 15.138-3.83 1.58-6.83 1.898-8.95.476-.84 1.796-1.35 3.87-1.38 6.267 2.628 1.884 5.835 3.008 9.315 3.008 8.838 0 16-7.163 16-16 0-8.836-7.16-16-15.996-16z"/></symbol><symbol viewBox="0 0 32 32" id="icon-results"><title>results</title><path d="M0 9h27v6H0zm0-8h32v6H0zm0 16h24v6H0zm0 8h19v6H0z"/></symbol><symbol viewBox="0 0 32 32" id="icon-save"><title>save</title><path d="M31.12 5.753L26.25.88C25.688.32 24.925 0 24.13 0H5.437C2.437 0 0 2.443 0 5.442v21.125C0 29.565 2.44 32 5.438 32h21.125C29.56 32 32 29.565 32 26.566V7.874c0-.795-.316-1.56-.88-2.12zM18 3h3v7h-3V3zm11 23.566C29 27.906 27.903 29 26.562 29H5.438C4.098 29 3 27.907 3 26.566V5.442C3 4.102 4.097 3 5.438 3H6v9h17V3h1.13L29 7.874v18.692z"/></symbol><symbol viewBox="0 0 32 32" id="icon-share"><title>share</title><path d="M31.485 14.416L18.473 4.2c-.333-.26-.667-.305-1.046-.12-.38.185-.427.57-.427.99v5.985C7 11.327.093 17.653.093 27.787c0 .32.163.336.328.056.98-1.58 3.58-8.058 16.58-8.28v5.94c0 .42.05.806.43.99.38.185.74.14 1.07-.12l13.03-10.217c.27-.21.4-.53.4-.87 0-.34-.17-.66-.44-.87z"/></symbol><symbol viewBox="0 0 32 32" id="icon-sim"><title>sim</title><path d="M20 0H8.804C7.472 0 6 1.08 6 2.406v27.196C6 30.928 7.472 32 8.804 32h14.403C24.527 32 26 30.928 26 29.602v-24L20 0zm-8 29h-.792C10.314 29 10 28.086 10 27.205V22h2v7zm0-9h-2v-5.594c0-.886.314-1.406 1.208-1.406H12v7zm6 9h-4v-3h4v3zm0-5h-4v-6h4v6zm0-8h-4v-3h4v3zm4 11.205c0 .88-.314 1.795-1.196 1.795H20v-7h2v5.205zM22 20h-2v-7h.804c.882 0 1.196.52 1.196 1.406V20z"/></symbol><symbol viewBox="0 0 32 32" id="icon-smiley"><title>smiley</title><path d="M16 .004c-8.837 0-16 7.164-16 16 0 8.837 7.163 16 16 16s16-7.163 16-16c0-8.836-7.163-16-16-16zm0 29c-7.16 0-12.985-5.832-12.985-13s5.825-13 12.985-13c7.16 0 12.985 5.832 12.985 13s-5.825 13-12.985 13z"/><ellipse cx="10.53" cy="12.77" rx="2.486" ry="2.474"/><ellipse cx="21.47" cy="12.77" rx="2.486" ry="2.474"/><path d="M23.433 19.02c-.238-.145-.51-.222-.79-.222-.528 0-1.008.268-1.283.716-1.113 1.798-3.043 2.873-5.163 2.873-.077 0-.143.01-.197.024-.06-.01-.123-.02-.196-.02-2.12 0-4.05-1.07-5.164-2.87-.276-.44-.756-.71-1.285-.71-.28 0-.552.08-.79.23-.342.21-.583.54-.676.93-.1.39-.03.79.18 1.14 1.66 2.69 4.55 4.3 7.73 4.3.08 0 .14-.01.2-.023.06.01.12.02.19.02 3.17 0 6.06-1.61 7.73-4.303.21-.34.27-.74.18-1.13-.1-.39-.34-.72-.68-.93zm-14.178.29c.033-.002.066-.013.1-.013.07 0 .14.012.21.026-.1-.02-.206-.022-.31-.012zm13.18.014c.068-.015.138-.026.21-.026.032 0 .065.01.1.014-.105-.01-.21-.01-.31.012zm1.203 1.125c.06-.39-.113-.79-.468-1.01-.106-.07-.22-.1-.335-.13.115.02.23.06.335.12.355.22.527.62.468 1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-sort"><title>sort</title><path d="M0 20h15v3H0zm0-6h12v3H0zm0-6h9v3H0zm31.92 9.12c-.13-.277-.404-.12-.703-.12h-4.244c-.193-7-4.68-12.498-11.867-12.498-.226 0-.24.214-.04.334C16.188 5.55 20.782 8 20.938 17h-4.21c-.3 0-.573-.157-.705.12-.13.275-.098.438.086.68l7.24 9.437c.15.195.37.268.61.268s.47-.135.61-.33l7.24-9.365c.18-.242.22-.415.082-.69z"/></symbol><symbol viewBox="0 0 32 32" id="icon-speech-circle"><title>speech-circle</title><path d="M15.9 6.804c5.854 0 10.6 3.863 10.6 8.627 0 4.77-4.746 8.63-10.6 8.63-.562 0-.927-.03-1.465-.1C12.158 26.24 9 26.65 7 26.71v-.56c1-.698 2.463-1.967 2.463-3.416 0-.2-.11-.4-.138-.594-2.397-1.582-3.977-3.997-3.977-6.705 0-4.764 4.698-8.627 10.552-8.627zm-16 9.2c0 8.837 7.163 16 16 16s16-7.163 16-16-7.163-16-16-16-16 7.163-16 16z"/></symbol><symbol viewBox="0 0 32 32" id="icon-speech"><title>speech</title><path d="M15.9 1.01c8.837 0 16 5.82 16 13s-7.163 13-16 13c-.85 0-1.632-.053-2.445-.157C10.02 30.29 6 30.907 2 30.997v-.84c2-1.05 3.95-2.962 3.95-5.146 0-.3-.05-.6-.093-.89-3.62-2.39-5.945-6.03-5.945-10.11 0-7.18 7.152-13 15.988-13z"/></symbol><symbol viewBox="0 0 32 32" id="icon-spinner"><title>spinner</title><path opacity=".25" d="M16 0a16 16 0 0 0 0 32 16 16 0 0 0 0-32m0 4a12 12 0 0 1 0 24 12 12 0 0 1 0-24"/><path d="M16 0a16 16 0 0 1 16 16h-4A12 12 0 0 0 16 4z"/></symbol><symbol viewBox="0 0 32 32" id="icon-star-half"><title>star-half</title><path d="M11.006 10.805l-11.08 1.607 7.987 7.798-1.845 11.01L16 26.023V.787z"/></symbol><symbol viewBox="0 0 32 32" id="icon-star"><title>star</title><path d="M31.9 12.412l-11.055-1.607L15.9.787l-4.944 10.018L-.1 12.412l8 7.798-1.888 11.01 9.888-5.198 9.89 5.2L23.9 20.21z"/></symbol><symbol viewBox="0 0 32 32" id="icon-starline-half"><title>starline-half</title><path d="M31.9 12.412l-11.056-1.607L15.9.787l-4.944 10.018L-.1 12.412l8 7.798-1.888 11.01 9.888-5.198 9.888 5.2L23.9 20.21l8-7.798zm-16 11.14l-.03.015.03-17.837 3.492 7.075L27.2 13.94l-5.65 5.507 1.333 7.776L15.9 23.55z"/></symbol><symbol viewBox="0 0 32 32" id="icon-starline"><title>starline</title><path d="M31.9 12.412l-11.056-1.607L15.9.787l-4.944 10.018L-.1 12.412l8 7.798-1.888 11.01 9.888-5.198 9.888 5.2L23.9 20.21l8-7.798zm-16 11.14l-6.983 3.67 1.334-7.776L4.6 13.94l7.808-1.136L15.9 5.73l3.492 7.075L27.2 13.94l-5.65 5.507 1.333 7.776L15.9 23.55z"/></symbol><symbol viewBox="0 0 32 32" id="icon-talk"><title>talk</title><path d="M30.172 26.82c0 1.265.828 2.36 1.828 2.895v.443c0 .04-.646.062-.953.062-1.89 0-3.618-.792-4.823-2.063-.728.194-1.513.3-2.312.3-4.418 0-8.006-3.185-8.006-7.112s3.58-7.11 7.997-7.11 7.998 3.183 7.998 7.11c0 1.537-.52 2.96-1.45 4.124-.19.41-.27.86-.27 1.35zM14.122 1.79c7.736 0 14.03 5.016 14.22 11.263-1.367-.61-2.878-.93-4.44-.93-2.655 0-5.163.928-7.06 2.615-1.968 1.75-3.052 4.095-3.052 6.606 0 1.24.265 2.44.77 3.55-.145.003-.29.006-.437.006-.754 0-1.334-.048-2.056-.14C9.01 27.815 5 28.362 2 28.443v-.748c2-.933 3.395-2.632 3.395-4.573 0-.27-.102-.537-.14-.797-3.22-2.118-5.315-5.355-5.315-8.98 0-6.385 6.33-11.557 14.184-11.557z"/></symbol><symbol viewBox="0 0 32 32" id="icon-tick-circle"><title>tick-circle</title><path d="M15.9.004c-8.836 0-16 7.163-16 16s7.164 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zm-3.347 24L6.4 17.784l2.978-3.012 3.174 3.21 9.87-9.978 2.977 3.01-12.85 12.99z"/></symbol><symbol viewBox="0 0 32 32" id="icon-tick"><title>tick</title><path d="M11.42 27.004L3 18.45l4.075-4.14 4.345 4.412L24.925 5.004 29 9.144z"/></symbol><symbol viewBox="0 0 32 32" id="icon-tv"><title>tv</title><path d="M32 25V2H0v23h12v1.78c-1 .08-1.81.27-2.5.37C7.89 27.39 6.73 29 6.73 30h18.34c0-1-1.06-2.61-2.67-2.84-.69-.1-1.4-.29-2.4-.37V25h12zM3 22V5h26v17H3zm4-11h3v7h2v-7h3V9H7m12.9 7l-2.04-7H15.9l3.06 9h1.94l3-9h-2"/></symbol><symbol viewBox="0 0 32 26.01" id="icon-twitter-brand"><title>twitter-brand</title><path d="M32 3.08a13.14 13.14 0 0 1-3.77 1A6.59 6.59 0 0 0 31.12.45a13.11 13.11 0 0 1-4.17 1.59 6.57 6.57 0 0 0-11.36 4.52 6.69 6.69 0 0 0 .17 1.5A18.64 18.64 0 0 1 2.23 1.2a6.58 6.58 0 0 0 2 8.77 6.55 6.55 0 0 1-3-.82v.08a6.57 6.57 0 0 0 5.26 6.44 6.57 6.57 0 0 1-1.73.23 6.45 6.45 0 0 1-1.23-.12 6.57 6.57 0 0 0 6.13 4.56 13.19 13.19 0 0 1-8.16 2.81 12.65 12.65 0 0 1-1.5-.09 18.58 18.58 0 0 0 10.06 3c12.08 0 18.68-10 18.68-18.68v-.85A13.43 13.43 0 0 0 32 3.08" fill="#55acee"/></symbol><symbol viewBox="0 0 32 32" id="icon-twitter"><title>twitter</title><path d="M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16S24.837 0 16 0zm8.142 12.324c.008.168.01.337.01.508 0 5.185-3.946 11.164-11.163 11.164-2.22 0-4.28-.65-6.02-1.763.302.036.62.055.93.055 1.838 0 3.53-.627 4.873-1.68-1.718-.032-3.167-1.166-3.666-2.725.24.046.485.07.74.07.356 0 .702-.048 1.032-.138-1.797-.36-3.15-1.946-3.15-3.847v-.05c.53.295 1.134.47 1.777.492-1.052-.704-1.745-1.905-1.745-3.266 0-.72.195-1.393.53-1.973 1.937 2.38 4.828 3.94 8.09 4.1-.067-.28-.1-.58-.1-.89 0-2.16 1.755-3.92 3.922-3.92 1.13 0 2.147.478 2.863 1.24.893-.175 1.732-.5 2.49-.95-.293.916-.915 1.685-1.725 2.17.793-.094 1.55-.305 2.252-.617-.523.787-1.188 1.478-1.955 2.03z"/></symbol><symbol viewBox="0 0 32 32" id="icon-ustyle"><title>ustyle</title><path fill="#548DCA" d="M15.1 14.1l-4.2 4.4 2.5.3"/><path fill="#437CBE" d="M15.1 14.1l1.8 5.2-3.5-.5"/><path fill="#4983C3" d="M15.1 14.1l1.8-1.1v6.3"/><path fill="#437CBE" d="M16.9 13l3.3 2.9-3.3 3.4"/><path fill="#568FCB" d="M16.9 13l3-2.4.3 5.3"/><path fill="#9BC6EB" d="M19.9 10.6l1.7 7.4-1.4-2.1"/><path fill="#68A0D6" d="M21.6 18l-4.7 1.3 3.3-3.4"/><path fill="#80B2E0" d="M21.6 18v6.4l-2.7-1.9"/><path fill="#5A94CE" d="M18.9 22.5l-2-3.2 4.7-1.3"/><path fill="#679FD6" d="M16.9 19.3l-4.3 8.2 3.3-1.2"/><path fill="#558FCB" d="M16.9 19.3l-1 7 3-3.8"/><path fill="#8FBDE6" d="M18.9 22.5l-1.7 5-1.3-1.2"/><path fill="#7DB1E0" d="M18.9 22.5l2.7 1.9-4.4 3.1"/><path fill="#417CBE" d="M16.9 19.3l-3.5-.5-3.2 6.9"/><path fill="#3D73B8" d="M16.9 19.3l-6.7 6.4 2.4 1.8"/><path fill="#558FCB" d="M10.9 18.5l-.7 7.2 3.2-6.9"/><path fill="#548DCA" d="M10.9 18.5L8 26.6l2.2-.9"/><path fill="#427BBD" d="M8 26.6l.7 3 1.5-3.9"/><path fill="#3D73B8" d="M10.2 25.7l.6 4.4-2.1-.5"/><path fill="#386FB4" d="M10.2 25.7l2.4 1.8-1.8 2.6"/><path fill="#427BBD" d="M12.6 27.5l-1.8 2.6 2.7-.4"/><path fill="#649ED5" d="M12.6 27.5l3.3-1.2-2.4 3.4"/><path fill="#87B8E4" d="M15.9 26.3l-.8 3-1.6.4"/><path fill="#93C1E8" d="M15.9 26.3l1.3 1.2-2.1 1.8"/><path fill="#5B95CF" d="M8.7 29.6l2 2.4.1-1.9"/><path fill="#568FCB" d="M10.8 30.1l2.7-.4-.8 2.1"/><path fill="#5E98D1" d="M10.8 30.1l-.1 1.9 2-.2"/><path fill="#8DBCE6" d="M12.7 31.8l2.4-2.5-1.6.4"/><path fill="#90BDE6" d="M12.7 31.8l1.4-.2 1-2.3"/><path fill="#A2CAEC" d="M14.1 31.6l1.3-2.1-.3-.2"/><path fill="#A1C9EC" d="M17.2 27.5l-1.8 2-.3-.2"/><path fill="#84B6E2" d="M10.7 32l-1.2-1-.8-1.4"/><path fill="#82B3E1" d="M8 26.6l.3 2.1.4.9"/><path fill="#558FCB" d="M10.9 18.5l3.6-5.7.6 1.3"/><path fill="#5B95CF" d="M14.5 12.8L10.8 15l.1 3.5"/><path fill="#72A9DB" d="M10.8 15l3.6-3.9.1 1.7"/><path fill="#5894CF" d="M19.9 10.6l-3.8.8.8 1.6"/><path fill="#7AAEDF" d="M19.9 10.6l-1.4-1.7-2.4 2.5"/><path fill="#95C0E7" d="M18.5 8.9l-3.4 1.4-.7.8 1.7.3"/><path fill="#70A8DB" d="M18.5 8.9l-4.7-3 1.3 4.4"/><path fill="#629DD5" d="M18.5 8.9l5.4-2.7-4 4.4"/><path fill="#99D1F3" d="M23.9 6.2L21 10l-1.1.6"/><path fill="#599BD4" d="M23.9 6.2l-1.6 5.3L21 10"/><path fill="#7FBBE7" d="M22.3 11.5l-2.4-.9L21 10"/><path fill="#78AEDE" d="M19.9 10.6l2.4.9-.7 6.5"/><path fill="#92C1E8" d="M22.3 11.5l1 5.2-1.7 1.3"/><path fill="#A1CAED" d="M23.3 16.7l-.3 4.8-1.4-3.5"/><path fill="#90BDE6" d="M21.6 18l1.4 3.5-1.4 2.9"/><path fill="#9BC6EB" d="M26.3 15.8l-3 .9 3.6 4"/><path fill="#95C1E8" d="M26.9 20.7l-3.9.8.3-4.8"/><path fill="#9CC6EA" d="M26.9 20.7l-.9 4.2-3-3.4"/><path fill="#93C1E8" d="M23 21.5l3 3.4-2.3 2.1m-.7-5.5l.7 5.5-2-3"/><path fill="#91BFE7" d="M21.4 24.5l2.3 2.5-2-3-.1.4"/><path fill="#98C4EA" d="M23.3 16.7l3-.9-3.8-3.4"/><path fill="#AFD3F0" d="M26.3 15.8l-2.6-4.4-1.2 1"/><path fill="#ABD0EF" d="M23.7 11.4l-1.3-.2-.1.3.2.9"/><path fill="#4E5861" d="M14.7 8.9l-.8 1.5 3 2.6"/><path fill="#020304" d="M7.6 0l1.5 3.5 2.2 3.9 2.7 3-1.5-3.6-2.8-3.4"/><path fill="#3F4040" d="M7.6 0l2.5 2.8 2.4 4-2.8-3.4"/><path fill="#111E2E" d="M12.6 10.3l2.5 3.9-1.1-3.8h-.2"/><path fill="#1B2837" d="M11.3 7.4l1.3 2.9 1.4.1"/><path fill="#585D61" d="M14.7 8.9l-2.2-2.1 1.5 3.6"/><path fill="#848687" d="M10.1 2.8l2.2 3.3 2.4 2.8-2.2-2.1"/><path fill="#183553" d="M14 10.4l2.9 2.6-1.8 1.2-1.1-3.8"/><path fill="#8B9DB0" d="M15.1 9.7l1 1.6.8 1.7-1-1.8"/></symbol><symbol viewBox="0 0 32 32" id="icon-uswitch"><title>uswitch</title><path d="M8.31 17.123V4.316H0V16.83c0 13.013 15.888 19.498 25.126 10.314-7.58 3.768-16.55-1.536-16.816-10.02zM25.174.553L18.447 7.74h2.572v9.433c0 4.06-3.94 7.48-8.61 6.06 5.71 6.745 16.914 2.87 16.914-6.06V7.738H32L25.174.553z"/></symbol><symbol viewBox="0 0 32 32" id="icon-variable"><title>variable</title><path d="M30.856 22.435c-.09-.217-.3-.435-.535-.435H26v-8.958c0-.32-.79-1.042-1.11-1.042h-6.52c-.154 0-.196.292-.305.4-.11.11-.065.488-.065.642V22h-5.062c-.234 0-.446.218-.535.435-.09.216-.04.542.126.707l8.69 8.692c.11.11.25.17.41.17.15 0 .3-.06.41-.17l8.69-8.692c.16-.166.21-.49.12-.707zm-17.02-2.832c.11-.108.164-.483.164-.637V10h4.863c.234 0 .446-.214.535-.43.09-.218.04-.54-.126-.706l-8.69-8.69c-.11-.11-.257-.17-.41-.17-.155 0-.302.06-.41.17L1.07 8.864c-.166.167-.215.49-.126.705.09.21.3.43.536.43H6v8.96c0 .32.592 1.03.912 1.03h6.52c.152 0 .295-.29.403-.4z"/></symbol><symbol viewBox="0 0 32 32" id="icon-warning-circle"><title>warning-circle</title><path d="M16 0C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0zm2.1 5l-.4 14h-3.4L14 5h4.1zM16 26.9c-1.5 0-2.4-1-2.4-2.5 0-1.4 1-2.5 2.4-2.5s2.4 1 2.4 2.5c0 1.4-1 2.5-2.4 2.5z"/></symbol><symbol viewBox="-9 -1 23 31" id="icon-warning"><title>warning</title><path d="M6 0l-.315 21h-4.32L1 0h5zM3.5 30C1.312 30 0 28.6 0 26.5 0 24.54 1.458 23 3.5 23S7 24.4 7 26.5C7 28.46 5.542 30 3.5 30z"/></symbol><symbol viewBox="0 0 32 32" id="icon-wifi"><title>wifi</title><path d="M30.58 11.44c-.56 0-1.12-.22-1.54-.66-3.33-3.49-7.81-5.41-12.61-5.41-4.78 0-9.25 1.91-12.58 5.37-.81.85-2.16.87-3 .06-.84-.8-.86-2.15-.05-3 4.14-4.3 9.69-6.67 15.64-6.67 5.97 0 11.54 2.39 15.68 6.72.81.85.78 2.19-.07 3-.41.4-.94.59-1.47.59zm-4 5.49c-.55 0-1.09-.21-1.51-.63-2.3-2.32-5.37-3.59-8.63-3.59-3.25 0-6.3 1.27-8.6 3.56-.83.83-2.17.83-3 0-.83-.83-.83-2.18 0-3 3.1-3.1 7.22-4.81 11.6-4.81 4.4 0 8.54 1.72 11.65 4.85.83.83.82 2.18-.01 3-.42.41-.96.62-1.5.62zm-4.46 5.92c-.58 0-1.16-.23-1.57-.7-1.07-1.18-2.53-1.83-4.11-1.83-1.57 0-3.02.64-4.08 1.8-.79.86-2.14.92-3 .13s-.92-2.14-.13-3c1.86-2.02 4.49-3.18 7.21-3.18 2.75 0 5.4 1.18 7.26 3.22.79.87.72 2.21-.15 3-.41.38-.92.56-1.43.56z"/><circle cx="16.59" cy="27.38" r="3.49"/></symbol><symbol viewBox="0 0 32 32" id="icon-wiki"><title>wiki</title><path d="M5.715 21.8c.407-.027.82-.047 1.24-.047 3.33 0 6.397.938 8.002 2.45.007.006.017.008.025.015.11.1.232.185.372.246.01.004.02.005.03.01.016.006.032.008.05.014.152.055.31.09.467.09.16 0 .32-.034.47-.09l.05-.016c.01-.004.02-.005.03-.01.14-.06.26-.144.37-.242.01-.007.02-.01.03-.017 1.61-1.51 4.67-2.45 8-2.45.42 0 .84.02 1.24.048.38.02.98-.1 1.26-.36s.66-.62.66-1V3.58c0-.727-.78-1.32-1.5-1.377-.47-.03-1.06-.05-1.54-.05-3.51 0-6.81.9-9 2.44-2.18-1.54-5.45-2.44-8.97-2.44-.49 0-1.1.028-1.57.06-.72.05-1.41.65-1.41 1.374v16.85c0 .38.28.746.56 1.007.28.26.77.386 1.16.366zM17 6.98c2-1.29 5-2.076 8-2.082V19c-3 .005-6 .588-8 1.617V6.98zM7 4.898c3 .007 6 .794 8 2.082v13.636c-2-1.03-5-1.612-8-1.617V4.89zm23.5-.324c-.803 0-1.5.65-1.5 1.455v17.96c-1-.02-3.488-.03-3.644-.03-3.717 0-7.14.95-9.454 2.57-2.312-1.63-5.64-2.58-9.358-2.58C6.39 23.97 4 23.98 3 24V6.03c0-.804-.697-1.456-1.5-1.456S0 5.226 0 6.03v19.45c0 .402.12.787.414 1.062.294.276.67.415 1.07.39.4-.027 4.225-.053 4.977-.053 3.52 0 6.76.99 8.45 2.59.01.01.03.01.04.02.13.11.27.2.42.26.02 0 .03 0 .05.01.16.06.33.09.5.09.17 0 .34-.04.5-.1l.048-.01c.15-.06.29-.16.42-.27.01-.01.027-.01.038-.026 1.7-1.6 4.94-2.59 8.46-2.59.75 0 4.59.026 4.99.052.412.03.85-.11 1.144-.39.295-.278.512-.664.512-1.068V6.03c0-.804-.695-1.456-1.5-1.456z"/></symbol><symbol viewBox="0 0 32 32" id="icon-xml"><title>xml</title><path d="M23.12 12.004h-4.228L15.9 16.41l-2.992-4.406H8.68l5.07 7.577-5.72 8.43h8.195v-2.86h-1.892L15.9 22.8l3.48 5.204h4.39l-5.718-8.423 5.068-7.57zm5.013-5.768l-4.465-4.464C22.696.8 20.775.004 19.4.004h-15c-1.375 0-2.5 1.125-2.5 2.5v27c0 1.375 1.125 2.5 2.5 2.5h23c1.375 0 2.5-1.125 2.5-2.5v-19c0-1.375-.795-3.296-1.767-4.268zM26.718 7.65c.098.098.195.218.29.354H21.9V2.896c.136.095.256.192.354.29l4.464 4.464zM27.9 29.504c0 .27-.23.5-.5.5h-23c-.27 0-.5-.23-.5-.5v-27c0-.27.23-.5.5-.5h15c.15 0 .32.02.5.053v7.947h7.947c.034.18.053.35.053.5v19z"/></symbol></svg>
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg"><symbol viewBox="0 0 32 32" id="icon-alarm"><title>alarm</title><path d="M24.04 5.978c.256 0 .512-.1.707-.3l3.263-3.342c.39-.4.39-1.048 0-1.447-.39-.4-1.023-.4-1.414 0l-3.263 3.34c-.39.4-.39 1.05 0 1.45.196.19.45.29.707.29zm.68 3.592c.107.26.306.453.542.553.237.1.51.108.765 0l4.264-1.808c.51-.216.76-.815.55-1.337-.21-.522-.79-.77-1.3-.554l-4.27 1.808c-.51.216-.75.814-.54 1.337zM31 12h-4.616c-.552 0-1 .578-1 1.143 0 .283.112.455.292.64.182.186.432.217.708.217H31c.552 0 1-.434 1-1 0-.565-.447-1-1-1zM7.347 5.69c.195.2.45.3.707.3s.512-.1.707-.3c.4-.4.4-1.05 0-1.45L5.5.9C5.108.5 4.474.5 4.083.9c-.39.4-.39 1.048 0 1.447L7.347 5.69zM1.71 8.315l4.263 1.808c.255.108.53.1.765 0 .237-.1.435-.293.54-.554.212-.53-.03-1.13-.54-1.34L2.473 6.42c-.51-.214-1.095.034-1.306.556-.21.523.03 1.12.542 1.338zm4.612 5.528c.18-.185.293-.49.293-.772 0-.56-.448-1.07-1-1.07H1c-.553 0-1 .44-1 1s.448 1 1 1h4.616c.276 0 .526.03.706-.15zm21.486 11.71c0 .03-.006.05-.007.078.01.03.02.04.02.06l.01-.13h-.01zm.005.14c0-.016.01.053.01.037s-.01-.025-.01-.04v.004zm-.328-.68c-6.147-9.345-3.416-7.977-5.032-14.04-.426-1.873-1.61-3.448-3.202-4.37.18-.425.27-.89.27-1.38 0-1.99-1.57-3.607-3.52-3.607s-3.52 1.614-3.52 3.606c0 .493.1.962.28 1.39-1.5.87-2.64 2.316-3.12 4.053l-.02.072c-1.76 6.353 1.14 4.803-5.14 14.345l-.01.206c-.01.025-.03.257-.05.263-.02 0-.04-.08-.06-.04-.03.06-.05-.43-.07-.37-.04.13-.07-.13-.08-.13h.03c.04 1 .46 1 .99 1h21.62c.51 0 .92.28.98-.65-.025-.22-.114-.24-.27-.4-.02-.02-.025.09-.044.07zM16 6.783c-.84 0-1.522-.7-1.522-1.56 0-.86.683-1.56 1.522-1.56.84 0 1.522.7 1.522 1.56 0 .86-.683 1.557-1.522 1.557zm.005 24.61c1.875 0 3.394-.394 3.497-3.394h-6.994c.103 3 1.622 3.39 3.497 3.39z"/></symbol><symbol viewBox="0 0 32 32" id="icon-android"><title>android</title><path d="M27.9 10.004c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2s2-.9 2-2v-8c0-1.1-.9-2-2-2zm-24 0c-1.1 0-2 .9-2 2v8c0 1.1.9 2 2 2s2-.9 2-2v-8c0-1.1-.9-2-2-2zm3 13c0 1.657 1.343 3 3 3h1v4c0 1.1.9 2 2 2s2-.9 2-2v-4h2v4c0 1.1.9 2 2 2s2-.9 2-2v-4h1c1.657 0 3-1.343 3-3v-11h-18v11zM19.606 2.8L20.872.37c.064-.122.016-.274-.106-.337s-.274-.016-.337.106L19.14 2.6c-1.008-.388-2.1-.6-3.246-.6s-2.238.215-3.245.604L11.37.14c-.063-.123-.214-.17-.336-.107-.122.063-.17.215-.106.337l1.266 2.43c-2.832 1.284-4.882 3.99-5.238 7.205h17.89c-.357-3.216-2.407-5.92-5.24-7.203zM11.9 8.455c-.8 0-1.45-.65-1.45-1.45s.65-1.45 1.45-1.45 1.45.65 1.45 1.45c0 .8-.65 1.45-1.45 1.45zm8 0c-.8 0-1.45-.65-1.45-1.45s.65-1.45 1.45-1.45c.8 0 1.45.65 1.45 1.45s-.65 1.45-1.45 1.45z"/></symbol><symbol viewBox="0 0 32 32" id="icon-arrow-circle"><title>arrow-circle</title><path d="M15.9.004c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zm10.113 16.41l-8.703 8.703c-.166.166-.575.216-.792.126-.217-.09-.518-.302-.518-.536V20H8.198c-.154 0-.11-.137-.22-.246-.108-.11.022-.333.022-.486V12.74c0-.32-.123-.74.198-.74H16V7.3c0-.234.3-.445.518-.535s.546-.04.712.126l8.743 8.71c.11.11.19.26.19.41 0 .16-.04.3-.15.41z"/></symbol><symbol viewBox="0 0 32 32" id="icon-arrow-down"><title>arrow-down</title><path d="M.3 16.7l15 15c.2.2.4.3.7.3.3 0 .5-.1.7-.3l15-15c.3-.3.4-.7.2-1.1-.1-.4-.5-.6-.9-.6h-8V1c0-.6-.8-1-1.4-1H10.4c-.3 0-.7.1-.9.3-.2.2-.5.4-.5.7v14H1c-.4 0-.8.2-.9.6-.2.4-.1.8.2 1.1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-arrow-up"><title>arrow-up</title><path d="M31.707 15.297l-15-15C16.52.11 16.265.004 16 .004c-.265 0-.52.105-.707.293l-15 15c-.286.286-.372.714-.217 1.088.155.373.52.615.924.615h8v14.004c0 .552.823.996 1.375.996h11.25c.265 0 .707-.103.895-.29.188-.19.48-.44.48-.706V17h8c.404 0 .77-.242.924-.615.155-.374.07-.802-.217-1.088z"/></symbol><symbol viewBox="0 0 32 32" id="icon-book"><title>book</title><path d="M27.026 0h-.002L7.1.56c-1.045.006-2.01.27-2.79.76-.438.278-.684.616-.943 1.003C3.06 2.78 3 3.32 3 3.848v23.61c0 .528.06 1.07.368 1.526.382.567.893 1.014 1.625 1.33.65.28 1.34.423 2.067.428l15.276 1.253c.064.006.12.01.183.01.57 0 1.27-.224 1.68-.628.4-.406.8-.948.8-1.524v-1.17l2.36-.08c1.07-.033 1.63-.898 1.63-1.97V2.13C29 .96 28.26 0 27.02 0zm-9.274 14.995c-.027 0-.054 0-.082-.003l-7.396-.607c-.543-.045-.948-.522-.904-1.065.044-.543.516-.943 1.066-.904l7.396.607c.543.045.948.522.904 1.065-.042.516-.474.907-.984.907zm2.235-3.736c-.027 0-.054-.01-.082-.01L8.04 10.28c-.543-.045-.948-.522-.904-1.065.046-.544.51-.938 1.066-.904l11.865.98c.543.05.948.52.904 1.07-.04.52-.47.91-.98.91zM26 24.74c0 .537-.296.983-.832.994l-.188.01c-.122 0 .02-.1.02-.22V7.614c0-1.125-1.013-2.144-2.135-2.243L7.158 4h-.055c-.558 0-1.008-.065-1.23-.208-.023-.015-.043.02-.06.007.063-.05.156-.09.28-.14.287-.13.652-.18 1.048-.18l17.85-.5c.64 0 1.01.52 1.01 1.15v20.6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-bookmark"><title>bookmark</title><path d="M25.412 0H6.588C6.068 0 6 .426 6 .945v30.118c0 .38.053.724.405.87.35.144.667.064.937-.204l8.702-8.75 8.724 8.74c.18.18.41.27.655.27.122 0 .062-.03.178-.07.36-.15.4-.49.4-.87V.94c0-.52-.07-.942-.58-.942z"/></symbol><symbol viewBox="0 0 32 32" id="icon-breadcrumb"><title>breadcrumb</title><path d="M21.307 15.32L13.114.714c-.377-.67-1.222-.904-1.89-.53-.667.374-.905 1.22-.53 1.888L18.508 16l-7.745 13.94c-.372.67-.13 1.515.54 1.887.213.118.444.175.672.175.487 0 .96-.258 1.214-.714l8.12-14.616c.23-.422.23-.933-.01-1.353z"/></symbol><symbol viewBox="0 0 32 32" id="icon-calculator"><title>calculator</title><path d="M27 2.22C27 .994 26.006 0 24.78 0H7.22C5.994 0 5 .994 5 2.22v27.56C5 31.006 5.994 32 7.22 32h17.56c1.226 0 2.22-.994 2.22-2.22V2.22zM12 29H8v-4h4v4zm0-6H8v-4h4v4zm0-6H8v-4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4v-4h4v4zm6 12h-4v-4h4v4zm0-6h-4v-4h4v4zm0-6h-4v-4h4v4zm0-7H8V3h16v7z"/></symbol><symbol viewBox="0 0 32 32" id="icon-calendar"><title>calendar</title><path d="M5 23h4v4H5zm6 0h4v4h-4zm6 0h4v4h-4zM5 17h4v4H5zm6 0h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12-6h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zM7.5 5.63c.828 0 1.5-.673 1.5-1.5V1.503c0-.828-.672-1.5-1.5-1.5S6 .676 6 1.503v2.624c0 .83.672 1.502 1.5 1.502zm17 0c.828 0 1.5-.673 1.5-1.5V1.503c0-.828-.672-1.5-1.5-1.5s-1.5.672-1.5 1.5v2.623c0 .83.672 1.502 1.5 1.502zM29 3h-1v1.13c0 1.93-1.57 3.5-3.5 3.5S21 6.06 21 4.13V3H11v1.13c0 1.93-1.57 3.5-3.5 3.5S4 6.06 4 4.13V3H3C1.343 3 0 4.57 0 6.227V28.84C0 30.5 1.343 32 3 32h26c1.657 0 3-1.502 3-3.16V6.228C32 4.57 30.657 3 29 3zm0 26H3V9h26v20z"/></symbol><symbol viewBox="0 0 32 32" id="icon-car"><title>car</title><path d="M30.326 12.646l-3.193-9.69C26.93 2.336 26.356 2 25.707 2H6.293c-.65 0-1.224.338-1.426.955l-3.193 9.73C.688 13.178 0 14.15 0 15.32v6.59c0 1.565 1 2.846 3 2.976v3.28C3 29.266 3.65 30 4.75 30h1.917C7.767 30 9 29.266 9 28.166V25h14v3.103c0 1.1 1.233 1.897 2.333 1.897h1.917c1.1 0 1.75-.797 1.75-1.897v-3.217c2-.13 3-1.41 3-2.975v-6.59c0-1.17-.688-2.18-1.674-2.67zm-23.268 7.97c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm17.884 0c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM4.937 12L7.38 5h17.24l2.443 7H4.937z"/></symbol><symbol viewBox="0 0 32 32" id="icon-checkbox-tick"><title>checkbox-tick</title><path d="M31.076 2.204c-9.734 5.965-16.798 13.492-19.972 17.27l-7.772-6.088L-.1 16.152l13.43 13.652c2.31-5.918 9.632-17.483 18.57-25.7l-.824-1.9z"/></symbol><symbol viewBox="0 0 32 32" id="icon-chevron-left"><title>chevron-left</title><path d="M13.462.9c-1.2 1.1-12.4 12.9-12.4 12.9-.6.6-.9 1.4-.9 2.2 0 .8.3 1.6.9 2.2 0 0 11.3 11.8 12.4 13 1.2 1.1 3.2 1.2 4.5 0 1.2-1.2 1.3-2.9 0-4.3L7.562 16l10.3-10.8c1.3-1.5 1.2-3.1 0-4.3-1.2-1.2-3.3-1.2-4.4 0z"/></symbol><symbol viewBox="0 0 32 32" id="icon-chevron-right"><title>chevron-right</title><path d="M11.6.9C12.8 2 24 13.8 24 13.8c.6.6.9 1.4.9 2.2s-.3 1.6-.9 2.2c0 0-11.3 11.8-12.4 13-1.2 1.1-3.2 1.2-4.5 0-1.2-1.2-1.3-2.9 0-4.3L17.5 16 7.2 5.2C5.9 3.7 6 2.1 7.2.9c1.2-1.2 3.3-1.2 4.4 0z"/></symbol><symbol viewBox="0 0 32 32" id="icon-clock"><title>clock</title><path d="M15.918.004c-8.837 0-16 7.164-16 16 0 8.837 7.163 16 16 16s16-7.163 16-16c0-8.836-7.163-16-16-16zm0 29c-7.16 0-12.985-5.832-12.985-13s5.825-13 12.985-13c7.16 0 12.985 5.832 12.985 13s-5.825 13-12.985 13zm1.264-13.557l-.03-8.282c0-.69-.564-1.165-1.256-1.165h-.004c-.694 0-1.254.483-1.253 1.173l.03 8.938c0 .4.19.71.47.94.05.05.08.11.14.15l5.88 4.16c.22.16.47.23.72.23.39 0 .78-.18 1.02-.53.4-.56.27-1.34-.3-1.74l-5.45-3.86z"/></symbol><symbol viewBox="0 0 32 32" id="icon-close"><title>close</title><path d="M16 .004c-8.836 0-16 7.163-16 16s7.164 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zm8 21.172l-2.828 2.828L16 18.834l-5.172 5.17L8 21.177l5.172-5.172L8 10.832l2.828-2.828L16 13.176l5.172-5.172L24 10.832l-5.172 5.172L24 21.176z"/></symbol><symbol viewBox="0 0 32 32" id="icon-cog"><title>cog</title><path d="M31.31 13.274l-3.698-1.207-.63-1.52L28.67 6.98c.18-.38.102-.834-.197-1.133L26.06 3.433c-.307-.307-.775-.38-1.16-.185L21.43 5.01l-1.52-.63L18.58.667c-.146-.4-.523-.667-.945-.667H14.22c-.432 0-.815.28-.95.692l-1.206 3.7-1.52.63-3.567-1.684c-.38-.18-.836-.1-1.134.197L3.43 5.95c-.308.305-.382.773-.186 1.16l1.763 3.47-.63 1.518-3.714 1.33c-.397.142-.663.52-.663.94v3.415c0 .433.278.816.69.95l3.7 1.208.628 1.52-1.685 3.57c-.18.38-.102.84.197 1.14l2.413 2.42c.306.31.775.38 1.16.19l3.47-1.77 1.52.63 1.33 3.71c.143.4.52.67.942.67h3.414c.43 0 .81-.27.95-.69l1.2-3.69 1.52-.63 3.56 1.68c.38.18.83.1 1.13-.2l2.41-2.41c.3-.3.38-.77.18-1.16l-1.77-3.47.63-1.52 3.71-1.33c.396-.14.662-.52.662-.94v-3.42c0-.43-.28-.814-.69-.95zM16 20.597c-2.532 0-4.593-2.06-4.593-4.593 0-2.532 2.06-4.593 4.594-4.593 2.54 0 4.6 2.07 4.6 4.6s-2.06 4.6-4.59 4.6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-controller"><title>controller</title><path d="M30.2 9.6H1.9c-1 0-1.9.7-1.9 1.8v9.2c0 1 .9 1.9 1.9 1.9h28.2c1.1 0 1.9-.9 1.9-2v-9.2c.1-1-.8-1.7-1.8-1.7zM9.7 16.7H7.8v1.8H6.3v-1.9H4.4v-1.5h1.9v-1.9h1.5v1.9h1.9v1.6zm12.2.9c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5c0 .9-.7 1.5-1.5 1.5zm4.9-.9c-.8 0-1.5-.7-1.5-1.5s.7-1.5 1.5-1.5 1.5.7 1.5 1.5-.7 1.5-1.5 1.5z"/></symbol><symbol viewBox="0 0 32 32" id="icon-credit-card"><title>credit-card</title><path d="M32 6.997C32 5.342 30.658 4 29.003 4H2.997C1.342 4 0 5.342 0 6.997v18.005C0 26.658 1.342 28 2.997 28h26.005C30.658 28 32 26.658 32 25.003V6.997zM29 25H3V15h26v10zm0-15H3V7h26v3zM5.96 23h3c.552 0 1-.448 1-1s-.448-1-1-1h-3c-.55 0-.998.448-.998 1s.447 1 1 1zm6.995 0h7.993c.552 0 1-.448 1-1s-.448-1-1-1h-7.993c-.552 0-1 .448-1 1s.448 1 1 1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-cross"><title>cross</title><path d="M26.5 9.61l-4.106-4.106L16 11.898 9.606 5.504 5.5 9.61l6.394 6.394L5.5 22.398l4.106 4.106L16 20.11l6.394 6.394 4.106-4.106-6.394-6.394z"/></symbol><symbol viewBox="0 0 32 32" id="icon-dashcam"><title>dashcam</title><g transform="translate(0 5)"><circle cx="16" cy="9" r="5"/><path d="M11.506 18H7.992C3.578 18 0 14.422 0 10V8c0-4.418 3.578-8 7.992-8h16.016C28.422 0 32 3.578 32 8v2c0 4.418-3.578 8-7.992 8h-3.514C21.43 19.046 22 20.42 22 21.927H10c0-1.506.57-2.88 1.506-3.927zM16 16c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7z"/></g></symbol><symbol viewBox="0 0 32 32" id="icon-dual-fuel"><title>dual-fuel</title><path d="M13.166 15.992c-.277-.99-.152-2.03.353-2.93.14-.25.31-.475.5-.684-.4-.432-.7-.955-.86-1.542-.28-.99-.15-2.03.35-2.93.03-.065.08-.12.12-.182-.71-.997-1.47-1.93-2.29-2.78-1.08-1.13-2.25-2.137-3.47-3.032-.5-.366-1.01-.715-1.53-1.045-.4-.255-.79-.51-1.2-.74-.18-.1-.39-.168-.58-.08-.06.027-.11.068-.16.12-.02.023-.04.047-.05.073-.16.253-.14.614-.09.93.3 1.776.12 3.965-.16 5.735-.438 2.774-1.357 5.403-2.55 7.783C.01 17.806-.35 21.702.32 25.183c.502 2.625 2.087 4.616 4.093 5.843-.06-.094-.128-.183-.18-.285-1.488-2.82-.444-6.08.794-8.69.633-1.33 1.36-2.62 1.93-3.99.283-.68.502-1.42.64-2.17.114-.63.158-1.37.085-2.01-.026-.23 0-.51.163-.62.084-.05.184-.04.276-.02.56.13 1.04.63 1.49 1.03.56.49 1.07 1.05 1.54 1.66.49.63.93 1.31 1.34 2.01 1.78 3.11 2.11 7.14 1.2 10.65-.32 1.24-.87 2.53-1.7 3.45 2.19-.7 3.61-2.18 4.54-4.17C15.62 27.1 15 26 15 24.77v-1.61c0-1.464 1-2.747 2-3.444V18.9c0-.04-.185-.072-.268-.09-1.683-.048-3.12-1.196-3.566-2.818zm18.77-5.24c-.276-.986-1.297-1.562-2.283-1.287L16.377 13.17c-.984.273-1.56 1.298-1.285 2.283.226.82.972 1.453 1.783 1.453.02 0 .043.094.063.094h.016c.08 0 .863.118 1.523.53.22.136.413.47.588.47H19v2h3v-2.142c0-.36-.395-.69-.588-.98-.26-.393-.61-.718-.92-.99l6.098-1.71 1.075.983c-.074.04-.156.08-.23.13-.597.35-1.207.97-1.83 1.6-.132.13-.605.5-.605.98V21h-5.893C18.002 21 17 22.056 17 23.16v1.6c0 1.106 1 2 2 2v2.244C19 30.66 20.45 32 22.107 32h2.844c1.66 0 3.05-1.34 3.05-2.996v-2.246c1-.017 2-.903 2-1.997v-1.6c0-1.1-.97-2.16-2.08-2.16H28v-3.14c0-.36.76-.63 1.183-.79.265-.1.498-.17.67-.21.084-.02.144-.03.185-.03h.036c.46-.05.847-.37.99-.81.14-.44.008-.92-.334-1.23l-1.477-1.33 1.395-.39c.986-.27 1.56-1.29 1.287-2.28zm-16.17-4.627c.315.237.705.37 1.11.37.164 0 .332-.022.5-.068l9.883-2.734c.12-.035.24-.08.35-.137.21-.113.4-.266.56-.447.07-.1.14-.19.2-.3.11-.21.19-.44.22-.68.03-.24.01-.49-.06-.74-.05-.19-.14-.35-.24-.51l-.06-.09c-.1-.14-.22-.27-.36-.37L27.8.37c-.144-.1-.297-.185-.463-.242 0-.005-.004-.007-.007-.007-.17-.05-.346-.08-.527-.08-.02 0-.04-.01-.06-.01-.02 0-.036.01-.05.01-.15.01-.3.02-.45.07L16.37 2.85c-.983.275-1.56 1.298-1.286 2.286.115.41.36.748.675.985zm-.674 4.17c.226.82.972 1.36 1.783 1.36.164 0 .33-.024.498-.07L30.648 7.88c.986-.274 1.56-1.296 1.287-2.282-.275-.988-1.296-1.565-2.282-1.29L16.377 8.012c-.984.277-1.56 1.3-1.285 2.286z"/></symbol><symbol viewBox="0 0 32 32" id="icon-electric-light"><title>electric-light</title><path d="M7.567 10.265c.227.822.973 1.36 1.785 1.36.164 0 .332-.023.498-.07l13.294-3.708c.988-.276 1.563-1.3 1.29-2.287-.276-.99-1.3-1.567-2.286-1.29L8.854 7.976c-.985.276-1.563 1.3-1.287 2.288zM9.354 6.46c.164 0 .332-.023.498-.07l9.9-2.737c.987-.277 1.563-1.3 1.288-2.29-.274-.987-1.298-1.566-2.285-1.29l-9.9 2.74c-.985.274-1.563 1.3-1.29 2.288.23.82.977 1.36 1.79 1.36zM22.15 9.433l-13.296 3.71c-.985.274-1.563 1.3-1.287 2.286.227.82.973 1.46 1.785 1.46.022 0 .043.1.064.1h.016c.08 0 .864.11 1.525.53.22.13.413.47.59.47H12v2h2v-2.16c0-.36-.153-.69-.347-.98-.26-.4-.49-.72-.8-1l6.167-1.71 1.107.98c-.075.04-.14.08-.216.12-.59.35-1.08.86-1.56 1.59-.19.29-.34.62-.34.98V21H11.6c-1.12 0-1.6 1.04-1.6 2.148v1.604c0 1.106 0 2.003 2 2.003V29c0 1.66.932 3 2.592 3h2.848C19.1 32 20 30.66 20 29v-2.25c2-.016 2-.903 2-2v-1.603C22 22.04 21.52 21 20.413 21H20v-3.163c1-.365 1.008-.63 1.432-.797.265-.107.622-.172.793-.21.085-.02.207-.03.248-.038.018-.003.06-.005.066-.006.46-.05.86-.372 1-.813.14-.442.01-.928-.33-1.24L21.74 13.4l1.4-.39c.987-.274 1.563-1.3 1.29-2.287-.276-.99-1.3-1.566-2.285-1.29z"/></symbol><symbol viewBox="0 0 32 32" id="icon-envelope"><title>envelope</title><path d="M31.562 4.464c-.377-.626-.974-1.098-1.685-1.317C29.597 3.062 29.307 3 29 3H3c-.307 0-.598.062-.877.148-.712.22-1.308.69-1.685 1.316C.166 4.914 0 5.44 0 6.004v20c0 .307.06.598.146.877.22.72.688 1.31 1.313 1.69.45.27.97.44 1.54.44h26c.56 0 1.09-.16 1.54-.43.62-.38 1.09-.97 1.31-1.68.08-.28.14-.57.14-.87v-20c0-.56-.17-1.09-.44-1.54zM27.022 6L19 14.024l-1.5 1.5-.793.795c-.39.39-1.023.39-1.414 0l-.793-.8-1.5-1.5L4.978 6H27.02zM3 7.026l8.5 8.5-8.5 8.5v-17zM4.02 26L13 17.024l1.586 1.587c.78.79 2.047.79 2.828.01L19 17.03 27.978 26H4.02zM29 24.026l-8.5-8.5 8.5-8.5v17z"/></symbol><symbol viewBox="0 0 32 32" id="icon-exit-noexit"><title>exit-noexit</title><path d="M7.874 16.004c4.388 0 7.945-3.582 7.945-8s-3.56-8-7.95-8c-4.39 0-7.95 3.582-7.95 8s3.55 8 7.94 8zM4.636 7.388l1.576 1.604 4.9-4.988 1.48 1.505L6.212 12 3.157 8.89l1.48-1.506zM31.176.51c-.592-.595-1.552-.595-2.143 0L.343 29.4c-.59.595-.59 1.56 0 2.157.297.298.685.446 1.073.446.388 0 .776-.148 1.072-.446L31.176 2.67c.59-.597.59-1.564 0-2.16zm.724 19.427l-2.932-2.932-4.568 4.567-4.567-4.567-2.933 2.932 4.567 4.567L16.9 29.07l2.933 2.934 4.567-4.567 4.568 4.567L31.9 29.07l-4.567-4.566z"/></symbol><symbol viewBox="0 0 31.99 32" id="icon-facebook-brand"><title>facebook-brand</title><path d="M30.23 0H1.77A1.77 1.77 0 0 0 0 1.77v28.46A1.77 1.77 0 0 0 1.77 32h15.32V19.61h-4.17v-4.83h4.17v-3.56c0-4.13 2.52-6.39 6.21-6.39A34 34 0 0 1 27 5v4.34h-2.53c-2 0-2.39 1-2.39 2.35v3.08h4.78l-.63 4.83h-4.16V32h8.15A1.77 1.77 0 0 0 32 30.23V1.77A1.76 1.76 0 0 0 30.23 0" fill="#3b5999"/></symbol><symbol viewBox="0 0 32 32" id="icon-facebook"><title>facebook</title><path d="M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16S24.837 0 16 0zm4 11h-1.546C17.32 11 17 11.733 17 12.524V14h2.905l-.352 3H17v7h-3v-7h-2v-3h2v-1.746c0-2.337 1.618-3.61 3.703-3.61 1 0 2.026.074 2.297.108V11z"/></symbol><symbol viewBox="0 0 32 32" id="icon-filter"><title>filter</title><path d="M30.5 15h-2.714c-.542-2-2.014-2.7-3.765-2.7-1.75 0-3.22.7-3.76 2.7H1.5c-.828 0-1.5.672-1.5 1.5 0 .83.672 1.5 1.5 1.5h18.912c.64 1 2.01 2.3 3.61 2.3 1.598 0 2.968-1.3 3.608-2.3h2.87c.828 0 1.5-.67 1.5-1.5 0-.828-.672-1.5-1.5-1.5zm0 10H11.786c-.542-2-2.014-2.7-3.765-2.7-1.75 0-3.22.7-3.76 2.7H1.5c-.828 0-1.5.672-1.5 1.5 0 .83.672 1.5 1.5 1.5h2.912c.64 1 2.01 2.3 3.61 2.3 1.598 0 2.968-1.3 3.608-2.3H30.5c.828 0 1.5-.67 1.5-1.5 0-.828-.672-1.5-1.5-1.5zM1.5 8h8.912c.64 1 2.01 2.3 3.61 2.3C15.62 10.3 16.99 9 17.63 8H30.5c.828 0 1.5-.67 1.5-1.5 0-.828-.672-1.5-1.5-1.5H17.786c-.542-2-2.014-2.7-3.765-2.7-1.75 0-3.22.7-3.76 2.7H1.5C.672 5 0 5.672 0 6.5 0 7.33.672 8 1.5 8z"/></symbol><symbol viewBox="0 0 32 32" id="icon-fixed-variable"><title>fixed-variable</title><path d="M30.833.53c-.58-.594-1.52-.594-2.1 0L.636 29.406c-.58.595-.58 1.562 0 2.157.29.298.67.446 1.05.446s.76-.15 1.05-.45L30.833 2.69c.58-.595.58-1.562 0-2.157zm1.27 26.44c-.05-.12-.163.03-.29.03H30v-5.478c0-.177-.93-.522-1.1-.522h-3.5c-.082 0-.206.135-.264.195-.058.06-.136.242-.136.327V27h-2.514c-.126 0-.24-.15-.287-.03-.05.12-.03.03.06.123l4.66 4.793c.05.06.13.094.22.094s.16-.034.22-.094l4.66-4.793c.09-.092.11-.003.07-.122zm-8.395-2.01c.058-.06.292-.086.292-.17V20h2.202c.126 0 .24-.196.287-.315.04-.12.02-.375-.07-.466l-4.67-4.8c-.06-.06-.14-.1-.22-.1-.08 0-.16.03-.22.09l-4.67 4.79c-.09.09-.12.34-.07.46.05.12.16.31.28.31H20v4.79c0 .17-.383.21-.21.21h3.497c.083 0 .363.02.42-.04zM1.9 16h10c.825 0 1.1-.675 1.1-1.5V9c0-.825-.275-1-1.1-1H11V4.5C11 2.02 8.98 0 6.5 0S2 2.02 2 4.5V8c-1 0-2 .175-2 1v5.5c0 .825 1.075 1.5 1.9 1.5zM4 4.5C4 3.12 5.12 2 6.5 2S9 3.12 9 4.5V8H4V4.5z"/></symbol><symbol viewBox="0 0 32 32" id="icon-gas"><title>gas</title><path d="M26.616 15.188c-1.317-4.09-4.083-7.55-7.437-10.244-1.41-1.132-2.92-2.138-4.5-3.033-.65-.36-1.31-.71-1.98-1.04-.51-.26-1.01-.51-1.54-.74-.24-.1-.51-.17-.75-.08-.08.03-.14.07-.2.12-.03.02-.05.05-.07.08-.21.25-.18.61-.11.93.38 1.78.15 3.97-.21 5.74-.57 2.78-1.76 5.41-3.3 7.79C4.5 17.83 4.03 21.72 4.9 25.2c.65 2.623 2.7 4.614 5.29 5.84-.07-.094-.16-.183-.23-.285-1.92-2.82-.57-6.08 1.03-8.69.81-1.336 1.75-2.62 2.49-3.99.362-.684.65-1.42.82-2.173.145-.63.2-1.37.11-2.01-.036-.23 0-.51.21-.62.11-.05.24-.043.356-.02.72.13 1.34.625 1.92 1.025.72.49 1.38 1.044 1.995 1.653.63.63 1.2 1.308 1.72 2.01 2.3 3.11 2.73 7.137 1.55 10.645-.412 1.24-1.13 2.52-2.2 3.44 4.7-1.18 6.92-4.46 7.4-8.777.3-2.7.08-5.45-.76-8.04z"/></symbol><symbol viewBox="0 0 32 32" id="icon-gauge"><title>gauge</title><path d="M16 .004c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zm-1 4.063c0-.553.447-1 1-1 .553 0 1 .447 1 1v1.875c0 .553-.447 1-1 1-.553 0-1-.447-1-1V4.067zm-4.91 5.635c-.385.396-1.017.404-1.413.02L7.334 8.41c-.396-.382-.404-1.014-.02-1.41.387-.397 1.02-.406 1.415-.02l1.34 1.308c.39.386.4 1.018.02 1.414zm1.43-2.598l-.79-1.7c-.234-.5-.018-1.095.483-1.33.5-.232 1.095-.016 1.33.485l.79 1.7c.234.5.018 1.09-.483 1.32-.502.23-1.096.01-1.33-.49zm7.555 17.386c-.613 1.552-2.368 2.312-3.92 1.7-1.552-.614-2.445-2.37-1.83-3.92.333-.848.675-1.447 1.675-1.728v-8.91c0-.553.447-1 1-1 .553 0 1 .447 1 1v8.906c0 .013.207.017.244.03 1.55.615 2.444 2.37 1.83 3.922zm2.727-19.085l-.792 1.7c-.233.5-.828.718-1.33.484-.5-.24-.717-.83-.483-1.33l.792-1.7c.23-.5.82-.72 1.32-.49.5.23.72.82.48 1.33zm3.395 3.008L23.854 9.72c-.396.387-1.03.378-1.414-.018s-.377-1.03.02-1.414L23.8 6.98c.396-.386 1.03-.377 1.414.02.386.395.378 1.027-.02 1.413z"/></symbol><symbol viewBox="0 0 32 32" id="icon-github"><title>github</title><path fill-rule="evenodd" fill="#221E1B" d="M16 0C7.2 0 0 7.3 0 16.4 0 23.7 4.6 29.8 10.9 32c.8.2 1.1-.4 1.1-.8v-2.8c-4.5 1-5.4-2.2-5.4-2.2-.7-1.9-1.8-2.4-1.8-2.4-1.5-1 .1-1 .1-1 1.6.1 2.5 1.7 2.5 1.7 1.4 2.5 3.7 1.8 4.7 1.4.1-1.1.6-1.8 1-2.2-3.6-.4-7.3-1.8-7.3-8.1 0-1.8.6-3.3 1.6-4.4-.2-.4-.7-2.1.2-4.3 0 0 1.3-.4 4.4 1.7 1.3-.4 2.6-.5 4-.6 1.4 0 2.7.2 4 .6 3.1-2.1 4.4-1.7 4.4-1.7.9 2.3.3 3.9.2 4.3 1 1.1 1.6 2.6 1.6 4.4 0 6.3-3.7 7.7-7.3 8.1.6.5 1.1 1.5 1.1 3v4.5c0 .4.3.9 1.1.8C27.4 29.8 32 23.7 32 16.4 32 7.3 24.8 0 16 0z"/></symbol><symbol viewBox="0 0 31.36 32" id="icon-google-brand"><title>google-brand</title><path d="M31.36 16.36a18.49 18.49 0 0 0-.29-3.27H16v6.19h8.61a7.35 7.35 0 0 1-3.19 4.83v4h5.17a15.6 15.6 0 0 0 4.77-11.76z" fill="#4285f4"/><path d="M16 32a15.28 15.28 0 0 0 10.59-3.88l-5.17-4A9.66 9.66 0 0 1 7.05 19H1.68v4.14A16 16 0 0 0 16 32z" fill="#34a853"/><path d="M7.05 19a9.46 9.46 0 0 1 0-6.08V8.81H1.68a16 16 0 0 0 0 14.37z" fill="#fbbc05"/><path d="M16 6.36a8.64 8.64 0 0 1 6.12 2.39l4.56-4.58A15.39 15.39 0 0 0 16 0 16 16 0 0 0 1.68 8.81L7.05 13A9.54 9.54 0 0 1 16 6.36z" fill="#ea4335"/></symbol><symbol viewBox="0 0 32 32" id="icon-google"><title>google</title><path d="M16 0C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0zm-4.2 23.4c-4.1 0-7.4-3.3-7.4-7.4s3.3-7.4 7.4-7.4c2 0 3.7.7 5 1.9l-2 1.9c-.5-.5-1.5-1.2-3-1.2-2.4 0-4.6 2.1-4.6 4.7s2 4.7 4.6 4.7c3 0 4-2.1 4.2-3.2h-4.2V15h7c0 .4.1.7.1 1.3 0 4.1-2.9 7.1-7.1 7.1zm13.8-6.3v2.1h-2.1v-2.1h-2.1V15h2.1v-2.1h2.1V15h2.1v2.1h-2.1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-graph-up"><title>graph-up</title><path d="M10 17.336V32h5V19.065l-3.362-3.375zm7 3.576V32h5V15.895l-3.662 3.675zm6.903-7.124L23.9 31.976l5.1.028V8.837l-.375.31zm-19.597 9.42L3 24.372V32h5V20h-.358zM31.486 0h-8.054c-.44 0-.662.534-.35.846l2.635 2.644.015.016-9.006 9.04-5.28-5.303L0 18.75l2.795 2.805 8.65-8.7 5.282 5.304.08-.08 3.653-3.67 8.067-8.1 2.61 2.61c.315.31.863.09.863-.36V.5c0-.272-.237-.5-.513-.5z"/></symbol><symbol viewBox="0 0 32 32" id="icon-home"><title>home</title><path d="M31.407 15.023L26 9.885V2h-4v3.79L16.776.39c-.516-.514-1.334-.514-1.85 0L.292 15.023c-.393.392-.486.8-.273 1.313.21.513.74.664 1.29.664H3v13H1.977c-.575 0-1.04.427-1.04 1s.465 1 1.04 1H30.17c.574 0 1.04-.427 1.04-1s-.466-1-1.04-1H29V17h1.684c.557 0 .933-.15 1.147-.664.22-.513-.03-.92-.42-1.313zM14 30H8V17h6v13zm10-7h-6v-6h6v6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-hot"><title>hot</title><path d="M17 19.195v-7.93c0-.666-.337-1.205-1-1.205-.66 0-1 .538-1 1.205v7.93c-2 .517-3.03 2.1-3.03 3.973 0 2.294 1.8 4.154 4.08 4.154 2.28 0 4.003-1.86 4.003-4.154 0-1.873-1.053-3.456-3.053-3.973zm5-2.923V5.526C22 2.48 19.025.004 16 .004c-3.026 0-6 2.477-6 5.522v10.746c-2 1.66-3.038 4.19-3.038 6.896 0 4.872 4.068 8.836 8.91 8.836 4.84 0 9.1-3.963 9.1-8.836 0-2.705-.972-5.236-2.972-6.896zm-6 13.32c-3.526 0-6.34-2.874-6.34-6.423 0-2.42 1.34-4.53 3.34-5.63V5.52c0-1.72 1.294-3.11 3-3.11 1.707 0 3 1.397 3 3.11v12.03c2 1.094 3.338 3.2 3.338 5.617 0 3.55-2.81 6.425-6.338 6.425z"/></symbol><symbol viewBox="0 0 32 32" id="icon-info"><title>info</title><path d="M15.9.004c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zM13.792 5.54c.534-.494 1.17-.74 1.91-.74s1.374.246 1.903.74c.53.492.794 1.085.794 1.78 0 .693-.27 1.284-.81 1.772s-1.17.732-1.9.732c-.74 0-1.38-.244-1.91-.732s-.8-1.08-.8-1.773c0-.7.26-1.29.8-1.78zM20 26h-8v-1.008c0-.018.343-.04.57-.068.23-.027.362-.073.526-.137.292-.11.553-.267.67-.472.12-.206.234-.477.234-.815v-7.968c0-.32-.16-.6-.306-.842s-.372-.436-.59-.582c-.165-.11-.137-.214-.47-.315-.333-.1-.634-.163-.634-.19v-1l6.25-.356-.25.205v10.87c0 .32.227.59.364.815.137.224.412.39.668.5.183.082.224.155.443.22.22.062.525.108.525.135V26z"/></symbol><symbol viewBox="0 0 32 32" id="icon-kettle"><title>kettle</title><path d="M31.983 26c0-3.997-1.984-7.12-3.983-9.62v-5.855c0-5.8-4.65-10.52-10.5-10.52S7 4.723 7 10.525v5.855c0 .283-.44.575-.672.878l-1.16-1.18c-.78-.774-2.03-.774-2.81 0L.592 17.834c-.78.774-.777 2.028.004 2.802l3.055 3.132c.6.86.35 6.253.35 6.253 0 1.1.37 1.98 1.48 1.98h24.51c1.1 0 2.01-.88 2.01-1.97v-3.97c0-.04 0-.05-.01-.06zM14.815 10.67c0 .447.053.865.235 1.242-1.806.337-3.05 1.006-5.05 1.948v-3.336c0-4.162 3.302-7.55 7.5-7.55S25 6.36 25 10.524v3.336c-1-.942-3.015-1.61-4.82-1.95.18-.376.377-.794.377-1.24 0-1.596-1.262-2.89-2.87-2.89s-2.872 1.295-2.872 2.89zM28.237 29H25v-4.84c0-2.842-3.52-8.2-6.61-8.623 6.635.294 9.932 5.245 9.9 8.74-.033 3.495-.053 4.723-.053 4.723z"/></symbol><symbol viewBox="0 0 32 32" id="icon-key"><title>key</title><path d="M32 25.774c.01-.175-.054-.346-.178-.47L19.714 13.197c1.118-3.49.3-7.464-2.468-10.233C13.3-.98 6.904-.98 2.96 2.964-.987 6.91-.987 13.306 2.96 17.25c2.768 2.77 6.74 3.587 10.23 2.47l1.755 1.755c.12.12.284.183.454.177l4.78-.187L20 26.14c-.012.34.293.648.63.63l4.676-.18-.185 4.79c0 .17.06.333.18.452.16.146.3.187.47.176l5.67.002c.31-.02.55-.263.57-.565V25.78zM9.663 9.668C8.43 10.9 6.433 10.9 5.2 9.668s-1.234-3.232 0-4.465 3.23-1.233 4.464 0 1.233 3.233 0 4.465z"/></symbol><symbol viewBox="0 0 32 32" id="icon-lock"><title>lock</title><path d="M25.9 15H25V9.004c0-4.963-4.037-9-9-9s-9 4.037-9 9V15H5.9C4.25 15 3 16.354 3 18.004v11C3 30.654 4.25 32 5.9 32h20c1.65 0 3.1-1.346 3.1-2.996v-11C29 16.354 27.55 15 25.9 15zM11 9.004c0-2.76 2.24-5 5-5s5 2.24 5 5V15H11V9.004z"/></symbol><symbol viewBox="0 0 32 32" id="icon-magnify-in"><title>magnify-in</title><path d="M15 6h-4v5H6v3h5v5h4v-5h4v-3h-4zm16.415 20.99l-.193-.192-7.69-7.722c1.067-1.848 1.688-4 1.703-6.29C25.28 5.773 19.655 0 12.675 0h-.085C5.647 0-.005 5.438-.05 12.42-.092 19.43 5.53 25 12.513 25h.083c2.32 0 4.496-.428 6.367-1.526l7.684 7.817c.192.2.193.25.193.25.58.59 1.522.61 2.103.03l2.472-2.47c.58-.58.58-1.51 0-2.1zM19.23 19.338C17.455 21.11 15.098 22 12.596 22h-.062c-5.193 0-9.39-4.347-9.358-9.56C3.208 7.26 7.432 3 12.59 3h.064c2.516 0 4.875 1.144 6.642 2.94 1.767 1.798 2.732 4.2 2.716 6.728-.017 2.514-1.004 4.898-2.78 6.67z"/></symbol><symbol viewBox="0 0 32 32" id="icon-magnify"><title>magnify</title><path d="M31.415 26.982l-.193-.193-7.69-7.73c1.067-1.85 1.688-4 1.703-6.29.045-7-5.58-12.77-12.56-12.77h-.084C5.65 0 0 5.43-.05 12.42-.092 19.43 5.53 25 12.513 25h.083c2.32 0 4.673-.433 6.544-1.53L27 31.288v.047l.015.217c.58.584 1.435.595 2.016.012l2.43-2.475c.58-.59.54-1.53-.04-2.11zm-12.184-7.65C17.46 21.106 15.1 22 12.6 22h-.062c-5.193 0-9.39-4.347-9.358-9.56C3.208 7.26 7.432 3 12.59 3h.064c2.516 0 4.875 1.14 6.642 2.936 1.767 1.797 2.732 4.2 2.716 6.727-.017 2.515-1.004 4.898-2.78 6.67z"/></symbol><symbol viewBox="0 0 32 32" id="icon-menu"><title>menu</title><path d="M29.5 13h-27C1.12 13 0 14.343 0 16s1.12 3 2.5 3h27c1.38 0 2.5-1.343 2.5-3s-1.12-3-2.5-3zm0 10h-27C1.12 23 0 24.343 0 26s1.12 3 2.5 3h27c1.38 0 2.5-1.343 2.5-3s-1.12-3-2.5-3zM2.5 9h27C30.88 9 32 7.657 32 6s-1.12-3-2.5-3h-27C1.12 3 0 4.343 0 6s1.12 3 2.5 3z"/></symbol><symbol viewBox="0 0 32 32" id="icon-message"><title>message</title><path d="M28.7 1H3.1C1.333 1 0 3.104 0 4.87v16C0 22.64 1.333 24 3.1 24H5v5.05s-.18 1.155.67 1.56c1.067.503 2.032-.346 2.032-.346L13.85 24H28.7c1.767 0 3.3-1.362 3.3-3.13v-16C32 3.105 30.468 1 28.7 1zm.3 19.87c0 .11-.19.13-.3.13H12.697L8 25.877V21H3.1c-.11 0-.1-.02-.1-.13v-16c0-.11-.01-.87.1-.87h25.6c.11 0 .3.76.3.87v16zM23.915 14H7.885c-.768 0-1.39.73-1.39 1.5s.622 1.5 1.39 1.5h16.03c.77 0 1.392-.73 1.392-1.5s-.623-1.5-1.392-1.5zm0-6H7.885c-.768 0-1.39.73-1.39 1.5s.622 1.5 1.39 1.5h16.03c.77 0 1.392-.73 1.392-1.5S24.684 8 23.915 8z"/></symbol><symbol viewBox="0 0 32 32" id="icon-mobile"><title>mobile</title><path d="M25 2.836C25 1.27 23.73 0 22.164 0H9.836C8.27 0 7 1.27 7 2.836v26.33C7 30.73 8.27 32 9.836 32h12.33C23.73 32 25 30.73 25 29.164V2.836zM12.898 2H18.9c.498 0 .9.504.9 1s-.402 1-.898 1H12.9c-.498 0-.9-.504-.9-1s.402-1 .898-1zM15.9 30.372c-.832 0-1.512-.68-1.512-1.512 0-.83.68-1.512 1.512-1.512s1.512.68 1.512 1.512-.68 1.512-1.512 1.512zM23 26H9V5h14v21z"/></symbol><symbol viewBox="0 0 32 32" id="icon-monthly-dd"><title>monthly-dd</title><path d="M7.5 5.625c.828 0 1.5-.672 1.5-1.5V1.5C9 .672 8.328 0 7.5 0S6 .672 6 1.5v2.623c0 .83.672 1.502 1.5 1.502zm17 0c.828 0 1.5-.672 1.5-1.5V1.5c0-.828-.672-1.5-1.5-1.5S23 .672 23 1.5v2.623c0 .83.672 1.502 1.5 1.502zM29 3h-1v1.125c0 1.93-1.57 3.5-3.5 3.5s-3.5-1.57-3.5-3.5V3H11v1.125c0 1.93-1.57 3.5-3.5 3.5S4 6.055 4 4.125V3H3C1.343 3 0 4.567 0 6.223v22.614C0 30.494 1.343 32 3 32h26c1.657 0 3-1.506 3-3.163V6.223C32 4.567 30.657 3 29 3zm0 26H3V9h26v20zM15 19c0-2.977-.83-5-3.94-5H7v10h4.06c3.11 0 3.94-2.054 3.94-5zm-6 3v-6h1.31c1.62 0 2.69 1.288 2.69 3 0 1.71-1.07 3-2.69 3H9zm16-3c0-2.977-1.113-5-4.224-5H17v10h3.776C23.886 24 25 21.946 25 19zm-6 3v-6h1.31c1.62 0 2.69 1.29 2.69 3 0 1.712-1.07 3-2.69 3H19z"/></symbol><symbol viewBox="0 0 32 32" id="icon-network"><title>network</title><path d="M28.5 24c-1.4 0-2.6.8-3.2 2H9v-.6l11.1-11.1c1.2.4 2.7.2 3.6-.8 1.4-1.4 1.4-3.6 0-4.9-1.4-1.4-3.6-1.4-4.9 0-1 1-1.2 2.4-.8 3.6L7.2 23H6V6.7c1.2-.6 2-1.8 2-3.2C8 1.6 6.4 0 4.5 0S1 1.6 1 3.5c0 1.4.8 2.6 2 3.2V23H0v9h9v-3h16.3c.6 1.2 1.8 2 3.2 2 1.9 0 3.5-1.6 3.5-3.5S30.4 24 28.5 24z"/></symbol><symbol viewBox="0 0 32 32" id="icon-no-exit"><title>no-exit</title><path d="M15.9.004c-8.837 0-16 7.163-16 16s7.163 16 16 16 16-7.163 16-16-7.163-16-16-16zm0 28c-6.627 0-12-5.373-12-12 0-2.29.64-4.427 1.753-6.247l16.495 16.495c-1.82 1.11-3.96 1.752-6.248 1.752zm10.248-5.753L9.653 5.76c1.82-1.112 3.96-1.753 6.247-1.753 6.627 0 12 5.373 12 12 0 2.29-.64 4.428-1.752 6.247z"/></symbol><symbol viewBox="0 0 32 32" id="icon-pdf"><title>pdf</title><path d="M26.213 18.425c-.427-.42-1.372-.643-2.812-.662-.97-.01-2.14.075-3.38.248-.55-.31-1.12-.66-1.56-1.08-1.2-1.12-2.2-2.68-2.83-4.39.04-.16.08-.3.11-.44 0 0 .68-3.84.5-5.14-.02-.18-.04-.23-.09-.37l-.06-.15c-.18-.42-.54-.65-1.11-.63l-.33.2h-.01c-.63 0-1.14.11-1.28.59-.41 1.52.02 3.67.78 6.6l-.19.43c-.55 1.34-1.24 2.66-1.84 3.86l-.08.14c-.64 1.25-1.22 2.31-1.74 3.21l-.54.28c-.04.02-.97.51-1.184.65-1.85 1.11-3.08 2.36-3.28 3.36-.067.32-.02.724.31.913l.526.26c.23.11.47.17.716.17 1.32 0 2.85-1.643 4.96-5.324 2.44-.8 5.21-1.45 7.64-1.82 1.85 1.042 4.127 1.77 5.565 1.77.253 0 .473-.03.65-.077.28-.07.51-.23.65-.44.28-.42.338-1 .26-1.59-.022-.177-.162-.39-.314-.54zm-19.7 7.018c.24-.658 1.194-1.958 2.6-3.11.09-.073.308-.277.507-.467-1.472 2.348-2.457 3.284-3.106 3.577zm8.338-19.2c.43 0 .67 1.07.69 2.07s-.21 1.706-.5 2.226c-.24-.77-.35-1.99-.35-2.78 0 0-.01-1.52.18-1.52zm-2.48 13.683c.3-.53.61-1.086.92-1.677.77-1.45 1.25-2.58 1.61-3.52.72 1.3 1.61 2.41 2.66 3.29.13.11.27.22.42.33-2.13.42-3.97.93-5.59 1.56zm13.44-.12c-.13.08-.5.128-.74.128-.77 0-1.72-.353-3.06-.927.52-.038.99-.057 1.41-.057.78 0 1.01-.003 1.76.19s.77.584.64.666zm2.38-13.57L23.7 1.77C22.725.798 20.775 0 19.4 0h-15C3.025 0 2 1.13 2 2.504v27C2 30.88 3.025 32 4.4 32h23c1.375 0 2.6-1.12 2.6-2.496v-19c0-1.375-.845-3.296-1.818-4.268zm-1.47 1.412c.1.098.2.352.29.352H22V2.896c0 .095.206.19.304.29l4.414 4.462zM28 29.504c0 .27-.33.496-.6.496h-23c-.27 0-.4-.225-.4-.496v-27c0-.27.13-.504.4-.504h15c.15 0 .6.023.6.057V10h7.847c.034 0 .153.353.153.504v19z"/></symbol><symbol viewBox="0 0 32 32" id="icon-pencil"><title>pencil</title><path d="M21.877.004l-2.916 2.83s9.73 9.76 9.73 9.663c0-.098 2.82-2.928 2.82-2.928L21.88 0zm-3.79 3.904L2.443 20.488.5 32.003l11.665-1.757L27.71 13.57l-9.624-9.662zM5.167 28.88l-1.46-1.463.78-4.978 1.146-1.24.035.03-.02.02 5.745 5.69-1.175 1.23-5.054.68z"/></symbol><symbol viewBox="0 0 32 32" id="icon-person-add"><title>person-add</title><path d="M30.443 21.938c-.306-.58-.69-1.11-1.14-1.572-.3-.31-.627-.588-.98-.833-1.055-.736-2.327-1.166-3.695-1.166-1.368 0-2.64.43-3.697 1.166-.35.245-.68.525-.98.833-.44.463-.83.992-1.14 1.572-.51.966-.8 2.072-.8 3.247 0 1.175.29 2.282.8 3.248 1.13 2.125 3.31 3.57 5.82 3.57 2.51 0 4.7-1.445 5.82-3.57.51-.966.8-2.073.8-3.248 0-1.175-.29-2.28-.8-3.247zM28 26h-2v2.163c0 .55-.45 1-1 1s-1-.45-1-1V26h-2c-.55 0-1-.45-1-1s.45-1 1-1h2v-1.837c0-.55.45-1 1-1s1 .45 1 1V24h2c.55 0 1 .45 1 1s-.45 1-1 1zm-10.958 3.366c-.674-1.277-1.03-2.723-1.03-4.18 0-1.46.355-2.904 1.03-4.182.393-.745.89-1.427 1.473-2.03.387-.4.814-.763 1.27-1.08.764-.532 1.597-.92 2.47-1.176 1.09-1.754 1.75-3.95 1.75-6.348 0-1.18-.166-2.31-.455-3.366-1.114-4.07-4.182-7-7.802-7-3.307 0-6.15 2.447-7.47 5.972-.497 1.336-.785 2.82-.785 4.394 0 3.778 1.615 7.075 4.02 8.886.24 1.424-.604 2.342-2.004 3.012-5.46.788-9.27 2.572-9.27 4.65 0 2.808 6.94 5.084 15.5 5.084 1.13 0 2.22-.052 3.29-.13-.8-.693-1.49-1.53-2-2.506z"/></symbol><symbol viewBox="0 0 32 32" id="icon-person"><title>person</title><path d="M22.847 22.33c-1.604-.713-2.538-1.7-2.156-3.297 2.32-1.853 3.85-5.038 3.85-8.663 0-1.18-.17-2.31-.47-3.366-1.15-4.07-4.31-7-8.05-7-3.41 0-6.34 2.447-7.7 5.972-.51 1.336-.81 2.82-.81 4.394 0 3.778 1.67 7.075 4.15 8.886.25 1.424-.62 2.342-2.07 3.012C3.96 23.056.02 24.84.02 26.92c0 2.807 7.162 5.083 16 5.083s16-2.276 16-5.083c0-2.03-3.755-3.777-9.17-4.59z"/></symbol><symbol viewBox="0 0 32 32" id="icon-phone"><title>phone</title><path d="M3.25 9.87c.82 3.74 3.61 8.43 7.83 12.65 4.22 4.22 8.91 7 12.65 7.83 2.42.53 4.45.24 5.7-1.01l2.12-2.11c.88-.88.88-2.31 0-3.19l-5.36-3.68c-.88-.88-2.31-.88-3.19 0l-1.76 1.76c-1.07 1.07-4.11-.25-6.8-2.94-2.69-2.69-4.01-5.74-2.94-6.8l1.76-1.76c.88-.88.88-2.31 0-3.19l-3.7-5.37c-.88-.88-2.31-.88-3.19 0L4.26 4.17c-1.25 1.25-1.54 3.28-1.01 5.7z"/></symbol><symbol viewBox="0 0 32 32" id="icon-piggy-bank"><title>piggy-bank</title><path d="M32 11.007c0-1.3-1.078-2.356-2.407-2.356-.583 0-1.11.22-1.526.55C25.492 5.99 21.053 3.86 16 3.86c-1.99 0-3.888.33-5.613.927l-3.3-1.63c-.42-.206-.98-.187-1.38.054-.4.24-.707.67-.707 1.13v3.58C4 8.8 3.414 10 2.83 11h-.864C.886 11 0 11.724 0 12.783v5.72C0 19.56.885 20 1.966 20h.864C3.473 22 4 22.685 5 23.624v4.223C5 28.883 6.276 29 7.335 29h2.888c1.06 0 1.777-.117 1.777-1.154v-.853c1 .278 2.664.438 4 .438 1.336 0 3-.16 4-.43v.86c0 1.04.718 1.16 1.777 1.16h2.888c1.06 0 2.335-.11 2.335-1.15v-4.23c2-2.1 3.624-4.89 3.624-7.98 0-.8-.202-1.58-.39-2.34 1.07-.24 1.766-1.17 1.766-2.29zm-24.766 2.72c-.827 0-1.498-.655-1.498-1.465s.67-1.466 1.498-1.466 1.498.656 1.498 1.466-.67 1.466-1.498 1.466z"/></symbol><symbol viewBox="0 0 32 32" id="icon-pin"><title>pin</title><path d="M15.9.004c-5.523 0-10 4.477-10 10 0 10 10 22 10 22s10-12 10-22c0-5.523-4.477-10-10-10zm0 16c-3.314 0-6-2.686-6-6s2.686-6 6-6 6 2.686 6 6-2.686 6-6 6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-play"><title>play</title><path d="M16 2C8.3 2 2 8.3 2 16s6.3 14 14 14 14-6.3 14-14S23.7 2 16 2zm-3.1 19.6V10.4l8.4 5.6-8.4 5.6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-pound-circle"><title>pound-circle</title><path d="M16 0C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0zm3.1 14.5v2.4h-4.2v4.7h6V24H9.6v-2.4h2.2v-4.7H10v-2.4h1.8v-2.2c0-2.8 2.2-4.8 5.2-4.8 1.2 0 2.5.3 3.9.8l-.8 2.3c-.9-.4-1.7-.6-2.5-.6-1.5 0-2.6 1-2.6 2.5v1.9h4.1v.1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-pound-note"><title>pound-note</title><path d="M32 7.997C32 6.342 30.658 5 29.003 5H2.997C1.342 5 0 6.342 0 7.997v17.005C0 26.658 1.342 28 2.997 28h26.005C30.658 28 32 26.658 32 25.003V7.997zM29 26H3V8h26v18zM8.49 17c0-2.94 1.696-5 4.16-7H5v14h7.65c-2.464-2-4.16-4.06-4.16-7zm15.02 0c0 2.94-1.696 5-4.16 7H27V10h-7.65c2.464 2 4.16 4.06 4.16 7zm-10.8-2.02c.136.34.274 1.02.412 1.02H12v2h1.606c.072 0 .134-.356.185-.205.05.152.08-.025.08.13 0 .248-.04.317-.14.543-.09.224-.21.35-.35.543-.14.2-.31.33-.49.49-.18.16-.37.28-.57.4l.86 1.26c.27-.2.54-.34.81-.41.27-.07.53-.1.78-.1.31 0 .56.03.76.08.2.06.41.12.61.19.19.07.41.12.64.17.23.05.52.07.87.07s.71-.06 1.09-.19c.38-.12.73-.35 1.06-.67l-.82-1.39c-.247.27-.467.43-.653.5-.19.07-.374.1-.555.1-.185 0-.362-.01-.54-.04-.172-.03-.35-.07-.534-.12-.185-.03-.364-.07-.544-.1-.18-.03-.36-.05-.54-.05-.126 0-.26.02-.4.06-.136.04-.315.13-.535.26l-.03-.022c.305-.24.57-.51.8-.82.22-.306.33-.676.33-1.106 0-.155-.007.36-.02.225-.015-.142-.046.248-.09.248H17v-2h-1.77c-.138 0-.247-.705-.323-.88-.078-.174-.134-.453-.165-.585-.033-.135-.053-.314-.064-.414-.01-.1-.015-.234-.015-.35 0-.38.124-.702.365-.93.245-.23.572-.353.986-.353.348 0 .622.07.82.21.197.14.343.31.44.5.097.2.158.74.185.95.02.21.04.86.05.86h1.86c0-1-.3-2.32-.88-2.9-.59-.59-1.41-1.055-2.47-1.055-.58 0-1.09-.014-1.53.13-.44.15-.81.305-1.1.557-.29.255-.52.525-.67.855-.15.33-.23.79-.23 1.16 0 .42.07.91.2 1.245z"/></symbol><symbol viewBox="0 0 32 32" id="icon-present"><title>present</title><path d="M15 9H5.892C4.24 9 3 10.31 3 11.964V19h12V9zm10.932 23C27.585 32 29 30.65 29 28.998V21H17v11h8.932zM15 32V21H3v7.998C3 30.65 4.24 32 5.892 32H15zM25.932 9H17v10h12v-7.036C29 10.31 27.585 9 25.932 9zM21.05.004c-1.863 0-2.992 1.6-3.9 2.886-.17.243-.34.482-.51.704l-.468.623-.26.346-.263-.35-.47-.62c-.17-.22-.34-.46-.51-.703-.91-1.286-2.04-2.886-3.9-2.886-2.19 0-3.96 1.776-3.96 3.958 0 2.183 1.77 3.96 3.95 3.96.34 0 1.09-.006 1.98-.012 1.03-.007 2.22-.014 3.16-.016.93.003 2.13.01 3.16.016.89.006 1.64.01 1.98.01 2.18 0 3.96-1.775 3.96-3.958C25 1.78 23.22.004 21.04.004zm-8.313 5.902c-.88.006-1.63.01-1.965.01-1.077 0-1.954-.876-1.954-1.954 0-1.077.877-1.954 1.954-1.954.826 0 1.556 1.035 2.263 2.037.186.263.37.523.553.764l.455.6.362.48-1.668.01zm8.314.01c-.33 0-1.08-.004-1.96-.01l-1.67-.01.36-.48.46-.607c.19-.25.37-.51.56-.77.71-1 1.44-2.04 2.27-2.04 1.08 0 1.96.87 1.96 1.95s-.88 1.95-1.95 1.95z"/></symbol><symbol viewBox="0 0 32 32" id="icon-print"><title>print</title><path d="M20.247 15H11.75c-.55 0-.998.448-.998 1s.447 1 1 1h8.495c.552 0 1-.448 1-1s-.448-1-1-1zm0 4H11.75c-.55 0-.998.448-.998 1s.447 1 1 1h8.495c.552 0 1-.448 1-1s-.448-1-1-1zm8.755-12H25V3.128C25 2.008 24.253 1 23.133 1H8.867C7.747 1 7 2.01 7 3.128V7H2.998C1.348 7 0 7.937 0 9.586v8.864C0 20.1 1.35 21 2.998 21H7v3.663l1.946 2.026 2.15 2.23L13.083 31h10.05C24.253 31 25 30 25 28.88V21h4.002c1.65 0 2.998-.9 2.998-2.55V9.586C32 7.936 30.65 7 29.002 7zM9 3h14v4H9V3zm18 16h-2v-4h-2v14h-7.918L15 28.88v-4.216C15 23.56 14.186 23 13.083 23H9v-8H7v4H5v-6h22v6z"/></symbol><symbol viewBox="0 0 32 32" id="icon-quarterly-dd"><title>quarterly-dd</title><path d="M16 0C7.164 0 0 7.163 0 16s7.164 16 16 16 16-7.163 16-16S24.836 0 16 0zm0 29C8.832 29 3 23.168 3 16S8.832 3 16 3v13h13c0 7.168-5.832 13-13 13z"/></symbol><symbol viewBox="0 0 32 32" id="icon-question-circle"><title>question-circle</title><path d="M16 .004c-8.835 0-16 7.165-16 16s7.165 16 16 16 16-7.165 16-16-7.165-16-16-16zm-.266 26.87c-1.406 0-2.408-1.096-2.408-2.503 0-1.37 1.002-2.31 2.408-2.31 1.405 0 2.408.94 2.408 2.32 0 1.41-1.003 2.51-2.408 2.51zm1.72-7.35l-.03.476H14v-1.01c0-3.693 4.264-4.785 4.264-7.6 0-1.72-1.297-2.877-3.08-2.877-1.316 0-2.56.564-3.96 1.437l-1.53-2.847c1.907-1.282 4.003-1.968 6.13-1.968 3.79 0 6.477 2.488 6.477 5.805 0 4.5-4.53 5.96-4.84 8.585z"/></symbol><symbol viewBox="0 0 32 32" id="icon-quote"><title>quote</title><path d="M28.232 6.235L23.768 1.77C22.795.796 20.875 0 19.5 0h-15C3.127 0 2 1.127 2 2.502v27.003C2 30.88 3.126 32 4.5 32h23c1.374 0 2.5-1.12 2.5-2.494V10.503c0-1.375-.796-3.296-1.768-4.268zM22 2.895c0 .095.255.192.353.29l4.464 4.463c.098.098.195.352.29.352H22V2.895zm6 26.61c0 .272-.23.495-.5.495h-23c-.27 0-.5-.223-.5-.494V2.502c0-.27.23-.502.5-.502h15c.15 0 .5.022.5.056V10h7.945c.034 0 .055.352.055.503v19.003zM8.5 15H17c.552 0 1-.447 1-1 0-.553-.448-1-1-1H8.5c-.553 0-1 .447-1 1 0 .553.447 1 1 1zM23 18H8.5c-.553 0-1 .447-1 1 0 .553.447 1 1 1H23c.552 0 1-.447 1-1 0-.553-.448-1-1-1zm0 5H8.5c-.553 0-1 .447-1 1 0 .553.447 1 1 1H23c.552 0 1-.447 1-1 0-.553-.448-1-1-1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-recycle"><title>recycle</title><path d="M31.164.87L27.312 4.7C24.417 1.812 20.417.002 16 .002 7.132.002-.048 7 0 16h4.004S4 15.987 4 15.958C4 12.762 5.246 9.8 7.513 7.54 9.78 5.28 12.793 4.035 16 4.035s6.218 1.244 8.484 3.504l-3.62 3.6c-.32.32-.093.85.36.85h9.766c.558 0 1.01-.44 1.01-1V1.22c0-.435-.528-.664-.836-.356zM28 16.046c0 3.196-1.247 6.16-3.514 8.42-2.267 2.26-5.28 3.505-8.485 3.505s-6.21-1.24-8.48-3.5l3.62-3.61c.32-.31.1-.85-.36-.85H1.01C.453 20 0 20.45 0 21v9.78c0 .436.528.665.836.357l3.85-3.83c2.896 2.89 6.896 4.695 11.314 4.695C24.867 32.002 32.047 25 32 16h-4.004s.005.017.005.046z"/></symbol><symbol viewBox="0 0 32 32" id="icon-remove"><title>remove</title><path d="M24.63 10H7.37c-1 0-1.743.906-1.653 2l1.488 18.007C7.295 31.1 8.187 32 9.187 32h13.627c1 0 1.89-.894 1.98-1.988L26.284 12c.09-1.095-.653-2-1.653-2zM12 28.05c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5V13.81c0-.827.448-1.498 1-1.498s1 .67 1 1.5V28.05zm5 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5V13.81c0-.827.448-1.498 1-1.498s1 .67 1 1.5V28.05zm5 0c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5V13.81c0-.827.448-1.498 1-1.498s1 .67 1 1.5V28.05zM24.993 4H23V1.003C23 .45 22.497 0 21.944 0H10.478C9.926 0 9 .45 9 1.003V4H7.007C5.35 4 4 5.367 4 7.023V8h24v-.977C28 5.367 26.65 4 24.993 4zM21 4H11V2h10v2z"/></symbol><symbol viewBox="0 0 32 32" id="icon-renewable"><title>renewable</title><path d="M15.902.004C7.065.004-.1 7.166-.1 16.004c0 4.614 1.968 8.765 5.097 11.682.275-3.668 1.398-6.39 2.935-8.334 1.795-2.268 4.17-3.507 6.532-3.912 3.447-.594 5.26-1.512 6.252-2.39.543-.547.785-2.07.785-2.07s-1.45.9-2.04 1.22c-.73.502-2.35 1.317-5.24 1.812-2.68.458-5.4 1.882-7.42 4.442-.36.462-.71.963-1.02 1.5-2.38-5.23 2.79-9.246 8.63-10.018 6.41-.846 9.49-2.82 9.49-2.82.61 6.205-1.64 12.942-6.96 15.138-3.83 1.58-6.83 1.898-8.95.476-.84 1.796-1.35 3.87-1.38 6.267 2.63 1.884 5.84 3.008 9.32 3.008 8.84 0 16-7.163 16-16 0-8.836-7.16-16-15.99-16z"/></symbol><symbol viewBox="0 0 32 32" id="icon-results"><title>results</title><path d="M0 9h27v6H0zm0-8h32v6H0zm0 16h24v6H0zm0 8h19v6H0z"/></symbol><symbol viewBox="0 0 32 32" id="icon-save"><title>save</title><path d="M31.12 5.753L26.25.88C25.688.32 24.925 0 24.13 0H5.437C2.437 0 0 2.443 0 5.442v21.125C0 29.565 2.44 32 5.438 32h21.125C29.56 32 32 29.565 32 26.566V7.874c0-.795-.316-1.56-.88-2.12zM18 3h3v7h-3V3zm11 23.566C29 27.906 27.903 29 26.562 29H5.438C4.098 29 3 27.907 3 26.566V5.442C3 4.102 4.097 3 5.438 3H6v9h17V3h1.13L29 7.874v18.692z"/></symbol><symbol viewBox="0 0 32 32" id="icon-share"><title>share</title><path d="M31.485 14.416L18.473 4.2c-.333-.26-.667-.305-1.046-.12-.38.185-.427.57-.427.99v5.985C7 11.327.093 17.653.093 27.787c0 .32.163.336.328.056.98-1.58 3.58-8.058 16.58-8.28v5.94c0 .42.05.806.43.99.38.185.74.14 1.07-.12l13.03-10.217c.27-.21.4-.53.4-.87 0-.34-.17-.66-.44-.87z"/></symbol><symbol viewBox="0 0 30 30" id="icon-shield"><title>shield</title><style>.st0{fill:#1C1F4E;}</style><path class="st0" d="M15.1 30.1l-.8-.4c-.2-.1-2-1-6.2-4.4-4.5-3.6-6.6-9.9-6.6-13.2V3L15.1.1 28.7 3v9.1c0 3.3-2 9.6-6.6 13.2-4.2 3.4-6 4.3-6.2 4.4l-.8.4zM5.3 6v6c0 2.1 1.5 7.3 5.2 10.3 2.3 1.9 3.8 2.9 4.7 3.5.9-.6 2.4-1.6 4.7-3.5 3.6-2.9 5.2-8.1 5.2-10.3V6l-9.9-2.1L5.3 6z"/><path class="st0" d="M20.6 12.2h-3.7V8.4h-3.7v3.8H9.4v3.7h3.8v3.8h3.7v-3.8h3.7z"/></symbol><symbol viewBox="0 0 32 32" id="icon-sim"><title>sim</title><path d="M20 0H8.804C7.472 0 6 1.08 6 2.406v27.196C6 30.928 7.472 32 8.804 32h14.403C24.527 32 26 30.928 26 29.602v-24L20 0zm-8 29h-.792C10.314 29 10 28.086 10 27.205V22h2v7zm0-9h-2v-5.594c0-.886.314-1.406 1.208-1.406H12v7zm6 9h-4v-3h4v3zm0-5h-4v-6h4v6zm0-8h-4v-3h4v3zm4 11.205c0 .88-.314 1.795-1.196 1.795H20v-7h2v5.205zM22 20h-2v-7h.804c.882 0 1.196.52 1.196 1.406V20z"/></symbol><symbol viewBox="0 0 32 32" id="icon-smiley"><title>smiley</title><path d="M16 .004c-8.837 0-16 7.164-16 16 0 8.837 7.163 16 16 16s16-7.163 16-16c0-8.836-7.163-16-16-16zm0 29c-7.16 0-12.985-5.832-12.985-13s5.825-13 12.985-13c7.16 0 12.985 5.832 12.985 13s-5.825 13-12.985 13z"/><ellipse cx="10.53" cy="12.77" rx="2.486" ry="2.474"/><ellipse cx="21.47" cy="12.77" rx="2.486" ry="2.474"/><path d="M23.433 19.02c-.238-.145-.51-.222-.79-.222-.528 0-1.008.268-1.283.716-1.113 1.798-3.043 2.873-5.163 2.873-.077 0-.143.01-.197.024-.06-.01-.123-.02-.196-.02-2.12 0-4.05-1.07-5.164-2.87-.276-.44-.756-.71-1.285-.71-.28 0-.552.08-.79.23-.342.21-.583.54-.676.93-.1.39-.03.79.18 1.14 1.66 2.69 4.55 4.3 7.73 4.3.08 0 .14-.01.2-.02.06.01.12.02.19.02 3.17 0 6.06-1.61 7.73-4.3.21-.34.27-.74.18-1.13-.1-.39-.34-.72-.68-.93zm-14.178.29c.033-.002.066-.013.1-.013.07 0 .14.012.21.026-.1-.02-.206-.022-.31-.012zm13.18.014c.068-.015.138-.026.21-.026.032 0 .065.01.1.014-.105-.01-.21-.01-.31.012zm1.203 1.125c.06-.39-.113-.79-.468-1.01-.106-.07-.22-.1-.335-.13.115.02.23.06.335.12.355.22.527.62.468 1z"/></symbol><symbol viewBox="0 0 32 32" id="icon-sort"><title>sort</title><path d="M0 20h15v3H0zm0-6h12v3H0zm0-6h9v3H0zm31.92 9.12c-.13-.277-.404-.12-.703-.12h-4.244c-.193-7-4.68-12.498-11.867-12.498-.226 0-.24.214-.04.334C16.188 5.55 20.782 8 20.938 17h-4.21c-.3 0-.573-.157-.705.12-.13.275-.098.438.086.68l7.24 9.437c.15.195.37.268.61.268s.47-.135.61-.33l7.24-9.365c.18-.242.22-.415.08-.69z"/></symbol><symbol viewBox="0 0 32 32" id="icon-speech-circle"><title>speech-circle</title><path d="M15.9 6.804c5.854 0 10.6 3.863 10.6 8.627 0 4.77-4.746 8.63-10.6 8.63-.562 0-.927-.03-1.465-.1C12.158 26.24 9 26.65 7 26.71v-.56c1-.698 2.463-1.967 2.463-3.416 0-.2-.11-.4-.138-.594-2.397-1.582-3.977-3.997-3.977-6.705 0-4.764 4.698-8.627 10.552-8.627zm-16 9.2c0 8.837 7.163 16 16 16s16-7.163 16-16-7.163-16-16-16-16 7.163-16 16z"/></symbol><symbol viewBox="0 0 32 32" id="icon-speech"><title>speech</title><path d="M15.9 1.01c8.837 0 16 5.82 16 13s-7.163 13-16 13c-.85 0-1.632-.053-2.445-.157C10.02 30.29 6 30.907 2 30.997v-.84c2-1.05 3.95-2.962 3.95-5.146 0-.3-.05-.6-.093-.89-3.62-2.39-5.945-6.03-5.945-10.11 0-7.18 7.152-13 15.988-13z"/></symbol><symbol viewBox="0 0 32 32" id="icon-spinner"><title>spinner</title><path opacity=".25" d="M16 0a16 16 0 0 0 0 32 16 16 0 0 0 0-32m0 4a12 12 0 0 1 0 24 12 12 0 0 1 0-24"/><path d="M16 0a16 16 0 0 1 16 16h-4A12 12 0 0 0 16 4z"/></symbol><symbol viewBox="0 0 32 32" id="icon-star-half"><title>star-half</title><path d="M11.006 10.805l-11.08 1.607 7.987 7.798-1.845 11.01L16 26.023V.787z"/></symbol><symbol viewBox="0 0 32 32" id="icon-star"><title>star</title><path d="M31.9 12.412l-11.055-1.607L15.9.787l-4.944 10.018L-.1 12.412l8 7.798-1.888 11.01 9.888-5.198 9.89 5.2L23.9 20.21z"/></symbol><symbol viewBox="0 0 32 32" id="icon-starline-half"><title>starline-half</title><path d="M31.9 12.412l-11.056-1.607L15.9.787l-4.944 10.018L-.1 12.412l8 7.798-1.888 11.01 9.888-5.198 9.888 5.2L23.9 20.21l8-7.798zm-16 11.14l-.03.015.03-17.837 3.492 7.075L27.2 13.94l-5.65 5.507 1.333 7.776L15.9 23.55z"/></symbol><symbol viewBox="0 0 32 32" id="icon-starline"><title>starline</title><path d="M31.9 12.412l-11.056-1.607L15.9.787l-4.944 10.018L-.1 12.412l8 7.798-1.888 11.01 9.888-5.198 9.888 5.2L23.9 20.21l8-7.798zm-16 11.14l-6.983 3.67 1.334-7.776L4.6 13.94l7.808-1.136L15.9 5.73l3.492 7.075L27.2 13.94l-5.65 5.507 1.333 7.776L15.9 23.55z"/></symbol><symbol viewBox="0 0 32 32" id="icon-talk"><title>talk</title><path d="M30.172 26.82c0 1.265.828 2.36 1.828 2.895v.443c0 .04-.646.062-.953.062-1.89 0-3.618-.792-4.823-2.063-.728.194-1.513.3-2.312.3-4.418 0-8.006-3.185-8.006-7.112s3.58-7.11 7.997-7.11 7.998 3.183 7.998 7.11c0 1.537-.52 2.96-1.45 4.124-.19.41-.27.86-.27 1.35zM14.122 1.79c7.736 0 14.03 5.016 14.22 11.263-1.367-.61-2.878-.93-4.44-.93-2.655 0-5.163.928-7.06 2.615-1.968 1.75-3.052 4.095-3.052 6.606 0 1.24.265 2.44.77 3.55-.145.003-.29.006-.437.006-.754 0-1.334-.048-2.056-.14C9.01 27.815 5 28.362 2 28.443v-.748c2-.933 3.395-2.632 3.395-4.573 0-.27-.102-.537-.14-.797-3.22-2.118-5.315-5.355-5.315-8.98 0-6.385 6.33-11.557 14.184-11.557z"/></symbol><symbol viewBox="0 0 32 32" id="icon-tick-circle"><title>tick-circle</title><path d="M15.9.004c-8.836 0-16 7.163-16 16s7.164 16 16 16c8.837 0 16-7.163 16-16s-7.163-16-16-16zm-3.347 24L6.4 17.784l2.978-3.012 3.174 3.21 9.87-9.978 2.977 3.01-12.85 12.99z"/></symbol><symbol viewBox="0 0 32 32" id="icon-tick"><title>tick</title><path d="M11.42 27.004L3 18.45l4.075-4.14 4.345 4.412L24.925 5.004 29 9.144z"/></symbol><symbol viewBox="0 0 32 32" id="icon-tv"><title>tv</title><path d="M32 25V2H0v23h12v1.78c-1 .08-1.81.27-2.5.37C7.89 27.39 6.73 29 6.73 30h18.34c0-1-1.06-2.61-2.67-2.84-.69-.1-1.4-.29-2.4-.37V25h12zM3 22V5h26v17H3zm4-11h3v7h2v-7h3V9H7m12.9 7l-2.04-7H15.9l3.06 9h1.94l3-9h-2"/></symbol><symbol viewBox="0 0 32 26.01" id="icon-twitter-brand"><title>twitter-brand</title><path d="M32 3.08a13.14 13.14 0 0 1-3.77 1A6.59 6.59 0 0 0 31.12.45a13.11 13.11 0 0 1-4.17 1.59 6.57 6.57 0 0 0-11.36 4.52 6.69 6.69 0 0 0 .17 1.5A18.64 18.64 0 0 1 2.23 1.2a6.58 6.58 0 0 0 2 8.77 6.55 6.55 0 0 1-3-.82v.08a6.57 6.57 0 0 0 5.26 6.44 6.57 6.57 0 0 1-1.73.23 6.45 6.45 0 0 1-1.23-.12 6.57 6.57 0 0 0 6.13 4.56 13.19 13.19 0 0 1-8.16 2.81 12.65 12.65 0 0 1-1.5-.09 18.58 18.58 0 0 0 10.06 3c12.08 0 18.68-10 18.68-18.68v-.85A13.43 13.43 0 0 0 32 3.08" fill="#55acee"/></symbol><symbol viewBox="0 0 32 32" id="icon-twitter"><title>twitter</title><path d="M16 0C7.163 0 0 7.163 0 16s7.163 16 16 16 16-7.163 16-16S24.837 0 16 0zm8.142 12.324c.008.168.01.337.01.508 0 5.185-3.946 11.164-11.163 11.164-2.22 0-4.28-.65-6.02-1.763.3.036.62.055.93.055 1.83 0 3.53-.627 4.87-1.68-1.72-.032-3.17-1.166-3.67-2.725.24.046.482.07.74.07.353 0 .7-.048 1.03-.138-1.798-.36-3.15-1.946-3.15-3.847v-.05c.53.295 1.133.47 1.776.492-1.05-.704-1.745-1.905-1.745-3.266 0-.72.195-1.393.53-1.973 1.937 2.38 4.828 3.94 8.09 4.1-.067-.28-.1-.58-.1-.89 0-2.16 1.755-3.92 3.92-3.92 1.13 0 2.15.48 2.865 1.24.893-.17 1.732-.5 2.49-.95-.293.92-.915 1.69-1.725 2.17.793-.09 1.55-.3 2.25-.61-.52.79-1.186 1.48-1.953 2.03z"/></symbol><symbol viewBox="0 0 32 32" id="icon-ustyle"><title>ustyle</title><path fill="#548DCA" d="M15.1 14.1l-4.2 4.4 2.5.3"/><path fill="#437CBE" d="M15.1 14.1l1.8 5.2-3.5-.5"/><path fill="#4983C3" d="M15.1 14.1l1.8-1.1v6.3"/><path fill="#437CBE" d="M16.9 13l3.3 2.9-3.3 3.4"/><path fill="#568FCB" d="M16.9 13l3-2.4.3 5.3"/><path fill="#9BC6EB" d="M19.9 10.6l1.7 7.4-1.4-2.1"/><path fill="#68A0D6" d="M21.6 18l-4.7 1.3 3.3-3.4"/><path fill="#80B2E0" d="M21.6 18v6.4l-2.7-1.9"/><path fill="#5A94CE" d="M18.9 22.5l-2-3.2 4.7-1.3"/><path fill="#679FD6" d="M16.9 19.3l-4.3 8.2 3.3-1.2"/><path fill="#558FCB" d="M16.9 19.3l-1 7 3-3.8"/><path fill="#8FBDE6" d="M18.9 22.5l-1.7 5-1.3-1.2"/><path fill="#7DB1E0" d="M18.9 22.5l2.7 1.9-4.4 3.1"/><path fill="#417CBE" d="M16.9 19.3l-3.5-.5-3.2 6.9"/><path fill="#3D73B8" d="M16.9 19.3l-6.7 6.4 2.4 1.8"/><path fill="#558FCB" d="M10.9 18.5l-.7 7.2 3.2-6.9"/><path fill="#548DCA" d="M10.9 18.5L8 26.6l2.2-.9"/><path fill="#427BBD" d="M8 26.6l.7 3 1.5-3.9"/><path fill="#3D73B8" d="M10.2 25.7l.6 4.4-2.1-.5"/><path fill="#386FB4" d="M10.2 25.7l2.4 1.8-1.8 2.6"/><path fill="#427BBD" d="M12.6 27.5l-1.8 2.6 2.7-.4"/><path fill="#649ED5" d="M12.6 27.5l3.3-1.2-2.4 3.4"/><path fill="#87B8E4" d="M15.9 26.3l-.8 3-1.6.4"/><path fill="#93C1E8" d="M15.9 26.3l1.3 1.2-2.1 1.8"/><path fill="#5B95CF" d="M8.7 29.6l2 2.4.1-1.9"/><path fill="#568FCB" d="M10.8 30.1l2.7-.4-.8 2.1"/><path fill="#5E98D1" d="M10.8 30.1l-.1 1.9 2-.2"/><path fill="#8DBCE6" d="M12.7 31.8l2.4-2.5-1.6.4"/><path fill="#90BDE6" d="M12.7 31.8l1.4-.2 1-2.3"/><path fill="#A2CAEC" d="M14.1 31.6l1.3-2.1-.3-.2"/><path fill="#A1C9EC" d="M17.2 27.5l-1.8 2-.3-.2"/><path fill="#84B6E2" d="M10.7 32l-1.2-1-.8-1.4"/><path fill="#82B3E1" d="M8 26.6l.3 2.1.4.9"/><path fill="#558FCB" d="M10.9 18.5l3.6-5.7.6 1.3"/><path fill="#5B95CF" d="M14.5 12.8L10.8 15l.1 3.5"/><path fill="#72A9DB" d="M10.8 15l3.6-3.9.1 1.7"/><path fill="#5894CF" d="M19.9 10.6l-3.8.8.8 1.6"/><path fill="#7AAEDF" d="M19.9 10.6l-1.4-1.7-2.4 2.5"/><path fill="#95C0E7" d="M18.5 8.9l-3.4 1.4-.7.8 1.7.3"/><path fill="#70A8DB" d="M18.5 8.9l-4.7-3 1.3 4.4"/><path fill="#629DD5" d="M18.5 8.9l5.4-2.7-4 4.4"/><path fill="#99D1F3" d="M23.9 6.2L21 10l-1.1.6"/><path fill="#599BD4" d="M23.9 6.2l-1.6 5.3L21 10"/><path fill="#7FBBE7" d="M22.3 11.5l-2.4-.9L21 10"/><path fill="#78AEDE" d="M19.9 10.6l2.4.9-.7 6.5"/><path fill="#92C1E8" d="M22.3 11.5l1 5.2-1.7 1.3"/><path fill="#A1CAED" d="M23.3 16.7l-.3 4.8-1.4-3.5"/><path fill="#90BDE6" d="M21.6 18l1.4 3.5-1.4 2.9"/><path fill="#9BC6EB" d="M26.3 15.8l-3 .9 3.6 4"/><path fill="#95C1E8" d="M26.9 20.7l-3.9.8.3-4.8"/><path fill="#9CC6EA" d="M26.9 20.7l-.9 4.2-3-3.4"/><path fill="#93C1E8" d="M23 21.5l3 3.4-2.3 2.1m-.7-5.5l.7 5.5-2-3"/><path fill="#91BFE7" d="M21.4 24.5l2.3 2.5-2-3-.1.4"/><path fill="#98C4EA" d="M23.3 16.7l3-.9-3.8-3.4"/><path fill="#AFD3F0" d="M26.3 15.8l-2.6-4.4-1.2 1"/><path fill="#ABD0EF" d="M23.7 11.4l-1.3-.2-.1.3.2.9"/><path fill="#4E5861" d="M14.7 8.9l-.8 1.5 3 2.6"/><path fill="#020304" d="M7.6 0l1.5 3.5 2.2 3.9 2.7 3-1.5-3.6-2.8-3.4"/><path fill="#3F4040" d="M7.6 0l2.5 2.8 2.4 4-2.8-3.4"/><path fill="#111E2E" d="M12.6 10.3l2.5 3.9-1.1-3.8h-.2"/><path fill="#1B2837" d="M11.3 7.4l1.3 2.9 1.4.1"/><path fill="#585D61" d="M14.7 8.9l-2.2-2.1 1.5 3.6"/><path fill="#848687" d="M10.1 2.8l2.2 3.3 2.4 2.8-2.2-2.1"/><path fill="#183553" d="M14 10.4l2.9 2.6-1.8 1.2-1.1-3.8"/><path fill="#8B9DB0" d="M15.1 9.7l1 1.6.8 1.7-1-1.8"/></symbol><symbol viewBox="0 0 32 32" id="icon-uswitch"><title>uswitch</title><path d="M8.31 17.123V4.316H0V16.83c0 13.013 15.888 19.498 25.126 10.314-7.58 3.768-16.55-1.536-16.816-10.02zM25.174.553L18.447 7.74h2.572v9.433c0 4.06-3.94 7.48-8.61 6.06 5.71 6.745 16.91 2.87 16.91-6.06V7.738H32L25.174.553z"/></symbol><symbol viewBox="0 0 32 32" id="icon-variable"><title>variable</title><path d="M30.856 22.435c-.09-.217-.3-.435-.535-.435H26v-8.958c0-.32-.79-1.042-1.11-1.042h-6.52c-.154 0-.196.292-.305.4-.11.11-.065.488-.065.642V22h-5.062c-.234 0-.446.218-.535.435-.09.216-.04.542.126.707l8.69 8.692c.11.11.25.17.41.17.15 0 .3-.06.41-.17l8.69-8.692c.16-.166.21-.49.12-.707zm-17.02-2.832c.11-.108.164-.483.164-.637V10h4.863c.234 0 .446-.214.535-.43.09-.218.04-.54-.126-.706l-8.69-8.69c-.11-.11-.257-.17-.41-.17-.155 0-.302.06-.41.17L1.07 8.864c-.166.167-.215.49-.126.705.09.21.3.43.536.43H6v8.96c0 .32.592 1.03.912 1.03h6.52c.152 0 .295-.29.403-.4z"/></symbol><symbol viewBox="0 0 32 32" id="icon-warning-circle"><title>warning-circle</title><path d="M16 0C7.2 0 0 7.2 0 16s7.2 16 16 16 16-7.2 16-16S24.8 0 16 0zm2.1 5l-.4 14h-3.4L14 5h4.1zM16 26.9c-1.5 0-2.4-1-2.4-2.5 0-1.4 1-2.5 2.4-2.5s2.4 1 2.4 2.5c0 1.4-1 2.5-2.4 2.5z"/></symbol><symbol viewBox="-9 -1 23 31" id="icon-warning"><title>warning</title><path d="M6 0l-.315 21h-4.32L1 0h5zM3.5 30C1.312 30 0 28.6 0 26.5 0 24.54 1.458 23 3.5 23S7 24.4 7 26.5C7 28.46 5.542 30 3.5 30z"/></symbol><symbol viewBox="0 0 32 32" id="icon-wifi"><title>wifi</title><path d="M30.58 11.44c-.56 0-1.12-.22-1.54-.66-3.33-3.49-7.81-5.41-12.61-5.41-4.78 0-9.25 1.91-12.58 5.37-.81.85-2.16.87-3 .06-.84-.8-.86-2.15-.05-3 4.14-4.3 9.69-6.67 15.64-6.67 5.97 0 11.54 2.39 15.68 6.72.81.85.78 2.19-.07 3-.41.4-.94.59-1.47.59zm-4 5.49c-.55 0-1.09-.21-1.51-.63-2.3-2.32-5.37-3.59-8.63-3.59-3.25 0-6.3 1.27-8.6 3.56-.83.83-2.17.83-3 0-.83-.83-.83-2.18 0-3 3.1-3.1 7.22-4.81 11.6-4.81 4.4 0 8.54 1.72 11.65 4.85.83.83.82 2.18-.01 3-.42.41-.96.62-1.5.62zm-4.46 5.92c-.58 0-1.16-.23-1.57-.7-1.07-1.18-2.53-1.83-4.11-1.83-1.57 0-3.02.64-4.08 1.8-.79.86-2.14.92-3 .13s-.92-2.14-.13-3c1.86-2.02 4.49-3.18 7.21-3.18 2.75 0 5.4 1.18 7.26 3.22.79.87.72 2.21-.15 3-.41.38-.92.56-1.43.56z"/><circle cx="16.59" cy="27.38" r="3.49"/></symbol><symbol viewBox="0 0 32 32" id="icon-wiki"><title>wiki</title><path d="M5.715 21.8c.407-.027.82-.047 1.24-.047 3.33 0 6.397.938 8.002 2.45.007.006.017.008.025.015.11.1.232.185.372.246.01.004.02.005.03.01.016.006.032.008.05.014.152.055.31.09.467.09.16 0 .32-.034.47-.09l.05-.016c.01-.004.02-.005.03-.01.14-.06.26-.144.37-.242.01-.007.02-.01.03-.017 1.61-1.51 4.67-2.45 8-2.45.42 0 .84.02 1.24.048.38.02.98-.1 1.26-.36s.66-.62.66-1V3.58c0-.727-.78-1.32-1.5-1.377-.47-.03-1.06-.05-1.54-.05-3.51 0-6.81.9-9 2.44-2.18-1.54-5.45-2.44-8.97-2.44-.49 0-1.1.028-1.57.06-.72.05-1.41.65-1.41 1.374v16.85c0 .38.28.746.56 1.007.28.26.77.386 1.16.366zM17 6.98c2-1.29 5-2.076 8-2.082V19c-3 .005-6 .588-8 1.617V6.98zM7 4.898c3 .007 6 .794 8 2.082v13.636c-2-1.03-5-1.612-8-1.617V4.89zm23.5-.324c-.803 0-1.5.65-1.5 1.455v17.96c-1-.02-3.488-.03-3.644-.03-3.717 0-7.14.95-9.454 2.57-2.312-1.63-5.64-2.58-9.358-2.58C6.39 23.97 4 23.98 3 24V6.03c0-.804-.697-1.456-1.5-1.456S0 5.226 0 6.03v19.45c0 .402.12.787.414 1.062.294.276.67.415 1.07.39.4-.027 4.225-.053 4.977-.053 3.52 0 6.76.99 8.45 2.59.01.01.03.01.04.02.13.11.27.2.42.26.02 0 .03 0 .05.01.16.06.33.09.5.09.17 0 .34-.04.5-.1l.05-.01c.15-.06.29-.16.42-.27.01-.01.03-.01.04-.03 1.7-1.6 4.94-2.59 8.46-2.59.75 0 4.59.02 4.99.05.41.03.85-.11 1.15-.39.296-.28.513-.668.513-1.07V6.03c0-.804-.695-1.456-1.5-1.456z"/></symbol><symbol viewBox="0 0 32 32" id="icon-xml"><title>xml</title><path d="M23.12 12.004h-4.228L15.9 16.41l-2.992-4.406H8.68l5.07 7.577-5.72 8.43h8.195v-2.86h-1.892L15.9 22.8l3.48 5.204h4.39l-5.718-8.423 5.068-7.57zm5.013-5.768l-4.465-4.464C22.696.8 20.775.004 19.4.004h-15c-1.375 0-2.5 1.125-2.5 2.5v27c0 1.375 1.125 2.5 2.5 2.5h23c1.375 0 2.5-1.125 2.5-2.5v-19c0-1.375-.795-3.296-1.767-4.268zM26.718 7.65c.098.098.195.218.29.354H21.9V2.896c.136.095.256.192.354.29l4.464 4.464zM27.9 29.504c0 .27-.23.5-.5.5h-23c-.27 0-.5-.23-.5-.5v-27c0-.27.23-.5.5-.5h15c.15 0 .32.02.5.053v7.947h7.947c.034.18.053.35.053.5v19z"/></symbol></svg>
|
|
@@ -64,20 +64,16 @@ name: Introduction
|
|
|
64
64
|
</thead>
|
|
65
65
|
<tbody>
|
|
66
66
|
<tr>
|
|
67
|
-
<td>Safari, Chrome</td>
|
|
67
|
+
<td>Safari, Chrome, Opera</td>
|
|
68
68
|
<td>Last 5 versions</td>
|
|
69
69
|
</tr>
|
|
70
70
|
<tr>
|
|
71
71
|
<td>Firefox</td>
|
|
72
72
|
<td>ESR</td>
|
|
73
73
|
</tr>
|
|
74
|
-
<tr>
|
|
75
|
-
<td>Opera</td>
|
|
76
|
-
<td>18</td>
|
|
77
|
-
</tr>
|
|
78
74
|
<tr>
|
|
79
75
|
<td>Internet Explorer</td>
|
|
80
|
-
<td>
|
|
76
|
+
<td>10</td>
|
|
81
77
|
</tr>
|
|
82
78
|
<tr>
|
|
83
79
|
<td>Global usage</td>
|
data/tasks/publish.rake
CHANGED
|
@@ -7,9 +7,11 @@ require 'fileutils'
|
|
|
7
7
|
|
|
8
8
|
namespace :ustyle do
|
|
9
9
|
desc "Publishes uStyle v#{Ustyle::VERSION}"
|
|
10
|
-
task :
|
|
11
|
-
|
|
12
|
-
|
|
10
|
+
task :upgrade => [ "git:add", "git:push" ] do
|
|
11
|
+
puts green("Committing new version of uStyle - v#{Ustyle::VERSION}")
|
|
12
|
+
end
|
|
13
|
+
|
|
14
|
+
task :publish => [ "deploy:images", "deploy:stylesheets" ] do
|
|
13
15
|
puts green("Publishing uStyle v#{Ustyle::VERSION}")
|
|
14
16
|
end
|
|
15
17
|
end
|
|
@@ -21,7 +23,7 @@ namespace :git do
|
|
|
21
23
|
|
|
22
24
|
desc "Push version #{Ustyle::VERSION} to github"
|
|
23
25
|
task :push do
|
|
24
|
-
`git push && git push -f --tags`
|
|
26
|
+
`git push -u -f && git push -f --tags`
|
|
25
27
|
end
|
|
26
28
|
end
|
|
27
29
|
|