From b4be5041a889cd6023a4ef4abed0a512a8ddde88 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Bj=C3=B6rn?= Date: Tue, 13 Jul 2021 09:55:05 +0200 Subject: [PATCH] adding --- public/components.html | 100 +- public/index.html | 17 +- public/plain-ui.css | 11083 ++++++++++++++++++++++++++++- public/spritemap.js | 14 +- src/scss/_variables.scss | 2 +- src/scss/components/_button.scss | 40 +- src/scss/helpers/_sizing.scss | 78 +- src/scss/helpers/_spacing.scss | 107 +- webpack.mix.js | 6 - 9 files changed, 11319 insertions(+), 128 deletions(-) diff --git a/public/components.html b/public/components.html index b0f3735..9d5bee9 100644 --- a/public/components.html +++ b/public/components.html @@ -50,50 +50,61 @@
-
+
+

+ Components +

+ +

+ Buttons +

+
-

- Some Text -

+<button class="button"> + Default +</button> +

-
-
-
-
-
-
-

Components

-

Buttons

+
+ + + + +
+ +
+ + + + +
+ +
+ +
- - - - - - -
-
- -
-
@@ -408,12 +419,15 @@

Hero

-
- -
+ + +
+
+ +
diff --git a/public/index.html b/public/index.html index 1d497fb..6d69f23 100644 --- a/public/index.html +++ b/public/index.html @@ -66,7 +66,7 @@
-
+

On development, a few styles and names will be change until release

@@ -74,7 +74,7 @@

- Plain UI is a simple UI Framework. + Plain UI is a simple UI Framework.

@@ -118,7 +118,18 @@ PurgeCSS

- +mix + .setPublicPath('./public') + .sass('src/scss/plain-ui.scss', 'public/plain-ui.css') + .purgeCss({ + extend: { + enabled: true, + content: [ + path.join(__dirname, 'public/*.html'), + ] + } + }) +
diff --git a/public/plain-ui.css b/public/plain-ui.css index 22dfd28..31b51d8 100644 --- a/public/plain-ui.css +++ b/public/plain-ui.css @@ -1 +1,11082 @@ -@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1);src:url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1) format("embedded-opentype"),url(/fonts/IBMPlexMono.woff2?db620201a437f00ce78da2a10cf50f3f) format("woff2"),url(/fonts/IBMPlexMono.woff?3d04ef6de65d3c77bd60c158326be298) format("woff"),url(/fonts/IBMPlexMono.ttf?ce51a85eb7160067d01bcf6e56f837d1) format("truetype");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:IBM Plex Mono;src:url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34);src:url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34) format("embedded-opentype"),url(/fonts/IBMPlexMono-Bold.woff2?8b633c62813e0275ebd7a1c793c4e99c) format("woff2"),url(/fonts/IBMPlexMono-Bold.woff?b72090c625b4144f3763d5b2bf8f5942) format("woff"),url(/fonts/IBMPlexMono-Bold.ttf?558e55bd46468bb8d7074d7064d02c30) format("truetype");font-weight:700;font-style:normal;font-display:swap}:root{--body:#f9f9f9;--text:#363636;--text-contrast:#fff;--primary:#3e3e3e;--primary-contrast:#3e3e3e;--active:#717171;--active-contrast:#fff;--link:#363636;--link-hover:#d95959;--danger:#d95959;--danger-contrast:#ecacac;--info:#0090d4;--info-constrast:#ecacac;--success:#64ac64;--success-contrast:#a6d0a6;--warning:#f0ad4e;--warning-contrast:#f8d9ac;--background:#3e3e3e;--background-contrast:#fff;--border:#3e3e3e;--border-contrast:#fff}html{font-size:100%;line-height:1.15;-webkit-text-size-adjust:100%}body,html{margin:0;height:100%}html{box-sizing:border-box}body{font-family:IBM Plex Mono,sans-serif;color:var(--text);background-color:var(--body);direction:ltr;font-size:.9rem;line-height:1.618}@media only screen and (min-width:992px){body{font-size:1rem}}a{color:var(--link);transition:color .5s;text-decoration:none}a:hover{color:var(--link-hover)}a:focus{outline:none}*,:after,:before{box-sizing:inherit}table{border-collapse:collapse;border-spacing:0}button,figcaption,figure,input,p,select{margin:0}button,select{text-transform:none}[type=button],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}code{font-family:IBM Plex Mono,sans-serif;font-size:.9rem}.content p{margin:0 0 1rem}@media only screen and (min-width:992px){.content p{margin:0 0 .8rem}}.content a{-webkit-text-decoration-skip:ink edges;text-decoration-skip:ink edges;text-decoration:underline}.content small{font-size:80%}.content blockquote{border-left:1px solid var(--primary);margin-left:0;padding:.6rem .8rem}.content blockquote p:last-child{margin-bottom:0}.content ul{padding:0;margin:0 0 1rem}@media only screen and (min-width:992px){.content ul{margin:0 0 .8rem}}.content ul{margin-left:1.5em}.content ul ul{margin-top:0;margin-left:1em}.content ul{list-style:disc outside}.content code{white-space:pre;display:block;overflow-y:hidden;overflow-x:auto;border:1px solid var(--primary);border-radius:2px;background-color:var(--background-contrast);margin:0 0 1rem;padding:.6rem .8rem}@media only screen and (min-width:992px){.content code{margin:0 0 .8rem;padding:.8rem 1rem}}.highlight{padding:.15rem .4rem .25rem;background:var(--primary);color:var(--text-contrast);border-radius:2px}.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{font-family:IBM Plex Mono,sans-serif;font-weight:700;line-height:1.2;margin:.6rem 0 1.2rem}@media only screen and (min-width:992px){.h1,.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6{margin:.7rem 0 1.4rem}}.h1.highlight,.h2.highlight,.h3.highlight,.h4.highlight,.h5.highlight,.h6.highlight,h1.highlight,h2.highlight,h3.highlight,h4.highlight,h5.highlight,h6.highlight{display:table}.h1,h1{font-size:2.25rem}@media only screen and (min-width:992px){.h1,h1{font-size:2.82rem}}.h2,h2{font-size:2rem}@media only screen and (min-width:992px){.h2,h2{font-size:2.52rem}}.h3,h3{font-size:1.8rem}@media only screen and (min-width:992px){.h3,h3{font-size:2.28rem}}.h4,h4{font-size:1.6rem}@media only screen and (min-width:992px){.h4,h4{font-size:2.04rem}}.h5,h5{font-size:1.4rem}@media only screen and (min-width:992px){.h5,h5{font-size:1.8rem}}.h6,h6{font-size:1.2rem}@media only screen and (min-width:992px){.h6,h6{font-size:1.56rem}}.badge{display:inline-block;background-color:var(--background);color:var(--text-contrast);font-size:.85rem;padding:.4rem .8rem;border:1px solid var(--primary);border-radius:2px}.badge--round{display:inline-flex;justify-content:center;border-radius:50%;width:2.8em}.button{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:relative;display:inline-flex;align-items:center;text-decoration:none;font-family:IBM Plex Mono,sans-serif;font-size:1rem;border:1px solid var(--border);background-color:var(--background-contrast);color:var(--text);border-radius:2px;transition:background-color .1s;margin-bottom:.5em;padding:0 1.3em;min-height:2.8em;width:100%}@media only screen and (min-width:768px){.button{width:auto}}.button--small{font-size:.8rem}.button--selected,.button:hover{cursor:pointer;text-decoration:none;color:#fff;background-color:var(--active)}.button:active,.button:focus{outline:1px solid var(--active)}.button:disabled{opacity:.5}.button:disabled:hover{cursor:not-allowed;border:1px solid var(--border);background-color:var(--background-contrast);color:var(--border)}.button--transparent{margin:0;padding:0;border:none;background:transparent;border-radius:0}.button--transparent:active,.button--transparent:focus{outline:none}.button--danger{border-color:var(--danger)}.button--danger:hover{background-color:var(--danger)}.button--danger:active,.button--danger:focus{outline:2px solid var(--active)}.button--outline,.button--outline:hover{background-color:transparent}.button--outline:hover{color:var(--border);border-color:var(--border-contrast)}.button--danger.button--outline:hover{border-color:var(--danger)}.field-group{margin:0 0 1rem}.field-group--valid input.field-text{border-color:var(--success)}.field-group--valid .icon{fill:var(--success)}.field-group--error input.field-text{border-color:var(--danger)}.field-group--error .icon{fill:var(--danger)}.field-label{font-size:1rem;font-family:IBM Plex Mono,sans-serif}.field-label .icon{vertical-align:text-bottom}.field-label:hover{cursor:pointer}input.field-text,select.field-choice{font-family:IBM Plex Mono,sans-serif;font-size:.95rem;width:100%;border:1px solid var(--active);background-color:var(--background-contrast);border-radius:2px;margin:.7rem 0 0}input.field-text:active,input.field-text:focus,select.field-choice:active,select.field-choice:focus{outline:0;border-color:var(--border)}input.field-text{padding:.8em 1.1em}select.field-choice{-webkit-appearance:none;-moz-appearance:none;appearance:none;padding:.8em;position:relative}select.field-choice:after{position:absolute;right:0;top:0;display:block;content:" ";width:10px;height:10px;background:red}input[type=checkbox].field-choice,input[type=radio].field-choice{position:relative;display:none}input[type=checkbox].field-choice~.field-choice__checked,input[type=radio].field-choice~.field-choice__checked{display:none}input[type=checkbox].field-choice:checked~.field-choice__checked,input[type=radio].field-choice:checked~.field-choice__checked{display:inline-block}input[type=checkbox].field-choice:checked~.field-choice__unchecked,input[type=radio].field-choice:checked~.field-choice__unchecked{display:none}svg.field-choice__unchecked{fill:var(--active)}svg.field-choice__checked{fill:var(--success)}.field-error{display:inline-block;width:100%;padding:.6em .5em;font-size:.8rem;color:var(--danger)}.icon{width:1em;height:1em;max-height:100%;max-width:100%;vertical-align:middle;overflow:hidden;font-size:1.4rem;fill:var(--text)}.hero{position:relative}.hero img{width:100%;-o-object-fit:cover;object-fit:cover;-o-object-position:50% 50%;object-position:50% 50%}.tabs{display:flex;flex-direction:column;width:100%;border-bottom:1px solid var(--primary)}@media only screen and (min-width:768px){.tabs{width:auto;flex-direction:row}}.tabs__item{min-height:2.8em;display:flex;align-items:center;padding:0 1em;color:var(--text);transition:background-color .1s;border-bottom:3px solid transparent;background-color:transparent;width:100%}@media only screen and (min-width:768px){.tabs__item{width:auto;display:inline-flex}}.tabs__item:hover{cursor:pointer;background-color:var(--active);color:var(--text-contrast);border-top-left-radius:2px;border-top-right-radius:2px}.tabs__item--selected{color:var(--text);border-color:var(--border)}.tabs--contrast{border:0}.tabs--contrast .tabs__item{color:var(--text-contrast)}.tabs--contrast .tabs__item:hover{background-color:var(--background-contrast);color:var(--text);border-radius:0}.tabs--contrast .tabs__item--selected{border-color:var(--border-contrast)}.panel{border:1px solid var(--border);border-radius:2px;background-color:var(--background-contrast)}.panel__body{padding:.6rem .8rem}@media only screen and (min-width:992px){.panel__body{padding:.8rem 1rem}}.panel--border-highlight{border-left-width:12px}.figure{margin:0;display:inline-block;line-height:0;border:1px solid var(--primary);border-radius:2px;overflow:hidden}.figure__caption{padding:.75em 1.1em;font-size:.7rem;background:var(--background);line-height:1.618;margin:0;color:var(--text-contrast)}.figure .media{border:0}.media{border-radius:2px;border:1px solid var(--primary);width:100%;height:auto}.table{width:100%;border:1px solid #cacaca;background:var(--white)}.table--striped tr:nth-child(2n){background-color:#fdfdfd}.table td{color:var(--text)}.table td,.table th{text-align:left;border-bottom:1px solid #cacaca;padding:.5em 1.25em}.table th{color:#fff;background-color:#3e3e3e}.table tr:hover{background-color:#585858}.table tr:hover td{color:#fff}.slider{position:relative;overflow-x:visible}.slider__inner{display:flex;white-space:nowrap}.slider__item{padding:0 .6em;display:inline-block;white-space:normal;flex-shrink:0}.bar{display:flex;min-height:2.8em;background-color:var(--background);color:var(--text-contrast);border:1px solid var(--primary);border-radius:2px}.bar__start{justify-content:start}.bar__main{flex-grow:1}.bar__end{justify-content:end}.bar__end,.bar__main,.bar__start{display:flex;align-self:center;margin-left:.75em}.bar__end:last-child,.bar__main:last-child,.bar__start:last-child{margin-right:.75em}.modal{position:fixed;width:100%;height:100%;top:0;left:0;display:flex;visibility:hidden;transition:visibility 0s linear .5s;padding:1rem;z-index:20;align-items:center;justify-content:center}.modal__inner{position:relative;z-index:21;transition:transform .5s;transform:scale(0);max-width:600px}.modal__title{font-size:2rem;text-align:center;white-space:pre-line;margin-bottom:2rem}.modal__title .icon{font-size:3rem}.modal__body,.modal__title{color:var(--text-contrast)}.modal__body{margin-bottom:1.5rem}.modal .button{color:var(--text-contrast)}.modal:before{position:fixed;top:0;left:0;width:100%;height:100%;background-color:transparent;transition:background-color .5s;z-index:19;content:""}.modal--open{display:flex;visibility:visible;transition:visibility 0s linear 0s}.modal--open:before{background:rgba(0,0,0,.87)}.modal--open .modal__inner{transform:scale(1)}.loading{height:60px;width:47px;margin:0 auto;display:flex;align-items:center}.loading span{display:block;width:15px;height:80px;background-color:var(--background);-webkit-animation-name:plain-ui__loading-animation;animation-name:plain-ui__loading-animation;-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-delay:.15s;animation-delay:.15s;border-top:1px solid var(--background);border-bottom:1px solid var(--background)}.loading span:first-child{margin-right:1px;-webkit-animation-delay:0s;animation-delay:0s}.loading span:last-child{margin-left:1px;-webkit-animation-delay:.3s;animation-delay:.3s}@-webkit-keyframes plain-ui__loading-animation{0%{height:60px}50%{height:40px}to{height:60px}}@keyframes plain-ui__loading-animation{0%{height:60px}50%{height:40px}to{height:60px}}.masonry{display:flex;width:100%;flex-flow:row wrap;gap:15px}.masonry__item{width:100%;height:200px}@media only screen and (min-width:768px){.masonry__item{height:300px}.masonry__item:nth-child(4n+1){width:calc(25% - 10px)}.masonry__item:nth-child(4n+2){width:calc(55% - 10px)}.masonry__item:nth-child(4n+3){width:calc(20% - 10px)}.masonry__item:nth-child(4n+4){width:calc(67% - 10px)}.masonry__item:nth-child(4n+5){width:calc(33% - 10px)}}:root{--reflex-columns:12;--reflex-grid-spacing:15px;--reflex-xs:576px;--reflex-sm:768px;--reflex-md:992px;--reflex-lg:1200px;--reflex-xlg:1600px;--reflex-xxs-max:575px;--reflex-xs-max:767px;--reflex-sm-max:991px;--reflex-md-max:1199px;--reflex-lg-max:1599px}.container{box-sizing:border-box;width:100%;margin-right:auto;margin-left:auto;padding-right:30px;padding-left:30px}.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-6{width:50%;*width:49.9%}.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}.float-right{float:right}.overflow-x-hidden{overflow-x:hidden}.object-fit-cover{-o-object-fit:cover;object-fit:cover}.h-100{height:100%}.w-col-12{width:100%}.marginless{margin:0}.marginless-last-child>:last-child{margin-bottom:0}.m-top-4{margin-top:1.125rem}.m-top-6{margin-top:3.125rem}.m-bottom-0{margin-bottom:0}.m-bottom-2{margin-bottom:.125rem}.m-bottom-4{margin-bottom:1.125rem}.m-left-3{margin-left:.5rem}@media only screen and (min-width:768px){.m-left-sm-3{margin-left:.5rem}}.color-active{color:var(--active)}.fill-text{fill:var(--text)}.fill-text-contrast{fill:var(--text-contrast)}.fill-active{fill:var(--active)}.fill-success{fill:var(--success)}.border-color-active{border-color:var(--active)}.border-color-danger{border-color:var(--danger)}.border-color-info{border-color:var(--info)}.background-color-active{background-color:var(--active)}.bold{font-weight:bolder} +@charset "UTF-8"; +@font-face { + font-family: "IBM Plex Mono"; + src: url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1); + src: url(/fonts/IBMPlexMono.eot?85f924ecb898e5720062617e4a86f1d1) format("embedded-opentype"), url(/fonts/IBMPlexMono.woff2?db620201a437f00ce78da2a10cf50f3f) format("woff2"), url(/fonts/IBMPlexMono.woff?3d04ef6de65d3c77bd60c158326be298) format("woff"), url(/fonts/IBMPlexMono.ttf?ce51a85eb7160067d01bcf6e56f837d1) format("truetype"); + font-weight: normal; + font-style: normal; + font-display: swap; +} +@font-face { + font-family: "IBM Plex Mono"; + src: url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34); + src: url(/fonts/IBMPlexMono-Bold.eot?eb105b142ce736849ef4828cb0c8eb34) format("embedded-opentype"), url(/fonts/IBMPlexMono-Bold.woff2?8b633c62813e0275ebd7a1c793c4e99c) format("woff2"), url(/fonts/IBMPlexMono-Bold.woff?b72090c625b4144f3763d5b2bf8f5942) format("woff"), url(/fonts/IBMPlexMono-Bold.ttf?558e55bd46468bb8d7074d7064d02c30) format("truetype"); + font-weight: bold; + font-style: normal; + font-display: swap; +} +:root { + --reflex-columns: 12; + --reflex-grid-spacing: 15px; + --reflex-xs: 576px; + --reflex-sm: 768px; + --reflex-md: 992px; + --reflex-lg: 1200px; + --reflex-xlg: 1600px; + --reflex-xxs-max: 575px; + --reflex-xs-max: 767px; + --reflex-sm-max: 991px; + --reflex-md-max: 1199px; + --reflex-lg-max: 1599px; +} + +.container, +.container-full { + box-sizing: border-box; + width: 100%; + margin-right: auto; + margin-left: auto; + padding-right: 30px; + padding-left: 30px; +} +.container .grid, +.container-full .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: -0.31em; + *letter-spacing: normal; + word-spacing: -0.43em; + list-style-type: none; +} +.grid::before, .grid::after { + box-sizing: border-box; + letter-spacing: normal; + word-spacing: normal; + white-space: normal; +} + +[class*=col-] { + box-sizing: border-box; + letter-spacing: normal; + word-spacing: normal; + white-space: normal; + position: relative; + width: 100%; + vertical-align: top; + padding: 15px; + display: inline-block; + *display: inline; + zoom: 1; +} +[class*=col-]::before, [class*=col-]::after { + 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 (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 (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 (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 (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 (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 (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: -0.1%; + } +} +@media (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: -0.1%; + } +} +@media (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: -0.1%; + } +} +@media (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: -0.1%; + } +} +@media (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: -0.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; + margin-bottom: 0; +} +.flex-footer > :last-child { + margin-bottom: 0; +} + +@media (min-width: 0px) and (max-width: 575px) { + .hidden-xxs { + display: none; + } +} + +@media (min-width: 576px) { + .hidden-xs-up { + display: none; + } +} + +@media (max-width: 767px) { + .hidden-xs-down { + display: none; + } +} + +@media (min-width: 576px) and (max-width: 767px) { + .hidden-xs { + display: none; + } +} + +@media (min-width: 768px) { + .hidden-sm-up { + display: none; + } +} + +@media (max-width: 991px) { + .hidden-sm-down { + display: none; + } +} + +@media (min-width: 768px) and (max-width: 991px) { + .hidden-sm { + display: none; + } +} + +@media (min-width: 992px) { + .hidden-md-up { + display: none; + } +} + +@media (max-width: 1199px) { + .hidden-md-down { + display: none; + } +} + +@media (min-width: 992px) and (max-width: 1199px) { + .hidden-md { + display: none; + } +} + +@media (min-width: 1200px) { + .hidden-lg-up { + display: none; + } +} + +@media (max-width: 1599px) { + .hidden-lg-down { + display: none; + } +} + +@media (min-width: 1200px) and (max-width: 1599px) { + .hidden-lg { + display: none; + } +} + +@media (min-width: 1600px) { + .hidden-xlg { + display: none; + } +} + +/** + * functions + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ +/** + * strip unit from value + * + * @param {mixed} $value + * @return {number} + * + */ +/** + * + * + * https://css-tricks.com/snippets/sass/str-replace-function/ + * + */ +/** + * get value of key "default" in map + * + * @param {map} $value + * @return {boolean|unit} + * + */ +/** + * factor + * + * + * + * @param {integer} $x + * @return {float} + * + */ +/** + * mixins + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui-css + * + */ +/** + * Clear Floats + * + * + * + */ +/** + * clear styles from list + * + * + */ +/** + * media-queries as mixins + * based on breakpoints from variables + * + * + * + */ +/** + * Set property and his value for each Breakpoint + * + * ( + * $plain-ui__md: 10px + * ) + * + * + * @param {css} $property + * @param {map} $breakpoints + * @param {Boolean} $important [false] + * + */ +/** + * Set property and his value with an factor for each Breakpoint + * + * ( + * $plain-ui__md: 10px + * ) + * + * @param {css} $property + * @param {number} $factor + * @param {map} $breakpoints + * @param {Boolean} $important [false] + * + */ +/** + * Set font-size from Breakpoints, use for calculating difference from font-size and default font-size + * + * ( + * $plain-ui__md: 1rem + * ) + * + * @param {map} $breakpoints + * @param {unit} $font-size + * @param {unit} $default + * @param {Boolean} $important [false] + * + */ +/** + * variables + * + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui-css + * + */ +/** + * breakpoints + * + */ +/** + * fonts + * + */ +/** + * colors + * + * + */ +:root { + --body: #f9f9f9; + --text: #363636; + --text-contrast: #ffffff; + --primary: #3e3e3e; + --primary-contrast: #3e3e3e; + --active: #717171; + --active-contrast: #ffffff; + --link: #363636; + --link-hover: #d95959; + --danger: #d95959; + --danger-contrast: #ecacac; + --info: #0090d4; + --info-constrast: #ecacac; + --success: #64ac64; + --success-contrast: #a6d0a6; + --warning: #f0ad4e; + --warning-contrast: #f8d9ac; + --background: #3e3e3e; + --background-contrast: #ffffff; + --border: #3e3e3e; + --border-contrast: #ffffff; +} + +/** + * margin + * + */ +/** + * padding + * + */ +/** + * border + * + */ +/** + * core + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ +/** + * normalize + * + * Thanks to https://necolas.github.io/normalize.css/, use a lot from them + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * + */ +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; +} + +body { + font-family: "IBM Plex Mono", sans-serif; + color: var(--text); + background-color: var(--body); + direction: ltr; + font-size: 0.9rem; + line-height: 1.618; +} +@media only screen and (min-width: 992px) { + body { + font-size: 1rem; + } +} + +a { + color: var(--link); + transition: color 0.5s; + text-decoration: none; +} +a:hover { + color: var(--link-hover); +} +a:focus { + outline: none; +} + +main { + display: block; +} + +*, +*::after, +*::before { + box-sizing: inherit; +} + +table { + border-collapse: collapse; + border-spacing: 0; +} + +figure { + margin: 0; +} + +figcaption { + margin: 0; +} + +p { + margin: 0; +} + +/** + * form elements + * + * + */ +button, +input, +optgroup, +select, +textarea { + margin: 0; +} + +fieldset { + margin: 0 0 1rem; +} + +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 + * + */ +hr { + box-sizing: content-box; + height: 0; + overflow: visible; + border: 0; + border-top: 1px solid var(--border); + margin: 0 0 1rem; +} + +progress { + vertical-align: baseline; +} + +details { + display: block; +} + +summary { + display: list-item; +} + +code, +kbd, +pre, +samp { + font-family: "IBM Plex Mono", sans-serif; + font-size: 0.9rem; +} + +/** + * Heading + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ +.content { + /** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + /** + * blockquote + * + * + */ + /** + * lists + * + */ +} +.content p { + margin: 0 0 1rem; +} +@media only screen and (min-width: 992px) { + .content p { + margin: 0 0 0.8rem; + } +} +.content a, +.content ins, +.content u { + -webkit-text-decoration-skip: ink edges; + text-decoration-skip: ink edges; +} +.content a { + text-decoration: underline; +} +.content b, +.content strong { + font-weight: bolder; +} +.content small { + font-size: 80%; +} +.content sub, +.content sup { + font-size: 70%; + line-height: 0; + position: relative; + vertical-align: baseline; +} +.content sub { + bottom: -0.25em; +} +.content sup { + top: -0.5em; +} +.content abbr[title] { + border-bottom: 1px dotted; + cursor: help; + text-decoration: none; +} +.content mark { + padding: 0.25em; +} +.content blockquote { + border-left: 1px solid var(--border); + margin-left: 0; + padding: 0.6rem 0.8rem; +} +.content blockquote p:last-child { + margin-bottom: 0; +} +.content dl, +.content ol, +.content ul { + padding: 0; + margin: 0 0 1rem; +} +@media only screen and (min-width: 992px) { + .content dl, +.content ol, +.content ul { + margin: 0 0 0.8rem; + } +} +.content ol, +.content ul { + margin-left: 1.5em; +} +.content ol ol, +.content ul ul { + margin-top: 0; + margin-left: 1em; +} +.content ol { + list-style: decimal outside; +} +.content ul { + list-style: disc outside; +} +.content dl { + margin-left: 0.5em; +} +.content dd, +.content dt { + margin: 0; +} +.content dt { + font-weight: bold; +} +.content code { + white-space: pre; + display: block; + overflow-y: hidden; + overflow-x: auto; + border: 1px solid var(--border); + border-radius: 2px; + background-color: var(--background-contrast); + margin: 0 0 1rem; + padding: 0.6rem 0.8rem; +} +@media only screen and (min-width: 992px) { + .content code { + margin: 0 0 0.8rem; + } +} +@media only screen and (min-width: 992px) { + .content code { + padding: 0.8rem 1rem; + } +} + +.highlight { + padding: 0.15rem 0.4rem 0.25rem; + background: var(--primary); + color: var(--text-contrast); + border-radius: 2px; +} + +/** + * Heading + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ +h1, .h1, +h2, .h2, +h3, .h3, +h4, .h4, +h5, .h5, +h6, .h6 { + font-family: "IBM Plex Mono", sans-serif; + font-weight: bold; + line-height: 1.2; + margin: 0.6rem 0 1.2rem; +} +@media only screen and (min-width: 992px) { + h1, .h1, +h2, .h2, +h3, .h3, +h4, .h4, +h5, .h5, +h6, .h6 { + margin: 0.7rem 0 1.4rem; + } +} +h1.highlight, .h1.highlight, +h2.highlight, .h2.highlight, +h3.highlight, .h3.highlight, +h4.highlight, .h4.highlight, +h5.highlight, .h5.highlight, +h6.highlight, .h6.highlight { + display: table; +} + +h1, .h1 { + font-size: 2.25rem; +} +@media only screen and (min-width: 992px) { + h1, .h1 { + font-size: 2.82rem; + } +} + +h2, .h2 { + font-size: 2rem; +} +@media only screen and (min-width: 992px) { + h2, .h2 { + font-size: 2.52rem; + } +} + +h3, .h3 { + font-size: 1.8rem; +} +@media only screen and (min-width: 992px) { + h3, .h3 { + font-size: 2.28rem; + } +} + +h4, .h4 { + font-size: 1.6rem; +} +@media only screen and (min-width: 992px) { + h4, .h4 { + font-size: 2.04rem; + } +} + +h5, .h5 { + font-size: 1.4rem; +} +@media only screen and (min-width: 992px) { + h5, .h5 { + font-size: 1.8rem; + } +} + +h6, .h6 { + font-size: 1.2rem; +} +@media only screen and (min-width: 992px) { + h6, .h6 { + font-size: 1.56rem; + } +} + +/** + * + * A + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * + */ +.badge { + display: inline-block; + background-color: var(--background); + color: var(--text-contrast); + font-size: 0.85rem; + padding: 0.4rem 0.8rem; + border: 1px solid var(--border); + border-radius: 2px; +} +.badge--round { + display: inline-flex; + justify-content: center; + border-radius: 50%; + width: 2.8em; +} + +/** + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * + */ +.button { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + position: relative; + display: inline-flex; + align-items: center; + text-decoration: none; + font-family: "IBM Plex Mono", sans-serif; + font-size: 1rem; + border: 1px solid var(--border); + background-color: var(--background-contrast); + color: var(--text); + border-radius: 2px; + transition: background-color 0.1s; + margin-bottom: 0.5em; + padding: 0 1.3em; + min-height: 2.8em; + width: 100%; +} +@media only screen and (min-width: 768px) { + .button { + width: auto; + } +} +.button--small { + font-size: 0.8rem; +} +.button:hover, .button--selected { + cursor: pointer; + text-decoration: none; + color: white; + background-color: var(--active); +} +.button:focus, .button:active { + outline: 1px solid var(--active); +} +.button:disabled { + opacity: 0.5; +} +.button:disabled:hover { + cursor: not-allowed; + border: 1px solid var(--border); + background-color: var(--background-contrast); + color: var(--border); +} +.button--transparent { + margin: 0; + padding: 0; + border: none; + background: transparent; + border-radius: 0; +} +.button--transparent:focus, .button--transparent:active { + outline: none; +} +.button--danger { + border-color: var(--danger); +} +.button--danger:hover { + background-color: var(--danger); +} +.button--danger:focus, .button--danger:active { + outline: 2px solid var(--active); +} +.button--info { + border-color: var(--info); +} +.button--info:hover { + background-color: var(--info); +} +.button--info:focus, .button--info:active { + outline: 2px solid var(--info); +} +.button--warning { + border-color: var(--warning); +} +.button--warning:hover { + background-color: var(--warning); +} +.button--warning:focus, .button--warning:active { + outline: 2px solid var(--warning); +} +.button--success { + border-color: var(--success); +} +.button--success:hover { + background-color: var(--success); +} +.button--success:focus, .button--success:active { + outline: 2px solid var(--success); +} +.button--outline { + background-color: transparent; +} +.button--outline:hover { + color: var(--border); + border-color: #a4a4a4; + background-color: transparent; +} +.button--danger.button--outline:hover { + border-color: #ecacac; +} +.button--info.button--outline:hover { + border-color: #3bc0ff; +} +.button--success.button--outline:hover { + border-color: #a6d0a6; +} + +/** + * + * + * + * + */ +.field-group { + margin: 0 0 1rem; +} +.field-group--valid input.field-text, .field-group--valid textarea.field-text { + border-color: var(--success); +} +.field-group--valid .icon { + fill: var(--success); +} +.field-group--error input.field-text, .field-group--error textarea.field-text { + border-color: var(--danger); +} +.field-group--error .icon { + fill: var(--danger); +} + +.field-label { + font-size: 1rem; + font-family: "IBM Plex Mono", sans-serif; +} +.field-label .icon { + vertical-align: text-bottom; +} +.field-label:hover { + cursor: pointer; +} + +input.field-text, textarea.field-text, select.field-choice { + font-family: "IBM Plex Mono", sans-serif; + font-size: 0.95rem; + width: 100%; + border: 1px solid var(--active); + background-color: var(--background-contrast); + border-radius: 2px; + margin: 0.7rem 0 0; +} +input.field-text:focus, input.field-text:active, textarea.field-text:focus, textarea.field-text:active, select.field-choice:focus, select.field-choice:active { + outline: 0; + border-color: var(--border); +} + +input.field-text, textarea.field-text { + padding: 0.8em 1.1em; +} + +/** + * field-choice + * + * + */ +select.field-choice { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + padding: 0.8em; + position: relative; +} +select.field-choice::after { + position: absolute; + right: 0; + top: 0; + display: block; + content: " "; + width: 10px; + height: 10px; + background: red; +} + +/** + * radio & checkbox + * + *
+ * + *
+ * + */ +input[type=checkbox].field-choice, +input[type=radio].field-choice { + position: relative; + display: none; +} +input[type=checkbox].field-choice ~ .field-choice__checked, +input[type=radio].field-choice ~ .field-choice__checked { + display: none; +} +input[type=checkbox].field-choice:checked ~ .field-choice__checked, +input[type=radio].field-choice:checked ~ .field-choice__checked { + display: inline-block; +} +input[type=checkbox].field-choice:checked ~ .field-choice__unchecked, +input[type=radio].field-choice:checked ~ .field-choice__unchecked { + display: none; +} + +svg.field-choice__unchecked { + fill: var(--active); +} + +svg.field-choice__checked { + fill: var(--success); +} + +.field-help, .field-error { + display: inline-block; + width: 100%; + padding: 0.6em 0.5em; + font-size: 0.8rem; +} + +/** + * display error for fields + * + */ +.field-error { + color: var(--danger); +} + +/** + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * + */ +.icon { + width: 1em; + height: 1em; + max-height: 100%; + max-width: 100%; + vertical-align: middle; + overflow: hidden; + font-size: 1.4rem; + fill: var(--text); +} + +/** + *
+ * image + *
+ * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * + */ +.hero { + position: relative; +} +.hero img { + width: 100%; + -o-object-fit: cover; + object-fit: cover; + -o-object-position: 50% 50%; + object-position: 50% 50%; +} + +/** + * + * + * + */ +.tabs { + display: flex; + flex-direction: column; + width: 100%; + border-bottom: 1px solid var(--border); +} +@media only screen and (min-width: 768px) { + .tabs { + width: auto; + flex-direction: row; + } +} +.tabs__item { + min-height: 2.8em; + display: flex; + align-items: center; + padding: 0 1em; + color: var(--text); + transition: background-color 0.1s; + border-bottom: 3px solid transparent; + background-color: transparent; + width: 100%; +} +@media only screen and (min-width: 768px) { + .tabs__item { + width: auto; + display: inline-flex; + } +} +.tabs__item:hover { + cursor: pointer; + background-color: var(--active); + color: var(--text-contrast); + border-top-left-radius: 2px; + border-top-right-radius: 2px; +} +.tabs__item--selected { + color: var(--text); + border-color: var(--border); +} +.tabs--contrast { + border: 0; +} +.tabs--contrast .tabs__item { + color: var(--text-contrast); +} +.tabs--contrast .tabs__item:hover { + background-color: var(--background-contrast); + color: var(--text); + border-radius: 0; +} +.tabs--contrast .tabs__item--selected { + border-color: var(--border-contrast); +} + +/** + * + * + * + */ +.panel { + border: 1px solid var(--border); + border-radius: 2px; + background-color: var(--background-contrast); +} +.panel__body { + padding: 0.6rem 0.8rem; +} +@media only screen and (min-width: 992px) { + .panel__body { + padding: 0.8rem 1rem; + } +} +.panel--border-highlight { + border-left-width: 12px; +} + +/** + *
+ * + *
+ * food truck yr franzen pabst + *
+ *
+ * + */ +.figure { + margin: 0; + display: inline-block; + line-height: 0; + border: 1px solid var(--border); + border-radius: 2px; + overflow: hidden; +} +.figure__caption { + padding: 0.75em 1.1em; + font-size: 0.7rem; + background: var(--background); + line-height: 1.618; + margin: 0; + color: var(--text-contrast); +} +.figure .media { + border: 0; +} + +.media { + border-radius: 2px; + border: 1px solid var(--border); + width: 100%; + height: auto; +} + +/** + * + * + * + */ +.table { + width: 100%; + border: 1px solid #cacaca; + background: var(--white); +} +.table--striped tr:nth-child(even) { + background-color: #fdfdfd; +} +.table--scroll { + overflow-x: auto; +} +.table td { + color: var(--text); +} +.table td, +.table th { + text-align: left; + border-bottom: 1px solid #cacaca; + padding: 0.5em 1.25em; +} +.table th { + color: white; + background-color: #3e3e3e; +} +.table tr:hover { + background-color: #585858; +} +.table tr:hover td { + color: white; +} + +/** + *
+ *
+ *
+ *
+ *
+ * + */ +.slider { + position: relative; + overflow-x: visible; +} +.slider__inner { + display: flex; + white-space: nowrap; +} +.slider__item { + padding: 0 0.6em; + display: inline-block; + white-space: normal; + flex-shrink: 0; +} + +/** + *
+ *
+ *
+ *
+ *
+ *
+ *
+ *
+ * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://gitea.com/tentakelfabrik/plain-ui + * + */ +.bar { + display: flex; + min-height: 2.8em; + background-color: var(--background); + color: var(--text-contrast); + border: 1px solid var(--border); + border-radius: 2px; +} +.bar__start { + justify-content: start; +} +.bar__main { + flex-grow: 1; +} +.bar__end { + justify-content: end; +} +.bar__start, .bar__main, .bar__end { + display: flex; + align-self: center; + margin-left: 0.75em; +} +.bar__start:last-child, .bar__main:last-child, .bar__end:last-child { + margin-right: 0.75em; +} + +/** + *
+ * + *
+ * food truck yr franzen pabst + *
+ *
+ * + */ +.modal { + position: fixed; + width: 100%; + height: 100%; + top: 0; + left: 0; + display: flex; + visibility: hidden; + transition: visibility 0s linear 0.5s; + padding: 1rem; + z-index: 20; + align-items: center; + justify-content: center; +} +.modal__inner { + position: relative; + z-index: 21; + transition: transform 0.5s; + transform: scale(0); + max-width: 600px; +} +.modal__title { + font-size: 2rem; + text-align: center; + white-space: pre-line; + margin-bottom: 2rem; +} +.modal__title .icon { + font-size: 3rem; +} +.modal__title, .modal__body { + color: var(--text-contrast); +} +.modal__body { + margin-bottom: 1.5rem; +} +.modal .button { + color: var(--text-contrast); +} +.modal:before { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-color: transparent; + transition: background-color 0.5s; + z-index: 19; + content: ""; +} +.modal--open { + display: flex; + visibility: visible; + transition: visibility 0s linear 0s; +} +.modal--open:before { + background: rgba(0, 0, 0, 0.87); +} +.modal--open .modal__inner { + transform: scale(1); +} + +/** + * + * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/plain-ui + * + */ +.loading { + height: 60px; + width: 47px; + margin: 0 auto; + display: flex; + align-items: center; +} +.loading span { + display: block; + width: 15px; + height: 80px; + background-color: var(--background); + -webkit-animation-name: plain-ui__loading-animation; + animation-name: plain-ui__loading-animation; + -webkit-animation-duration: 0.5s; + animation-duration: 0.5s; + -webkit-animation-iteration-count: infinite; + animation-iteration-count: infinite; + -webkit-animation-delay: 0.15s; + animation-delay: 0.15s; + border-top: 1px solid var(--background); + border-bottom: 1px solid var(--background); +} +.loading span:first-child { + margin-right: 1px; + -webkit-animation-delay: 0s; + animation-delay: 0s; +} +.loading span:last-child { + margin-left: 1px; + -webkit-animation-delay: 0.3s; + animation-delay: 0.3s; +} + +@-webkit-keyframes plain-ui__loading-animation { + 0% { + height: 60px; + } + 50% { + height: 40px; + } + 100% { + height: 60px; + } +} + +@keyframes plain-ui__loading-animation { + 0% { + height: 60px; + } + 50% { + height: 40px; + } + 100% { + height: 60px; + } +} +/** + * masonry + * + *
+ *
+ * + *
+ *
+ * + * @author Björn Hase, Tentakelfabrik + * @license http://opensource.org/licenses/MIT The MIT License + * @link https://github.com/tentakelfabrik/crispy-css + * + */ +.masonry { + display: flex; + width: 100%; + flex-flow: row wrap; + gap: 15px; +} +.masonry__item { + width: 100%; + height: 200px; +} +@media only screen and (min-width: 768px) { + .masonry__item { + height: 300px; + } + .masonry__item:nth-child(4n+1) { + width: calc(25% - 10px); + } + .masonry__item:nth-child(4n+2) { + width: calc(55% - 10px); + } + .masonry__item:nth-child(4n+3) { + width: calc(20% - 10px); + } + .masonry__item:nth-child(4n+4) { + width: calc(67% - 10px); + } + .masonry__item:nth-child(4n+5) { + width: calc(33% - 10px); + } +} + +:root { + --reflex-columns: 12; + --reflex-grid-spacing: 15px; + --reflex-xs: 576px; + --reflex-sm: 768px; + --reflex-md: 992px; + --reflex-lg: 1200px; + --reflex-xlg: 1600px; + --reflex-xxs-max: 575px; + --reflex-xs-max: 767px; + --reflex-sm-max: 991px; + --reflex-md-max: 1199px; + --reflex-lg-max: 1599px; +} + +.container, +.container-full { + box-sizing: border-box; + width: 100%; + margin-right: auto; + margin-left: auto; + padding-right: 30px; + padding-left: 30px; +} + +.container .grid, +.container-full .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: -0.31em; + *letter-spacing: normal; + word-spacing: -0.43em; + list-style-type: none; +} + +.grid::before, .grid::after { + box-sizing: border-box; + letter-spacing: normal; + word-spacing: normal; + white-space: normal; +} + +[class*=col-] { + box-sizing: border-box; + letter-spacing: normal; + word-spacing: normal; + white-space: normal; + position: relative; + width: 100%; + vertical-align: top; + padding: 15px; + display: inline-block; + *display: inline; + zoom: 1; +} + +[class*=col-]::before, [class*=col-]::after { + 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.66666667%; + *width: 91.56666667%; +} + +.col-10 { + width: 83.33333333%; + *width: 83.23333333%; +} + +.col-9 { + width: 75%; + *width: 74.9%; +} + +.col-8 { + width: 66.66666667%; + *width: 66.56666667%; +} + +.col-7 { + width: 58.33333333%; + *width: 58.23333333%; +} + +.col-6 { + width: 50%; + *width: 49.9%; +} + +.col-5 { + width: 41.66666667%; + *width: 41.56666667%; +} + +.col-4 { + width: 33.33333333%; + *width: 33.23333333%; +} + +.col-3 { + width: 25%; + *width: 24.9%; +} + +.col-2 { + width: 16.66666667%; + *width: 16.56666667%; +} + +.col-1 { + width: 8.33333333%; + *width: 8.23333333%; +} + +@media (min-width: 576px) { + .col-xs-12 { + width: 100%; + *width: 99.9%; + } + + .col-xs-11 { + width: 91.66666667%; + *width: 91.56666667%; + } + + .col-xs-10 { + width: 83.33333333%; + *width: 83.23333333%; + } + + .col-xs-9 { + width: 75%; + *width: 74.9%; + } + + .col-xs-8 { + width: 66.66666667%; + *width: 66.56666667%; + } + + .col-xs-7 { + width: 58.33333333%; + *width: 58.23333333%; + } + + .col-xs-6 { + width: 50%; + *width: 49.9%; + } + + .col-xs-5 { + width: 41.66666667%; + *width: 41.56666667%; + } + + .col-xs-4 { + width: 33.33333333%; + *width: 33.23333333%; + } + + .col-xs-3 { + width: 25%; + *width: 24.9%; + } + + .col-xs-2 { + width: 16.66666667%; + *width: 16.56666667%; + } + + .col-xs-1 { + width: 8.33333333%; + *width: 8.23333333%; + } +} +@media (min-width: 768px) { + .col-sm-12 { + width: 100%; + *width: 99.9%; + } + + .col-sm-11 { + width: 91.66666667%; + *width: 91.56666667%; + } + + .col-sm-10 { + width: 83.33333333%; + *width: 83.23333333%; + } + + .col-sm-9 { + width: 75%; + *width: 74.9%; + } + + .col-sm-8 { + width: 66.66666667%; + *width: 66.56666667%; + } + + .col-sm-7 { + width: 58.33333333%; + *width: 58.23333333%; + } + + .col-sm-6 { + width: 50%; + *width: 49.9%; + } + + .col-sm-5 { + width: 41.66666667%; + *width: 41.56666667%; + } + + .col-sm-4 { + width: 33.33333333%; + *width: 33.23333333%; + } + + .col-sm-3 { + width: 25%; + *width: 24.9%; + } + + .col-sm-2 { + width: 16.66666667%; + *width: 16.56666667%; + } + + .col-sm-1 { + width: 8.33333333%; + *width: 8.23333333%; + } +} +@media (min-width: 992px) { + .col-md-12 { + width: 100%; + *width: 99.9%; + } + + .col-md-11 { + width: 91.66666667%; + *width: 91.56666667%; + } + + .col-md-10 { + width: 83.33333333%; + *width: 83.23333333%; + } + + .col-md-9 { + width: 75%; + *width: 74.9%; + } + + .col-md-8 { + width: 66.66666667%; + *width: 66.56666667%; + } + + .col-md-7 { + width: 58.33333333%; + *width: 58.23333333%; + } + + .col-md-6 { + width: 50%; + *width: 49.9%; + } + + .col-md-5 { + width: 41.66666667%; + *width: 41.56666667%; + } + + .col-md-4 { + width: 33.33333333%; + *width: 33.23333333%; + } + + .col-md-3 { + width: 25%; + *width: 24.9%; + } + + .col-md-2 { + width: 16.66666667%; + *width: 16.56666667%; + } + + .col-md-1 { + width: 8.33333333%; + *width: 8.23333333%; + } +} +@media (min-width: 1200px) { + .col-lg-12 { + width: 100%; + *width: 99.9%; + } + + .col-lg-11 { + width: 91.66666667%; + *width: 91.56666667%; + } + + .col-lg-10 { + width: 83.33333333%; + *width: 83.23333333%; + } + + .col-lg-9 { + width: 75%; + *width: 74.9%; + } + + .col-lg-8 { + width: 66.66666667%; + *width: 66.56666667%; + } + + .col-lg-7 { + width: 58.33333333%; + *width: 58.23333333%; + } + + .col-lg-6 { + width: 50%; + *width: 49.9%; + } + + .col-lg-5 { + width: 41.66666667%; + *width: 41.56666667%; + } + + .col-lg-4 { + width: 33.33333333%; + *width: 33.23333333%; + } + + .col-lg-3 { + width: 25%; + *width: 24.9%; + } + + .col-lg-2 { + width: 16.66666667%; + *width: 16.56666667%; + } + + .col-lg-1 { + width: 8.33333333%; + *width: 8.23333333%; + } +} +@media (min-width: 1600px) { + .col-xlg-12 { + width: 100%; + *width: 99.9%; + } + + .col-xlg-11 { + width: 91.66666667%; + *width: 91.56666667%; + } + + .col-xlg-10 { + width: 83.33333333%; + *width: 83.23333333%; + } + + .col-xlg-9 { + width: 75%; + *width: 74.9%; + } + + .col-xlg-8 { + width: 66.66666667%; + *width: 66.56666667%; + } + + .col-xlg-7 { + width: 58.33333333%; + *width: 58.23333333%; + } + + .col-xlg-6 { + width: 50%; + *width: 49.9%; + } + + .col-xlg-5 { + width: 41.66666667%; + *width: 41.56666667%; + } + + .col-xlg-4 { + width: 33.33333333%; + *width: 33.23333333%; + } + + .col-xlg-3 { + width: 25%; + *width: 24.9%; + } + + .col-xlg-2 { + width: 16.66666667%; + *width: 16.56666667%; + } + + .col-xlg-1 { + width: 8.33333333%; + *width: 8.23333333%; + } +} +.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 (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 (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 (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 (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 (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.66666667%; + *margin-left: 91.56666667%; +} + +.offset-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; +} + +.offset-9 { + margin-left: 75%; + *margin-left: 74.9%; +} + +.offset-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; +} + +.offset-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; +} + +.offset-6 { + margin-left: 50%; + *margin-left: 49.9%; +} + +.offset-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; +} + +.offset-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; +} + +.offset-3 { + margin-left: 25%; + *margin-left: 24.9%; +} + +.offset-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; +} + +.offset-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; +} + +@media (min-width: 576px) { + .offset-xs-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; + } + + .offset-xs-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; + } + + .offset-xs-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-xs-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; + } + + .offset-xs-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; + } + + .offset-xs-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-xs-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; + } + + .offset-xs-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; + } + + .offset-xs-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-xs-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; + } + + .offset-xs-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; + } + + .offset-xs-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +@media (min-width: 768px) { + .offset-sm-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; + } + + .offset-sm-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; + } + + .offset-sm-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-sm-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; + } + + .offset-sm-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; + } + + .offset-sm-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-sm-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; + } + + .offset-sm-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; + } + + .offset-sm-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-sm-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; + } + + .offset-sm-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; + } + + .offset-sm-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +@media (min-width: 992px) { + .offset-md-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; + } + + .offset-md-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; + } + + .offset-md-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-md-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; + } + + .offset-md-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; + } + + .offset-md-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-md-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; + } + + .offset-md-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; + } + + .offset-md-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-md-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; + } + + .offset-md-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; + } + + .offset-md-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +@media (min-width: 1200px) { + .offset-lg-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; + } + + .offset-lg-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; + } + + .offset-lg-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-lg-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; + } + + .offset-lg-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; + } + + .offset-lg-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-lg-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; + } + + .offset-lg-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; + } + + .offset-lg-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-lg-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; + } + + .offset-lg-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; + } + + .offset-lg-0 { + margin-left: 0; + *margin-left: -0.1%; + } +} +@media (min-width: 1600px) { + .offset-xlg-11 { + margin-left: 91.66666667%; + *margin-left: 91.56666667%; + } + + .offset-xlg-10 { + margin-left: 83.33333333%; + *margin-left: 83.23333333%; + } + + .offset-xlg-9 { + margin-left: 75%; + *margin-left: 74.9%; + } + + .offset-xlg-8 { + margin-left: 66.66666667%; + *margin-left: 66.56666667%; + } + + .offset-xlg-7 { + margin-left: 58.33333333%; + *margin-left: 58.23333333%; + } + + .offset-xlg-6 { + margin-left: 50%; + *margin-left: 49.9%; + } + + .offset-xlg-5 { + margin-left: 41.66666667%; + *margin-left: 41.56666667%; + } + + .offset-xlg-4 { + margin-left: 33.33333333%; + *margin-left: 33.23333333%; + } + + .offset-xlg-3 { + margin-left: 25%; + *margin-left: 24.9%; + } + + .offset-xlg-2 { + margin-left: 16.66666667%; + *margin-left: 16.56666667%; + } + + .offset-xlg-1 { + margin-left: 8.33333333%; + *margin-left: 8.23333333%; + } + + .offset-xlg-0 { + margin-left: 0; + *margin-left: -0.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; + margin-bottom: 0; +} + +.flex-footer > :last-child { + margin-bottom: 0; +} + +@media (max-width: 575px) { + .hidden-xxs { + display: none; + } +} +@media (min-width: 576px) { + .hidden-xs-up { + display: none; + } +} +@media (max-width: 767px) { + .hidden-xs-down { + display: none; + } +} +@media (min-width: 576px) and (max-width: 767px) { + .hidden-xs { + display: none; + } +} +@media (min-width: 768px) { + .hidden-sm-up { + display: none; + } +} +@media (max-width: 991px) { + .hidden-sm-down { + display: none; + } +} +@media (min-width: 768px) and (max-width: 991px) { + .hidden-sm { + display: none; + } +} +@media (min-width: 992px) { + .hidden-md-up { + display: none; + } +} +@media (max-width: 1199px) { + .hidden-md-down { + display: none; + } +} +@media (min-width: 992px) and (max-width: 1199px) { + .hidden-md { + display: none; + } +} +@media (min-width: 1200px) { + .hidden-lg-up { + display: none; + } +} +@media (max-width: 1599px) { + .hidden-lg-down { + display: none; + } +} +@media (min-width: 1200px) and (max-width: 1599px) { + .hidden-lg { + display: none; + } +} +@media (min-width: 1600px) { + .hidden-xlg { + display: none; + } +} +/** + * + * + * + * + */ +.border { + border: 1px solid var(--border); +} + +.border-round { + border-radius: 2px; +} + +.border-0 { + border: 0; +} + +.radius-0 { + border-radius: 0; +} + +.round { + border-radius: 50%; +} + +/** + * z-index + * + * + */ +.z-index-1 { + z-index: 1; +} + +.z-index-2 { + z-index: 2; +} + +.z-index-3 { + z-index: 3; +} + +.z-index-4 { + z-index: 4; +} + +.z-index-5 { + z-index: 5; +} + +.z-index-6 { + z-index: 6; +} + +.z-index-7 { + z-index: 7; +} + +.z-index-8 { + z-index: 8; +} + +.z-index-9 { + z-index: 9; +} + +.z-index-10 { + z-index: 10; +} + +.z-index-11 { + z-index: 11; +} + +.z-index-12 { + z-index: 12; +} + +.z-index-13 { + z-index: 13; +} + +.z-index-14 { + z-index: 14; +} + +.z-index-15 { + z-index: 15; +} + +.z-index-16 { + z-index: 16; +} + +.z-index-17 { + z-index: 17; +} + +.z-index-18 { + z-index: 18; +} + +.z-index-19 { + z-index: 19; +} + +.z-index-20 { + z-index: 20; +} + +/** + * floating + * + * + */ +.float-left { + float: left; +} + +.float-right { + float: right; +} + +.float-none { + float: none; +} + +.centered { + margin-left: auto; + margin-right: auto; +} + +.clearfix::before, .clearfix::after { + display: table; + content: " "; +} +.clearfix::after { + clear: both; +} + +/** + * position + * + * + */ +.absolute { + position: absolute !important; +} + +.fixed { + position: fixed !important; +} + +.relative { + position: relative !important; +} + +/** + * + * + */ +.vertical-align-bottom { + vertical-align: bottom; +} + +.vertical-align-top { + vertical-align: top; +} + +.vertical-align-baseline { + vertical-align: baseline; +} + +/** + * + * + */ +.overflow-x-hidden { + overflow-x: hidden; +} + +.overflow-y-hidden { + overflow-y: hidden; +} + +.object-fit-cover { + -o-object-fit: cover; + object-fit: cover; +} + +/** + * Sizing + * + * Width and Height Classes, + * Sizes with percentage will calculate with the Reflex Grid + * + * + */ +/** + * mixin: sizing + * + */ +/** + * mixin: sizing for each breakpoint + * + * + */ +.w-0 { + width: 0; +} + +.h-0 { + height: 0; +} + +.w-1 { + width: 1px; +} + +.h-1 { + height: 1px; +} + +.w-100 { + width: 100%; +} + +.h-100 { + height: 100%; +} + +.w-col-1 { + width: 8.3333333333%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-1 { + width: 8.3333333333%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-1 { + width: 8.3333333333%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-1 { + width: 8.3333333333%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-1 { + width: 8.3333333333%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-1 { + width: 8.3333333333%; + } +} +.h-col-1 { + height: 8.3333333333%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-1 { + height: 8.3333333333%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-1 { + height: 8.3333333333%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-1 { + height: 8.3333333333%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-1 { + height: 8.3333333333%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-1 { + height: 8.3333333333%; + } +} +.w-col-2 { + width: 16.6666666667%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-2 { + width: 16.6666666667%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-2 { + width: 16.6666666667%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-2 { + width: 16.6666666667%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-2 { + width: 16.6666666667%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-2 { + width: 16.6666666667%; + } +} +.h-col-2 { + height: 16.6666666667%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-2 { + height: 16.6666666667%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-2 { + height: 16.6666666667%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-2 { + height: 16.6666666667%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-2 { + height: 16.6666666667%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-2 { + height: 16.6666666667%; + } +} +.w-col-3 { + width: 25%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-3 { + width: 25%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-3 { + width: 25%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-3 { + width: 25%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-3 { + width: 25%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-3 { + width: 25%; + } +} +.h-col-3 { + height: 25%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-3 { + height: 25%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-3 { + height: 25%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-3 { + height: 25%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-3 { + height: 25%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-3 { + height: 25%; + } +} +.w-col-4 { + width: 33.3333333333%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-4 { + width: 33.3333333333%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-4 { + width: 33.3333333333%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-4 { + width: 33.3333333333%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-4 { + width: 33.3333333333%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-4 { + width: 33.3333333333%; + } +} +.h-col-4 { + height: 33.3333333333%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-4 { + height: 33.3333333333%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-4 { + height: 33.3333333333%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-4 { + height: 33.3333333333%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-4 { + height: 33.3333333333%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-4 { + height: 33.3333333333%; + } +} +.w-col-5 { + width: 41.6666666667%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-5 { + width: 41.6666666667%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-5 { + width: 41.6666666667%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-5 { + width: 41.6666666667%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-5 { + width: 41.6666666667%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-5 { + width: 41.6666666667%; + } +} +.h-col-5 { + height: 41.6666666667%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-5 { + height: 41.6666666667%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-5 { + height: 41.6666666667%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-5 { + height: 41.6666666667%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-5 { + height: 41.6666666667%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-5 { + height: 41.6666666667%; + } +} +.w-col-6 { + width: 50%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-6 { + width: 50%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-6 { + width: 50%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-6 { + width: 50%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-6 { + width: 50%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-6 { + width: 50%; + } +} +.h-col-6 { + height: 50%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-6 { + height: 50%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-6 { + height: 50%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-6 { + height: 50%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-6 { + height: 50%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-6 { + height: 50%; + } +} +.w-col-7 { + width: 58.3333333333%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-7 { + width: 58.3333333333%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-7 { + width: 58.3333333333%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-7 { + width: 58.3333333333%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-7 { + width: 58.3333333333%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-7 { + width: 58.3333333333%; + } +} +.h-col-7 { + height: 58.3333333333%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-7 { + height: 58.3333333333%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-7 { + height: 58.3333333333%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-7 { + height: 58.3333333333%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-7 { + height: 58.3333333333%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-7 { + height: 58.3333333333%; + } +} +.w-col-8 { + width: 66.6666666667%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-8 { + width: 66.6666666667%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-8 { + width: 66.6666666667%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-8 { + width: 66.6666666667%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-8 { + width: 66.6666666667%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-8 { + width: 66.6666666667%; + } +} +.h-col-8 { + height: 66.6666666667%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-8 { + height: 66.6666666667%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-8 { + height: 66.6666666667%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-8 { + height: 66.6666666667%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-8 { + height: 66.6666666667%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-8 { + height: 66.6666666667%; + } +} +.w-col-9 { + width: 75%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-9 { + width: 75%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-9 { + width: 75%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-9 { + width: 75%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-9 { + width: 75%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-9 { + width: 75%; + } +} +.h-col-9 { + height: 75%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-9 { + height: 75%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-9 { + height: 75%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-9 { + height: 75%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-9 { + height: 75%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-9 { + height: 75%; + } +} +.w-col-10 { + width: 83.3333333333%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-10 { + width: 83.3333333333%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-10 { + width: 83.3333333333%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-10 { + width: 83.3333333333%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-10 { + width: 83.3333333333%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-10 { + width: 83.3333333333%; + } +} +.h-col-10 { + height: 83.3333333333%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-10 { + height: 83.3333333333%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-10 { + height: 83.3333333333%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-10 { + height: 83.3333333333%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-10 { + height: 83.3333333333%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-10 { + height: 83.3333333333%; + } +} +.w-col-11 { + width: 91.6666666667%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-11 { + width: 91.6666666667%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-11 { + width: 91.6666666667%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-11 { + width: 91.6666666667%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-11 { + width: 91.6666666667%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-11 { + width: 91.6666666667%; + } +} +.h-col-11 { + height: 91.6666666667%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-11 { + height: 91.6666666667%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-11 { + height: 91.6666666667%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-11 { + height: 91.6666666667%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-11 { + height: 91.6666666667%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-11 { + height: 91.6666666667%; + } +} +.w-col-12 { + width: 100%; +} + +@media only screen and (min-width: 576px) { + .w-col-xs-12 { + width: 100%; + } +} +@media only screen and (min-width: 768px) { + .w-col-sm-12 { + width: 100%; + } +} +@media only screen and (min-width: 992px) { + .w-col-md-12 { + width: 100%; + } +} +@media only screen and (min-width: 1200px) { + .w-col-lg-12 { + width: 100%; + } +} +@media only screen and (min-width: 1600px) { + .w-col-xlg-12 { + width: 100%; + } +} +.h-col-12 { + height: 100%; +} + +@media only screen and (min-width: 576px) { + .h-col-xs-12 { + height: 100%; + } +} +@media only screen and (min-width: 768px) { + .h-col-sm-12 { + height: 100%; + } +} +@media only screen and (min-width: 992px) { + .h-col-md-12 { + height: 100%; + } +} +@media only screen and (min-width: 1200px) { + .h-col-lg-12 { + height: 100%; + } +} +@media only screen and (min-width: 1600px) { + .h-col-xlg-12 { + height: 100%; + } +} +.w-1 { + width: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-1 { + width: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-1 { + width: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-1 { + width: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-1 { + width: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-1 { + width: 0.5rem; + } +} +.w-2 { + width: 1rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-2 { + width: 1rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-2 { + width: 1rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-2 { + width: 1rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-2 { + width: 1rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-2 { + width: 1rem; + } +} +.w-3 { + width: 1.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-3 { + width: 1.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-3 { + width: 1.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-3 { + width: 1.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-3 { + width: 1.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-3 { + width: 1.5rem; + } +} +.w-4 { + width: 2rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-4 { + width: 2rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-4 { + width: 2rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-4 { + width: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-4 { + width: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-4 { + width: 2rem; + } +} +.w-5 { + width: 2.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-5 { + width: 2.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-5 { + width: 2.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-5 { + width: 2.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-5 { + width: 2.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-5 { + width: 2.5rem; + } +} +.w-6 { + width: 3rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-6 { + width: 3rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-6 { + width: 3rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-6 { + width: 3rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-6 { + width: 3rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-6 { + width: 3rem; + } +} +.w-7 { + width: 3.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-7 { + width: 3.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-7 { + width: 3.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-7 { + width: 3.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-7 { + width: 3.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-7 { + width: 3.5rem; + } +} +.w-8 { + width: 4rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-8 { + width: 4rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-8 { + width: 4rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-8 { + width: 4rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-8 { + width: 4rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-8 { + width: 4rem; + } +} +.w-9 { + width: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-9 { + width: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-9 { + width: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-9 { + width: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-9 { + width: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-9 { + width: 4.5rem; + } +} +.w-10 { + width: 5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-10 { + width: 5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-10 { + width: 5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-10 { + width: 5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-10 { + width: 5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-10 { + width: 5rem; + } +} +.w-11 { + width: 5.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-11 { + width: 5.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-11 { + width: 5.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-11 { + width: 5.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-11 { + width: 5.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-11 { + width: 5.5rem; + } +} +.w-12 { + width: 6rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-12 { + width: 6rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-12 { + width: 6rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-12 { + width: 6rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-12 { + width: 6rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-12 { + width: 6rem; + } +} +.w-13 { + width: 6.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-13 { + width: 6.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-13 { + width: 6.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-13 { + width: 6.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-13 { + width: 6.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-13 { + width: 6.5rem; + } +} +.w-14 { + width: 7rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-14 { + width: 7rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-14 { + width: 7rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-14 { + width: 7rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-14 { + width: 7rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-14 { + width: 7rem; + } +} +.w-15 { + width: 7.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-15 { + width: 7.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-15 { + width: 7.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-15 { + width: 7.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-15 { + width: 7.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-15 { + width: 7.5rem; + } +} +.w-16 { + width: 8rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-16 { + width: 8rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-16 { + width: 8rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-16 { + width: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-16 { + width: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-16 { + width: 8rem; + } +} +.w-17 { + width: 8.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-17 { + width: 8.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-17 { + width: 8.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-17 { + width: 8.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-17 { + width: 8.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-17 { + width: 8.5rem; + } +} +.w-18 { + width: 9rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-18 { + width: 9rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-18 { + width: 9rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-18 { + width: 9rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-18 { + width: 9rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-18 { + width: 9rem; + } +} +.w-19 { + width: 9.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-19 { + width: 9.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-19 { + width: 9.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-19 { + width: 9.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-19 { + width: 9.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-19 { + width: 9.5rem; + } +} +.w-20 { + width: 10rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-20 { + width: 10rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-20 { + width: 10rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-20 { + width: 10rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-20 { + width: 10rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-20 { + width: 10rem; + } +} +.w-21 { + width: 10.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-21 { + width: 10.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-21 { + width: 10.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-21 { + width: 10.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-21 { + width: 10.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-21 { + width: 10.5rem; + } +} +.w-22 { + width: 11rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-22 { + width: 11rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-22 { + width: 11rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-22 { + width: 11rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-22 { + width: 11rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-22 { + width: 11rem; + } +} +.w-23 { + width: 11.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-23 { + width: 11.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-23 { + width: 11.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-23 { + width: 11.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-23 { + width: 11.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-23 { + width: 11.5rem; + } +} +.w-24 { + width: 12rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-24 { + width: 12rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-24 { + width: 12rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-24 { + width: 12rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-24 { + width: 12rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-24 { + width: 12rem; + } +} +.w-25 { + width: 12.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-25 { + width: 12.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-25 { + width: 12.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-25 { + width: 12.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-25 { + width: 12.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-25 { + width: 12.5rem; + } +} +.w-26 { + width: 13rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-26 { + width: 13rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-26 { + width: 13rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-26 { + width: 13rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-26 { + width: 13rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-26 { + width: 13rem; + } +} +.w-27 { + width: 13.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-27 { + width: 13.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-27 { + width: 13.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-27 { + width: 13.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-27 { + width: 13.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-27 { + width: 13.5rem; + } +} +.w-28 { + width: 14rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-28 { + width: 14rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-28 { + width: 14rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-28 { + width: 14rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-28 { + width: 14rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-28 { + width: 14rem; + } +} +.w-29 { + width: 14.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-29 { + width: 14.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-29 { + width: 14.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-29 { + width: 14.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-29 { + width: 14.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-29 { + width: 14.5rem; + } +} +.w-30 { + width: 15rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-30 { + width: 15rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-30 { + width: 15rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-30 { + width: 15rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-30 { + width: 15rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-30 { + width: 15rem; + } +} +.w-31 { + width: 15.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-31 { + width: 15.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-31 { + width: 15.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-31 { + width: 15.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-31 { + width: 15.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-31 { + width: 15.5rem; + } +} +.w-32 { + width: 16rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-32 { + width: 16rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-32 { + width: 16rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-32 { + width: 16rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-32 { + width: 16rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-32 { + width: 16rem; + } +} +.w-33 { + width: 16.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-33 { + width: 16.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-33 { + width: 16.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-33 { + width: 16.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-33 { + width: 16.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-33 { + width: 16.5rem; + } +} +.w-34 { + width: 17rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-34 { + width: 17rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-34 { + width: 17rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-34 { + width: 17rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-34 { + width: 17rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-34 { + width: 17rem; + } +} +.w-35 { + width: 17.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-35 { + width: 17.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-35 { + width: 17.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-35 { + width: 17.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-35 { + width: 17.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-35 { + width: 17.5rem; + } +} +.w-36 { + width: 18rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-36 { + width: 18rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-36 { + width: 18rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-36 { + width: 18rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-36 { + width: 18rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-36 { + width: 18rem; + } +} +.w-37 { + width: 18.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-37 { + width: 18.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-37 { + width: 18.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-37 { + width: 18.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-37 { + width: 18.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-37 { + width: 18.5rem; + } +} +.w-38 { + width: 19rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-38 { + width: 19rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-38 { + width: 19rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-38 { + width: 19rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-38 { + width: 19rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-38 { + width: 19rem; + } +} +.w-39 { + width: 19.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-39 { + width: 19.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-39 { + width: 19.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-39 { + width: 19.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-39 { + width: 19.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-39 { + width: 19.5rem; + } +} +.w-40 { + width: 20rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-40 { + width: 20rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-40 { + width: 20rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-40 { + width: 20rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-40 { + width: 20rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-40 { + width: 20rem; + } +} +.w-41 { + width: 20.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-41 { + width: 20.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-41 { + width: 20.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-41 { + width: 20.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-41 { + width: 20.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-41 { + width: 20.5rem; + } +} +.w-42 { + width: 21rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-42 { + width: 21rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-42 { + width: 21rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-42 { + width: 21rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-42 { + width: 21rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-42 { + width: 21rem; + } +} +.w-43 { + width: 21.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-43 { + width: 21.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-43 { + width: 21.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-43 { + width: 21.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-43 { + width: 21.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-43 { + width: 21.5rem; + } +} +.w-44 { + width: 22rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-44 { + width: 22rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-44 { + width: 22rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-44 { + width: 22rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-44 { + width: 22rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-44 { + width: 22rem; + } +} +.w-45 { + width: 22.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-45 { + width: 22.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-45 { + width: 22.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-45 { + width: 22.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-45 { + width: 22.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-45 { + width: 22.5rem; + } +} +.w-46 { + width: 23rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-46 { + width: 23rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-46 { + width: 23rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-46 { + width: 23rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-46 { + width: 23rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-46 { + width: 23rem; + } +} +.w-47 { + width: 23.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-47 { + width: 23.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-47 { + width: 23.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-47 { + width: 23.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-47 { + width: 23.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-47 { + width: 23.5rem; + } +} +.w-48 { + width: 24rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-48 { + width: 24rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-48 { + width: 24rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-48 { + width: 24rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-48 { + width: 24rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-48 { + width: 24rem; + } +} +.w-49 { + width: 24.5rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-49 { + width: 24.5rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-49 { + width: 24.5rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-49 { + width: 24.5rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-49 { + width: 24.5rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-49 { + width: 24.5rem; + } +} +.w-50 { + width: 25rem; +} + +@media only screen and (min-width: 576px) { + .w-xs-50 { + width: 25rem; + } +} +@media only screen and (min-width: 768px) { + .w-sm-50 { + width: 25rem; + } +} +@media only screen and (min-width: 992px) { + .w-md-50 { + width: 25rem; + } +} +@media only screen and (min-width: 1200px) { + .w-lg-50 { + width: 25rem; + } +} +@media only screen and (min-width: 1600px) { + .w-xlg-50 { + width: 25rem; + } +} +.h-1 { + height: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-1 { + height: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-1 { + height: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-1 { + height: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-1 { + height: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-1 { + height: 0.5rem; + } +} +.h-2 { + height: 1rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-2 { + height: 1rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-2 { + height: 1rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-2 { + height: 1rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-2 { + height: 1rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-2 { + height: 1rem; + } +} +.h-3 { + height: 1.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-3 { + height: 1.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-3 { + height: 1.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-3 { + height: 1.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-3 { + height: 1.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-3 { + height: 1.5rem; + } +} +.h-4 { + height: 2rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-4 { + height: 2rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-4 { + height: 2rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-4 { + height: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-4 { + height: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-4 { + height: 2rem; + } +} +.h-5 { + height: 2.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-5 { + height: 2.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-5 { + height: 2.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-5 { + height: 2.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-5 { + height: 2.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-5 { + height: 2.5rem; + } +} +.h-6 { + height: 3rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-6 { + height: 3rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-6 { + height: 3rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-6 { + height: 3rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-6 { + height: 3rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-6 { + height: 3rem; + } +} +.h-7 { + height: 3.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-7 { + height: 3.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-7 { + height: 3.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-7 { + height: 3.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-7 { + height: 3.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-7 { + height: 3.5rem; + } +} +.h-8 { + height: 4rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-8 { + height: 4rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-8 { + height: 4rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-8 { + height: 4rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-8 { + height: 4rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-8 { + height: 4rem; + } +} +.h-9 { + height: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-9 { + height: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-9 { + height: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-9 { + height: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-9 { + height: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-9 { + height: 4.5rem; + } +} +.h-10 { + height: 5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-10 { + height: 5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-10 { + height: 5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-10 { + height: 5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-10 { + height: 5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-10 { + height: 5rem; + } +} +.h-11 { + height: 5.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-11 { + height: 5.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-11 { + height: 5.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-11 { + height: 5.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-11 { + height: 5.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-11 { + height: 5.5rem; + } +} +.h-12 { + height: 6rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-12 { + height: 6rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-12 { + height: 6rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-12 { + height: 6rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-12 { + height: 6rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-12 { + height: 6rem; + } +} +.h-13 { + height: 6.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-13 { + height: 6.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-13 { + height: 6.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-13 { + height: 6.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-13 { + height: 6.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-13 { + height: 6.5rem; + } +} +.h-14 { + height: 7rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-14 { + height: 7rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-14 { + height: 7rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-14 { + height: 7rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-14 { + height: 7rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-14 { + height: 7rem; + } +} +.h-15 { + height: 7.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-15 { + height: 7.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-15 { + height: 7.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-15 { + height: 7.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-15 { + height: 7.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-15 { + height: 7.5rem; + } +} +.h-16 { + height: 8rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-16 { + height: 8rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-16 { + height: 8rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-16 { + height: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-16 { + height: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-16 { + height: 8rem; + } +} +.h-17 { + height: 8.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-17 { + height: 8.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-17 { + height: 8.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-17 { + height: 8.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-17 { + height: 8.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-17 { + height: 8.5rem; + } +} +.h-18 { + height: 9rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-18 { + height: 9rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-18 { + height: 9rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-18 { + height: 9rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-18 { + height: 9rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-18 { + height: 9rem; + } +} +.h-19 { + height: 9.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-19 { + height: 9.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-19 { + height: 9.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-19 { + height: 9.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-19 { + height: 9.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-19 { + height: 9.5rem; + } +} +.h-20 { + height: 10rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-20 { + height: 10rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-20 { + height: 10rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-20 { + height: 10rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-20 { + height: 10rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-20 { + height: 10rem; + } +} +.h-21 { + height: 10.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-21 { + height: 10.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-21 { + height: 10.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-21 { + height: 10.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-21 { + height: 10.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-21 { + height: 10.5rem; + } +} +.h-22 { + height: 11rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-22 { + height: 11rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-22 { + height: 11rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-22 { + height: 11rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-22 { + height: 11rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-22 { + height: 11rem; + } +} +.h-23 { + height: 11.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-23 { + height: 11.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-23 { + height: 11.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-23 { + height: 11.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-23 { + height: 11.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-23 { + height: 11.5rem; + } +} +.h-24 { + height: 12rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-24 { + height: 12rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-24 { + height: 12rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-24 { + height: 12rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-24 { + height: 12rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-24 { + height: 12rem; + } +} +.h-25 { + height: 12.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-25 { + height: 12.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-25 { + height: 12.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-25 { + height: 12.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-25 { + height: 12.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-25 { + height: 12.5rem; + } +} +.h-26 { + height: 13rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-26 { + height: 13rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-26 { + height: 13rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-26 { + height: 13rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-26 { + height: 13rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-26 { + height: 13rem; + } +} +.h-27 { + height: 13.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-27 { + height: 13.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-27 { + height: 13.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-27 { + height: 13.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-27 { + height: 13.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-27 { + height: 13.5rem; + } +} +.h-28 { + height: 14rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-28 { + height: 14rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-28 { + height: 14rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-28 { + height: 14rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-28 { + height: 14rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-28 { + height: 14rem; + } +} +.h-29 { + height: 14.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-29 { + height: 14.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-29 { + height: 14.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-29 { + height: 14.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-29 { + height: 14.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-29 { + height: 14.5rem; + } +} +.h-30 { + height: 15rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-30 { + height: 15rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-30 { + height: 15rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-30 { + height: 15rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-30 { + height: 15rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-30 { + height: 15rem; + } +} +.h-31 { + height: 15.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-31 { + height: 15.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-31 { + height: 15.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-31 { + height: 15.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-31 { + height: 15.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-31 { + height: 15.5rem; + } +} +.h-32 { + height: 16rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-32 { + height: 16rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-32 { + height: 16rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-32 { + height: 16rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-32 { + height: 16rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-32 { + height: 16rem; + } +} +.h-33 { + height: 16.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-33 { + height: 16.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-33 { + height: 16.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-33 { + height: 16.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-33 { + height: 16.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-33 { + height: 16.5rem; + } +} +.h-34 { + height: 17rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-34 { + height: 17rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-34 { + height: 17rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-34 { + height: 17rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-34 { + height: 17rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-34 { + height: 17rem; + } +} +.h-35 { + height: 17.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-35 { + height: 17.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-35 { + height: 17.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-35 { + height: 17.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-35 { + height: 17.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-35 { + height: 17.5rem; + } +} +.h-36 { + height: 18rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-36 { + height: 18rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-36 { + height: 18rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-36 { + height: 18rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-36 { + height: 18rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-36 { + height: 18rem; + } +} +.h-37 { + height: 18.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-37 { + height: 18.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-37 { + height: 18.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-37 { + height: 18.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-37 { + height: 18.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-37 { + height: 18.5rem; + } +} +.h-38 { + height: 19rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-38 { + height: 19rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-38 { + height: 19rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-38 { + height: 19rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-38 { + height: 19rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-38 { + height: 19rem; + } +} +.h-39 { + height: 19.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-39 { + height: 19.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-39 { + height: 19.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-39 { + height: 19.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-39 { + height: 19.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-39 { + height: 19.5rem; + } +} +.h-40 { + height: 20rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-40 { + height: 20rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-40 { + height: 20rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-40 { + height: 20rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-40 { + height: 20rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-40 { + height: 20rem; + } +} +.h-41 { + height: 20.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-41 { + height: 20.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-41 { + height: 20.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-41 { + height: 20.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-41 { + height: 20.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-41 { + height: 20.5rem; + } +} +.h-42 { + height: 21rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-42 { + height: 21rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-42 { + height: 21rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-42 { + height: 21rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-42 { + height: 21rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-42 { + height: 21rem; + } +} +.h-43 { + height: 21.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-43 { + height: 21.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-43 { + height: 21.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-43 { + height: 21.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-43 { + height: 21.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-43 { + height: 21.5rem; + } +} +.h-44 { + height: 22rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-44 { + height: 22rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-44 { + height: 22rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-44 { + height: 22rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-44 { + height: 22rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-44 { + height: 22rem; + } +} +.h-45 { + height: 22.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-45 { + height: 22.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-45 { + height: 22.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-45 { + height: 22.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-45 { + height: 22.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-45 { + height: 22.5rem; + } +} +.h-46 { + height: 23rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-46 { + height: 23rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-46 { + height: 23rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-46 { + height: 23rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-46 { + height: 23rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-46 { + height: 23rem; + } +} +.h-47 { + height: 23.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-47 { + height: 23.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-47 { + height: 23.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-47 { + height: 23.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-47 { + height: 23.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-47 { + height: 23.5rem; + } +} +.h-48 { + height: 24rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-48 { + height: 24rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-48 { + height: 24rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-48 { + height: 24rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-48 { + height: 24rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-48 { + height: 24rem; + } +} +.h-49 { + height: 24.5rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-49 { + height: 24.5rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-49 { + height: 24.5rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-49 { + height: 24.5rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-49 { + height: 24.5rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-49 { + height: 24.5rem; + } +} +.h-50 { + height: 25rem; +} + +@media only screen and (min-width: 576px) { + .h-xs-50 { + height: 25rem; + } +} +@media only screen and (min-width: 768px) { + .h-sm-50 { + height: 25rem; + } +} +@media only screen and (min-width: 992px) { + .h-md-50 { + height: 25rem; + } +} +@media only screen and (min-width: 1200px) { + .h-lg-50 { + height: 25rem; + } +} +@media only screen and (min-width: 1600px) { + .h-xlg-50 { + height: 25rem; + } +} +/** + * Spacing + * + * creates margin and padding for each direction and for each breakpont + * + * + */ +/** + * mixin: spacing for single padding or margin + * + * + */ +/** + * mixin: spacing for each breakpoint + * + * + */ +/** + * + * + * + */ +.marginless { + margin: 0; +} + +.paddingless { + padding: 0; +} + +.m-top-last-child-0 > *:last-child { + margin-top: 0; +} + +.m-bottom-last-child-0 > *:last-child { + margin-bottom: 0; +} + +.m-top-0 { + margin-top: 0; +} + +.m-top-1 { + margin-top: 1px; +} + +.m-top-2 { + margin-top: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-2 { + margin-top: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-2 { + margin-top: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-2 { + margin-top: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-2 { + margin-top: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-2 { + margin-top: 0.125rem; + } +} +.m-top-3 { + margin-top: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-3 { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-3 { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-3 { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-3 { + margin-top: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-3 { + margin-top: 0.5rem; + } +} +.m-top-4 { + margin-top: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-4 { + margin-top: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-4 { + margin-top: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-4 { + margin-top: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-4 { + margin-top: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-4 { + margin-top: 1.125rem; + } +} +.m-top-5 { + margin-top: 2rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-5 { + margin-top: 2rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-5 { + margin-top: 2rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-5 { + margin-top: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-5 { + margin-top: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-5 { + margin-top: 2rem; + } +} +.m-top-6 { + margin-top: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-6 { + margin-top: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-6 { + margin-top: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-6 { + margin-top: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-6 { + margin-top: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-6 { + margin-top: 3.125rem; + } +} +.m-top-7 { + margin-top: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-7 { + margin-top: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-7 { + margin-top: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-7 { + margin-top: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-7 { + margin-top: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-7 { + margin-top: 4.5rem; + } +} +.m-top-8 { + margin-top: 6.125rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-8 { + margin-top: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-8 { + margin-top: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-8 { + margin-top: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-8 { + margin-top: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-8 { + margin-top: 6.125rem; + } +} +.m-top-9 { + margin-top: 8rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-9 { + margin-top: 8rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-9 { + margin-top: 8rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-9 { + margin-top: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-9 { + margin-top: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-9 { + margin-top: 8rem; + } +} +.m-top-10 { + margin-top: 10.125rem; +} + +@media only screen and (min-width: 576px) { + .m-top-xs-10 { + margin-top: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-top-sm-10 { + margin-top: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-top-md-10 { + margin-top: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-top-lg-10 { + margin-top: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-top-xlg-10 { + margin-top: 10.125rem; + } +} +.m-bottom-0 { + margin-bottom: 0; +} + +.m-bottom-1 { + margin-bottom: 1px; +} + +.m-bottom-2 { + margin-bottom: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .m-bottom-xs-2 { + margin-bottom: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-2 { + margin-bottom: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-2 { + margin-bottom: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-2 { + margin-bottom: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-2 { + margin-bottom: 0.125rem; + } +} +.m-bottom-3 { + margin-bottom: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .m-bottom-xs-3 { + margin-bottom: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-3 { + margin-bottom: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-3 { + margin-bottom: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-3 { + margin-bottom: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-3 { + margin-bottom: 0.5rem; + } +} +.m-bottom-4 { + margin-bottom: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .m-bottom-xs-4 { + margin-bottom: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-4 { + margin-bottom: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-4 { + margin-bottom: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-4 { + margin-bottom: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-4 { + margin-bottom: 1.125rem; + } +} +.m-bottom-5 { + margin-bottom: 2rem; +} + +@media only screen and (min-width: 576px) { + .m-bottom-xs-5 { + margin-bottom: 2rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-5 { + margin-bottom: 2rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-5 { + margin-bottom: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-5 { + margin-bottom: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-5 { + margin-bottom: 2rem; + } +} +.m-bottom-6 { + margin-bottom: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .m-bottom-xs-6 { + margin-bottom: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-6 { + margin-bottom: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-6 { + margin-bottom: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-6 { + margin-bottom: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-6 { + margin-bottom: 3.125rem; + } +} +.m-bottom-7 { + margin-bottom: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .m-bottom-xs-7 { + margin-bottom: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-7 { + margin-bottom: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-7 { + margin-bottom: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-7 { + margin-bottom: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-7 { + margin-bottom: 4.5rem; + } +} +.m-bottom-8 { + margin-bottom: 6.125rem; +} + +@media only screen and (min-width: 576px) { + .m-bottom-xs-8 { + margin-bottom: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-8 { + margin-bottom: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-8 { + margin-bottom: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-8 { + margin-bottom: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-8 { + margin-bottom: 6.125rem; + } +} +.m-bottom-9 { + margin-bottom: 8rem; +} + +@media only screen and (min-width: 576px) { + .m-bottom-xs-9 { + margin-bottom: 8rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-9 { + margin-bottom: 8rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-9 { + margin-bottom: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-9 { + margin-bottom: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-9 { + margin-bottom: 8rem; + } +} +.m-bottom-10 { + margin-bottom: 10.125rem; +} + +@media only screen and (min-width: 576px) { + .m-bottom-xs-10 { + margin-bottom: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-bottom-sm-10 { + margin-bottom: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-bottom-md-10 { + margin-bottom: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-bottom-lg-10 { + margin-bottom: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-bottom-xlg-10 { + margin-bottom: 10.125rem; + } +} +.m-left-0 { + margin-left: 0; +} + +.m-left-1 { + margin-left: 1px; +} + +.m-left-2 { + margin-left: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-2 { + margin-left: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-2 { + margin-left: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-2 { + margin-left: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-2 { + margin-left: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-2 { + margin-left: 0.125rem; + } +} +.m-left-3 { + margin-left: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-3 { + margin-left: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-3 { + margin-left: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-3 { + margin-left: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-3 { + margin-left: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-3 { + margin-left: 0.5rem; + } +} +.m-left-4 { + margin-left: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-4 { + margin-left: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-4 { + margin-left: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-4 { + margin-left: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-4 { + margin-left: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-4 { + margin-left: 1.125rem; + } +} +.m-left-5 { + margin-left: 2rem; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-5 { + margin-left: 2rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-5 { + margin-left: 2rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-5 { + margin-left: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-5 { + margin-left: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-5 { + margin-left: 2rem; + } +} +.m-left-6 { + margin-left: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-6 { + margin-left: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-6 { + margin-left: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-6 { + margin-left: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-6 { + margin-left: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-6 { + margin-left: 3.125rem; + } +} +.m-left-7 { + margin-left: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-7 { + margin-left: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-7 { + margin-left: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-7 { + margin-left: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-7 { + margin-left: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-7 { + margin-left: 4.5rem; + } +} +.m-left-8 { + margin-left: 6.125rem; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-8 { + margin-left: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-8 { + margin-left: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-8 { + margin-left: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-8 { + margin-left: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-8 { + margin-left: 6.125rem; + } +} +.m-left-9 { + margin-left: 8rem; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-9 { + margin-left: 8rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-9 { + margin-left: 8rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-9 { + margin-left: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-9 { + margin-left: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-9 { + margin-left: 8rem; + } +} +.m-left-10 { + margin-left: 10.125rem; +} + +@media only screen and (min-width: 576px) { + .m-left-xs-10 { + margin-left: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-left-sm-10 { + margin-left: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-left-md-10 { + margin-left: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-left-lg-10 { + margin-left: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-left-xlg-10 { + margin-left: 10.125rem; + } +} +.m-right-0 { + margin-right: 0; +} + +.m-right-1 { + margin-right: 1px; +} + +.m-right-2 { + margin-right: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .m-right-xs-2 { + margin-right: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-2 { + margin-right: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-2 { + margin-right: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-2 { + margin-right: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-2 { + margin-right: 0.125rem; + } +} +.m-right-3 { + margin-right: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .m-right-xs-3 { + margin-right: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-3 { + margin-right: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-3 { + margin-right: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-3 { + margin-right: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-3 { + margin-right: 0.5rem; + } +} +.m-right-4 { + margin-right: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .m-right-xs-4 { + margin-right: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-4 { + margin-right: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-4 { + margin-right: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-4 { + margin-right: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-4 { + margin-right: 1.125rem; + } +} +.m-right-5 { + margin-right: 2rem; +} + +@media only screen and (min-width: 576px) { + .m-right-xs-5 { + margin-right: 2rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-5 { + margin-right: 2rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-5 { + margin-right: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-5 { + margin-right: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-5 { + margin-right: 2rem; + } +} +.m-right-6 { + margin-right: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .m-right-xs-6 { + margin-right: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-6 { + margin-right: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-6 { + margin-right: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-6 { + margin-right: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-6 { + margin-right: 3.125rem; + } +} +.m-right-7 { + margin-right: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .m-right-xs-7 { + margin-right: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-7 { + margin-right: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-7 { + margin-right: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-7 { + margin-right: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-7 { + margin-right: 4.5rem; + } +} +.m-right-8 { + margin-right: 6.125rem; +} + +@media only screen and (min-width: 576px) { + .m-right-xs-8 { + margin-right: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-8 { + margin-right: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-8 { + margin-right: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-8 { + margin-right: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-8 { + margin-right: 6.125rem; + } +} +.m-right-9 { + margin-right: 8rem; +} + +@media only screen and (min-width: 576px) { + .m-right-xs-9 { + margin-right: 8rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-9 { + margin-right: 8rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-9 { + margin-right: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-9 { + margin-right: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-9 { + margin-right: 8rem; + } +} +.m-right-10 { + margin-right: 10.125rem; +} + +@media only screen and (min-width: 576px) { + .m-right-xs-10 { + margin-right: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .m-right-sm-10 { + margin-right: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .m-right-md-10 { + margin-right: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .m-right-lg-10 { + margin-right: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .m-right-xlg-10 { + margin-right: 10.125rem; + } +} +.p-top-0 { + padding-top: 0; +} + +.p-top-1 { + padding-top: 1px; +} + +.p-top-0 { + padding-top: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-0 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-0 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-0 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-0 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-0 { + padding-top: 0.125rem; + } +} +.p-top-1 { + padding-top: 0rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-1 { + padding-top: 0rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-1 { + padding-top: 0rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-1 { + padding-top: 0rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-1 { + padding-top: 0rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-1 { + padding-top: 0rem; + } +} +.p-top-2 { + padding-top: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-2 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-2 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-2 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-2 { + padding-top: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-2 { + padding-top: 0.125rem; + } +} +.p-top-3 { + padding-top: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-3 { + padding-top: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-3 { + padding-top: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-3 { + padding-top: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-3 { + padding-top: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-3 { + padding-top: 0.5rem; + } +} +.p-top-4 { + padding-top: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-4 { + padding-top: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-4 { + padding-top: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-4 { + padding-top: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-4 { + padding-top: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-4 { + padding-top: 1.125rem; + } +} +.p-top-5 { + padding-top: 2rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-5 { + padding-top: 2rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-5 { + padding-top: 2rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-5 { + padding-top: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-5 { + padding-top: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-5 { + padding-top: 2rem; + } +} +.p-top-6 { + padding-top: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-6 { + padding-top: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-6 { + padding-top: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-6 { + padding-top: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-6 { + padding-top: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-6 { + padding-top: 3.125rem; + } +} +.p-top-7 { + padding-top: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-7 { + padding-top: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-7 { + padding-top: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-7 { + padding-top: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-7 { + padding-top: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-7 { + padding-top: 4.5rem; + } +} +.p-top-8 { + padding-top: 6.125rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-8 { + padding-top: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-8 { + padding-top: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-8 { + padding-top: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-8 { + padding-top: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-8 { + padding-top: 6.125rem; + } +} +.p-top-9 { + padding-top: 8rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-9 { + padding-top: 8rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-9 { + padding-top: 8rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-9 { + padding-top: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-9 { + padding-top: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-9 { + padding-top: 8rem; + } +} +.p-top-10 { + padding-top: 10.125rem; +} + +@media only screen and (min-width: 576px) { + .p-top-xs-10 { + padding-top: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-top-sm-10 { + padding-top: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-top-md-10 { + padding-top: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-top-lg-10 { + padding-top: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-top-xlg-10 { + padding-top: 10.125rem; + } +} +.p-bottom-0 { + padding-bottom: 0; +} + +.p-bottom-1 { + padding-bottom: 1px; +} + +.p-bottom-0 { + padding-bottom: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-0 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-0 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-0 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-0 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-0 { + padding-bottom: 0.125rem; + } +} +.p-bottom-1 { + padding-bottom: 0rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-1 { + padding-bottom: 0rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-1 { + padding-bottom: 0rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-1 { + padding-bottom: 0rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-1 { + padding-bottom: 0rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-1 { + padding-bottom: 0rem; + } +} +.p-bottom-2 { + padding-bottom: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-2 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-2 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-2 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-2 { + padding-bottom: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-2 { + padding-bottom: 0.125rem; + } +} +.p-bottom-3 { + padding-bottom: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-3 { + padding-bottom: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-3 { + padding-bottom: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-3 { + padding-bottom: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-3 { + padding-bottom: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-3 { + padding-bottom: 0.5rem; + } +} +.p-bottom-4 { + padding-bottom: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-4 { + padding-bottom: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-4 { + padding-bottom: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-4 { + padding-bottom: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-4 { + padding-bottom: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-4 { + padding-bottom: 1.125rem; + } +} +.p-bottom-5 { + padding-bottom: 2rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-5 { + padding-bottom: 2rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-5 { + padding-bottom: 2rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-5 { + padding-bottom: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-5 { + padding-bottom: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-5 { + padding-bottom: 2rem; + } +} +.p-bottom-6 { + padding-bottom: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-6 { + padding-bottom: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-6 { + padding-bottom: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-6 { + padding-bottom: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-6 { + padding-bottom: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-6 { + padding-bottom: 3.125rem; + } +} +.p-bottom-7 { + padding-bottom: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-7 { + padding-bottom: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-7 { + padding-bottom: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-7 { + padding-bottom: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-7 { + padding-bottom: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-7 { + padding-bottom: 4.5rem; + } +} +.p-bottom-8 { + padding-bottom: 6.125rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-8 { + padding-bottom: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-8 { + padding-bottom: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-8 { + padding-bottom: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-8 { + padding-bottom: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-8 { + padding-bottom: 6.125rem; + } +} +.p-bottom-9 { + padding-bottom: 8rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-9 { + padding-bottom: 8rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-9 { + padding-bottom: 8rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-9 { + padding-bottom: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-9 { + padding-bottom: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-9 { + padding-bottom: 8rem; + } +} +.p-bottom-10 { + padding-bottom: 10.125rem; +} + +@media only screen and (min-width: 576px) { + .p-bottom-xs-10 { + padding-bottom: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-bottom-sm-10 { + padding-bottom: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-bottom-md-10 { + padding-bottom: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-bottom-lg-10 { + padding-bottom: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-bottom-xlg-10 { + padding-bottom: 10.125rem; + } +} +.p-left-0 { + padding-left: 0; +} + +.p-left-1 { + padding-left: 1px; +} + +.p-left-0 { + padding-left: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-0 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-0 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-0 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-0 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-0 { + padding-left: 0.125rem; + } +} +.p-left-1 { + padding-left: 0rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-1 { + padding-left: 0rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-1 { + padding-left: 0rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-1 { + padding-left: 0rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-1 { + padding-left: 0rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-1 { + padding-left: 0rem; + } +} +.p-left-2 { + padding-left: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-2 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-2 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-2 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-2 { + padding-left: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-2 { + padding-left: 0.125rem; + } +} +.p-left-3 { + padding-left: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-3 { + padding-left: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-3 { + padding-left: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-3 { + padding-left: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-3 { + padding-left: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-3 { + padding-left: 0.5rem; + } +} +.p-left-4 { + padding-left: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-4 { + padding-left: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-4 { + padding-left: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-4 { + padding-left: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-4 { + padding-left: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-4 { + padding-left: 1.125rem; + } +} +.p-left-5 { + padding-left: 2rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-5 { + padding-left: 2rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-5 { + padding-left: 2rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-5 { + padding-left: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-5 { + padding-left: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-5 { + padding-left: 2rem; + } +} +.p-left-6 { + padding-left: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-6 { + padding-left: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-6 { + padding-left: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-6 { + padding-left: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-6 { + padding-left: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-6 { + padding-left: 3.125rem; + } +} +.p-left-7 { + padding-left: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-7 { + padding-left: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-7 { + padding-left: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-7 { + padding-left: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-7 { + padding-left: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-7 { + padding-left: 4.5rem; + } +} +.p-left-8 { + padding-left: 6.125rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-8 { + padding-left: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-8 { + padding-left: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-8 { + padding-left: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-8 { + padding-left: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-8 { + padding-left: 6.125rem; + } +} +.p-left-9 { + padding-left: 8rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-9 { + padding-left: 8rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-9 { + padding-left: 8rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-9 { + padding-left: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-9 { + padding-left: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-9 { + padding-left: 8rem; + } +} +.p-left-10 { + padding-left: 10.125rem; +} + +@media only screen and (min-width: 576px) { + .p-left-xs-10 { + padding-left: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-left-sm-10 { + padding-left: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-left-md-10 { + padding-left: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-left-lg-10 { + padding-left: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-left-xlg-10 { + padding-left: 10.125rem; + } +} +.p-right-0 { + padding-right: 0; +} + +.p-right-1 { + padding-right: 1px; +} + +.p-right-0 { + padding-right: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-0 { + padding-right: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-0 { + padding-right: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-0 { + padding-right: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-0 { + padding-right: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-0 { + padding-right: 0.125rem; + } +} +.p-right-1 { + padding-right: 0rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-1 { + padding-right: 0rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-1 { + padding-right: 0rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-1 { + padding-right: 0rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-1 { + padding-right: 0rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-1 { + padding-right: 0rem; + } +} +.p-right-2 { + padding-right: 0.125rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-2 { + padding-right: 0.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-2 { + padding-right: 0.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-2 { + padding-right: 0.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-2 { + padding-right: 0.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-2 { + padding-right: 0.125rem; + } +} +.p-right-3 { + padding-right: 0.5rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-3 { + padding-right: 0.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-3 { + padding-right: 0.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-3 { + padding-right: 0.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-3 { + padding-right: 0.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-3 { + padding-right: 0.5rem; + } +} +.p-right-4 { + padding-right: 1.125rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-4 { + padding-right: 1.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-4 { + padding-right: 1.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-4 { + padding-right: 1.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-4 { + padding-right: 1.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-4 { + padding-right: 1.125rem; + } +} +.p-right-5 { + padding-right: 2rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-5 { + padding-right: 2rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-5 { + padding-right: 2rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-5 { + padding-right: 2rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-5 { + padding-right: 2rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-5 { + padding-right: 2rem; + } +} +.p-right-6 { + padding-right: 3.125rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-6 { + padding-right: 3.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-6 { + padding-right: 3.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-6 { + padding-right: 3.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-6 { + padding-right: 3.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-6 { + padding-right: 3.125rem; + } +} +.p-right-7 { + padding-right: 4.5rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-7 { + padding-right: 4.5rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-7 { + padding-right: 4.5rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-7 { + padding-right: 4.5rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-7 { + padding-right: 4.5rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-7 { + padding-right: 4.5rem; + } +} +.p-right-8 { + padding-right: 6.125rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-8 { + padding-right: 6.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-8 { + padding-right: 6.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-8 { + padding-right: 6.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-8 { + padding-right: 6.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-8 { + padding-right: 6.125rem; + } +} +.p-right-9 { + padding-right: 8rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-9 { + padding-right: 8rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-9 { + padding-right: 8rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-9 { + padding-right: 8rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-9 { + padding-right: 8rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-9 { + padding-right: 8rem; + } +} +.p-right-10 { + padding-right: 10.125rem; +} + +@media only screen and (min-width: 576px) { + .p-right-xs-10 { + padding-right: 10.125rem; + } +} +@media only screen and (min-width: 768px) { + .p-right-sm-10 { + padding-right: 10.125rem; + } +} +@media only screen and (min-width: 992px) { + .p-right-md-10 { + padding-right: 10.125rem; + } +} +@media only screen and (min-width: 1200px) { + .p-right-lg-10 { + padding-right: 10.125rem; + } +} +@media only screen and (min-width: 1600px) { + .p-right-xlg-10 { + padding-right: 10.125rem; + } +} +/** + * + * + * + * + * + */ +.color-body { + color: var(--body); +} + +.color-text { + color: var(--text); +} + +.color-text-contrast { + color: var(--text-contrast); +} + +.color-primary { + color: var(--primary); +} + +.color-primary-contrast { + color: var(--primary-contrast); +} + +.color-active { + color: var(--active); +} + +.color-active-contrast { + color: var(--active-contrast); +} + +.color-link { + color: var(--link); +} + +.color-link-hover { + color: var(--link-hover); +} + +.color-danger { + color: var(--danger); +} + +.color-danger-contrast { + color: var(--danger-contrast); +} + +.color-info { + color: var(--info); +} + +.color-info-constrast { + color: var(--info-constrast); +} + +.color-success { + color: var(--success); +} + +.color-success-contrast { + color: var(--success-contrast); +} + +.color-warning { + color: var(--warning); +} + +.color-warning-contrast { + color: var(--warning-contrast); +} + +.color-background { + color: var(--background); +} + +.color-background-contrast { + color: var(--background-contrast); +} + +.color-border { + color: var(--border); +} + +.color-border-contrast { + color: var(--border-contrast); +} + +.fill-body { + fill: var(--body); +} + +.fill-text { + fill: var(--text); +} + +.fill-text-contrast { + fill: var(--text-contrast); +} + +.fill-primary { + fill: var(--primary); +} + +.fill-primary-contrast { + fill: var(--primary-contrast); +} + +.fill-active { + fill: var(--active); +} + +.fill-active-contrast { + fill: var(--active-contrast); +} + +.fill-link { + fill: var(--link); +} + +.fill-link-hover { + fill: var(--link-hover); +} + +.fill-danger { + fill: var(--danger); +} + +.fill-danger-contrast { + fill: var(--danger-contrast); +} + +.fill-info { + fill: var(--info); +} + +.fill-info-constrast { + fill: var(--info-constrast); +} + +.fill-success { + fill: var(--success); +} + +.fill-success-contrast { + fill: var(--success-contrast); +} + +.fill-warning { + fill: var(--warning); +} + +.fill-warning-contrast { + fill: var(--warning-contrast); +} + +.fill-background { + fill: var(--background); +} + +.fill-background-contrast { + fill: var(--background-contrast); +} + +.fill-border { + fill: var(--border); +} + +.fill-border-contrast { + fill: var(--border-contrast); +} + +.border-color-body { + border-color: var(--body); +} + +.border-color-text { + border-color: var(--text); +} + +.border-color-text-contrast { + border-color: var(--text-contrast); +} + +.border-color-primary { + border-color: var(--primary); +} + +.border-color-primary-contrast { + border-color: var(--primary-contrast); +} + +.border-color-active { + border-color: var(--active); +} + +.border-color-active-contrast { + border-color: var(--active-contrast); +} + +.border-color-link { + border-color: var(--link); +} + +.border-color-link-hover { + border-color: var(--link-hover); +} + +.border-color-danger { + border-color: var(--danger); +} + +.border-color-danger-contrast { + border-color: var(--danger-contrast); +} + +.border-color-info { + border-color: var(--info); +} + +.border-color-info-constrast { + border-color: var(--info-constrast); +} + +.border-color-success { + border-color: var(--success); +} + +.border-color-success-contrast { + border-color: var(--success-contrast); +} + +.border-color-warning { + border-color: var(--warning); +} + +.border-color-warning-contrast { + border-color: var(--warning-contrast); +} + +.border-color-background { + border-color: var(--background); +} + +.border-color-background-contrast { + border-color: var(--background-contrast); +} + +.border-color-border { + border-color: var(--border); +} + +.border-color-border-contrast { + border-color: var(--border-contrast); +} + +.background-color-body { + background-color: var(--body); +} + +.background-color-text { + background-color: var(--text); +} + +.background-color-text-contrast { + background-color: var(--text-contrast); +} + +.background-color-primary { + background-color: var(--primary); +} + +.background-color-primary-contrast { + background-color: var(--primary-contrast); +} + +.background-color-active { + background-color: var(--active); +} + +.background-color-active-contrast { + background-color: var(--active-contrast); +} + +.background-color-link { + background-color: var(--link); +} + +.background-color-link-hover { + background-color: var(--link-hover); +} + +.background-color-danger { + background-color: var(--danger); +} + +.background-color-danger-contrast { + background-color: var(--danger-contrast); +} + +.background-color-info { + background-color: var(--info); +} + +.background-color-info-constrast { + background-color: var(--info-constrast); +} + +.background-color-success { + background-color: var(--success); +} + +.background-color-success-contrast { + background-color: var(--success-contrast); +} + +.background-color-warning { + background-color: var(--warning); +} + +.background-color-warning-contrast { + background-color: var(--warning-contrast); +} + +.background-color-background { + background-color: var(--background); +} + +.background-color-background-contrast { + background-color: var(--background-contrast); +} + +.background-color-border { + background-color: var(--border); +} + +.background-color-border-contrast { + background-color: var(--border-contrast); +} + +/** + * typography + * + * + */ +.left { + text-align: left; +} + +.right { + text-align: right; +} + +.center { + text-align: center; +} + +.justify { + text-align: justify; +} + +.uppercase { + text-transform: uppercase; +} + +.lowercase { + text-transform: lowercase; +} + +.crossed { + text-decoration: line-through; +} + +.underline { + text-decoration: underline; +} + +.capitalize { + text-transform: capitalize; +} + +.italic { + font-style: italic; +} + +.light { + font-weight: lighter; +} + +.normal { + font-weight: normal; +} + +.medium { + font-weight: medium; +} + +.bold { + font-weight: bolder; +} + +.size-default { + font-size: 0.9rem; +} + +@media only screen and (min-width: 576px) { + .size-xs-default { + font-size: 0.9rem; + } +} +@media only screen and (min-width: 768px) { + .size-sm-default { + font-size: 0.9rem; + } +} +@media only screen and (min-width: 992px) { + .size-md-default { + font-size: 0.9rem; + } +} +@media only screen and (min-width: 1200px) { + .size-lg-default { + font-size: 0.9rem; + } +} +@media only screen and (min-width: 1600px) { + .size-xlg-default { + font-size: 0.9rem; + } +} +.size-small { + font-size: 0.675rem; +} + +@media only screen and (min-width: 576px) { + .size-xs-small { + font-size: 0.675rem; + } +} +@media only screen and (min-width: 768px) { + .size-sm-small { + font-size: 0.675rem; + } +} +@media only screen and (min-width: 992px) { + .size-md-small { + font-size: 0.675rem; + } +} +@media only screen and (min-width: 1200px) { + .size-lg-small { + font-size: 0.675rem; + } +} +@media only screen and (min-width: 1600px) { + .size-xlg-small { + font-size: 0.675rem; + } +} +.size-medium { + font-size: 1.35rem; +} + +@media only screen and (min-width: 576px) { + .size-xs-medium { + font-size: 1.35rem; + } +} +@media only screen and (min-width: 768px) { + .size-sm-medium { + font-size: 1.35rem; + } +} +@media only screen and (min-width: 992px) { + .size-md-medium { + font-size: 1.35rem; + } +} +@media only screen and (min-width: 1200px) { + .size-lg-medium { + font-size: 1.35rem; + } +} +@media only screen and (min-width: 1600px) { + .size-xlg-medium { + font-size: 1.35rem; + } +} +.size-large { + font-size: 1.8rem; +} + +@media only screen and (min-width: 576px) { + .size-xs-large { + font-size: 1.8rem; + } +} +@media only screen and (min-width: 768px) { + .size-sm-large { + font-size: 1.8rem; + } +} +@media only screen and (min-width: 992px) { + .size-md-large { + font-size: 1.8rem; + } +} +@media only screen and (min-width: 1200px) { + .size-lg-large { + font-size: 1.8rem; + } +} +@media only screen and (min-width: 1600px) { + .size-xlg-large { + font-size: 1.8rem; + } +} +.size-big { + font-size: 2.7rem; +} + +@media only screen and (min-width: 576px) { + .size-xs-big { + font-size: 2.7rem; + } +} +@media only screen and (min-width: 768px) { + .size-sm-big { + font-size: 2.7rem; + } +} +@media only screen and (min-width: 992px) { + .size-md-big { + font-size: 2.7rem; + } +} +@media only screen and (min-width: 1200px) { + .size-lg-big { + font-size: 2.7rem; + } +} +@media only screen and (min-width: 1600px) { + .size-xlg-big { + font-size: 2.7rem; + } +} diff --git a/public/spritemap.js b/public/spritemap.js index 11edce9..b8173b5 100644 --- a/public/spritemap.js +++ b/public/spritemap.js @@ -1 +1,13 @@ -(self.webpackChunkplain_ui=self.webpackChunkplain_ui||[]).push([[355],{256:()=>{}}]); \ No newline at end of file +(self["webpackChunkplain_ui"] = self["webpackChunkplain_ui"] || []).push([["spritemap"],{ + +/***/ "?4e0c": +/*!******************************!*\ + !*** spritemap-dummy-module ***! + \******************************/ +/***/ (() => { + + + +/***/ }) + +}]); \ No newline at end of file diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss index 84b9407..b95d856 100644 --- a/src/scss/_variables.scss +++ b/src/scss/_variables.scss @@ -160,4 +160,4 @@ $plain-ui__padding-breakpoints: ( */ $plain-ui__border-radius: 2px; -$plain-ui__border: 1px solid var(--primary); \ No newline at end of file +$plain-ui__border: 1px solid var(--border); \ No newline at end of file diff --git a/src/scss/components/_button.scss b/src/scss/components/_button.scss index 26d02a9..4e11e41 100644 --- a/src/scss/components/_button.scss +++ b/src/scss/components/_button.scss @@ -84,15 +84,39 @@ } } + &--info { + border-color: var(--info); + + &:hover { + background-color: var(--info); + } + + &:focus, &:active { + outline: 2px solid var(--info); + } + } + + &--warning { + border-color: var(--warning); + + &:hover { + background-color: var(--warning); + } + + &:focus, &:active { + outline: 2px solid var(--warning); + } + } + &--success { border-color: var(--success); &:hover { - background-color: var(--sucess); + background-color: var(--success); } &:focus, &:active { - outline: 2px solid var(--active); + outline: 2px solid var(--success); } } @@ -101,20 +125,26 @@ &:hover { color: var(--border); - border-color: var(--border-contrast); + border-color: lighten($plain-ui__primary, 40%); background-color: transparent; } } &--danger.button--outline { &:hover { - border-color: var(--danger); + border-color: lighten($plain-ui__danger, 20%); + } + } + + &--info.button--outline { + &:hover { + border-color: lighten($plain-ui__info, 20%); } } &--success.button--outline { &:hover { - border-color: var(--success); + border-color: lighten($plain-ui__success, 20%); } } } \ No newline at end of file diff --git a/src/scss/helpers/_sizing.scss b/src/scss/helpers/_sizing.scss index 886e7d1..f5e3bfa 100644 --- a/src/scss/helpers/_sizing.scss +++ b/src/scss/helpers/_sizing.scss @@ -7,7 +7,46 @@ * */ -$plain-ui__helpers__height-steps: 50; +$plain-ui__sizing_steps: 50 !default; + +/** + * mixin: sizing + * + */ +@mixin sizing($class, $style, $i, $value) +{ + .#{$class}-#{$i} { + #{$style}: $value; + } +} + +/** + * mixin: sizing for each breakpoint + * + * + */ +@mixin sizing_breakpoints($class, $style, $i, $value) +{ + @include plain-ui__media-xs() { + @include sizing($class, $style, 'xs-' + $i, $value); + } + + @include plain-ui__media-sm() { + @include sizing($class, $style, 'sm-' + $i, $value); + } + + @include plain-ui__media-md() { + @include sizing($class, $style, 'md-' + $i, $value); + } + + @include plain-ui__media-lg() { + @include sizing($class, $style, 'lg-' + $i, $value); + } + + @include plain-ui__media-xlg() { + @include sizing($class, $style, 'xlg-' + $i, $value); + } +} .w-0 { width: 0; } .h-0 { height: 0; } @@ -16,24 +55,31 @@ $plain-ui__helpers__height-steps: 50; .w-100 { width: 100%; } .h-100 { height: 100%; } -@for $i from 1 through $reflex-columns { - .w-col-#{$i} { - width: percentage(($i / $reflex-columns)); - } +@for $i from 1 through $reflex-columns +{ + $value: percentage(($i / $reflex-columns)); - .h-col-#{$i} { - height: percentage(($i / $reflex-columns)); - } + @include sizing('w-col', 'width', $i, $value); + @include sizing_breakpoints('w-col', 'width', $i, $value); + + $value: percentage(($i / $reflex-columns)); + + @include sizing('h-col', 'height', $i, $value); + @include sizing_breakpoints('h-col', 'height', $i, $value); } -@for $i from 1 through $plain-ui__helpers__height-steps { - .w-#{$i} { - width: #{($i * 0.5)}rem; - } +@for $i from 1 through $plain-ui__sizing_steps +{ + $value: #{($i * 0.5)}rem; + + @include sizing('w', 'width', $i, $value); + @include sizing_breakpoints('w', 'width', $i, $value); } -@for $i from 1 through $plain-ui__helpers__height-steps { - .h-#{$i} { - height: #{($i * 0.5)}rem; - } +@for $i from 1 through $plain-ui__sizing_steps +{ + $value: #{($i * 0.5)}rem; + + @include sizing('h', 'height', $i, $value); + @include sizing_breakpoints('h', 'height', $i, $value); } \ No newline at end of file diff --git a/src/scss/helpers/_spacing.scss b/src/scss/helpers/_spacing.scss index 813f50f..d15c9a0 100644 --- a/src/scss/helpers/_spacing.scss +++ b/src/scss/helpers/_spacing.scss @@ -1,3 +1,11 @@ +/** + * Spacing + * + * creates margin and padding for each direction and for each breakpont + * + * + */ + $plain-ui__spacing-direction: ( 'top', 'bottom', @@ -8,6 +16,46 @@ $plain-ui__spacing-direction: ( $plain-ui__spacing-gap: 0.25 !default; $plain-ui__spacing-steps: 10 !default; +/** + * mixin: spacing for single padding or margin + * + * + */ +@mixin spacing($class, $style, $direction, $name, $value) +{ + .#{$class}-#{$direction}-#{$name} { + #{$style}-#{$direction}: $value; + } +} + +/** + * mixin: spacing for each breakpoint + * + * + */ +@mixin spacing_breakpoints($class, $style, $direction, $i, $value) +{ + @include plain-ui__media-xs() { + @include spacing($class, $style, $direction, 'xs-' + $i, $value); + } + + @include plain-ui__media-sm() { + @include spacing($class, $style, $direction, 'sm-' + $i, $value); + } + + @include plain-ui__media-md() { + @include spacing($class, $style, $direction, 'md-' + $i, $value); + } + + @include plain-ui__media-lg() { + @include spacing($class, $style, $direction, 'lg-' + $i, $value); + } + + @include plain-ui__media-xlg() { + @include spacing($class, $style, $direction, 'xlg-' + $i, $value); + } +} + /** * * @@ -22,22 +70,15 @@ $plain-ui__spacing-steps: 10 !default; padding: 0; } -.marginless-last-child { +.m-top-last-child-0 { > *:last-child { - margin-bottom: 0; + margin-top: 0; } } - -/** - * spacing for single padding or margin - * - * - */ -@mixin spacing($class, $style, $direction, $name, $value) -{ - .#{$class}-#{$direction}-#{$name} { - #{$style}-#{$direction}: $value; +.m-bottom-last-child-0 { + > *:last-child { + margin-bottom: 0; } } @@ -49,26 +90,7 @@ $plain-ui__spacing-steps: 10 !default; @for $i from 2 through $plain-ui__spacing-steps { $value: $plain-ui__spacing-gap * factor($i - 1) * 1rem; @include spacing('m', 'margin', $direction, $i, $value); - - @include plain-ui__media-xs() { - @include spacing('m', 'margin', $direction, 'xs-' + $i, $value); - } - - @include plain-ui__media-sm() { - @include spacing('m', 'margin', $direction, 'sm-' + $i, $value); - } - - @include plain-ui__media-md() { - @include spacing('m', 'margin', $direction, 'md-' + $i, $value); - } - - @include plain-ui__media-lg() { - @include spacing('m', 'margin', $direction, 'lg-' + $i, $value); - } - - @include plain-ui__media-xlg() { - @include spacing('m', 'margin', $direction, 'xlg-' + $i, $value); - } + @include spacing_breakpoints('m', 'margin', $direction, $i, $value); } } @@ -80,25 +102,6 @@ $plain-ui__spacing-steps: 10 !default; @for $i from 0 through $plain-ui__spacing-steps { $value: $plain-ui__spacing-gap * factor($i - 1) * 1rem; @include spacing('p', 'padding', $direction, $i, $value); - - @include plain-ui__media-xs() { - @include spacing('p', 'padding', $direction, 'xs-' + $i, $value); - } - - @include plain-ui__media-sm() { - @include spacing('p', 'padding', $direction, 'sm-' + $i, $value); - } - - @include plain-ui__media-md() { - @include spacing('p', 'padding', $direction, 'md-' + $i, $value); - } - - @include plain-ui__media-lg() { - @include spacing('p', 'padding', $direction, 'lg-' + $i, $value); - } - - @include plain-ui__media-xlg() { - @include spacing('p', 'padding', $direction, 'xlg-' + $i, $value); - } + @include spacing_breakpoints('p', 'padding', $direction, $i, $value); } } \ No newline at end of file diff --git a/webpack.mix.js b/webpack.mix.js index 805d03b..2b8b513 100644 --- a/webpack.mix.js +++ b/webpack.mix.js @@ -44,14 +44,8 @@ mix .sass('src/scss/plain-ui.scss', 'public/plain-ui.css') .purgeCss({ extend: { - enabled: true, content: [ path.join(__dirname, 'public/*.html'), ] } - }) - .options({ - terser: { - extractComments: false, - } }) \ No newline at end of file