├── .stylelintrc ├── .gitignore ├── .editorconfig ├── package.json ├── LICENSE.MD ├── README.MD ├── _avalanche.scss └── avalanche.min.css /.stylelintrc: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "stylelint-config-standard" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | *.css 3 | !avalanche.min.css 4 | *.map 5 | .sass-cache 6 | node_modules/ 7 | bower_components/ 8 | package-lock.json 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_size = 2 7 | indent_style = space 8 | end_of_line = lf 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "avalanche-css", 3 | "version": "1.3.1", 4 | "description": "Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system", 5 | "main": "_avalanche.scss", 6 | "repository": { 7 | "type": "git", 8 | "url": "https://github.com/colourgarden/avalanche.git" 9 | }, 10 | "author": "Tom Hare ", 11 | "license": "MIT", 12 | "bugs": { 13 | "url": "https://github.com/colourgarden/avalanche/issues" 14 | }, 15 | "homepage": "https://github.com/colourgarden/avalanche", 16 | "keywords": [ 17 | "css", 18 | "grid", 19 | "oocss" 20 | ] 21 | } 22 | -------------------------------------------------------------------------------- /LICENSE.MD: -------------------------------------------------------------------------------- 1 | Copyright (c) 2015 Tom Hare 2 | 3 | 4 | Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: 5 | 6 | The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. 7 | 8 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.MD: -------------------------------------------------------------------------------- 1 | > :mega: Avalanche 2 coming soon with Custom Properties. 2 | 3 | # Avalanche CSS grid system 4 | 5 | **Superclean, powerful, responsive, Sass-based, BEM-syntax CSS grid system** 6 | 7 | ## Why use Avalanche? 8 | 9 | - No bloat. Only create the selectors you'll actually use 10 | - No duplication. 1/2 == 2/4 so why create two selectors? 11 | - No floats. No clears. No .last 12 | - Flexible, configurable naming conventions 13 | - Nesting to infinity and beyond 14 | - Real-world breakpoint naming. 'thumb', 'handheld' and 'desk'; not 'xs', 'md' and 'xl' 15 | - Integrated media query mixin. Connect your media queries to your grid breakpoints 16 | 17 | ## Demo 18 | 19 | View the demo to see Avalanche in action! 20 | 21 | ## Installation 22 | 23 | 1. Import `_avalanche.scss` to your project via npm or manual copy 24 | 2. Override settings to fit your requirements or simply use the minimal defaults 25 | 3. Compile! 26 | 27 | ### NPM 28 | 29 | `npm install --save avalanche-css` 30 | 31 | ## Usage 32 | 33 | Example of a two column, responsive, centered grid. All grid layout classes and responsive width classes are modifiers. 34 | 35 | ``` 36 |
37 |
38 |
39 |
40 | ``` 41 | 42 | ## Settings 43 | 44 | **`$av-namespace`** 45 | Global prefix for layout and cell class names. Default: `grid`. 46 | 47 | **`$av-element-name`** 48 | Element (in a BEM context) or grid cell name. Default: `cell`. 49 | 50 | **`$av-element-class-chain`** 51 | Chain characters/separator between BEM block and element. Default: `__`. 52 | 53 | **`$av-modifier-class-chain`** 54 | Chain characters/separator between BEM block and modifier. Default: `--`. 55 | 56 | **`$av-breakpoint-class-chain`** 57 | Chain characters/separator between width class and breakpoint. Default: `--`. 58 | 59 | **`$av-gutter`** 60 | Gutter width between cells. Default: `20px`. 61 | 62 | **`$av-width-class-namespace`** 63 | Prefix for width class names. Default: `''`. 64 | 65 | **`$av-width-class-style`** 66 | Naming style of width classes. Default: `'fraction'`. Options: `fraction` (1/2, 3/4 etc), `percentage` (25, 50 etc), `fragment` (1-of-3, 4-of-5 etc). 67 | *N.B. If using percentage then `$av-width-class-namespace` above cannot be null. Avalanche escapes leading integers for fraction and fragment naming styles but this isn't possible with percentage style as Sass attempts to escape the whole number (e.g. 50 instead of just 5 or 30 instead of just 3) so fails*. 68 | 69 | **`$av-widths`** 70 | Sass list of width denominator values (when expressed as a fraction). For example, 2 produces 1/2 width class, 3 produces 1/3 and 2/3 width classes etc. Default: `( 2, 3, 4 )`. 71 | *N.B. This setting has a large impact on the size of your compiled CSS. Avoid bloat by inputting just the numbers you'll use.* 72 | 73 | **`$av-enable-responsive`** 74 | Enable/disable the inclusion of responsive width classes. With this enabled, class names (for denominators set above) will be created for each of your breakpoint aliases (set below). Default: `true`. 75 | 76 | **`$av-breakpoints`** 77 | Sass map of responsive breakpoint aliases and associated media queries (in key-value pairs). 78 | *N.B. This setting has a large impact on the size of your compiled CSS. Avoid bloat by inputting just the breakpoints you'll use.* 79 | Default: 80 | ``` 81 | ( 82 | "thumb": "screen and (max-width: 499px)", 83 | "handheld": "screen and (min-width: 500px) and (max-width: 800px)", 84 | "handheld-and-up": "screen and (min-width: 500px)", 85 | "pocket": "screen and (max-width: 800px)", 86 | "lap": "screen and (min-width: 801px) and (max-width: 1024px)", 87 | "lap-and-up": "screen and (min-width: 801px)", 88 | "portable": "screen and (max-width: 1024px)", 89 | "desk": "screen and (min-width: 1025px)", 90 | "widescreen": "screen and (min-width: 1160px)", 91 | "retina": "screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)" 92 | ) 93 | ``` 94 | 95 | ## Grid layouts 96 | 97 | Apply as modifier classes to your base `grid` element. For example; `
`. 98 | 99 | All optionable grid layouts listed below are switched off by default. Set to `true` to enable. 100 | 101 | **`$av-enable-grid-center`** 102 | All cells are horizontally centered within the container. 103 | 104 | **`$av-enable-grid-cell-center`** 105 | Center an individual grid cell within the container. 106 | *N.B. Class should be applied to an individual cell, not the grid container. For example; `
`.* 107 | 108 | **`$av-enable-grid-right`** 109 | All cells are horizontally aligned to the right within the container. 110 | 111 | **`$av-enable-grid-middle`** 112 | All cells are vertically centered within in the container. 113 | 114 | **`$av-enable-grid-bottom`** 115 | All cells are vertically aligned to the bottom of the container. 116 | 117 | **`$av-enable-grid-flush`** 118 | Gutters removed between cells. 119 | 120 | **`$av-enable-grid-tiny`** 121 | Gutters between cells set to a quarter of the global gutter value. Default: `5px`. 122 | 123 | **`$av-enable-grid-small`** 124 | Gutters between cells set to half of the global gutter value. Default: `10px`. 125 | 126 | **`$av-enable-grid-large`** 127 | Gutters between cells set to double the global gutter value. Default: `40px`. 128 | 129 | **`$av-enable-grid-huge`** 130 | Gutters between cells set to quadruple the global gutter value. Default: `80px`. 131 | 132 | **`$av-enable-grid-auto`** 133 | All cells take up an unspecified width set by their content. 134 | 135 | **`$av-enable-grid-rev`** 136 | Grid cells are displayed in the opposite of their source order. 137 | 138 | ## Media query 139 | 140 | Avalanche includes a media query mixin that makes use of the breakpoint aliases you set. This enables better coupling between your grid and other responsive content items. Usage as follows. 141 | 142 | ``` 143 | @include av-mq(pocket){ 144 | .content-item{ 145 | /* responsive CSS */ 146 | } 147 | } 148 | ``` 149 | 150 | ## Browser support 151 | 152 | All modern browsers are supported and Internet Explorer from IE9 upwards. If IE8 support is required then all that is needed is a pixel-value to be set for `font-size` on `.grid__cell`. This is due to IE8 not supporting rem units. Use of a 'rem-to-px' check during build is recommended. 153 | 154 | ## Contributing 155 | 156 | When issuing a pull request to improve this project, please: 157 | 158 | 1. Rigourously comment your code, particularly where new concepts are introduced 159 | 2. Ensure your work passes the stylelint linter ([sample gulpfile](https://gist.github.com/colourgarden/e9f82816db3f971f9da73053b0eb83af)) 160 | 3. Be as descriptive as possible in your commit message 161 | 162 | ## Questions 163 | 164 | If you have any questions or need some help then feel free to tweet me at [@colourgarden](http://twitter.com/colourgarden) or [open an issue](https://github.com/colourgarden/avalanche/issues/new). 165 | -------------------------------------------------------------------------------- /_avalanche.scss: -------------------------------------------------------------------------------- 1 | /*! Avalanche | MIT License | @colourgarden */ 2 | 3 | /** 4 | * SETTINGS 5 | */ 6 | $av-namespace: 'grid' !default; // Prefix namespace for grid layout and cells 7 | $av-element-name: 'cell' !default; // Element/cell name 8 | $av-element-class-chain: '__' !default; // Chain characters between block and element 9 | $av-modifier-class-chain: '--' !default; // Chain characters between block and modifier 10 | $av-breakpoint-class-chain: '--' !default; // Chain characters between width and breakpoint 11 | 12 | $av-gutter: 20px !default; // Gutter between grid cells 13 | 14 | $av-width-class-namespace: '' !default; // Prefix namespace for width classes. For example; 'col-' 15 | $av-width-class-style: 'fraction' !default; // Width class naming style. Can be 'fraction', 'percentage' or 'fragment' 16 | $av-widths: ( 17 | 2, 18 | 3, 19 | 4 20 | ) !default; // Width denominator values. 2 = 1/2, 3 = 1/3 etc. Add/remove as appropriate 21 | 22 | $av-enable-responsive: true !default; 23 | $av-breakpoints: ( 24 | "thumb": "screen and (max-width: 499px)", 25 | "handheld": "screen and (min-width: 500px) and (max-width: 800px)", 26 | "handheld-and-up": "screen and (min-width: 500px)", 27 | "pocket": "screen and (max-width: 800px)", 28 | "lap": "screen and (min-width: 801px) and (max-width: 1024px)", 29 | "lap-and-up": "screen and (min-width: 801px)", 30 | "portable": "screen and (max-width: 1024px)", 31 | "desk": "screen and (min-width: 1025px)", 32 | "widescreen": "screen and (min-width: 1160px)", 33 | "retina": "screen and (-webkit-min-device-pixel-ratio: 2), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx)" 34 | ) !default; // Responsive breakpoints. Add/remove as appropriate 35 | 36 | // Enable/disable grid layouts 37 | $av-enable-grid-center: false !default; 38 | $av-enable-grid-cell-center: false !default; 39 | $av-enable-grid-right: false !default; 40 | $av-enable-grid-middle: false !default; 41 | $av-enable-grid-bottom: false !default; 42 | $av-enable-grid-flush: false !default; 43 | $av-enable-grid-tiny: false !default; 44 | $av-enable-grid-small: false !default; 45 | $av-enable-grid-large: false !default; 46 | $av-enable-grid-huge: false !default; 47 | $av-enable-grid-auto: false !default; 48 | $av-enable-grid-rev: false !default; 49 | 50 | /** 51 | * LOGIC aka THE MAGIC 52 | */ 53 | @function av-create-width-class-name($style, $numerator, $denominator, $breakpoint-alias) { 54 | 55 | $class-name: null; 56 | 57 | @if $style == 'fraction' or $style == 'fragment' { 58 | // Set delimiter as slash or text 59 | $delimiter: if($style == 'fraction', \/, -of-); 60 | $class-name: #{$av-width-class-namespace}#{$numerator}#{$delimiter}#{$denominator}#{$breakpoint-alias}; 61 | } 62 | 63 | @else { 64 | @if $av-width-class-namespace == '' { 65 | @error "Percentage value class names require a namespace to be set (see $av-width-class-namespace). Selective escaping (e.g. the 5 of 50) cannot be done."; 66 | } 67 | $class-width: floor(($numerator / $denominator) * 100); 68 | $class-name: #{$av-width-class-namespace}#{$class-width}#{$breakpoint-alias}; 69 | } 70 | 71 | @return $class-name; 72 | } 73 | 74 | @function avCreateBlockClassName($modifier: '') { 75 | @if $modifier == '' { 76 | @return #{$av-namespace}; 77 | } 78 | 79 | @return #{$av-namespace}#{$av-modifier-class-chain}#{$modifier}; 80 | } 81 | 82 | @function avCreateElementClassName($modifier: '') { 83 | @if $modifier == '' { 84 | @return #{$av-namespace}#{$av-element-class-chain}#{$av-element-name}; 85 | } 86 | 87 | @return #{$av-namespace}#{$av-element-class-chain}#{$av-element-name}#{$av-modifier-class-chain}#{$modifier}; 88 | } 89 | 90 | @mixin av-create-widths($widths, $breakpoint-alias: null) { 91 | 92 | // Initialise an empty utility map that will eventually contain all our classes 93 | $pseudo-class-map: (); 94 | 95 | // Loop widths 96 | @each $denominator in $widths { 97 | 98 | // If 1=1, 2=2, 3=3; @for will skip over so create 1/1 class manually 99 | @if ($denominator == 1) { 100 | 101 | // Create 1/1 class 102 | $class-name: av-create-width-class-name($av-width-class-style, 1, 1, $breakpoint-alias); 103 | 104 | [class~="#{$class-name}"] { 105 | width: 100%; 106 | } 107 | } 108 | 109 | @else { 110 | 111 | // Loop widths as fractions 112 | @for $numerator from 1 to $denominator { 113 | 114 | // Create class name and set width value 115 | $class-name: av-create-width-class-name($av-width-class-style, $numerator, $denominator, $breakpoint-alias); 116 | $width-value: percentage($numerator / $denominator); 117 | 118 | // Is this width already in our utility map? 119 | $duplicate: map-get($pseudo-class-map, $width-value); 120 | 121 | // Create width class 122 | [class~="#{$class-name}"] { 123 | 124 | // If this width is in utility map, @extend the duplicate, else create a new one 125 | @if $duplicate { 126 | @extend [class~="#{$duplicate}"]; 127 | } 128 | 129 | @else { 130 | width: $width-value; 131 | } 132 | } 133 | 134 | // Add this class to utility map 135 | $add-class: ($width-value: $class-name); 136 | $pseudo-class-map: map-merge($pseudo-class-map, $add-class); 137 | } 138 | } 139 | } 140 | } 141 | 142 | @mixin av-mq($alias) { 143 | 144 | // Search breakpoint map for alias 145 | $query: map-get($av-breakpoints, $alias); 146 | 147 | // If alias exists, print out media query 148 | @if $query { 149 | @media #{$query} { 150 | @content; 151 | } 152 | } 153 | 154 | @else { 155 | @error "No breakpoint found for #{$alias}"; 156 | } 157 | } 158 | 159 | /** 160 | * GRID LAYOUT 161 | */ 162 | .#{avCreateBlockClassName()} { 163 | display: block; 164 | list-style: none; 165 | padding: 0; 166 | margin: 0; 167 | margin-left: -($av-gutter); 168 | font-size: 0; 169 | } 170 | 171 | .#{avCreateElementClassName()} { 172 | box-sizing: border-box; 173 | display: inline-block; 174 | width: 100%; 175 | padding: 0; 176 | padding-left: $av-gutter; 177 | margin: 0; 178 | vertical-align: top; 179 | font-size: 1rem; 180 | } 181 | 182 | @if $av-enable-grid-center { 183 | .#{avCreateBlockClassName('center')} { 184 | text-align: center; 185 | 186 | > .#{avCreateElementClassName()} { 187 | text-align: left; 188 | } 189 | } 190 | } 191 | 192 | @if $av-enable-grid-cell-center { 193 | .#{avCreateElementClassName('center')} { 194 | display: block; 195 | margin: 0 auto; 196 | } 197 | } 198 | 199 | @if $av-enable-grid-right { 200 | .#{avCreateBlockClassName('right')} { 201 | text-align: right; 202 | 203 | > .#{avCreateElementClassName()} { 204 | text-align: left; 205 | } 206 | } 207 | } 208 | 209 | @if $av-enable-grid-middle { 210 | .#{avCreateBlockClassName('middle')} { 211 | > .#{avCreateElementClassName()} { 212 | vertical-align: middle; 213 | } 214 | } 215 | } 216 | 217 | @if $av-enable-grid-bottom { 218 | .#{avCreateBlockClassName('bottom')} { 219 | > .#{avCreateElementClassName()} { 220 | vertical-align: bottom; 221 | } 222 | } 223 | } 224 | 225 | @if $av-enable-grid-flush { 226 | .#{avCreateBlockClassName('flush')} { 227 | margin-left: 0; 228 | 229 | > .#{avCreateElementClassName()} { 230 | padding-left: 0; 231 | } 232 | } 233 | } 234 | 235 | @if $av-enable-grid-tiny { 236 | .#{avCreateBlockClassName('tiny')} { 237 | margin-left: -($av-gutter / 4); 238 | 239 | > .#{avCreateElementClassName()} { 240 | padding-left: ($av-gutter / 4); 241 | } 242 | } 243 | } 244 | 245 | @if $av-enable-grid-small { 246 | .#{avCreateBlockClassName('small')} { 247 | margin-left: -($av-gutter / 2); 248 | 249 | > .#{avCreateElementClassName()} { 250 | padding-left: ($av-gutter / 2); 251 | } 252 | } 253 | } 254 | 255 | @if $av-enable-grid-large { 256 | .#{avCreateBlockClassName('large')} { 257 | margin-left: -($av-gutter * 2); 258 | 259 | > .#{avCreateElementClassName()} { 260 | padding-left: ($av-gutter * 2); 261 | } 262 | } 263 | } 264 | 265 | @if $av-enable-grid-huge { 266 | .#{avCreateBlockClassName('huge')} { 267 | margin-left: -($av-gutter * 4); 268 | 269 | > .#{avCreateElementClassName()} { 270 | padding-left: ($av-gutter * 4); 271 | } 272 | } 273 | } 274 | 275 | @if $av-enable-grid-auto { 276 | .#{avCreateBlockClassName('auto')} { 277 | > .#{avCreateElementClassName()} { 278 | width: auto; 279 | } 280 | } 281 | } 282 | 283 | @if $av-enable-grid-rev { 284 | .#{avCreateBlockClassName('rev')} { 285 | direction: rtl; 286 | 287 | > .#{avCreateElementClassName()} { 288 | direction: ltr; 289 | } 290 | } 291 | } 292 | 293 | /** 294 | * GRID WIDTHS 295 | */ 296 | 297 | // Loop default widths 298 | @include av-create-widths($av-widths); 299 | 300 | // If responsive flag enabled, loop breakpoint widths 301 | @if $av-enable-responsive { 302 | @each $alias, $query in $av-breakpoints { 303 | 304 | // Create each media query 305 | @media #{$query} { 306 | @include av-create-widths($av-widths, #{$av-breakpoint-class-chain}#{$alias}); 307 | } 308 | } 309 | } 310 | -------------------------------------------------------------------------------- /avalanche.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | Avalanche | MIT License | @colourgarden 3 | Quickstart, kitchen sink CSS file. Includes 12-column grid widths and all layout options. 4 | Version: 1.3.1 5 | */ 6 | .grid{display:block;list-style:none;padding:0;margin:0;margin-left:-20px;font-size:0}.grid__cell{box-sizing:border-box;display:inline-block;width:100%;padding:0;padding-left:20px;margin:0;vertical-align:top;font-size:1rem}.grid--center{text-align:center}.grid--center>.grid__cell{text-align:left}.grid__cell--center{display:block;margin:0 auto}.grid--right{text-align:right}.grid--right>.grid__cell{text-align:left}.grid--middle>.grid__cell{vertical-align:middle}.grid--bottom>.grid__cell{vertical-align:bottom}.grid--flush{margin-left:0}.grid--flush>.grid__cell{padding-left:0}.grid--tiny{margin-left:-5px}.grid--tiny>.grid__cell{padding-left:5px}.grid--small{margin-left:-10px}.grid--small>.grid__cell{padding-left:10px}.grid--large{margin-left:-40px}.grid--large>.grid__cell{padding-left:40px}.grid--huge{margin-left:-80px}.grid--huge>.grid__cell{padding-left:80px}.grid--auto>.grid__cell{width:auto}.grid--rev{direction:rtl}.grid--rev>.grid__cell{direction:ltr}[class~="1/1"]{width:100%}[class~="1/2"],[class~="2/4"],[class~="3/6"],[class~="4/8"],[class~="5/10"],[class~="6/12"]{width:50%}[class~="1/3"],[class~="2/6"],[class~="3/9"],[class~="4/12"]{width:33.3333333333%}[class~="2/3"],[class~="4/6"],[class~="6/9"],[class~="8/12"]{width:66.6666666667%}[class~="1/4"],[class~="2/8"],[class~="3/12"]{width:25%}[class~="3/4"],[class~="6/8"],[class~="9/12"]{width:75%}[class~="1/5"],[class~="2/10"]{width:20%}[class~="2/5"],[class~="4/10"]{width:40%}[class~="3/5"],[class~="6/10"]{width:60%}[class~="4/5"],[class~="8/10"]{width:80%}[class~="1/6"],[class~="2/12"]{width:16.6666666667%}[class~="5/6"],[class~="10/12"]{width:83.3333333333%}[class~="1/7"]{width:14.2857142857%}[class~="2/7"]{width:28.5714285714%}[class~="3/7"]{width:42.8571428571%}[class~="4/7"]{width:57.1428571429%}[class~="5/7"]{width:71.4285714286%}[class~="6/7"]{width:85.7142857143%}[class~="1/8"]{width:12.5%}[class~="3/8"]{width:37.5%}[class~="5/8"]{width:62.5%}[class~="7/8"]{width:87.5%}[class~="1/9"]{width:11.1111111111%}[class~="2/9"]{width:22.2222222222%}[class~="4/9"]{width:44.4444444444%}[class~="5/9"]{width:55.5555555556%}[class~="7/9"]{width:77.7777777778%}[class~="8/9"]{width:88.8888888889%}[class~="1/10"]{width:10%}[class~="3/10"]{width:30%}[class~="7/10"]{width:70%}[class~="9/10"]{width:90%}[class~="1/11"]{width:9.0909090909%}[class~="2/11"]{width:18.1818181818%}[class~="3/11"]{width:27.2727272727%}[class~="4/11"]{width:36.3636363636%}[class~="5/11"]{width:45.4545454545%}[class~="6/11"]{width:54.5454545455%}[class~="7/11"]{width:63.6363636364%}[class~="8/11"]{width:72.7272727273%}[class~="9/11"]{width:81.8181818182%}[class~="10/11"]{width:90.9090909091%}[class~="1/12"]{width:8.3333333333%}[class~="5/12"]{width:41.6666666667%}[class~="7/12"]{width:58.3333333333%}[class~="11/12"]{width:91.6666666667%}@media screen and (max-width: 499px){[class~="1/1--thumb"]{width:100%}[class~="1/2--thumb"],[class~="2/4--thumb"],[class~="3/6--thumb"],[class~="4/8--thumb"],[class~="5/10--thumb"],[class~="6/12--thumb"]{width:50%}[class~="1/3--thumb"],[class~="2/6--thumb"],[class~="3/9--thumb"],[class~="4/12--thumb"]{width:33.3333333333%}[class~="2/3--thumb"],[class~="4/6--thumb"],[class~="6/9--thumb"],[class~="8/12--thumb"]{width:66.6666666667%}[class~="1/4--thumb"],[class~="2/8--thumb"],[class~="3/12--thumb"]{width:25%}[class~="3/4--thumb"],[class~="6/8--thumb"],[class~="9/12--thumb"]{width:75%}[class~="1/5--thumb"],[class~="2/10--thumb"]{width:20%}[class~="2/5--thumb"],[class~="4/10--thumb"]{width:40%}[class~="3/5--thumb"],[class~="6/10--thumb"]{width:60%}[class~="4/5--thumb"],[class~="8/10--thumb"]{width:80%}[class~="1/6--thumb"],[class~="2/12--thumb"]{width:16.6666666667%}[class~="5/6--thumb"],[class~="10/12--thumb"]{width:83.3333333333%}[class~="1/7--thumb"]{width:14.2857142857%}[class~="2/7--thumb"]{width:28.5714285714%}[class~="3/7--thumb"]{width:42.8571428571%}[class~="4/7--thumb"]{width:57.1428571429%}[class~="5/7--thumb"]{width:71.4285714286%}[class~="6/7--thumb"]{width:85.7142857143%}[class~="1/8--thumb"]{width:12.5%}[class~="3/8--thumb"]{width:37.5%}[class~="5/8--thumb"]{width:62.5%}[class~="7/8--thumb"]{width:87.5%}[class~="1/9--thumb"]{width:11.1111111111%}[class~="2/9--thumb"]{width:22.2222222222%}[class~="4/9--thumb"]{width:44.4444444444%}[class~="5/9--thumb"]{width:55.5555555556%}[class~="7/9--thumb"]{width:77.7777777778%}[class~="8/9--thumb"]{width:88.8888888889%}[class~="1/10--thumb"]{width:10%}[class~="3/10--thumb"]{width:30%}[class~="7/10--thumb"]{width:70%}[class~="9/10--thumb"]{width:90%}[class~="1/11--thumb"]{width:9.0909090909%}[class~="2/11--thumb"]{width:18.1818181818%}[class~="3/11--thumb"]{width:27.2727272727%}[class~="4/11--thumb"]{width:36.3636363636%}[class~="5/11--thumb"]{width:45.4545454545%}[class~="6/11--thumb"]{width:54.5454545455%}[class~="7/11--thumb"]{width:63.6363636364%}[class~="8/11--thumb"]{width:72.7272727273%}[class~="9/11--thumb"]{width:81.8181818182%}[class~="10/11--thumb"]{width:90.9090909091%}[class~="1/12--thumb"]{width:8.3333333333%}[class~="5/12--thumb"]{width:41.6666666667%}[class~="7/12--thumb"]{width:58.3333333333%}[class~="11/12--thumb"]{width:91.6666666667%}}@media screen and (min-width: 500px)and (max-width: 800px){[class~="1/1--handheld"]{width:100%}[class~="1/2--handheld"],[class~="2/4--handheld"],[class~="3/6--handheld"],[class~="4/8--handheld"],[class~="5/10--handheld"],[class~="6/12--handheld"]{width:50%}[class~="1/3--handheld"],[class~="2/6--handheld"],[class~="3/9--handheld"],[class~="4/12--handheld"]{width:33.3333333333%}[class~="2/3--handheld"],[class~="4/6--handheld"],[class~="6/9--handheld"],[class~="8/12--handheld"]{width:66.6666666667%}[class~="1/4--handheld"],[class~="2/8--handheld"],[class~="3/12--handheld"]{width:25%}[class~="3/4--handheld"],[class~="6/8--handheld"],[class~="9/12--handheld"]{width:75%}[class~="1/5--handheld"],[class~="2/10--handheld"]{width:20%}[class~="2/5--handheld"],[class~="4/10--handheld"]{width:40%}[class~="3/5--handheld"],[class~="6/10--handheld"]{width:60%}[class~="4/5--handheld"],[class~="8/10--handheld"]{width:80%}[class~="1/6--handheld"],[class~="2/12--handheld"]{width:16.6666666667%}[class~="5/6--handheld"],[class~="10/12--handheld"]{width:83.3333333333%}[class~="1/7--handheld"]{width:14.2857142857%}[class~="2/7--handheld"]{width:28.5714285714%}[class~="3/7--handheld"]{width:42.8571428571%}[class~="4/7--handheld"]{width:57.1428571429%}[class~="5/7--handheld"]{width:71.4285714286%}[class~="6/7--handheld"]{width:85.7142857143%}[class~="1/8--handheld"]{width:12.5%}[class~="3/8--handheld"]{width:37.5%}[class~="5/8--handheld"]{width:62.5%}[class~="7/8--handheld"]{width:87.5%}[class~="1/9--handheld"]{width:11.1111111111%}[class~="2/9--handheld"]{width:22.2222222222%}[class~="4/9--handheld"]{width:44.4444444444%}[class~="5/9--handheld"]{width:55.5555555556%}[class~="7/9--handheld"]{width:77.7777777778%}[class~="8/9--handheld"]{width:88.8888888889%}[class~="1/10--handheld"]{width:10%}[class~="3/10--handheld"]{width:30%}[class~="7/10--handheld"]{width:70%}[class~="9/10--handheld"]{width:90%}[class~="1/11--handheld"]{width:9.0909090909%}[class~="2/11--handheld"]{width:18.1818181818%}[class~="3/11--handheld"]{width:27.2727272727%}[class~="4/11--handheld"]{width:36.3636363636%}[class~="5/11--handheld"]{width:45.4545454545%}[class~="6/11--handheld"]{width:54.5454545455%}[class~="7/11--handheld"]{width:63.6363636364%}[class~="8/11--handheld"]{width:72.7272727273%}[class~="9/11--handheld"]{width:81.8181818182%}[class~="10/11--handheld"]{width:90.9090909091%}[class~="1/12--handheld"]{width:8.3333333333%}[class~="5/12--handheld"]{width:41.6666666667%}[class~="7/12--handheld"]{width:58.3333333333%}[class~="11/12--handheld"]{width:91.6666666667%}}@media screen and (min-width: 500px){[class~="1/1--handheld-and-up"]{width:100%}[class~="1/2--handheld-and-up"],[class~="2/4--handheld-and-up"],[class~="3/6--handheld-and-up"],[class~="4/8--handheld-and-up"],[class~="5/10--handheld-and-up"],[class~="6/12--handheld-and-up"]{width:50%}[class~="1/3--handheld-and-up"],[class~="2/6--handheld-and-up"],[class~="3/9--handheld-and-up"],[class~="4/12--handheld-and-up"]{width:33.3333333333%}[class~="2/3--handheld-and-up"],[class~="4/6--handheld-and-up"],[class~="6/9--handheld-and-up"],[class~="8/12--handheld-and-up"]{width:66.6666666667%}[class~="1/4--handheld-and-up"],[class~="2/8--handheld-and-up"],[class~="3/12--handheld-and-up"]{width:25%}[class~="3/4--handheld-and-up"],[class~="6/8--handheld-and-up"],[class~="9/12--handheld-and-up"]{width:75%}[class~="1/5--handheld-and-up"],[class~="2/10--handheld-and-up"]{width:20%}[class~="2/5--handheld-and-up"],[class~="4/10--handheld-and-up"]{width:40%}[class~="3/5--handheld-and-up"],[class~="6/10--handheld-and-up"]{width:60%}[class~="4/5--handheld-and-up"],[class~="8/10--handheld-and-up"]{width:80%}[class~="1/6--handheld-and-up"],[class~="2/12--handheld-and-up"]{width:16.6666666667%}[class~="5/6--handheld-and-up"],[class~="10/12--handheld-and-up"]{width:83.3333333333%}[class~="1/7--handheld-and-up"]{width:14.2857142857%}[class~="2/7--handheld-and-up"]{width:28.5714285714%}[class~="3/7--handheld-and-up"]{width:42.8571428571%}[class~="4/7--handheld-and-up"]{width:57.1428571429%}[class~="5/7--handheld-and-up"]{width:71.4285714286%}[class~="6/7--handheld-and-up"]{width:85.7142857143%}[class~="1/8--handheld-and-up"]{width:12.5%}[class~="3/8--handheld-and-up"]{width:37.5%}[class~="5/8--handheld-and-up"]{width:62.5%}[class~="7/8--handheld-and-up"]{width:87.5%}[class~="1/9--handheld-and-up"]{width:11.1111111111%}[class~="2/9--handheld-and-up"]{width:22.2222222222%}[class~="4/9--handheld-and-up"]{width:44.4444444444%}[class~="5/9--handheld-and-up"]{width:55.5555555556%}[class~="7/9--handheld-and-up"]{width:77.7777777778%}[class~="8/9--handheld-and-up"]{width:88.8888888889%}[class~="1/10--handheld-and-up"]{width:10%}[class~="3/10--handheld-and-up"]{width:30%}[class~="7/10--handheld-and-up"]{width:70%}[class~="9/10--handheld-and-up"]{width:90%}[class~="1/11--handheld-and-up"]{width:9.0909090909%}[class~="2/11--handheld-and-up"]{width:18.1818181818%}[class~="3/11--handheld-and-up"]{width:27.2727272727%}[class~="4/11--handheld-and-up"]{width:36.3636363636%}[class~="5/11--handheld-and-up"]{width:45.4545454545%}[class~="6/11--handheld-and-up"]{width:54.5454545455%}[class~="7/11--handheld-and-up"]{width:63.6363636364%}[class~="8/11--handheld-and-up"]{width:72.7272727273%}[class~="9/11--handheld-and-up"]{width:81.8181818182%}[class~="10/11--handheld-and-up"]{width:90.9090909091%}[class~="1/12--handheld-and-up"]{width:8.3333333333%}[class~="5/12--handheld-and-up"]{width:41.6666666667%}[class~="7/12--handheld-and-up"]{width:58.3333333333%}[class~="11/12--handheld-and-up"]{width:91.6666666667%}}@media screen and (max-width: 800px){[class~="1/1--pocket"]{width:100%}[class~="1/2--pocket"],[class~="2/4--pocket"],[class~="3/6--pocket"],[class~="4/8--pocket"],[class~="5/10--pocket"],[class~="6/12--pocket"]{width:50%}[class~="1/3--pocket"],[class~="2/6--pocket"],[class~="3/9--pocket"],[class~="4/12--pocket"]{width:33.3333333333%}[class~="2/3--pocket"],[class~="4/6--pocket"],[class~="6/9--pocket"],[class~="8/12--pocket"]{width:66.6666666667%}[class~="1/4--pocket"],[class~="2/8--pocket"],[class~="3/12--pocket"]{width:25%}[class~="3/4--pocket"],[class~="6/8--pocket"],[class~="9/12--pocket"]{width:75%}[class~="1/5--pocket"],[class~="2/10--pocket"]{width:20%}[class~="2/5--pocket"],[class~="4/10--pocket"]{width:40%}[class~="3/5--pocket"],[class~="6/10--pocket"]{width:60%}[class~="4/5--pocket"],[class~="8/10--pocket"]{width:80%}[class~="1/6--pocket"],[class~="2/12--pocket"]{width:16.6666666667%}[class~="5/6--pocket"],[class~="10/12--pocket"]{width:83.3333333333%}[class~="1/7--pocket"]{width:14.2857142857%}[class~="2/7--pocket"]{width:28.5714285714%}[class~="3/7--pocket"]{width:42.8571428571%}[class~="4/7--pocket"]{width:57.1428571429%}[class~="5/7--pocket"]{width:71.4285714286%}[class~="6/7--pocket"]{width:85.7142857143%}[class~="1/8--pocket"]{width:12.5%}[class~="3/8--pocket"]{width:37.5%}[class~="5/8--pocket"]{width:62.5%}[class~="7/8--pocket"]{width:87.5%}[class~="1/9--pocket"]{width:11.1111111111%}[class~="2/9--pocket"]{width:22.2222222222%}[class~="4/9--pocket"]{width:44.4444444444%}[class~="5/9--pocket"]{width:55.5555555556%}[class~="7/9--pocket"]{width:77.7777777778%}[class~="8/9--pocket"]{width:88.8888888889%}[class~="1/10--pocket"]{width:10%}[class~="3/10--pocket"]{width:30%}[class~="7/10--pocket"]{width:70%}[class~="9/10--pocket"]{width:90%}[class~="1/11--pocket"]{width:9.0909090909%}[class~="2/11--pocket"]{width:18.1818181818%}[class~="3/11--pocket"]{width:27.2727272727%}[class~="4/11--pocket"]{width:36.3636363636%}[class~="5/11--pocket"]{width:45.4545454545%}[class~="6/11--pocket"]{width:54.5454545455%}[class~="7/11--pocket"]{width:63.6363636364%}[class~="8/11--pocket"]{width:72.7272727273%}[class~="9/11--pocket"]{width:81.8181818182%}[class~="10/11--pocket"]{width:90.9090909091%}[class~="1/12--pocket"]{width:8.3333333333%}[class~="5/12--pocket"]{width:41.6666666667%}[class~="7/12--pocket"]{width:58.3333333333%}[class~="11/12--pocket"]{width:91.6666666667%}}@media screen and (min-width: 801px)and (max-width: 1024px){[class~="1/1--lap"]{width:100%}[class~="1/2--lap"],[class~="2/4--lap"],[class~="3/6--lap"],[class~="4/8--lap"],[class~="5/10--lap"],[class~="6/12--lap"]{width:50%}[class~="1/3--lap"],[class~="2/6--lap"],[class~="3/9--lap"],[class~="4/12--lap"]{width:33.3333333333%}[class~="2/3--lap"],[class~="4/6--lap"],[class~="6/9--lap"],[class~="8/12--lap"]{width:66.6666666667%}[class~="1/4--lap"],[class~="2/8--lap"],[class~="3/12--lap"]{width:25%}[class~="3/4--lap"],[class~="6/8--lap"],[class~="9/12--lap"]{width:75%}[class~="1/5--lap"],[class~="2/10--lap"]{width:20%}[class~="2/5--lap"],[class~="4/10--lap"]{width:40%}[class~="3/5--lap"],[class~="6/10--lap"]{width:60%}[class~="4/5--lap"],[class~="8/10--lap"]{width:80%}[class~="1/6--lap"],[class~="2/12--lap"]{width:16.6666666667%}[class~="5/6--lap"],[class~="10/12--lap"]{width:83.3333333333%}[class~="1/7--lap"]{width:14.2857142857%}[class~="2/7--lap"]{width:28.5714285714%}[class~="3/7--lap"]{width:42.8571428571%}[class~="4/7--lap"]{width:57.1428571429%}[class~="5/7--lap"]{width:71.4285714286%}[class~="6/7--lap"]{width:85.7142857143%}[class~="1/8--lap"]{width:12.5%}[class~="3/8--lap"]{width:37.5%}[class~="5/8--lap"]{width:62.5%}[class~="7/8--lap"]{width:87.5%}[class~="1/9--lap"]{width:11.1111111111%}[class~="2/9--lap"]{width:22.2222222222%}[class~="4/9--lap"]{width:44.4444444444%}[class~="5/9--lap"]{width:55.5555555556%}[class~="7/9--lap"]{width:77.7777777778%}[class~="8/9--lap"]{width:88.8888888889%}[class~="1/10--lap"]{width:10%}[class~="3/10--lap"]{width:30%}[class~="7/10--lap"]{width:70%}[class~="9/10--lap"]{width:90%}[class~="1/11--lap"]{width:9.0909090909%}[class~="2/11--lap"]{width:18.1818181818%}[class~="3/11--lap"]{width:27.2727272727%}[class~="4/11--lap"]{width:36.3636363636%}[class~="5/11--lap"]{width:45.4545454545%}[class~="6/11--lap"]{width:54.5454545455%}[class~="7/11--lap"]{width:63.6363636364%}[class~="8/11--lap"]{width:72.7272727273%}[class~="9/11--lap"]{width:81.8181818182%}[class~="10/11--lap"]{width:90.9090909091%}[class~="1/12--lap"]{width:8.3333333333%}[class~="5/12--lap"]{width:41.6666666667%}[class~="7/12--lap"]{width:58.3333333333%}[class~="11/12--lap"]{width:91.6666666667%}}@media screen and (min-width: 801px){[class~="1/1--lap-and-up"]{width:100%}[class~="1/2--lap-and-up"],[class~="2/4--lap-and-up"],[class~="3/6--lap-and-up"],[class~="4/8--lap-and-up"],[class~="5/10--lap-and-up"],[class~="6/12--lap-and-up"]{width:50%}[class~="1/3--lap-and-up"],[class~="2/6--lap-and-up"],[class~="3/9--lap-and-up"],[class~="4/12--lap-and-up"]{width:33.3333333333%}[class~="2/3--lap-and-up"],[class~="4/6--lap-and-up"],[class~="6/9--lap-and-up"],[class~="8/12--lap-and-up"]{width:66.6666666667%}[class~="1/4--lap-and-up"],[class~="2/8--lap-and-up"],[class~="3/12--lap-and-up"]{width:25%}[class~="3/4--lap-and-up"],[class~="6/8--lap-and-up"],[class~="9/12--lap-and-up"]{width:75%}[class~="1/5--lap-and-up"],[class~="2/10--lap-and-up"]{width:20%}[class~="2/5--lap-and-up"],[class~="4/10--lap-and-up"]{width:40%}[class~="3/5--lap-and-up"],[class~="6/10--lap-and-up"]{width:60%}[class~="4/5--lap-and-up"],[class~="8/10--lap-and-up"]{width:80%}[class~="1/6--lap-and-up"],[class~="2/12--lap-and-up"]{width:16.6666666667%}[class~="5/6--lap-and-up"],[class~="10/12--lap-and-up"]{width:83.3333333333%}[class~="1/7--lap-and-up"]{width:14.2857142857%}[class~="2/7--lap-and-up"]{width:28.5714285714%}[class~="3/7--lap-and-up"]{width:42.8571428571%}[class~="4/7--lap-and-up"]{width:57.1428571429%}[class~="5/7--lap-and-up"]{width:71.4285714286%}[class~="6/7--lap-and-up"]{width:85.7142857143%}[class~="1/8--lap-and-up"]{width:12.5%}[class~="3/8--lap-and-up"]{width:37.5%}[class~="5/8--lap-and-up"]{width:62.5%}[class~="7/8--lap-and-up"]{width:87.5%}[class~="1/9--lap-and-up"]{width:11.1111111111%}[class~="2/9--lap-and-up"]{width:22.2222222222%}[class~="4/9--lap-and-up"]{width:44.4444444444%}[class~="5/9--lap-and-up"]{width:55.5555555556%}[class~="7/9--lap-and-up"]{width:77.7777777778%}[class~="8/9--lap-and-up"]{width:88.8888888889%}[class~="1/10--lap-and-up"]{width:10%}[class~="3/10--lap-and-up"]{width:30%}[class~="7/10--lap-and-up"]{width:70%}[class~="9/10--lap-and-up"]{width:90%}[class~="1/11--lap-and-up"]{width:9.0909090909%}[class~="2/11--lap-and-up"]{width:18.1818181818%}[class~="3/11--lap-and-up"]{width:27.2727272727%}[class~="4/11--lap-and-up"]{width:36.3636363636%}[class~="5/11--lap-and-up"]{width:45.4545454545%}[class~="6/11--lap-and-up"]{width:54.5454545455%}[class~="7/11--lap-and-up"]{width:63.6363636364%}[class~="8/11--lap-and-up"]{width:72.7272727273%}[class~="9/11--lap-and-up"]{width:81.8181818182%}[class~="10/11--lap-and-up"]{width:90.9090909091%}[class~="1/12--lap-and-up"]{width:8.3333333333%}[class~="5/12--lap-and-up"]{width:41.6666666667%}[class~="7/12--lap-and-up"]{width:58.3333333333%}[class~="11/12--lap-and-up"]{width:91.6666666667%}}@media screen and (max-width: 1024px){[class~="1/1--portable"]{width:100%}[class~="1/2--portable"],[class~="2/4--portable"],[class~="3/6--portable"],[class~="4/8--portable"],[class~="5/10--portable"],[class~="6/12--portable"]{width:50%}[class~="1/3--portable"],[class~="2/6--portable"],[class~="3/9--portable"],[class~="4/12--portable"]{width:33.3333333333%}[class~="2/3--portable"],[class~="4/6--portable"],[class~="6/9--portable"],[class~="8/12--portable"]{width:66.6666666667%}[class~="1/4--portable"],[class~="2/8--portable"],[class~="3/12--portable"]{width:25%}[class~="3/4--portable"],[class~="6/8--portable"],[class~="9/12--portable"]{width:75%}[class~="1/5--portable"],[class~="2/10--portable"]{width:20%}[class~="2/5--portable"],[class~="4/10--portable"]{width:40%}[class~="3/5--portable"],[class~="6/10--portable"]{width:60%}[class~="4/5--portable"],[class~="8/10--portable"]{width:80%}[class~="1/6--portable"],[class~="2/12--portable"]{width:16.6666666667%}[class~="5/6--portable"],[class~="10/12--portable"]{width:83.3333333333%}[class~="1/7--portable"]{width:14.2857142857%}[class~="2/7--portable"]{width:28.5714285714%}[class~="3/7--portable"]{width:42.8571428571%}[class~="4/7--portable"]{width:57.1428571429%}[class~="5/7--portable"]{width:71.4285714286%}[class~="6/7--portable"]{width:85.7142857143%}[class~="1/8--portable"]{width:12.5%}[class~="3/8--portable"]{width:37.5%}[class~="5/8--portable"]{width:62.5%}[class~="7/8--portable"]{width:87.5%}[class~="1/9--portable"]{width:11.1111111111%}[class~="2/9--portable"]{width:22.2222222222%}[class~="4/9--portable"]{width:44.4444444444%}[class~="5/9--portable"]{width:55.5555555556%}[class~="7/9--portable"]{width:77.7777777778%}[class~="8/9--portable"]{width:88.8888888889%}[class~="1/10--portable"]{width:10%}[class~="3/10--portable"]{width:30%}[class~="7/10--portable"]{width:70%}[class~="9/10--portable"]{width:90%}[class~="1/11--portable"]{width:9.0909090909%}[class~="2/11--portable"]{width:18.1818181818%}[class~="3/11--portable"]{width:27.2727272727%}[class~="4/11--portable"]{width:36.3636363636%}[class~="5/11--portable"]{width:45.4545454545%}[class~="6/11--portable"]{width:54.5454545455%}[class~="7/11--portable"]{width:63.6363636364%}[class~="8/11--portable"]{width:72.7272727273%}[class~="9/11--portable"]{width:81.8181818182%}[class~="10/11--portable"]{width:90.9090909091%}[class~="1/12--portable"]{width:8.3333333333%}[class~="5/12--portable"]{width:41.6666666667%}[class~="7/12--portable"]{width:58.3333333333%}[class~="11/12--portable"]{width:91.6666666667%}}@media screen and (min-width: 1025px){[class~="1/1--desk"]{width:100%}[class~="1/2--desk"],[class~="2/4--desk"],[class~="3/6--desk"],[class~="4/8--desk"],[class~="5/10--desk"],[class~="6/12--desk"]{width:50%}[class~="1/3--desk"],[class~="2/6--desk"],[class~="3/9--desk"],[class~="4/12--desk"]{width:33.3333333333%}[class~="2/3--desk"],[class~="4/6--desk"],[class~="6/9--desk"],[class~="8/12--desk"]{width:66.6666666667%}[class~="1/4--desk"],[class~="2/8--desk"],[class~="3/12--desk"]{width:25%}[class~="3/4--desk"],[class~="6/8--desk"],[class~="9/12--desk"]{width:75%}[class~="1/5--desk"],[class~="2/10--desk"]{width:20%}[class~="2/5--desk"],[class~="4/10--desk"]{width:40%}[class~="3/5--desk"],[class~="6/10--desk"]{width:60%}[class~="4/5--desk"],[class~="8/10--desk"]{width:80%}[class~="1/6--desk"],[class~="2/12--desk"]{width:16.6666666667%}[class~="5/6--desk"],[class~="10/12--desk"]{width:83.3333333333%}[class~="1/7--desk"]{width:14.2857142857%}[class~="2/7--desk"]{width:28.5714285714%}[class~="3/7--desk"]{width:42.8571428571%}[class~="4/7--desk"]{width:57.1428571429%}[class~="5/7--desk"]{width:71.4285714286%}[class~="6/7--desk"]{width:85.7142857143%}[class~="1/8--desk"]{width:12.5%}[class~="3/8--desk"]{width:37.5%}[class~="5/8--desk"]{width:62.5%}[class~="7/8--desk"]{width:87.5%}[class~="1/9--desk"]{width:11.1111111111%}[class~="2/9--desk"]{width:22.2222222222%}[class~="4/9--desk"]{width:44.4444444444%}[class~="5/9--desk"]{width:55.5555555556%}[class~="7/9--desk"]{width:77.7777777778%}[class~="8/9--desk"]{width:88.8888888889%}[class~="1/10--desk"]{width:10%}[class~="3/10--desk"]{width:30%}[class~="7/10--desk"]{width:70%}[class~="9/10--desk"]{width:90%}[class~="1/11--desk"]{width:9.0909090909%}[class~="2/11--desk"]{width:18.1818181818%}[class~="3/11--desk"]{width:27.2727272727%}[class~="4/11--desk"]{width:36.3636363636%}[class~="5/11--desk"]{width:45.4545454545%}[class~="6/11--desk"]{width:54.5454545455%}[class~="7/11--desk"]{width:63.6363636364%}[class~="8/11--desk"]{width:72.7272727273%}[class~="9/11--desk"]{width:81.8181818182%}[class~="10/11--desk"]{width:90.9090909091%}[class~="1/12--desk"]{width:8.3333333333%}[class~="5/12--desk"]{width:41.6666666667%}[class~="7/12--desk"]{width:58.3333333333%}[class~="11/12--desk"]{width:91.6666666667%}}@media screen and (min-width: 1160px){[class~="1/1--widescreen"]{width:100%}[class~="1/2--widescreen"],[class~="2/4--widescreen"],[class~="3/6--widescreen"],[class~="4/8--widescreen"],[class~="5/10--widescreen"],[class~="6/12--widescreen"]{width:50%}[class~="1/3--widescreen"],[class~="2/6--widescreen"],[class~="3/9--widescreen"],[class~="4/12--widescreen"]{width:33.3333333333%}[class~="2/3--widescreen"],[class~="4/6--widescreen"],[class~="6/9--widescreen"],[class~="8/12--widescreen"]{width:66.6666666667%}[class~="1/4--widescreen"],[class~="2/8--widescreen"],[class~="3/12--widescreen"]{width:25%}[class~="3/4--widescreen"],[class~="6/8--widescreen"],[class~="9/12--widescreen"]{width:75%}[class~="1/5--widescreen"],[class~="2/10--widescreen"]{width:20%}[class~="2/5--widescreen"],[class~="4/10--widescreen"]{width:40%}[class~="3/5--widescreen"],[class~="6/10--widescreen"]{width:60%}[class~="4/5--widescreen"],[class~="8/10--widescreen"]{width:80%}[class~="1/6--widescreen"],[class~="2/12--widescreen"]{width:16.6666666667%}[class~="5/6--widescreen"],[class~="10/12--widescreen"]{width:83.3333333333%}[class~="1/7--widescreen"]{width:14.2857142857%}[class~="2/7--widescreen"]{width:28.5714285714%}[class~="3/7--widescreen"]{width:42.8571428571%}[class~="4/7--widescreen"]{width:57.1428571429%}[class~="5/7--widescreen"]{width:71.4285714286%}[class~="6/7--widescreen"]{width:85.7142857143%}[class~="1/8--widescreen"]{width:12.5%}[class~="3/8--widescreen"]{width:37.5%}[class~="5/8--widescreen"]{width:62.5%}[class~="7/8--widescreen"]{width:87.5%}[class~="1/9--widescreen"]{width:11.1111111111%}[class~="2/9--widescreen"]{width:22.2222222222%}[class~="4/9--widescreen"]{width:44.4444444444%}[class~="5/9--widescreen"]{width:55.5555555556%}[class~="7/9--widescreen"]{width:77.7777777778%}[class~="8/9--widescreen"]{width:88.8888888889%}[class~="1/10--widescreen"]{width:10%}[class~="3/10--widescreen"]{width:30%}[class~="7/10--widescreen"]{width:70%}[class~="9/10--widescreen"]{width:90%}[class~="1/11--widescreen"]{width:9.0909090909%}[class~="2/11--widescreen"]{width:18.1818181818%}[class~="3/11--widescreen"]{width:27.2727272727%}[class~="4/11--widescreen"]{width:36.3636363636%}[class~="5/11--widescreen"]{width:45.4545454545%}[class~="6/11--widescreen"]{width:54.5454545455%}[class~="7/11--widescreen"]{width:63.6363636364%}[class~="8/11--widescreen"]{width:72.7272727273%}[class~="9/11--widescreen"]{width:81.8181818182%}[class~="10/11--widescreen"]{width:90.9090909091%}[class~="1/12--widescreen"]{width:8.3333333333%}[class~="5/12--widescreen"]{width:41.6666666667%}[class~="7/12--widescreen"]{width:58.3333333333%}[class~="11/12--widescreen"]{width:91.6666666667%}}@media screen and (-webkit-min-device-pixel-ratio: 2),screen and (min-resolution: 192dpi),screen and (min-resolution: 2dppx){[class~="1/1--retina"]{width:100%}[class~="1/2--retina"],[class~="2/4--retina"],[class~="3/6--retina"],[class~="4/8--retina"],[class~="5/10--retina"],[class~="6/12--retina"]{width:50%}[class~="1/3--retina"],[class~="2/6--retina"],[class~="3/9--retina"],[class~="4/12--retina"]{width:33.3333333333%}[class~="2/3--retina"],[class~="4/6--retina"],[class~="6/9--retina"],[class~="8/12--retina"]{width:66.6666666667%}[class~="1/4--retina"],[class~="2/8--retina"],[class~="3/12--retina"]{width:25%}[class~="3/4--retina"],[class~="6/8--retina"],[class~="9/12--retina"]{width:75%}[class~="1/5--retina"],[class~="2/10--retina"]{width:20%}[class~="2/5--retina"],[class~="4/10--retina"]{width:40%}[class~="3/5--retina"],[class~="6/10--retina"]{width:60%}[class~="4/5--retina"],[class~="8/10--retina"]{width:80%}[class~="1/6--retina"],[class~="2/12--retina"]{width:16.6666666667%}[class~="5/6--retina"],[class~="10/12--retina"]{width:83.3333333333%}[class~="1/7--retina"]{width:14.2857142857%}[class~="2/7--retina"]{width:28.5714285714%}[class~="3/7--retina"]{width:42.8571428571%}[class~="4/7--retina"]{width:57.1428571429%}[class~="5/7--retina"]{width:71.4285714286%}[class~="6/7--retina"]{width:85.7142857143%}[class~="1/8--retina"]{width:12.5%}[class~="3/8--retina"]{width:37.5%}[class~="5/8--retina"]{width:62.5%}[class~="7/8--retina"]{width:87.5%}[class~="1/9--retina"]{width:11.1111111111%}[class~="2/9--retina"]{width:22.2222222222%}[class~="4/9--retina"]{width:44.4444444444%}[class~="5/9--retina"]{width:55.5555555556%}[class~="7/9--retina"]{width:77.7777777778%}[class~="8/9--retina"]{width:88.8888888889%}[class~="1/10--retina"]{width:10%}[class~="3/10--retina"]{width:30%}[class~="7/10--retina"]{width:70%}[class~="9/10--retina"]{width:90%}[class~="1/11--retina"]{width:9.0909090909%}[class~="2/11--retina"]{width:18.1818181818%}[class~="3/11--retina"]{width:27.2727272727%}[class~="4/11--retina"]{width:36.3636363636%}[class~="5/11--retina"]{width:45.4545454545%}[class~="6/11--retina"]{width:54.5454545455%}[class~="7/11--retina"]{width:63.6363636364%}[class~="8/11--retina"]{width:72.7272727273%}[class~="9/11--retina"]{width:81.8181818182%}[class~="10/11--retina"]{width:90.9090909091%}[class~="1/12--retina"]{width:8.3333333333%}[class~="5/12--retina"]{width:41.6666666667%}[class~="7/12--retina"]{width:58.3333333333%}[class~="11/12--retina"]{width:91.6666666667%}} 7 | --------------------------------------------------------------------------------