diff --git a/bower.json b/bower.json index d8ea080..6173e4f 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "KNACSS", - "version": "6.0.1", + "version": "6.0.2", "homepage": "http://www.knacss.com/", "authors": [ "Raphaël GOETTER, Alsacreations" diff --git a/changelog.md b/changelog.md index 05ac036..13a8f94 100644 --- a/changelog.md +++ b/changelog.md @@ -1,3 +1,6 @@ +# changelog v6.0.2 (27 octobre 2016) +- optimisation de la grille (de 8ko à 3ko pour la version Sass) + # changelog v6.0.0 (26 septembre 2016) - refonte intégrale de la grille de mise en forme (adoption de [grillade.css](http://grillade.knacss.com)) - suppression de include-media (cause de bugs d'encodage : cf. [#203](https://github.com/alsacreations/KNACSS/issues/203) / [#197](https://github.com/alsacreations/KNACSS/issues/197) , nécessite un temps d'apprentissage, et n'apporte pas grand chose au final). diff --git a/css/grillade.css b/css/grillade.css index dca5e97..362c74d 100644 --- a/css/grillade.css +++ b/css/grillade.css @@ -1 +1 @@ -@media (min-width:545px){[class*=" grid"]>*,[class^=grid]>*{box-sizing:border-box;min-width:0;min-height:0}[class*=" grid"].has-gutter,[class^=grid].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=" grid"].has-gutter>*,[class^=grid].has-gutter>*{margin-right:.5rem;margin-left:.5rem}[class*=" grid"].has-gutter-l,[class^=grid].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=" grid"].has-gutter-l>*,[class^=grid].has-gutter-l>*{margin-right:1rem;margin-left:1rem}[class*=" grid"].has-gutter-xl,[class^=grid].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=" grid"].has-gutter-xl>*,[class^=grid].has-gutter-xl>*{margin-right:2rem;margin-left:2rem}.grid{display:-webkit-box;display:-ms-flexbox;display:flex}.grid>*{-webkit-box-flex:1;-ms-flex:1 1 0%;flex:1 1 0%}[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-]>*{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% - .01px)}[class*=" grid-"].has-gutter>*,[class^=grid-].has-gutter>*{width:calc(100% - 1rem - .01px)}[class*=" grid-"].has-gutter-l>*,[class^=grid-].has-gutter-l>*{width:calc(100% - 2rem - .01px)}[class*=" grid-"].has-gutter-xl>*,[class^=grid-].has-gutter-xl>*{width:calc(100% - 4rem - .01px)}[class*=grid-2]>*{width:calc(100% * 1 / 2 - .01px)}[class*=grid-2].has-gutter>*{width:calc(100% * 1 / 2 - 1rem - .01px)}[class*=grid-2].has-gutter-l>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-2].has-gutter-xl>*{width:calc(100% * 1 / 2 - 4rem - .01px)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - .01px)}[class*=grid-3].has-gutter>*{width:calc(100% * 1 / 3 - 1rem - .01px)}[class*=grid-3].has-gutter-l>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*=grid-3].has-gutter-xl>*{width:calc(100% * 1 / 3 - 4rem - .01px)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - .01px)}[class*=grid-4].has-gutter>*{width:calc(100% * 1 / 4 - 1rem - .01px)}[class*=grid-4].has-gutter-l>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*=grid-4].has-gutter-xl>*{width:calc(100% * 1 / 4 - 4rem - .01px)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - .01px)}[class*=grid-5].has-gutter>*{width:calc(100% * 1 / 5 - 1rem - .01px)}[class*=grid-5].has-gutter-l>*{width:calc(100% * 1 / 5 - 2rem - .01px)}[class*=grid-5].has-gutter-xl>*{width:calc(100% * 1 / 5 - 4rem - .01px)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - .01px)}[class*=grid-6].has-gutter>*{width:calc(100% * 1 / 6 - 1rem - .01px)}[class*=grid-6].has-gutter-l>*{width:calc(100% * 1 / 6 - 2rem - .01px)}[class*=grid-6].has-gutter-xl>*{width:calc(100% * 1 / 6 - 4rem - .01px)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - .01px)}[class*=grid-7].has-gutter>*{width:calc(100% * 1 / 7 - 1rem - .01px)}[class*=grid-7].has-gutter-l>*{width:calc(100% * 1 / 7 - 2rem - .01px)}[class*=grid-7].has-gutter-xl>*{width:calc(100% * 1 / 7 - 4rem - .01px)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - .01px)}[class*=grid-8].has-gutter>*{width:calc(100% * 1 / 8 - 1rem - .01px)}[class*=grid-8].has-gutter-l>*{width:calc(100% * 1 / 8 - 2rem - .01px)}[class*=grid-8].has-gutter-xl>*{width:calc(100% * 1 / 8 - 4rem - .01px)}[class*=grid-9]>*{width:calc(100% * 1 / 9 - .01px)}[class*=grid-9].has-gutter>*{width:calc(100% * 1 / 9 - 1rem - .01px)}[class*=grid-9].has-gutter-l>*{width:calc(100% * 1 / 9 - 2rem - .01px)}[class*=grid-9].has-gutter-xl>*{width:calc(100% * 1 / 9 - 4rem - .01px)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - .01px)}[class*=grid-10].has-gutter>*{width:calc(100% * 1 / 10 - 1rem - .01px)}[class*=grid-10].has-gutter-l>*{width:calc(100% * 1 / 10 - 2rem - .01px)}[class*=grid-10].has-gutter-xl>*{width:calc(100% * 1 / 10 - 4rem - .01px)}[class*=grid-11]>*{width:calc(100% * 1 / 11 - .01px)}[class*=grid-11].has-gutter>*{width:calc(100% * 1 / 11 - 1rem - .01px)}[class*=grid-11].has-gutter-l>*{width:calc(100% * 1 / 11 - 2rem - .01px)}[class*=grid-11].has-gutter-xl>*{width:calc(100% * 1 / 11 - 4rem - .01px)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - .01px)}[class*=grid-12].has-gutter>*{width:calc(100% * 1 / 12 - 1rem - .01px)}[class*=grid-12].has-gutter-l>*{width:calc(100% * 1 / 12 - 2rem - .01px)}[class*=grid-12].has-gutter-xl>*{width:calc(100% * 1 / 12 - 4rem - .01px)}}.push{margin-left:auto!important}.pull{margin-right:auto!important}.grid-item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.grid-item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}[class*="--reverse"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}@media (min-width:545px){.full,.one-half{-webkit-box-flex:0}.full{-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% - .01px)}.has-gutter .full{width:calc(100% - 1rem - .01px)}.has-gutter-l .full{width:calc(100% - 2rem - .01px)}.has-gutter-xl .full{width:calc(100% - 4rem - .01px)}.one-half{-ms-flex:0 0 auto;flex:0 0 auto;width:calc(50% - .01px)}.has-gutter .one-half{width:calc(50% - 1rem - .01px)}.has-gutter-l .one-half{width:calc(50% - 2rem - .01px)}.has-gutter-xl .one-half{width:calc(50% - 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)}.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)}.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)}.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:545px) and (max-width:768px){[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)}[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-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-1"]>*{width:calc(100% - .01px)}[class*="-small-1"].has-gutter>*{width:calc(100% - 1rem - .01px)}[class*="-small-1"].has-gutter-l>*{width:calc(100% - 2rem - .01px)}[class*="-small-1"].has-gutter-xl>*{width:calc(100% - 4rem - .01px)}} \ No newline at end of file +@media (min-width:545px){[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{display:-webkit-box;display:-ms-flexbox;display:flex}.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.has-gutter>*+*{margin-left:calc(1rem - .01px)}.grid.has-gutter-l>*+*{margin-left:calc(2rem - .01px)}.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}.grid-item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.grid-item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}[class*="--reverse"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}@media (min-width:545px){.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:545px) and (max-width:768px){[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 diff --git a/css/grillade.scss b/css/grillade.scss index a07e8f0..ac46212 100644 --- a/css/grillade.scss +++ b/css/grillade.scss @@ -12,61 +12,11 @@ $extra-large: 1440px !default; /* ==Grillade : Simple Grid System */ /* ---------------------------------- */ /* Doc : http://grillade.knacss.com */ - -// Grids variables -$grid-gutter: 1rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem -$grid-gutter-l: $grid-gutter * 2; -$grid-gutter-xl: $grid-gutter * 4; - -/* Grids common rules (for mono- and multi-lines grid) */ +// 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: ($tiny + 1)) { - [class*=" grid"], - [class^="grid"] { - & > * { - box-sizing: border-box; - min-width: 0; /* avoid min-width: auto */ - min-height: 0; /* avoid min-height: auto */ - } - - &.has-gutter { - margin-right: -$grid-gutter / 2; - margin-left: -$grid-gutter / 2; - - & > * { - margin-right: $grid-gutter / 2; - margin-left: $grid-gutter / 2; - } - } - - &.has-gutter-l { - margin-right: -$grid-gutter-l / 2; - margin-left: -$grid-gutter-l / 2; - - & > * { - margin-right: $grid-gutter-l / 2; - margin-left: $grid-gutter-l / 2; - } - } - - &.has-gutter-xl { - margin-right: -$grid-gutter-xl / 2; - margin-left: -$grid-gutter-xl / 2; - - & > * { - margin-right: $grid-gutter-xl / 2; - margin-left: $grid-gutter-xl / 2; - } - } - } - /* Mono-line grid system (.grid) */ - .grid { - display: flex; - - & > * { - flex: 1 1 0%; - } - } - /* Multi-line grid system (.grid-X) */ [class*=" grid-"], [class^="grid-"] { display: flex; @@ -74,24 +24,68 @@ $grid-gutter-xl: $grid-gutter * 4; flex-wrap: wrap; & > * { - flex: 0 0 auto; - width: calc(100% - .01px); /* @bugfix IE https://github.com/alsacreations/KNACSS/issues/133; */ - } - - &.has-gutter > * { - width: calc(100% - #{$grid-gutter} - .01px); - } - - &.has-gutter-l > * { - width: calc(100% - #{$grid-gutter-l} - .01px); - } - - &.has-gutter-xl > * { - width: calc(100% - #{$grid-gutter-xl} - .01px); + box-sizing: border-box; + min-width: 0; + min-height: 0; } } } -/* Grid offsets */ +// 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; + + & > * { + width: calc(100% / #{$grid-number} - #{$size} - #{$iefix}); + margin-right: $size / 2; + margin-left: $size / 2; + } + } + } + @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; + } + } +} +// Mono-line grid constructor (.grid) +@media (min-width: ($tiny + 1)) { + .grid { + 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}); + } + } + } +} +// Constructing grids : will be compiled in CSS +@media (min-width: ($tiny + 1)) { + @for $i from 2 through 12{ + [class*="grid-#{$i}"] { + @include grid(#{$i},0); + } + } +} +// Grid offsets .push { margin-left: auto !important; } @@ -111,271 +105,34 @@ $grid-gutter-xl: $grid-gutter * 4; [class*="--reverse"] { flex-direction: row-reverse; } -// Sass mixin for Multi-line grid system -// example : .grid-perso { @include grid(12, 3rem); } -@mixin grid($grid-number:4, $new-gutter:$grid-gutter) { - & > * { - width: calc(100% * 1 / #{$grid-number} - .01px); - } - - &.has-gutter > * { - width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter} - .01px); - } - - &.has-gutter-l > * { - width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter-l} - .01px); - } - - &.has-gutter-xl > * { - width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter-xl} - .01px); - } - @if ($new-gutter != 0) { - @if ($new-gutter != $grid-gutter){ - margin-right: -$new-gutter / 2; - margin-left: -$new-gutter / 2; - - & > * { - margin-right: $new-gutter / 2; - margin-left: $new-gutter / 2; - width: calc(100% * 1 / #{$grid-number} - #{$new-gutter} - .01px); +// sizing individual children +@media (min-width: ($tiny + 1)) { + @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}); } } } } -// Constructing grids : will be compiled in CSS -@media (min-width: ($tiny + 1)) { - @for $i from 2 through 12{ - [class*="grid-#{$i}"] { - @include grid(#{$i},0); - } - } -} -/* Sizing individual children */ -@media (min-width: ($tiny + 1)) { - .full { - flex: 0 0 auto; - width: calc(100% - .01px); - - .has-gutter & { - width: calc(100% - #{$grid-gutter} - .01px); - } - - .has-gutter-l & { - width: calc(100% - #{$grid-gutter-l} - .01px); - } - - .has-gutter-xl & { - width: calc(100% - #{$grid-gutter-xl} - .01px); - } - } - - .one-half { - flex: 0 0 auto; - width: calc(50% - .01px); - - .has-gutter & { - width: calc(50% - #{$grid-gutter} - .01px); - } - - .has-gutter-l & { - width: calc(50% - #{$grid-gutter-l} - .01px); - } - - .has-gutter-xl & { - width: calc(50% - #{$grid-gutter-xl} - .01px); - } - } - - .one-third { - flex: 0 0 auto; - width: calc(100% / 3 - .01px); - - .has-gutter & { - width: calc(100% / 3 - #{$grid-gutter} - .01px); - } - - .has-gutter-l & { - width: calc(100% / 3 - #{$grid-gutter-l} - .01px); - } - - .has-gutter-xl & { - width: calc(100% / 3 - #{$grid-gutter-xl} - .01px); - } - } - - .one-quarter { - flex: 0 0 auto; - width: calc(100% / 4 - .01px); - - .has-gutter & { - width: calc(100% / 4 - #{$grid-gutter} - .01px); - } - - .has-gutter-l & { - width: calc(100% / 4 - #{$grid-gutter-l} - .01px); - } - - .has-gutter-xl & { - width: calc(100% / 4 - #{$grid-gutter-xl} - .01px); - } - } - - .one-fifth { - flex: 0 0 auto; - width: calc(100% / 5 - .01px); - - .has-gutter & { - width: calc(100% / 5 - #{$grid-gutter} - .01px); - } - - .has-gutter-l & { - width: calc(100% / 5 - #{$grid-gutter-l} - .01px); - } - - .has-gutter-xl & { - width: calc(100% / 5 - #{$grid-gutter-xl} - .01px); - } - } - - .two-thirds { - flex: 0 0 auto; - width: calc(100% / 3 * 2 - .01px); - - .has-gutter & { - width: calc(100% / 3 * 2 - #{$grid-gutter} - .01px); - } - - .has-gutter-l & { - width: calc(100% / 3 * 2 - #{$grid-gutter-l} - .01px); - } - - .has-gutter-xl & { - width: calc(100% / 3 * 2 - #{$grid-gutter-xl} - .01px); - } - } - - .three-quarters { - flex: 0 0 auto; - width: calc(100% / 4 * 3 - .01px); - - .has-gutter & { - width: calc(100% / 4 * 3 - #{$grid-gutter} - .01px); - } - - .has-gutter-l & { - width: calc(100% / 4 * 3 - #{$grid-gutter-l} - .01px); - } - - .has-gutter-xl & { - width: calc(100% / 4 * 3 - #{$grid-gutter-xl} - .01px); - } - } - .one-sixth { - flex: 0 0 auto; - width: calc(100% / 6 - .01px); - - .has-gutter & { - width: calc(100% / 6 - #{$grid-gutter} - .01px); - } - - .has-gutter-l & { - width: calc(100% / 6 - #{$grid-gutter-l} - .01px); - } - - .has-gutter-xl & { - width: calc(100% / 6 - #{$grid-gutter-xl} - .01px); - } - } - .five-sixths { - flex: 0 0 auto; - width: calc(100% / 6 * 5 - .01px); - - .has-gutter & { - width: calc(100% / 6 * 5 - #{$grid-gutter} - .01px); - } - - .has-gutter-l & { - width: calc(100% / 6 * 5 - #{$grid-gutter-l} - .01px); - } - - .has-gutter-xl & { - width: calc(100% / 6 * 5 - #{$grid-gutter-xl} - .01px); - } - } -} /* Responsive Small Breakpoint */ // -small-X suffix means "X columns on small screen" // example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until small) then 4 columns @media (min-width: ($tiny + 1)) and (max-width: $small) { - [class*="-small-4"] { - & > * { - width: calc(100% / 4 - .01px); - } - - &.has-gutter > * { - width: calc(100% / 4 - #{$grid-gutter} - .01px); - } - - &.has-gutter-l > * { - width: calc(100% / 4 - #{$grid-gutter-l} - .01px); - } - - &.has-gutter-xl > * { - width: calc(100% / 4 - #{$grid-gutter-xl} - .01px); - } - } - - [class*="-small-3"] { - & > * { - width: calc(100% / 3 - .01px); - } - - &.has-gutter > * { - width: calc(100% / 3 - #{$grid-gutter} - .01px); - } - - &.has-gutter-l > * { - width: calc(100% / 3 - #{$grid-gutter-l} - .01px); - } - - &.has-gutter-xl > * { - width: calc(100% / 3 - #{$grid-gutter-xl} - .01px); - } - } - - [class*="-small-2"] { - & > * { - width: calc(100% / 2 - .01px); - } - - &.has-gutter > * { - width: calc(100% / 2 - #{$grid-gutter} - .01px); - } - - &.has-gutter-l > * { - width: calc(100% / 2 - #{$grid-gutter-l} - .01px); - } - - &.has-gutter-xl > * { - width: calc(100% / 2 - #{$grid-gutter-xl} - .01px); - } - } - - [class*="-small-1"] { - & > * { - width: calc(100% - .01px); - } - - &.has-gutter > * { - width: calc(100% - #{$grid-gutter} - .01px); - } - - &.has-gutter-l > * { - width: calc(100% - #{$grid-gutter-l} - .01px); - } - - &.has-gutter-xl > * { - width: calc(100% - #{$grid-gutter-xl} - .01px); + @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}); + } + } } } } diff --git a/css/knacss-unminified.css b/css/knacss-unminified.css index 592f07b..611e888 100644 --- a/css/knacss-unminified.css +++ b/css/knacss-unminified.css @@ -1,6 +1,6 @@ @charset "UTF-8"; /*! -* www.KNACSS.com V6.0.1 (26 octobre 2016) @author: Alsacreations, Raphael Goetter +* www.KNACSS.com V6.0.2 (27 octobre 2016) @author: Alsacreations, Raphael Goetter * Licence WTFPL http://www.wtfpl.net/ */ /* ----------------------------- */ @@ -1498,49 +1498,7 @@ ul.unstyled { /* ==Grillade : Simple Grid System */ /* ---------------------------------- */ /* Doc : http://grillade.knacss.com */ -/* Grids common rules (for mono- and multi-lines grid) */ @media (min-width: 545px) { - [class*=" grid"] > *, - [class^="grid"] > * { - box-sizing: border-box; - min-width: 0; - /* avoid min-width: auto */ - min-height: 0; - /* avoid min-height: auto */ } - [class*=" grid"].has-gutter, - [class^="grid"].has-gutter { - margin-right: -0.5rem; - margin-left: -0.5rem; } - [class*=" grid"].has-gutter > *, - [class^="grid"].has-gutter > * { - margin-right: 0.5rem; - margin-left: 0.5rem; } - [class*=" grid"].has-gutter-l, - [class^="grid"].has-gutter-l { - margin-right: -1rem; - margin-left: -1rem; } - [class*=" grid"].has-gutter-l > *, - [class^="grid"].has-gutter-l > * { - margin-right: 1rem; - margin-left: 1rem; } - [class*=" grid"].has-gutter-xl, - [class^="grid"].has-gutter-xl { - margin-right: -2rem; - margin-left: -2rem; } - [class*=" grid"].has-gutter-xl > *, - [class^="grid"].has-gutter-xl > * { - margin-right: 2rem; - margin-left: 2rem; } - /* Mono-line grid system (.grid) */ - .grid { - display: -webkit-box; - display: -ms-flexbox; - display: flex; } - .grid > * { - -webkit-box-flex: 1; - -ms-flex: 1 1 0%; - flex: 1 1 0%; } - /* Multi-line grid system (.grid-X) */ [class*=" grid-"], [class^="grid-"] { display: -webkit-box; @@ -1554,22 +1512,284 @@ ul.unstyled { flex-wrap: wrap; } [class*=" grid-"] > *, [class^="grid-"] > * { - -webkit-box-flex: 0; - -ms-flex: 0 0 auto; - flex: 0 0 auto; - width: calc(100% - .01px); - /* @bugfix IE https://github.com/alsacreations/KNACSS/issues/133; */ } - [class*=" grid-"].has-gutter > *, - [class^="grid-"].has-gutter > * { - width: calc(100% - 1rem - .01px); } - [class*=" grid-"].has-gutter-l > *, - [class^="grid-"].has-gutter-l > * { - width: calc(100% - 2rem - .01px); } - [class*=" grid-"].has-gutter-xl > *, - [class^="grid-"].has-gutter-xl > * { - width: calc(100% - 4rem - .01px); } } + box-sizing: border-box; + min-width: 0; + min-height: 0; } } + +@media (min-width: 545px) { + .grid { + display: -webkit-box; + display: -ms-flexbox; + display: flex; } + .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.has-gutter > * + * { + margin-left: calc(1rem - 0.01px); } + .grid.has-gutter-l > * + * { + margin-left: calc(2rem - 0.01px); } + .grid.has-gutter-xl > * + * { + margin-left: calc(4rem - 0.01px); } } + +@media (min-width: 545px) { + [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; } } -/* Grid offsets */ .push { margin-left: auto !important; } @@ -1593,232 +1813,141 @@ ul.unstyled { -ms-flex-direction: row-reverse; flex-direction: row-reverse; } -@media (min-width: 545px) { - [class*="grid-2"] > * { - width: calc(100% * 1 / 2 - .01px); } - [class*="grid-2"].has-gutter > * { - width: calc(100% * 1 / 2 - 1rem - .01px); } - [class*="grid-2"].has-gutter-l > * { - width: calc(100% * 1 / 2 - 2rem - .01px); } - [class*="grid-2"].has-gutter-xl > * { - width: calc(100% * 1 / 2 - 4rem - .01px); } - [class*="grid-3"] > * { - width: calc(100% * 1 / 3 - .01px); } - [class*="grid-3"].has-gutter > * { - width: calc(100% * 1 / 3 - 1rem - .01px); } - [class*="grid-3"].has-gutter-l > * { - width: calc(100% * 1 / 3 - 2rem - .01px); } - [class*="grid-3"].has-gutter-xl > * { - width: calc(100% * 1 / 3 - 4rem - .01px); } - [class*="grid-4"] > * { - width: calc(100% * 1 / 4 - .01px); } - [class*="grid-4"].has-gutter > * { - width: calc(100% * 1 / 4 - 1rem - .01px); } - [class*="grid-4"].has-gutter-l > * { - width: calc(100% * 1 / 4 - 2rem - .01px); } - [class*="grid-4"].has-gutter-xl > * { - width: calc(100% * 1 / 4 - 4rem - .01px); } - [class*="grid-5"] > * { - width: calc(100% * 1 / 5 - .01px); } - [class*="grid-5"].has-gutter > * { - width: calc(100% * 1 / 5 - 1rem - .01px); } - [class*="grid-5"].has-gutter-l > * { - width: calc(100% * 1 / 5 - 2rem - .01px); } - [class*="grid-5"].has-gutter-xl > * { - width: calc(100% * 1 / 5 - 4rem - .01px); } - [class*="grid-6"] > * { - width: calc(100% * 1 / 6 - .01px); } - [class*="grid-6"].has-gutter > * { - width: calc(100% * 1 / 6 - 1rem - .01px); } - [class*="grid-6"].has-gutter-l > * { - width: calc(100% * 1 / 6 - 2rem - .01px); } - [class*="grid-6"].has-gutter-xl > * { - width: calc(100% * 1 / 6 - 4rem - .01px); } - [class*="grid-7"] > * { - width: calc(100% * 1 / 7 - .01px); } - [class*="grid-7"].has-gutter > * { - width: calc(100% * 1 / 7 - 1rem - .01px); } - [class*="grid-7"].has-gutter-l > * { - width: calc(100% * 1 / 7 - 2rem - .01px); } - [class*="grid-7"].has-gutter-xl > * { - width: calc(100% * 1 / 7 - 4rem - .01px); } - [class*="grid-8"] > * { - width: calc(100% * 1 / 8 - .01px); } - [class*="grid-8"].has-gutter > * { - width: calc(100% * 1 / 8 - 1rem - .01px); } - [class*="grid-8"].has-gutter-l > * { - width: calc(100% * 1 / 8 - 2rem - .01px); } - [class*="grid-8"].has-gutter-xl > * { - width: calc(100% * 1 / 8 - 4rem - .01px); } - [class*="grid-9"] > * { - width: calc(100% * 1 / 9 - .01px); } - [class*="grid-9"].has-gutter > * { - width: calc(100% * 1 / 9 - 1rem - .01px); } - [class*="grid-9"].has-gutter-l > * { - width: calc(100% * 1 / 9 - 2rem - .01px); } - [class*="grid-9"].has-gutter-xl > * { - width: calc(100% * 1 / 9 - 4rem - .01px); } - [class*="grid-10"] > * { - width: calc(100% * 1 / 10 - .01px); } - [class*="grid-10"].has-gutter > * { - width: calc(100% * 1 / 10 - 1rem - .01px); } - [class*="grid-10"].has-gutter-l > * { - width: calc(100% * 1 / 10 - 2rem - .01px); } - [class*="grid-10"].has-gutter-xl > * { - width: calc(100% * 1 / 10 - 4rem - .01px); } - [class*="grid-11"] > * { - width: calc(100% * 1 / 11 - .01px); } - [class*="grid-11"].has-gutter > * { - width: calc(100% * 1 / 11 - 1rem - .01px); } - [class*="grid-11"].has-gutter-l > * { - width: calc(100% * 1 / 11 - 2rem - .01px); } - [class*="grid-11"].has-gutter-xl > * { - width: calc(100% * 1 / 11 - 4rem - .01px); } - [class*="grid-12"] > * { - width: calc(100% * 1 / 12 - .01px); } - [class*="grid-12"].has-gutter > * { - width: calc(100% * 1 / 12 - 1rem - .01px); } - [class*="grid-12"].has-gutter-l > * { - width: calc(100% * 1 / 12 - 2rem - .01px); } - [class*="grid-12"].has-gutter-xl > * { - width: calc(100% * 1 / 12 - 4rem - .01px); } } - -/* Sizing individual children */ @media (min-width: 545px) { .full { -webkit-box-flex: 0; -ms-flex: 0 0 auto; flex: 0 0 auto; - width: calc(100% - .01px); } - .has-gutter .full { - width: calc(100% - 1rem - .01px); } - .has-gutter-l .full { - width: calc(100% - 2rem - .01px); } - .has-gutter-xl .full { - width: calc(100% - 4rem - .01px); } + 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(50% - .01px); } - .has-gutter .one-half { - width: calc(50% - 1rem - .01px); } - .has-gutter-l .one-half { - width: calc(50% - 2rem - .01px); } - .has-gutter-xl .one-half { - width: calc(50% - 4rem - .01px); } + 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 - .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); } + 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 - .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); } + 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 - .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); } - .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); } + 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 - .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); } + 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 - .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); } } + 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); } } /* Responsive Small Breakpoint */ @media (min-width: 545px) and (max-width: 768px) { - [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); } - [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-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-1"] > * { - width: calc(100% - .01px); } + width: calc(100% / 1 - 0.01px); } [class*="-small-1"].has-gutter > * { - width: calc(100% - 1rem - .01px); } + width: calc(100% / 1 - 1rem - 0.01px); } [class*="-small-1"].has-gutter-l > * { - width: calc(100% - 2rem - .01px); } + width: calc(100% / 1 - 2rem - 0.01px); } [class*="-small-1"].has-gutter-xl > * { - width: calc(100% - 4rem - .01px); } } + 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); } } /* ----------------------------- */ /* ==Own stylesheet */ diff --git a/css/knacss.css b/css/knacss.css index 9f98975..3ba8762 100644 --- a/css/knacss.css +++ b/css/knacss.css @@ -1,4 +1,4 @@ @charset "UTF-8";/*! -* www.KNACSS.com V6.0.1 (26 octobre 2016) @author: Alsacreations, Raphael Goetter +* www.KNACSS.com V6.0.2 (27 octobre 2016) @author: Alsacreations, Raphael Goetter * Licence WTFPL http://www.wtfpl.net/ -*//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html,legend{box-sizing:border-box}a:active,a:focus,a:hover,body,mark{color:#000}code,mark{padding:2px 4px}button,hr,input{overflow:visible}hr,legend,pre code{padding:0}.table,blockquote,code,img,input,legend,pre,svg,table,td,textarea,video{max-width:100%}.table,table,td,th{vertical-align:top}.clear,hr{clear:both}.txtleft,td,th{text-align:left}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#333}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}h1{margin:.67em 0}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}img{border-style:none;vertical-align:middle;height:auto}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-size:1em}figure{margin:1em 40px}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}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}fieldset{margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;display:table}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]{-webkit-appearance:textfield;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}.h1-like,.h2-like,body,h1,h2{font-family:sans-serif}html{font-size:62.5%;font-size:calc(1em * .625)}*{box-sizing:inherit}body{margin:0;font-size:1.6rem;background-color:#fff;line-height:1.5}ol,ul{padding-left:2em}blockquote,figure{margin-left:0;margin-right:0}.p-like,blockquote,caption,details,dl,figure,label,ol,p,pre,td,textarea,th,ul{margin-top:.75em;margin-bottom:0;line-height:1.5}.h1-like,h1{font-size:3.2rem}.h2-like,h2{font-size:2.8rem}.h3-like,h3{font-size:2.4rem}.h4-like,h4{font-size:2rem}.h5-like,h5{font-size:1.8rem}.h6-like,h6{font-size:1.6rem}.smaller{font-size:.6em}.small{font-size:.8em}.big{font-size:1.2em}.bigger{font-size:1.5em}.biggest{font-size:2em}code,kbd,pre,samp{white-space:pre-line;white-space:pre-wrap;font-family:consolas,courier,monospace;line-height:normal}.italic,address,cite,em,i,var{font-style:italic}.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,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}@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:""}}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;color:inherit;border-radius:0}blockquote{position:relative;padding-left:3em}.skip-links,.skip-links a{position:absolute}blockquote::before{content:"\201C";position:absolute;left:0;top:0;font-family:georgia,serif;font-size:5em;line-height:.9;color:rgba(0,0,0,.3)}blockquote>footer{margin-top:.75em;font-size:.9em;color:rgba(0,0,0,.7)}.btn,button,input,label,select,textarea{font-family:inherit;font-size:inherit}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;display:block;height:1px;margin:1em 0 2em;border:0;color:#ccc;background-color:#ccc}.center,.left{margin-right:auto}.table,table{border:1px solid #ccc;width:100%;table-layout:fixed;border-collapse:collapse;margin-bottom:2rem}caption{padding:1rem;color:#555;font-style:italic}td,th{padding:.3em .8em;border:1px dotted #aaa;min-width:2rem;cursor:default}.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}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){img[src$=".svg"]{width:100%}}.table{display:table}#recaptcha_table,.table-auto{table-layout:auto}.btn{display:inline-block}fieldset,form{border:none}button,input,optgroup,select,textarea{color:#000}label{vertical-align:middle;cursor:pointer}.inbl,textarea{vertical-align:top}legend{border:0;white-space:normal}textarea{min-height:5em;resize:vertical}select{-webkit-appearance:menulist-button}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}::-webkit-input-placeholder{opacity:.54;color:#777}input:-moz-placeholder,textarea:-moz-placeholder{color:#777}.btn:focus,button:focus,input[type=button]:focus{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button.unstyled,input[type=button].unstyled,input[type=reset].unstyled,input[type=submit].unstyled{padding:0;border:none;line-height:1;text-align:left;background:0 0;border-radius:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}button.unstyled:focus,input[type=button].unstyled:focus,input[type=reset].unstyled:focus,input[type=submit].unstyled:focus{box-shadow:none;outline:0}@media (min-width:545px){.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}[class*=" autogrid"],[class^=autogrid]{display:-webkit-box;display:-ms-flexbox;display:flex}[class*=" autogrid"]>*,[class^=autogrid]>*{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.has-gutter>:not(:first-child){margin-left:1rem}[class*="--reverse"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}}.center,.right{margin-left:auto}.bfc,.mod{overflow:hidden}.clearfix::after{content:"";display:table;clear:both;border-collapse:collapse}.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}.flex-container,[class*=flex-container]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-container-h{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.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,.grid-item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.flex-item-medium,.grid-item-medium{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.flex-item-last,.grid-item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.flex-item-center,.grid-item-center{margin:auto}.is-hidden,[hidden]{display:none}.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}.is-disabled,[disabled]{opacity:.5;pointer-events:none;cursor:not-allowed;-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{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:1025px){.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:769px) and (max-width:1200px){.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:545px) and (max-width:768px){.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:544px){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:545px){[class*=" grid"]>*,[class^=grid]>*{box-sizing:border-box;min-width:0;min-height:0}[class*=" grid"].has-gutter,[class^=grid].has-gutter{margin-right:-.5rem;margin-left:-.5rem}[class*=" grid"].has-gutter>*,[class^=grid].has-gutter>*{margin-right:.5rem;margin-left:.5rem}[class*=" grid"].has-gutter-l,[class^=grid].has-gutter-l{margin-right:-1rem;margin-left:-1rem}[class*=" grid"].has-gutter-l>*,[class^=grid].has-gutter-l>*{margin-right:1rem;margin-left:1rem}[class*=" grid"].has-gutter-xl,[class^=grid].has-gutter-xl{margin-right:-2rem;margin-left:-2rem}[class*=" grid"].has-gutter-xl>*,[class^=grid].has-gutter-xl>*{margin-right:2rem;margin-left:2rem}.grid{display:-webkit-box;display:-ms-flexbox;display:flex}.grid>*{-webkit-box-flex:1;-ms-flex:1 1 0%;flex:1 1 0%}[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-]>*{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% - .01px)}[class*=" grid-"].has-gutter>*,[class^=grid-].has-gutter>*{width:calc(100% - 1rem - .01px)}[class*=" grid-"].has-gutter-l>*,[class^=grid-].has-gutter-l>*{width:calc(100% - 2rem - .01px)}[class*=" grid-"].has-gutter-xl>*,[class^=grid-].has-gutter-xl>*{width:calc(100% - 4rem - .01px)}[class*=grid-2]>*{width:calc(100% * 1 / 2 - .01px)}[class*=grid-2].has-gutter>*{width:calc(100% * 1 / 2 - 1rem - .01px)}[class*=grid-2].has-gutter-l>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-2].has-gutter-xl>*{width:calc(100% * 1 / 2 - 4rem - .01px)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - .01px)}[class*=grid-3].has-gutter>*{width:calc(100% * 1 / 3 - 1rem - .01px)}[class*=grid-3].has-gutter-l>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*=grid-3].has-gutter-xl>*{width:calc(100% * 1 / 3 - 4rem - .01px)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - .01px)}[class*=grid-4].has-gutter>*{width:calc(100% * 1 / 4 - 1rem - .01px)}[class*=grid-4].has-gutter-l>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*=grid-4].has-gutter-xl>*{width:calc(100% * 1 / 4 - 4rem - .01px)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - .01px)}[class*=grid-5].has-gutter>*{width:calc(100% * 1 / 5 - 1rem - .01px)}[class*=grid-5].has-gutter-l>*{width:calc(100% * 1 / 5 - 2rem - .01px)}[class*=grid-5].has-gutter-xl>*{width:calc(100% * 1 / 5 - 4rem - .01px)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - .01px)}[class*=grid-6].has-gutter>*{width:calc(100% * 1 / 6 - 1rem - .01px)}[class*=grid-6].has-gutter-l>*{width:calc(100% * 1 / 6 - 2rem - .01px)}[class*=grid-6].has-gutter-xl>*{width:calc(100% * 1 / 6 - 4rem - .01px)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - .01px)}[class*=grid-7].has-gutter>*{width:calc(100% * 1 / 7 - 1rem - .01px)}[class*=grid-7].has-gutter-l>*{width:calc(100% * 1 / 7 - 2rem - .01px)}[class*=grid-7].has-gutter-xl>*{width:calc(100% * 1 / 7 - 4rem - .01px)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - .01px)}[class*=grid-8].has-gutter>*{width:calc(100% * 1 / 8 - 1rem - .01px)}[class*=grid-8].has-gutter-l>*{width:calc(100% * 1 / 8 - 2rem - .01px)}[class*=grid-8].has-gutter-xl>*{width:calc(100% * 1 / 8 - 4rem - .01px)}[class*=grid-9]>*{width:calc(100% * 1 / 9 - .01px)}[class*=grid-9].has-gutter>*{width:calc(100% * 1 / 9 - 1rem - .01px)}[class*=grid-9].has-gutter-l>*{width:calc(100% * 1 / 9 - 2rem - .01px)}[class*=grid-9].has-gutter-xl>*{width:calc(100% * 1 / 9 - 4rem - .01px)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - .01px)}[class*=grid-10].has-gutter>*{width:calc(100% * 1 / 10 - 1rem - .01px)}[class*=grid-10].has-gutter-l>*{width:calc(100% * 1 / 10 - 2rem - .01px)}[class*=grid-10].has-gutter-xl>*{width:calc(100% * 1 / 10 - 4rem - .01px)}[class*=grid-11]>*{width:calc(100% * 1 / 11 - .01px)}[class*=grid-11].has-gutter>*{width:calc(100% * 1 / 11 - 1rem - .01px)}[class*=grid-11].has-gutter-l>*{width:calc(100% * 1 / 11 - 2rem - .01px)}[class*=grid-11].has-gutter-xl>*{width:calc(100% * 1 / 11 - 4rem - .01px)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - .01px)}[class*=grid-12].has-gutter>*{width:calc(100% * 1 / 12 - 1rem - .01px)}[class*=grid-12].has-gutter-l>*{width:calc(100% * 1 / 12 - 2rem - .01px)}[class*=grid-12].has-gutter-xl>*{width:calc(100% * 1 / 12 - 4rem - .01px)}}.push{margin-left:auto!important}.pull{margin-right:auto!important}.grid-item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.grid-item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}[class*="--reverse"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}@media (min-width:545px){.full,.one-half{-webkit-box-flex:0}.full{-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% - .01px)}.has-gutter .full{width:calc(100% - 1rem - .01px)}.has-gutter-l .full{width:calc(100% - 2rem - .01px)}.has-gutter-xl .full{width:calc(100% - 4rem - .01px)}.one-half{-ms-flex:0 0 auto;flex:0 0 auto;width:calc(50% - .01px)}.has-gutter .one-half{width:calc(50% - 1rem - .01px)}.has-gutter-l .one-half{width:calc(50% - 2rem - .01px)}.has-gutter-xl .one-half{width:calc(50% - 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)}.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)}.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)}.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:545px) and (max-width:768px){[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)}[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-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-1"]>*{width:calc(100% - .01px)}[class*="-small-1"].has-gutter>*{width:calc(100% - 1rem - .01px)}[class*="-small-1"].has-gutter-l>*{width:calc(100% - 2rem - .01px)}[class*="-small-1"].has-gutter-xl>*{width:calc(100% - 4rem - .01px)}} \ No newline at end of file +*//*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html,legend{box-sizing:border-box}a:active,a:focus,a:hover,body,mark{color:#000}code,mark{padding:2px 4px}button,hr,input{overflow:visible}hr,legend,pre code{padding:0}.table,blockquote,code,img,input,legend,pre,svg,table,td,textarea,video{max-width:100%}.table,table,td,th{vertical-align:top}.clear,hr{clear:both}.txtleft,td,th{text-align:left}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}audio:not([controls]){display:none;height:0}progress{vertical-align:baseline}[hidden],template{display:none}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#333}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}dfn{font-style:italic}h1{margin:.67em 0}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}img{border-style:none;vertical-align:middle;height:auto}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-size:1em}figure{margin:1em 40px}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}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}fieldset{margin:0 2px;padding:.35em .625em .75em}legend{color:inherit;display:table}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]{-webkit-appearance:textfield;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}.h1-like,.h2-like,body,h1,h2{font-family:sans-serif}html{font-size:62.5%;font-size:calc(1em * .625)}*{box-sizing:inherit}body{margin:0;font-size:1.6rem;background-color:#fff;line-height:1.5}ol,ul{padding-left:2em}blockquote,figure{margin-left:0;margin-right:0}.p-like,blockquote,caption,details,dl,figure,label,ol,p,pre,td,textarea,th,ul{margin-top:.75em;margin-bottom:0;line-height:1.5}.h1-like,h1{font-size:3.2rem}.h2-like,h2{font-size:2.8rem}.h3-like,h3{font-size:2.4rem}.h4-like,h4{font-size:2rem}.h5-like,h5{font-size:1.8rem}.h6-like,h6{font-size:1.6rem}.smaller{font-size:.6em}.small{font-size:.8em}.big{font-size:1.2em}.bigger{font-size:1.5em}.biggest{font-size:2em}code,kbd,pre,samp{white-space:pre-line;white-space:pre-wrap;font-family:consolas,courier,monospace;line-height:normal}.italic,address,cite,em,i,var{font-style:italic}.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,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}@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:""}}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;color:inherit;border-radius:0}blockquote{position:relative;padding-left:3em}.skip-links,.skip-links a{position:absolute}blockquote::before{content:"\201C";position:absolute;left:0;top:0;font-family:georgia,serif;font-size:5em;line-height:.9;color:rgba(0,0,0,.3)}blockquote>footer{margin-top:.75em;font-size:.9em;color:rgba(0,0,0,.7)}.btn,button,input,label,select,textarea{font-family:inherit;font-size:inherit}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;display:block;height:1px;margin:1em 0 2em;border:0;color:#ccc;background-color:#ccc}.center,.left{margin-right:auto}.table,table{border:1px solid #ccc;width:100%;table-layout:fixed;border-collapse:collapse;margin-bottom:2rem}caption{padding:1rem;color:#555;font-style:italic}td,th{padding:.3em .8em;border:1px dotted #aaa;min-width:2rem;cursor:default}.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}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){img[src$=".svg"]{width:100%}}.table{display:table}#recaptcha_table,.table-auto{table-layout:auto}.btn{display:inline-block}fieldset,form{border:none}button,input,optgroup,select,textarea{color:#000}label{vertical-align:middle;cursor:pointer}.inbl,textarea{vertical-align:top}legend{border:0;white-space:normal}textarea{min-height:5em;resize:vertical}select{-webkit-appearance:menulist-button}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration,input[type=search]::-webkit-search-results-button,input[type=search]::-webkit-search-results-decoration{display:none}::-webkit-input-placeholder{opacity:.54;color:#777}input:-moz-placeholder,textarea:-moz-placeholder{color:#777}.btn:focus,button:focus,input[type=button]:focus{-webkit-tap-highlight-color:transparent;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}button.unstyled,input[type=button].unstyled,input[type=reset].unstyled,input[type=submit].unstyled{padding:0;border:none;line-height:1;text-align:left;background:0 0;border-radius:0;box-shadow:none;-webkit-appearance:none;-moz-appearance:none;appearance:none}button.unstyled:focus,input[type=button].unstyled:focus,input[type=reset].unstyled:focus,input[type=submit].unstyled:focus{box-shadow:none;outline:0}@media (min-width:545px){.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}[class*=" autogrid"],[class^=autogrid]{display:-webkit-box;display:-ms-flexbox;display:flex}[class*=" autogrid"]>*,[class^=autogrid]>*{-webkit-box-flex:1;-ms-flex:1;flex:1;min-width:0}.has-gutter>:not(:first-child){margin-left:1rem}[class*="--reverse"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}}.center,.right{margin-left:auto}.bfc,.mod{overflow:hidden}.clearfix::after{content:"";display:table;clear:both;border-collapse:collapse}.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}.flex-container,[class*=flex-container]{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap}.flex-container-h{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.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,.grid-item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.flex-item-medium,.grid-item-medium{-webkit-box-ordinal-group:1;-ms-flex-order:0;order:0}.flex-item-last,.grid-item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.flex-item-center,.grid-item-center{margin:auto}.is-hidden,[hidden]{display:none}.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}.is-disabled,[disabled]{opacity:.5;pointer-events:none;cursor:not-allowed;-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{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:1025px){.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:769px) and (max-width:1200px){.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:545px) and (max-width:768px){.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:544px){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:545px){[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{display:-webkit-box;display:-ms-flexbox;display:flex}.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.has-gutter>*+*{margin-left:calc(1rem - .01px)}.grid.has-gutter-l>*+*{margin-left:calc(2rem - .01px)}.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}.grid-item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.grid-item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}[class*="--reverse"]{-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}@media (min-width:545px){.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:545px) and (max-width:768px){[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 diff --git a/package.json b/package.json index 3e191cd..3b8d011 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "knacss", - "version": "6.0.1", + "version": "6.0.2", "homepage": "http://www.knacss.com/", "bugs": "https://github.com/alsacreations/KNACSS/issues", "author": [ diff --git a/sass/grids/_grillade.scss b/sass/grids/_grillade.scss index 05afa15..9796bd7 100644 --- a/sass/grids/_grillade.scss +++ b/sass/grids/_grillade.scss @@ -2,61 +2,11 @@ /* ==Grillade : Simple Grid System */ /* ---------------------------------- */ /* Doc : http://grillade.knacss.com */ - -// Grids variables -$grid-gutter: 1rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem -$grid-gutter-l: $grid-gutter * 2; -$grid-gutter-xl: $grid-gutter * 4; - -/* Grids common rules (for mono- and multi-lines grid) */ +// 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: ($tiny + 1)) { - [class*=" grid"], - [class^="grid"] { - & > * { - box-sizing: border-box; - min-width: 0; /* avoid min-width: auto */ - min-height: 0; /* avoid min-height: auto */ - } - - &.has-gutter { - margin-right: -$grid-gutter / 2; - margin-left: -$grid-gutter / 2; - - & > * { - margin-right: $grid-gutter / 2; - margin-left: $grid-gutter / 2; - } - } - - &.has-gutter-l { - margin-right: -$grid-gutter-l / 2; - margin-left: -$grid-gutter-l / 2; - - & > * { - margin-right: $grid-gutter-l / 2; - margin-left: $grid-gutter-l / 2; - } - } - - &.has-gutter-xl { - margin-right: -$grid-gutter-xl / 2; - margin-left: -$grid-gutter-xl / 2; - - & > * { - margin-right: $grid-gutter-xl / 2; - margin-left: $grid-gutter-xl / 2; - } - } - } - /* Mono-line grid system (.grid) */ - .grid { - display: flex; - - & > * { - flex: 1 1 0%; - } - } - /* Multi-line grid system (.grid-X) */ [class*=" grid-"], [class^="grid-"] { display: flex; @@ -64,24 +14,68 @@ $grid-gutter-xl: $grid-gutter * 4; flex-wrap: wrap; & > * { - flex: 0 0 auto; - width: calc(100% - .01px); /* @bugfix IE https://github.com/alsacreations/KNACSS/issues/133; */ - } - - &.has-gutter > * { - width: calc(100% - #{$grid-gutter} - .01px); - } - - &.has-gutter-l > * { - width: calc(100% - #{$grid-gutter-l} - .01px); - } - - &.has-gutter-xl > * { - width: calc(100% - #{$grid-gutter-xl} - .01px); + box-sizing: border-box; + min-width: 0; + min-height: 0; } } } -/* Grid offsets */ +// 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; + + & > * { + width: calc(100% / #{$grid-number} - #{$size} - #{$iefix}); + margin-right: $size / 2; + margin-left: $size / 2; + } + } + } + @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; + } + } +} +// Mono-line grid constructor (.grid) +@media (min-width: ($tiny + 1)) { + .grid { + 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}); + } + } + } +} +// Constructing grids : will be compiled in CSS +@media (min-width: ($tiny + 1)) { + @for $i from 2 through 12{ + [class*="grid-#{$i}"] { + @include grid(#{$i},0); + } + } +} +// Grid offsets .push { margin-left: auto !important; } @@ -101,271 +95,34 @@ $grid-gutter-xl: $grid-gutter * 4; [class*="--reverse"] { flex-direction: row-reverse; } -// Sass mixin for Multi-line grid system -// example : .grid-perso { @include grid(12, 3rem); } -@mixin grid($grid-number:4, $new-gutter:$grid-gutter) { - & > * { - width: calc(100% * 1 / #{$grid-number} - .01px); - } - - &.has-gutter > * { - width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter} - .01px); - } - - &.has-gutter-l > * { - width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter-l} - .01px); - } - - &.has-gutter-xl > * { - width: calc(100% * 1 / #{$grid-number} - #{$grid-gutter-xl} - .01px); - } - @if ($new-gutter != 0) { - @if ($new-gutter != $grid-gutter){ - margin-right: -$new-gutter / 2; - margin-left: -$new-gutter / 2; - - & > * { - margin-right: $new-gutter / 2; - margin-left: $new-gutter / 2; - width: calc(100% * 1 / #{$grid-number} - #{$new-gutter} - .01px); +// sizing individual children +@media (min-width: ($tiny + 1)) { + @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}); } } } } -// Constructing grids : will be compiled in CSS -@media (min-width: ($tiny + 1)) { - @for $i from 2 through 12{ - [class*="grid-#{$i}"] { - @include grid(#{$i},0); - } - } -} -/* Sizing individual children */ -@media (min-width: ($tiny + 1)) { - .full { - flex: 0 0 auto; - width: calc(100% - .01px); - - .has-gutter & { - width: calc(100% - #{$grid-gutter} - .01px); - } - - .has-gutter-l & { - width: calc(100% - #{$grid-gutter-l} - .01px); - } - - .has-gutter-xl & { - width: calc(100% - #{$grid-gutter-xl} - .01px); - } - } - - .one-half { - flex: 0 0 auto; - width: calc(50% - .01px); - - .has-gutter & { - width: calc(50% - #{$grid-gutter} - .01px); - } - - .has-gutter-l & { - width: calc(50% - #{$grid-gutter-l} - .01px); - } - - .has-gutter-xl & { - width: calc(50% - #{$grid-gutter-xl} - .01px); - } - } - - .one-third { - flex: 0 0 auto; - width: calc(100% / 3 - .01px); - - .has-gutter & { - width: calc(100% / 3 - #{$grid-gutter} - .01px); - } - - .has-gutter-l & { - width: calc(100% / 3 - #{$grid-gutter-l} - .01px); - } - - .has-gutter-xl & { - width: calc(100% / 3 - #{$grid-gutter-xl} - .01px); - } - } - - .one-quarter { - flex: 0 0 auto; - width: calc(100% / 4 - .01px); - - .has-gutter & { - width: calc(100% / 4 - #{$grid-gutter} - .01px); - } - - .has-gutter-l & { - width: calc(100% / 4 - #{$grid-gutter-l} - .01px); - } - - .has-gutter-xl & { - width: calc(100% / 4 - #{$grid-gutter-xl} - .01px); - } - } - - .one-fifth { - flex: 0 0 auto; - width: calc(100% / 5 - .01px); - - .has-gutter & { - width: calc(100% / 5 - #{$grid-gutter} - .01px); - } - - .has-gutter-l & { - width: calc(100% / 5 - #{$grid-gutter-l} - .01px); - } - - .has-gutter-xl & { - width: calc(100% / 5 - #{$grid-gutter-xl} - .01px); - } - } - - .two-thirds { - flex: 0 0 auto; - width: calc(100% / 3 * 2 - .01px); - - .has-gutter & { - width: calc(100% / 3 * 2 - #{$grid-gutter} - .01px); - } - - .has-gutter-l & { - width: calc(100% / 3 * 2 - #{$grid-gutter-l} - .01px); - } - - .has-gutter-xl & { - width: calc(100% / 3 * 2 - #{$grid-gutter-xl} - .01px); - } - } - - .three-quarters { - flex: 0 0 auto; - width: calc(100% / 4 * 3 - .01px); - - .has-gutter & { - width: calc(100% / 4 * 3 - #{$grid-gutter} - .01px); - } - - .has-gutter-l & { - width: calc(100% / 4 * 3 - #{$grid-gutter-l} - .01px); - } - - .has-gutter-xl & { - width: calc(100% / 4 * 3 - #{$grid-gutter-xl} - .01px); - } - } - .one-sixth { - flex: 0 0 auto; - width: calc(100% / 6 - .01px); - - .has-gutter & { - width: calc(100% / 6 - #{$grid-gutter} - .01px); - } - - .has-gutter-l & { - width: calc(100% / 6 - #{$grid-gutter-l} - .01px); - } - - .has-gutter-xl & { - width: calc(100% / 6 - #{$grid-gutter-xl} - .01px); - } - } - .five-sixths { - flex: 0 0 auto; - width: calc(100% / 6 * 5 - .01px); - - .has-gutter & { - width: calc(100% / 6 * 5 - #{$grid-gutter} - .01px); - } - - .has-gutter-l & { - width: calc(100% / 6 * 5 - #{$grid-gutter-l} - .01px); - } - - .has-gutter-xl & { - width: calc(100% / 6 * 5 - #{$grid-gutter-xl} - .01px); - } - } -} /* Responsive Small Breakpoint */ // -small-X suffix means "X columns on small screen" // example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until small) then 4 columns @media (min-width: ($tiny + 1)) and (max-width: $small) { - [class*="-small-4"] { - & > * { - width: calc(100% / 4 - .01px); - } - - &.has-gutter > * { - width: calc(100% / 4 - #{$grid-gutter} - .01px); - } - - &.has-gutter-l > * { - width: calc(100% / 4 - #{$grid-gutter-l} - .01px); - } - - &.has-gutter-xl > * { - width: calc(100% / 4 - #{$grid-gutter-xl} - .01px); - } - } - - [class*="-small-3"] { - & > * { - width: calc(100% / 3 - .01px); - } - - &.has-gutter > * { - width: calc(100% / 3 - #{$grid-gutter} - .01px); - } - - &.has-gutter-l > * { - width: calc(100% / 3 - #{$grid-gutter-l} - .01px); - } - - &.has-gutter-xl > * { - width: calc(100% / 3 - #{$grid-gutter-xl} - .01px); - } - } - - [class*="-small-2"] { - & > * { - width: calc(100% / 2 - .01px); - } - - &.has-gutter > * { - width: calc(100% / 2 - #{$grid-gutter} - .01px); - } - - &.has-gutter-l > * { - width: calc(100% / 2 - #{$grid-gutter-l} - .01px); - } - - &.has-gutter-xl > * { - width: calc(100% / 2 - #{$grid-gutter-xl} - .01px); - } - } - - [class*="-small-1"] { - & > * { - width: calc(100% - .01px); - } - - &.has-gutter > * { - width: calc(100% - #{$grid-gutter} - .01px); - } - - &.has-gutter-l > * { - width: calc(100% - #{$grid-gutter-l} - .01px); - } - - &.has-gutter-xl > * { - width: calc(100% - #{$grid-gutter-xl} - .01px); + @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}); + } + } } } } diff --git a/sass/knacss.scss b/sass/knacss.scss index 42fc3f6..03949ba 100644 --- a/sass/knacss.scss +++ b/sass/knacss.scss @@ -1,5 +1,5 @@ /*! -* www.KNACSS.com V6.0.1 (26 octobre 2016) @author: Alsacreations, Raphael Goetter +* www.KNACSS.com V6.0.2 (27 octobre 2016) @author: Alsacreations, Raphael Goetter * Licence WTFPL http://www.wtfpl.net/ */