diff --git a/changelog.md b/changelog.md
index f657007..6493672 100644
--- a/changelog.md
+++ b/changelog.md
@@ -1,5 +1,7 @@
# changelog v7.0.0beta (1er août 2017)
- architecture globale revisitée (vendor, config, library, components)
+- refonte complète du système de grille (dorénavant basé sur Grid Layout)
+- création d'un mixin de grille
- normalize.css v7.0.0
- refonte complète des boutons, avec possibilités de variantes (primary, success, warning, etc.)
- ajout des badges (tags), avec possibilités de variantes (primary, success, warning, etc.)
diff --git a/css/grillade.css b/css/grillade.css
index 424ca27..3406faf 100644
--- a/css/grillade.css
+++ b/css/grillade.css
@@ -1 +1 @@
-@media (min-width:576px){[class*=" grid-"],[class^=grid-]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}[class*=" grid-"]>*,[class^=grid-]>*{box-sizing:border-box;min-width:0;min-height:0}.grid,.grid--reverse{display:-webkit-box;display:-ms-flexbox;display:flex}.grid--reverse>*,.grid>*{-webkit-box-flex:1;-ms-flex:1 1 0%;flex:1 1 0%;box-sizing:border-box;min-width:0;min-height:0}.grid--reverse.has-gutter>*+*,.grid.has-gutter>*+*{margin-left:calc(1rem - .01px)}.grid--reverse.has-gutter-l>*+*,.grid.has-gutter-l>*+*{margin-left:calc(2rem - .01px)}.grid--reverse.has-gutter-xl>*+*,.grid.has-gutter-xl>*+*{margin-left:calc(4rem - .01px)}[class*=grid-2]>*{width:calc(100% / 2 - .01px)}[class*=grid-2].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-2].has-gutter>*{width:calc(100% / 2 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-2].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-2].has-gutter-l>*{width:calc(100% / 2 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-2].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-2].has-gutter-xl>*{width:calc(100% / 2 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-3]>*{width:calc(100% / 3 - .01px)}[class*=grid-3].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-3].has-gutter>*{width:calc(100% / 3 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-3].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-3].has-gutter-l>*{width:calc(100% / 3 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-3].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-3].has-gutter-xl>*{width:calc(100% / 3 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-4]>*{width:calc(100% / 4 - .01px)}[class*=grid-4].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-4].has-gutter>*{width:calc(100% / 4 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-4].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-4].has-gutter-l>*{width:calc(100% / 4 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-4].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-4].has-gutter-xl>*{width:calc(100% / 4 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-5]>*{width:calc(100% / 5 - .01px)}[class*=grid-5].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-5].has-gutter>*{width:calc(100% / 5 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-5].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-5].has-gutter-l>*{width:calc(100% / 5 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-5].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-5].has-gutter-xl>*{width:calc(100% / 5 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-6]>*{width:calc(100% / 6 - .01px)}[class*=grid-6].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-6].has-gutter>*{width:calc(100% / 6 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-6].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-6].has-gutter-l>*{width:calc(100% / 6 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-6].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-6].has-gutter-xl>*{width:calc(100% / 6 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-7]>*{width:calc(100% / 7 - .01px)}[class*=grid-7].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-7].has-gutter>*{width:calc(100% / 7 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-7].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-7].has-gutter-l>*{width:calc(100% / 7 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-7].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-7].has-gutter-xl>*{width:calc(100% / 7 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-8]>*{width:calc(100% / 8 - .01px)}[class*=grid-8].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-8].has-gutter>*{width:calc(100% / 8 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-8].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-8].has-gutter-l>*{width:calc(100% / 8 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-8].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-8].has-gutter-xl>*{width:calc(100% / 8 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-9]>*{width:calc(100% / 9 - .01px)}[class*=grid-9].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-9].has-gutter>*{width:calc(100% / 9 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-9].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-9].has-gutter-l>*{width:calc(100% / 9 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-9].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-9].has-gutter-xl>*{width:calc(100% / 9 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-10]>*{width:calc(100% / 10 - .01px)}[class*=grid-10].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-10].has-gutter>*{width:calc(100% / 10 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-10].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-10].has-gutter-l>*{width:calc(100% / 10 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-10].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-10].has-gutter-xl>*{width:calc(100% / 10 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-11]>*{width:calc(100% / 11 - .01px)}[class*=grid-11].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-11].has-gutter>*{width:calc(100% / 11 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-11].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-11].has-gutter-l>*{width:calc(100% / 11 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-11].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-11].has-gutter-xl>*{width:calc(100% / 11 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-12]>*{width:calc(100% / 12 - .01px)}[class*=grid-12].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-12].has-gutter>*{width:calc(100% / 12 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-12].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-12].has-gutter-l>*{width:calc(100% / 12 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-12].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-12].has-gutter-xl>*{width:calc(100% / 12 - 4rem - .01px);margin-right:2rem;margin-left:2rem}}.push{margin-left:auto!important}.pull{margin-right:auto!important}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}[class*=grid-][class*="--reverse"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}@media (min-width:576px){.full,.one-half{-webkit-box-flex:0}.full{-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 1 - .01px)}.has-gutter>.full{width:calc(100% / 1 - 1rem - .01px)}.has-gutter-l>.full{width:calc(100% / 1 - 2rem - .01px)}.has-gutter-xl>.full{width:calc(100% / 1 - 4rem - .01px)}.one-half{-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 2 - .01px)}.has-gutter>.one-half{width:calc(100% / 2 - 1rem - .01px)}.has-gutter-l>.one-half{width:calc(100% / 2 - 2rem - .01px)}.has-gutter-xl>.one-half{width:calc(100% / 2 - 4rem - .01px)}.one-third{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 3 - .01px)}.has-gutter>.one-third{width:calc(100% / 3 - 1rem - .01px)}.has-gutter-l>.one-third{width:calc(100% / 3 - 2rem - .01px)}.has-gutter-xl>.one-third{width:calc(100% / 3 - 4rem - .01px)}.one-quarter{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 4 - .01px)}.has-gutter>.one-quarter{width:calc(100% / 4 - 1rem - .01px)}.has-gutter-l>.one-quarter{width:calc(100% / 4 - 2rem - .01px)}.has-gutter-xl>.one-quarter{width:calc(100% / 4 - 4rem - .01px)}.one-fifth{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 5 - .01px)}.has-gutter>.one-fifth{width:calc(100% / 5 - 1rem - .01px)}.has-gutter-l>.one-fifth{width:calc(100% / 5 - 2rem - .01px)}.has-gutter-xl>.one-fifth{width:calc(100% / 5 - 4rem - .01px)}.one-sixth{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 6 - .01px)}.has-gutter>.one-sixth{width:calc(100% / 6 - 1rem - .01px)}.has-gutter-l>.one-sixth{width:calc(100% / 6 - 2rem - .01px)}.has-gutter-xl>.one-sixth{width:calc(100% / 6 - 4rem - .01px)}.two-thirds{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 3 * 2 - .01px)}.has-gutter>.two-thirds{width:calc(100% / 3 * 2 - 1rem - .01px)}.has-gutter-l>.two-thirds{width:calc(100% / 3 * 2 - 2rem - .01px)}.has-gutter-xl>.two-thirds{width:calc(100% / 3 * 2 - 4rem - .01px)}.three-quarters{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 4 * 3 - .01px)}.has-gutter>.three-quarters{width:calc(100% / 4 * 3 - 1rem - .01px)}.has-gutter-l>.three-quarters{width:calc(100% / 4 * 3 - 2rem - .01px)}.has-gutter-xl>.three-quarters{width:calc(100% / 4 * 3 - 4rem - .01px)}.five-sixths{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 6 * 5 - .01px)}.has-gutter>.five-sixths{width:calc(100% / 6 * 5 - 1rem - .01px)}.has-gutter-l>.five-sixths{width:calc(100% / 6 * 5 - 2rem - .01px)}.has-gutter-xl>.five-sixths{width:calc(100% / 6 * 5 - 4rem - .01px)}}@media (min-width:576px) and (max-width:767px){[class*="-small-1"]>*{width:calc(100% / 1 - .01px)}[class*="-small-1"].has-gutter>*{width:calc(100% / 1 - 1rem - .01px)}[class*="-small-1"].has-gutter-l>*{width:calc(100% / 1 - 2rem - .01px)}[class*="-small-1"].has-gutter-xl>*{width:calc(100% / 1 - 4rem - .01px)}[class*="-small-2"]>*{width:calc(100% / 2 - .01px)}[class*="-small-2"].has-gutter>*{width:calc(100% / 2 - 1rem - .01px)}[class*="-small-2"].has-gutter-l>*{width:calc(100% / 2 - 2rem - .01px)}[class*="-small-2"].has-gutter-xl>*{width:calc(100% / 2 - 4rem - .01px)}[class*="-small-3"]>*{width:calc(100% / 3 - .01px)}[class*="-small-3"].has-gutter>*{width:calc(100% / 3 - 1rem - .01px)}[class*="-small-3"].has-gutter-l>*{width:calc(100% / 3 - 2rem - .01px)}[class*="-small-3"].has-gutter-xl>*{width:calc(100% / 3 - 4rem - .01px)}[class*="-small-4"]>*{width:calc(100% / 4 - .01px)}[class*="-small-4"].has-gutter>*{width:calc(100% / 4 - 1rem - .01px)}[class*="-small-4"].has-gutter-l>*{width:calc(100% / 4 - 2rem - .01px)}[class*="-small-4"].has-gutter-xl>*{width:calc(100% / 4 - 4rem - .01px)}}
\ No newline at end of file
+@media (min-width:480px){[class*=" grid-"],[class^=grid-]{display:-ms-grid;display:grid;grid-auto-flow:dense}[class*=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class*=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class*=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}[class*=grid-2]{-ms-grid-columns:(1fr) [2];grid-template-columns:repeat(2,1fr)}[class*=grid-3]{-ms-grid-columns:(1fr) [3];grid-template-columns:repeat(3,1fr)}[class*=grid-4]{-ms-grid-columns:(1fr) [4];grid-template-columns:repeat(4,1fr)}[class*=grid-5]{-ms-grid-columns:(1fr) [5];grid-template-columns:repeat(5,1fr)}[class*=grid-6]{-ms-grid-columns:(1fr) [6];grid-template-columns:repeat(6,1fr)}[class*=grid-7]{-ms-grid-columns:(1fr) [7];grid-template-columns:repeat(7,1fr)}[class*=grid-8]{-ms-grid-columns:(1fr) [8];grid-template-columns:repeat(8,1fr)}[class*=grid-9]{-ms-grid-columns:(1fr) [9];grid-template-columns:repeat(9,1fr)}[class*=grid-10]{-ms-grid-columns:(1fr) [10];grid-template-columns:repeat(10,1fr)}[class*=grid-11]{-ms-grid-columns:(1fr) [11];grid-template-columns:repeat(11,1fr)}[class*=grid-12]{-ms-grid-columns:(1fr) [12];grid-template-columns:repeat(12,1fr)}[class*=col-2]{-ms-grid-column-span:2;-ms-grid-column:auto;grid-column:auto/span 2}[class*=row-2]{-ms-grid-row-span:2;-ms-grid-row:auto;grid-row:auto/span 2}[class*=col-3]{-ms-grid-column-span:3;-ms-grid-column:auto;grid-column:auto/span 3}[class*=row-3]{-ms-grid-row-span:3;-ms-grid-row:auto;grid-row:auto/span 3}[class*=col-4]{-ms-grid-column-span:4;-ms-grid-column:auto;grid-column:auto/span 4}[class*=row-4]{-ms-grid-row-span:4;-ms-grid-row:auto;grid-row:auto/span 4}[class*=col-5]{-ms-grid-column-span:5;-ms-grid-column:auto;grid-column:auto/span 5}[class*=row-5]{-ms-grid-row-span:5;-ms-grid-row:auto;grid-row:auto/span 5}[class*=col-6]{-ms-grid-column-span:6;-ms-grid-column:auto;grid-column:auto/span 6}[class*=row-6]{-ms-grid-row-span:6;-ms-grid-row:auto;grid-row:auto/span 6}[class*=col-7]{-ms-grid-column-span:7;-ms-grid-column:auto;grid-column:auto/span 7}[class*=row-7]{-ms-grid-row-span:7;-ms-grid-row:auto;grid-row:auto/span 7}[class*=col-8]{-ms-grid-column-span:8;-ms-grid-column:auto;grid-column:auto/span 8}[class*=row-8]{-ms-grid-row-span:8;-ms-grid-row:auto;grid-row:auto/span 8}[class*=col-9]{-ms-grid-column-span:9;-ms-grid-column:auto;grid-column:auto/span 9}[class*=row-9]{-ms-grid-row-span:9;-ms-grid-row:auto;grid-row:auto/span 9}[class*=col-10]{-ms-grid-column-span:10;-ms-grid-column:auto;grid-column:auto/span 10}[class*=row-10]{-ms-grid-row-span:10;-ms-grid-row:auto;grid-row:auto/span 10}[class*=col-11]{-ms-grid-column-span:11;-ms-grid-column:auto;grid-column:auto/span 11}[class*=row-11]{-ms-grid-row-span:11;-ms-grid-row:auto;grid-row:auto/span 11}[class*=col-12]{-ms-grid-column-span:12;-ms-grid-column:auto;grid-column:auto/span 12}[class*=row-12]{-ms-grid-row-span:12;-ms-grid-row:auto;grid-row:auto/span 12}@media (min-width:480px) and (max-width:576px -1){[class*=grid-][class*="-small-1"]{-ms-grid-columns:(1fr) [1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*="-small-1"]{-ms-grid-column-span:1;-ms-grid-column:auto;grid-column:auto/span 1}[class*=grid-][class*="-small-2"]{-ms-grid-columns:(1fr) [2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*="-small-2"]{-ms-grid-column-span:2;-ms-grid-column:auto;grid-column:auto/span 2}[class*=grid-][class*="-small-3"]{-ms-grid-columns:(1fr) [3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*="-small-3"]{-ms-grid-column-span:3;-ms-grid-column:auto;grid-column:auto/span 3}[class*=grid-][class*="-small-4"]{-ms-grid-columns:(1fr) [4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*="-small-4"]{-ms-grid-column-span:4;-ms-grid-column:auto;grid-column:auto/span 4}}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}
\ No newline at end of file
diff --git a/css/grillade.scss b/css/grillade.scss
index 6095d8b..14f23f0 100644
--- a/css/grillade.scss
+++ b/css/grillade.scss
@@ -1,7 +1,7 @@
// Responsive breakpoints variables
// Warning : you should use your own values, regardless of the devices
-// Best practise : (max-width: ($BP - 1)) and (min-width: $BP)
+// Best practise is Mobile First: (max-width: ($BP - 1)) and (min-width: $BP)
$tiny: 480px !default; // or 'em' if you prefer, of course
$small: 576px !default;
@@ -9,96 +9,70 @@ $medium: 768px !default;
$large: 992px !default;
$extra-large: 1200px !default;
-/* ---------------------------------- */
-/* ==Grillade : Simple Grid System */
-/* ---------------------------------- */
-/* Doc : http://grillade.knacss.com */
-// gutter values for grid layouts. Unit can be: %, px, em, rem
-$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
-// IEfixing, see
-// https://github.com/alsacreations/KNACSS/issues/133;
-$iefix: 0.01px;
-@media (min-width: $small) {
- [class*=" grid-"],
- [class^="grid-"] {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
+/* --------------------------------------- */
+/* ==Grillade : ultra light Grid System */
+/* --------------------------------------- */
+/* Doc : @TODO */
+// WARNING: THIS IS NOT A COMPLETE GRID FRAMEWORK, just ultra light Grid System
+// if you need complex Grid :
+// 1- use vanilla CSS Grid Layout spec (perfect for you)
+// 2- use Bootstrap (good luck)
- & > * {
- box-sizing: border-box;
- min-width: 0;
- min-height: 0;
- }
- }
-}
-// Multi-line grid constructor
-// example : .grid-perso { @include grid(12, 3rem); }
-@mixin grid($grid-number: 1, $own-gutter: 0) {
- & > * {
- width: calc(100% / #{$grid-number} - #{$iefix});
- }
- @each $affix, $size in $grid-gutters {
- &.has-gutter#{$affix} {
- margin-right: -$size / 2;
- margin-left: -$size / 2;
+[class*=" grid-"],
+[class^="grid-"] {
+ @media (min-width: $tiny) {
+ display: grid;
+ grid-auto-flow: dense;
- & > * {
- width: calc(100% / #{$grid-number} - #{$size} - #{$iefix});
- margin-right: $size / 2;
- margin-left: $size / 2;
- }
+ // gutters
+ @if variable_exists(grid-gutters) {
+ $gutter: $grid-gutters !global;
}
- }
- @if ($own-gutter != 0) {
- margin-right: -$own-gutter / 2;
- margin-left: -$own-gutter / 2;
-
- & > * {
- width: calc(100% / #{$grid-number} - #{$own-gutter} - #{$iefix});
- margin-right: $own-gutter / 2;
- margin-left: $own-gutter / 2;
+ @else {
+ $gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
}
- }
-}
-// Mono-line grid constructor (.grid)
-@media (min-width: $small) {
- .grid,
- .grid--reverse {
- display: flex;
-
- & > * {
- flex: 1 1 0%;
- box-sizing: border-box;
- min-width: 0;
- min-height: 0;
- }
- @each $affix, $size in $grid-gutters {
- &.has-gutter#{$affix} > * + * {
- margin-left: calc(#{$size} - #{$iefix});
+ @each $affix, $size in $gutter {
+ &.has-gutter#{$affix} {
+ grid-gap: $size;
}
}
}
}
-// Constructing grids : will be compiled in CSS
-@media (min-width: $small) {
- @for $i from 2 through 12 {
- [class*="grid-#{$i}"] {
- @include grid(#{$i}, 0);
+
+// grid constructor (.grid-2 to .grid-12)
+@for $i from 2 through 12 {
+ [class*="grid-#{$i}"] {
+ grid-template-columns: repeat(#{$i}, 1fr);
+ }
+}
+
+// grid items constructor (.col-2 to .col-12, .row-2 to .row-12)
+@for $i from 2 through 12 {
+ [class*="col-#{$i}"] {
+ grid-column: auto / span #{$i};
+ }
+
+ [class*="row-#{$i}"] {
+ grid-row: auto / span #{$i};
+ }
+}
+
+/* intermediate breakpoint */
+// -small-X suffix means "X columns when < small screen"
+// example : .grid-4-small-2 will be 1 column (< tiny) then 2 columns (< small) then 4 columns
+@media (min-width: $tiny) and (max-width: ($small -1)) {
+ @for $i from 1 through 4{
+ [class*="grid-"][class*="-small-#{$i}"] {
+ grid-template-columns: repeat(#{$i}, 1fr);
+ }
+
+ [class*="col-"][class*="-small-#{$i}"] {
+ grid-column: auto / span #{$i};
}
}
}
-// Grid offsets
-.push {
- margin-left: auto !important;
-}
-
-.pull {
- margin-right: auto !important;
-}
-
-// Grid order
+// grid order
.item-first {
order: -1;
}
@@ -107,37 +81,16 @@ $iefix: 0.01px;
order: 1;
}
-[class*="grid-"][class*="--reverse"] {
- flex-direction: row-reverse;
+// grid offset
+.grid-offset {
+ visibility: hidden;
}
-// sizing individual children
-@media (min-width: $small) {
- @each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5") {
- .#{$flow} {
- flex: 0 0 auto;
- width: calc(100% / #{$divider} - #{$iefix});
- }
- @each $affix, $size in $grid-gutters {
- .has-gutter#{$affix} > .#{$flow} {
- width: calc(100% / #{$divider} - #{$size} - #{$iefix});
- }
- }
- }
+
+// spanning all collumns or rows
+.col-all {
+ grid-column: 1 / -1;
}
-/* Responsive Small Breakpoint */
-// -small-X suffix means "X columns on small-medium screen"
-// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until medium) then 4 columns
-@media (min-width: $small) and (max-width: ($medium - 1)) {
- @for $i from 1 through 4 {
- [class*="-small-#{$i}"] {
- & > * {
- width: calc(100% / #{$i} - #{$iefix});
- }
- @each $affix, $size in $grid-gutters {
- &.has-gutter#{$affix} > * {
- width: calc(100% / #{$i} - #{$size} - #{$iefix});
- }
- }
- }
- }
+
+.row-all {
+ grid-row: 1 / -1;
}
diff --git a/css/knacss-unminified.css b/css/knacss-unminified.css
index f14abcb..5ac8fd3 100644
--- a/css/knacss-unminified.css
+++ b/css/knacss-unminified.css
@@ -1,6 +1,6 @@
@charset "UTF-8";
/*!
-* www.KNACSS.com v7.0.0 (31 juillet 2017) @author: Alsacreations, Raphael Goetter
+* www.KNACSS.com v7.0.0 (??? 2017) @author: Alsacreations, Raphael Goetter
* Licence WTFPL http://www.wtfpl.net/
*/
/* ----------------------------- */
@@ -24,6 +24,7 @@
- Forms (forms consistency)
- Buttons (buttons consistency)
- Checkbox (checkbox styles)
+ - Radio (radio styles)
- Badges (badges consistency)
- Alerts (alerts consistency)
- Grillade (Grid System in Flexbox)
@@ -472,6 +473,8 @@ html {
* {
box-sizing: inherit;
+ /* avoid min-width: auto on flex and grid children */
+ min-width: 0;
}
html {
@@ -829,6 +832,7 @@ kbd {
h6,
.h6-like,
blockquote,
+ label,
ul,
ol {
color: #000;
@@ -919,7 +923,7 @@ kbd {
}
/* ----------------------------- */
-/* ==Global Layout */
+/* ==Global Micro Layout */
/* ----------------------------- */
/* module, gains superpower "BFC" Block Formating Context */
.mod,
@@ -1075,12 +1079,13 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
/* ------------- */
/* invisible for all */
.is-hidden,
+.js-hidden,
[hidden] {
display: none;
}
/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
-.visually-hidden, .button-burger > *, .checkbox {
+.visually-hidden, .button-burger > *, .checkbox, .radio {
position: absolute !important;
border: 0 !important;
height: 1px !important;
@@ -1091,6 +1096,7 @@ http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
}
.is-disabled,
+.js-disabled,
[disabled],
.is-disabled ~ label,
[disabled] ~ label {
@@ -1108,120 +1114,192 @@ ul.is-unstyled, ul.unstyled {
/* Width Helpers */
/* ------------- */
/* blocks widths (percentage and pixels) */
-.w10 {
- width: 10%;
+.w100 {
+ width: 100%;
}
-.w20 {
- width: 20%;
-}
-
-.w25 {
- width: 25%;
-}
-
-.w30 {
- width: 30%;
-}
-
-.w33 {
- width: 33.3333%;
-}
-
-.w40 {
- width: 40%;
-}
-
-.w50 {
- width: 50%;
-}
-
-.w60 {
- width: 60%;
-}
-
-.w66 {
- width: 66.6666%;
-}
-
-.w70 {
- width: 70%;
-}
-
-.w75 {
- width: 75%;
-}
-
-.w80 {
- width: 80%;
+.w95 {
+ width: 95%;
}
.w90 {
width: 90%;
}
-.w100 {
- width: 100%;
+.w85 {
+ width: 85%;
}
-.w50p {
- width: 50px;
+.w80 {
+ width: 80%;
}
-.w100p {
- width: 100px;
+.w75 {
+ width: 75%;
}
-.w150p {
- width: 150px;
+.w70 {
+ width: 70%;
}
-.w200p {
- width: 200px;
+.w65 {
+ width: 65%;
+}
+
+.w60 {
+ width: 60%;
+}
+
+.w55 {
+ width: 55%;
+}
+
+.w50 {
+ width: 50%;
+}
+
+.w45 {
+ width: 45%;
+}
+
+.w40 {
+ width: 40%;
+}
+
+.w35 {
+ width: 35%;
+}
+
+.w30 {
+ width: 30%;
+}
+
+.w25 {
+ width: 25%;
+}
+
+.w20 {
+ width: 20%;
+}
+
+.w15 {
+ width: 15%;
+}
+
+.w10 {
+ width: 10%;
+}
+
+.w5 {
+ width: 5%;
+}
+
+.w66 {
+ width: calc(100% / 3 * 2);
+}
+
+.w33 {
+ width: calc(100% / 3);
+}
+
+.wauto {
+ width: auto;
+}
+
+.w960p {
+ width: 960px;
+}
+
+.mw960p {
+ max-width: 960px;
+}
+
+.w1140p {
+ width: 1140px;
+}
+
+.mw1140p {
+ max-width: 1140px;
+}
+
+.w1000p {
+ width: 1000px;
+}
+
+.w950p {
+ width: 950px;
+}
+
+.w900p {
+ width: 900px;
+}
+
+.w850p {
+ width: 850px;
+}
+
+.w800p {
+ width: 800px;
+}
+
+.w750p {
+ width: 750px;
+}
+
+.w700p {
+ width: 700px;
+}
+
+.w650p {
+ width: 650px;
+}
+
+.w600p {
+ width: 600px;
+}
+
+.w550p {
+ width: 550px;
+}
+
+.w500p {
+ width: 500px;
+}
+
+.w450p {
+ width: 450px;
+}
+
+.w400p {
+ width: 400px;
+}
+
+.w350p {
+ width: 350px;
}
.w300p {
width: 300px;
}
-@media (min-width: 401px) {
- .w400p {
- width: 400px;
- }
- .w500p {
- width: 500px;
- }
- .w600p {
- width: 600px;
- }
+.w250p {
+ width: 250px;
}
-@media (min-width: 701px) {
- .w700p {
- width: 700px;
- }
- .w800p {
- width: 800px;
- }
+.w200p {
+ width: 200px;
}
-@media (min-width: 961px) {
- .w960p {
- width: 960px;
- }
- .mw960p {
- max-width: 960px;
- }
- .w1140p {
- width: 1140px;
- }
- .mw1140p {
- max-width: 1140px;
- }
+.w150p {
+ width: 150px;
}
-.wauto {
- width: auto;
+.w100p {
+ width: 100px;
+}
+
+.w50p {
+ width: 50px;
}
/* Spacing Helpers */
@@ -1705,10 +1783,6 @@ ul.is-unstyled, ul.unstyled {
.o-autogrid.has-gutter-xl {
grid-column-gap: 4rem;
}
- .o-autogrid > * {
- min-width: 0;
- /* avoid min-width: auto on children */
- }
}
/* ----------------------------- */
@@ -2171,6 +2245,41 @@ button:focus {
pointer-events: none;
}
+/* ----------------------------- */
+/* ==Rdio */
+/* ----------------------------- */
+/* use .radio class on input type=radio */
+/* recommanded HTML : */
+.radio ~ label {
+ cursor: pointer;
+}
+
+.radio ~ label:before {
+ content: "";
+ display: inline-block;
+ vertical-align: baseline;
+ -webkit-transform: translateY(0.2rem);
+ transform: translateY(0.2rem);
+ margin-right: .5rem;
+ width: 1.1em;
+ height: 1.1em;
+ border: 0;
+ background: #fff;
+ border-radius: 50%;
+ box-shadow: 0 0 0 2px #777 inset;
+ -webkit-transition: .25s background;
+ transition: .25s background;
+}
+
+.radio:checked ~ label:before {
+ background-image: -webkit-radial-gradient(center circle, #fff 30%, transparent 38%);
+ background-image: radial-gradient(circle at center, #fff 30%, transparent 38%);
+ background-color: #777;
+ background-position: center;
+ background-repeat: no-repeat;
+ pointer-events: none;
+}
+
/* ----------------------------- */
/* ==Badges */
/* ----------------------------- */
@@ -2332,400 +2441,256 @@ button:focus {
display: none;
}
-/* ---------------------------------- */
-/* ==Grillade : Simple Grid System */
-/* ---------------------------------- */
-/* Doc : http://grillade.knacss.com */
-@media (min-width: 576px) {
+/* --------------------------------------- */
+/* ==Grillade : ultra light Grid System */
+/* --------------------------------------- */
+/* Doc : @TODO */
+@media (min-width: 480px) {
[class*=" grid-"],
[class^="grid-"] {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- -webkit-box-orient: horizontal;
- -webkit-box-direction: normal;
- -ms-flex-direction: row;
- flex-direction: row;
- -ms-flex-wrap: wrap;
- flex-wrap: wrap;
+ display: -ms-grid;
+ display: grid;
+ grid-auto-flow: dense;
}
- [class*=" grid-"] > *,
- [class^="grid-"] > * {
- box-sizing: border-box;
- min-width: 0;
- min-height: 0;
+ [class*=" grid-"].has-gutter,
+ [class^="grid-"].has-gutter {
+ grid-gap: 1rem;
+ }
+ [class*=" grid-"].has-gutter-l,
+ [class^="grid-"].has-gutter-l {
+ grid-gap: 2rem;
+ }
+ [class*=" grid-"].has-gutter-xl,
+ [class^="grid-"].has-gutter-xl {
+ grid-gap: 4rem;
}
}
-@media (min-width: 576px) {
- .grid,
- .grid--reverse {
- display: -webkit-box;
- display: -ms-flexbox;
- display: flex;
- }
- .grid > *,
- .grid--reverse > * {
- -webkit-box-flex: 1;
- -ms-flex: 1 1 0%;
- flex: 1 1 0%;
- box-sizing: border-box;
- min-width: 0;
- min-height: 0;
- }
- .grid.has-gutter > * + *,
- .grid--reverse.has-gutter > * + * {
- margin-left: calc(1rem - 0.01px);
- }
- .grid.has-gutter-l > * + *,
- .grid--reverse.has-gutter-l > * + * {
- margin-left: calc(2rem - 0.01px);
- }
- .grid.has-gutter-xl > * + *,
- .grid--reverse.has-gutter-xl > * + * {
- margin-left: calc(4rem - 0.01px);
- }
+[class*="grid-2"] {
+ -ms-grid-columns: (1fr)[2];
+ grid-template-columns: repeat(2, 1fr);
}
-@media (min-width: 576px) {
- [class*="grid-2"] > * {
- width: calc(100% / 2 - 0.01px);
- }
- [class*="grid-2"].has-gutter {
- margin-right: -0.5rem;
- margin-left: -0.5rem;
- }
- [class*="grid-2"].has-gutter > * {
- width: calc(100% / 2 - 1rem - 0.01px);
- margin-right: 0.5rem;
- margin-left: 0.5rem;
- }
- [class*="grid-2"].has-gutter-l {
- margin-right: -1rem;
- margin-left: -1rem;
- }
- [class*="grid-2"].has-gutter-l > * {
- width: calc(100% / 2 - 2rem - 0.01px);
- margin-right: 1rem;
- margin-left: 1rem;
- }
- [class*="grid-2"].has-gutter-xl {
- margin-right: -2rem;
- margin-left: -2rem;
- }
- [class*="grid-2"].has-gutter-xl > * {
- width: calc(100% / 2 - 4rem - 0.01px);
- margin-right: 2rem;
- margin-left: 2rem;
- }
- [class*="grid-3"] > * {
- width: calc(100% / 3 - 0.01px);
- }
- [class*="grid-3"].has-gutter {
- margin-right: -0.5rem;
- margin-left: -0.5rem;
- }
- [class*="grid-3"].has-gutter > * {
- width: calc(100% / 3 - 1rem - 0.01px);
- margin-right: 0.5rem;
- margin-left: 0.5rem;
- }
- [class*="grid-3"].has-gutter-l {
- margin-right: -1rem;
- margin-left: -1rem;
- }
- [class*="grid-3"].has-gutter-l > * {
- width: calc(100% / 3 - 2rem - 0.01px);
- margin-right: 1rem;
- margin-left: 1rem;
- }
- [class*="grid-3"].has-gutter-xl {
- margin-right: -2rem;
- margin-left: -2rem;
- }
- [class*="grid-3"].has-gutter-xl > * {
- width: calc(100% / 3 - 4rem - 0.01px);
- margin-right: 2rem;
- margin-left: 2rem;
- }
- [class*="grid-4"] > * {
- width: calc(100% / 4 - 0.01px);
- }
- [class*="grid-4"].has-gutter {
- margin-right: -0.5rem;
- margin-left: -0.5rem;
- }
- [class*="grid-4"].has-gutter > * {
- width: calc(100% / 4 - 1rem - 0.01px);
- margin-right: 0.5rem;
- margin-left: 0.5rem;
- }
- [class*="grid-4"].has-gutter-l {
- margin-right: -1rem;
- margin-left: -1rem;
- }
- [class*="grid-4"].has-gutter-l > * {
- width: calc(100% / 4 - 2rem - 0.01px);
- margin-right: 1rem;
- margin-left: 1rem;
- }
- [class*="grid-4"].has-gutter-xl {
- margin-right: -2rem;
- margin-left: -2rem;
- }
- [class*="grid-4"].has-gutter-xl > * {
- width: calc(100% / 4 - 4rem - 0.01px);
- margin-right: 2rem;
- margin-left: 2rem;
- }
- [class*="grid-5"] > * {
- width: calc(100% / 5 - 0.01px);
- }
- [class*="grid-5"].has-gutter {
- margin-right: -0.5rem;
- margin-left: -0.5rem;
- }
- [class*="grid-5"].has-gutter > * {
- width: calc(100% / 5 - 1rem - 0.01px);
- margin-right: 0.5rem;
- margin-left: 0.5rem;
- }
- [class*="grid-5"].has-gutter-l {
- margin-right: -1rem;
- margin-left: -1rem;
- }
- [class*="grid-5"].has-gutter-l > * {
- width: calc(100% / 5 - 2rem - 0.01px);
- margin-right: 1rem;
- margin-left: 1rem;
- }
- [class*="grid-5"].has-gutter-xl {
- margin-right: -2rem;
- margin-left: -2rem;
- }
- [class*="grid-5"].has-gutter-xl > * {
- width: calc(100% / 5 - 4rem - 0.01px);
- margin-right: 2rem;
- margin-left: 2rem;
- }
- [class*="grid-6"] > * {
- width: calc(100% / 6 - 0.01px);
- }
- [class*="grid-6"].has-gutter {
- margin-right: -0.5rem;
- margin-left: -0.5rem;
- }
- [class*="grid-6"].has-gutter > * {
- width: calc(100% / 6 - 1rem - 0.01px);
- margin-right: 0.5rem;
- margin-left: 0.5rem;
- }
- [class*="grid-6"].has-gutter-l {
- margin-right: -1rem;
- margin-left: -1rem;
- }
- [class*="grid-6"].has-gutter-l > * {
- width: calc(100% / 6 - 2rem - 0.01px);
- margin-right: 1rem;
- margin-left: 1rem;
- }
- [class*="grid-6"].has-gutter-xl {
- margin-right: -2rem;
- margin-left: -2rem;
- }
- [class*="grid-6"].has-gutter-xl > * {
- width: calc(100% / 6 - 4rem - 0.01px);
- margin-right: 2rem;
- margin-left: 2rem;
- }
- [class*="grid-7"] > * {
- width: calc(100% / 7 - 0.01px);
- }
- [class*="grid-7"].has-gutter {
- margin-right: -0.5rem;
- margin-left: -0.5rem;
- }
- [class*="grid-7"].has-gutter > * {
- width: calc(100% / 7 - 1rem - 0.01px);
- margin-right: 0.5rem;
- margin-left: 0.5rem;
- }
- [class*="grid-7"].has-gutter-l {
- margin-right: -1rem;
- margin-left: -1rem;
- }
- [class*="grid-7"].has-gutter-l > * {
- width: calc(100% / 7 - 2rem - 0.01px);
- margin-right: 1rem;
- margin-left: 1rem;
- }
- [class*="grid-7"].has-gutter-xl {
- margin-right: -2rem;
- margin-left: -2rem;
- }
- [class*="grid-7"].has-gutter-xl > * {
- width: calc(100% / 7 - 4rem - 0.01px);
- margin-right: 2rem;
- margin-left: 2rem;
- }
- [class*="grid-8"] > * {
- width: calc(100% / 8 - 0.01px);
- }
- [class*="grid-8"].has-gutter {
- margin-right: -0.5rem;
- margin-left: -0.5rem;
- }
- [class*="grid-8"].has-gutter > * {
- width: calc(100% / 8 - 1rem - 0.01px);
- margin-right: 0.5rem;
- margin-left: 0.5rem;
- }
- [class*="grid-8"].has-gutter-l {
- margin-right: -1rem;
- margin-left: -1rem;
- }
- [class*="grid-8"].has-gutter-l > * {
- width: calc(100% / 8 - 2rem - 0.01px);
- margin-right: 1rem;
- margin-left: 1rem;
- }
- [class*="grid-8"].has-gutter-xl {
- margin-right: -2rem;
- margin-left: -2rem;
- }
- [class*="grid-8"].has-gutter-xl > * {
- width: calc(100% / 8 - 4rem - 0.01px);
- margin-right: 2rem;
- margin-left: 2rem;
- }
- [class*="grid-9"] > * {
- width: calc(100% / 9 - 0.01px);
- }
- [class*="grid-9"].has-gutter {
- margin-right: -0.5rem;
- margin-left: -0.5rem;
- }
- [class*="grid-9"].has-gutter > * {
- width: calc(100% / 9 - 1rem - 0.01px);
- margin-right: 0.5rem;
- margin-left: 0.5rem;
- }
- [class*="grid-9"].has-gutter-l {
- margin-right: -1rem;
- margin-left: -1rem;
- }
- [class*="grid-9"].has-gutter-l > * {
- width: calc(100% / 9 - 2rem - 0.01px);
- margin-right: 1rem;
- margin-left: 1rem;
- }
- [class*="grid-9"].has-gutter-xl {
- margin-right: -2rem;
- margin-left: -2rem;
- }
- [class*="grid-9"].has-gutter-xl > * {
- width: calc(100% / 9 - 4rem - 0.01px);
- margin-right: 2rem;
- margin-left: 2rem;
- }
- [class*="grid-10"] > * {
- width: calc(100% / 10 - 0.01px);
- }
- [class*="grid-10"].has-gutter {
- margin-right: -0.5rem;
- margin-left: -0.5rem;
- }
- [class*="grid-10"].has-gutter > * {
- width: calc(100% / 10 - 1rem - 0.01px);
- margin-right: 0.5rem;
- margin-left: 0.5rem;
- }
- [class*="grid-10"].has-gutter-l {
- margin-right: -1rem;
- margin-left: -1rem;
- }
- [class*="grid-10"].has-gutter-l > * {
- width: calc(100% / 10 - 2rem - 0.01px);
- margin-right: 1rem;
- margin-left: 1rem;
- }
- [class*="grid-10"].has-gutter-xl {
- margin-right: -2rem;
- margin-left: -2rem;
- }
- [class*="grid-10"].has-gutter-xl > * {
- width: calc(100% / 10 - 4rem - 0.01px);
- margin-right: 2rem;
- margin-left: 2rem;
- }
- [class*="grid-11"] > * {
- width: calc(100% / 11 - 0.01px);
- }
- [class*="grid-11"].has-gutter {
- margin-right: -0.5rem;
- margin-left: -0.5rem;
- }
- [class*="grid-11"].has-gutter > * {
- width: calc(100% / 11 - 1rem - 0.01px);
- margin-right: 0.5rem;
- margin-left: 0.5rem;
- }
- [class*="grid-11"].has-gutter-l {
- margin-right: -1rem;
- margin-left: -1rem;
- }
- [class*="grid-11"].has-gutter-l > * {
- width: calc(100% / 11 - 2rem - 0.01px);
- margin-right: 1rem;
- margin-left: 1rem;
- }
- [class*="grid-11"].has-gutter-xl {
- margin-right: -2rem;
- margin-left: -2rem;
- }
- [class*="grid-11"].has-gutter-xl > * {
- width: calc(100% / 11 - 4rem - 0.01px);
- margin-right: 2rem;
- margin-left: 2rem;
- }
- [class*="grid-12"] > * {
- width: calc(100% / 12 - 0.01px);
- }
- [class*="grid-12"].has-gutter {
- margin-right: -0.5rem;
- margin-left: -0.5rem;
- }
- [class*="grid-12"].has-gutter > * {
- width: calc(100% / 12 - 1rem - 0.01px);
- margin-right: 0.5rem;
- margin-left: 0.5rem;
- }
- [class*="grid-12"].has-gutter-l {
- margin-right: -1rem;
- margin-left: -1rem;
- }
- [class*="grid-12"].has-gutter-l > * {
- width: calc(100% / 12 - 2rem - 0.01px);
- margin-right: 1rem;
- margin-left: 1rem;
- }
- [class*="grid-12"].has-gutter-xl {
- margin-right: -2rem;
- margin-left: -2rem;
- }
- [class*="grid-12"].has-gutter-xl > * {
- width: calc(100% / 12 - 4rem - 0.01px);
- margin-right: 2rem;
- margin-left: 2rem;
- }
+[class*="grid-3"] {
+ -ms-grid-columns: (1fr)[3];
+ grid-template-columns: repeat(3, 1fr);
}
-.push {
- margin-left: auto !important;
+[class*="grid-4"] {
+ -ms-grid-columns: (1fr)[4];
+ grid-template-columns: repeat(4, 1fr);
}
-.pull {
- margin-right: auto !important;
+[class*="grid-5"] {
+ -ms-grid-columns: (1fr)[5];
+ grid-template-columns: repeat(5, 1fr);
+}
+
+[class*="grid-6"] {
+ -ms-grid-columns: (1fr)[6];
+ grid-template-columns: repeat(6, 1fr);
+}
+
+[class*="grid-7"] {
+ -ms-grid-columns: (1fr)[7];
+ grid-template-columns: repeat(7, 1fr);
+}
+
+[class*="grid-8"] {
+ -ms-grid-columns: (1fr)[8];
+ grid-template-columns: repeat(8, 1fr);
+}
+
+[class*="grid-9"] {
+ -ms-grid-columns: (1fr)[9];
+ grid-template-columns: repeat(9, 1fr);
+}
+
+[class*="grid-10"] {
+ -ms-grid-columns: (1fr)[10];
+ grid-template-columns: repeat(10, 1fr);
+}
+
+[class*="grid-11"] {
+ -ms-grid-columns: (1fr)[11];
+ grid-template-columns: repeat(11, 1fr);
+}
+
+[class*="grid-12"] {
+ -ms-grid-columns: (1fr)[12];
+ grid-template-columns: repeat(12, 1fr);
+}
+
+[class*="col-2"] {
+ -ms-grid-column-span: 2;
+ -ms-grid-column: auto;
+ grid-column: auto/span 2;
+}
+
+[class*="row-2"] {
+ -ms-grid-row-span: 2;
+ -ms-grid-row: auto;
+ grid-row: auto/span 2;
+}
+
+[class*="col-3"] {
+ -ms-grid-column-span: 3;
+ -ms-grid-column: auto;
+ grid-column: auto/span 3;
+}
+
+[class*="row-3"] {
+ -ms-grid-row-span: 3;
+ -ms-grid-row: auto;
+ grid-row: auto/span 3;
+}
+
+[class*="col-4"] {
+ -ms-grid-column-span: 4;
+ -ms-grid-column: auto;
+ grid-column: auto/span 4;
+}
+
+[class*="row-4"] {
+ -ms-grid-row-span: 4;
+ -ms-grid-row: auto;
+ grid-row: auto/span 4;
+}
+
+[class*="col-5"] {
+ -ms-grid-column-span: 5;
+ -ms-grid-column: auto;
+ grid-column: auto/span 5;
+}
+
+[class*="row-5"] {
+ -ms-grid-row-span: 5;
+ -ms-grid-row: auto;
+ grid-row: auto/span 5;
+}
+
+[class*="col-6"] {
+ -ms-grid-column-span: 6;
+ -ms-grid-column: auto;
+ grid-column: auto/span 6;
+}
+
+[class*="row-6"] {
+ -ms-grid-row-span: 6;
+ -ms-grid-row: auto;
+ grid-row: auto/span 6;
+}
+
+[class*="col-7"] {
+ -ms-grid-column-span: 7;
+ -ms-grid-column: auto;
+ grid-column: auto/span 7;
+}
+
+[class*="row-7"] {
+ -ms-grid-row-span: 7;
+ -ms-grid-row: auto;
+ grid-row: auto/span 7;
+}
+
+[class*="col-8"] {
+ -ms-grid-column-span: 8;
+ -ms-grid-column: auto;
+ grid-column: auto/span 8;
+}
+
+[class*="row-8"] {
+ -ms-grid-row-span: 8;
+ -ms-grid-row: auto;
+ grid-row: auto/span 8;
+}
+
+[class*="col-9"] {
+ -ms-grid-column-span: 9;
+ -ms-grid-column: auto;
+ grid-column: auto/span 9;
+}
+
+[class*="row-9"] {
+ -ms-grid-row-span: 9;
+ -ms-grid-row: auto;
+ grid-row: auto/span 9;
+}
+
+[class*="col-10"] {
+ -ms-grid-column-span: 10;
+ -ms-grid-column: auto;
+ grid-column: auto/span 10;
+}
+
+[class*="row-10"] {
+ -ms-grid-row-span: 10;
+ -ms-grid-row: auto;
+ grid-row: auto/span 10;
+}
+
+[class*="col-11"] {
+ -ms-grid-column-span: 11;
+ -ms-grid-column: auto;
+ grid-column: auto/span 11;
+}
+
+[class*="row-11"] {
+ -ms-grid-row-span: 11;
+ -ms-grid-row: auto;
+ grid-row: auto/span 11;
+}
+
+[class*="col-12"] {
+ -ms-grid-column-span: 12;
+ -ms-grid-column: auto;
+ grid-column: auto/span 12;
+}
+
+[class*="row-12"] {
+ -ms-grid-row-span: 12;
+ -ms-grid-row: auto;
+ grid-row: auto/span 12;
+}
+
+/* intermediate breakpoint */
+@media (min-width: 480px) and (max-width: 576px -1) {
+ [class*="grid-"][class*="-small-1"] {
+ -ms-grid-columns: (1fr)[1];
+ grid-template-columns: repeat(1, 1fr);
+ }
+ [class*="col-"][class*="-small-1"] {
+ -ms-grid-column-span: 1;
+ -ms-grid-column: auto;
+ grid-column: auto/span 1;
+ }
+ [class*="grid-"][class*="-small-2"] {
+ -ms-grid-columns: (1fr)[2];
+ grid-template-columns: repeat(2, 1fr);
+ }
+ [class*="col-"][class*="-small-2"] {
+ -ms-grid-column-span: 2;
+ -ms-grid-column: auto;
+ grid-column: auto/span 2;
+ }
+ [class*="grid-"][class*="-small-3"] {
+ -ms-grid-columns: (1fr)[3];
+ grid-template-columns: repeat(3, 1fr);
+ }
+ [class*="col-"][class*="-small-3"] {
+ -ms-grid-column-span: 3;
+ -ms-grid-column: auto;
+ grid-column: auto/span 3;
+ }
+ [class*="grid-"][class*="-small-4"] {
+ -ms-grid-columns: (1fr)[4];
+ grid-template-columns: repeat(4, 1fr);
+ }
+ [class*="col-"][class*="-small-4"] {
+ -ms-grid-column-span: 4;
+ -ms-grid-column: auto;
+ grid-column: auto/span 4;
+ }
}
.item-first {
@@ -2740,201 +2705,16 @@ button:focus {
order: 1;
}
-[class*="grid-"][class*="--reverse"] {
- -webkit-box-orient: horizontal;
- -webkit-box-direction: reverse;
- -ms-flex-direction: row-reverse;
- flex-direction: row-reverse;
+.grid-offset {
+ visibility: hidden;
}
-@media (min-width: 576px) {
- .full {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- width: calc(100% / 1 - 0.01px);
- }
- .has-gutter > .full {
- width: calc(100% / 1 - 1rem - 0.01px);
- }
- .has-gutter-l > .full {
- width: calc(100% / 1 - 2rem - 0.01px);
- }
- .has-gutter-xl > .full {
- width: calc(100% / 1 - 4rem - 0.01px);
- }
- .one-half {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- width: calc(100% / 2 - 0.01px);
- }
- .has-gutter > .one-half {
- width: calc(100% / 2 - 1rem - 0.01px);
- }
- .has-gutter-l > .one-half {
- width: calc(100% / 2 - 2rem - 0.01px);
- }
- .has-gutter-xl > .one-half {
- width: calc(100% / 2 - 4rem - 0.01px);
- }
- .one-third {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- width: calc(100% / 3 - 0.01px);
- }
- .has-gutter > .one-third {
- width: calc(100% / 3 - 1rem - 0.01px);
- }
- .has-gutter-l > .one-third {
- width: calc(100% / 3 - 2rem - 0.01px);
- }
- .has-gutter-xl > .one-third {
- width: calc(100% / 3 - 4rem - 0.01px);
- }
- .one-quarter {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- width: calc(100% / 4 - 0.01px);
- }
- .has-gutter > .one-quarter {
- width: calc(100% / 4 - 1rem - 0.01px);
- }
- .has-gutter-l > .one-quarter {
- width: calc(100% / 4 - 2rem - 0.01px);
- }
- .has-gutter-xl > .one-quarter {
- width: calc(100% / 4 - 4rem - 0.01px);
- }
- .one-fifth {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- width: calc(100% / 5 - 0.01px);
- }
- .has-gutter > .one-fifth {
- width: calc(100% / 5 - 1rem - 0.01px);
- }
- .has-gutter-l > .one-fifth {
- width: calc(100% / 5 - 2rem - 0.01px);
- }
- .has-gutter-xl > .one-fifth {
- width: calc(100% / 5 - 4rem - 0.01px);
- }
- .one-sixth {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- width: calc(100% / 6 - 0.01px);
- }
- .has-gutter > .one-sixth {
- width: calc(100% / 6 - 1rem - 0.01px);
- }
- .has-gutter-l > .one-sixth {
- width: calc(100% / 6 - 2rem - 0.01px);
- }
- .has-gutter-xl > .one-sixth {
- width: calc(100% / 6 - 4rem - 0.01px);
- }
- .two-thirds {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- width: calc(100% / 3 * 2 - 0.01px);
- }
- .has-gutter > .two-thirds {
- width: calc(100% / 3 * 2 - 1rem - 0.01px);
- }
- .has-gutter-l > .two-thirds {
- width: calc(100% / 3 * 2 - 2rem - 0.01px);
- }
- .has-gutter-xl > .two-thirds {
- width: calc(100% / 3 * 2 - 4rem - 0.01px);
- }
- .three-quarters {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- width: calc(100% / 4 * 3 - 0.01px);
- }
- .has-gutter > .three-quarters {
- width: calc(100% / 4 * 3 - 1rem - 0.01px);
- }
- .has-gutter-l > .three-quarters {
- width: calc(100% / 4 * 3 - 2rem - 0.01px);
- }
- .has-gutter-xl > .three-quarters {
- width: calc(100% / 4 * 3 - 4rem - 0.01px);
- }
- .five-sixths {
- -webkit-box-flex: 0;
- -ms-flex: 0 0 auto;
- flex: 0 0 auto;
- width: calc(100% / 6 * 5 - 0.01px);
- }
- .has-gutter > .five-sixths {
- width: calc(100% / 6 * 5 - 1rem - 0.01px);
- }
- .has-gutter-l > .five-sixths {
- width: calc(100% / 6 * 5 - 2rem - 0.01px);
- }
- .has-gutter-xl > .five-sixths {
- width: calc(100% / 6 * 5 - 4rem - 0.01px);
- }
+.col-all {
+ grid-column: 1 / -1;
}
-/* Responsive Small Breakpoint */
-@media (min-width: 576px) and (max-width: 767px) {
- [class*="-small-1"] > * {
- width: calc(100% / 1 - 0.01px);
- }
- [class*="-small-1"].has-gutter > * {
- width: calc(100% / 1 - 1rem - 0.01px);
- }
- [class*="-small-1"].has-gutter-l > * {
- width: calc(100% / 1 - 2rem - 0.01px);
- }
- [class*="-small-1"].has-gutter-xl > * {
- width: calc(100% / 1 - 4rem - 0.01px);
- }
- [class*="-small-2"] > * {
- width: calc(100% / 2 - 0.01px);
- }
- [class*="-small-2"].has-gutter > * {
- width: calc(100% / 2 - 1rem - 0.01px);
- }
- [class*="-small-2"].has-gutter-l > * {
- width: calc(100% / 2 - 2rem - 0.01px);
- }
- [class*="-small-2"].has-gutter-xl > * {
- width: calc(100% / 2 - 4rem - 0.01px);
- }
- [class*="-small-3"] > * {
- width: calc(100% / 3 - 0.01px);
- }
- [class*="-small-3"].has-gutter > * {
- width: calc(100% / 3 - 1rem - 0.01px);
- }
- [class*="-small-3"].has-gutter-l > * {
- width: calc(100% / 3 - 2rem - 0.01px);
- }
- [class*="-small-3"].has-gutter-xl > * {
- width: calc(100% / 3 - 4rem - 0.01px);
- }
- [class*="-small-4"] > * {
- width: calc(100% / 4 - 0.01px);
- }
- [class*="-small-4"].has-gutter > * {
- width: calc(100% / 4 - 1rem - 0.01px);
- }
- [class*="-small-4"].has-gutter-l > * {
- width: calc(100% / 4 - 2rem - 0.01px);
- }
- [class*="-small-4"].has-gutter-xl > * {
- width: calc(100% / 4 - 4rem - 0.01px);
- }
+.row-all {
+ grid-row: 1 / -1;
}
/* ----------------------------- */
diff --git a/css/knacss.css b/css/knacss.css
index cf3ce65..865a75b 100644
--- a/css/knacss.css
+++ b/css/knacss.css
@@ -1,4 +1,4 @@
@charset "UTF-8";/*!
-* www.KNACSS.com v7.0.0 (31 juillet 2017) @author: Alsacreations, Raphael Goetter
+* www.KNACSS.com v7.0.0 (??? 2017) @author: Alsacreations, Raphael Goetter
* Licence WTFPL http://www.wtfpl.net/
-*//*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */code,kbd,pre,samp{font-size:1em}html,legend{box-sizing:border-box}a:active,a:focus,a:hover,body,mark{color:#000}blockquote,code,img,input,legend,pre,svg,table,td,textarea,video{max-width:100%}code,mark{padding:2px 4px}legend,pre code{color:inherit;padding:0}.button-burger,blockquote,sub,sup{position:relative}button,hr,input{overflow:visible}article,aside,details,figcaption,figure,footer,header,hr,main,menu,nav,section{display:block}hr,legend,pre code{padding:0}.clear,hr{clear:both}.btn:focus,.button-burger,.button:focus,[type=button]:focus,button:focus{-webkit-tap-highlight-color:transparent}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}h1{margin:.67em 0}figure{margin:1em 40px}pre{-moz-tab-size:2;-o-tab-size:2;tab-size:2}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#333}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;vertical-align:0}sub{bottom:-.25em;top:.5ex}sup{top:-.5em;bottom:1ex}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none;height:auto;vertical-align:middle}.inbl,.table,table,td,th{vertical-align:top}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}legend{display:table;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}html{font-size:62.5%;font-size:calc(1em * .625)}*{box-sizing:inherit}body{margin:0;font-size:1.4rem;background-color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;line-height:1.4}@media (min-width:480px){body{font-size:1.6rem;line-height:1.5}}.h1-like,h1{font-size:2.8rem;font-family:sans-serif}@media (min-width:480px){.h1-like,h1{font-size:3.2rem}}.h2-like,h2{font-size:2.4rem;font-family:sans-serif}@media (min-width:480px){.h2-like,h2{font-size:2.8rem}}.h3-like,h3{font-size:2rem}@media (min-width:480px){.h3-like,h3{font-size:2.4rem}}.h4-like,h4{font-size:1.8rem}@media (min-width:480px){.h4-like,h4{font-size:2rem}}.h5-like,h5{font-size:1.6rem}@media (min-width:480px){.h5-like,h5{font-size:1.8rem}}.h6-like,h6{font-size:1.4rem}@media (min-width:480px){.h6-like,h6{font-size:1.6rem}}.p-like,blockquote,caption,details,dl,figure,label,ol,p,pre,td,textarea,th,ul{margin-top:.75em;margin-bottom:0;line-height:1.4}.h1-like:first-child,.h2-like:first-child,.h3-like:first-child,.h4-like:first-child,.h5-like:first-child,.h6-like:first-child,.p-like:first-child,blockquote:first-child,dl:first-child,h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,label:first-child,ol:first-child,p:first-child,pre:first-child,ul:first-child{margin-top:0}li .p-like,li ol,li p,li ul{margin-top:0;margin-bottom:0}.smaller{font-size:.6em}.small{font-size:.8em}.big{font-size:1.2em}.bigger{font-size:1.5em}.biggest{font-size:2em}ol,ul{padding-left:2em}.italic,address,cite,em,i,var{font-style:italic}code,kbd,mark{border-radius:2px}kbd{padding:0 2px;border:1px solid #999}code{background:rgba(0,0,0,.04);color:#b11}pre code{background:0 0;border-radius:0}blockquote{padding-left:3em;min-height:2em}blockquote::before{content:"\201C";position:absolute;left:0;top:0;font-family:georgia,serif;font-size:5em;height:.4em;line-height:.9;color:rgba(0,0,0,.3)}blockquote>footer{margin-top:.75em;font-size:.9em;color:rgba(0,0,0,.7)}blockquote>footer::before{content:"\2014 \0020"}.checkbox~label:before,.clearfix::after{content:""}q{font-style:normal}.q,q{quotes:"“\00a0" "\00a0”"}.q:lang(fr),q:lang(fr){quotes:"«\00a0" "\00a0»"}hr{box-sizing:content-box;height:1px;margin:1em 0 2em;border:0;color:#ccc;background-color:#ccc}blockquote,figure{margin-left:0;margin-right:0}.center,.right{margin-left:auto}.center,.left{margin-right:auto}code,kbd,pre,samp{white-space:pre-wrap;font-family:consolas,courier,monospace;line-height:normal}@media print{*{background:0 0!important;box-shadow:none!important;text-shadow:none!important}body{width:auto;margin:auto;font-family:serif;font-size:12pt}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,.p-like,blockquote,h1,h2,h3,h4,h5,h6,ol,p,ul{color:#000;margin:auto}.print{display:block}.no-print{display:none}.p-like,blockquote,p{orphans:3;widows:3}blockquote,ol,ul{page-break-inside:avoid}.h1-like,.h2-like,.h3-like,caption,h1,h2,h3{page-break-after:avoid}a{color:#000}a[href^="javascript:"]::after,a[href^="#"]::after{content:""}}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){img[src$=".svg"]{width:100%}}.bfc,.mod{overflow:hidden}.clearfix::after{display:table;clear:both;border-collapse:collapse}.txtleft{text-align:left}.txtright{text-align:right}.txtcenter{text-align:center}.fl{float:left}img.fl{margin-right:1rem}.fr{float:right}img.fr{margin-left:1rem}img.fl,img.fr{margin-bottom:.5rem}.inbl{display:inline-block}.d-flex,.flex-container,[class*=flex-container]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-container-h,.flex-row{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.flex-row-reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.flex-column,.flex-container-v{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.flex-item-fluid{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.flex-item-first,.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.flex-item-medium,.item-medium{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.flex-item-last,.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.flex-item-center,.item-center,.mr-auto{margin:auto}.is-hidden,[hidden]{display:none}.button-burger>*,.checkbox,.visually-hidden{position:absolute!important;border:0!important;height:1px!important;width:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.skip-links,.skip-links a{position:absolute}.is-disabled,.is-disabled~label,[disabled],[disabled]~label{opacity:.5;cursor:not-allowed!important;-webkit-filter:grayscale(1);filter:grayscale(1)}ul.is-unstyled,ul.unstyled{list-style:none;padding-left:0}.w10{width:10%}.w20{width:20%}.w25{width:25%}.w30{width:30%}.w33{width:33.3333%}.w40{width:40%}.w50{width:50%}.w60{width:60%}.w66{width:66.6666%}.w70{width:70%}.w75{width:75%}.w80{width:80%}.w90{width:90%}.w100,progress{width:100%}.w50p{width:50px}.w100p{width:100px}.w150p{width:150px}.w200p{width:200px}.w300p{width:300px}@media (min-width:401px){.w400p{width:400px}.w500p{width:500px}.w600p{width:600px}}@media (min-width:701px){.w700p{width:700px}.w800p{width:800px}}@media (min-width:961px){.w960p{width:960px}.mw960p{max-width:960px}.w1140p{width:1140px}.mw1140p{max-width:1140px}}.wauto{width:auto}.ma0,.man{margin:0}.pa0,.pan{padding:0}.mas{margin:1rem}.mam{margin:2rem}.mal{margin:4rem}.pas{padding:1rem}.pam{padding:2rem}.pal{padding:4rem}.mt0,.mtn{margin-top:0}.mts{margin-top:1rem}.mtm{margin-top:2rem}.mtl{margin-top:4rem}.mr0,.mrn{margin-right:0}.mrs{margin-right:1rem}.mrm{margin-right:2rem}.mrl{margin-right:4rem}.mb0,.mbn{margin-bottom:0}.mbs{margin-bottom:1rem}.mbm{margin-bottom:2rem}.mbl{margin-bottom:4rem}.ml0,.mln{margin-left:0}.mls{margin-left:1rem}.mlm{margin-left:2rem}.mll{margin-left:4rem}.mauto{margin:auto}.mtauto{margin-top:auto}.mrauto{margin-right:auto}.mbauto{margin-bottom:auto}.mlauto{margin-left:auto}.pt0,.ptn{padding-top:0}.pts{padding-top:1rem}.ptm{padding-top:2rem}.ptl{padding-top:4rem}.pr0,.prn{padding-right:0}.prs{padding-right:1rem}.prm{padding-right:2rem}.prl{padding-right:4rem}.pb0,.pbn{padding-bottom:0}.pbs{padding-bottom:1rem}.pbm{padding-bottom:2rem}.pbl{padding-bottom:4rem}.pl0,.pln{padding-left:0}.pls{padding-left:1rem}.plm{padding-left:2rem}.pll{padding-left:4rem}@media (min-width:992px){.large-hidden{display:none!important}.large-visible{display:block!important}.large-no-float{float:none}.large-inbl{display:inline-block;float:none;vertical-align:top}.large-w25{width:25%!important}.large-w33{width:33.333333%!important}.large-w50{width:50%!important}.large-w66{width:66.666666%!important}.large-w75{width:75%!important}.large-w100,.large-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.large-ma0,.large-man{margin:0!important}}@media (min-width:768px) and (max-width:991px){.medium-hidden{display:none!important}.medium-visible{display:block!important}.medium-no-float{float:none}.medium-inbl{display:inline-block;float:none;vertical-align:top}.medium-w25{width:25%!important}.medium-w33{width:33.333333%!important}.medium-w50{width:50%!important}.medium-w66{width:66.666666%!important}.medium-w75{width:75%!important}.medium-w100,.medium-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.medium-ma0,.medium-man{margin:0!important}}@media (min-width:576px) and (max-width:767px){.small-hidden{display:none!important}.small-visible{display:block!important}.small-no-float{float:none}.small-inbl{display:inline-block;float:none;vertical-align:top}.small-w25{width:25%!important}.small-w33{width:33.333333%!important}.small-w50{width:50%!important}.small-w66{width:66.666666%!important}.small-w75{width:75%!important}.small-w100,.small-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.small-ma0,.small-man{margin:0!important}.small-pa0,.small-pan{padding:0!important}}@media (max-width:575px){code,div,pre,samp,table,td,textarea,th{word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.no-wrapping{word-wrap:normal;-webkit-hyphens:manual;-ms-hyphens:manual;hyphens:manual}.col,.mod,.tiny-w100,.tiny-wauto,fieldset{clear:none!important;margin-left:0!important;margin-right:0!important;border:0}.col,.mod,fieldset{display:block!important;float:none!important;width:auto!important}.tiny-inbl,.tiny-no-float{float:none}.flex-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.tiny-hidden{display:none!important}.tiny-visible{display:block!important}.tiny-inbl{display:inline-block;vertical-align:top}.tiny-w25{width:25%!important}.tiny-w33{width:33.333333%!important}.tiny-w50{width:50%!important}.tiny-w66{width:66.666666%!important}.tiny-w75{width:75%!important}.tiny-w100,.tiny-wauto{display:block!important;float:none!important;width:auto!important}.tiny-ma0,.tiny-man{margin:0!important}.tiny-pa0,.tiny-pan{padding:0!important}}@media (min-width:576px){.o-media{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.o-media-content{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.o-media--reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.o-media-figure--center{-ms-flex-item-align:center;align-self:center}.o-autogrid{display:-ms-grid;display:grid;grid-auto-flow:column;grid-auto-column:1fr}.o-autogrid.has-gutter{grid-column-gap:1rem}.o-autogrid.has-gutter-l{grid-column-gap:2rem}.o-autogrid.has-gutter-xl{grid-column-gap:4rem}.o-autogrid>*{min-width:0}}.skip-links a{overflow:hidden;clip:rect(1px,1px,1px,1px);padding:.5em;background:#000;color:#fff;text-decoration:none}.skip-links a:focus{position:static;overflow:visible;clip:auto}.table,table{width:100%;max-width:100%;table-layout:fixed;border-collapse:collapse;margin-bottom:2rem;border:1px solid #ccc}.table{display:table}#recaptcha_table,.table-auto{table-layout:auto}td,th{min-width:2rem;cursor:default;padding:.3em .8em;border:1px dotted #aaa;text-align:left}caption{padding:1rem;color:#555;font-style:italic}fieldset,form{border:none}fieldset{padding:2rem}fieldset legend{padding:0 .5rem;border:0;white-space:normal}label{display:inline-block;cursor:pointer}[type=color],[type=date],[type=datetime-local],[type=email],[type=month],[type=password],[type=tel],[type=text],[type=time],[type=url],[type=week],[type=submit],[type=number],[type=search],select,textarea{white-space:nowrap;font-family:inherit;font-size:inherit;border:0;box-shadow:0 0 0 1px #777 inset;color:#000;vertical-align:middle;padding:.5rem 1rem;margin:0;-webkit-transition:.25s;transition:.25s;-webkit-transition-property:box-shadow,background-color,color,border;transition-property:box-shadow,background-color,color,border;-webkit-appearance:none;-moz-appearance:none;appearance:none}[type=submit]{background-color:#777;color:#fff;cursor:pointer}input[readonly]{background-color:#F7F7F7}select{padding-right:2rem;border-radius:0;background-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='41px' height='26px' viewBox='0 0 41 26' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpolygon id='Path-3' fill='%23000000' points='0 5.38215461 19.9830489 25.3652035 40.1398855 5.20836689 34.9315186 0 19.8691842 15.0623344 4.83971338 0.0328636246'%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E%0A");background-position:right .5rem center;background-repeat:no-repeat;background-size:1rem}textarea{min-height:5em;vertical-align:top;resize:vertical;white-space:normal}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration,[type=search]::-webkit-search-results-button,[type=search]::-webkit-search-results-decoration{display:none}::-webkit-input-placeholder{color:#777}input:-moz-placeholder,textarea:-moz-placeholder{color:#777}progress{vertical-align:middle}.btn,.btn--danger,.btn--ghost,.btn--info,.btn--inverse,.btn--primary,.btn--success,.btn--warning,.button,.button--danger,.button--ghost,.button--info,.button--inverse,.button--primary,.button--success,.button--warning,[type=button],button{display:inline-block;padding:.5rem 1rem;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:.25s;transition:.25s;-webkit-transition-property:box-shadow,background-color,color,border;transition-property:box-shadow,background-color,color,border;text-align:center;vertical-align:middle;white-space:nowrap;text-decoration:none;color:#000;border:none;border-radius:0;background-color:#F7F7F7;font-family:inherit;font-size:inherit;line-height:1}.btn--primary,.button--primary{background-color:#0275D8;color:#fff;box-shadow:none}.btn--primary:active,.btn--primary:focus,.btn--primary:hover,.button--primary:active,.button--primary:focus,.button--primary:hover{background-color:#025aa5}.btn--success,.button--success{background-color:#5CB85C;color:#fff;box-shadow:none}.btn--success:active,.btn--success:focus,.btn--success:hover,.button--success:active,.button--success:focus,.button--success:hover{background-color:#449d44}.btn--info,.button--info{background-color:#5BC0DE;color:#fff;box-shadow:none}.btn--info:active,.btn--info:focus,.btn--info:hover,.button--info:active,.button--info:focus,.button--info:hover{background-color:#31b0d5}.btn--warning,.button--warning{background-color:#F0AD4E;color:#fff;box-shadow:none}.btn--warning:active,.btn--warning:focus,.btn--warning:hover,.button--warning:active,.button--warning:focus,.button--warning:hover{background-color:#ec971f}.btn--danger,.button--danger{background-color:#D9534F;color:#fff;box-shadow:none}.btn--danger:active,.btn--danger:focus,.btn--danger:hover,.button--danger:active,.button--danger:focus,.button--danger:hover{background-color:#c9302c}.btn--inverse,.button--inverse{background-color:#292B2C;color:#fff;box-shadow:none}.btn--inverse:active,.btn--inverse:focus,.btn--inverse:hover,.button--inverse:active,.button--inverse:focus,.button--inverse:hover{background-color:#101112}.btn--ghost,.btn--ghost:active,.btn--ghost:focus,.btn--ghost:hover,.button--ghost,.button--ghost:active,.button--ghost:focus,.button--ghost:hover{background-color:transparent}.btn--ghost,.button--ghost{color:#fff;box-shadow:0 0 0 1px #fff inset}.btn--small,.button--small{font-size:1rem}.btn--big,.button--big{font-size:1.8rem}.btn--block,.button--block{width:100%!important;display:block}.btn--unstyled,.button--unstyled{padding:0;border:none;text-align:left;background:0 0;border-radius:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.btn--unstyled:focus,.button--unstyled:focus{box-shadow:none;outline:0}.button-burger{height:2.4rem;width:2.8rem;background-color:transparent;background-image:-webkit-linear-gradient(#000,#000);background-image:linear-gradient(#000,#000);background-position:center;background-repeat:no-repeat;background-size:100% 5px;padding:0;outline:0;border:0;color:#333;cursor:pointer;-webkit-transition:.25s cubic-bezier(.17,.67,.89,1.4);transition:.25s cubic-bezier(.17,.67,.89,1.4);-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;will-change:transform}.button-burger::after,.button-burger::before{content:"";position:absolute;left:0;right:0;display:block;height:5px;background:#000;-webkit-transition:.25s;transition:.25s;-webkit-transition-property:top,-webkit-transform;transition-property:top,-webkit-transform;transition-property:transform,top;transition-property:transform,top,-webkit-transform;will-change:transform,top}.button-burger::before{top:0}.button-burger:after{top:calc(100% - 4px)}.button-burger.is-active,.button-burger.js-active,.button-burger:focus{background-image:none}.button-burger.is-active::after,.button-burger.is-active::before,.button-burger.js-active::after,.button-burger.js-active::before,.button-burger:focus::after,.button-burger:focus::before{top:50%}.button-burger.is-active::before,.button-burger.js-active::before,.button-burger:focus::before{-webkit-transform:translate3d(0,-50%,0) rotate3d(0,0,1,45deg);transform:translate3d(0,-50%,0) rotate3d(0,0,1,45deg)}.button-burger.is-active::after,.button-burger.js-active::after,.button-burger:focus::after{-webkit-transform:translate3d(0,-50%,0) rotate3d(0,0,1,-45deg);transform:translate3d(0,-50%,0) rotate3d(0,0,1,-45deg)}.checkbox~label{cursor:pointer}.alert--disabled,.alert.disabled,.badge--disabled,.badge.disabled,.disabled.alert--danger,.disabled.alert--ghost,.disabled.alert--info,.disabled.alert--inverse,.disabled.alert--primary,.disabled.alert--success,.disabled.alert--warning,.disabled.badge--danger,.disabled.badge--ghost,.disabled.badge--info,.disabled.badge--inverse,.disabled.badge--primary,.disabled.badge--success,.disabled.badge--warning{opacity:.5;cursor:not-allowed}.checkbox~label:before{display:inline-block;vertical-align:baseline;-webkit-transform:translateY(.2rem);transform:translateY(.2rem);margin-right:.5rem;width:1.1em;height:1.1em;border:0;background:#fff;border-radius:0;box-shadow:0 0 0 2px #777 inset;-webkit-transition:.25s background-color;transition:.25s background-color}.badge--danger,.badge--info,.badge--inverse,.badge--primary,.badge--success,.badge--warning{box-shadow:none;color:#fff}.checkbox:checked~label:before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);background-color:#777;background-size:60% 60%;background-position:center;background-repeat:no-repeat;pointer-events:none}.badge,.badge--danger,.badge--ghost,.badge--info,.badge--inverse,.badge--primary,.badge--success,.badge--warning{display:inline-block;padding:3px .5rem;vertical-align:baseline;white-space:nowrap;color:#000;border-radius:0;background-color:#F7F7F7;line-height:1}.badge--primary{background-color:#0275D8}.badge--success{background-color:#5CB85C}.badge--info{background-color:#5BC0DE}.badge--warning{background-color:#F0AD4E}.badge--danger{background-color:#D9534F}.badge--inverse{background-color:#292B2C}.badge--ghost{background-color:transparent;color:#fff;box-shadow:0 0 0 1px #fff inset}.alert--danger,.alert--info,.alert--inverse,.alert--primary,.alert--success,.alert--warning{box-shadow:none;color:#fff}.badge--small{font-size:1rem}.badge--big{font-size:1.8rem}.badge--block{width:100%!important;display:block}.badge--danger:empty,.badge--ghost:empty,.badge--info:empty,.badge--inverse:empty,.badge--primary:empty,.badge--success:empty,.badge--warning:empty,.badge:empty{display:none}.alert,.alert--danger,.alert--ghost,.alert--info,.alert--inverse,.alert--primary,.alert--success,.alert--warning{padding:1rem;margin-top:.75em;margin-bottom:0;color:#000;border-radius:0;background-color:#F7F7F7}.alert a,.alert--danger a,.alert--ghost a,.alert--info a,.alert--inverse a,.alert--primary a,.alert--success a,.alert--warning a{color:inherit;text-decoration:underline}.alert--primary{background-color:#0275D8}.alert--success{background-color:#5CB85C}.alert--info{background-color:#5BC0DE}.alert--warning{background-color:#F0AD4E}.alert--danger{background-color:#D9534F}.alert--inverse{background-color:#292B2C}.alert--ghost{background-color:transparent;color:#fff;box-shadow:0 0 0 1px #fff inset}.alert--small{font-size:1rem}.alert--big{font-size:1.8rem}.alert--block{width:100%!important;display:block}.alert--danger:empty,.alert--ghost:empty,.alert--info:empty,.alert--inverse:empty,.alert--primary:empty,.alert--success:empty,.alert--warning:empty,.alert:empty{display:none}@media (min-width:576px){[class*=" grid-"],[class^=grid-]{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-ms-flex-wrap:wrap;flex-wrap:wrap}[class*=" grid-"]>*,[class^=grid-]>*{box-sizing:border-box;min-width:0;min-height:0}.grid,.grid--reverse{display:-webkit-box;display:-ms-flexbox;display:flex}.grid--reverse>*,.grid>*{-webkit-box-flex:1;-ms-flex:1 1 0%;flex:1 1 0%;box-sizing:border-box;min-width:0;min-height:0}.grid--reverse.has-gutter>*+*,.grid.has-gutter>*+*{margin-left:calc(1rem - .01px)}.grid--reverse.has-gutter-l>*+*,.grid.has-gutter-l>*+*{margin-left:calc(2rem - .01px)}.grid--reverse.has-gutter-xl>*+*,.grid.has-gutter-xl>*+*{margin-left:calc(4rem - .01px)}[class*=grid-2]>*{width:calc(100% / 2 - .01px)}[class*=grid-2].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-2].has-gutter>*{width:calc(100% / 2 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-2].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-2].has-gutter-l>*{width:calc(100% / 2 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-2].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-2].has-gutter-xl>*{width:calc(100% / 2 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-3]>*{width:calc(100% / 3 - .01px)}[class*=grid-3].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-3].has-gutter>*{width:calc(100% / 3 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-3].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-3].has-gutter-l>*{width:calc(100% / 3 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-3].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-3].has-gutter-xl>*{width:calc(100% / 3 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-4]>*{width:calc(100% / 4 - .01px)}[class*=grid-4].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-4].has-gutter>*{width:calc(100% / 4 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-4].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-4].has-gutter-l>*{width:calc(100% / 4 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-4].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-4].has-gutter-xl>*{width:calc(100% / 4 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-5]>*{width:calc(100% / 5 - .01px)}[class*=grid-5].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-5].has-gutter>*{width:calc(100% / 5 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-5].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-5].has-gutter-l>*{width:calc(100% / 5 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-5].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-5].has-gutter-xl>*{width:calc(100% / 5 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-6]>*{width:calc(100% / 6 - .01px)}[class*=grid-6].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-6].has-gutter>*{width:calc(100% / 6 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-6].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-6].has-gutter-l>*{width:calc(100% / 6 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-6].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-6].has-gutter-xl>*{width:calc(100% / 6 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-7]>*{width:calc(100% / 7 - .01px)}[class*=grid-7].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-7].has-gutter>*{width:calc(100% / 7 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-7].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-7].has-gutter-l>*{width:calc(100% / 7 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-7].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-7].has-gutter-xl>*{width:calc(100% / 7 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-8]>*{width:calc(100% / 8 - .01px)}[class*=grid-8].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-8].has-gutter>*{width:calc(100% / 8 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-8].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-8].has-gutter-l>*{width:calc(100% / 8 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-8].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-8].has-gutter-xl>*{width:calc(100% / 8 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-9]>*{width:calc(100% / 9 - .01px)}[class*=grid-9].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-9].has-gutter>*{width:calc(100% / 9 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-9].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-9].has-gutter-l>*{width:calc(100% / 9 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-9].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-9].has-gutter-xl>*{width:calc(100% / 9 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-10]>*{width:calc(100% / 10 - .01px)}[class*=grid-10].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-10].has-gutter>*{width:calc(100% / 10 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-10].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-10].has-gutter-l>*{width:calc(100% / 10 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-10].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-10].has-gutter-xl>*{width:calc(100% / 10 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-11]>*{width:calc(100% / 11 - .01px)}[class*=grid-11].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-11].has-gutter>*{width:calc(100% / 11 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-11].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-11].has-gutter-l>*{width:calc(100% / 11 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-11].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-11].has-gutter-xl>*{width:calc(100% / 11 - 4rem - .01px);margin-right:2rem;margin-left:2rem}[class*=grid-12]>*{width:calc(100% / 12 - .01px)}[class*=grid-12].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=grid-12].has-gutter>*{width:calc(100% / 12 - 1rem - .01px);margin-right:.5rem;margin-left:.5rem}[class*=grid-12].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=grid-12].has-gutter-l>*{width:calc(100% / 12 - 2rem - .01px);margin-right:1rem;margin-left:1rem}[class*=grid-12].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=grid-12].has-gutter-xl>*{width:calc(100% / 12 - 4rem - .01px);margin-right:2rem;margin-left:2rem}}.push{margin-left:auto!important}.pull{margin-right:auto!important}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}[class*=grid-][class*="--reverse"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}@media (min-width:576px){.full,.one-half{-webkit-box-flex:0}.full{-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 1 - .01px)}.has-gutter>.full{width:calc(100% / 1 - 1rem - .01px)}.has-gutter-l>.full{width:calc(100% / 1 - 2rem - .01px)}.has-gutter-xl>.full{width:calc(100% / 1 - 4rem - .01px)}.one-half{-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 2 - .01px)}.has-gutter>.one-half{width:calc(100% / 2 - 1rem - .01px)}.has-gutter-l>.one-half{width:calc(100% / 2 - 2rem - .01px)}.has-gutter-xl>.one-half{width:calc(100% / 2 - 4rem - .01px)}.one-third{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 3 - .01px)}.has-gutter>.one-third{width:calc(100% / 3 - 1rem - .01px)}.has-gutter-l>.one-third{width:calc(100% / 3 - 2rem - .01px)}.has-gutter-xl>.one-third{width:calc(100% / 3 - 4rem - .01px)}.one-quarter{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 4 - .01px)}.has-gutter>.one-quarter{width:calc(100% / 4 - 1rem - .01px)}.has-gutter-l>.one-quarter{width:calc(100% / 4 - 2rem - .01px)}.has-gutter-xl>.one-quarter{width:calc(100% / 4 - 4rem - .01px)}.one-fifth{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 5 - .01px)}.has-gutter>.one-fifth{width:calc(100% / 5 - 1rem - .01px)}.has-gutter-l>.one-fifth{width:calc(100% / 5 - 2rem - .01px)}.has-gutter-xl>.one-fifth{width:calc(100% / 5 - 4rem - .01px)}.one-sixth{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 6 - .01px)}.has-gutter>.one-sixth{width:calc(100% / 6 - 1rem - .01px)}.has-gutter-l>.one-sixth{width:calc(100% / 6 - 2rem - .01px)}.has-gutter-xl>.one-sixth{width:calc(100% / 6 - 4rem - .01px)}.two-thirds{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 3 * 2 - .01px)}.has-gutter>.two-thirds{width:calc(100% / 3 * 2 - 1rem - .01px)}.has-gutter-l>.two-thirds{width:calc(100% / 3 * 2 - 2rem - .01px)}.has-gutter-xl>.two-thirds{width:calc(100% / 3 * 2 - 4rem - .01px)}.three-quarters{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 4 * 3 - .01px)}.has-gutter>.three-quarters{width:calc(100% / 4 * 3 - 1rem - .01px)}.has-gutter-l>.three-quarters{width:calc(100% / 4 * 3 - 2rem - .01px)}.has-gutter-xl>.three-quarters{width:calc(100% / 4 * 3 - 4rem - .01px)}.five-sixths{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% / 6 * 5 - .01px)}.has-gutter>.five-sixths{width:calc(100% / 6 * 5 - 1rem - .01px)}.has-gutter-l>.five-sixths{width:calc(100% / 6 * 5 - 2rem - .01px)}.has-gutter-xl>.five-sixths{width:calc(100% / 6 * 5 - 4rem - .01px)}}@media (min-width:576px) and (max-width:767px){[class*="-small-1"]>*{width:calc(100% / 1 - .01px)}[class*="-small-1"].has-gutter>*{width:calc(100% / 1 - 1rem - .01px)}[class*="-small-1"].has-gutter-l>*{width:calc(100% / 1 - 2rem - .01px)}[class*="-small-1"].has-gutter-xl>*{width:calc(100% / 1 - 4rem - .01px)}[class*="-small-2"]>*{width:calc(100% / 2 - .01px)}[class*="-small-2"].has-gutter>*{width:calc(100% / 2 - 1rem - .01px)}[class*="-small-2"].has-gutter-l>*{width:calc(100% / 2 - 2rem - .01px)}[class*="-small-2"].has-gutter-xl>*{width:calc(100% / 2 - 4rem - .01px)}[class*="-small-3"]>*{width:calc(100% / 3 - .01px)}[class*="-small-3"].has-gutter>*{width:calc(100% / 3 - 1rem - .01px)}[class*="-small-3"].has-gutter-l>*{width:calc(100% / 3 - 2rem - .01px)}[class*="-small-3"].has-gutter-xl>*{width:calc(100% / 3 - 4rem - .01px)}[class*="-small-4"]>*{width:calc(100% / 4 - .01px)}[class*="-small-4"].has-gutter>*{width:calc(100% / 4 - 1rem - .01px)}[class*="-small-4"].has-gutter-l>*{width:calc(100% / 4 - 2rem - .01px)}[class*="-small-4"].has-gutter-xl>*{width:calc(100% / 4 - 4rem - .01px)}}
\ No newline at end of file
+*//*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */code,kbd,pre,samp{font-size:1em}html,legend{box-sizing:border-box}a:active,a:focus,a:hover,body,mark{color:#000}blockquote,code,img,input,legend,pre,svg,table,td,textarea,video{max-width:100%}code,mark{padding:2px 4px}legend,pre code{color:inherit;padding:0}button,hr,input{overflow:visible}article,aside,details,figcaption,figure,footer,header,hr,main,menu,nav,section{display:block}hr,legend,pre code{padding:0}.clear,hr{clear:both}.inbl,.table,table,td,th{vertical-align:top}.btn:focus,.button-burger,.button:focus,[type=button]:focus,button:focus{-webkit-tap-highlight-color:transparent}html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}h1{margin:.67em 0}figure{margin:1em 40px}pre{-moz-tab-size:2;-o-tab-size:2;tab-size:2}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#333}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:0}sub{bottom:-.25em;top:.5ex}sup{top:-.5em;bottom:1ex}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none;height:auto;vertical-align:middle}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}legend{display:table;white-space:normal}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}[hidden],template{display:none}html{font-size:62.5%;font-size:calc(1em * .625)}*{box-sizing:inherit;min-width:0}body{margin:0;font-size:1.4rem;background-color:#fff;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;line-height:1.4}@media (min-width:480px){body{font-size:1.6rem;line-height:1.5}}.h1-like,h1{font-size:2.8rem;font-family:sans-serif}@media (min-width:480px){.h1-like,h1{font-size:3.2rem}}.h2-like,h2{font-size:2.4rem;font-family:sans-serif}@media (min-width:480px){.h2-like,h2{font-size:2.8rem}}.h3-like,h3{font-size:2rem}@media (min-width:480px){.h3-like,h3{font-size:2.4rem}}.h4-like,h4{font-size:1.8rem}@media (min-width:480px){.h4-like,h4{font-size:2rem}}.h5-like,h5{font-size:1.6rem}@media (min-width:480px){.h5-like,h5{font-size:1.8rem}}.h6-like,h6{font-size:1.4rem}@media (min-width:480px){.h6-like,h6{font-size:1.6rem}}.p-like,blockquote,caption,details,dl,figure,label,ol,p,pre,td,textarea,th,ul{margin-top:.75em;margin-bottom:0;line-height:1.4}.h1-like:first-child,.h2-like:first-child,.h3-like:first-child,.h4-like:first-child,.h5-like:first-child,.h6-like:first-child,.p-like:first-child,blockquote:first-child,dl:first-child,h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child,label:first-child,ol:first-child,p:first-child,pre:first-child,ul:first-child{margin-top:0}li .p-like,li ol,li p,li ul{margin-top:0;margin-bottom:0}.smaller{font-size:.6em}.small{font-size:.8em}.big{font-size:1.2em}.bigger{font-size:1.5em}.biggest{font-size:2em}ol,ul{padding-left:2em}.italic,address,cite,em,i,var{font-style:italic}code,kbd,mark{border-radius:2px}kbd{padding:0 2px;border:1px solid #999}code{background:rgba(0,0,0,.04);color:#b11}pre code{background:0 0;border-radius:0}blockquote{position:relative;padding-left:3em;min-height:2em}blockquote::before{content:"\201C";position:absolute;left:0;top:0;font-family:georgia,serif;font-size:5em;height:.4em;line-height:.9;color:rgba(0,0,0,.3)}blockquote>footer{margin-top:.75em;font-size:.9em;color:rgba(0,0,0,.7)}blockquote>footer::before{content:"\2014 \0020"}q{font-style:normal}.q,q{quotes:"“\00a0" "\00a0”"}.q:lang(fr),q:lang(fr){quotes:"«\00a0" "\00a0»"}hr{box-sizing:content-box;height:1px;margin:1em 0 2em;border:0;color:#ccc;background-color:#ccc}blockquote,figure{margin-left:0;margin-right:0}.center,.right{margin-left:auto}.center,.left{margin-right:auto}code,kbd,pre,samp{white-space:pre-wrap;font-family:consolas,courier,monospace;line-height:normal}@media print{*{background:0 0!important;box-shadow:none!important;text-shadow:none!important}body{width:auto;margin:auto;font-family:serif;font-size:12pt}.h1-like,.h2-like,.h3-like,.h4-like,.h5-like,.h6-like,.p-like,blockquote,h1,h2,h3,h4,h5,h6,label,ol,p,ul{color:#000;margin:auto}.print{display:block}.no-print{display:none}.p-like,blockquote,p{orphans:3;widows:3}blockquote,ol,ul{page-break-inside:avoid}.h1-like,.h2-like,.h3-like,caption,h1,h2,h3{page-break-after:avoid}a{color:#000}a[href^="javascript:"]::after,a[href^="#"]::after{content:""}}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){img[src$=".svg"]{width:100%}}.bfc,.mod{overflow:hidden}.clearfix::after{content:"";display:table;clear:both;border-collapse:collapse}.txtleft{text-align:left}.txtright{text-align:right}.txtcenter{text-align:center}.fl{float:left}img.fl{margin-right:1rem}.fr{float:right}img.fr{margin-left:1rem}img.fl,img.fr{margin-bottom:.5rem}.inbl{display:inline-block}.d-flex,.flex-container,[class*=flex-container]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-container-h,.flex-row{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.flex-row-reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse;-webkit-box-pack:end;-ms-flex-pack:end;justify-content:flex-end}.flex-column,.flex-container-v{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.flex-item-fluid{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.flex-item-first,.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.flex-item-medium,.item-medium{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.flex-item-last,.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.flex-item-center,.item-center,.mr-auto{margin:auto}.is-hidden,.js-hidden,[hidden]{display:none}.button-burger>*,.checkbox,.radio,.visually-hidden{position:absolute!important;border:0!important;height:1px!important;width:1px!important;padding:0!important;overflow:hidden!important;clip:rect(0,0,0,0)!important}.skip-links,.skip-links a{position:absolute}.w100,progress{width:100%}.is-disabled,.is-disabled~label,.js-disabled,[disabled],[disabled]~label{opacity:.5;cursor:not-allowed!important;-webkit-filter:grayscale(1);filter:grayscale(1)}ul.is-unstyled,ul.unstyled{list-style:none;padding-left:0}.w95{width:95%}.w90{width:90%}.w85{width:85%}.w80{width:80%}.w75{width:75%}.w70{width:70%}.w65{width:65%}.w60{width:60%}.w55{width:55%}.w50{width:50%}.w45{width:45%}.w40{width:40%}.w35{width:35%}.w30{width:30%}.w25{width:25%}.w20{width:20%}.w15{width:15%}.w10{width:10%}.w5{width:5%}.w66{width:calc(100% / 3 * 2)}.w33{width:calc(100% / 3)}.wauto{width:auto}.w960p{width:960px}.mw960p{max-width:960px}.w1140p{width:1140px}.mw1140p{max-width:1140px}.w1000p{width:1000px}.w950p{width:950px}.w900p{width:900px}.w850p{width:850px}.w800p{width:800px}.w750p{width:750px}.w700p{width:700px}.w650p{width:650px}.w600p{width:600px}.w550p{width:550px}.w500p{width:500px}.w450p{width:450px}.w400p{width:400px}.w350p{width:350px}.w300p{width:300px}.w250p{width:250px}.w200p{width:200px}.w150p{width:150px}.w100p{width:100px}.w50p{width:50px}.ma0,.man{margin:0}.pa0,.pan{padding:0}.mas{margin:1rem}.mam{margin:2rem}.mal{margin:4rem}.pas{padding:1rem}.pam{padding:2rem}.pal{padding:4rem}.mt0,.mtn{margin-top:0}.mts{margin-top:1rem}.mtm{margin-top:2rem}.mtl{margin-top:4rem}.mr0,.mrn{margin-right:0}.mrs{margin-right:1rem}.mrm{margin-right:2rem}.mrl{margin-right:4rem}.mb0,.mbn{margin-bottom:0}.mbs{margin-bottom:1rem}.mbm{margin-bottom:2rem}.mbl{margin-bottom:4rem}.ml0,.mln{margin-left:0}.mls{margin-left:1rem}.mlm{margin-left:2rem}.mll{margin-left:4rem}.mauto{margin:auto}.mtauto{margin-top:auto}.mrauto{margin-right:auto}.mbauto{margin-bottom:auto}.mlauto{margin-left:auto}.pt0,.ptn{padding-top:0}.pts{padding-top:1rem}.ptm{padding-top:2rem}.ptl{padding-top:4rem}.pr0,.prn{padding-right:0}.prs{padding-right:1rem}.prm{padding-right:2rem}.prl{padding-right:4rem}.pb0,.pbn{padding-bottom:0}.pbs{padding-bottom:1rem}.pbm{padding-bottom:2rem}.pbl{padding-bottom:4rem}.pl0,.pln{padding-left:0}.pls{padding-left:1rem}.plm{padding-left:2rem}.pll{padding-left:4rem}@media (min-width:992px){.large-hidden{display:none!important}.large-visible{display:block!important}.large-no-float{float:none}.large-inbl{display:inline-block;float:none;vertical-align:top}.large-w25{width:25%!important}.large-w33{width:33.333333%!important}.large-w50{width:50%!important}.large-w66{width:66.666666%!important}.large-w75{width:75%!important}.large-w100,.large-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.large-ma0,.large-man{margin:0!important}}@media (min-width:768px) and (max-width:991px){.medium-hidden{display:none!important}.medium-visible{display:block!important}.medium-no-float{float:none}.medium-inbl{display:inline-block;float:none;vertical-align:top}.medium-w25{width:25%!important}.medium-w33{width:33.333333%!important}.medium-w50{width:50%!important}.medium-w66{width:66.666666%!important}.medium-w75{width:75%!important}.medium-w100,.medium-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.medium-ma0,.medium-man{margin:0!important}}@media (min-width:576px) and (max-width:767px){.small-hidden{display:none!important}.small-visible{display:block!important}.small-no-float{float:none}.small-inbl{display:inline-block;float:none;vertical-align:top}.small-w25{width:25%!important}.small-w33{width:33.333333%!important}.small-w50{width:50%!important}.small-w66{width:66.666666%!important}.small-w75{width:75%!important}.small-w100,.small-wauto{display:block!important;float:none!important;clear:none!important;width:auto!important;margin-left:0!important;margin-right:0!important;border:0}.small-ma0,.small-man{margin:0!important}.small-pa0,.small-pan{padding:0!important}}@media (max-width:575px){code,div,pre,samp,table,td,textarea,th{word-wrap:break-word;-webkit-hyphens:auto;-ms-hyphens:auto;hyphens:auto}.no-wrapping{word-wrap:normal;-webkit-hyphens:manual;-ms-hyphens:manual;hyphens:manual}.col,.mod,.tiny-w100,.tiny-wauto,fieldset{clear:none!important;margin-left:0!important;margin-right:0!important;border:0}.col,.mod,fieldset{display:block!important;float:none!important;width:auto!important}.tiny-inbl,.tiny-no-float{float:none}.flex-container{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.tiny-hidden{display:none!important}.tiny-visible{display:block!important}.tiny-inbl{display:inline-block;vertical-align:top}.tiny-w25{width:25%!important}.tiny-w33{width:33.333333%!important}.tiny-w50{width:50%!important}.tiny-w66{width:66.666666%!important}.tiny-w75{width:75%!important}.tiny-w100,.tiny-wauto{display:block!important;float:none!important;width:auto!important}.tiny-ma0,.tiny-man{margin:0!important}.tiny-pa0,.tiny-pan{padding:0!important}}@media (min-width:576px){.o-media{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}.o-media-content{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.o-media--reverse{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.o-media-figure--center{-ms-flex-item-align:center;align-self:center}.o-autogrid{display:-ms-grid;display:grid;grid-auto-flow:column;grid-auto-column:1fr}.o-autogrid.has-gutter{grid-column-gap:1rem}.o-autogrid.has-gutter-l{grid-column-gap:2rem}.o-autogrid.has-gutter-xl{grid-column-gap:4rem}}.skip-links a{overflow:hidden;clip:rect(1px,1px,1px,1px);padding:.5em;background:#000;color:#fff;text-decoration:none}.skip-links a:focus{position:static;overflow:visible;clip:auto}.table,table{width:100%;max-width:100%;table-layout:fixed;border-collapse:collapse;margin-bottom:2rem;border:1px solid #ccc}.table{display:table}#recaptcha_table,.table-auto{table-layout:auto}td,th{min-width:2rem;cursor:default;padding:.3em .8em;border:1px dotted #aaa;text-align:left}caption{padding:1rem;color:#555;font-style:italic}fieldset,form{border:none}fieldset{padding:2rem}fieldset legend{padding:0 .5rem;border:0;white-space:normal}label{display:inline-block;cursor:pointer}[type=color],[type=date],[type=datetime-local],[type=email],[type=month],[type=password],[type=tel],[type=text],[type=time],[type=url],[type=week],[type=submit],[type=number],[type=search],select,textarea{white-space:nowrap;font-family:inherit;font-size:inherit;border:0;box-shadow:0 0 0 1px #777 inset;color:#000;vertical-align:middle;padding:.5rem 1rem;margin:0;-webkit-transition:.25s;transition:.25s;-webkit-transition-property:box-shadow,background-color,color,border;transition-property:box-shadow,background-color,color,border;-webkit-appearance:none;-moz-appearance:none;appearance:none}[type=submit]{background-color:#777;color:#fff;cursor:pointer}input[readonly]{background-color:#F7F7F7}select{padding-right:2rem;border-radius:0;background-image:url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='41px' height='26px' viewBox='0 0 41 26' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cdefs%3E%3C/defs%3E%3Cg id='Page-1' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E%3Cpolygon id='Path-3' fill='%23000000' points='0 5.38215461 19.9830489 25.3652035 40.1398855 5.20836689 34.9315186 0 19.8691842 15.0623344 4.83971338 0.0328636246'%3E%3C/polygon%3E%3C/g%3E%3C/svg%3E%0A");background-position:right .5rem center;background-repeat:no-repeat;background-size:1rem}textarea{min-height:5em;vertical-align:top;resize:vertical;white-space:normal}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration,[type=search]::-webkit-search-results-button,[type=search]::-webkit-search-results-decoration{display:none}::-webkit-input-placeholder{color:#777}input:-moz-placeholder,textarea:-moz-placeholder{color:#777}progress{vertical-align:middle}.btn,.btn--danger,.btn--ghost,.btn--info,.btn--inverse,.btn--primary,.btn--success,.btn--warning,.button,.button--danger,.button--ghost,.button--info,.button--inverse,.button--primary,.button--success,.button--warning,[type=button],button{display:inline-block;padding:.5rem 1rem;cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-transition:.25s;transition:.25s;-webkit-transition-property:box-shadow,background-color,color,border;transition-property:box-shadow,background-color,color,border;text-align:center;vertical-align:middle;white-space:nowrap;text-decoration:none;color:#000;border:none;border-radius:0;background-color:#F7F7F7;font-family:inherit;font-size:inherit;line-height:1}.btn--primary,.button--primary{background-color:#0275D8;color:#fff;box-shadow:none}.btn--primary:active,.btn--primary:focus,.btn--primary:hover,.button--primary:active,.button--primary:focus,.button--primary:hover{background-color:#025aa5}.btn--success,.button--success{background-color:#5CB85C;color:#fff;box-shadow:none}.btn--success:active,.btn--success:focus,.btn--success:hover,.button--success:active,.button--success:focus,.button--success:hover{background-color:#449d44}.btn--info,.button--info{background-color:#5BC0DE;color:#fff;box-shadow:none}.btn--info:active,.btn--info:focus,.btn--info:hover,.button--info:active,.button--info:focus,.button--info:hover{background-color:#31b0d5}.btn--warning,.button--warning{background-color:#F0AD4E;color:#fff;box-shadow:none}.btn--warning:active,.btn--warning:focus,.btn--warning:hover,.button--warning:active,.button--warning:focus,.button--warning:hover{background-color:#ec971f}.btn--danger,.button--danger{background-color:#D9534F;color:#fff;box-shadow:none}.btn--danger:active,.btn--danger:focus,.btn--danger:hover,.button--danger:active,.button--danger:focus,.button--danger:hover{background-color:#c9302c}.btn--inverse,.button--inverse{background-color:#292B2C;color:#fff;box-shadow:none}.btn--inverse:active,.btn--inverse:focus,.btn--inverse:hover,.button--inverse:active,.button--inverse:focus,.button--inverse:hover{background-color:#101112}.btn--ghost,.btn--ghost:active,.btn--ghost:focus,.btn--ghost:hover,.button--ghost,.button--ghost:active,.button--ghost:focus,.button--ghost:hover{background-color:transparent}.btn--ghost,.button--ghost{color:#fff;box-shadow:0 0 0 1px #fff inset}.btn--small,.button--small{font-size:1rem}.btn--big,.button--big{font-size:1.8rem}.btn--block,.button--block{width:100%!important;display:block}.btn--unstyled,.button--unstyled{padding:0;border:none;text-align:left;background:0 0;border-radius:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}.btn--unstyled:focus,.button--unstyled:focus{box-shadow:none;outline:0}.button-burger{position:relative;height:2.4rem;width:2.8rem;background-color:transparent;background-image:-webkit-linear-gradient(#000,#000);background-image:linear-gradient(#000,#000);background-position:center;background-repeat:no-repeat;background-size:100% 5px;padding:0;outline:0;border:0;color:#333;cursor:pointer;-webkit-transition:.25s cubic-bezier(.17,.67,.89,1.4);transition:.25s cubic-bezier(.17,.67,.89,1.4);-webkit-transition-property:-webkit-transform;transition-property:-webkit-transform;transition-property:transform;transition-property:transform,-webkit-transform;will-change:transform}.button-burger::after,.button-burger::before{content:"";position:absolute;left:0;right:0;display:block;height:5px;background:#000;-webkit-transition:.25s;transition:.25s;-webkit-transition-property:top,-webkit-transform;transition-property:top,-webkit-transform;transition-property:transform,top;transition-property:transform,top,-webkit-transform;will-change:transform,top}.checkbox~label:before,.radio~label:before{content:"";margin-right:.5rem;width:1.1em;height:1.1em;box-shadow:0 0 0 2px #777 inset;display:inline-block;vertical-align:baseline}.button-burger::before{top:0}.button-burger:after{top:calc(100% - 4px)}.button-burger.is-active,.button-burger.js-active,.button-burger:focus{background-image:none}.button-burger.is-active::after,.button-burger.is-active::before,.button-burger.js-active::after,.button-burger.js-active::before,.button-burger:focus::after,.button-burger:focus::before{top:50%}.button-burger.is-active::before,.button-burger.js-active::before,.button-burger:focus::before{-webkit-transform:translate3d(0,-50%,0) rotate3d(0,0,1,45deg);transform:translate3d(0,-50%,0) rotate3d(0,0,1,45deg)}.button-burger.is-active::after,.button-burger.js-active::after,.button-burger:focus::after{-webkit-transform:translate3d(0,-50%,0) rotate3d(0,0,1,-45deg);transform:translate3d(0,-50%,0) rotate3d(0,0,1,-45deg)}.checkbox~label{cursor:pointer}.checkbox~label:before{-webkit-transform:translateY(.2rem);transform:translateY(.2rem);border:0;background:#fff;border-radius:0;-webkit-transition:.25s background-color;transition:.25s background-color}.checkbox:checked~label:before{background-image:url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=);background-color:#777;background-size:60% 60%;background-position:center;background-repeat:no-repeat;pointer-events:none}.radio~label{cursor:pointer}.alert--disabled,.alert.disabled,.badge--disabled,.badge.disabled,.disabled.alert--danger,.disabled.alert--ghost,.disabled.alert--info,.disabled.alert--inverse,.disabled.alert--primary,.disabled.alert--success,.disabled.alert--warning,.disabled.badge--danger,.disabled.badge--ghost,.disabled.badge--info,.disabled.badge--inverse,.disabled.badge--primary,.disabled.badge--success,.disabled.badge--warning{opacity:.5;cursor:not-allowed}.radio~label:before{-webkit-transform:translateY(.2rem);transform:translateY(.2rem);border:0;background:#fff;border-radius:50%;-webkit-transition:.25s background;transition:.25s background}.badge--danger,.badge--info,.badge--inverse,.badge--primary,.badge--success,.badge--warning{box-shadow:none;color:#fff}.radio:checked~label:before{background-image:-webkit-radial-gradient(center circle,#fff 30%,transparent 38%);background-image:radial-gradient(circle at center,#fff 30%,transparent 38%);background-color:#777;background-position:center;background-repeat:no-repeat;pointer-events:none}.badge,.badge--danger,.badge--ghost,.badge--info,.badge--inverse,.badge--primary,.badge--success,.badge--warning{display:inline-block;padding:3px .5rem;vertical-align:baseline;white-space:nowrap;color:#000;border-radius:0;background-color:#F7F7F7;line-height:1}.badge--primary{background-color:#0275D8}.badge--success{background-color:#5CB85C}.badge--info{background-color:#5BC0DE}.badge--warning{background-color:#F0AD4E}.badge--danger{background-color:#D9534F}.badge--inverse{background-color:#292B2C}.badge--ghost{background-color:transparent;color:#fff;box-shadow:0 0 0 1px #fff inset}.alert--danger,.alert--info,.alert--inverse,.alert--primary,.alert--success,.alert--warning{box-shadow:none;color:#fff}.badge--small{font-size:1rem}.badge--big{font-size:1.8rem}.badge--block{width:100%!important;display:block}.badge--danger:empty,.badge--ghost:empty,.badge--info:empty,.badge--inverse:empty,.badge--primary:empty,.badge--success:empty,.badge--warning:empty,.badge:empty{display:none}.alert,.alert--danger,.alert--ghost,.alert--info,.alert--inverse,.alert--primary,.alert--success,.alert--warning{padding:1rem;margin-top:.75em;margin-bottom:0;color:#000;border-radius:0;background-color:#F7F7F7}.alert a,.alert--danger a,.alert--ghost a,.alert--info a,.alert--inverse a,.alert--primary a,.alert--success a,.alert--warning a{color:inherit;text-decoration:underline}.alert--primary{background-color:#0275D8}.alert--success{background-color:#5CB85C}.alert--info{background-color:#5BC0DE}.alert--warning{background-color:#F0AD4E}.alert--danger{background-color:#D9534F}.alert--inverse{background-color:#292B2C}.alert--ghost{background-color:transparent;color:#fff;box-shadow:0 0 0 1px #fff inset}.alert--small{font-size:1rem}.alert--big{font-size:1.8rem}.alert--block{width:100%!important;display:block}.alert--danger:empty,.alert--ghost:empty,.alert--info:empty,.alert--inverse:empty,.alert--primary:empty,.alert--success:empty,.alert--warning:empty,.alert:empty{display:none}@media (min-width:480px){[class*=" grid-"],[class^=grid-]{display:-ms-grid;display:grid;grid-auto-flow:dense}[class*=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class*=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class*=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}[class*=grid-2]{-ms-grid-columns:(1fr) [2];grid-template-columns:repeat(2,1fr)}[class*=grid-3]{-ms-grid-columns:(1fr) [3];grid-template-columns:repeat(3,1fr)}[class*=grid-4]{-ms-grid-columns:(1fr) [4];grid-template-columns:repeat(4,1fr)}[class*=grid-5]{-ms-grid-columns:(1fr) [5];grid-template-columns:repeat(5,1fr)}[class*=grid-6]{-ms-grid-columns:(1fr) [6];grid-template-columns:repeat(6,1fr)}[class*=grid-7]{-ms-grid-columns:(1fr) [7];grid-template-columns:repeat(7,1fr)}[class*=grid-8]{-ms-grid-columns:(1fr) [8];grid-template-columns:repeat(8,1fr)}[class*=grid-9]{-ms-grid-columns:(1fr) [9];grid-template-columns:repeat(9,1fr)}[class*=grid-10]{-ms-grid-columns:(1fr) [10];grid-template-columns:repeat(10,1fr)}[class*=grid-11]{-ms-grid-columns:(1fr) [11];grid-template-columns:repeat(11,1fr)}[class*=grid-12]{-ms-grid-columns:(1fr) [12];grid-template-columns:repeat(12,1fr)}[class*=col-2]{-ms-grid-column-span:2;-ms-grid-column:auto;grid-column:auto/span 2}[class*=row-2]{-ms-grid-row-span:2;-ms-grid-row:auto;grid-row:auto/span 2}[class*=col-3]{-ms-grid-column-span:3;-ms-grid-column:auto;grid-column:auto/span 3}[class*=row-3]{-ms-grid-row-span:3;-ms-grid-row:auto;grid-row:auto/span 3}[class*=col-4]{-ms-grid-column-span:4;-ms-grid-column:auto;grid-column:auto/span 4}[class*=row-4]{-ms-grid-row-span:4;-ms-grid-row:auto;grid-row:auto/span 4}[class*=col-5]{-ms-grid-column-span:5;-ms-grid-column:auto;grid-column:auto/span 5}[class*=row-5]{-ms-grid-row-span:5;-ms-grid-row:auto;grid-row:auto/span 5}[class*=col-6]{-ms-grid-column-span:6;-ms-grid-column:auto;grid-column:auto/span 6}[class*=row-6]{-ms-grid-row-span:6;-ms-grid-row:auto;grid-row:auto/span 6}[class*=col-7]{-ms-grid-column-span:7;-ms-grid-column:auto;grid-column:auto/span 7}[class*=row-7]{-ms-grid-row-span:7;-ms-grid-row:auto;grid-row:auto/span 7}[class*=col-8]{-ms-grid-column-span:8;-ms-grid-column:auto;grid-column:auto/span 8}[class*=row-8]{-ms-grid-row-span:8;-ms-grid-row:auto;grid-row:auto/span 8}[class*=col-9]{-ms-grid-column-span:9;-ms-grid-column:auto;grid-column:auto/span 9}[class*=row-9]{-ms-grid-row-span:9;-ms-grid-row:auto;grid-row:auto/span 9}[class*=col-10]{-ms-grid-column-span:10;-ms-grid-column:auto;grid-column:auto/span 10}[class*=row-10]{-ms-grid-row-span:10;-ms-grid-row:auto;grid-row:auto/span 10}[class*=col-11]{-ms-grid-column-span:11;-ms-grid-column:auto;grid-column:auto/span 11}[class*=row-11]{-ms-grid-row-span:11;-ms-grid-row:auto;grid-row:auto/span 11}[class*=col-12]{-ms-grid-column-span:12;-ms-grid-column:auto;grid-column:auto/span 12}[class*=row-12]{-ms-grid-row-span:12;-ms-grid-row:auto;grid-row:auto/span 12}@media (min-width:480px) and (max-width:576px -1){[class*=grid-][class*="-small-1"]{-ms-grid-columns:(1fr) [1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*="-small-1"]{-ms-grid-column-span:1;-ms-grid-column:auto;grid-column:auto/span 1}[class*=grid-][class*="-small-2"]{-ms-grid-columns:(1fr) [2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*="-small-2"]{-ms-grid-column-span:2;-ms-grid-column:auto;grid-column:auto/span 2}[class*=grid-][class*="-small-3"]{-ms-grid-columns:(1fr) [3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*="-small-3"]{-ms-grid-column-span:3;-ms-grid-column:auto;grid-column:auto/span 3}[class*=grid-][class*="-small-4"]{-ms-grid-columns:(1fr) [4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*="-small-4"]{-ms-grid-column-span:4;-ms-grid-column:auto;grid-column:auto/span 4}}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}
\ No newline at end of file
diff --git a/sass/_config/_mixins.scss b/sass/_config/_mixins.scss
index 88abcb2..433de3a 100644
--- a/sass/_config/_mixins.scss
+++ b/sass/_config/_mixins.scss
@@ -1,3 +1,14 @@
+// Grid Mixin
+// arguments are : columns number, gutter, min-breakpoint
+// ex. .ingrid { @include grid(4, 1rem, 640px); }
+@mixin grid($number:1, $gutter:0, $breakpoint:0) {
+ @media (min-width: $breakpoint) {
+ display: grid;
+ grid-template-columns: repeat($number, 1fr);
+ grid-gap: $gutter;
+ }
+}
+
// Additionnal "utility" breakpoints aliases
// ex. @include respond-to("medium-up") {...}
$bp-aliases: (
diff --git a/sass/components/grillade.scss b/sass/components/grillade.scss
index eca22fe..69e64f8 100644
--- a/sass/components/grillade.scss
+++ b/sass/components/grillade.scss
@@ -1,93 +1,67 @@
-/* ---------------------------------- */
-/* ==Grillade : Simple Grid System */
-/* ---------------------------------- */
-/* Doc : http://grillade.knacss.com */
-// gutter values for grid layouts. Unit can be: %, px, em, rem
-$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
-// IEfixing, see
-// https://github.com/alsacreations/KNACSS/issues/133;
-$iefix: 0.01px;
-@media (min-width: $small) {
- [class*=" grid-"],
- [class^="grid-"] {
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
+/* --------------------------------------- */
+/* ==Grillade : ultra light Grid System */
+/* --------------------------------------- */
+/* Doc : @TODO */
+// WARNING: THIS IS NOT A COMPLETE GRID FRAMEWORK, just ultra light Grid System
+// if you need complex Grid :
+// 1- use vanilla CSS Grid Layout spec (perfect for you)
+// 2- use Bootstrap (good luck)
- & > * {
- box-sizing: border-box;
- min-width: 0;
- min-height: 0;
- }
- }
-}
-// Multi-line grid constructor
-// example : .grid-perso { @include grid(12, 3rem); }
-@mixin grid($grid-number: 1, $own-gutter: 0) {
- & > * {
- width: calc(100% / #{$grid-number} - #{$iefix});
- }
- @each $affix, $size in $grid-gutters {
- &.has-gutter#{$affix} {
- margin-right: -$size / 2;
- margin-left: -$size / 2;
+[class*=" grid-"],
+[class^="grid-"] {
+ @media (min-width: $tiny) {
+ display: grid;
+ grid-auto-flow: dense;
- & > * {
- width: calc(100% / #{$grid-number} - #{$size} - #{$iefix});
- margin-right: $size / 2;
- margin-left: $size / 2;
- }
+ // gutters
+ @if variable_exists(grid-gutters) {
+ $gutter: $grid-gutters !global;
}
- }
- @if ($own-gutter != 0) {
- margin-right: -$own-gutter / 2;
- margin-left: -$own-gutter / 2;
-
- & > * {
- width: calc(100% / #{$grid-number} - #{$own-gutter} - #{$iefix});
- margin-right: $own-gutter / 2;
- margin-left: $own-gutter / 2;
+ @else {
+ $gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
}
- }
-}
-// Mono-line grid constructor (.grid)
-@media (min-width: $small) {
- .grid,
- .grid--reverse {
- display: flex;
-
- & > * {
- flex: 1 1 0%;
- box-sizing: border-box;
- min-width: 0;
- min-height: 0;
- }
- @each $affix, $size in $grid-gutters {
- &.has-gutter#{$affix} > * + * {
- margin-left: calc(#{$size} - #{$iefix});
+ @each $affix, $size in $gutter {
+ &.has-gutter#{$affix} {
+ grid-gap: $size;
}
}
}
}
-// Constructing grids : will be compiled in CSS
-@media (min-width: $small) {
- @for $i from 2 through 12 {
- [class*="grid-#{$i}"] {
- @include grid(#{$i}, 0);
+
+// grid constructor (.grid-2 to .grid-12)
+@for $i from 2 through 12 {
+ [class*="grid-#{$i}"] {
+ grid-template-columns: repeat(#{$i}, 1fr);
+ }
+}
+
+// grid items constructor (.col-2 to .col-12, .row-2 to .row-12)
+@for $i from 2 through 12 {
+ [class*="col-#{$i}"] {
+ grid-column: auto / span #{$i};
+ }
+
+ [class*="row-#{$i}"] {
+ grid-row: auto / span #{$i};
+ }
+}
+
+/* intermediate breakpoint */
+// -small-X suffix means "X columns when < small screen"
+// example : .grid-4-small-2 will be 1 column (< tiny) then 2 columns (< small) then 4 columns
+@media (min-width: $tiny) and (max-width: ($small -1)) {
+ @for $i from 1 through 4{
+ [class*="grid-"][class*="-small-#{$i}"] {
+ grid-template-columns: repeat(#{$i}, 1fr);
+ }
+
+ [class*="col-"][class*="-small-#{$i}"] {
+ grid-column: auto / span #{$i};
}
}
}
-// Grid offsets
-.push {
- margin-left: auto !important;
-}
-
-.pull {
- margin-right: auto !important;
-}
-
-// Grid order
+// grid order
.item-first {
order: -1;
}
@@ -96,37 +70,16 @@ $iefix: 0.01px;
order: 1;
}
-[class*="grid-"][class*="--reverse"] {
- flex-direction: row-reverse;
+// grid offset
+.grid-offset {
+ visibility: hidden;
}
-// sizing individual children
-@media (min-width: $small) {
- @each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5") {
- .#{$flow} {
- flex: 0 0 auto;
- width: calc(100% / #{$divider} - #{$iefix});
- }
- @each $affix, $size in $grid-gutters {
- .has-gutter#{$affix} > .#{$flow} {
- width: calc(100% / #{$divider} - #{$size} - #{$iefix});
- }
- }
- }
+
+// spanning all collumns or rows
+.col-all {
+ grid-column: 1 / -1;
}
-/* Responsive Small Breakpoint */
-// -small-X suffix means "X columns on small-medium screen"
-// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until medium) then 4 columns
-@media (min-width: $small) and (max-width: ($medium - 1)) {
- @for $i from 1 through 4 {
- [class*="-small-#{$i}"] {
- & > * {
- width: calc(100% / #{$i} - #{$iefix});
- }
- @each $affix, $size in $grid-gutters {
- &.has-gutter#{$affix} > * {
- width: calc(100% / #{$i} - #{$size} - #{$iefix});
- }
- }
- }
- }
+
+.row-all {
+ grid-row: 1 / -1;
}