// Variables // Colors // // Grayscale and brand colors $black: #000; $gray-darkest: #161b20; $gray-darker: #333; $gray-dark: #666; $gray: #747373; $gray-light: #bdbdbd; $gray-lighter: #ebebeb; $gray-lightest: #f2f2f2; $white: #fff; $brand-primary: #e30513; $blue: #006d95; $color-scheme: ( 1: $brand-primary, 2: #e98000, 3: #cea405, 4: #99396f, 5: $blue, 6: #38765a, 7: #e24e42, 8: #6a73ce ); $state-success-text: #3c763d !default; $state-success-bg: #dff0d8 !default; $state-success-border: darken($state-success-bg, 5%) !default; $state-info-text: #31708f !default; $state-info-bg: #d9edf7 !default; $state-info-border: darken($state-info-bg, 7%) !default; $state-error-text: #dc3545 !default; $state-error-bg: #f2dede !default; $state-error-border: darken($state-error-bg, 5%) !default; $text-muted: $gray-light; $text-color-primary: $brand-primary; $text-color-success: $state-success-text; $text-color-info: $state-info-text; $text-color-error: $state-error-text; // Spacing $spacer: 1rem; $spacer-x: $spacer; $spacer-y: $spacer; $spacers: ( 0: ( x: 0, y: 0 ), "half": ( x: ($spacer-x / 2), y: ($spacer-y / 2) ), 1: ( x: $spacer-x, y: $spacer-y ), "1-half": ( x: ($spacer-x * 1.5), y: ($spacer-y * 1.5) ), 2: ( x: ($spacer-x * 2), y: ($spacer-y * 2) ), "2-half": ( x: ($spacer-x * 2.5), y: ($spacer-y * 2.5) ), 3: ( x: ($spacer-x * 3), y: ($spacer-y * 3) ), 4: ( x: ($spacer-x * 4), y: ($spacer-y * 4) ), 5: ( x: ($spacer-x * 5), y: ($spacer-y * 5) ), 6: ( x: ($spacer-x * 6), y: ($spacer-y * 6) ) ); $border-width: 1px; $margin-bottom-default: 3.625rem; // Body // // Settings for the `` element. $body-bg: #fff; $body-color: $gray-darker; // Grid breakpoints // // Define the minimum and maximum dimensions at which your layout will change, // adapting to different screen sizes, for use in media queries. $grid-breakpoints: ( // Extra small screen / phone xs: 0, // Small screen / phone sm: 568px, // Medium screen / tablet-portrait md: 768px, // Large screen / small-desktop, tablet-landscape lg: 992px, // Extra large screen / desktop xl: 1200px, // HD screen hd: 1400px ); // Grid containers // // Define the maximum width of `.container` for different screen sizes. $container-max-widths: ( sm: 544px, md: 744px, lg: 940px, xl: 1140px, hd: 1368px ); // Grid columns // // Set the number of columns and specify the width of the gutters. $grid-columns: 12 !default; $grid-gutter-width-base: 1.75rem !default; $grid-gutter-widths: ( xs: $grid-gutter-width-base, sm: $grid-gutter-width-base, md: $grid-gutter-width-base, lg: $grid-gutter-width-base, xl: $grid-gutter-width-base, hd: $grid-gutter-width-base ) !default; // Typography // // Font, line-height, and color for body text, headings, and more. $font-family-primary: "Open Sans", Helvetica, Arial, sans-serif; $font-family-secondary: "Montserrat", Helvetica, Arial, sans-serif; $font-family-boogy: "Boogy Brut", Helvetica, Arial, sans-serif; $font-family-bureau: "Bureau35euro", Helvetica, Arial, sans-serif; $font-family-sans-serif: $font-family-primary; $font-family-serif: Georgia, "Times New Roman", Times, serif; $font-family-monospace: Menlo, Monaco, Consolas, "Courier New", monospace; $font-family-base: $font-family-sans-serif; // Pixel value used to responsively scale all typography. Applied to the `` element. $font-size-root: 16px; $font-size-base: .9375rem; $font-size-lg: 1.1875rem; $font-size-sm: .8125rem; $font-size-xs: .75rem; $font-size-h1: 2rem; $font-size-h2: 1.375rem; $font-size-h3: 1.125rem; $font-size-h4: 1rem; $font-size-h5: .875rem; $font-size-h6: .8125rem; $font-size-section-header: 2.1875rem; $font-weight-base: 400; $line-height-base: 1.46667; $headings-margin-bottom: 1.375rem; $headings-font-family: $font-family-secondary; $headings-font-weight: bold; $headings-line-height: 1.1666667; $headings-color: inherit; $lead-font-size: $font-size-base; $lead-font-weight: 700; $hr-border-color: $gray-lightest; $hr-border-style: solid; $hr-border-width: .25rem; $list-inline-padding: 1rem; $dt-font-weight: 600; // Links // // Style anchor elements. $link-color: $brand-primary; $link-decoration: none; $link-hover-color: darken($link-color, 10%); $link-hover-decoration: none; $link-transition: color .2s; // Components // // Define common padding and border radius sizes and more. $line-height-lg: (4 / 3); $line-height-sm: 1.5; $border-radius: 0; // Tables // // Customizes the `.table` component with basic values, each used across all table variations. $table-cell-padding: .75rem; $table-sm-cell-padding: .3rem; $table-bg: transparent; $table-bg-accent: #f9f9f9; $table-bg-hover: #f5f5f5; $table-bg-active: $table-bg-hover; $table-border-width: $border-width; $table-border-color: $gray-lighter; // Alerts // // Define alert colors, border radius, and padding. $alert-margin-bottom: $margin-bottom-default !default; $alert-padding-x: .75rem !default; $alert-padding-y: .75rem !default; $alert-border-radius: $border-radius !default; $alert-link-font-weight: bold !default; $alert-border-width: $border-width !default; $alert-success-bg: $state-success-bg !default; $alert-success-text: $state-success-text !default; $alert-success-border: $state-success-border !default; $alert-info-bg: $state-info-bg !default; $alert-info-text: $state-info-text !default; $alert-info-border: $state-info-border !default; $alert-error-bg: $state-error-bg !default; $alert-error-text: $state-error-text !default; $alert-error-border: $state-error-border !default; // Buttons // // For each of Bootstrap"s buttons, define text, background and border color. $btn-padding-x: 1.75rem !default; $btn-padding-y: .625rem !default; $btn-font-weight: bold !default; $btn-font-size: .8125rem !default; $btn-icon-font-size: 1em !default; $btn-line-height: 1.153846153846154 !default; $btn-border-width: .125rem; $btn-block-spacing-y: 1.5rem; $btn-transition: border .2s ease-in-out, background-color .2s ease-in-out, color .2s ease-in-out; $btn-error-color: #fff !default; $btn-error-bg: #d9534f !default; $btn-error-border: #d9534f !default; $btn-link-disabled-color: $gray-light !default; $btn-padding-x-sm: .4375rem !default; $btn-padding-y-sm: .3125rem !default; $btn-font-size-sm: $font-size-xs !default; $btn-line-height-sm: 1.1666667 !default; $btn-padding-x-lg: 3.5rem !default; $btn-padding-y-lg: 1.25rem !default; $btn-font-size-lg: $btn-font-size !default; $btn-line-height-lg: 1rem !default; $btn-circle-size: 3rem !default; $btn-circle-size-lg: 4rem !default; $btn-circle-size-sm: 2rem !default; // Allows for customizing button radius independently from global border radius $btn-border-radius: 0 !default; $btn-border-radius-lg: $btn-border-radius !default; $btn-border-radius-sm: $btn-border-radius !default; // Breadcrumbs $breadcrumb-padding-y: 0 !default; $breadcrumb-padding-x: 0 !default; $breadcrumb-item-padding: .5rem !default; $breadcrumb-bg: transparent !default; $breadcrumb-color: $gray !default; $breadcrumb-divider-color: $breadcrumb-color !default; $breadcrumb-active-color: $breadcrumb-color !default; $breadcrumb-divider: "\25B7" !default; // Forms $input-padding-x: 1rem; $input-padding-y: .375rem; $input-line-height: 1.23; $input-bg: $white; $input-bg-disabled: $gray-lighter; $input-font-size: 1rem; $input-color: $gray-darker; $input-border-color: $body-color; $input-border-width: 1px; $input-box-shadow: none; $input-border-radius: $border-radius; $input-border-focus: $black; $input-box-shadow-focus: rgba($input-border-focus, .5); $input-transition: border-color ease-in-out .2s, box-shadow ease-in-out .2s, background ease-in-out .2s; $input-color-placeholder: #b3b3b3; $input-padding-x-sm: .75rem; $input-padding-y-sm: .275rem; $input-padding-x-lg: .5625rem; $input-padding-y-lg: .5625rem; $input-height: (($font-size-base * $line-height-base) + ($input-padding-y * 2)); $input-height-lg: (($font-size-base * $line-height-base) + ($input-padding-y-lg * 2)); $input-height-sm: (($font-size-sm * $line-height-sm) + ($input-padding-y-sm * 2)); $form-group-margin-bottom: 1.75rem; $form-text-margin-top: 1rem; $form-check-margin-bottom: $form-group-margin-bottom; $form-check-input-gutter: 2.75rem; $form-check-input-margin-y: 0; $form-check-input-margin-x: 0; $form-check-inline-margin-x: 2rem; $form-feedback-invalid-color: $state-error-text; // Custom forms controls $custom-control-gutter: 2.5rem !default; $custom-control-spacer-x: 1rem !default; $custom-control-spacer-y: 1rem !default; $custom-control-indicator-size: 1rem !default; $custom-control-indicator-bg: $white !default; $custom-control-indicator-bg-size: 50% 50% !default; $custom-control-indicator-box-shadow: none !default; $custom-control-disabled-cursor: not-allowed !default; $custom-control-disabled-indicator-bg: #eee !default; $custom-control-disabled-description-color: #767676 !default; $custom-control-checked-indicator-color: #fff !default; $custom-control-checked-indicator-bg: #0074d9 !default; $custom-control-checked-indicator-box-shadow: none !default; $custom-control-focus-indicator-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem $brand-primary !default; $custom-control-active-indicator-color: #fff !default; $custom-control-active-indicator-bg: #84c6ff !default; $custom-control-active-indicator-box-shadow: none !default; $custom-checkbox-radius: $border-radius !default; $custom-checkbox-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='#{$custom-control-checked-indicator-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-checkbox-indeterminate-bg: #0074d9 !default; $custom-checkbox-indeterminate-indicator-color: $custom-control-checked-indicator-color !default; $custom-checkbox-indeterminate-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3E%3Cpath stroke='#{$custom-checkbox-indeterminate-indicator-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-checkbox-indeterminate-box-shadow: none !default; $custom-radio-radius: 50% !default; $custom-radio-checked-icon: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='#{$custom-control-checked-indicator-color}'/%3E%3C/svg%3E"), "#", "%23") !default; $custom-select-padding-x: .75rem !default; $custom-select-padding-y: .375rem !default; $custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator $custom-select-color: $input-color !default; $custom-select-line-height: 1.6153875 !default; $custom-select-disabled-color: $gray-light !default; $custom-select-bg: #fff !default; $custom-select-disabled-bg: $gray-lighter !default; $custom-select-bg-size: .75rem .375rem !default; // In pixels because image dimensions $custom-select-indicator-color: $brand-primary !default; $custom-select-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%2011.31%205.66%22%3E%0A%20%20%3Cpolygon%20fill%3D%22#{$custom-select-indicator-color}%22%20points%3D%220%200%205.66%205.66%2011.31%200%200%200%22/%3E%0A%3C/svg%3E%0A"), "#", "%23") !default; $custom-select-border-width: $input-border-width !default; $custom-select-border-color: $input-border-color !default; $custom-select-border-radius: $border-radius !default; $custom-select-focus-border-color: #51a7e8 !default; $custom-select-focus-box-shadow: inset 0 1px 2px rgba(0, 0, 0, .075), 0 0 5px rgba(81, 167, 232, .5) !default; $custom-select-sm-padding-y: .2rem !default; $custom-select-sm-font-size: 75% !default; $custom-file-height: 2.5rem !default; $custom-file-width: 14rem !default; $custom-file-focus-box-shadow: 0 0 0 .075rem #fff, 0 0 0 .2rem #0074d9 !default; $custom-file-padding-x: .5rem !default; $custom-file-padding-y: 1rem !default; $custom-file-line-height: 1.5 !default; $custom-file-color: #555 !default; $custom-file-bg: #fff !default; $custom-file-border-width: $border-width !default; $custom-file-border-color: #ddd !default; $custom-file-border-radius: $border-radius !default; $custom-file-box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05) !default; $custom-file-button-color: $custom-file-color !default; $custom-file-button-bg: #eee !default; // Header // // Settings for the "

" element $header-bg: $white; $header-box-shadow: none; $header-margin-bottom: .75rem; $header-padding-y: 1.5rem; $header-padding-x: 0; $header-logo-width: 10.9375rem; $header-logo-height: 6.75rem; // Main Navigation // // Default variables for styling main navigation and subnavigation $main-nav-color: $body-color; $main-nav-color-hover: mix($brand-primary, $white, 80%); $main-nav-submenu-bg: $header-bg; $main-nav-padding-y: 0; $main-nav-padding-x: 0; $main-nav-item-padding-x: .625rem; $main-nav-item-padding-y: 1.125rem; // Footer // // Settings for the "