shards-ui
Version:
A free, modern and lightweight Bootstrap 4 UI toolkit for web makers.
1 lines • 66.4 kB
Source Map (JSON)
{"version":3,"sources":["shards-demo.css","../../src/extras/scss/shards-demo.scss","../../src/scss/_variables.scss","../../src/scss/mixins/_breakpoints.scss"],"names":[],"mappings":"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","file":"shards-demo.css","sourcesContent":["@charset \"UTF-8\";\n/**\n * Shards — Demo Page Adjustments\n */\n.loader {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: #fff;\n z-index: 1500;\n transition: opacity 500ms ease-in-out;\n}\n\n.page-loader {\n width: 40px;\n height: 40px;\n margin: auto;\n top: 50%;\n left: 50%;\n position: absolute;\n margin-top: -20px;\n margin-left: -20px;\n background-color: #333;\n background: #007bff;\n border-radius: 100%;\n transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);\n -webkit-animation: pulse-load 1200ms infinite ease-in-out;\n animation: pulse-load 1200ms infinite ease-in-out;\n}\n\n@-webkit-keyframes pulse-load {\n 0% {\n -webkit-transform: scale(0);\n }\n 100% {\n -webkit-transform: scale(1);\n opacity: 0;\n }\n}\n\n@keyframes pulse-load {\n 0% {\n -webkit-transform: scale(0);\n transform: scale(0);\n }\n 100% {\n -webkit-transform: scale(1);\n transform: scale(1);\n opacity: 0;\n }\n}\n\n.fb-share-button > span,\n.fb-like > span {\n height: 34px !important;\n}\n\n.welcome {\n background: #fff;\n height: 100vh;\n text-align: center;\n overflow: hidden;\n position: relative;\n}\n\n.welcome h1 {\n font-size: 6.25rem;\n font-weight: 500;\n letter-spacing: -0.3125rem;\n margin-top: 35vh;\n margin-bottom: 20px;\n color: #1f2429;\n}\n\n@media (max-width: 575.98px) {\n .welcome h1 {\n font-size: 5.90rem;\n }\n}\n\n.welcome .inner-wrapper {\n position: relative;\n z-index: 3;\n}\n\n.welcome .inner-wrapper > p {\n margin-bottom: 20px;\n color: #5f738e;\n transition-delay: 150ms;\n}\n\n.welcome .inner-wrapper > .action-links {\n transition-delay: 300ms;\n}\n\n.welcome .product-by {\n position: relative;\n z-index: 3;\n margin-bottom: 30px;\n}\n\n.welcome .product-by a:hover {\n text-decoration: none;\n}\n\n.welcome .product-by p {\n font-size: 10px;\n color: #b1b4bd;\n text-transform: uppercase;\n margin: 0;\n}\n\n.welcome .product-by img {\n max-width: 180px;\n}\n\n.welcome:before, .welcome:after {\n content: '';\n position: absolute;\n width: 50vw;\n height: 80vh;\n transform: rotate(-25deg);\n z-index: 1;\n}\n\n.welcome:before {\n left: -15vw;\n top: -30%;\n background: #fff;\n background: -moz-linear-gradient(left, #e2e7ef 0%, #ffffff 100%);\n background: -webkit-linear-gradient(left, #e2e7ef 0%, #ffffff 100%);\n background: linear-gradient(to right, #e2e7ef 0%, #ffffff 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e7ef', endColorstr='#ffffff', GradientType=1);\n}\n\n@media (max-width: 991.98px) {\n .welcome:before {\n left: -30%;\n }\n}\n\n@media (max-width: 767.98px) {\n .welcome:before {\n left: -35%;\n }\n}\n\n.welcome:after {\n right: -5vw;\n top: -15%;\n background: #ffffff;\n background: -moz-linear-gradient(left, #ffffff 0%, #e2e7ef 100%);\n background: -webkit-linear-gradient(left, #ffffff 0%, #e2e7ef 100%);\n background: linear-gradient(to right, #ffffff 0%, #e2e7ef 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e7ef', GradientType=1);\n}\n\n@media (max-width: 991.98px) {\n .welcome:after {\n right: -17%;\n }\n}\n\n.shard {\n will-change: transform;\n position: absolute;\n left: 50%;\n transform: translate(-50%);\n top: 40px;\n z-index: 1;\n width: 280px;\n animation: float 7s ease-in-out infinite;\n z-index: 2;\n}\n\n@keyframes float {\n 0% {\n transform: translate(-50%, 0px);\n }\n 50% {\n transform: translate(-50%, -20px);\n }\n 100% {\n transform: translate(-50%, 0px);\n }\n}\n\n.page-content {\n position: relative;\n background: #fafafa;\n padding-top: 5.3125rem;\n}\n\n.page-content:before {\n content: '';\n height: 500px;\n width: 100%;\n position: absolute;\n top: 0;\n right: 0;\n background: -moz-linear-gradient(top, #ffffff 0%, #fafafa 100%);\n background: -webkit-linear-gradient(top, #ffffff 0%, #fafafa 100%);\n background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fafafa', GradientType=0);\n}\n\n.page-content .color-wrapper {\n float: left;\n}\n\n@media (max-width: 575.98px) {\n .page-content .color-wrapper {\n float: none;\n max-width: 230px;\n margin: 0 auto;\n }\n}\n\n.page-content .color {\n padding: 25px 20px;\n text-align: center;\n background: #fff;\n margin-bottom: 30px;\n box-shadow: 0 0 25px rgba(40, 47, 60, 0.05), 0 20px 25px rgba(40, 47, 60, 0.05), 0 3px 4px rgba(40, 47, 60, 0.05);\n}\n\n.page-content .color:last-child {\n margin-right: 0;\n}\n\n.page-content .color .swatch {\n position: relative;\n border-radius: 50%;\n margin: 0 auto 15px auto;\n width: 110px;\n height: 110px;\n}\n\n.page-content .color .title {\n display: inline-block;\n font-family: \"Poppins\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif;\n width: 100%;\n font-size: 1rem;\n}\n\n.page-content .color .hex-value {\n font-family: \"Roboto Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace;\n color: #8f99ac;\n font-size: 12px;\n text-transform: uppercase;\n}\n\n.page-content .content .example {\n margin: 45px 0 60px 0;\n}\n\n.page-content .content .example.emphasized {\n padding: 25px 20px;\n background: #fff;\n box-shadow: 0 0 25px rgba(40, 47, 60, 0.05), 0 20px 25px rgba(40, 47, 60, 0.05), 0 3px 4px rgba(40, 47, 60, 0.05);\n}\n\n.page-content .content .table {\n background: #fff;\n box-shadow: 0 0 25px rgba(40, 47, 60, 0.05), 0 20px 25px rgba(40, 47, 60, 0.05), 0 3px 4px rgba(40, 47, 60, 0.05);\n}\n\n.page-content .content .table-striped tbody tr:nth-of-type(odd) {\n background-color: #f7f8fb;\n}\n\n.page-content .content .table td,\n.page-content .content .table th {\n padding: 30px 25px;\n}\n\n.page-content .content .table th {\n padding: 15px 25px;\n font-size: 11px;\n font-weight: 300;\n text-transform: uppercase;\n line-height: 1;\n color: #9ba4ae;\n border: none;\n}\n\n.page-content .content .table tbody td {\n font-size: 0.8125rem;\n vertical-align: middle;\n}\n\n.page-content .content .table tbody td h1,\n.page-content .content .table tbody td h2,\n.page-content .content .table tbody td h3,\n.page-content .content .table tbody td h4,\n.page-content .content .table tbody td h5,\n.page-content .content .table tbody td h6,\n.page-content .content .table tbody td p {\n margin: 0;\n line-height: 1;\n}\n\n.page-content .content .table tbody td p {\n font-size: 1rem !important;\n}\n\n@media (max-width: 767.98px) {\n .sm-hidden {\n display: none;\n }\n}\n\n.ll-image {\n text-indent: -9000px;\n}\n\n.hidden {\n opacity: 0;\n}\n\n.slide-in {\n will-change: transform;\n opacity: 0;\n transform: translateY(50%);\n transition: transform 850ms cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 850ms cubic-bezier(0.785, 0.135, 0.15, 0.86);\n}\n\n.slide-in.visible {\n transform: translateY(0);\n opacity: 1;\n}\n\n.icons-example .icons-example-wrapper {\n padding: 100px 0;\n}\n\n@media (max-width: 850px) {\n .icons-example .icons-example-wrapper {\n min-width: 100%;\n }\n}\n\n.icons-example .icons-example-wrapper.material-icons {\n background: #1C1E21;\n}\n\n.icons-example .icons-example-wrapper.font-awesome {\n background: #212529;\n}\n\n@media (max-width: 1199px) {\n .example-buttons .buttons-wrapper button {\n margin: 0 5px;\n }\n}\n\n@media (max-width: 850px) {\n .example-buttons .buttons-wrapper {\n flex-flow: column !important;\n flex-flow: wrap;\n }\n .example-buttons .buttons-wrapper button {\n min-width: 30%;\n margin-bottom: 20px;\n flex: 1;\n }\n}\n\n@media (max-width: 450px) {\n .example-buttons .buttons-wrapper button {\n min-width: 50%;\n }\n}\n\n@media (max-width: 991.98px) {\n #cards .last {\n display: block !important;\n }\n}\n\n@media (max-width: 767.98px) {\n #cards .card {\n max-width: 350px;\n display: table;\n margin-left: auto;\n margin-right: auto;\n }\n}\n\n@media (max-width: 767.98px) {\n #progress-bars .pb-widths {\n margin-bottom: 1.875rem;\n }\n}\n\n@media (max-width: 767.98px) {\n #popups-popovers .row > div {\n margin-bottom: 1.875rem;\n }\n}\n\n@media (max-width: 420px) {\n #popups-popovers button {\n display: block;\n width: 100%;\n margin-bottom: 10px;\n }\n}\n\n@media (max-width: 767.98px) {\n #badges .badge {\n display: table;\n margin-left: auto;\n margin-right: auto;\n margin-bottom: 10px;\n width: 100%;\n }\n}\n\n@media (max-width: 767.98px) {\n #forms .custom-dropdown-example {\n margin-bottom: 1.5rem;\n }\n}\n\n@media (max-width: 767.98px) {\n .custom-controls-example {\n width: 100%;\n max-width: 100%;\n flex: none;\n display: block;\n padding: 0 !important;\n margin-bottom: 1.5rem;\n }\n .custom-controls-example:last-child {\n margin-bottom: 0;\n }\n}\n\n#documentation {\n border-top: 1px solid #ddd;\n}\n\n.footer-cta {\n padding: 100px 0;\n}\n\n.main-footer a:hover {\n text-decoration: none;\n}\n\n/*# sourceMappingURL=shards-demo.css.map */","/**\n * Shards — Demo Page Adjustments\n */\n\n// Dependencies\n@import \"../../scss/functions\";\n@import \"../../scss/mixins\";\n@import '../../scss/variables';\n\n// Page loader\n.loader {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n bottom: 0;\n background: #fff;\n z-index: 1500;\n transition: opacity 500ms ease-in-out;\n}\n\n.page-loader {\n width: 40px;\n height: 40px;\n margin: auto;\n top: 50%;\n left: 50%;\n position: absolute;\n margin-top: -20px;\n margin-left: -20px;\n background-color: #333;\n background: theme-color(\"primary\");\n border-radius: 100%;\n transition-timing-function: cubic-bezier(0.86, 0, 0.07, 1);\n -webkit-animation: pulse-load 1200ms infinite ease-in-out;\n animation: pulse-load 1200ms infinite ease-in-out;\n}\n\n// Page loader animations.\n@-webkit-keyframes pulse-load {\n 0% {\n -webkit-transform: scale(0)\n }\n 100% {\n -webkit-transform: scale(1.0);\n opacity: 0;\n }\n}\n\n@keyframes pulse-load {\n 0% {\n -webkit-transform: scale(0);\n transform: scale(0);\n }\n 100% {\n -webkit-transform: scale(1.0);\n transform: scale(1.0);\n opacity: 0;\n }\n}\n\n.fb-share-button > span,\n.fb-like > span {\n height: 34px !important;\n}\n\n// Welcome sections.\n.welcome {\n background: $white;\n height: 100vh;\n text-align: center;\n overflow: hidden;\n position: relative;\n\n h1 {\n font-size: 6.25rem;\n font-weight: 500;\n letter-spacing: -0.3125rem;\n margin-top: 35vh;\n margin-bottom: 20px;\n color: #1f2429;\n\n @include media-breakpoint-down(xs) {\n font-size: 5.90rem;\n }\n }\n\n .inner-wrapper {\n position: relative;\n z-index: 3;\n\n > p {\n margin-bottom: 20px;\n color: #5f738e;\n transition-delay: 150ms;\n }\n\n > .action-links {\n transition-delay: 300ms;\n }\n }\n\n .product-by {\n position: relative;\n z-index: 3;\n margin-bottom: 30px;\n\n a:hover {\n text-decoration: none;\n }\n\n p {\n font-size: 10px;\n color: #b1b4bd;\n text-transform: uppercase;\n margin: 0;\n }\n\n img {\n max-width: 180px;\n }\n }\n\n &:before,\n &:after {\n content: '';\n position: absolute;\n width: 50vw;\n height: 80vh;\n transform: rotate(-25deg);\n z-index: 1;\n }\n\n &:before {\n left: -15vw;\n top: -30%;\n background: #fff;\n background: -moz-linear-gradient(left, #e2e7ef 0%, #ffffff 100%);\n background: -webkit-linear-gradient(left, #e2e7ef 0%, #ffffff 100%);\n background: linear-gradient(to right, #e2e7ef 0%, #ffffff 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e7ef', endColorstr='#ffffff', GradientType=1); // Responsive\n\n @include media-breakpoint-down(md) {\n left: -30%;\n }\n\n @include media-breakpoint-down(sm) {\n left: -35%;\n }\n }\n\n &:after {\n right: -5vw;\n top: -15%;\n background: #ffffff;\n background: -moz-linear-gradient(left, #ffffff 0%, #e2e7ef 100%);\n background: -webkit-linear-gradient(left, #ffffff 0%, #e2e7ef 100%);\n background: linear-gradient(to right, #ffffff 0%, #e2e7ef 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e2e7ef', GradientType=1); // Responsive\n @include media-breakpoint-down(md) {\n right: -17%;\n }\n }\n}\n\n.shard {\n will-change: transform;\n position: absolute;\n left: 50%;\n transform: translate(-50%);\n top: 40px;\n z-index: 1;\n width: 280px;\n animation: float 7s ease-in-out infinite;\n z-index: 2;\n}\n\n// Floating animation\n@keyframes float {\n 0% {\n transform: translate(-50%, 0px);\n }\n 50% {\n transform: translate(-50%, -20px);\n }\n 100% {\n transform: translate(-50%, 0px);\n }\n}\n\n// Page content adjustments.\n.page-content {\n position: relative;\n background: #fafafa;\n padding-top: 5.3125rem;\n\n &:before {\n content: '';\n height: 500px;\n width: 100%;\n position: absolute;\n top: 0;\n right: 0;\n background: -moz-linear-gradient(top, #ffffff 0%, #fafafa 100%);\n background: -webkit-linear-gradient(top, #ffffff 0%, #fafafa 100%);\n background: linear-gradient(to bottom, #ffffff 0%, #fafafa 100%);\n filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#fafafa', GradientType=0);\n }\n\n // Color swatches wrapper.\n .color-wrapper {\n float: left;\n @include media-breakpoint-down(xs) {\n float: none;\n max-width: 230px;\n margin: 0 auto;\n }\n }\n\n .color {\n padding: 25px 20px;\n text-align: center;\n background: $white;\n margin-bottom: 30px;\n box-shadow: 0 0 25px rgba(40, 47, 60, .05), 0 20px 25px rgba(40, 47, 60, .05), 0 3px 4px rgba(40, 47, 60, .05);\n\n &:last-child {\n margin-right: 0;\n }\n\n .swatch {\n position: relative;\n border-radius: 50%;\n margin: 0 auto 15px auto;\n width: 110px;\n height: 110px;\n }\n\n .title {\n display: inline-block;\n font-family: $headings-font-family;\n width: 100%;\n font-size: 1rem;\n }\n\n .hex-value {\n font-family: $font-family-monospace;\n color: #8f99ac;\n font-size: 12px;\n text-transform: uppercase;\n }\n }\n .content {\n .example {\n margin: 45px 0 60px 0;\n\n &.emphasized {\n padding: 25px 20px;\n background: $white;\n box-shadow: 0 0 25px rgba(40, 47, 60, .05), 0 20px 25px rgba(40, 47, 60, .05), 0 3px 4px rgba(40, 47, 60, .05);\n }\n }\n\n .table {\n background: $white;\n box-shadow: 0 0 25px rgba(40, 47, 60, .05), 0 20px 25px rgba(40, 47, 60, .05), 0 3px 4px rgba(40, 47, 60, .05);\n\n &-striped tbody tr:nth-of-type(odd) {\n background-color: #f7f8fb;\n }\n\n td,\n th {\n padding: 30px 25px;\n }\n\n th {\n padding: 15px 25px;\n font-size: 11px;\n font-weight: 300;\n text-transform: uppercase;\n line-height: 1;\n color: #9ba4ae;\n border: none;\n }\n\n tbody {\n td {\n font-size: 0.8125rem;\n vertical-align: middle;\n h1,\n h2,\n h3,\n h4,\n h5,\n h6,\n p {\n margin: 0;\n line-height: 1;\n }\n\n p {\n font-size: 1rem !important;\n }\n }\n }\n }\n }\n}\n\n// Utilities\n@include media-breakpoint-down(sm) {\n .sm-hidden {\n display: none;\n }\n}\n\n.ll-image {\n text-indent: -9000px;\n}\n\n.hidden {\n opacity: 0;\n}\n\n.slide-in {\n will-change: transform;\n opacity: 0;\n transform: translateY(50%);\n transition: transform 850ms cubic-bezier(0.785, 0.135, 0.150, 0.860), opacity 850ms cubic-bezier(0.785, 0.135, 0.150, 0.860);\n\n &.visible {\n transform: translateY(0);\n opacity: 1;\n }\n}\n\n//\n// Examples\n//\n\n// Icons\n.icons-example {\n .icons-example-wrapper {\n padding: 100px 0;\n @media (max-width: 850px) {\n min-width: 100%;\n }\n\n &.material-icons {\n background: #1C1E21;\n }\n\n &.font-awesome {\n background: #212529;\n }\n }\n}\n\n// Buttons\n.example-buttons {\n @media (max-width: 1199px) {\n .buttons-wrapper {\n button {\n margin: 0 5px;\n }\n }\n }\n\n @media (max-width: 850px) {\n .buttons-wrapper {\n flex-flow: column !important;\n flex-flow: wrap;\n\n button {\n min-width: 30%;\n margin-bottom: 20px;\n flex: 1;\n }\n }\n }\n\n @media (max-width: 450px) {\n .buttons-wrapper button {\n min-width: 50%;\n }\n }\n}\n\n// Cards\n@include media-breakpoint-down(md) {\n #cards .last {\n display: block !important;\n }\n}\n\n@include media-breakpoint-down(sm) {\n #cards .card {\n max-width: 350px;\n display: table;\n margin-left: auto;\n margin-right: auto;\n }\n}\n\n// Progress bars\n@include media-breakpoint-down(sm) {\n #progress-bars {\n .pb-widths {\n margin-bottom: $spacer * 1.25;\n }\n }\n}\n\n\n// Popups/Popovers\n#popups-popovers {\n @include media-breakpoint-down(sm) {\n .row>div {\n margin-bottom: $spacer * 1.25;\n }\n }\n\n @media (max-width: 420px) {\n button {\n display: block;\n width: 100%;\n margin-bottom: 10px;\n }\n }\n}\n\n// Badges\n#badges {\n @include media-breakpoint-down(sm) {\n .badge {\n display: table;\n margin-left: auto;\n margin-right: auto;\n margin-bottom: 10px;\n width: 100%;\n }\n }\n}\n\n// Forms\n#forms {\n @include media-breakpoint-down(sm) {\n .custom-dropdown-example {\n margin-bottom: $spacer;\n }\n }\n}\n\n// Custom controls\n@include media-breakpoint-down(sm) {\n .custom-controls-example {\n width: 100%;\n max-width: 100%;\n flex: none;\n display: block;\n padding: 0 !important;\n margin-bottom: $spacer;\n\n &:last-child {\n margin-bottom: 0;\n }\n }\n}\n\n\n#documentation {\n border-top: 1px solid #ddd;\n}\n\n// Footer\n.footer-cta {\n padding: 100px 0;\n}\n\n.main-footer a:hover { text-decoration: none; }\n","// Shards variables\n\n//\n// Color system\n//\n\n// stylelint-disable\n$white: #fff !default;\n$gray-100: #f8f9fa !default;\n$gray-200: #e9ecef !default;\n$gray-300: #dee2e6 !default;\n$gray-400: #ced4da !default;\n$gray-500: #adb5bd !default;\n$gray-600: #868e96 !default;\n$gray-700: #495057 !default;\n$gray-800: #343a40 !default;\n$gray-900: #212529 !default;\n$black: #000 !default;\n\n$grays: () !default;\n$grays: map-merge((\n \"100\": $gray-100,\n \"200\": $gray-200,\n \"300\": $gray-300,\n \"400\": $gray-400,\n \"500\": $gray-500,\n \"600\": $gray-600,\n \"700\": $gray-700,\n \"800\": $gray-800,\n \"900\": $gray-900\n), $grays);\n\n$blue: #007bff !default;\n$indigo: #674eec !default;\n$purple: #8445f7 !default;\n$pink: #ff4169 !default;\n$red: #c4183c !default;\n$orange: #fb7906 !default;\n$yellow: #ffb400 !default;\n$green: #17c671 !default;\n$teal: #1adba2 !default;\n$cyan: #00b8d8 !default;\n\n// Shards Specific\n$blueish-grey: #5A6169 !default;\n\n$colors: () !default;\n$colors: map-merge((\n \"blue\": $blue,\n \"indigo\": $indigo,\n \"purple\": $purple,\n \"pink\": $pink,\n \"red\": $red,\n \"orange\": $orange,\n \"yellow\": $yellow,\n \"green\": $green,\n \"teal\": $teal,\n \"cyan\": $cyan,\n \"white\": $white,\n \"gray\": $gray-600,\n \"gray-dark\": $gray-800\n), $colors);\n\n$primary: $blue !default;\n$secondary: $blueish-grey !default;\n$success: $green !default;\n$info: $cyan !default;\n$warning: $yellow !default;\n$danger: $red !default;\n$light: $gray-200 !default;\n$dark: $gray-900 !default;\n\n$theme-colors: () !default;\n$theme-colors: map-merge((\n \"primary\": $primary,\n \"secondary\": $secondary,\n \"success\": $success,\n \"info\": $info,\n \"warning\": $warning,\n \"danger\": $danger,\n \"light\": $light,\n \"dark\": $dark\n), $theme-colors);\n// stylelint-enable\n\n// Set a specific jump point for requesting color jumps\n$theme-color-interval: 8% !default;\n\n// The yiq lightness value that determines when the lightness of color changes from \"dark\" to \"light\". Acceptable values are between 0 and 255.\n$yiq-contrasted-threshold: 150 !default;\n\n// Customize the light and dark text colors for use in our YIQ color contrast function.\n$yiq-text-dark: $gray-900 !default;\n$yiq-text-light: $white !default;\n\n// Options\n//\n// Quickly modify global styling by enabling or disabling optional features.\n\n$enable-rounded: true !default;\n$enable-shadows: true !default;\n$enable-gradients: false !default; // Not supported by Shards.\n$enable-transitions: true !default;\n$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS\n$enable-fonts-import: true !default;\n\n\n// Forms\n\n$border-color: #becad6 !default;\n$input-frozen-color: #abb6bf !default;\n\n// Spacing\n\n$spacer: 1.5rem !default; // ~ 24px\n\n\n// Body\n\n$body-bg: $white !default;\n$body-color: $blueish-grey !default;\n\n\n// Links\n\n$link-color: theme-color(\"primary\") !default;\n$link-decoration: none !default;\n$link-hover-color: darken($link-color, 15%) !default;\n$link-hover-decoration: underline !default;\n\n\n// Grid breakpoints\n\n$grid-breakpoints: (\n xs: 0,\n sm: 576px,\n md: 768px,\n lg: 992px,\n xl: 1200px\n) !default;\n\n@include _assert-ascending($grid-breakpoints, \"$grid-breakpoints\");\n@include _assert-starts-at-zero($grid-breakpoints);\n\n\n// Grid containers\n//\n// Define the maximum width of `.container` for different screen sizes.\n\n$container-max-widths: (\n sm: 540px,\n md: 720px,\n lg: 960px,\n xl: 1140px\n) !default;\n\n@include _assert-ascending($container-max-widths, \"$container-max-widths\");\n\n\n// Components\n\n$line-height-lg: 1.5 !default;\n$line-height-sm: 1.5 !default;\n\n$border-width: 1px !default;\n\n$border-radius: .375rem !default;\n$border-radius-lg: .5rem !default;\n$border-radius-sm: .35rem !default;\n\n$component-active-color: $white !default;\n$component-active-bg: theme-color(\"primary\") !default;\n\n\n// Easings\n$ease-in-out-circ: cubic-bezier(.27,.01,.38,1.06);\n\n\n// Transitions\n$transition-duration: 250ms;\n$transition-base: all $transition-duration $ease-in-out-circ !default;\n$transition-fade: opacity 200ms ease-in-out !default;\n$transition-collapse: height 350ms ease-in-out !default;\n\n\n// Fonts\n\n$google-fonts-import: 'https://fonts.googleapis.com/css?family=Poppins:300,400,500,600|Roboto+Mono'; // Includes: Poppins: Light, Regular, Medium, Semi-bold; Roboto Mono: Regular\n\n$font-family-poppins-first: \"Poppins\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif !default;\n$font-family-system-first: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif !default;\n$font-family-roboto-mono-first: \"Roboto Mono\", Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace !default;\n\n$font-family-sans-serif: $font-family-system-first !default;\n$font-family-monospace: $font-family-roboto-mono-first !default;\n$font-family-base: $font-family-sans-serif !default;\n\n$font-size-base: 1rem !default;\n$font-size-lg: 1.25rem !default;\n$font-size-sm: .875rem !default;\n\n$font-weight-normal: 300 !default;\n$font-weight-bold: 500 !default;\n\n$font-weight-base: $font-weight-normal !default;\n$line-height-base: 1.5 !default;\n\n$h1-font-size: 3.052rem !default;\n$h2-font-size: 2.441rem !default;\n$h3-font-size: 1.953rem !default;\n$h4-font-size: 1.563rem !default;\n$h5-font-size: 1.25rem !default;\n$h6-font-size: 1rem !default;\n\n$headings-margin-bottom: .75rem !default;\n\n$headings-font-family: $font-family-poppins-first !default;\n$headings-font-weight: 400 !default;\n$headings-color: $gray-900 !default;\n$headings-letter-spacing: -.0625rem !default; // ~1px\n\n$h1-line-height: 3rem !default;\n$h2-line-height: 2.25rem !default;\n$h3-line-height: 2.25rem !default;\n$h4-line-height: 2rem !default;\n$h5-line-height: 1.5rem !default;\n$h6-line-height: 1.5rem !default;\n\n$display1-size: 7.451rem !default;\n$display2-size: 5.96rem !default;\n$display3-size: 4.768rem !default;\n$display4-size: 3.815rem !default;\n\n$display-line-height: 1 !default;\n$display-margin-bottom: 0.75rem !default;\n\n$paragraphs-margin-bottom: 1.75rem !default;\n\n$lead-line-height: 1.875rem !default;\n\n$small-font-size: 80% !default;\n\n$text-muted: $gray-600 !default;\n\n$blockquote-font-size: 1.5rem !default;\n$blockquote-footer-font-size: 1.125rem !default;\n$blockquote-margin-bottom: 0.75rem !default;\n\n$hr-border-color: rgba($black,.1) !default;\n$hr-border-width: $border-width !default;\n$hr-margin-y: 1.125rem !default;\n\n$mark-padding: .2em !default;\n$mark-bg: #fff09e !default;\n\n\n// Tables\n//\n// Customizes the `.table` component with basic values, each used across all table variations.\n\n$table-bg: transparent !default;\n$table-active-bg: rgba($black, .075) !default;\n\n$table-cell-padding: .75rem !default;\n$table-cell-padding-sm: .3rem !default;\n\n$table-dark-color: $body-bg !default;\n$table-dark-bg: $gray-900 !default;\n$table-dark-border-color: lighten($gray-900, 7.5%) !default;\n$table-dark-accent-bg: rgba($white, .05) !default;\n$table-dark-hover-bg: rgba($white, .075) !default;\n\n$table-head-color: $gray-700 !default;\n$table-head-bg: $gray-200 !default;\n$table-border-color: $gray-300 !default;\n\n\n// Buttons\n//\n// For each of Bootstrap's buttons, define text, background and border color.\n\n$btn-padding-y-lg: .75rem !default;\n$btn-padding-x-lg: 1.75rem !default;\n\n$btn-line-height-sm: $line-height-sm !default;\n$btn-line-height-lg: $line-height-lg !default;\n\n$btn-padding-y-sm: .35rem !default;\n$btn-padding-x-sm: 1rem !default;\n\n$input-btn-padding-y: .5rem !default;\n$input-btn-padding-x: 1rem !default;\n$input-btn-line-height: 1.125 !default;\n\n$input-btn-padding-y-sm: .35rem !default;\n$input-btn-padding-x-sm: .75rem !default;\n\n$input-btn-padding-y-lg: .75rem !default;\n$input-btn-padding-x-lg: 1rem !default;\n\n$btn-pill-border-radius: 50px !default;\n\n$btn-padding-y: .75rem !default;\n$btn-padding-x: 1.25rem !default;\n\n$btn-font-weight: $font-weight-normal !default;\n$btn-font-size: .875rem !default;\n$btn-font-size-sm: 0.75rem !default;\n$btn-font-size-lg: 1.125rem !default;\n$btn-font-family: $font-family-poppins-first !default;\n$btn-box-shadow: none !default;\n\n$input-btn-focus-width: .2rem !default;\n\n$btn-active-box-shadow: inset 0 3px 5px rgba($black,.125) !default;\n\n$btn-link-disabled-color: $gray-600 !default;\n$btn-block-spacing-y: .5rem !default;\n\n// Allows for customizing button radius independently from global border radius\n$btn-border-radius: $border-radius !default;\n$btn-border-radius-lg: $border-radius-lg !default;\n$btn-border-radius-sm: $border-radius-sm !default;\n\n$btn-border-width: 1px !default;\n\n$btn-transition: $transition-base !default;\n\n// Forms\n\n$input-padding-y: $input-btn-padding-y !default;\n$input-padding-x: $input-btn-padding-x !default;\n$input-line-height: 1.5 !default;\n\n$input-padding-y-sm: $input-btn-padding-y-sm !default;\n$input-padding-x-sm: $input-btn-padding-x-sm !default;\n$input-line-height-sm: 1.5 !default;\n\n$input-padding-y-lg: $input-btn-padding-y-lg !default;\n$input-padding-x-lg: $input-btn-padding-x-lg !default;\n$input-line-height-lg: 1.5 !default;\n\n$input-bg: $white !default;\n$input-disabled-bg: #f5f6f7 !default;\n\n$input-font-size: .95rem !default;\n\n$input-color: $gray-700 !default;\n$input-border-color: $border-color !default;\n$input-btn-border-width: $border-width !default;\n$input-box-shadow: none !default;\n\n$input-border-width: $border-width !default;\n$input-border-radius: $border-radius !default;\n$input-border-radius-lg: $border-radius-lg !default;\n$input-border-radius-sm: $border-radius-sm !default;\n\n$input-focus-bg: $input-bg !default;\n$input-focus-border-color: theme-color(\"primary\") !default;\n$input-focus-box-shadow: 0 .313rem .719rem rgba(theme-color(\"primary\"),.1), 0 .156rem .125rem rgba($black, .06) !default;\n$input-focus-color: $input-color !default;\n\n$input-hover-border-color: darken($input-border-color, 15) !default;\n\n$input-placeholder-color: $gray-600 !default;\n\n$input-height-border: $input-border-width * 2 !default;\n\n$input-height-inner: ($input-font-size * $input-line-height) + ($input-padding-y * 2) !default;\n$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;\n\n$input-height-inner-sm: ($font-size-sm * $input-line-height-sm) + ($input-padding-y-sm * 2) !default;\n$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;\n\n$input-height-inner-lg: ($font-size-lg * $input-line-height-lg) + ($input-padding-y-lg * 2) !default;\n$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;\n\n$input-transition: box-shadow $transition-duration $ease-in-out-circ,\n border $transition-duration $ease-in-out-circ !default;\n\n$form-text-margin-top: .25rem !default;\n\n$form-check-input-gutter: 1.25rem !default;\n$form-check-input-margin-y: .313rem !default;\n$form-check-input-margin-x: .313rem !default;\n\n$form-check-inline-margin-x: .75rem !default;\n$form-check-inline-input-margin-x: .3125rem !default;\n\n$form-group-margin-bottom: 1rem !default;\n\n$input-group-padding-y: 12px !default;\n$input-group-padding-x: 14px !default;\n$input-group-addon-bg: lighten($input-border-color, 19%) !default;\n$input-group-addon-border-color: $input-border-color !default;\n$input-group-addon-color: $input-frozen-color !default;\n\n$custom-control-gutter: 1.688rem !default;\n$custom-control-spacer-x: 1rem !default;\n\n$custom-control-indicator-size: 1.125rem !default;\n$custom-control-indicator-bg: $white !default;\n$custom-control-indicator-bg-size: 50% 50% !default;\n$custom-control-indicator-box-shadow: none !default;\n$custom-control-indicator-border: 1px solid $border-color !default;\n$custom-checkbox-indicator-transition: transform $transition-duration $ease-in-out-circ,\n border $transition-duration $ease-in-out-circ !default;\n\n$custom-control-indicator-disabled-bg: $gray-200 !default;\n$custom-control-description-disabled-color: $gray-600 !default;\n\n$custom-control-indicator-checked-color: $white !default;\n$custom-control-indicator-checked-bg: theme-color(\"primary\") !default;\n$custom-control-indicator-checked-box-shadow: none !default;\n\n$custom-control-indicator-focus-box-shadow: $input-focus-box-shadow !default;\n\n$custom-control-indicator-active-color: $white !default;\n$custom-control-indicator-active-bg: lighten(theme-color(\"primary\"), 35%) !default;\n$custom-control-indicator-active-box-shadow: none !default;\n\n// Custom checkbox\n$custom-checkbox-indicator-border-radius: 2px !default;\n$custom-checkbox-indicator-icon-checked: none !default;\n$custom-checkbox-indicator-indeterminate-bg: theme-color(\"primary\") !default;\n$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;\n$custom-checkbox-indicator-icon-indeterminate: none !default;\n$custom-checkbox-indicator-indeterminate-box-shadow: none !default;\n\n// Custom radio\n$custom-radio-indicator-border-radius: 50% !default;\n\n// Custom select\n$custom-select-padding-y: .375rem !default;\n$custom-select-padding-x: .75rem !default;\n$custom-select-height: $input-height !default; // OK\n$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator\n$custom-select-line-height: 1.2 !default;\n$custom-select-color: $input-color !default;\n$custom-select-disabled-color: $gray-600 !default;\n$custom-select-bg: $white !default;\n$custom-select-disabled-bg: $gray-200 !default;\n$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions\n$custom-select-indicator-color: #333 !default;\n$custom-select-indicator: str-replace(url(\"data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E\"), \"#\", \"%23\") !default;\n$custom-select-border-width: $input-btn-border-width !default;\n$custom-select-border-color: $input-border-color !default;\n$custom-select-border-radius: $border-radius !default;\n\n$custom-select-focus-border-color: $input-focus-border-color !default;\n$custom-select-focus-box-shadow: 0 .313rem .719rem rgba(theme-color(\"primary\"),.1), 0 .156rem .125rem rgba($black, .06) !default;\n\n$custom-select-font-size-sm: 0.75rem !default;\n$custom-select-height-sm: $input-height-sm !default;\n\n$custom-select-height-lg: $input-height-lg !default;\n$custom-select-font-size-lg: 1.25rem !default;\n\n$custom-file-height: calc(2.428rem + 2px) !default;\n$custom-file-width: 14rem !default;\n$custom-file-focus-box-shadow: $input-focus-box-shadow !default;\n$custom-file-focus-border-color: $input-focus-border-color !default;\n\n$custom-file-padding-y: 1rem !default;\n$custom-file-padding-x: .5rem !default;\n$custom-file-line-height: 1.5 !default;\n$custom-file-color: $gray-700 !default;\n$custom-file-bg: $white !default;\n$custom-file-border-width: $border-width !default;\n$custom-file-border-color: $input-border-color !default;\n$custom-file-border-radius: $border-radius !default;\n$custom-file-box-shadow: none !default;\n$custom-file-button-color: $custom-file-color !default;\n$custom-file-button-bg: $gray-200 !default;\n$custom-file-text: (\n en: \"Browse\"\n) !default;\n\n// Form validation\n$form-feedback-margin-top: $form-text-margin-top !default;\n$form-feedback-font-size: $small-font-size !default;\n$form-feedback-valid-color: theme-color(\"success\") !default;\n$form-feedback-invalid-color: theme-color(\"danger\") !default;\n\n// Custom toggle\n$custom-toggle-width: 3.125rem !default;\n$custom-toggle-height: 1.75rem !default;\n$custom-toggle-border-width: 0.0625rem !default;\n$custom-toggle-border: $custom-toggle-border-width solid $input-border-color !default;\n$custom-toggle-background-color: $white !default;\n$custom-toggle-border-radius: 100px !default;\n\n$custom-toggle-focus-box-shadow: 0 .313rem .719rem rgba(theme-color(\"success\"),.1), 0 .156rem .125rem rgba($black, .06) !default;\n\n$custom-toggle-checked-background: theme-color(\"success\") !default;\n$custom-toggle-checked-border-color: $custom-toggle-checked-background !default;\n$custom-toggle-checked-knob-background: $white !default;\n\n$custom-toggle-knob-width: 1.25rem !default;\n$custom-toggle-knob-height: 1.25rem !default;\n$custom-toggle-knob-border-radius: 6.25rem !default;\n$custom-toggle-knob-active-width: 1.625rem !default;\n\n$custom-toggle-invalid-knob-background-color: #eb8c95 !default;\n$custom-toggle-invalid-background-color: $white !default;\n\n$custom-toggle-width-sm : 2.1875rem !default;\n$custom-toggle-height-sm : 1.125rem !default;\n\n$custom-toggle-knob-width-sm: .75rem !default;\n$custom-toggle-knob-active-width-sm: 1rem !default;\n$custom-toggle-knob-height-sm: .75rem !default;\n\n\n// Form validation\n$form-feedback-valid-color: theme-color(\"success\") !default;\n$form-feedback-invalid-color: theme-color(\"danger\") !default;\n\n\n// Dropdowns\n//\n// Dropdown menu container and contents.\n\n$dropdown-bg: $white !default;\n$dropdown-min-width: 10rem !default;\n$dropdown-padding-y: .5rem !default;\n$dropdown-spacer: 0 !default;\n$dropdown-border-color: rgba($black,.05) !default;\n$dropdown-border-width: $border-width !default;\n$dropdown-divider-bg: $gray-200 !default;\n$dropdown-border-radius: $border-radius !default;\n\n$dropdown-box-shadow: 0 0.5rem 4rem rgba(0, 0, 0, 0.11), 0 10px 20px rgba(0, 0, 0, 0.05), 0 2px 3px rgba(0, 0, 0, 0.06) !default;\n\n$dropdown-link-color: $gray-900 !default;\n$dropdown-link-hover-color: darken($gray-900, 5%) !default;\n$dropdown-link-hover-bg: lighten($blueish-grey, 55%) !default;\n$dropdown-link-active-color: $component-active-color !default;\n$dropdown-link-active-bg: lighten($blueish-grey, 40%) !default;\n$dropdown-link-disabled-color: $gray-600 !default;\n\n$dropdown-item-padding-y: .5rem !default;\n$dropdown-item-padding-x: 1.25rem !default;\n$dropdown-item-font-size: .9375rem !default;\n$dropdown-item-transition: background-color $transition-duration $ease-in-out-circ, color $transition-duration $ease-in-out-circ !default;\n\n$dropdown-header-color: $gray-600 !default;\n\n// Small dropdowns\n$dropdown-small-padding-y: .25rem !default;\n$dropdown-small-font-size: 0.813rem !default;\n$dropdown-small-box-shadow: 0 0.5rem 2rem rgba(0,0,0,.11), 0 3px 10px rgba(0,0,0,.05), 0 2px 3px rgba(0,0,0,.06) !default;\n\n$dropdown-small-item-padding-y: 0.375rem !default;\n$dropdown-small-item-padding-x: 0.875rem !default;\n\n$dropdown-small-item-font-size: 0.813rem !default;\n\n$dropdown-small-divider-margin-x: 0 !default;\n$dropdown-small-divider-margin-y: 0.25rem !default;\n\n\n// Z-index master list\n//\n// Warning: Avoid customizing these values. They're used for a bird's eye view\n// of components dependent on the z-axis and are designed to all work together.\n\n$zindex-dropdown: 1000 !default;\n$zindex-sticky: 1020 !default;\n$zindex-fixed: 1030 !default;\n$zindex-modal-backdrop: 1040 !default;\n$zindex-modal: 1050 !default;\n$zindex-popover: 1060 !default;\n$zindex-tooltip: 1070 !default;\n\n// Navs\n\n$nav-transition: $transition-base !default;\n$nav-font-family: $font-family-poppins-first !default;\n\n$nav-link-padding-y: .625rem !default;\n$nav-link-padding-x: 1.125rem !default;\n$nav-link-disabled-color: $gray-600 !default;\n\n$nav-tabs-border-color: lighten($blueish-grey, 45%) !default;\n$nav-tabs-border-width: $border-width !default;\n$nav-tabs-border-radius: $border-radius !default;\n$nav-tabs-link-hover-border-color: $gray-200 !default;\n$nav-tabs-link-active-color: $gray-700 !default;\n$nav-tabs-link-active-bg: $body-bg !default;\n$nav-tabs-link-active-border-color: #ddd !default;\n\n$nav-pills-border-radius: $border-radius !default;\n$nav-pills-link-active-color: $component-active-color !default;\n$nav-pills-link-active-bg: $component-active-bg !default;\n\n// Navbar nav\n$navbar-nav-link-padding-x: .625rem !default;\n\n// Navbar\n\n$navbar-padding-y: ($spacer / 2) !default;\n$navbar-padding-x: $spacer !default;\n\n$navbar-brand-font-size: 1rem !default;\n\n// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link\n$nav-link-height: $navbar-brand-font-size * $line-height-base !default;\n$navbar-brand-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;\n$navbar-brand-padding-y: ($navbar-brand-height - $nav-link-height) / 2 !default;\n\n$navbar-font-family: $font-family-poppins-first !default;\n$navbar-toggler-padding-y: .5rem !default;\n$navbar-toggler-padding-x: .5rem !default;\n$navbar-toggler-font-size: 1rem !default;\n$navbar-toggler-border-radius: $btn-border-radius !default;\n\n$navbar-dark-color: rgba($white,.5) !default;\n$navbar-dark-hover-color: rgba($white,.75) !default;\n$navbar-dark-active-color: rgba($white,1) !default;\n$navbar-dark-disabled-color: rgba($white,.25) !default;\n$navbar-dark-toggler-icon-bg: str-replace(url(\"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E\"), \"#\", \"%23\") !default;\n$navbar-dark-toggler-border-color: rgba($white,.1) !default;\n\n$navbar-light-color: rgba($black,.5) !default;\n$navbar-light-hover-color: rgba($black,.7) !default;\n$navbar-light-active-color: rgba($black,.9) !default;\n$navbar-light-disabled-color: rgba($black,.3) !default;\n$navbar-light-toggler-icon-bg: str-replace(url(\"data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E\"), \"#\", \"%23\") !default;\n$navbar-light-toggler-border-color: rgba($black,.1) !default;\n\n// Pagination\n\n$pagination-padding-y: .5rem !default;\n$pagination-padding-x: .75rem !default;\n$pagination-padding-y-sm: .25rem !default;\n$pagination-padding-x-sm: .6875rem !default;\n$pagination-padding-y-lg: .9375rem !default;\n$pagination-padding-x-lg: 1.5625rem !default;\n$pagination-line-height: 1.25 !default;\n$pagination-font-family: $font-family-poppins-first !default;\n$pagination-font-size: .875rem !default;\n$pagination-box-shadow: 0 .125rem .9375rem rgba($blueish-grey, 0.1), 0 .125rem .1875rem rgba($blueish-grey, 0.15) !default;\n\n$pagination-color: $link-color !default;\n$pagination-bg: $white !default;\n\n$pagination-hover-color: $link-hover-color !default;\n$pagination-hover-bg: lighten($blueish-grey, 58%) !default;\n$pagination-hover-border-color: lighten($blueish-grey, 50%) !default;\n\n$pagination-active-color: $white !default;\n$pagination-active-bg: theme-color(\"primary\") !default;\n$pagination-active-border-color: theme-color(\"primary\") !default;\n\n$pagination-disabled-color: lighten($blueish-grey, 30%) !default;\n$pagination-disabled-bg: $white !default;\n$pagination-disabled-border-color: lighten($blueish-grey, 50%) !default;\n\n\n// Jumbotron\n\n$jumbotron-padding-x: 42px !default;\n$jumbotron-padding-y: 38px !default;\n$jumbotron-padding: 2rem !default;\n$jumbotron-bg: lighten($blueish-grey, 55%) !default;\n\n\n// Cards\n\n$card-spacer-y: 2.1875rem !default;\n$card-spacer-x: 1.875rem !default;\n\n$card-header-spacer-x: $card-spacer-x !default;\n$card-header-spacer-y: ($card-spacer-y / 2) !default;\n\n$card-footer-spacer-x: $card-spacer-x !default;\n$card-footer-spacer-y: ($card-spacer-y / 2) !default;\n\n$card-border-radius: 0.625rem !default;\n$card-inner-border-radius: $card-border-radius !default;\n\n$card-cap-bg: rgba($blueish-grey, .06) !default;\n$card-bg: $white !default;\n\n$card-title-font-weight: 500 !default;\n$card-title-margin-bottom: .75rem !default;\n\n$card-link-font-family: $font-family-poppins-first !default;\n\n$card-paragraph-margin-bottom: 1.5625rem !default;\n\n$card-box-shadow: 0 .46875rem 2.1875rem rgba($blueish-grey, .1),\n 0 .9375rem 1.40625rem rgba($blueish-grey, .1),\n 0 .25rem .53125rem rgba($blueish-grey, .12),\n 0 .125rem .1875rem rgba($blueish-grey, .1);\n\n$card-img-overlay-padding: 1.875rem 2.1875rem !default;\n$card-deck-margin: .9375rem !default;\n\n$card-list-group-item-padding: .8125rem 1.875rem !default;\n$card-group-card-border: 1px solid lighten($blueish-grey, 53%) !default;\n\n$card-columns-count: 3 !default;\n$card-columns-gap: 1.25rem !default;\n$card-columns-margin: $card-spacer-y !default;\n\n$card-small-spacer-y: 1rem !default;\n$card-small-spacer-x: 1rem !default;\n$card-small-box-shadow: 0 2px 0 rgba($blueish-grey, 0.11),\n