From 48b375bc4dd35e3a51bdeeb7de0fdb7d02bca0e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn?= Date: Mon, 1 Jun 2020 18:26:42 +0200 Subject: [PATCH] adding --- dist/crispy-all.css | 2 +- dist/crispy-minimal.css | 2 +- dist/{examples => example}/components.html | 37 ++-- dist/example/core.html | 1 + dist/example/functions.html | 4 + dist/example/getting-started.html | 126 ++++++++++++ dist/example/helpers.html | 1 + .../img/gaming-circus.jpg | Bin .../img/tentakelfabrik.jpg | Bin dist/{examples => example}/img/trinkkofi.jpg | Bin dist/example/imprint.html | 1 + dist/example/index.html | 1 + dist/{examples => example}/mixins.html | 2 +- dist/example/privacy-policy.html | 1 + dist/example/styles.css | 1 + dist/{examples => example}/symbol-defs.svg | 0 dist/examples/core.html | 1 - dist/examples/functions.html | 4 - dist/examples/getstarted.html | 16 -- dist/examples/getting-started.html | 16 -- dist/examples/helpers.html | 1 - dist/examples/imprint.html | 1 - dist/examples/index.html | 1 - dist/examples/privacy-policy.html | 1 - dist/examples/styles.css | 1 - mix-manifest.json | 4 +- package.json | 2 +- src/_core.scss | 2 +- src/_helpers.scss | 2 +- src/_mixins.scss | 27 ++- src/_variables.scss | 42 ++-- src/components/_button.scss | 8 +- src/components/_code.scss | 8 +- src/components/_field.scss | 60 ++++-- src/components/_group.scss | 2 +- src/components/_hero.scss | 2 +- src/components/_panel.scss | 4 +- src/core/_heading.scss | 6 + src/core/_normalize.scss | 19 +- src/core/_typography.scss | 3 + src/example/components/_triangle.scss | 31 +++ src/{examples => example}/site/_header.scss | 0 src/example/styles.scss | 15 ++ .../templates/_home.scss | 0 src/examples/components/_nav.scss | 16 -- src/examples/styles.scss | 63 ------ src/html/index.html.ejs | 8 +- src/html/page.html.ejs | 4 +- src/html/partials/components.html | 41 ++-- src/html/partials/core.html | 104 +++++----- src/html/partials/getting-started.html | 181 ++++++++++++++++-- webpack.mix.js | 22 +-- 52 files changed, 572 insertions(+), 325 deletions(-) rename dist/{examples => example}/components.html (89%) create mode 100644 dist/example/core.html create mode 100644 dist/example/functions.html create mode 100644 dist/example/getting-started.html create mode 100644 dist/example/helpers.html rename dist/{examples => example}/img/gaming-circus.jpg (100%) rename dist/{examples => example}/img/tentakelfabrik.jpg (100%) rename dist/{examples => example}/img/trinkkofi.jpg (100%) create mode 100644 dist/example/imprint.html create mode 100644 dist/example/index.html rename dist/{examples => example}/mixins.html (66%) create mode 100644 dist/example/privacy-policy.html create mode 100644 dist/example/styles.css rename dist/{examples => example}/symbol-defs.svg (100%) delete mode 100644 dist/examples/core.html delete mode 100644 dist/examples/functions.html delete mode 100644 dist/examples/getstarted.html delete mode 100644 dist/examples/getting-started.html delete mode 100644 dist/examples/helpers.html delete mode 100644 dist/examples/imprint.html delete mode 100644 dist/examples/index.html delete mode 100644 dist/examples/privacy-policy.html delete mode 100644 dist/examples/styles.css create mode 100644 src/example/components/_triangle.scss rename src/{examples => example}/site/_header.scss (100%) create mode 100644 src/example/styles.scss rename src/{examples => example}/templates/_home.scss (100%) delete mode 100644 src/examples/components/_nav.scss delete mode 100644 src/examples/styles.scss diff --git a/dist/crispy-all.css b/dist/crispy-all.css index aca127f..813cd40 100644 --- a/dist/crispy-all.css +++ b/dist/crispy-all.css @@ -1 +1 @@ -html{font-size:100%;line-height:1.15;-webkit-text-size-adjust:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}main{display:block}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}figure{margin:0 0 1rem}figcaption{margin:.3em 0 0}button,input,optgroup,select,textarea{margin:0}button,input,label,optgroup,select,textarea{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:.9rem;line-height:1.4}@media only screen and (min-width:992px){button,input,label,optgroup,select,textarea{font-size:1rem;line-height:1.618}}fieldset{padding:.3em .45em}button,select{text-transform:none}[type=button],[type=reset],[type=submit],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:1px dotted ButtonText}legend{box-sizing:border-box;display:table;max-width:100%;padding:0;white-space:normal}[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-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}hr{box-sizing:content-box;height:0;overflow:visible;border:0;border-top:1px solid #b3b2af;margin:.3em 0}progress{vertical-align:baseline}details{display:block}summary{display:list-item}code,kbd,pre,samp{font-family:Lucida Console,Monaco,monospace;font-size:1rem}@media only screen and (min-width:992px){code,kbd,pre,samp{font-size:1.1rem}}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:700;line-height:1.2;margin:0 0 .3em}h5,h6{line-height:1.4}.h1,h1{font-size:2.25rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.82rem}}.h2,h2{font-size:1.8rem}@media only screen and (min-width:992px){.h2,h2{font-size:2.28rem}}.h3,h3{font-size:1.575rem}@media only screen and (min-width:992px){.h3,h3{font-size:2.01rem}}.h4,h4{font-size:1.35rem}@media only screen and (min-width:992px){.h4,h4{font-size:1.74rem}}.h5,h5{font-size:1.125rem}@media only screen and (min-width:992px){.h5,h5{font-size:1.47rem}}.h6,h6{font-size:.9rem}@media only screen and (min-width:992px){.h6,h6{font-size:1.2rem}}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:70%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.25em}blockquote{border-left:1px solid #dfdfdf;margin-left:0;padding:.3em .45em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 1rem}ol,ul{margin-left:1.5em}ol ol,ul ul{margin-top:0;margin-left:1em}ol{list-style:decimal outside}ul{list-style:disc outside}dl{margin-left:.5em}dd,dt{margin:0}dt{font-weight:700}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}body{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;color:#363636;background-color:#fff;direction:ltr;font-size:.9rem;line-height:1.4}@media only screen and (min-width:992px){body{line-height:1.618;font-size:1rem}}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalize{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-light{font-weight:lighter!important}.text-normal{font-weight:400!important}.text-medium{font-weight:medium!important}.text-bold{font-weight:bolder!important}.text-size-default{font-size:.9rem!important}@media only screen and (min-width:992px){.text-size-default{font-size:1rem}}.text-size-small{font-size:.675rem!important}@media only screen and (min-width:992px){.text-size-small{font-size:.775rem}}.text-size-medium{font-size:1.125rem!important}@media only screen and (min-width:992px){.text-size-medium{font-size:1.225rem}}.text-size-large{font-size:1.35rem!important}@media only screen and (min-width:992px){.text-size-large{font-size:1.45rem}}.text-size-big{font-size:1.575rem!important}@media only screen and (min-width:992px){.text-size-big{font-size:1.675rem}}.text-size-mega{font-size:1.8rem!important}@media only screen and (min-width:992px){.text-size-mega{font-size:1.9rem}}.float-left{float:left}.float-right{float:right}.float-none{float:none}.centered{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.text-color-primary{color:#f18f01!important}.text-color-secondary{color:#b3b2af!important}.text-color-success{color:#5cb85c!important}.text-color-warning{color:#f0ad4e!important}.text-color-danger{color:#d9534f!important}.text-color-info{color:#0090d4!important}.text-color-grey{color:#7a7a7a!important}.text-color-grey-light{color:#f7f7f7!important}.text-color-grey-dark{color:#4a4a4a!important}.text-color-white{color:#fff!important}.border-color-primary{border-color:#f18f01!important}.border-color-secondary{border-color:#b3b2af!important}.border-color-success{border-color:#5cb85c!important}.border-color-warning{border-color:#f0ad4e!important}.border-color-danger{border-color:#d9534f!important}.border-color-info{border-color:#0090d4!important}.border-color-grey{border-color:#7a7a7a!important}.border-color-grey-light{border-color:#f7f7f7!important}.border-color-grey-dark{border-color:#4a4a4a!important}.border-color-white{border-color:#fff!important}.background-color-primary{background-color:#f18f01!important}.background-color-secondary{background-color:#b3b2af!important}.background-color-success{background-color:#5cb85c!important}.background-color-warning{background-color:#f0ad4e!important}.background-color-danger{background-color:#d9534f!important}.background-color-info{background-color:#0090d4!important}.background-color-grey{background-color:#7a7a7a!important}.background-color-grey-light{background-color:#f7f7f7!important}.background-color-grey-dark{background-color:#4a4a4a!important}.background-color-white{background-color:#fff!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hide{display:none!important}@media only screen and (min-width:576px){.hide-xs{display:none!important}}@media only screen and (min-width:768px){.hide-sm{display:none!important}}@media only screen and (min-width:992px){.hide-md{display:none!important}}@media only screen and (min-width:1200px){.hide-lg{display:none!important}}@media only screen and (min-width:1600px){.hide-xlg{display:none!important}}.show{display:block!important}.show--inline{display:inline!important}.show--inline-block{display:inline-block!important}@media only screen and (min-width:576px){.show-xs{display:block!important}.show-xs--inline{display:inline!important}.show-xs--inline-block{display:inline-block!important}}@media only screen and (min-width:768px){.show-sm{display:block!important}.show-sm--inline{display:inline!important}.show-sm--inline-block{display:inline-block!important}}@media only screen and (min-width:992px){.show-md{display:block!important}.show-md--inline{display:inline!important}.show-md--inline-block{display:inline-block!important}}@media only screen and (min-width:1200px){.show-lg{display:block!important}.show-lg--inline{display:inline!important}.show-lg--inline-block{display:inline-block!important}}@media only screen and (min-width:1600px){.show-xlg{display:block!important}.show-xlg--inline{display:inline!important}.show-xlg--inline-block{display:inline-block!important}}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:3px!important}.round{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-top-0{margin-top:0!important}.margin-bottom-0{margin-bottom:0!important}.padding-top-0{padding-top:0!important}.padding-bottom-0{padding-bottom:0!important}.margin-left-0{margin-left:0!important}.margin-right-0{margin-right:0!important}.padding-left-0{padding-left:0!important}.padding-right-0{padding-right:0!important}.margin-top-1{margin-top:4px!important}@media only screen and (min-width:992px){.margin-top-1{margin-top:6px!important}}.margin-bottom-1{margin-bottom:4px!important}@media only screen and (min-width:992px){.margin-bottom-1{margin-bottom:6px!important}}.padding-top-1{padding-top:8px!important}@media only screen and (min-width:992px){.padding-top-1{padding-top:6px!important}}.padding-bottom-1{padding-bottom:8px!important}@media only screen and (min-width:992px){.padding-bottom-1{padding-bottom:6px!important}}.margin-left-1{margin-left:8px!important}@media only screen and (min-width:992px){.margin-left-1{margin-left:6px!important}}.margin-right-1{margin-right:8px!important}@media only screen and (min-width:992px){.margin-right-1{margin-right:6px!important}}.padding-left-1{padding-left:8px!important}@media only screen and (min-width:992px){.padding-left-1{padding-left:6px!important}}.padding-right-1{padding-right:8px!important}@media only screen and (min-width:992px){.padding-right-1{padding-right:6px!important}}.margin-top-2{margin-top:16px!important}@media only screen and (min-width:992px){.margin-top-2{margin-top:24px!important}}.margin-bottom-2{margin-bottom:16px!important}@media only screen and (min-width:992px){.margin-bottom-2{margin-bottom:24px!important}}.padding-top-2{padding-top:16px!important}@media only screen and (min-width:992px){.padding-top-2{padding-top:24px!important}}.padding-bottom-2{padding-bottom:16px!important}@media only screen and (min-width:992px){.padding-bottom-2{padding-bottom:24px!important}}.margin-left-2{margin-left:16px!important}@media only screen and (min-width:992px){.margin-left-2{margin-left:24px!important}}.margin-right-2{margin-right:16px!important}@media only screen and (min-width:992px){.margin-right-2{margin-right:24px!important}}.padding-left-2{padding-left:16px!important}@media only screen and (min-width:992px){.padding-left-2{padding-left:24px!important}}.padding-right-2{padding-right:16px!important}@media only screen and (min-width:992px){.padding-right-2{padding-right:24px!important}}.margin-top-3{margin-top:36px!important}@media only screen and (min-width:992px){.margin-top-3{margin-top:54px!important}}.margin-bottom-3{margin-bottom:36px!important}@media only screen and (min-width:992px){.margin-bottom-3{margin-bottom:54px!important}}.padding-top-3{padding-top:24px!important}@media only screen and (min-width:992px){.padding-top-3{padding-top:54px!important}}.padding-bottom-3{padding-bottom:24px!important}@media only screen and (min-width:992px){.padding-bottom-3{padding-bottom:54px!important}}.margin-top-4{margin-top:64px!important}@media only screen and (min-width:992px){.margin-top-4{margin-top:96px!important}}.margin-bottom-4{margin-bottom:64px!important}@media only screen and (min-width:992px){.margin-bottom-4{margin-bottom:96px!important}}.padding-top-4{padding-top:32px!important}@media only screen and (min-width:992px){.padding-top-4{padding-top:96px!important}}.padding-bottom-4{padding-bottom:32px!important}@media only screen and (min-width:992px){.padding-bottom-4{padding-bottom:96px!important}}.margin-top-5{margin-top:100px!important}@media only screen and (min-width:992px){.margin-top-5{margin-top:150px!important}}.margin-bottom-5{margin-bottom:100px!important}@media only screen and (min-width:992px){.margin-bottom-5{margin-bottom:150px!important}}.padding-top-5{padding-top:40px!important}@media only screen and (min-width:992px){.padding-top-5{padding-top:150px!important}}.padding-bottom-5{padding-bottom:40px!important}@media only screen and (min-width:992px){.padding-bottom-5{padding-bottom:150px!important}}.margin-top-6{margin-top:144px!important}@media only screen and (min-width:992px){.margin-top-6{margin-top:216px!important}}.margin-bottom-6{margin-bottom:144px!important}@media only screen and (min-width:992px){.margin-bottom-6{margin-bottom:216px!important}}.padding-top-6{padding-top:48px!important}@media only screen and (min-width:992px){.padding-top-6{padding-top:216px!important}}.padding-bottom-6{padding-bottom:48px!important}@media only screen and (min-width:992px){.padding-bottom-6{padding-bottom:216px!important}}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;display:inline-block;text-decoration:none;font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:.9rem;margin:0 0 1rem;padding:.3em .8em}@media only screen and (min-width:992px){.button{font-size:1rem;padding:.4em 1.2em}}.button:hover{cursor:pointer;text-decoration:none}.button:focus{outline:none}.code{white-space:pre;display:block;overflow-y:hidden;overflow-x:auto;border:1px solid #dfdfdf;background-color:#f7f7f7;margin:0 0 1rem;padding:.3em .45em}@media only screen and (min-width:992px){.code{padding:.6em .9em}}.progress{border:1px solid #dfdfdf}.progress__inner{height:30px;background-color:#f18f01}.field{margin:0 0 1rem}.field__label,.field__select,.field__text{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:.9rem}@media only screen and (min-width:992px){.field__label,.field__select,.field__text{font-size:1rem}}.field__select,.field__text{display:block;width:100%;padding:.4em .6em;color:#363636;-webkit-appearance:none;-moz-appearance:none;appearance:none}.field__label{display:inline-block;width:100%}.field--valid .field__label{color:#5cb85c}.field--error .field__label{color:#d9534f}.field__text{margin:0;border:1px solid #dfdfdf}.field__text:focus{border-color:#f18f01}.field--valid .field__select,.field--valid .field__text{border-color:#5cb85c}.field--error .field__select,.field--error .field__text{border-color:#d9534f}.field__select{padding:.3em .5em;border:1px solid #dfdfdf;background-color:#fff}.field__select:focus{outline:0;border-color:#f18f01}.field__choice{position:relative;display:none}.field__choice+.field__label .field__choice__checked{display:none}.field__choice+.field__label:hover{cursor:pointer}.field__choice:checked+.field__label .field__choice__checked{display:inline-block}.field__choice:checked+.field__label .field__choice__unchecked{display:none}.field__choice__checked{fill:#5cb85c}.field__choice__unchecked{fill:#d9534f}.field__choice+.field__label+.field__panel{margin:.3em 0 0}.field--valid .field__choice__checked,.field--valid .field__choice__unchecked{fill:#5cb85c}.field--error .field__choice__checked,.field--error .field__choice__unchecked{fill:#d9534f}.field__panel{padding:.3em .6em}.field--valid .field__panel{color:#fff;background-color:#5cb85c}.field--error .field__panel{color:#fff;background-color:#d9534f}.group{list-style:none;display:inline-block}.group,.group li{margin:0;padding:0}.group .group__item{display:inline-block;margin:0 .3em 0 0}.group--hr .group__item,.group .group__item:last-child:after{margin:0}.group--hr .group__item:after{margin:0 .3em;content:"/"}.group--hr .group__item:last-child:after{display:none}.hero{background-position:50%;background-repeat:no-repeat;background-size:cover;position:relative}.hero--top{background-position:top}.hero--bottom{background-position:bottom}.hero--contain{background-size:contain}.icon{width:1.15em;height:1.15em;max-height:100%;max-width:100%;vertical-align:middle;overflow:hidden;line-height:1.4}.icon-color-primary{fill:#f18f01!important}.icon-color-secondary{fill:#b3b2af!important}.icon-color-success{fill:#5cb85c!important}.icon-color-warning{fill:#f0ad4e!important}.icon-color-danger{fill:#d9534f!important}.icon-color-info{fill:#0090d4!important}.icon-color-grey{fill:#7a7a7a!important}.icon-color-grey-light{fill:#f7f7f7!important}.icon-color-grey-dark{fill:#4a4a4a!important}.icon-color-white{fill:#fff!important}.img-responsive{display:block;max-width:100%;height:auto}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.modal{position:absolute;z-index:100;width:100%;margin:0;top:50%;left:50%;transform:translate(-50%,-50%)}@media only screen and (min-width:992px){.modal{max-width:50%}}.modal--fixed{position:fixed}.modal--bottom-left,.modal--center-left,.modal--top-left{left:0}.modal--bottom-right,.modal--center-right,.modal--top-right{right:0;left:unset}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right,.modal--center-left,.modal--center-right,.modal--top-center,.modal--top-left,.modal--top-right{transform:translate(0)}@media only screen and (min-width:992px){.modal--bottom-center,.modal--bottom-left,.modal--bottom-right,.modal--center-left,.modal--center-right,.modal--top-center,.modal--top-left,.modal--top-right{margin:.75em}}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right{bottom:0;top:unset}.modal--center-left,.modal--center-right{transform:translateY(-50%);margin-top:0;margin-bottom:0}.modal--bottom-center,.modal--top-center{transform:translate(-50%)}.modal--top-center,.modal--top-left,.modal--top-right{top:0}.overlay{position:fixed;top:0;left:0;z-index:90;width:100%;height:100%;background-color:#000}.panel{background-color:#f7f7f7}.panel__inner{padding:.3em .45em}@media only screen and (min-width:992px){.panel__inner{padding:.6em .9em}}.table{width:100%}.table--striped tr:nth-child(2n){background-color:#f7f7f7}.table--scroll{overflow-x:auto}.table td{color:#363636}.table td,.table th{text-align:left;border-bottom:1px solid #dfdfdf;padding:.3em .45em}@media only screen and (min-width:992px){.table td,.table th{padding:.6em .9em}}.table th{border-bottom-width:2px} \ No newline at end of file +html{font-size:100%;line-height:1.15;-webkit-text-size-adjust:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}main{display:block}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}figure{margin:0 0 15px}@media only screen and (min-width:992px){figure{margin:0 0 20px}}figcaption{margin:10px 0}button,input,optgroup,select,textarea{margin:0}fieldset{padding:.4em .6em}button,select{text-transform:none}[type=button],[type=reset],[type=submit],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:1px dotted ButtonText}legend{box-sizing:border-box;display:table;max-width:100%;padding:0;white-space:normal}[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-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}hr{box-sizing:content-box;height:0;overflow:visible;border:0;border-top:1px solid #b3b2af;margin:.3em 0}progress{vertical-align:baseline}details{display:block}summary{display:list-item}code,kbd,pre,samp{font-family:Lucida Console,Monaco,monospace;font-size:1rem}@media only screen and (min-width:992px){code,kbd,pre,samp{font-size:1.1rem}}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;line-height:1.2;margin:0 0 15px}@media only screen and (min-width:992px){.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin:0 0 20px}}h5,h6{line-height:1.4}.h1,h1{font-size:2.25rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.82rem!important}}.h2,h2{font-size:1.8rem}@media only screen and (min-width:992px){.h2,h2{font-size:2.28rem!important}}.h3,h3{font-size:1.575rem}@media only screen and (min-width:992px){.h3,h3{font-size:2.01rem!important}}.h4,h4{font-size:1.35rem}@media only screen and (min-width:992px){.h4,h4{font-size:1.74rem!important}}.h5,h5{font-size:1.125rem}@media only screen and (min-width:992px){.h5,h5{font-size:1.47rem!important}}.h6,h6{font-size:.9rem}@media only screen and (min-width:992px){.h6,h6{font-size:1.2rem!important}}p{margin:0 0 15px}@media only screen and (min-width:992px){p{margin:0 0 20px}}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:70%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.25em}blockquote{border-left:1px solid #dfdfdf;margin-left:0;padding:.4em .6em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 15px}@media only screen and (min-width:992px){dl,ol,ul{margin:0 0 20px}}ol,ul{margin-left:1.5em}ol ol,ul ul{margin-top:0;margin-left:1em}ol{list-style:decimal outside}ul{list-style:disc outside}dl{margin-left:.5em}dd,dt{margin:0}dt{font-weight:700}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}body{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;color:#363636;background-color:#fff;direction:ltr;font-size:.9rem;line-height:1.4}@media only screen and (min-width:992px){body{line-height:1.618;font-size:1.1rem}}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalize{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-light{font-weight:lighter!important}.text-normal{font-weight:400!important}.text-medium{font-weight:medium!important}.text-bold{font-weight:bolder!important}.text-size-default{font-size:.9rem!important}@media only screen and (min-width:992px){.text-size-default{font-size:1.1rem!important}}.text-size-small{font-size:.675rem!important}@media only screen and (min-width:992px){.text-size-small{font-size:.8525rem!important}}.text-size-medium{font-size:1.125rem!important}@media only screen and (min-width:992px){.text-size-medium{font-size:1.3475rem!important}}.text-size-large{font-size:1.35rem!important}@media only screen and (min-width:992px){.text-size-large{font-size:1.595rem!important}}.text-size-big{font-size:1.575rem!important}@media only screen and (min-width:992px){.text-size-big{font-size:1.8425rem!important}}.text-size-mega{font-size:1.8rem!important}@media only screen and (min-width:992px){.text-size-mega{font-size:2.09rem!important}}.float-left{float:left}.float-right{float:right}.float-none{float:none}.centered{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.text-color-primary{color:#f18f01!important}.text-color-secondary{color:#b3b2af!important}.text-color-success{color:#5cb85c!important}.text-color-warning{color:#f0ad4e!important}.text-color-danger{color:#d9534f!important}.text-color-info{color:#0090d4!important}.text-color-grey{color:#7a7a7a!important}.text-color-grey-light{color:#f7f7f7!important}.text-color-grey-dark{color:#4a4a4a!important}.text-color-white{color:#fff!important}.border-color-primary{border-color:#f18f01!important}.border-color-secondary{border-color:#b3b2af!important}.border-color-success{border-color:#5cb85c!important}.border-color-warning{border-color:#f0ad4e!important}.border-color-danger{border-color:#d9534f!important}.border-color-info{border-color:#0090d4!important}.border-color-grey{border-color:#7a7a7a!important}.border-color-grey-light{border-color:#f7f7f7!important}.border-color-grey-dark{border-color:#4a4a4a!important}.border-color-white{border-color:#fff!important}.background-color-primary{background-color:#f18f01!important}.background-color-secondary{background-color:#b3b2af!important}.background-color-success{background-color:#5cb85c!important}.background-color-warning{background-color:#f0ad4e!important}.background-color-danger{background-color:#d9534f!important}.background-color-info{background-color:#0090d4!important}.background-color-grey{background-color:#7a7a7a!important}.background-color-grey-light{background-color:#f7f7f7!important}.background-color-grey-dark{background-color:#4a4a4a!important}.background-color-white{background-color:#fff!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hide{display:none!important}@media only screen and (min-width:576px){.hide-xs{display:none!important}}@media only screen and (min-width:768px){.hide-sm{display:none!important}}@media only screen and (min-width:992px){.hide-md{display:none!important}}@media only screen and (min-width:1200px){.hide-lg{display:none!important}}@media only screen and (min-width:1600px){.hide-xlg{display:none!important}}.show{display:block!important}.show--inline{display:inline!important}.show--inline-block{display:inline-block!important}@media only screen and (min-width:576px){.show-xs{display:block!important}.show-xs--inline{display:inline!important}.show-xs--inline-block{display:inline-block!important}}@media only screen and (min-width:768px){.show-sm{display:block!important}.show-sm--inline{display:inline!important}.show-sm--inline-block{display:inline-block!important}}@media only screen and (min-width:992px){.show-md{display:block!important}.show-md--inline{display:inline!important}.show-md--inline-block{display:inline-block!important}}@media only screen and (min-width:1200px){.show-lg{display:block!important}.show-lg--inline{display:inline!important}.show-lg--inline-block{display:inline-block!important}}@media only screen and (min-width:1600px){.show-xlg{display:block!important}.show-xlg--inline{display:inline!important}.show-xlg--inline-block{display:inline-block!important}}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:3px!important}.round{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-top-0{margin-top:0!important}.margin-bottom-0{margin-bottom:0!important}.padding-top-0{padding-top:0!important}.padding-bottom-0{padding-bottom:0!important}.margin-left-0{margin-left:0!important}.margin-right-0{margin-right:0!important}.padding-left-0{padding-left:0!important}.padding-right-0{padding-right:0!important}.margin-top-1{margin-top:4px!important}@media only screen and (min-width:992px){.margin-top-1{margin-top:6px!important}}.margin-bottom-1{margin-bottom:4px!important}@media only screen and (min-width:992px){.margin-bottom-1{margin-bottom:6px!important}}.padding-top-1{padding-top:8px!important}@media only screen and (min-width:992px){.padding-top-1{padding-top:6px!important}}.padding-bottom-1{padding-bottom:8px!important}@media only screen and (min-width:992px){.padding-bottom-1{padding-bottom:6px!important}}.margin-left-1{margin-left:8px!important}@media only screen and (min-width:992px){.margin-left-1{margin-left:6px!important}}.margin-right-1{margin-right:8px!important}@media only screen and (min-width:992px){.margin-right-1{margin-right:6px!important}}.padding-left-1{padding-left:8px!important}@media only screen and (min-width:992px){.padding-left-1{padding-left:6px!important}}.padding-right-1{padding-right:8px!important}@media only screen and (min-width:992px){.padding-right-1{padding-right:6px!important}}.margin-top-2{margin-top:16px!important}@media only screen and (min-width:992px){.margin-top-2{margin-top:24px!important}}.margin-bottom-2{margin-bottom:16px!important}@media only screen and (min-width:992px){.margin-bottom-2{margin-bottom:24px!important}}.padding-top-2{padding-top:16px!important}@media only screen and (min-width:992px){.padding-top-2{padding-top:24px!important}}.padding-bottom-2{padding-bottom:16px!important}@media only screen and (min-width:992px){.padding-bottom-2{padding-bottom:24px!important}}.margin-left-2{margin-left:16px!important}@media only screen and (min-width:992px){.margin-left-2{margin-left:24px!important}}.margin-right-2{margin-right:16px!important}@media only screen and (min-width:992px){.margin-right-2{margin-right:24px!important}}.padding-left-2{padding-left:16px!important}@media only screen and (min-width:992px){.padding-left-2{padding-left:24px!important}}.padding-right-2{padding-right:16px!important}@media only screen and (min-width:992px){.padding-right-2{padding-right:24px!important}}.margin-top-3{margin-top:36px!important}@media only screen and (min-width:992px){.margin-top-3{margin-top:54px!important}}.margin-bottom-3{margin-bottom:36px!important}@media only screen and (min-width:992px){.margin-bottom-3{margin-bottom:54px!important}}.padding-top-3{padding-top:24px!important}@media only screen and (min-width:992px){.padding-top-3{padding-top:54px!important}}.padding-bottom-3{padding-bottom:24px!important}@media only screen and (min-width:992px){.padding-bottom-3{padding-bottom:54px!important}}.margin-top-4{margin-top:64px!important}@media only screen and (min-width:992px){.margin-top-4{margin-top:96px!important}}.margin-bottom-4{margin-bottom:64px!important}@media only screen and (min-width:992px){.margin-bottom-4{margin-bottom:96px!important}}.padding-top-4{padding-top:32px!important}@media only screen and (min-width:992px){.padding-top-4{padding-top:96px!important}}.padding-bottom-4{padding-bottom:32px!important}@media only screen and (min-width:992px){.padding-bottom-4{padding-bottom:96px!important}}.margin-top-5{margin-top:100px!important}@media only screen and (min-width:992px){.margin-top-5{margin-top:150px!important}}.margin-bottom-5{margin-bottom:100px!important}@media only screen and (min-width:992px){.margin-bottom-5{margin-bottom:150px!important}}.padding-top-5{padding-top:40px!important}@media only screen and (min-width:992px){.padding-top-5{padding-top:150px!important}}.padding-bottom-5{padding-bottom:40px!important}@media only screen and (min-width:992px){.padding-bottom-5{padding-bottom:150px!important}}.margin-top-6{margin-top:144px!important}@media only screen and (min-width:992px){.margin-top-6{margin-top:216px!important}}.margin-bottom-6{margin-bottom:144px!important}@media only screen and (min-width:992px){.margin-bottom-6{margin-bottom:216px!important}}.padding-top-6{padding-top:48px!important}@media only screen and (min-width:992px){.padding-top-6{padding-top:216px!important}}.padding-bottom-6{padding-bottom:48px!important}@media only screen and (min-width:992px){.padding-bottom-6{padding-bottom:216px!important}}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;display:inline-block;text-decoration:none;font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:.9rem;margin:0 0 15px;padding:.4em .8em}@media only screen and (min-width:992px){.button{font-size:1.1rem;margin:0 0 20px;padding:.6em 1.2em}}.button:hover{cursor:pointer;text-decoration:none}.button:focus{outline:none}.code{white-space:pre;display:block;overflow-y:hidden;overflow-x:auto;border:1px solid #dfdfdf;background-color:#f7f7f7;margin:0 0 15px;padding:.4em .6em}@media only screen and (min-width:992px){.code{margin:0 0 20px;padding:.8em 1.1em}}.progress{border:1px solid #dfdfdf}.progress__inner{height:30px;background-color:#f18f01}.field{margin:0 0 15px}@media only screen and (min-width:992px){.field{margin:0 0 20px}}.field__label,.field__select,.field__text{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:.9rem}@media only screen and (min-width:992px){.field__label,.field__select,.field__text{font-size:1.1rem}}.field__select,.field__text{display:block;width:100%;color:#363636;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:.5em .6em}@media only screen and (min-width:992px){.field__select,.field__text{padding:.7em .8em}}.field__label{display:inline-block;width:100%}.field--valid .field__label{color:#5cb85c}.field--error .field__label{color:#d9534f}.field__text{margin:0;border:1px solid #dfdfdf}.field__text:focus{border-color:#f18f01}.field--valid .field__select,.field--valid .field__text{border-color:#5cb85c}.field--error .field__select,.field--error .field__text{border-color:#d9534f}.field__select{border:1px solid #dfdfdf;background-color:#fff;padding:.5em .3em}@media only screen and (min-width:992px){.field__select{padding:.7em .6em}}.field__select:focus{outline:0;border-color:#f18f01}.field__choice{position:relative;display:none}.field__choice+.field__label .field__choice__checked{display:none}.field__choice+.field__label:hover{cursor:pointer}.field__choice:checked+.field__label .field__choice__checked{display:inline-block}.field__choice:checked+.field__label .field__choice__unchecked{display:none}.field__choice__checked{fill:#5cb85c}.field__choice__unchecked{fill:#d9534f}.field__choice+.field__label+.field__panel{margin:.3em 0 0}.field--valid .field__choice__checked,.field--valid .field__choice__unchecked{fill:#5cb85c}.field--error .field__choice__checked,.field--error .field__choice__unchecked{fill:#d9534f}.field__panel{padding:.5em .6em}@media only screen and (min-width:992px){.field__panel{padding:.7em .8em}}.field--valid .field__panel{color:#fff;background-color:#5cb85c}.field--error .field__panel{color:#fff;background-color:#d9534f}.group{list-style:none;display:inline-block}.group,.group li{margin:0;padding:0}.group .group__item{display:inline-block;margin:0 .3em}.group--hr .group__item,.group .group__item:last-child:after{margin:0}.group--hr .group__item:after{margin:0 .3em;content:"/"}.group--hr .group__item:last-child:after{display:none}.hero{background-position:50%;background-repeat:no-repeat;background-size:cover;position:relative}.hero--top{background-position:top}.hero--bottom{background-position:bottom}.hero--contain{background-size:contain}.icon{width:1.15em;height:1.15em;max-height:100%;max-width:100%;vertical-align:middle;overflow:hidden;line-height:1.4}.icon-color-primary{fill:#f18f01!important}.icon-color-secondary{fill:#b3b2af!important}.icon-color-success{fill:#5cb85c!important}.icon-color-warning{fill:#f0ad4e!important}.icon-color-danger{fill:#d9534f!important}.icon-color-info{fill:#0090d4!important}.icon-color-grey{fill:#7a7a7a!important}.icon-color-grey-light{fill:#f7f7f7!important}.icon-color-grey-dark{fill:#4a4a4a!important}.icon-color-white{fill:#fff!important}.img-responsive{display:block;max-width:100%;height:auto}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.modal{position:absolute;z-index:100;width:100%;margin:0;top:50%;left:50%;transform:translate(-50%,-50%)}@media only screen and (min-width:992px){.modal{max-width:50%}}.modal--fixed{position:fixed}.modal--bottom-left,.modal--center-left,.modal--top-left{left:0}.modal--bottom-right,.modal--center-right,.modal--top-right{right:0;left:unset}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right,.modal--center-left,.modal--center-right,.modal--top-center,.modal--top-left,.modal--top-right{transform:translate(0)}@media only screen and (min-width:992px){.modal--bottom-center,.modal--bottom-left,.modal--bottom-right,.modal--center-left,.modal--center-right,.modal--top-center,.modal--top-left,.modal--top-right{margin:.75em}}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right{bottom:0;top:unset}.modal--center-left,.modal--center-right{transform:translateY(-50%);margin-top:0;margin-bottom:0}.modal--bottom-center,.modal--top-center{transform:translate(-50%)}.modal--top-center,.modal--top-left,.modal--top-right{top:0}.overlay{position:fixed;top:0;left:0;z-index:90;width:100%;height:100%;background-color:#000}.panel{background-color:#f7f7f7}.panel__inner{padding:.4em .6em}@media only screen and (min-width:992px){.panel__inner{padding:.8em 1.1em}}.table{width:100%}.table--striped tr:nth-child(2n){background-color:#f7f7f7}.table--scroll{overflow-x:auto}.table td{color:#363636}.table td,.table th{text-align:left;border-bottom:1px solid #dfdfdf;padding:.4em .6em}@media only screen and (min-width:992px){.table td,.table th{padding:.8em 1.1em}}.table th{border-bottom-width:2px} \ No newline at end of file diff --git a/dist/crispy-minimal.css b/dist/crispy-minimal.css index 1f203e6..3895bc0 100644 --- a/dist/crispy-minimal.css +++ b/dist/crispy-minimal.css @@ -1 +1 @@ -html{font-size:100%;line-height:1.15;-webkit-text-size-adjust:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}main{display:block}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}figure{margin:0 0 1rem}figcaption{margin:.3em 0 0}button,input,optgroup,select,textarea{margin:0}button,input,label,optgroup,select,textarea{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:.9rem;line-height:1.4}@media only screen and (min-width:992px){button,input,label,optgroup,select,textarea{font-size:1rem;line-height:1.618}}fieldset{padding:.3em .45em}button,select{text-transform:none}[type=button],[type=reset],[type=submit],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:1px dotted ButtonText}legend{box-sizing:border-box;display:table;max-width:100%;padding:0;white-space:normal}[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-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}hr{box-sizing:content-box;height:0;overflow:visible;border:0;border-top:1px solid #b3b2af;margin:.3em 0}progress{vertical-align:baseline}details{display:block}summary{display:list-item}code,kbd,pre,samp{font-family:Lucida Console,Monaco,monospace;font-size:1rem}@media only screen and (min-width:992px){code,kbd,pre,samp{font-size:1.1rem}}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:700;line-height:1.2;margin:0 0 .3em}h5,h6{line-height:1.4}.h1,h1{font-size:2.25rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.82rem}}.h2,h2{font-size:1.8rem}@media only screen and (min-width:992px){.h2,h2{font-size:2.28rem}}.h3,h3{font-size:1.575rem}@media only screen and (min-width:992px){.h3,h3{font-size:2.01rem}}.h4,h4{font-size:1.35rem}@media only screen and (min-width:992px){.h4,h4{font-size:1.74rem}}.h5,h5{font-size:1.125rem}@media only screen and (min-width:992px){.h5,h5{font-size:1.47rem}}.h6,h6{font-size:.9rem}@media only screen and (min-width:992px){.h6,h6{font-size:1.2rem}}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:70%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.25em}blockquote{border-left:1px solid #dfdfdf;margin-left:0;padding:.3em .45em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 1rem}ol,ul{margin-left:1.5em}ol ol,ul ul{margin-top:0;margin-left:1em}ol{list-style:decimal outside}ul{list-style:disc outside}dl{margin-left:.5em}dd,dt{margin:0}dt{font-weight:700}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}body{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;color:#363636;background-color:#fff;direction:ltr;font-size:.9rem;line-height:1.4}@media only screen and (min-width:992px){body{line-height:1.618;font-size:1rem}}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalize{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-light{font-weight:lighter!important}.text-normal{font-weight:400!important}.text-medium{font-weight:medium!important}.text-bold{font-weight:bolder!important}.text-size-default{font-size:.9rem!important}@media only screen and (min-width:992px){.text-size-default{font-size:1rem}}.text-size-small{font-size:.675rem!important}@media only screen and (min-width:992px){.text-size-small{font-size:.775rem}}.text-size-medium{font-size:1.125rem!important}@media only screen and (min-width:992px){.text-size-medium{font-size:1.225rem}}.text-size-large{font-size:1.35rem!important}@media only screen and (min-width:992px){.text-size-large{font-size:1.45rem}}.text-size-big{font-size:1.575rem!important}@media only screen and (min-width:992px){.text-size-big{font-size:1.675rem}}.text-size-mega{font-size:1.8rem!important}@media only screen and (min-width:992px){.text-size-mega{font-size:1.9rem}}.float-left{float:left}.float-right{float:right}.float-none{float:none}.centered{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.text-color-primary{color:#f18f01!important}.text-color-secondary{color:#b3b2af!important}.text-color-success{color:#5cb85c!important}.text-color-warning{color:#f0ad4e!important}.text-color-danger{color:#d9534f!important}.text-color-info{color:#0090d4!important}.text-color-grey{color:#7a7a7a!important}.text-color-grey-light{color:#f7f7f7!important}.text-color-grey-dark{color:#4a4a4a!important}.text-color-white{color:#fff!important}.border-color-primary{border-color:#f18f01!important}.border-color-secondary{border-color:#b3b2af!important}.border-color-success{border-color:#5cb85c!important}.border-color-warning{border-color:#f0ad4e!important}.border-color-danger{border-color:#d9534f!important}.border-color-info{border-color:#0090d4!important}.border-color-grey{border-color:#7a7a7a!important}.border-color-grey-light{border-color:#f7f7f7!important}.border-color-grey-dark{border-color:#4a4a4a!important}.border-color-white{border-color:#fff!important}.background-color-primary{background-color:#f18f01!important}.background-color-secondary{background-color:#b3b2af!important}.background-color-success{background-color:#5cb85c!important}.background-color-warning{background-color:#f0ad4e!important}.background-color-danger{background-color:#d9534f!important}.background-color-info{background-color:#0090d4!important}.background-color-grey{background-color:#7a7a7a!important}.background-color-grey-light{background-color:#f7f7f7!important}.background-color-grey-dark{background-color:#4a4a4a!important}.background-color-white{background-color:#fff!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hide{display:none!important}@media only screen and (min-width:576px){.hide-xs{display:none!important}}@media only screen and (min-width:768px){.hide-sm{display:none!important}}@media only screen and (min-width:992px){.hide-md{display:none!important}}@media only screen and (min-width:1200px){.hide-lg{display:none!important}}@media only screen and (min-width:1600px){.hide-xlg{display:none!important}}.show{display:block!important}.show--inline{display:inline!important}.show--inline-block{display:inline-block!important}@media only screen and (min-width:576px){.show-xs{display:block!important}.show-xs--inline{display:inline!important}.show-xs--inline-block{display:inline-block!important}}@media only screen and (min-width:768px){.show-sm{display:block!important}.show-sm--inline{display:inline!important}.show-sm--inline-block{display:inline-block!important}}@media only screen and (min-width:992px){.show-md{display:block!important}.show-md--inline{display:inline!important}.show-md--inline-block{display:inline-block!important}}@media only screen and (min-width:1200px){.show-lg{display:block!important}.show-lg--inline{display:inline!important}.show-lg--inline-block{display:inline-block!important}}@media only screen and (min-width:1600px){.show-xlg{display:block!important}.show-xlg--inline{display:inline!important}.show-xlg--inline-block{display:inline-block!important}}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:3px!important}.round{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-top-0{margin-top:0!important}.margin-bottom-0{margin-bottom:0!important}.padding-top-0{padding-top:0!important}.padding-bottom-0{padding-bottom:0!important}.margin-left-0{margin-left:0!important}.margin-right-0{margin-right:0!important}.padding-left-0{padding-left:0!important}.padding-right-0{padding-right:0!important}.margin-top-1{margin-top:4px!important}@media only screen and (min-width:992px){.margin-top-1{margin-top:6px!important}}.margin-bottom-1{margin-bottom:4px!important}@media only screen and (min-width:992px){.margin-bottom-1{margin-bottom:6px!important}}.padding-top-1{padding-top:8px!important}@media only screen and (min-width:992px){.padding-top-1{padding-top:6px!important}}.padding-bottom-1{padding-bottom:8px!important}@media only screen and (min-width:992px){.padding-bottom-1{padding-bottom:6px!important}}.margin-left-1{margin-left:8px!important}@media only screen and (min-width:992px){.margin-left-1{margin-left:6px!important}}.margin-right-1{margin-right:8px!important}@media only screen and (min-width:992px){.margin-right-1{margin-right:6px!important}}.padding-left-1{padding-left:8px!important}@media only screen and (min-width:992px){.padding-left-1{padding-left:6px!important}}.padding-right-1{padding-right:8px!important}@media only screen and (min-width:992px){.padding-right-1{padding-right:6px!important}}.margin-top-2{margin-top:16px!important}@media only screen and (min-width:992px){.margin-top-2{margin-top:24px!important}}.margin-bottom-2{margin-bottom:16px!important}@media only screen and (min-width:992px){.margin-bottom-2{margin-bottom:24px!important}}.padding-top-2{padding-top:16px!important}@media only screen and (min-width:992px){.padding-top-2{padding-top:24px!important}}.padding-bottom-2{padding-bottom:16px!important}@media only screen and (min-width:992px){.padding-bottom-2{padding-bottom:24px!important}}.margin-left-2{margin-left:16px!important}@media only screen and (min-width:992px){.margin-left-2{margin-left:24px!important}}.margin-right-2{margin-right:16px!important}@media only screen and (min-width:992px){.margin-right-2{margin-right:24px!important}}.padding-left-2{padding-left:16px!important}@media only screen and (min-width:992px){.padding-left-2{padding-left:24px!important}}.padding-right-2{padding-right:16px!important}@media only screen and (min-width:992px){.padding-right-2{padding-right:24px!important}}.margin-top-3{margin-top:36px!important}@media only screen and (min-width:992px){.margin-top-3{margin-top:54px!important}}.margin-bottom-3{margin-bottom:36px!important}@media only screen and (min-width:992px){.margin-bottom-3{margin-bottom:54px!important}}.padding-top-3{padding-top:24px!important}@media only screen and (min-width:992px){.padding-top-3{padding-top:54px!important}}.padding-bottom-3{padding-bottom:24px!important}@media only screen and (min-width:992px){.padding-bottom-3{padding-bottom:54px!important}}.margin-top-4{margin-top:64px!important}@media only screen and (min-width:992px){.margin-top-4{margin-top:96px!important}}.margin-bottom-4{margin-bottom:64px!important}@media only screen and (min-width:992px){.margin-bottom-4{margin-bottom:96px!important}}.padding-top-4{padding-top:32px!important}@media only screen and (min-width:992px){.padding-top-4{padding-top:96px!important}}.padding-bottom-4{padding-bottom:32px!important}@media only screen and (min-width:992px){.padding-bottom-4{padding-bottom:96px!important}}.margin-top-5{margin-top:100px!important}@media only screen and (min-width:992px){.margin-top-5{margin-top:150px!important}}.margin-bottom-5{margin-bottom:100px!important}@media only screen and (min-width:992px){.margin-bottom-5{margin-bottom:150px!important}}.padding-top-5{padding-top:40px!important}@media only screen and (min-width:992px){.padding-top-5{padding-top:150px!important}}.padding-bottom-5{padding-bottom:40px!important}@media only screen and (min-width:992px){.padding-bottom-5{padding-bottom:150px!important}}.margin-top-6{margin-top:144px!important}@media only screen and (min-width:992px){.margin-top-6{margin-top:216px!important}}.margin-bottom-6{margin-bottom:144px!important}@media only screen and (min-width:992px){.margin-bottom-6{margin-bottom:216px!important}}.padding-top-6{padding-top:48px!important}@media only screen and (min-width:992px){.padding-top-6{padding-top:216px!important}}.padding-bottom-6{padding-bottom:48px!important}@media only screen and (min-width:992px){.padding-bottom-6{padding-bottom:216px!important}} \ No newline at end of file +html{font-size:100%;line-height:1.15;-webkit-text-size-adjust:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}main{display:block}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}figure{margin:0 0 15px}@media only screen and (min-width:992px){figure{margin:0 0 20px}}figcaption{margin:10px 0}button,input,optgroup,select,textarea{margin:0}fieldset{padding:.4em .6em}button,select{text-transform:none}[type=button],[type=reset],[type=submit],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:1px dotted ButtonText}legend{box-sizing:border-box;display:table;max-width:100%;padding:0;white-space:normal}[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-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}hr{box-sizing:content-box;height:0;overflow:visible;border:0;border-top:1px solid #b3b2af;margin:.3em 0}progress{vertical-align:baseline}details{display:block}summary{display:list-item}code,kbd,pre,samp{font-family:Lucida Console,Monaco,monospace;font-size:1rem}@media only screen and (min-width:992px){code,kbd,pre,samp{font-size:1.1rem}}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;line-height:1.2;margin:0 0 15px}@media only screen and (min-width:992px){.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin:0 0 20px}}h5,h6{line-height:1.4}.h1,h1{font-size:2.25rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.82rem!important}}.h2,h2{font-size:1.8rem}@media only screen and (min-width:992px){.h2,h2{font-size:2.28rem!important}}.h3,h3{font-size:1.575rem}@media only screen and (min-width:992px){.h3,h3{font-size:2.01rem!important}}.h4,h4{font-size:1.35rem}@media only screen and (min-width:992px){.h4,h4{font-size:1.74rem!important}}.h5,h5{font-size:1.125rem}@media only screen and (min-width:992px){.h5,h5{font-size:1.47rem!important}}.h6,h6{font-size:.9rem}@media only screen and (min-width:992px){.h6,h6{font-size:1.2rem!important}}p{margin:0 0 15px}@media only screen and (min-width:992px){p{margin:0 0 20px}}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:70%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.25em}blockquote{border-left:1px solid #dfdfdf;margin-left:0;padding:.4em .6em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 15px}@media only screen and (min-width:992px){dl,ol,ul{margin:0 0 20px}}ol,ul{margin-left:1.5em}ol ol,ul ul{margin-top:0;margin-left:1em}ol{list-style:decimal outside}ul{list-style:disc outside}dl{margin-left:.5em}dd,dt{margin:0}dt{font-weight:700}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}body{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;color:#363636;background-color:#fff;direction:ltr;font-size:.9rem;line-height:1.4}@media only screen and (min-width:992px){body{line-height:1.618;font-size:1.1rem}}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalize{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-light{font-weight:lighter!important}.text-normal{font-weight:400!important}.text-medium{font-weight:medium!important}.text-bold{font-weight:bolder!important}.text-size-default{font-size:.9rem!important}@media only screen and (min-width:992px){.text-size-default{font-size:1.1rem!important}}.text-size-small{font-size:.675rem!important}@media only screen and (min-width:992px){.text-size-small{font-size:.8525rem!important}}.text-size-medium{font-size:1.125rem!important}@media only screen and (min-width:992px){.text-size-medium{font-size:1.3475rem!important}}.text-size-large{font-size:1.35rem!important}@media only screen and (min-width:992px){.text-size-large{font-size:1.595rem!important}}.text-size-big{font-size:1.575rem!important}@media only screen and (min-width:992px){.text-size-big{font-size:1.8425rem!important}}.text-size-mega{font-size:1.8rem!important}@media only screen and (min-width:992px){.text-size-mega{font-size:2.09rem!important}}.float-left{float:left}.float-right{float:right}.float-none{float:none}.centered{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.text-color-primary{color:#f18f01!important}.text-color-secondary{color:#b3b2af!important}.text-color-success{color:#5cb85c!important}.text-color-warning{color:#f0ad4e!important}.text-color-danger{color:#d9534f!important}.text-color-info{color:#0090d4!important}.text-color-grey{color:#7a7a7a!important}.text-color-grey-light{color:#f7f7f7!important}.text-color-grey-dark{color:#4a4a4a!important}.text-color-white{color:#fff!important}.border-color-primary{border-color:#f18f01!important}.border-color-secondary{border-color:#b3b2af!important}.border-color-success{border-color:#5cb85c!important}.border-color-warning{border-color:#f0ad4e!important}.border-color-danger{border-color:#d9534f!important}.border-color-info{border-color:#0090d4!important}.border-color-grey{border-color:#7a7a7a!important}.border-color-grey-light{border-color:#f7f7f7!important}.border-color-grey-dark{border-color:#4a4a4a!important}.border-color-white{border-color:#fff!important}.background-color-primary{background-color:#f18f01!important}.background-color-secondary{background-color:#b3b2af!important}.background-color-success{background-color:#5cb85c!important}.background-color-warning{background-color:#f0ad4e!important}.background-color-danger{background-color:#d9534f!important}.background-color-info{background-color:#0090d4!important}.background-color-grey{background-color:#7a7a7a!important}.background-color-grey-light{background-color:#f7f7f7!important}.background-color-grey-dark{background-color:#4a4a4a!important}.background-color-white{background-color:#fff!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hide{display:none!important}@media only screen and (min-width:576px){.hide-xs{display:none!important}}@media only screen and (min-width:768px){.hide-sm{display:none!important}}@media only screen and (min-width:992px){.hide-md{display:none!important}}@media only screen and (min-width:1200px){.hide-lg{display:none!important}}@media only screen and (min-width:1600px){.hide-xlg{display:none!important}}.show{display:block!important}.show--inline{display:inline!important}.show--inline-block{display:inline-block!important}@media only screen and (min-width:576px){.show-xs{display:block!important}.show-xs--inline{display:inline!important}.show-xs--inline-block{display:inline-block!important}}@media only screen and (min-width:768px){.show-sm{display:block!important}.show-sm--inline{display:inline!important}.show-sm--inline-block{display:inline-block!important}}@media only screen and (min-width:992px){.show-md{display:block!important}.show-md--inline{display:inline!important}.show-md--inline-block{display:inline-block!important}}@media only screen and (min-width:1200px){.show-lg{display:block!important}.show-lg--inline{display:inline!important}.show-lg--inline-block{display:inline-block!important}}@media only screen and (min-width:1600px){.show-xlg{display:block!important}.show-xlg--inline{display:inline!important}.show-xlg--inline-block{display:inline-block!important}}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:3px!important}.round{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-top-0{margin-top:0!important}.margin-bottom-0{margin-bottom:0!important}.padding-top-0{padding-top:0!important}.padding-bottom-0{padding-bottom:0!important}.margin-left-0{margin-left:0!important}.margin-right-0{margin-right:0!important}.padding-left-0{padding-left:0!important}.padding-right-0{padding-right:0!important}.margin-top-1{margin-top:4px!important}@media only screen and (min-width:992px){.margin-top-1{margin-top:6px!important}}.margin-bottom-1{margin-bottom:4px!important}@media only screen and (min-width:992px){.margin-bottom-1{margin-bottom:6px!important}}.padding-top-1{padding-top:8px!important}@media only screen and (min-width:992px){.padding-top-1{padding-top:6px!important}}.padding-bottom-1{padding-bottom:8px!important}@media only screen and (min-width:992px){.padding-bottom-1{padding-bottom:6px!important}}.margin-left-1{margin-left:8px!important}@media only screen and (min-width:992px){.margin-left-1{margin-left:6px!important}}.margin-right-1{margin-right:8px!important}@media only screen and (min-width:992px){.margin-right-1{margin-right:6px!important}}.padding-left-1{padding-left:8px!important}@media only screen and (min-width:992px){.padding-left-1{padding-left:6px!important}}.padding-right-1{padding-right:8px!important}@media only screen and (min-width:992px){.padding-right-1{padding-right:6px!important}}.margin-top-2{margin-top:16px!important}@media only screen and (min-width:992px){.margin-top-2{margin-top:24px!important}}.margin-bottom-2{margin-bottom:16px!important}@media only screen and (min-width:992px){.margin-bottom-2{margin-bottom:24px!important}}.padding-top-2{padding-top:16px!important}@media only screen and (min-width:992px){.padding-top-2{padding-top:24px!important}}.padding-bottom-2{padding-bottom:16px!important}@media only screen and (min-width:992px){.padding-bottom-2{padding-bottom:24px!important}}.margin-left-2{margin-left:16px!important}@media only screen and (min-width:992px){.margin-left-2{margin-left:24px!important}}.margin-right-2{margin-right:16px!important}@media only screen and (min-width:992px){.margin-right-2{margin-right:24px!important}}.padding-left-2{padding-left:16px!important}@media only screen and (min-width:992px){.padding-left-2{padding-left:24px!important}}.padding-right-2{padding-right:16px!important}@media only screen and (min-width:992px){.padding-right-2{padding-right:24px!important}}.margin-top-3{margin-top:36px!important}@media only screen and (min-width:992px){.margin-top-3{margin-top:54px!important}}.margin-bottom-3{margin-bottom:36px!important}@media only screen and (min-width:992px){.margin-bottom-3{margin-bottom:54px!important}}.padding-top-3{padding-top:24px!important}@media only screen and (min-width:992px){.padding-top-3{padding-top:54px!important}}.padding-bottom-3{padding-bottom:24px!important}@media only screen and (min-width:992px){.padding-bottom-3{padding-bottom:54px!important}}.margin-top-4{margin-top:64px!important}@media only screen and (min-width:992px){.margin-top-4{margin-top:96px!important}}.margin-bottom-4{margin-bottom:64px!important}@media only screen and (min-width:992px){.margin-bottom-4{margin-bottom:96px!important}}.padding-top-4{padding-top:32px!important}@media only screen and (min-width:992px){.padding-top-4{padding-top:96px!important}}.padding-bottom-4{padding-bottom:32px!important}@media only screen and (min-width:992px){.padding-bottom-4{padding-bottom:96px!important}}.margin-top-5{margin-top:100px!important}@media only screen and (min-width:992px){.margin-top-5{margin-top:150px!important}}.margin-bottom-5{margin-bottom:100px!important}@media only screen and (min-width:992px){.margin-bottom-5{margin-bottom:150px!important}}.padding-top-5{padding-top:40px!important}@media only screen and (min-width:992px){.padding-top-5{padding-top:150px!important}}.padding-bottom-5{padding-bottom:40px!important}@media only screen and (min-width:992px){.padding-bottom-5{padding-bottom:150px!important}}.margin-top-6{margin-top:144px!important}@media only screen and (min-width:992px){.margin-top-6{margin-top:216px!important}}.margin-bottom-6{margin-bottom:144px!important}@media only screen and (min-width:992px){.margin-bottom-6{margin-bottom:216px!important}}.padding-top-6{padding-top:48px!important}@media only screen and (min-width:992px){.padding-top-6{padding-top:216px!important}}.padding-bottom-6{padding-bottom:48px!important}@media only screen and (min-width:992px){.padding-bottom-6{padding-bottom:216px!important}} \ No newline at end of file diff --git a/dist/examples/components.html b/dist/example/components.html similarity index 89% rename from dist/examples/components.html rename to dist/example/components.html index 4b641f1..038ab19 100644 --- a/dist/examples/components.html +++ b/dist/example/components.html @@ -1,21 +1,30 @@ -Components | Crispy CSS
Crispy CSS

Components

Button

Scss:

$crispy__button__font-family: $crispy__font-family;
+Components | Crispy CSS
 Crispy CSS
Components
Button
SCSS:
$crispy__button__font-family: $crispy__font-family;
 $crispy__button__font-weight: $crispy__font-weight;
 $crispy__button__font-size: $crispy__font-size;
-$crispy__button__font-size-breakpoints: $crispy__font-size__breakpoints;
+$crispy__button__font-size-breakpoints: $crispy__font-size-breakpoints;
 
-$crispy__button__padding: 0.3em 0.8em;
+$crispy__button__padding: 0.4em 0.8em;
 $crispy__button__padding-breakpoints: (
-    $crispy__md: 0.4em 1.2em
+    $crispy__md: 0.6em 1.2em
 );
+
+$crispy__button__margin: $crispy__margin;
+$crispy__button__margin-breakpoints: $crispy__margin-breakpoints;
 
Html:
<button class="button"></button>
 <button class="button text-size-medium"></button>
 <button class="button text-size-large"></button>
-<button class="button width-100"></button>
     
Code
Scss:
$crispy__code__padding: $crispy__padding;
+<button class="button width-100"></button>
     
Code
SCSS:
$crispy__code__border: $crispy__border;
+$crispy__code__background-color: $crispy__color-grey-light;
+
+$crispy__code__padding: $crispy__padding;
 $crispy__code__padding-breakpoints: $crispy__padding-breakpoints;
+
 $crispy__code__margin: $crispy__margin;
-$crispy__code__border: $crispy__border;
-$crispy__code__background-color: $crispy__color-grey-light;
-
Html:
<pre class="code"><code></code></pre>
Fields
Scss:
$crispy__field__margin: $crispy__margin;
+$crispy__code__margin-breakpoints: $crispy__margin-breakpoints;
+
Html:
<pre class="code">
+    <code></code>
+</pre>
+
Fields
SCSS:
$crispy__field__margin: $crispy__margin;
 $crispy__field__border: $crispy__border;
 
 $crispy__field__color--valid: $crispy__color-success;
@@ -150,7 +159,7 @@ $crispy__field__select__border: $crispy__border;
Group
Scss:
$crispy__group__margin: 0.3em !default;
+</div>
Group
SCSS:
$crispy__group__margin: 0.3em !default;
 $crispy__group__character: '/' !default;
 $crispy__group__character-margin: 0 $crispy__group__margin 0 !default;
Html:
<nav>
     <ul class="group group--hr">
@@ -158,7 +167,7 @@ $crispy__group__character-margin: 0 $crispy__group__margin 0 !default;
Hero
Html:
<div class="hero" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
<div class="hero hero--top" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
<div class="hero hero--bottom" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
Icon
Scss:
$crispy__icon__size: 1.15em;
+</nav>
Hero
Html:
<div class="hero" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
<div class="hero hero--top" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
<div class="hero hero--bottom" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
Icon
SCSS:
$crispy__icon__size: 1.15em;
 
Html:
<svg class="icon text-size-small" aria-hidden="true">
      <use xlink:href="symbol-defs.svg#icon-flask"></use>
 </svg>
@@ -181,21 +190,21 @@ $crispy__group__character-margin: 0 $crispy__group__margin 0 !default;
Lorem Ipsum
Panel
Scss:
$crispy__panel__inner-padding: $crispy__padding;
+
Lorem Ipsum
Panel
SCSS:
$crispy__panel__inner-padding: $crispy__padding;
 $crispy__panel__inner-padding-breakpoints: $crispy__padding-breakpoints;
 $crispy__panel__background-color: $crispy__color-grey-light;
 
Html:
<div class="panel">
     <div class="panel__inner">
         Lorem Ipsum
     </div>
-</div>
Lorem Ipsum
Progress
Scss:
$crispy__progress__height: 30px;
+</div>
Lorem Ipsum
Progress
SCSS:
$crispy__progress__height: 30px;
 $crispy__progress__background-color: $crispy__color-primary;
 $crispy__progress__border-width: 1px;
 $crispy__progress__border-color: $crispy__color-border;
 
Html:
<div class="progress">
     <div class="progress__inner" style="width: 80%"></div>
 </div>
-
Modal
Scss:
$crispy__modal__max-width-breakpoints: (
+
Modal
SCSS:
$crispy__modal__max-width-breakpoints: (
     $crispy__md: 50%
 );
 
@@ -209,7 +218,7 @@ $crispy__modal__z-index: zIndex('modal');
Html:
<
             Lorem Ipsum
         </div>
     </div>
-</div>
.modal--top-left
.modal--top-right
.modal
.modal--bottom-left
.modal--bottom-right

Table

Scss:

$crispy__table__padding: $crispy__padding !default;
+</div>
.modal--top-left
.modal--top-right
.modal
.modal--bottom-left
.modal--bottom-right

Table

SCSS:

$crispy__table__padding: $crispy__padding !default;
 $crispy__table__padding-breakpoints: $crispy__padding-breakpoints !default;
 
 $crispy__table__td__border: 1px solid $crispy__color-border !default;
diff --git a/dist/example/core.html b/dist/example/core.html
new file mode 100644
index 0000000..dbea844
--- /dev/null
+++ b/dist/example/core.html
@@ -0,0 +1 @@
+Core | Crispy CSS
 Crispy CSS
Core
Normalize
a
Link
Typography
Heading
Heading h1
Heading h2
Heading h3
Heading h4
Heading h5
Heading h6
abbr
Glossier viral occupy mixtape pok pok cornhole, vape affogato hella knausgaard thundercats
blockquote
Hoodie kickstarter four loko, pinterest hashtag chambray glossier. Pug before they sold out etsy listicle. Deep v bespoke tacos polaroid, squid flexitarian crucifix messenger bag.
hr
paragraph
Glossier viral occupy mixtape pok pok.
mark
Pug before they four loko Deep v bespoke
list
  • item 1
  • item 2
    • child item 1
    • child item 2
  1. item 1
  2. item 2
defined title 1
defined item 1

\ No newline at end of file
diff --git a/dist/example/functions.html b/dist/example/functions.html
new file mode 100644
index 0000000..884f952
--- /dev/null
+++ b/dist/example/functions.html
@@ -0,0 +1,4 @@
+Functions | Crispy CSS
 Crispy CSS
Functions
stripUnit()
Sass:
stripUnit(10px);
Returns value without unit.
zIndex(name)
Sass:
zIndex('modal');
Returns value from $crispy__z-index.
Sass:
$crispy__z-index: (
+    'overlay': 90,
+    'modal'  : 100
+);

\ No newline at end of file
diff --git a/dist/example/getting-started.html b/dist/example/getting-started.html
new file mode 100644
index 0000000..6115464
--- /dev/null
+++ b/dist/example/getting-started.html
@@ -0,0 +1,126 @@
+Getting started! | Crispy CSS
 Crispy CSS
Getting started!
Installation
npm install crispy-css
+
SCSS
@import
+    "node_modules/crispy-css/src/crispy";
+
Now include Components and Helpers you need.
@include crispy__helpers();
+@include crispy__button();
+@include crispy__code();
+@include crispy__field();
+@include crispy__group();
+@include crispy__hero();
+@include crispy__icon();
+@include crispy__media();
+@include crispy__modal();
+@include crispy__overlay();
+@include crispy__panel();
+@include crispy__progress();
+@include crispy__table();
+
There are two additionals Versions of Crispy. There is crispy-minimal, that only includes Helpers and crispy-all that includes Helpers and all Components.
@import
+    "node_modules/crispy-css/src/crispy-all";
+
@import
+    "node_modules/crispy-css/src/crispy-minimal";
+
Configuration
Breakpoints
$crispy__xs : 576px;
+$crispy__sm : 768px;
+$crispy__md : 992px;
+$crispy__lg : 1200px;
+$crispy__xlg: 1600px;
+
Fonts
$crispy__direction: ltr;
+
+$crispy__font-family: "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
+$crispy__font-weight: normal;
+$crispy__font-size: 0.9rem;
+$crispy__font-size-breakpoints: (
+    $crispy__md: 1.1rem
+);
+
+$crispy__font-family-monospace: "Lucida Console", Monaco, monospace;
+$crispy__font-weight-monospace: normal ;
+$crispy__font-size-monospace: 1rem ;
+$crispy__font-size-monospace__breakpoints: (
+    $crispy__md: 1.1rem
+);
+
+$crispy__font-sizes: (
+    'default' : $crispy__font-size,
+    'small'   : $crispy__font-size * 0.75,
+    'medium'  : $crispy__font-size * 1.25,
+    'large'   : $crispy__font-size * 1.5,
+    'big'     : $crispy__font-size * 1.75,
+    'mega'    : $crispy__font-size * 2,
+);
+
+$crispy__line-height: 1.4;
+$crispy__line-height__breakpoints: (
+    $crispy__md: $crispy__golden-ratio
+);
+
Colors
$crispy__color-primary: #f18f01;
+$crispy__color-secondary: #b3b2af;
+$crispy__color-success: #5cb85c;
+$crispy__color-warning: #f0ad4e;
+$crispy__color-danger: #d9534f;
+$crispy__color-info: #0090d4;
+
+$crispy__color-grey-light: hsl(0, 0%, 97%);
+$crispy__color-grey: hsl(0, 0%, 48%);
+$crispy__color-grey-dark: hsl(0, 0%, 29%);
+$crispy__color-white: white;
+
+$crispy__color-text: #363636;
+$crispy__color-border: #dfdfdf;
+$crispy__color-background: #ffffff;
+
+$crispy__color-panel: #f9f9f9;
+
+$crispy__color-link: $crispy__color-primary;
+$crispy__color-link-hover: $crispy__color-secondary;
+$crispy__color-link-visited: $crispy__color-primary;
+$crispy__color-link-focus: $crispy__color-primary;
+$crispy__color-link-active: $crispy__color-primary;
+
+$crispy__colors: (
+    'primary'    : $crispy__color-primary,
+    'secondary'  : $crispy__color-secondary,
+    'success'    : $crispy__color-success,
+    'warning'    : $crispy__color-warning,
+    'danger'     : $crispy__color-danger,
+    'info'       : $crispy__color-info,
+    'grey'       : $crispy__color-grey,
+    'grey-light' : $crispy__color-grey-light,
+    'grey-dark'  : $crispy__color-grey-dark,
+    'white'      : $crispy__color-white
+);
+
Padding & Magin
$crispy__margin: 0 0 15px;
+$crispy__margin-breakpoints: (
+    $crispy__md: 0 0 20px
+);
+
+$crispy__padding: 0.4em 0.6em;
+$crispy__padding-breakpoints: (
+    $crispy__md: 0.8em 1.1em
+);
+
Heading
$crispy__heading__font-sizes: (
+    'h1': $crispy__font-size * 2.5,
+    'h2': $crispy__font-size * 2,
+    'h3': $crispy__font-size * 1.75,
+    'h4': $crispy__font-size * 1.5,
+    'h5': $crispy__font-size * 1.25,
+    'h6': $crispy__font-size
+) ;
+
+$crispy__heading__font-sizes__breakpoints: (
+    $crispy__md: 1.2rem
+);
+
+$crispy__heading__font-weight: bold;
+$crispy__heading__font-family: $crispy__font-family;
+$crispy__heading__margin: $crispy__margin;
+$crispy__heading__margin-breakpoints: $crispy__margin-breakpoints;
+
Borders
$crispy__border-radius: 3px !default;
+$crispy__border: 1px solid $crispy__color-border !default;
+
Z-Index
$crispy__z-index: (
+    'overlay': 90,
+    'modal'  : 100
+) !default;
+
For Custom Variables add a File before importing Crispy.
@import
+    "config",
+    "node_modules/crispy-css/src/crispy";
+
Example
You find all of this Site in "/src/example". This is also an Example how you can use Crispy CSS and orginaize your Project.
Site
Contains header, footer and some partials that are used on a Site or Webapp.
Templates
Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components.

\ No newline at end of file
diff --git a/dist/example/helpers.html b/dist/example/helpers.html
new file mode 100644
index 0000000..82156a9
--- /dev/null
+++ b/dist/example/helpers.html
@@ -0,0 +1 @@
+Helpers | Crispy CSS
 Crispy CSS
Helpers
Border
.round
.radiusless
.bordered
.rounded
.borderless
Margin / Padding
padding-bottom-0
padding-bottom-1
padding-bottom-2
padding-bottom-3
padding-bottom-4
padding-bottom-5
padding-bottom-6
Typography
text-left
text-center
text-right
text-justify
I'm baby literally tousled ramps 8-bit franzen, yuccie before they sold out stumptown XOXO palo santo. Blog taiyaki vegan crucifix. Mustache raw denim shabby chic vegan hexagon aesthetic deep v tofu man braid church-key pork belly unicorn pinterest. Palo santo heirloom banh mi waistcoat, neutra listicle selvage sustainable adaptogen tote bag art party migas ethical PBR&B 8-bit. Chillwave hammock VHS post-ironic, tumblr brunch normcore blue bottle chambray. Austin vice microdosing celiac. Bushwick blog farm-to-table succulents mlkshk actually.
text-italic
text-light
text-normal
text-medium
text-bold
text-capitalize
text-uppercase
text-smaller
text-crossed
text-underline
Width
width-25
width-50
width-75
width-100

\ No newline at end of file
diff --git a/dist/examples/img/gaming-circus.jpg b/dist/example/img/gaming-circus.jpg
similarity index 100%
rename from dist/examples/img/gaming-circus.jpg
rename to dist/example/img/gaming-circus.jpg
diff --git a/dist/examples/img/tentakelfabrik.jpg b/dist/example/img/tentakelfabrik.jpg
similarity index 100%
rename from dist/examples/img/tentakelfabrik.jpg
rename to dist/example/img/tentakelfabrik.jpg
diff --git a/dist/examples/img/trinkkofi.jpg b/dist/example/img/trinkkofi.jpg
similarity index 100%
rename from dist/examples/img/trinkkofi.jpg
rename to dist/example/img/trinkkofi.jpg
diff --git a/dist/example/imprint.html b/dist/example/imprint.html
new file mode 100644
index 0000000..cfb3871
--- /dev/null
+++ b/dist/example/imprint.html
@@ -0,0 +1 @@
+Imprint | Crispy CSS
 Crispy CSS
Imprint

\ No newline at end of file
diff --git a/dist/example/index.html b/dist/example/index.html
new file mode 100644
index 0000000..c011afc
--- /dev/null
+++ b/dist/example/index.html
@@ -0,0 +1 @@
+Crispy CSS | Lightweight CSS Framework for Building Apps and Websites
Ugly
Yes, this Framework has no fancy Layout or shiny Elements, because what created with Crispy CSS could be fancy. This Framework adds basic styles and support your Work.
Helpers
Mixins, Functions and Modifiers make your Workflow simpler. Only import Components you really need and make your Work lightweight.
Coding Style
Crispy CSS uses BEM, but an simpler approach of it. BEM is good to show dependencies in Components and add structure to your Styles.
Getting started!  Visit on Github 
Apps and Websites that have been crafted
Tentakelfabrik
Gaming Circus
Trinkkofi

\ No newline at end of file
diff --git a/dist/examples/mixins.html b/dist/example/mixins.html
similarity index 66%
rename from dist/examples/mixins.html
rename to dist/example/mixins.html
index eb66e1d..c5a4cb2 100644
--- a/dist/examples/mixins.html
+++ b/dist/example/mixins.html
@@ -1,4 +1,4 @@
-Mixins | Crispy CSS
 Crispy CSS
Mixins
Triangle
Sass:
.triangle-left, .triangle-right, .triangle-top, .triangle-bottom {
+Mixins | Crispy CSS
 Crispy CSS
Mixins
Triangle
Sass:
.triangle-left, .triangle-right, .triangle-top, .triangle-bottom {
 display: block;
 }
 
diff --git a/dist/example/privacy-policy.html b/dist/example/privacy-policy.html
new file mode 100644
index 0000000..fc5dccb
--- /dev/null
+++ b/dist/example/privacy-policy.html
@@ -0,0 +1 @@
+Privacy Policy | Crispy CSS
 Crispy CSS
Privacy Policy

\ No newline at end of file
diff --git a/dist/example/styles.css b/dist/example/styles.css
new file mode 100644
index 0000000..bbbf315
--- /dev/null
+++ b/dist/example/styles.css
@@ -0,0 +1 @@
+.container,.container-full{box-sizing:border-box;width:100%;margin-right:auto;margin-left:auto;padding-right:30px;padding-left:30px}.container-full .grid,.container .grid{margin-right:-15px;margin-left:-15px}@media (min-width:576px){.container{max-width:576px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:992px){.container{max-width:992px}}@media (min-width:1200px){.container{max-width:1200px}}@media (min-width:1600px){.container{max-width:1600px}}.grid{box-sizing:border-box;display:block;display:flex;flex-wrap:wrap;padding:0;margin:0 auto;position:relative;letter-spacing:-.31em;*letter-spacing:normal;word-spacing:-.43em;list-style-type:none}.grid:after,.grid:before,[class*=col-]{box-sizing:border-box;letter-spacing:normal;word-spacing:normal;white-space:normal}[class*=col-]{position:relative;width:100%;vertical-align:top;padding:15px;display:inline-block;*display:inline;zoom:1}[class*=col-]:after,[class*=col-]:before{box-sizing:border-box;letter-spacing:normal;word-spacing:normal;white-space:normal}[class*=col-] .grid{flex:1 1 auto;margin:-15px}.col-12{width:100%;*width:99.9%}.col-11{width:91.6666666667%;*width:91.5666666667%}.col-10{width:83.3333333333%;*width:83.2333333333%}.col-9{width:75%;*width:74.9%}.col-8{width:66.6666666667%;*width:66.5666666667%}.col-7{width:58.3333333333%;*width:58.2333333333%}.col-6{width:50%;*width:49.9%}.col-5{width:41.6666666667%;*width:41.5666666667%}.col-4{width:33.3333333333%;*width:33.2333333333%}.col-3{width:25%;*width:24.9%}.col-2{width:16.6666666667%;*width:16.5666666667%}.col-1{width:8.3333333333%;*width:8.2333333333%}@media (min-width:576px){.col-xs-12{width:100%;*width:99.9%}.col-xs-11{width:91.6666666667%;*width:91.5666666667%}.col-xs-10{width:83.3333333333%;*width:83.2333333333%}.col-xs-9{width:75%;*width:74.9%}.col-xs-8{width:66.6666666667%;*width:66.5666666667%}.col-xs-7{width:58.3333333333%;*width:58.2333333333%}.col-xs-6{width:50%;*width:49.9%}.col-xs-5{width:41.6666666667%;*width:41.5666666667%}.col-xs-4{width:33.3333333333%;*width:33.2333333333%}.col-xs-3{width:25%;*width:24.9%}.col-xs-2{width:16.6666666667%;*width:16.5666666667%}.col-xs-1{width:8.3333333333%;*width:8.2333333333%}}@media (min-width:768px){.col-sm-12{width:100%;*width:99.9%}.col-sm-11{width:91.6666666667%;*width:91.5666666667%}.col-sm-10{width:83.3333333333%;*width:83.2333333333%}.col-sm-9{width:75%;*width:74.9%}.col-sm-8{width:66.6666666667%;*width:66.5666666667%}.col-sm-7{width:58.3333333333%;*width:58.2333333333%}.col-sm-6{width:50%;*width:49.9%}.col-sm-5{width:41.6666666667%;*width:41.5666666667%}.col-sm-4{width:33.3333333333%;*width:33.2333333333%}.col-sm-3{width:25%;*width:24.9%}.col-sm-2{width:16.6666666667%;*width:16.5666666667%}.col-sm-1{width:8.3333333333%;*width:8.2333333333%}}@media (min-width:992px){.col-md-12{width:100%;*width:99.9%}.col-md-11{width:91.6666666667%;*width:91.5666666667%}.col-md-10{width:83.3333333333%;*width:83.2333333333%}.col-md-9{width:75%;*width:74.9%}.col-md-8{width:66.6666666667%;*width:66.5666666667%}.col-md-7{width:58.3333333333%;*width:58.2333333333%}.col-md-6{width:50%;*width:49.9%}.col-md-5{width:41.6666666667%;*width:41.5666666667%}.col-md-4{width:33.3333333333%;*width:33.2333333333%}.col-md-3{width:25%;*width:24.9%}.col-md-2{width:16.6666666667%;*width:16.5666666667%}.col-md-1{width:8.3333333333%;*width:8.2333333333%}}@media (min-width:1200px){.col-lg-12{width:100%;*width:99.9%}.col-lg-11{width:91.6666666667%;*width:91.5666666667%}.col-lg-10{width:83.3333333333%;*width:83.2333333333%}.col-lg-9{width:75%;*width:74.9%}.col-lg-8{width:66.6666666667%;*width:66.5666666667%}.col-lg-7{width:58.3333333333%;*width:58.2333333333%}.col-lg-6{width:50%;*width:49.9%}.col-lg-5{width:41.6666666667%;*width:41.5666666667%}.col-lg-4{width:33.3333333333%;*width:33.2333333333%}.col-lg-3{width:25%;*width:24.9%}.col-lg-2{width:16.6666666667%;*width:16.5666666667%}.col-lg-1{width:8.3333333333%;*width:8.2333333333%}}@media (min-width:1600px){.col-xlg-12{width:100%;*width:99.9%}.col-xlg-11{width:91.6666666667%;*width:91.5666666667%}.col-xlg-10{width:83.3333333333%;*width:83.2333333333%}.col-xlg-9{width:75%;*width:74.9%}.col-xlg-8{width:66.6666666667%;*width:66.5666666667%}.col-xlg-7{width:58.3333333333%;*width:58.2333333333%}.col-xlg-6{width:50%;*width:49.9%}.col-xlg-5{width:41.6666666667%;*width:41.5666666667%}.col-xlg-4{width:33.3333333333%;*width:33.2333333333%}.col-xlg-3{width:25%;*width:24.9%}.col-xlg-2{width:16.6666666667%;*width:16.5666666667%}.col-xlg-1{width:8.3333333333%;*width:8.2333333333%}}.col-auto{flex:1 0 0px;width:auto}@media (min-width:576px){.col-xs-auto{flex:1 0 0px;width:auto}}@media (min-width:768px){.col-sm-auto{flex:1 0 0px;width:auto}}@media (min-width:992px){.col-md-auto{flex:1 0 0px;width:auto}}@media (min-width:1200px){.col-lg-auto{flex:1 0 0px;width:auto}}@media (min-width:1600px){.col-xlg-auto{flex:1 0 0px;width:auto}}.order-12{order:12}.order-11{order:11}.order-10{order:10}.order-9{order:9}.order-8{order:8}.order-7{order:7}.order-6{order:6}.order-5{order:5}.order-4{order:4}.order-3{order:3}.order-2{order:2}.order-1{order:1}.order-0{order:0}@media only screen and (min-width:576px){.order-xs-12{order:12}.order-xs-11{order:11}.order-xs-10{order:10}.order-xs-9{order:9}.order-xs-8{order:8}.order-xs-7{order:7}.order-xs-6{order:6}.order-xs-5{order:5}.order-xs-4{order:4}.order-xs-3{order:3}.order-xs-2{order:2}.order-xs-1{order:1}.order-xs-0{order:0}}@media only screen and (min-width:768px){.order-sm-12{order:12}.order-sm-11{order:11}.order-sm-10{order:10}.order-sm-9{order:9}.order-sm-8{order:8}.order-sm-7{order:7}.order-sm-6{order:6}.order-sm-5{order:5}.order-sm-4{order:4}.order-sm-3{order:3}.order-sm-2{order:2}.order-sm-1{order:1}.order-sm-0{order:0}}@media only screen and (min-width:992px){.order-md-12{order:12}.order-md-11{order:11}.order-md-10{order:10}.order-md-9{order:9}.order-md-8{order:8}.order-md-7{order:7}.order-md-6{order:6}.order-md-5{order:5}.order-md-4{order:4}.order-md-3{order:3}.order-md-2{order:2}.order-md-1{order:1}.order-md-0{order:0}}@media only screen and (min-width:1200px){.order-lg-12{order:12}.order-lg-11{order:11}.order-lg-10{order:10}.order-lg-9{order:9}.order-lg-8{order:8}.order-lg-7{order:7}.order-lg-6{order:6}.order-lg-5{order:5}.order-lg-4{order:4}.order-lg-3{order:3}.order-lg-2{order:2}.order-lg-1{order:1}.order-lg-0{order:0}}@media only screen and (min-width:1600px){.order-xlg-12{order:12}.order-xlg-11{order:11}.order-xlg-10{order:10}.order-xlg-9{order:9}.order-xlg-8{order:8}.order-xlg-7{order:7}.order-xlg-6{order:6}.order-xlg-5{order:5}.order-xlg-4{order:4}.order-xlg-3{order:3}.order-xlg-2{order:2}.order-xlg-1{order:1}.order-xlg-0{order:0}}.offset-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-9{margin-left:75%;*margin-left:74.9%}.offset-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-6{margin-left:50%;*margin-left:49.9%}.offset-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-3{margin-left:25%;*margin-left:24.9%}.offset-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}@media only screen and (min-width:576px){.offset-xs-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-xs-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-xs-9{margin-left:75%;*margin-left:74.9%}.offset-xs-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-xs-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-xs-6{margin-left:50%;*margin-left:49.9%}.offset-xs-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-xs-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-xs-3{margin-left:25%;*margin-left:24.9%}.offset-xs-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-xs-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}.offset-xs-0{margin-left:0;*margin-left:-.1%}}@media only screen and (min-width:768px){.offset-sm-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-sm-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-sm-9{margin-left:75%;*margin-left:74.9%}.offset-sm-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-sm-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-sm-6{margin-left:50%;*margin-left:49.9%}.offset-sm-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-sm-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-sm-3{margin-left:25%;*margin-left:24.9%}.offset-sm-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-sm-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}.offset-sm-0{margin-left:0;*margin-left:-.1%}}@media only screen and (min-width:992px){.offset-md-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-md-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-md-9{margin-left:75%;*margin-left:74.9%}.offset-md-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-md-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-md-6{margin-left:50%;*margin-left:49.9%}.offset-md-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-md-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-md-3{margin-left:25%;*margin-left:24.9%}.offset-md-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-md-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}.offset-md-0{margin-left:0;*margin-left:-.1%}}@media only screen and (min-width:1200px){.offset-lg-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-lg-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-lg-9{margin-left:75%;*margin-left:74.9%}.offset-lg-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-lg-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-lg-6{margin-left:50%;*margin-left:49.9%}.offset-lg-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-lg-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-lg-3{margin-left:25%;*margin-left:24.9%}.offset-lg-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-lg-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}.offset-lg-0{margin-left:0;*margin-left:-.1%}}@media only screen and (min-width:1600px){.offset-xlg-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-xlg-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-xlg-9{margin-left:75%;*margin-left:74.9%}.offset-xlg-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-xlg-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-xlg-6{margin-left:50%;*margin-left:49.9%}.offset-xlg-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-xlg-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-xlg-3{margin-left:25%;*margin-left:24.9%}.offset-xlg-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-xlg-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}.offset-xlg-0{margin-left:0;*margin-left:-.1%}}.wrap{flex-wrap:wrap}.no-wrap{flex-wrap:nowrap}.no-wrap [class*=col-]{flex-shrink:1}.wrap-reverse{flex-wrap:wrap-reverse}.direction-row{flex-direction:row}.direction-row-reverse{flex-direction:row-reverse}.direction-column{flex-direction:column}.direction-column-reverse{flex-direction:column-reverse}.align-start{align-items:flex-start}.align-end{align-items:flex-end}.align-end [class*=col-]{vertical-align:bottom}.align-center{align-items:center}.align-center [class*=col-]{vertical-align:middle}.align-baseline{align-items:baseline}.align-content-start{align-content:flex-start}.align-content-end{align-content:flex-end}.align-content-end [class*=col-]{vertical-align:bottom}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-self-stretch{align-self:stretch}.align-self-start{align-self:flex-start}.align-self-end{align-self:flex-end;vertical-align:bottom}.align-self-center{align-self:center;vertical-align:middle}.align-self-baseline{align-self:baseline;vertical-align:baseline}.justify-start{justify-content:flex-start}.justify-start.grid{text-align:left}.justify-end{justify-content:flex-end}.justify-end.grid{text-align:right;-moz-text-align-last:right;text-align-last:right}.justify-end.grid [class*=col-]{text-align:left;text-align:start;-moz-text-align-last:left;-moz-text-align-last:start;text-align-last:left;text-align-last:start}.justify-center{justify-content:center}.justify-center.grid{text-align:center;-moz-text-align-last:center;text-align-last:center}.justify-center.grid [class*=col-]{text-align:left;text-align:start;-moz-text-align-last:left;-moz-text-align-last:start;text-align-last:left;text-align-last:start}.justify-space-between{justify-content:space-between}.justify-space-between.grid{text-align:justify;-moz-text-align-last:justify;text-align-last:justify}.justify-space-between.grid [class*=col-]{text-align:left;text-align:start;-moz-text-align-last:left;-moz-text-align-last:start;text-align-last:left;text-align-last:start}.justify-space-around{justify-content:space-around}.justify-space-around.grid{text-align:justify;-moz-text-align-last:justify;text-align-last:justify}.justify-space-around.grid [class*=col-]{text-align:left;text-align:start;-moz-text-align-last:left;-moz-text-align-last:start;text-align-last:left;text-align-last:start}.grid-bleed [class*=col-]{padding:0}.col-grid{display:flex;flex-direction:column}.col-grid.direction-row{flex-direction:row}.col-bleed{padding:0}.col-bleed-x{padding:15px 0}.col-bleed-y{padding:0 15px}.flex-img{display:block;flex:0 0 auto;max-width:100%;height:auto;width:100%;*width:auto}.flex-footer{width:100%;margin-top:auto}.flex-footer,.flex-footer>:last-child{margin-bottom:0}@media (max-width:575px){.hidden-xxs{display:none}}@media (min-width:576px)and (max-width:767px){.hidden-xs{display:none}}@media (min-width:768px)and (max-width:991px){.hidden-sm{display:none}}@media (min-width:992px)and (max-width:1199px){.hidden-md{display:none}}@media (min-width:1200px)and (max-width:1599px){.hidden-lg{display:none}}@media (min-width:1600px){.hidden-xlg{display:none}}html{font-size:100%;line-height:1.15;-webkit-text-size-adjust:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}main{display:block}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}figure{margin:0 0 15px}@media only screen and (min-width:992px){figure{margin:0 0 20px}}figcaption{margin:10px 0}button,input,optgroup,select,textarea{margin:0}fieldset{padding:.4em .6em}button,select{text-transform:none}[type=button],[type=reset],[type=submit],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:1px dotted ButtonText}legend{box-sizing:border-box;display:table;max-width:100%;padding:0;white-space:normal}[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-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}hr{box-sizing:content-box;height:0;overflow:visible;border:0;border-top:1px solid #b3b2af;margin:.3em 0}progress{vertical-align:baseline}details{display:block}summary{display:list-item}code,kbd,pre,samp{font-family:Lucida Console,Monaco,monospace;font-size:1rem}@media only screen and (min-width:992px){code,kbd,pre,samp{font-size:1.1rem}}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:700;line-height:1.2;margin:0 0 15px}@media only screen and (min-width:992px){.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin:0 0 20px}}h5,h6{line-height:1.4}.h1,h1{font-size:2.25rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.82rem!important}}.h2,h2{font-size:1.8rem}@media only screen and (min-width:992px){.h2,h2{font-size:2.28rem!important}}.h3,h3{font-size:1.575rem}@media only screen and (min-width:992px){.h3,h3{font-size:2.01rem!important}}.h4,h4{font-size:1.35rem}@media only screen and (min-width:992px){.h4,h4{font-size:1.74rem!important}}.h5,h5{font-size:1.125rem}@media only screen and (min-width:992px){.h5,h5{font-size:1.47rem!important}}.h6,h6{font-size:.9rem}@media only screen and (min-width:992px){.h6,h6{font-size:1.2rem!important}}p{margin:0 0 15px}@media only screen and (min-width:992px){p{margin:0 0 20px}}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:70%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.25em}blockquote{border-left:1px solid #dfdfdf;margin-left:0;padding:.4em .6em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 15px}@media only screen and (min-width:992px){dl,ol,ul{margin:0 0 20px}}ol,ul{margin-left:1.5em}ol ol,ul ul{margin-top:0;margin-left:1em}ol{list-style:decimal outside}ul{list-style:disc outside}dl{margin-left:.5em}dd,dt{margin:0}dt{font-weight:700}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}body{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;color:#363636;background-color:#fff;direction:ltr;font-size:.9rem;line-height:1.4}@media only screen and (min-width:992px){body{line-height:1.618;font-size:1.1rem}}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalize{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-light{font-weight:lighter!important}.text-normal{font-weight:400!important}.text-medium{font-weight:medium!important}.text-bold{font-weight:bolder!important}.text-size-default{font-size:.9rem!important}@media only screen and (min-width:992px){.text-size-default{font-size:1.1rem!important}}.text-size-small{font-size:.675rem!important}@media only screen and (min-width:992px){.text-size-small{font-size:.8525rem!important}}.text-size-medium{font-size:1.125rem!important}@media only screen and (min-width:992px){.text-size-medium{font-size:1.3475rem!important}}.text-size-large{font-size:1.35rem!important}@media only screen and (min-width:992px){.text-size-large{font-size:1.595rem!important}}.text-size-big{font-size:1.575rem!important}@media only screen and (min-width:992px){.text-size-big{font-size:1.8425rem!important}}.text-size-mega{font-size:1.8rem!important}@media only screen and (min-width:992px){.text-size-mega{font-size:2.09rem!important}}.float-left{float:left}.float-right{float:right}.float-none{float:none}.centered{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.text-color-primary{color:#f18f01!important}.text-color-secondary{color:#b3b2af!important}.text-color-success{color:#5cb85c!important}.text-color-warning{color:#f0ad4e!important}.text-color-danger{color:#d9534f!important}.text-color-info{color:#0090d4!important}.text-color-grey{color:#7a7a7a!important}.text-color-grey-light{color:#f7f7f7!important}.text-color-grey-dark{color:#4a4a4a!important}.text-color-white{color:#fff!important}.border-color-primary{border-color:#f18f01!important}.border-color-secondary{border-color:#b3b2af!important}.border-color-success{border-color:#5cb85c!important}.border-color-warning{border-color:#f0ad4e!important}.border-color-danger{border-color:#d9534f!important}.border-color-info{border-color:#0090d4!important}.border-color-grey{border-color:#7a7a7a!important}.border-color-grey-light{border-color:#f7f7f7!important}.border-color-grey-dark{border-color:#4a4a4a!important}.border-color-white{border-color:#fff!important}.background-color-primary{background-color:#f18f01!important}.background-color-secondary{background-color:#b3b2af!important}.background-color-success{background-color:#5cb85c!important}.background-color-warning{background-color:#f0ad4e!important}.background-color-danger{background-color:#d9534f!important}.background-color-info{background-color:#0090d4!important}.background-color-grey{background-color:#7a7a7a!important}.background-color-grey-light{background-color:#f7f7f7!important}.background-color-grey-dark{background-color:#4a4a4a!important}.background-color-white{background-color:#fff!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hide{display:none!important}@media only screen and (min-width:576px){.hide-xs{display:none!important}}@media only screen and (min-width:768px){.hide-sm{display:none!important}}@media only screen and (min-width:992px){.hide-md{display:none!important}}@media only screen and (min-width:1200px){.hide-lg{display:none!important}}@media only screen and (min-width:1600px){.hide-xlg{display:none!important}}.show{display:block!important}.show--inline{display:inline!important}.show--inline-block{display:inline-block!important}@media only screen and (min-width:576px){.show-xs{display:block!important}.show-xs--inline{display:inline!important}.show-xs--inline-block{display:inline-block!important}}@media only screen and (min-width:768px){.show-sm{display:block!important}.show-sm--inline{display:inline!important}.show-sm--inline-block{display:inline-block!important}}@media only screen and (min-width:992px){.show-md{display:block!important}.show-md--inline{display:inline!important}.show-md--inline-block{display:inline-block!important}}@media only screen and (min-width:1200px){.show-lg{display:block!important}.show-lg--inline{display:inline!important}.show-lg--inline-block{display:inline-block!important}}@media only screen and (min-width:1600px){.show-xlg{display:block!important}.show-xlg--inline{display:inline!important}.show-xlg--inline-block{display:inline-block!important}}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:3px!important}.round{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-top-0{margin-top:0!important}.margin-bottom-0{margin-bottom:0!important}.padding-top-0{padding-top:0!important}.padding-bottom-0{padding-bottom:0!important}.margin-left-0{margin-left:0!important}.margin-right-0{margin-right:0!important}.padding-left-0{padding-left:0!important}.padding-right-0{padding-right:0!important}.margin-top-1{margin-top:4px!important}@media only screen and (min-width:992px){.margin-top-1{margin-top:6px!important}}.margin-bottom-1{margin-bottom:4px!important}@media only screen and (min-width:992px){.margin-bottom-1{margin-bottom:6px!important}}.padding-top-1{padding-top:8px!important}@media only screen and (min-width:992px){.padding-top-1{padding-top:6px!important}}.padding-bottom-1{padding-bottom:8px!important}@media only screen and (min-width:992px){.padding-bottom-1{padding-bottom:6px!important}}.margin-left-1{margin-left:8px!important}@media only screen and (min-width:992px){.margin-left-1{margin-left:6px!important}}.margin-right-1{margin-right:8px!important}@media only screen and (min-width:992px){.margin-right-1{margin-right:6px!important}}.padding-left-1{padding-left:8px!important}@media only screen and (min-width:992px){.padding-left-1{padding-left:6px!important}}.padding-right-1{padding-right:8px!important}@media only screen and (min-width:992px){.padding-right-1{padding-right:6px!important}}.margin-top-2{margin-top:16px!important}@media only screen and (min-width:992px){.margin-top-2{margin-top:24px!important}}.margin-bottom-2{margin-bottom:16px!important}@media only screen and (min-width:992px){.margin-bottom-2{margin-bottom:24px!important}}.padding-top-2{padding-top:16px!important}@media only screen and (min-width:992px){.padding-top-2{padding-top:24px!important}}.padding-bottom-2{padding-bottom:16px!important}@media only screen and (min-width:992px){.padding-bottom-2{padding-bottom:24px!important}}.margin-left-2{margin-left:16px!important}@media only screen and (min-width:992px){.margin-left-2{margin-left:24px!important}}.margin-right-2{margin-right:16px!important}@media only screen and (min-width:992px){.margin-right-2{margin-right:24px!important}}.padding-left-2{padding-left:16px!important}@media only screen and (min-width:992px){.padding-left-2{padding-left:24px!important}}.padding-right-2{padding-right:16px!important}@media only screen and (min-width:992px){.padding-right-2{padding-right:24px!important}}.margin-top-3{margin-top:36px!important}@media only screen and (min-width:992px){.margin-top-3{margin-top:54px!important}}.margin-bottom-3{margin-bottom:36px!important}@media only screen and (min-width:992px){.margin-bottom-3{margin-bottom:54px!important}}.padding-top-3{padding-top:24px!important}@media only screen and (min-width:992px){.padding-top-3{padding-top:54px!important}}.padding-bottom-3{padding-bottom:24px!important}@media only screen and (min-width:992px){.padding-bottom-3{padding-bottom:54px!important}}.margin-top-4{margin-top:64px!important}@media only screen and (min-width:992px){.margin-top-4{margin-top:96px!important}}.margin-bottom-4{margin-bottom:64px!important}@media only screen and (min-width:992px){.margin-bottom-4{margin-bottom:96px!important}}.padding-top-4{padding-top:32px!important}@media only screen and (min-width:992px){.padding-top-4{padding-top:96px!important}}.padding-bottom-4{padding-bottom:32px!important}@media only screen and (min-width:992px){.padding-bottom-4{padding-bottom:96px!important}}.margin-top-5{margin-top:100px!important}@media only screen and (min-width:992px){.margin-top-5{margin-top:150px!important}}.margin-bottom-5{margin-bottom:100px!important}@media only screen and (min-width:992px){.margin-bottom-5{margin-bottom:150px!important}}.padding-top-5{padding-top:40px!important}@media only screen and (min-width:992px){.padding-top-5{padding-top:150px!important}}.padding-bottom-5{padding-bottom:40px!important}@media only screen and (min-width:992px){.padding-bottom-5{padding-bottom:150px!important}}.margin-top-6{margin-top:144px!important}@media only screen and (min-width:992px){.margin-top-6{margin-top:216px!important}}.margin-bottom-6{margin-bottom:144px!important}@media only screen and (min-width:992px){.margin-bottom-6{margin-bottom:216px!important}}.padding-top-6{padding-top:48px!important}@media only screen and (min-width:992px){.padding-top-6{padding-top:216px!important}}.padding-bottom-6{padding-bottom:48px!important}@media only screen and (min-width:992px){.padding-bottom-6{padding-bottom:216px!important}}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;display:inline-block;text-decoration:none;font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:.9rem;margin:0 0 15px;padding:.4em .8em}@media only screen and (min-width:992px){.button{font-size:1.1rem;margin:0 0 20px;padding:.6em 1.2em}}.button:hover{cursor:pointer;text-decoration:none}.button:focus{outline:none}.code{white-space:pre;display:block;overflow-y:hidden;overflow-x:auto;border:1px solid #dfdfdf;background-color:#f7f7f7;margin:0 0 15px;padding:.4em .6em}@media only screen and (min-width:992px){.code{margin:0 0 20px;padding:.8em 1.1em}}.progress{border:1px solid #dfdfdf}.progress__inner{height:30px;background-color:#f18f01}.field{margin:0 0 15px}@media only screen and (min-width:992px){.field{margin:0 0 20px}}.field__label,.field__select,.field__text{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:.9rem}@media only screen and (min-width:992px){.field__label,.field__select,.field__text{font-size:1.1rem}}.field__select,.field__text{display:block;width:100%;color:#363636;-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:.5em .6em}@media only screen and (min-width:992px){.field__select,.field__text{padding:.7em .8em}}.field__label{display:inline-block;width:100%}.field--valid .field__label{color:#5cb85c}.field--error .field__label{color:#d9534f}.field__text{margin:0;border:1px solid #dfdfdf}.field__text:focus{border-color:#f18f01}.field--valid .field__select,.field--valid .field__text{border-color:#5cb85c}.field--error .field__select,.field--error .field__text{border-color:#d9534f}.field__select{border:1px solid #dfdfdf;background-color:#fff;padding:.5em .3em}@media only screen and (min-width:992px){.field__select{padding:.7em .6em}}.field__select:focus{outline:0;border-color:#f18f01}.field__choice{position:relative;display:none}.field__choice+.field__label .field__choice__checked{display:none}.field__choice+.field__label:hover{cursor:pointer}.field__choice:checked+.field__label .field__choice__checked{display:inline-block}.field__choice:checked+.field__label .field__choice__unchecked{display:none}.field__choice__checked{fill:#5cb85c}.field__choice__unchecked{fill:#d9534f}.field__choice+.field__label+.field__panel{margin:.3em 0 0}.field--valid .field__choice__checked,.field--valid .field__choice__unchecked{fill:#5cb85c}.field--error .field__choice__checked,.field--error .field__choice__unchecked{fill:#d9534f}.field__panel{padding:.5em .6em}@media only screen and (min-width:992px){.field__panel{padding:.7em .8em}}.field--valid .field__panel{color:#fff;background-color:#5cb85c}.field--error .field__panel{color:#fff;background-color:#d9534f}.group{list-style:none;display:inline-block}.group,.group li{margin:0;padding:0}.group .group__item{display:inline-block;margin:0 .3em}.group--hr .group__item,.group .group__item:last-child:after{margin:0}.group--hr .group__item:after{margin:0 .3em;content:"/"}.group--hr .group__item:last-child:after{display:none}.hero{background-position:50%;background-repeat:no-repeat;background-size:cover;position:relative}.hero--top{background-position:top}.hero--bottom{background-position:bottom}.hero--contain{background-size:contain}.icon{width:1.15em;height:1.15em;max-height:100%;max-width:100%;vertical-align:middle;overflow:hidden;line-height:1.4}.icon-color-primary{fill:#f18f01!important}.icon-color-secondary{fill:#b3b2af!important}.icon-color-success{fill:#5cb85c!important}.icon-color-warning{fill:#f0ad4e!important}.icon-color-danger{fill:#d9534f!important}.icon-color-info{fill:#0090d4!important}.icon-color-grey{fill:#7a7a7a!important}.icon-color-grey-light{fill:#f7f7f7!important}.icon-color-grey-dark{fill:#4a4a4a!important}.icon-color-white{fill:#fff!important}.img-responsive{display:block;max-width:100%;height:auto}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.modal{position:absolute;z-index:100;width:100%;margin:0;top:50%;left:50%;transform:translate(-50%,-50%)}@media only screen and (min-width:992px){.modal{max-width:50%}}.modal--fixed{position:fixed}.modal--bottom-left,.modal--center-left,.modal--top-left{left:0}.modal--bottom-right,.modal--center-right,.modal--top-right{right:0;left:unset}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right,.modal--center-left,.modal--center-right,.modal--top-center,.modal--top-left,.modal--top-right{transform:translate(0)}@media only screen and (min-width:992px){.modal--bottom-center,.modal--bottom-left,.modal--bottom-right,.modal--center-left,.modal--center-right,.modal--top-center,.modal--top-left,.modal--top-right{margin:.75em}}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right{bottom:0;top:unset}.modal--center-left,.modal--center-right{transform:translateY(-50%);margin-top:0;margin-bottom:0}.modal--bottom-center,.modal--top-center{transform:translate(-50%)}.modal--top-center,.modal--top-left,.modal--top-right{top:0}.overlay{position:fixed;top:0;left:0;z-index:90;width:100%;height:100%;background-color:#000}.panel{background-color:#f7f7f7}.panel__inner{padding:.4em .6em}@media only screen and (min-width:992px){.panel__inner{padding:.8em 1.1em}}.table{width:100%}.table--striped tr:nth-child(2n){background-color:#f7f7f7}.table--scroll{overflow-x:auto}.table td{color:#363636}.table td,.table th{text-align:left;border-bottom:1px solid #dfdfdf;padding:.4em .6em}@media only screen and (min-width:992px){.table td,.table th{padding:.8em 1.1em}}.table th{border-bottom-width:2px}.triangle-bottom,.triangle-left,.triangle-right,.triangle-top{display:block}.triangle-left{border-right:1.5em solid #f18f01}.triangle-left,.triangle-right{width:0;height:0;content:"";z-index:2;border-bottom:1em solid transparent;border-top:1em solid transparent}.triangle-right{border-left:1.5em solid #f18f01}.triangle-top{border-bottom:1.5em solid #f18f01}.triangle-bottom,.triangle-top{width:0;height:0;content:"";z-index:2;border-left:1em solid transparent;border-right:1em solid transparent}.triangle-bottom{border-top:1.5em solid #f18f01}.header{max-width:100%}.header a{text-decoration:none}.header a .icon--big{font-size:6rem}.header a:hover{color:#f18f01}.header .group__item{margin-right:10px}.header--fixed{position:fixed;top:0;left:0;width:100%;z-index:101}.h3__icon{display:inline-block;border-radius:50%;padding:.9em;margin:0 0 .5em}.h3__icon .icon{font-size:3rem!important}.container{max-width:1200px}
\ No newline at end of file
diff --git a/dist/examples/symbol-defs.svg b/dist/example/symbol-defs.svg
similarity index 100%
rename from dist/examples/symbol-defs.svg
rename to dist/example/symbol-defs.svg
diff --git a/dist/examples/core.html b/dist/examples/core.html
deleted file mode 100644
index 5ff5864..0000000
--- a/dist/examples/core.html
+++ /dev/null
@@ -1 +0,0 @@
-Core | Crispy CSS
 Crispy CSS
Core
Normalize
a
Link
Typography
Heading
Heading h1
Heading h2
Heading h3
Heading h4
Heading h5
Heading h6
abbr
Glossier viral occupy mixtape pok pok cornhole, vape affogato hella knausgaard thundercats
blockquote
Hoodie kickstarter four loko, pinterest hashtag chambray glossier. Pug before they sold out etsy listicle. Deep v bespoke tacos polaroid, squid flexitarian crucifix messenger bag.
hr
paragraph
Glossier viral occupy mixtape pok pok.
mark
Pug before they four loko Deep v bespoke
list
  • item 1
  • item 2
    • child item 1
    • child item 2
  1. item 1
  2. item 2
defined title 1
defined item 1

\ No newline at end of file
diff --git a/dist/examples/functions.html b/dist/examples/functions.html
deleted file mode 100644
index 0252e96..0000000
--- a/dist/examples/functions.html
+++ /dev/null
@@ -1,4 +0,0 @@
-Functions | Crispy CSS
 Crispy CSS
Functions
stripUnit()
Sass:
stripUnit(10px);
Returns value without unit.
zIndex(name)
Sass:
zIndex('modal');
Returns value from $crispy__z-index.
Sass:
$crispy__z-index: (
-    'overlay': 90,
-    'modal'  : 100
-);

\ No newline at end of file
diff --git a/dist/examples/getstarted.html b/dist/examples/getstarted.html
deleted file mode 100644
index 18bb76e..0000000
--- a/dist/examples/getstarted.html
+++ /dev/null
@@ -1,16 +0,0 @@
-Get Started | Crispy CSS
 Crispy CSS
Get Started
Installation
npm install crispy-css
SCSS
@import "crispy";
Now include Mixins you need. Components and Modifiziers only works if you include them,
@include crispy__button();
-@include crispy__code();
-@include crispy__field();
-@include crispy__group();
-@include crispy__hero();
-@include crispy__icon();
-@include crispy__media();
-@include crispy__modal();
-@include crispy__overlay();
-@include crispy__panel();
-@include crispy__progress();
-@include crispy__table();
For Custom Variables add a File before importing Crispy,
@import
-    "config",
-    "crispy";
If you need all, mixins will be included,
@import
-    "crispy-all";
Only need Core and Modifiziers?
@import
-    "crispy-minimal";
CSS
For using CSS you can use crispy-all.css for all Styles or crispy-mininmal.css without Components.
Example
You find an example in "/src/example", this is this Documentation. In the given example there are additional directories. These ones are part of a structure which might be helpful for you.
Site
Contains header, footer, partials that are used on a site or webapp. Header and Footer are not classical components, there often more complex and have a special brand.
Templates
Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components.

\ No newline at end of file
diff --git a/dist/examples/getting-started.html b/dist/examples/getting-started.html
deleted file mode 100644
index e5d8caf..0000000
--- a/dist/examples/getting-started.html
+++ /dev/null
@@ -1,16 +0,0 @@
-Getting started! | Crispy CSS
 Crispy CSS
Getting started!
Installation
npm install crispy-css
Scss
@import "crispy";
Now include Mixins you need. Components and Modifiziers only works if you include them,
@include crispy__button();
-@include crispy__code();
-@include crispy__field();
-@include crispy__group();
-@include crispy__hero();
-@include crispy__icon();
-@include crispy__media();
-@include crispy__modal();
-@include crispy__overlay();
-@include crispy__panel();
-@include crispy__progress();
-@include crispy__table();
For Custom Variables add a File before importing Crispy,
@import
-    "config",
-    "crispy";
If you need all, mixins will be included,
@import
-    "crispy-all";
Only need Core and Modifiziers?
@import
-    "crispy-minimal";
CSS
For using CSS you can use crispy-all.css for all Styles or crispy-mininmal.css without Components.
Example
You find an example in "/src/example", this is this Documentation. In the given example there are additional directories. These ones are part of a structure which might be helpful for you.
Site
Contains header, footer, partials that are used on a site or webapp. Header and Footer are not classical components, there often more complex and have a special brand.
Templates
Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components.

\ No newline at end of file
diff --git a/dist/examples/helpers.html b/dist/examples/helpers.html
deleted file mode 100644
index f7e98c7..0000000
--- a/dist/examples/helpers.html
+++ /dev/null
@@ -1 +0,0 @@
-Helpers | Crispy CSS
 Crispy CSS
Helpers
Border
.round
.radiusless
.bordered
.rounded
.borderless
Margin / Padding
padding-bottom-0
padding-bottom-1
padding-bottom-2
padding-bottom-3
padding-bottom-4
padding-bottom-5
padding-bottom-6
Typography
text-left
text-center
text-right
text-justify
I'm baby literally tousled ramps 8-bit franzen, yuccie before they sold out stumptown XOXO palo santo. Blog taiyaki vegan crucifix. Mustache raw denim shabby chic vegan hexagon aesthetic deep v tofu man braid church-key pork belly unicorn pinterest. Palo santo heirloom banh mi waistcoat, neutra listicle selvage sustainable adaptogen tote bag art party migas ethical PBR&B 8-bit. Chillwave hammock VHS post-ironic, tumblr brunch normcore blue bottle chambray. Austin vice microdosing celiac. Bushwick blog farm-to-table succulents mlkshk actually.
text-italic
text-light
text-normal
text-medium
text-bold
text-capitalize
text-uppercase
text-smaller
text-crossed
text-underline
Width
width-25
width-50
width-75
width-100

\ No newline at end of file
diff --git a/dist/examples/imprint.html b/dist/examples/imprint.html
deleted file mode 100644
index 6dddcf4..0000000
--- a/dist/examples/imprint.html
+++ /dev/null
@@ -1 +0,0 @@
-Imprint | Crispy CSS
 Crispy CSS
Imprint

\ No newline at end of file
diff --git a/dist/examples/index.html b/dist/examples/index.html
deleted file mode 100644
index 2161998..0000000
--- a/dist/examples/index.html
+++ /dev/null
@@ -1 +0,0 @@
-Crispy CSS | Lightweight CSS Framework for Building Apps and Websites
Ugly
Yes, this Framework has no fancy Layout or shiny Elements, because what created with Crispy CSS could be fancy. This Framework adds basic styles and support your Work.
Helpers
Mixins, Functions and Modifiers make your Workflow simpler. Only import Components you really need and make your Work lightweight.
Coding Style
Crispy CSS uses BEM, but an simpler approach of it. BEM is good to show dependencies in Components and add structure to your Styles.
Get started!  Visit on Github 
Apps and Websites that have been crafted
Tentakelfabrik
Gaming Circus
Trinkkofi

\ No newline at end of file
diff --git a/dist/examples/privacy-policy.html b/dist/examples/privacy-policy.html
deleted file mode 100644
index ac46588..0000000
--- a/dist/examples/privacy-policy.html
+++ /dev/null
@@ -1 +0,0 @@
-Privacy Policy | Crispy CSS
 Crispy CSS
Privacy Policy

\ No newline at end of file
diff --git a/dist/examples/styles.css b/dist/examples/styles.css
deleted file mode 100644
index 20b29d0..0000000
--- a/dist/examples/styles.css
+++ /dev/null
@@ -1 +0,0 @@
-.container,.container-full{box-sizing:border-box;width:100%;margin-right:auto;margin-left:auto;padding-right:30px;padding-left:30px}.container-full .grid,.container .grid{margin-right:-15px;margin-left:-15px}@media (min-width:576px){.container{max-width:576px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:992px){.container{max-width:992px}}@media (min-width:1200px){.container{max-width:1200px}}@media (min-width:1600px){.container{max-width:1600px}}.grid{box-sizing:border-box;display:block;display:flex;flex-wrap:wrap;padding:0;margin:0 auto;position:relative;letter-spacing:-.31em;*letter-spacing:normal;word-spacing:-.43em;list-style-type:none}.grid:after,.grid:before,[class*=col-]{box-sizing:border-box;letter-spacing:normal;word-spacing:normal;white-space:normal}[class*=col-]{position:relative;width:100%;vertical-align:top;padding:15px;display:inline-block;*display:inline;zoom:1}[class*=col-]:after,[class*=col-]:before{box-sizing:border-box;letter-spacing:normal;word-spacing:normal;white-space:normal}[class*=col-] .grid{flex:1 1 auto;margin:-15px}.col-12{width:100%;*width:99.9%}.col-11{width:91.6666666667%;*width:91.5666666667%}.col-10{width:83.3333333333%;*width:83.2333333333%}.col-9{width:75%;*width:74.9%}.col-8{width:66.6666666667%;*width:66.5666666667%}.col-7{width:58.3333333333%;*width:58.2333333333%}.col-6{width:50%;*width:49.9%}.col-5{width:41.6666666667%;*width:41.5666666667%}.col-4{width:33.3333333333%;*width:33.2333333333%}.col-3{width:25%;*width:24.9%}.col-2{width:16.6666666667%;*width:16.5666666667%}.col-1{width:8.3333333333%;*width:8.2333333333%}@media (min-width:576px){.col-xs-12{width:100%;*width:99.9%}.col-xs-11{width:91.6666666667%;*width:91.5666666667%}.col-xs-10{width:83.3333333333%;*width:83.2333333333%}.col-xs-9{width:75%;*width:74.9%}.col-xs-8{width:66.6666666667%;*width:66.5666666667%}.col-xs-7{width:58.3333333333%;*width:58.2333333333%}.col-xs-6{width:50%;*width:49.9%}.col-xs-5{width:41.6666666667%;*width:41.5666666667%}.col-xs-4{width:33.3333333333%;*width:33.2333333333%}.col-xs-3{width:25%;*width:24.9%}.col-xs-2{width:16.6666666667%;*width:16.5666666667%}.col-xs-1{width:8.3333333333%;*width:8.2333333333%}}@media (min-width:768px){.col-sm-12{width:100%;*width:99.9%}.col-sm-11{width:91.6666666667%;*width:91.5666666667%}.col-sm-10{width:83.3333333333%;*width:83.2333333333%}.col-sm-9{width:75%;*width:74.9%}.col-sm-8{width:66.6666666667%;*width:66.5666666667%}.col-sm-7{width:58.3333333333%;*width:58.2333333333%}.col-sm-6{width:50%;*width:49.9%}.col-sm-5{width:41.6666666667%;*width:41.5666666667%}.col-sm-4{width:33.3333333333%;*width:33.2333333333%}.col-sm-3{width:25%;*width:24.9%}.col-sm-2{width:16.6666666667%;*width:16.5666666667%}.col-sm-1{width:8.3333333333%;*width:8.2333333333%}}@media (min-width:992px){.col-md-12{width:100%;*width:99.9%}.col-md-11{width:91.6666666667%;*width:91.5666666667%}.col-md-10{width:83.3333333333%;*width:83.2333333333%}.col-md-9{width:75%;*width:74.9%}.col-md-8{width:66.6666666667%;*width:66.5666666667%}.col-md-7{width:58.3333333333%;*width:58.2333333333%}.col-md-6{width:50%;*width:49.9%}.col-md-5{width:41.6666666667%;*width:41.5666666667%}.col-md-4{width:33.3333333333%;*width:33.2333333333%}.col-md-3{width:25%;*width:24.9%}.col-md-2{width:16.6666666667%;*width:16.5666666667%}.col-md-1{width:8.3333333333%;*width:8.2333333333%}}@media (min-width:1200px){.col-lg-12{width:100%;*width:99.9%}.col-lg-11{width:91.6666666667%;*width:91.5666666667%}.col-lg-10{width:83.3333333333%;*width:83.2333333333%}.col-lg-9{width:75%;*width:74.9%}.col-lg-8{width:66.6666666667%;*width:66.5666666667%}.col-lg-7{width:58.3333333333%;*width:58.2333333333%}.col-lg-6{width:50%;*width:49.9%}.col-lg-5{width:41.6666666667%;*width:41.5666666667%}.col-lg-4{width:33.3333333333%;*width:33.2333333333%}.col-lg-3{width:25%;*width:24.9%}.col-lg-2{width:16.6666666667%;*width:16.5666666667%}.col-lg-1{width:8.3333333333%;*width:8.2333333333%}}@media (min-width:1600px){.col-xlg-12{width:100%;*width:99.9%}.col-xlg-11{width:91.6666666667%;*width:91.5666666667%}.col-xlg-10{width:83.3333333333%;*width:83.2333333333%}.col-xlg-9{width:75%;*width:74.9%}.col-xlg-8{width:66.6666666667%;*width:66.5666666667%}.col-xlg-7{width:58.3333333333%;*width:58.2333333333%}.col-xlg-6{width:50%;*width:49.9%}.col-xlg-5{width:41.6666666667%;*width:41.5666666667%}.col-xlg-4{width:33.3333333333%;*width:33.2333333333%}.col-xlg-3{width:25%;*width:24.9%}.col-xlg-2{width:16.6666666667%;*width:16.5666666667%}.col-xlg-1{width:8.3333333333%;*width:8.2333333333%}}.col-auto{flex:1 0 0px;width:auto}@media (min-width:576px){.col-xs-auto{flex:1 0 0px;width:auto}}@media (min-width:768px){.col-sm-auto{flex:1 0 0px;width:auto}}@media (min-width:992px){.col-md-auto{flex:1 0 0px;width:auto}}@media (min-width:1200px){.col-lg-auto{flex:1 0 0px;width:auto}}@media (min-width:1600px){.col-xlg-auto{flex:1 0 0px;width:auto}}.order-12{order:12}.order-11{order:11}.order-10{order:10}.order-9{order:9}.order-8{order:8}.order-7{order:7}.order-6{order:6}.order-5{order:5}.order-4{order:4}.order-3{order:3}.order-2{order:2}.order-1{order:1}.order-0{order:0}@media only screen and (min-width:576px){.order-xs-12{order:12}.order-xs-11{order:11}.order-xs-10{order:10}.order-xs-9{order:9}.order-xs-8{order:8}.order-xs-7{order:7}.order-xs-6{order:6}.order-xs-5{order:5}.order-xs-4{order:4}.order-xs-3{order:3}.order-xs-2{order:2}.order-xs-1{order:1}.order-xs-0{order:0}}@media only screen and (min-width:768px){.order-sm-12{order:12}.order-sm-11{order:11}.order-sm-10{order:10}.order-sm-9{order:9}.order-sm-8{order:8}.order-sm-7{order:7}.order-sm-6{order:6}.order-sm-5{order:5}.order-sm-4{order:4}.order-sm-3{order:3}.order-sm-2{order:2}.order-sm-1{order:1}.order-sm-0{order:0}}@media only screen and (min-width:992px){.order-md-12{order:12}.order-md-11{order:11}.order-md-10{order:10}.order-md-9{order:9}.order-md-8{order:8}.order-md-7{order:7}.order-md-6{order:6}.order-md-5{order:5}.order-md-4{order:4}.order-md-3{order:3}.order-md-2{order:2}.order-md-1{order:1}.order-md-0{order:0}}@media only screen and (min-width:1200px){.order-lg-12{order:12}.order-lg-11{order:11}.order-lg-10{order:10}.order-lg-9{order:9}.order-lg-8{order:8}.order-lg-7{order:7}.order-lg-6{order:6}.order-lg-5{order:5}.order-lg-4{order:4}.order-lg-3{order:3}.order-lg-2{order:2}.order-lg-1{order:1}.order-lg-0{order:0}}@media only screen and (min-width:1600px){.order-xlg-12{order:12}.order-xlg-11{order:11}.order-xlg-10{order:10}.order-xlg-9{order:9}.order-xlg-8{order:8}.order-xlg-7{order:7}.order-xlg-6{order:6}.order-xlg-5{order:5}.order-xlg-4{order:4}.order-xlg-3{order:3}.order-xlg-2{order:2}.order-xlg-1{order:1}.order-xlg-0{order:0}}.offset-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-9{margin-left:75%;*margin-left:74.9%}.offset-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-6{margin-left:50%;*margin-left:49.9%}.offset-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-3{margin-left:25%;*margin-left:24.9%}.offset-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}@media only screen and (min-width:576px){.offset-xs-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-xs-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-xs-9{margin-left:75%;*margin-left:74.9%}.offset-xs-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-xs-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-xs-6{margin-left:50%;*margin-left:49.9%}.offset-xs-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-xs-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-xs-3{margin-left:25%;*margin-left:24.9%}.offset-xs-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-xs-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}.offset-xs-0{margin-left:0;*margin-left:-.1%}}@media only screen and (min-width:768px){.offset-sm-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-sm-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-sm-9{margin-left:75%;*margin-left:74.9%}.offset-sm-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-sm-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-sm-6{margin-left:50%;*margin-left:49.9%}.offset-sm-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-sm-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-sm-3{margin-left:25%;*margin-left:24.9%}.offset-sm-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-sm-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}.offset-sm-0{margin-left:0;*margin-left:-.1%}}@media only screen and (min-width:992px){.offset-md-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-md-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-md-9{margin-left:75%;*margin-left:74.9%}.offset-md-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-md-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-md-6{margin-left:50%;*margin-left:49.9%}.offset-md-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-md-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-md-3{margin-left:25%;*margin-left:24.9%}.offset-md-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-md-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}.offset-md-0{margin-left:0;*margin-left:-.1%}}@media only screen and (min-width:1200px){.offset-lg-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-lg-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-lg-9{margin-left:75%;*margin-left:74.9%}.offset-lg-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-lg-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-lg-6{margin-left:50%;*margin-left:49.9%}.offset-lg-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-lg-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-lg-3{margin-left:25%;*margin-left:24.9%}.offset-lg-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-lg-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}.offset-lg-0{margin-left:0;*margin-left:-.1%}}@media only screen and (min-width:1600px){.offset-xlg-11{margin-left:91.6666666667%;*margin-left:91.5666666667%}.offset-xlg-10{margin-left:83.3333333333%;*margin-left:83.2333333333%}.offset-xlg-9{margin-left:75%;*margin-left:74.9%}.offset-xlg-8{margin-left:66.6666666667%;*margin-left:66.5666666667%}.offset-xlg-7{margin-left:58.3333333333%;*margin-left:58.2333333333%}.offset-xlg-6{margin-left:50%;*margin-left:49.9%}.offset-xlg-5{margin-left:41.6666666667%;*margin-left:41.5666666667%}.offset-xlg-4{margin-left:33.3333333333%;*margin-left:33.2333333333%}.offset-xlg-3{margin-left:25%;*margin-left:24.9%}.offset-xlg-2{margin-left:16.6666666667%;*margin-left:16.5666666667%}.offset-xlg-1{margin-left:8.3333333333%;*margin-left:8.2333333333%}.offset-xlg-0{margin-left:0;*margin-left:-.1%}}.wrap{flex-wrap:wrap}.no-wrap{flex-wrap:nowrap}.no-wrap [class*=col-]{flex-shrink:1}.wrap-reverse{flex-wrap:wrap-reverse}.direction-row{flex-direction:row}.direction-row-reverse{flex-direction:row-reverse}.direction-column{flex-direction:column}.direction-column-reverse{flex-direction:column-reverse}.align-start{align-items:flex-start}.align-end{align-items:flex-end}.align-end [class*=col-]{vertical-align:bottom}.align-center{align-items:center}.align-center [class*=col-]{vertical-align:middle}.align-baseline{align-items:baseline}.align-content-start{align-content:flex-start}.align-content-end{align-content:flex-end}.align-content-end [class*=col-]{vertical-align:bottom}.align-content-center{align-content:center}.align-content-space-between{align-content:space-between}.align-content-space-around{align-content:space-around}.align-self-stretch{align-self:stretch}.align-self-start{align-self:flex-start}.align-self-end{align-self:flex-end;vertical-align:bottom}.align-self-center{align-self:center;vertical-align:middle}.align-self-baseline{align-self:baseline;vertical-align:baseline}.justify-start{justify-content:flex-start}.justify-start.grid{text-align:left}.justify-end{justify-content:flex-end}.justify-end.grid{text-align:right;-moz-text-align-last:right;text-align-last:right}.justify-end.grid [class*=col-]{text-align:left;text-align:start;-moz-text-align-last:left;-moz-text-align-last:start;text-align-last:left;text-align-last:start}.justify-center{justify-content:center}.justify-center.grid{text-align:center;-moz-text-align-last:center;text-align-last:center}.justify-center.grid [class*=col-]{text-align:left;text-align:start;-moz-text-align-last:left;-moz-text-align-last:start;text-align-last:left;text-align-last:start}.justify-space-between{justify-content:space-between}.justify-space-between.grid{text-align:justify;-moz-text-align-last:justify;text-align-last:justify}.justify-space-between.grid [class*=col-]{text-align:left;text-align:start;-moz-text-align-last:left;-moz-text-align-last:start;text-align-last:left;text-align-last:start}.justify-space-around{justify-content:space-around}.justify-space-around.grid{text-align:justify;-moz-text-align-last:justify;text-align-last:justify}.justify-space-around.grid [class*=col-]{text-align:left;text-align:start;-moz-text-align-last:left;-moz-text-align-last:start;text-align-last:left;text-align-last:start}.grid-bleed [class*=col-]{padding:0}.col-grid{display:flex;flex-direction:column}.col-grid.direction-row{flex-direction:row}.col-bleed{padding:0}.col-bleed-x{padding:15px 0}.col-bleed-y{padding:0 15px}.flex-img{display:block;flex:0 0 auto;max-width:100%;height:auto;width:100%;*width:auto}.flex-footer{width:100%;margin-top:auto}.flex-footer,.flex-footer>:last-child{margin-bottom:0}@media (max-width:575px){.hidden-xxs{display:none}}@media (min-width:576px)and (max-width:767px){.hidden-xs{display:none}}@media (min-width:768px)and (max-width:991px){.hidden-sm{display:none}}@media (min-width:992px)and (max-width:1199px){.hidden-md{display:none}}@media (min-width:1200px)and (max-width:1599px){.hidden-lg{display:none}}@media (min-width:1600px){.hidden-xlg{display:none}}html{font-size:100%;line-height:1.15;-webkit-text-size-adjust:100%}body,html{margin:0;height:100%}html,legend{box-sizing:border-box}main{display:block}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}figure{margin:0 0 1rem}figcaption{margin:.3em 0 0}button,input,optgroup,select,textarea{margin:0}button,input,label,optgroup,select,textarea{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:.9rem;line-height:1.4}@media only screen and (min-width:992px){button,input,label,optgroup,select,textarea{font-size:1rem;line-height:1.618}}fieldset{padding:.3em .45em}button,select{text-transform:none}[type=button],[type=reset],[type=submit],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:1px dotted ButtonText}legend{box-sizing:border-box;display:table;max-width:100%;padding:0;white-space:normal}[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-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}hr{box-sizing:content-box;height:0;overflow:visible;border:0;border-top:1px solid #b3b2af;margin:.3em 0}progress{vertical-align:baseline}details{display:block}summary{display:list-item}code,kbd,pre,samp{font-family:Lucida Console,Monaco,monospace;font-size:1rem}@media only screen and (min-width:992px){code,kbd,pre,samp{font-size:1.1rem}}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:Arial,Helvetica,Neue Helvetica,sans-serif;font-weight:700;line-height:1.2;margin:0 0 .3em}h5,h6{line-height:1.4}.h1,h1{font-size:2.25rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.82rem}}.h2,h2{font-size:1.8rem}@media only screen and (min-width:992px){.h2,h2{font-size:2.28rem}}.h3,h3{font-size:1.575rem}@media only screen and (min-width:992px){.h3,h3{font-size:2.01rem}}.h4,h4{font-size:1.35rem}@media only screen and (min-width:992px){.h4,h4{font-size:1.74rem}}.h5,h5{font-size:1.125rem}@media only screen and (min-width:992px){.h5,h5{font-size:1.47rem}}.h6,h6{font-size:.9rem}@media only screen and (min-width:992px){.h6,h6{font-size:1.2rem}}p{margin:0 0 1rem}a,ins,u{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges}b,strong{font-weight:bolder}small{font-size:80%}sub,sup{font-size:70%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}abbr[title]{border-bottom:1px dotted;cursor:help;text-decoration:none}mark{padding:.25em}blockquote{border-left:1px solid #dfdfdf;margin-left:0;padding:.3em .45em}blockquote p:last-child{margin-bottom:0}dl,ol,ul{padding:0;margin:0 0 1rem}ol,ul{margin-left:1.5em}ol ol,ul ul{margin-top:0;margin-left:1em}ol{list-style:decimal outside}ul{list-style:disc outside}dl{margin-left:.5em}dd,dt{margin:0}dt{font-weight:700}a{color:#f18f01}a:hover{color:#b3b2af}a:focus{outline:none}body{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;color:#363636;background-color:#fff;direction:ltr;font-size:.9rem;line-height:1.4}@media only screen and (min-width:992px){body{line-height:1.618;font-size:1rem}}.text-left{text-align:left!important}.text-right{text-align:right!important}.text-center{text-align:center!important}.text-justify{text-align:justify!important}.text-uppercase{text-transform:uppercase!important}.text-lowercase{text-transform:lowercase!important}.text-crossed{text-decoration:line-through!important}.text-underline{text-decoration:underline!important}.text-capitalize{text-transform:capitalize!important}.text-italic{font-style:italic!important}.text-light{font-weight:lighter!important}.text-normal{font-weight:400!important}.text-medium{font-weight:medium!important}.text-bold{font-weight:bolder!important}.text-size-default{font-size:.9rem!important}@media only screen and (min-width:992px){.text-size-default{font-size:1rem}}.text-size-small{font-size:.675rem!important}@media only screen and (min-width:992px){.text-size-small{font-size:.775rem}}.text-size-medium{font-size:1.125rem!important}@media only screen and (min-width:992px){.text-size-medium{font-size:1.225rem}}.text-size-large{font-size:1.35rem!important}@media only screen and (min-width:992px){.text-size-large{font-size:1.45rem}}.text-size-big{font-size:1.575rem!important}@media only screen and (min-width:992px){.text-size-big{font-size:1.675rem}}.text-size-mega{font-size:1.8rem!important}@media only screen and (min-width:992px){.text-size-mega{font-size:1.9rem}}.float-left{float:left}.float-right{float:right}.float-none{float:none}.centered{margin-left:auto;margin-right:auto}.clearfix:after,.clearfix:before{display:table;content:" "}.clearfix:after{clear:both}.text-color-primary{color:#f18f01!important}.text-color-secondary{color:#b3b2af!important}.text-color-success{color:#5cb85c!important}.text-color-warning{color:#f0ad4e!important}.text-color-danger{color:#d9534f!important}.text-color-info{color:#0090d4!important}.text-color-grey{color:#7a7a7a!important}.text-color-grey-light{color:#f7f7f7!important}.text-color-grey-dark{color:#4a4a4a!important}.text-color-white{color:#fff!important}.border-color-primary{border-color:#f18f01!important}.border-color-secondary{border-color:#b3b2af!important}.border-color-success{border-color:#5cb85c!important}.border-color-warning{border-color:#f0ad4e!important}.border-color-danger{border-color:#d9534f!important}.border-color-info{border-color:#0090d4!important}.border-color-grey{border-color:#7a7a7a!important}.border-color-grey-light{border-color:#f7f7f7!important}.border-color-grey-dark{border-color:#4a4a4a!important}.border-color-white{border-color:#fff!important}.background-color-primary{background-color:#f18f01!important}.background-color-secondary{background-color:#b3b2af!important}.background-color-success{background-color:#5cb85c!important}.background-color-warning{background-color:#f0ad4e!important}.background-color-danger{background-color:#d9534f!important}.background-color-info{background-color:#0090d4!important}.background-color-grey{background-color:#7a7a7a!important}.background-color-grey-light{background-color:#f7f7f7!important}.background-color-grey-dark{background-color:#4a4a4a!important}.background-color-white{background-color:#fff!important}.absolute{position:absolute!important}.fixed{position:fixed!important}.relative{position:relative!important}.hide{display:none!important}@media only screen and (min-width:576px){.hide-xs{display:none!important}}@media only screen and (min-width:768px){.hide-sm{display:none!important}}@media only screen and (min-width:992px){.hide-md{display:none!important}}@media only screen and (min-width:1200px){.hide-lg{display:none!important}}@media only screen and (min-width:1600px){.hide-xlg{display:none!important}}.show{display:block!important}.show--inline{display:inline!important}.show--inline-block{display:inline-block!important}@media only screen and (min-width:576px){.show-xs{display:block!important}.show-xs--inline{display:inline!important}.show-xs--inline-block{display:inline-block!important}}@media only screen and (min-width:768px){.show-sm{display:block!important}.show-sm--inline{display:inline!important}.show-sm--inline-block{display:inline-block!important}}@media only screen and (min-width:992px){.show-md{display:block!important}.show-md--inline{display:inline!important}.show-md--inline-block{display:inline-block!important}}@media only screen and (min-width:1200px){.show-lg{display:block!important}.show-lg--inline{display:inline!important}.show-lg--inline-block{display:inline-block!important}}@media only screen and (min-width:1600px){.show-xlg{display:block!important}.show-xlg--inline{display:inline!important}.show-xlg--inline-block{display:inline-block!important}}.bordered{border:1px solid #dfdfdf!important}.rounded{border-radius:3px!important}.round{border-radius:50%!important}.borderless{border:0!important}.radiusless{border-radius:0!important}.width-25{width:25%!important}.width-50{width:50%!important}.width-75{width:75%!important}.width-100{width:100%!important}.marginless{margin:0!important}.paddingless{padding:0!important}.margin-top-0{margin-top:0!important}.margin-bottom-0{margin-bottom:0!important}.padding-top-0{padding-top:0!important}.padding-bottom-0{padding-bottom:0!important}.margin-left-0{margin-left:0!important}.margin-right-0{margin-right:0!important}.padding-left-0{padding-left:0!important}.padding-right-0{padding-right:0!important}.margin-top-1{margin-top:4px!important}@media only screen and (min-width:992px){.margin-top-1{margin-top:6px!important}}.margin-bottom-1{margin-bottom:4px!important}@media only screen and (min-width:992px){.margin-bottom-1{margin-bottom:6px!important}}.padding-top-1{padding-top:8px!important}@media only screen and (min-width:992px){.padding-top-1{padding-top:6px!important}}.padding-bottom-1{padding-bottom:8px!important}@media only screen and (min-width:992px){.padding-bottom-1{padding-bottom:6px!important}}.margin-left-1{margin-left:8px!important}@media only screen and (min-width:992px){.margin-left-1{margin-left:6px!important}}.margin-right-1{margin-right:8px!important}@media only screen and (min-width:992px){.margin-right-1{margin-right:6px!important}}.padding-left-1{padding-left:8px!important}@media only screen and (min-width:992px){.padding-left-1{padding-left:6px!important}}.padding-right-1{padding-right:8px!important}@media only screen and (min-width:992px){.padding-right-1{padding-right:6px!important}}.margin-top-2{margin-top:16px!important}@media only screen and (min-width:992px){.margin-top-2{margin-top:24px!important}}.margin-bottom-2{margin-bottom:16px!important}@media only screen and (min-width:992px){.margin-bottom-2{margin-bottom:24px!important}}.padding-top-2{padding-top:16px!important}@media only screen and (min-width:992px){.padding-top-2{padding-top:24px!important}}.padding-bottom-2{padding-bottom:16px!important}@media only screen and (min-width:992px){.padding-bottom-2{padding-bottom:24px!important}}.margin-left-2{margin-left:16px!important}@media only screen and (min-width:992px){.margin-left-2{margin-left:24px!important}}.margin-right-2{margin-right:16px!important}@media only screen and (min-width:992px){.margin-right-2{margin-right:24px!important}}.padding-left-2{padding-left:16px!important}@media only screen and (min-width:992px){.padding-left-2{padding-left:24px!important}}.padding-right-2{padding-right:16px!important}@media only screen and (min-width:992px){.padding-right-2{padding-right:24px!important}}.margin-top-3{margin-top:36px!important}@media only screen and (min-width:992px){.margin-top-3{margin-top:54px!important}}.margin-bottom-3{margin-bottom:36px!important}@media only screen and (min-width:992px){.margin-bottom-3{margin-bottom:54px!important}}.padding-top-3{padding-top:24px!important}@media only screen and (min-width:992px){.padding-top-3{padding-top:54px!important}}.padding-bottom-3{padding-bottom:24px!important}@media only screen and (min-width:992px){.padding-bottom-3{padding-bottom:54px!important}}.margin-top-4{margin-top:64px!important}@media only screen and (min-width:992px){.margin-top-4{margin-top:96px!important}}.margin-bottom-4{margin-bottom:64px!important}@media only screen and (min-width:992px){.margin-bottom-4{margin-bottom:96px!important}}.padding-top-4{padding-top:32px!important}@media only screen and (min-width:992px){.padding-top-4{padding-top:96px!important}}.padding-bottom-4{padding-bottom:32px!important}@media only screen and (min-width:992px){.padding-bottom-4{padding-bottom:96px!important}}.margin-top-5{margin-top:100px!important}@media only screen and (min-width:992px){.margin-top-5{margin-top:150px!important}}.margin-bottom-5{margin-bottom:100px!important}@media only screen and (min-width:992px){.margin-bottom-5{margin-bottom:150px!important}}.padding-top-5{padding-top:40px!important}@media only screen and (min-width:992px){.padding-top-5{padding-top:150px!important}}.padding-bottom-5{padding-bottom:40px!important}@media only screen and (min-width:992px){.padding-bottom-5{padding-bottom:150px!important}}.margin-top-6{margin-top:144px!important}@media only screen and (min-width:992px){.margin-top-6{margin-top:216px!important}}.margin-bottom-6{margin-bottom:144px!important}@media only screen and (min-width:992px){.margin-bottom-6{margin-bottom:216px!important}}.padding-top-6{padding-top:48px!important}@media only screen and (min-width:992px){.padding-top-6{padding-top:216px!important}}.padding-bottom-6{padding-bottom:48px!important}@media only screen and (min-width:992px){.padding-bottom-6{padding-bottom:216px!important}}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;display:inline-block;text-decoration:none;font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:.9rem;margin:0 0 1rem;padding:.3em .8em}@media only screen and (min-width:992px){.button{font-size:1rem;padding:.4em 1.2em}}.button:hover{cursor:pointer;text-decoration:none}.button:focus{outline:none}.code{white-space:pre;display:block;overflow-y:hidden;overflow-x:auto;border:1px solid #dfdfdf;background-color:#f7f7f7;margin:0 0 1rem;padding:.3em .45em}@media only screen and (min-width:992px){.code{padding:.6em .9em}}.progress{border:1px solid #dfdfdf}.progress__inner{height:30px;background-color:#f18f01}.field{margin:0 0 1rem}.field__label,.field__select,.field__text{font-family:Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:400;font-size:.9rem}@media only screen and (min-width:992px){.field__label,.field__select,.field__text{font-size:1rem}}.field__select,.field__text{display:block;width:100%;padding:.4em .6em;color:#363636;-webkit-appearance:none;-moz-appearance:none;appearance:none}.field__label{display:inline-block;width:100%}.field--valid .field__label{color:#5cb85c}.field--error .field__label{color:#d9534f}.field__text{margin:0;border:1px solid #dfdfdf}.field__text:focus{border-color:#f18f01}.field--valid .field__select,.field--valid .field__text{border-color:#5cb85c}.field--error .field__select,.field--error .field__text{border-color:#d9534f}.field__select{padding:.3em .5em;border:1px solid #dfdfdf;background-color:#fff}.field__select:focus{outline:0;border-color:#f18f01}.field__choice{position:relative;display:none}.field__choice+.field__label .field__choice__checked{display:none}.field__choice+.field__label:hover{cursor:pointer}.field__choice:checked+.field__label .field__choice__checked{display:inline-block}.field__choice:checked+.field__label .field__choice__unchecked{display:none}.field__choice__checked{fill:#5cb85c}.field__choice__unchecked{fill:#d9534f}.field__choice+.field__label+.field__panel{margin:.3em 0 0}.field--valid .field__choice__checked,.field--valid .field__choice__unchecked{fill:#5cb85c}.field--error .field__choice__checked,.field--error .field__choice__unchecked{fill:#d9534f}.field__panel{padding:.3em .6em}.field--valid .field__panel{color:#fff;background-color:#5cb85c}.field--error .field__panel{color:#fff;background-color:#d9534f}.group{list-style:none;display:inline-block}.group,.group li{margin:0;padding:0}.group .group__item{display:inline-block;margin:0 .3em 0 0}.group--hr .group__item,.group .group__item:last-child:after{margin:0}.group--hr .group__item:after{margin:0 .3em;content:"/"}.group--hr .group__item:last-child:after{display:none}.hero{background-position:50%;background-repeat:no-repeat;background-size:cover;position:relative}.hero--top{background-position:top}.hero--bottom{background-position:bottom}.hero--contain{background-size:contain}.icon{width:1.15em;height:1.15em;max-height:100%;max-width:100%;vertical-align:middle;overflow:hidden;line-height:1.4}.icon-color-primary{fill:#f18f01!important}.icon-color-secondary{fill:#b3b2af!important}.icon-color-success{fill:#5cb85c!important}.icon-color-warning{fill:#f0ad4e!important}.icon-color-danger{fill:#d9534f!important}.icon-color-info{fill:#0090d4!important}.icon-color-grey{fill:#7a7a7a!important}.icon-color-grey-light{fill:#f7f7f7!important}.icon-color-grey-dark{fill:#4a4a4a!important}.icon-color-white{fill:#fff!important}.img-responsive{display:block;max-width:100%;height:auto}.video-responsive{display:block;overflow:hidden;padding:0;position:relative;width:100%}.video-responsive embed,.video-responsive iframe,.video-responsive object{border:0;bottom:0;height:100%;left:0;position:absolute;right:0;top:0;width:100%}.modal{position:absolute;z-index:100;width:100%;margin:0;top:50%;left:50%;transform:translate(-50%,-50%)}@media only screen and (min-width:992px){.modal{max-width:50%}}.modal--fixed{position:fixed}.modal--bottom-left,.modal--center-left,.modal--top-left{left:0}.modal--bottom-right,.modal--center-right,.modal--top-right{right:0;left:unset}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right,.modal--center-left,.modal--center-right,.modal--top-center,.modal--top-left,.modal--top-right{transform:translate(0)}@media only screen and (min-width:992px){.modal--bottom-center,.modal--bottom-left,.modal--bottom-right,.modal--center-left,.modal--center-right,.modal--top-center,.modal--top-left,.modal--top-right{margin:.75em}}.modal--bottom-center,.modal--bottom-left,.modal--bottom-right{bottom:0;top:unset}.modal--center-left,.modal--center-right{transform:translateY(-50%);margin-top:0;margin-bottom:0}.modal--bottom-center,.modal--top-center{transform:translate(-50%)}.modal--top-center,.modal--top-left,.modal--top-right{top:0}.overlay{position:fixed;top:0;left:0;z-index:90;width:100%;height:100%;background-color:#000}.panel{background-color:#f7f7f7}.panel__inner{padding:.3em .45em}@media only screen and (min-width:992px){.panel__inner{padding:.6em .9em}}.table{width:100%}.table--striped tr:nth-child(2n){background-color:#f7f7f7}.table--scroll{overflow-x:auto}.table td{color:#363636}.table td,.table th{text-align:left;border-bottom:1px solid #dfdfdf;padding:.3em .45em}@media only screen and (min-width:992px){.table td,.table th{padding:.6em .9em}}.table th{border-bottom-width:2px}.header{max-width:100%}.header a{text-decoration:none}.header a .icon--big{font-size:6rem}.header a:hover{color:#f18f01}.header .group__item{margin-right:10px}.header--fixed{position:fixed;top:0;left:0;width:100%;z-index:101}.h3__icon{display:inline-block;border-radius:50%;padding:.9em;margin:0 0 .5em}.h3__icon .icon{font-size:3rem!important}.container{max-width:1200px}.lg-only,.md,.md-only,.sm{display:none}@media only screen and (min-width:768px){.sm{display:block}}@media only screen and (min-width:992px){.md{display:block}}@media only screen and (min-width:992px)and (max-width:1199px){.md-only{display:block}}@media only screen and (min-width:1200px)and (max-width:1599px){.lg-only{display:block}}.triangle-bottom,.triangle-left,.triangle-right,.triangle-top{display:block}.triangle-left{border-right:1.5em solid #f18f01}.triangle-left,.triangle-right{width:0;height:0;content:"";z-index:2;border-bottom:1em solid transparent;border-top:1em solid transparent}.triangle-right{border-left:1.5em solid #f18f01}.triangle-top{border-bottom:1.5em solid #f18f01}.triangle-bottom,.triangle-top{width:0;height:0;content:"";z-index:2;border-left:1em solid transparent;border-right:1em solid transparent}.triangle-bottom{border-top:1.5em solid #f18f01}
\ No newline at end of file
diff --git a/mix-manifest.json b/mix-manifest.json
index 058dd3b..239b104 100644
--- a/mix-manifest.json
+++ b/mix-manifest.json
@@ -1,7 +1,7 @@
 {
     "/dist/crispy-all.css": "/dist/crispy-all.css",
     "/dist/crispy-minimal.css": "/dist/crispy-minimal.css",
-    "/dist/examples/styles.css": "/dist/examples/styles.css",
+    "/dist/example/styles.css": "/dist/example/styles.css",
     "/spritemap.js": "/spritemap.js",
-    "/dist/examples/symbol-defs.svg": "/dist/examples/symbol-defs.svg"
+    "/dist/example/symbol-defs.svg": "/dist/example/symbol-defs.svg"
 }
diff --git a/package.json b/package.json
index 26f48f3..2da6eef 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "crispy-css",
-  "version": "3.0.0-pre",
+  "version": "3.0.0",
   "description": "Lightweight Framework for building Websites and Apps for Mobile, Tablet and Desktop. Minimal UI-Elements and Helpers.",
   "repository": {
     "type": "git",
diff --git a/src/_core.scss b/src/_core.scss
index 4de22d7..c82dddb 100644
--- a/src/_core.scss
+++ b/src/_core.scss
@@ -53,6 +53,6 @@
         @include crispy__media__breakpoints('line-height', $crispy__line-height__breakpoints);
 
         line-height: $crispy__line-height;
-        @include crispy__media__breakpoints('font-size', $crispy__font-size__breakpoints);
+        @include crispy__media__breakpoints('font-size', $crispy__font-size-breakpoints);
     }
 }
diff --git a/src/_helpers.scss b/src/_helpers.scss
index cc96406..176865c 100644
--- a/src/_helpers.scss
+++ b/src/_helpers.scss
@@ -94,7 +94,7 @@ $crispy__helpers__width: (
     @each $name, $font-size in $crispy__font-sizes {
         .text-size-#{$name} {
             font-size: $font-size !important;
-            @include crispy__media__breakpoints__diff($crispy__font-size__breakpoints, $font-size, $defaultFontSize);
+            @include crispy__media__breakpoints__diff($crispy__font-size-breakpoints, $font-size, $defaultFontSize);
         }
     }
 
diff --git a/src/_mixins.scss b/src/_mixins.scss
index 9a91763..0470da6 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -1,21 +1,21 @@
 /**
- * mixins
+ *  mixins
  *
  *
- *
- * @author Björn Hase
- * @license http://opensource.org/licenses/MIT The MIT License
- * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://github.com/tentakelfabrik/crispy-css
  *
  */
 
 
 /**
- * clearfix to end floating
+ *  clearfix to end floating
  *
  *
  *
  */
+
 @mixin crispy__clearfix() {
     &::before,
     &::after {
@@ -30,10 +30,11 @@
 
 
 /**
- * clear styles from list
+ *  clear styles from list
  *
  *
  */
+
 @mixin crispy__clear_list() {
     list-style: none;
     margin: 0;
@@ -47,11 +48,12 @@
 
 
 /**
- * media-queries
+ *  media-queries
  *
  *
  *
  */
+
 @mixin crispy__media-xs() {
     @media only screen and (min-width:$crispy__xs) {
         @content;
@@ -124,6 +126,7 @@
     }
 }
 
+
 /**
  *
  *  @param  {[type]} $property    [description]
@@ -132,6 +135,7 @@
  *  @return {[type]}              [description]
  *
  */
+
 @mixin crispy__media__breakpoints($property, $breakpoints) {
     @each $breakpoint, $value in $breakpoints {
         @media only screen and (min-width: $breakpoint) {
@@ -140,6 +144,7 @@
     }
 }
 
+
 /**
  *
  *  @param  {[type]} $property    [description]
@@ -148,6 +153,7 @@
  *
  *  @return {[type]}              [description]
  */
+
 @mixin crispy__media__breakpoints_calculate($property, $factor, $breakpoints) {
     @each $breakpoint, $value in $breakpoints {
         @media only screen and (min-width: $breakpoint) {
@@ -156,6 +162,7 @@
     }
 }
 
+
 /**
  *
  *
@@ -166,6 +173,7 @@
  *  @return {[type]}              [description]
  *
  */
+
 @mixin crispy__media__breakpoints__diff($breakpoints, $font-size, $default) {
 
     @each $breakpoint, $value in $breakpoints {
@@ -176,7 +184,7 @@
         // ignore if factor is zero
         @if $factor > 0 {
             @media only screen and (min-width: $breakpoint) {
-                font-size: $value * $factor;
+                font-size: ($value * $factor) !important;
             }
         }
     }
@@ -192,6 +200,7 @@
  *  @param {Length} $size [1em] - Triangle size
  *
  */
+
 @mixin triangle($direction, $color: currentcolor, $size: 1em) {
 
     @if not index(top right bottom left, $direction) {
diff --git a/src/_variables.scss b/src/_variables.scss
index dccacb0..bfe0b07 100644
--- a/src/_variables.scss
+++ b/src/_variables.scss
@@ -1,14 +1,11 @@
-@import
-    'functions';
-
 /**
- * Variables
+ *  variables
  *
  *
  *
- * @author Björn Hase
- * @license http://opensource.org/licenses/MIT The MIT License
- * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://github.com/tentakelfabrik/crispy-css
  *
  */
 
@@ -16,7 +13,7 @@ $crispy__golden-ratio: 1.618 !default;
 
 
 /**
- *  Breakpoints
+ *  breakpoints
  *
  */
 
@@ -28,7 +25,7 @@ $crispy__xlg: 1600px !default;
 
 
 /**
- *  Font Size
+ *  fonts
  *
  */
 
@@ -37,8 +34,8 @@ $crispy__direction: ltr !default;
 $crispy__font-family: "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default;
 $crispy__font-weight: normal !default;
 $crispy__font-size: 0.9rem !default;
-$crispy__font-size__breakpoints: (
-    $crispy__md: 1rem
+$crispy__font-size-breakpoints: (
+    $crispy__md: 1.1rem
 ) !default;
 
 $crispy__font-family-monospace: "Lucida Console", Monaco, monospace !default;
@@ -109,19 +106,23 @@ $crispy__colors: (
 
 
 /**
- *  Padding & Margin
+ *  padding & nargin
  *
  */
 
-$crispy__margin: 0 0 1rem !default;
-$crispy__padding: 0.3em 0.45em !default;
+$crispy__margin: 0 0 15px !default;
+$crispy__margin-breakpoints: (
+    $crispy__md: 0 0 20px
+) !default;
+
+$crispy__padding: 0.4em 0.6em !default;
 $crispy__padding-breakpoints: (
-    $crispy__md: .6em 0.9em
+    $crispy__md: 0.8em 1.1em
 ) !default;
 
 
 /**
- *  Heading
+ *  heading
  *
  */
 
@@ -139,12 +140,13 @@ $crispy__heading__font-sizes__breakpoints: (
 ) !default;
 
 $crispy__heading__font-weight: bold !default;
-$crispy__heading__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default;
-$crispy__heading__margin: 0 0 0.3em !default;
+$crispy__heading__font-family: $crispy__font-family !default;
+$crispy__heading__margin: $crispy__margin !default;
+$crispy__heading__margin-breakpoints: $crispy__margin-breakpoints !default;
 
 
 /**
- *  Borders
+ *  borders
  *
  */
 
@@ -153,7 +155,7 @@ $crispy__border: 1px solid $crispy__color-border !default;
 
 
 /**
- *
+ *  z-index
  *
  */
 
diff --git a/src/components/_button.scss b/src/components/_button.scss
index 5ab3e4b..05194b5 100644
--- a/src/components/_button.scss
+++ b/src/components/_button.scss
@@ -14,14 +14,15 @@
 $crispy__button__font-family: $crispy__font-family !default;
 $crispy__button__font-weight: $crispy__font-weight !default;
 $crispy__button__font-size: $crispy__font-size !default;
-$crispy__button__font-size-breakpoints: $crispy__font-size__breakpoints !default;
+$crispy__button__font-size-breakpoints: $crispy__font-size-breakpoints !default;
 
-$crispy__button__padding: 0.3em 0.8em !default;
+$crispy__button__padding: 0.4em 0.8em !default;
 $crispy__button__padding-breakpoints: (
-    $crispy__md: 0.4em 1.2em
+    $crispy__md: 0.6em 1.2em
 ) !default;
 
 $crispy__button__margin: $crispy__margin !default;
+$crispy__button__margin-breakpoints: $crispy__margin-breakpoints !default;
 
 @mixin crispy__button() {
     .button {
@@ -37,6 +38,7 @@ $crispy__button__margin: $crispy__margin !default;
         @include crispy__media__breakpoints('font-size', $crispy__button__font-size-breakpoints);
 
         margin: $crispy__button__margin;
+        @include crispy__media__breakpoints('margin', $crispy__button__margin-breakpoints);
 
         padding: $crispy__button__padding;
         @include crispy__media__breakpoints('padding', $crispy__button__padding-breakpoints);
diff --git a/src/components/_code.scss b/src/components/_code.scss
index e45ed9f..6fc517a 100644
--- a/src/components/_code.scss
+++ b/src/components/_code.scss
@@ -13,11 +13,14 @@
  *
  */
 
+$crispy__code__border: $crispy__border !default;
+$crispy__code__background-color: $crispy__color-grey-light !default;
+
 $crispy__code__padding: $crispy__padding !default;
 $crispy__code__padding-breakpoints: $crispy__padding-breakpoints !default;
+
 $crispy__code__margin: $crispy__margin !default;
-$crispy__code__border: $crispy__border !default;
-$crispy__code__background-color: $crispy__color-grey-light !default;
+$crispy__code__margin-breakpoints: $crispy__margin-breakpoints !default;
 
 @mixin crispy__code() {
     .code {
@@ -30,6 +33,7 @@ $crispy__code__background-color: $crispy__color-grey-light !default;
         background-color: $crispy__code__background-color;
 
         margin: $crispy__code__margin;
+        @include crispy__media__breakpoints('margin', $crispy__code__margin-breakpoints);
 
         padding: $crispy__code__padding;
         @include crispy__media__breakpoints('padding', $crispy__code__padding-breakpoints);
diff --git a/src/components/_field.scss b/src/components/_field.scss
index b7b512b..f7f7493 100644
--- a/src/components/_field.scss
+++ b/src/components/_field.scss
@@ -1,19 +1,25 @@
 /**
- * component: field
+ *  components: field
  *
- * 

- *     

+ *  

+ *      

  *
  *
- * @author Björn Hase
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://github.com/tentakelfabrik/crispy-css
  *
  */
 
-$crispy__field__margin: $crispy__margin !default;
+$crispy__field__font-family: $crispy__font-family !default;
+$crispy__field__font-weight: $crispy__font-weight !default;
+$crispy__field__font-size: $crispy__font-size !default;
+$crispy__field__font-size-breakpoints: $crispy__font-size-breakpoints !default;
+
 $crispy__field__border: $crispy__border !default;
 
 $crispy__field__color--valid: $crispy__color-success !default;
@@ -26,11 +32,20 @@ $crispy__field__border-color--error: $crispy__color-danger !default;
 $crispy__field__choice__checked__color: $crispy__color-success !default;
 $crispy__field__choice__unchecked__color: $crispy__color-danger !default;
 
-$crispy__field__input__padding: 0.4em 0.6em !default;
-$crispy__field__input__color: $crispy__color-text !default;
+$crispy__field__padding: 0.5em 0.6em !default;
+$crispy__field__padding-breakpoints: (
+    $crispy__md: 0.7em 0.8em
+) !default;
+
+$crispy__field__select__padding: 0.5em 0.3em !default;
+$crispy__field__select__padding-breakpoints: (
+    $crispy__md: 0.7em 0.6em
+) !default;
+
+$crispy__field__margin: $crispy__margin !default;
+$crispy__field__margin-breakpoints: $crispy__margin-breakpoints !default;
 
-$crispy__field__select__padding: 0.3em 0.5em !default;
-$crispy__field__panel__padding: 0.3em 0.6em !default;
+$crispy__field__input__color: $crispy__color-text !default;
 
 $crispy__field__select__background-color: white !default;
 $crispy__field__select__border: $crispy__border !default;
@@ -38,14 +53,15 @@ $crispy__field__select__border: $crispy__border !default;
 @mixin crispy__field() {
     .field {
         margin: $crispy__field__margin;
+        @include crispy__media__breakpoints('margin', $crispy__field__margin-breakpoints);
     }
 
     .field__text, .field__select, .field__select, .field__label {
-        font-family: $crispy__font-family;
-        font-weight: $crispy__font-weight;
+        font-family: $crispy__field__font-family;
+        font-weight: $crispy__field__font-weight;
 
-        font-size: $crispy__font-size;
-        @include crispy__media__breakpoints('font-size', $crispy__font-size__breakpoints);
+        font-size: $crispy__field__font-size;
+        @include crispy__media__breakpoints('font-size', $crispy__field__font-size-breakpoints);
     }
 
     // basic style for input elements, will be used to @extend
@@ -53,9 +69,11 @@ $crispy__field__select__border: $crispy__border !default;
         display: block;
         width: 100%;
 
-        padding: $crispy__field__input__padding;
         color: $crispy__field__input__color;
         appearance: none;
+
+        padding: $crispy__field__padding;
+        @include crispy__media__breakpoints('padding', $crispy__field__padding-breakpoints);
     }
 
     /**
@@ -119,6 +137,9 @@ $crispy__field__select__border: $crispy__border !default;
         border: $crispy__field__select__border;
         background-color: $crispy__field__select__background-color;
 
+        padding: $crispy__field__select__padding;
+        @include crispy__media__breakpoints('padding', $crispy__field__select__padding-breakpoints);
+
         &:focus {
             outline: 0;
             border-color: $crispy__field__border-color--focus;
@@ -197,7 +218,8 @@ $crispy__field__select__border: $crispy__border !default;
      */
 
     .field__panel {
-        padding: $crispy__field__panel__padding;
+        padding: $crispy__field__padding;
+        @include crispy__media__breakpoints('padding', $crispy__field__padding-breakpoints);
     }
 
     .field--valid {
diff --git a/src/components/_group.scss b/src/components/_group.scss
index 5f21528..ca89f0f 100644
--- a/src/components/_group.scss
+++ b/src/components/_group.scss
@@ -24,7 +24,7 @@ $crispy__group__character-margin: 0 $crispy__group__margin 0 !default;
 
         .group__item {
             display: inline-block;
-            margin: 0 $crispy__group__margin 0 0;
+            margin: 0 $crispy__group__margin 0;
 
             &:last-child {
                 &:after {
diff --git a/src/components/_hero.scss b/src/components/_hero.scss
index 929e709..78a2dd6 100644
--- a/src/components/_hero.scss
+++ b/src/components/_hero.scss
@@ -1,5 +1,5 @@
 /**
- *  component: hero
+ *  components: hero
  *
  *  background-size is as default: cover - Resize the background image to cover the entire container
  *
diff --git a/src/components/_panel.scss b/src/components/_panel.scss
index c49c25b..41545d7 100644
--- a/src/components/_panel.scss
+++ b/src/components/_panel.scss
@@ -7,9 +7,9 @@
  *      

  *  

  *
- *  @author Björn Hase
+ *  @author Björn Hase, Tentakelfabrik
  *  @license http://opensource.org/licenses/MIT The MIT License
- *  @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
+ *  @link https://github.com/tentakelfabrik/crispy-css
  *
  */
 
diff --git a/src/core/_heading.scss b/src/core/_heading.scss
index 533fb52..77b289b 100644
--- a/src/core/_heading.scss
+++ b/src/core/_heading.scss
@@ -2,6 +2,10 @@
  *  Heading
  *
  *
+ *  @author Björn Hase, Tentakelfabrik
+ *  @license http://opensource.org/licenses/MIT The MIT License
+ *  @link https://github.com/tentakelfabrik/crispy-css
+ *
  */
 
 @mixin crispy__core__heading()
@@ -15,7 +19,9 @@
         font-family: $crispy__heading__font-family;
         font-weight: $crispy__heading__font-weight;
         line-height: 1.2;
+        
         margin: $crispy__heading__margin;
+        @include crispy__media__breakpoints('margin', $crispy__heading__margin-breakpoints);
     }
 
     h5 {
diff --git a/src/core/_normalize.scss b/src/core/_normalize.scss
index b01a9a0..f7758fe 100644
--- a/src/core/_normalize.scss
+++ b/src/core/_normalize.scss
@@ -45,10 +45,11 @@
 
     figure {
         margin: $crispy__margin;
+        @include crispy__media__breakpoints('margin', $crispy__margin-breakpoints);
     }
 
     figcaption {
-        margin: 0.3em 0 0;
+        margin: 10px 0;
     }
 
 
@@ -67,22 +68,6 @@
         margin: 0;
     }
 
-    button,
-    label,
-    input,
-    optgroup,
-    select,
-    textarea {
-        font-family: $crispy__font-family;
-        font-weight: $crispy__font-weight;
-
-        font-size: $crispy__font-size;
-        @include crispy__media__breakpoints('font-size', $crispy__font-size__breakpoints);
-
-        line-height: $crispy__line-height;
-        @include crispy__media__breakpoints('line-height', $crispy__line-height__breakpoints);
-    }
-
     fieldset {
         padding: $crispy__padding;
     }
diff --git a/src/core/_typography.scss b/src/core/_typography.scss
index c6cab3f..da33905 100644
--- a/src/core/_typography.scss
+++ b/src/core/_typography.scss
@@ -12,6 +12,7 @@
     // paragraphs
     p {
         margin: $crispy__margin;
+        @include crispy__media__breakpoints('margin', $crispy__margin-breakpoints);
     }
 
     // Semantic text elements
@@ -90,7 +91,9 @@
     ol,
     ul {
         padding: 0;
+        
         margin: $crispy__margin;
+        @include crispy__media__breakpoints('margin', $crispy__margin-breakpoints);
     }
 
     ol,
diff --git a/src/example/components/_triangle.scss b/src/example/components/_triangle.scss
new file mode 100644
index 0000000..3fd0265
--- /dev/null
+++ b/src/example/components/_triangle.scss
@@ -0,0 +1,31 @@
+/**
+ * component: header
+ *
+ *
+ * @author Björn Hase
+ * @license http://opensource.org/licenses/MIT The MIT License
+ * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
+ *
+ */
+
+@mixin component__triangle() {
+    .triangle-left, .triangle-right, .triangle-top, .triangle-bottom {
+        display: block;
+    }
+
+    .triangle-left {
+        @include triangle('left', $crispy__color-primary);
+    }
+
+    .triangle-right {
+        @include triangle('right', $crispy__color-primary);
+    }
+
+    .triangle-top {
+        @include triangle('top', $crispy__color-primary);
+    }
+
+    .triangle-bottom {
+        @include triangle('bottom', $crispy__color-primary);
+    }
+}
\ No newline at end of file
diff --git a/src/examples/site/_header.scss b/src/example/site/_header.scss
similarity index 100%
rename from src/examples/site/_header.scss
rename to src/example/site/_header.scss
diff --git a/src/example/styles.scss b/src/example/styles.scss
new file mode 100644
index 0000000..e179cf9
--- /dev/null
+++ b/src/example/styles.scss
@@ -0,0 +1,15 @@
+@import
+
+    'reflex',
+    '../crispy-all',
+    'site/header',
+    'components/triangle',
+    'templates/home';
+
+@include component__triangle();
+@include site__header();
+@include template__home();
+
+.container {
+    max-width: $crispy__lg;
+}
\ No newline at end of file
diff --git a/src/examples/templates/_home.scss b/src/example/templates/_home.scss
similarity index 100%
rename from src/examples/templates/_home.scss
rename to src/example/templates/_home.scss
diff --git a/src/examples/components/_nav.scss b/src/examples/components/_nav.scss
deleted file mode 100644
index 6f71c8e..0000000
--- a/src/examples/components/_nav.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * component: nav
- *
- *
- * @author Björn Hase
- * @license http://opensource.org/licenses/MIT The MIT License
- * @link https://gitlab.tentakelfabrik.de/tentakelfabrik/crispy
- *
- */
-
-@mixin components__nav()
-{
-    .nav {
-
-    }
-}
diff --git a/src/examples/styles.scss b/src/examples/styles.scss
deleted file mode 100644
index 8b271c5..0000000
--- a/src/examples/styles.scss
+++ /dev/null
@@ -1,63 +0,0 @@
-@import
-
-    'reflex',
-    '../crispy-all',
-    'site/header',
-    'components/nav',
-    'templates/home';
-
-@include site__header();
-@include template__home();
-
-.container {
-    max-width: $crispy__lg;
-}
-
-.sm, .md, .md-only, .lg-only {
-    display: none;
-}
-
-.sm {
-    @include crispy__media-sm() {
-        display: block;
-    }
-}
-
-.md {
-    @include crispy__media-md() {
-        display: block;
-    }
-}
-
-.md-only {
-    @include crispy__media-md-only() {
-        display: block;
-    }
-}
-
-.lg-only {
-    @include crispy__media-lg-only() {
-        display: block;
-    }
-}
-
-.triangle-left, .triangle-right, .triangle-top, .triangle-bottom {
-    display: block;
-}
-
-.triangle-left {
-    @include triangle('left', $crispy__color-primary);
-}
-
-.triangle-right {
-    @include triangle('right', $crispy__color-primary);
-}
-
-.triangle-top {
-    @include triangle('top', $crispy__color-primary);
-}
-
-.triangle-bottom {
-    @include triangle('bottom', $crispy__color-primary);
-}
-
diff --git a/src/html/index.html.ejs b/src/html/index.html.ejs
index c119071..9165cb8 100644
--- a/src/html/index.html.ejs
+++ b/src/html/index.html.ejs
@@ -10,7 +10,7 @@
     
 
 
-
+