`s, which have `min-width: 0;` by default.
+ // So we reset that to ensure fieldsets behave more like a standard block element.
+ // See https://github.com/twbs/bootstrap/issues/12359
+ // and https://html.spec.whatwg.org/multipage/#the-fieldset-and-legend-elements
+ min-width: 0;
+ // Reset the default outline behavior of fieldsets so they don't affect page layout.
+ padding: 0;
+ margin: 0;
+ border: 0;
+}
+
+// 1. Correct the text wrapping in Edge and IE.
+// 2. Correct the color inheritance from `fieldset` elements in IE.
+legend {
+ display: block;
+ width: 100%;
+ max-width: 100%; // 1
+ padding: 0;
+ margin-bottom: .5rem;
+ font-size: 1.5rem;
+ line-height: inherit;
+ color: inherit; // 2
+ white-space: normal; // 1
+}
+
+progress {
+ vertical-align: baseline; // Add the correct vertical alignment in Chrome, Firefox, and Opera.
+}
+
+// Correct the cursor style of increment and decrement buttons in Chrome.
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+ height: auto;
+}
+
+[type="search"] {
+ // This overrides the extra rounded corners on search inputs in iOS so that our
+ // `.form-control` class can properly style them. Note that this cannot simply
+ // be added to `.form-control` as it's not specific enough. For details, see
+ // https://github.com/twbs/bootstrap/issues/11586.
+ outline-offset: -2px; // 2. Correct the outline style in Safari.
+ -webkit-appearance: none;
+}
+
+//
+// Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
+//
+
+[type="search"]::-webkit-search-cancel-button,
+[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+//
+// 1. Correct the inability to style clickable types in iOS and Safari.
+// 2. Change font properties to `inherit` in Safari.
+//
+
+::-webkit-file-upload-button {
+ font: inherit; // 2
+ -webkit-appearance: button; // 1
+}
+
+//
+// Correct element displays
+//
+
+output {
+ display: inline-block;
+}
+
+summary {
+ display: list-item; // Add the correct display in all browsers
+ cursor: pointer;
+}
+
+template {
+ display: none; // Add the correct display in IE
+}
+
+// Always hide an element with the `hidden` HTML attribute (from PureCSS).
+// Needed for proper display in IE 10-.
+[hidden] {
+ display: none !important;
+}
diff --git a/static/scss/bootstrap/_root.scss b/static/scss/bootstrap/_root.scss
new file mode 100644
index 0000000..ad550df
--- /dev/null
+++ b/static/scss/bootstrap/_root.scss
@@ -0,0 +1,19 @@
+:root {
+ // Custom variable values only support SassScript inside `#{}`.
+ @each $color, $value in $colors {
+ --#{$color}: #{$value};
+ }
+
+ @each $color, $value in $theme-colors {
+ --#{$color}: #{$value};
+ }
+
+ @each $bp, $value in $grid-breakpoints {
+ --breakpoint-#{$bp}: #{$value};
+ }
+
+ // Use `inspect` for lists so that quoted items keep the quotes.
+ // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
+ --font-family-sans-serif: #{inspect($font-family-sans-serif)};
+ --font-family-monospace: #{inspect($font-family-monospace)};
+}
diff --git a/static/scss/bootstrap/_tables.scss b/static/scss/bootstrap/_tables.scss
new file mode 100644
index 0000000..0e3b119
--- /dev/null
+++ b/static/scss/bootstrap/_tables.scss
@@ -0,0 +1,180 @@
+//
+// Basic Bootstrap table
+//
+
+.table {
+ width: 100%;
+ max-width: 100%;
+ margin-bottom: $spacer;
+ background-color: $table-bg; // Reset for nesting within parents with `background-color`.
+
+ th,
+ td {
+ padding: $table-cell-padding;
+ vertical-align: top;
+ border-top: $table-border-width solid $table-border-color;
+ }
+
+ thead th {
+ vertical-align: bottom;
+ border-bottom: (2 * $table-border-width) solid $table-border-color;
+ }
+
+ tbody + tbody {
+ border-top: (2 * $table-border-width) solid $table-border-color;
+ }
+
+ .table {
+ background-color: $body-bg;
+ }
+}
+
+
+//
+// Condensed table w/ half padding
+//
+
+.table-sm {
+ th,
+ td {
+ padding: $table-cell-padding-sm;
+ }
+}
+
+
+// Bordered version
+//
+// Add borders all around the table and between all the columns.
+
+.table-bordered {
+ border: $table-border-width solid $table-border-color;
+
+ th,
+ td {
+ border: $table-border-width solid $table-border-color;
+ }
+
+ thead {
+ th,
+ td {
+ border-bottom-width: (2 * $table-border-width);
+ }
+ }
+}
+
+
+// Zebra-striping
+//
+// Default zebra-stripe styles (alternating gray and transparent backgrounds)
+
+.table-striped {
+ tbody tr:nth-of-type(odd) {
+ background-color: $table-accent-bg;
+ }
+}
+
+
+// Hover effect
+//
+// Placed here since it has to come after the potential zebra striping
+
+.table-hover {
+ tbody tr {
+ @include hover {
+ background-color: $table-hover-bg;
+ }
+ }
+}
+
+
+// Table backgrounds
+//
+// Exact selectors below required to override `.table-striped` and prevent
+// inheritance to nested tables.
+
+@each $color, $value in $theme-colors {
+ @include table-row-variant($color, theme-color-level($color, -9));
+}
+
+@include table-row-variant(active, $table-active-bg);
+
+
+// Dark styles
+//
+// Same table markup, but inverted color scheme: dark background and light text.
+
+// stylelint-disable-next-line no-duplicate-selectors
+.table {
+ .thead-dark {
+ th {
+ color: $table-dark-color;
+ background-color: $table-dark-bg;
+ border-color: $table-dark-border-color;
+ }
+ }
+
+ .thead-light {
+ th {
+ color: $table-head-color;
+ background-color: $table-head-bg;
+ border-color: $table-border-color;
+ }
+ }
+}
+
+.table-dark {
+ color: $table-dark-color;
+ background-color: $table-dark-bg;
+
+ th,
+ td,
+ thead th {
+ border-color: $table-dark-border-color;
+ }
+
+ &.table-bordered {
+ border: 0;
+ }
+
+ &.table-striped {
+ tbody tr:nth-of-type(odd) {
+ background-color: $table-dark-accent-bg;
+ }
+ }
+
+ &.table-hover {
+ tbody tr {
+ @include hover {
+ background-color: $table-dark-hover-bg;
+ }
+ }
+ }
+}
+
+
+// Responsive tables
+//
+// Generate series of `.table-responsive-*` classes for configuring the screen
+// size of where your table will overflow.
+
+.table-responsive {
+ @each $breakpoint in map-keys($grid-breakpoints) {
+ $next: breakpoint-next($breakpoint, $grid-breakpoints);
+ $infix: breakpoint-infix($next, $grid-breakpoints);
+
+ &#{$infix} {
+ @include media-breakpoint-down($breakpoint) {
+ display: block;
+ width: 100%;
+ overflow-x: auto;
+ -webkit-overflow-scrolling: touch;
+ -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
+
+ // Prevent double border on horizontal scroll due to use of `display: block;`
+ > .table-bordered {
+ border: 0;
+ }
+ }
+ }
+ }
+}
diff --git a/static/scss/bootstrap/_tooltip.scss b/static/scss/bootstrap/_tooltip.scss
new file mode 100644
index 0000000..1286ebf
--- /dev/null
+++ b/static/scss/bootstrap/_tooltip.scss
@@ -0,0 +1,115 @@
+// Base class
+.tooltip {
+ position: absolute;
+ z-index: $zindex-tooltip;
+ display: block;
+ margin: $tooltip-margin;
+ // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+ // So reset our font and text properties to avoid inheriting weird values.
+ @include reset-text();
+ font-size: $tooltip-font-size;
+ // Allow breaking very long words so they don't overflow the tooltip's bounds
+ word-wrap: break-word;
+ opacity: 0;
+
+ &.show { opacity: $tooltip-opacity; }
+
+ .arrow {
+ position: absolute;
+ display: block;
+ width: $tooltip-arrow-width;
+ height: $tooltip-arrow-height;
+
+ &::before {
+ position: absolute;
+ content: "";
+ border-color: transparent;
+ border-style: solid;
+ }
+ }
+}
+
+.bs-tooltip-top {
+ padding: $tooltip-arrow-height 0;
+
+ .arrow {
+ bottom: 0;
+
+ &::before {
+ top: 0;
+ border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+ border-top-color: $tooltip-arrow-color;
+ }
+ }
+}
+
+.bs-tooltip-right {
+ padding: 0 $tooltip-arrow-height;
+
+ .arrow {
+ left: 0;
+ width: $tooltip-arrow-height;
+ height: $tooltip-arrow-width;
+
+ &::before {
+ right: 0;
+ border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+ border-right-color: $tooltip-arrow-color;
+ }
+ }
+}
+
+.bs-tooltip-bottom {
+ padding: $tooltip-arrow-height 0;
+
+ .arrow {
+ top: 0;
+
+ &::before {
+ bottom: 0;
+ border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+ border-bottom-color: $tooltip-arrow-color;
+ }
+ }
+}
+
+.bs-tooltip-left {
+ padding: 0 $tooltip-arrow-height;
+
+ .arrow {
+ right: 0;
+ width: $tooltip-arrow-height;
+ height: $tooltip-arrow-width;
+
+ &::before {
+ left: 0;
+ border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+ border-left-color: $tooltip-arrow-color;
+ }
+ }
+}
+
+.bs-tooltip-auto {
+ &[x-placement^="top"] {
+ @extend .bs-tooltip-top;
+ }
+ &[x-placement^="right"] {
+ @extend .bs-tooltip-right;
+ }
+ &[x-placement^="bottom"] {
+ @extend .bs-tooltip-bottom;
+ }
+ &[x-placement^="left"] {
+ @extend .bs-tooltip-left;
+ }
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+ max-width: $tooltip-max-width;
+ padding: $tooltip-padding-y $tooltip-padding-x;
+ color: $tooltip-color;
+ text-align: center;
+ background-color: $tooltip-bg;
+ @include border-radius($tooltip-border-radius);
+}
diff --git a/static/scss/bootstrap/_transitions.scss b/static/scss/bootstrap/_transitions.scss
new file mode 100644
index 0000000..df5744b
--- /dev/null
+++ b/static/scss/bootstrap/_transitions.scss
@@ -0,0 +1,36 @@
+// stylelint-disable selector-no-qualifying-type
+
+.fade {
+ opacity: 0;
+ @include transition($transition-fade);
+
+ &.show {
+ opacity: 1;
+ }
+}
+
+.collapse {
+ display: none;
+ &.show {
+ display: block;
+ }
+}
+
+tr {
+ &.collapse.show {
+ display: table-row;
+ }
+}
+
+tbody {
+ &.collapse.show {
+ display: table-row-group;
+ }
+}
+
+.collapsing {
+ position: relative;
+ height: 0;
+ overflow: hidden;
+ @include transition($transition-collapse);
+}
diff --git a/static/scss/bootstrap/_type.scss b/static/scss/bootstrap/_type.scss
new file mode 100644
index 0000000..57d610f
--- /dev/null
+++ b/static/scss/bootstrap/_type.scss
@@ -0,0 +1,125 @@
+// stylelint-disable declaration-no-important, selector-list-comma-newline-after
+
+//
+// Headings
+//
+
+h1, h2, h3, h4, h5, h6,
+.h1, .h2, .h3, .h4, .h5, .h6 {
+ margin-bottom: $headings-margin-bottom;
+ font-family: $headings-font-family;
+ font-weight: $headings-font-weight;
+ line-height: $headings-line-height;
+ color: $headings-color;
+}
+
+h1, .h1 { font-size: $h1-font-size; }
+h2, .h2 { font-size: $h2-font-size; }
+h3, .h3 { font-size: $h3-font-size; }
+h4, .h4 { font-size: $h4-font-size; }
+h5, .h5 { font-size: $h5-font-size; }
+h6, .h6 { font-size: $h6-font-size; }
+
+.lead {
+ font-size: $lead-font-size;
+ font-weight: $lead-font-weight;
+}
+
+// Type display classes
+.display-1 {
+ font-size: $display1-size;
+ font-weight: $display1-weight;
+ line-height: $display-line-height;
+}
+.display-2 {
+ font-size: $display2-size;
+ font-weight: $display2-weight;
+ line-height: $display-line-height;
+}
+.display-3 {
+ font-size: $display3-size;
+ font-weight: $display3-weight;
+ line-height: $display-line-height;
+}
+.display-4 {
+ font-size: $display4-size;
+ font-weight: $display4-weight;
+ line-height: $display-line-height;
+}
+
+
+//
+// Horizontal rules
+//
+
+hr {
+ margin-top: $hr-margin-y;
+ margin-bottom: $hr-margin-y;
+ border: 0;
+ border-top: $hr-border-width solid $hr-border-color;
+}
+
+
+//
+// Emphasis
+//
+
+small,
+.small {
+ font-size: $small-font-size;
+ font-weight: $font-weight-normal;
+}
+
+mark,
+.mark {
+ padding: $mark-padding;
+ background-color: $mark-bg;
+}
+
+
+//
+// Lists
+//
+
+.list-unstyled {
+ @include list-unstyled;
+}
+
+// Inline turns list items into inline-block
+.list-inline {
+ @include list-unstyled;
+}
+.list-inline-item {
+ display: inline-block;
+
+ &:not(:last-child) {
+ margin-right: $list-inline-padding;
+ }
+}
+
+
+//
+// Misc
+//
+
+// Builds on `abbr`
+.initialism {
+ font-size: 90%;
+ text-transform: uppercase;
+}
+
+// Blockquotes
+.blockquote {
+ margin-bottom: $spacer;
+ font-size: $blockquote-font-size;
+}
+
+.blockquote-footer {
+ display: block;
+ font-size: 80%; // back to default font-size
+ color: $blockquote-small-color;
+
+ &::before {
+ content: "\2014 \00A0"; // em dash, nbsp
+ }
+}
diff --git a/static/scss/bootstrap/_utilities.scss b/static/scss/bootstrap/_utilities.scss
new file mode 100644
index 0000000..7b2a1eb
--- /dev/null
+++ b/static/scss/bootstrap/_utilities.scss
@@ -0,0 +1,14 @@
+@import "utilities/align";
+@import "utilities/background";
+@import "utilities/borders";
+@import "utilities/clearfix";
+@import "utilities/display";
+@import "utilities/embed";
+@import "utilities/flex";
+@import "utilities/float";
+@import "utilities/position";
+@import "utilities/screenreaders";
+@import "utilities/sizing";
+@import "utilities/spacing";
+@import "utilities/text";
+@import "utilities/visibility";
diff --git a/static/scss/bootstrap/_variables.scss b/static/scss/bootstrap/_variables.scss
new file mode 100644
index 0000000..a3e7fcf
--- /dev/null
+++ b/static/scss/bootstrap/_variables.scss
@@ -0,0 +1,902 @@
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+
+//
+// Color system
+//
+
+// stylelint-disable
+$white: #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black: #000 !default;
+
+$grays: () !default;
+$grays: map-merge((
+ "100": $gray-100,
+ "200": $gray-200,
+ "300": $gray-300,
+ "400": $gray-400,
+ "500": $gray-500,
+ "600": $gray-600,
+ "700": $gray-700,
+ "800": $gray-800,
+ "900": $gray-900
+), $grays);
+
+$blue: #007bff !default;
+$indigo: #6610f2 !default;
+$purple: #6f42c1 !default;
+$pink: #e83e8c !default;
+$red: #dc3545 !default;
+$orange: #fd7e14 !default;
+$yellow: #ffc107 !default;
+$green: #28a745 !default;
+$teal: #20c997 !default;
+$cyan: #17a2b8 !default;
+
+$colors: () !default;
+$colors: map-merge((
+ "blue": $blue,
+ "indigo": $indigo,
+ "purple": $purple,
+ "pink": $pink,
+ "red": $red,
+ "orange": $orange,
+ "yellow": $yellow,
+ "green": $green,
+ "teal": $teal,
+ "cyan": $cyan,
+ "white": $white,
+ "gray": $gray-600,
+ "gray-dark": $gray-800
+), $colors);
+
+$primary: $blue !default;
+$secondary: $gray-600 !default;
+$success: $green !default;
+$info: $cyan !default;
+$warning: $yellow !default;
+$danger: $red !default;
+$light: $gray-100 !default;
+$dark: $gray-800 !default;
+
+$theme-colors: () !default;
+$theme-colors: map-merge((
+ "primary": $primary,
+ "secondary": $secondary,
+ "success": $success,
+ "info": $info,
+ "warning": $warning,
+ "danger": $danger,
+ "light": $light,
+ "dark": $dark
+), $theme-colors);
+// stylelint-enable
+
+// Set a specific jump point for requesting color jumps
+$theme-color-interval: 8% !default;
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold: 150 !default;
+
+// Customize the light and dark text colors for use in our YIQ color contrast function.
+$yiq-text-dark: $gray-900 !default;
+$yiq-text-light: $white !default;
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-caret: true !default;
+$enable-rounded: true !default;
+$enable-shadows: false !default;
+$enable-gradients: false !default;
+$enable-transitions: true !default;
+$enable-hover-media-query: false !default; // Deprecated, no longer affects any compiled CSS
+$enable-grid-classes: true !default;
+$enable-print-styles: true !default;
+
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+// stylelint-disable
+$spacer: 1rem !default;
+$spacers: () !default;
+$spacers: map-merge((
+ 0: 0,
+ 1: ($spacer * .25),
+ 2: ($spacer * .5),
+ 3: $spacer,
+ 4: ($spacer * 1.5),
+ 5: ($spacer * 3)
+), $spacers);
+
+// This variable affects the `.h-*` and `.w-*` classes.
+$sizes: () !default;
+$sizes: map-merge((
+ 25: 25%,
+ 50: 50%,
+ 75: 75%,
+ 100: 100%
+), $sizes);
+// stylelint-enable
+
+// Body
+//
+// Settings for the `` element.
+
+$body-bg: $white !default;
+$body-color: $gray-900 !default;
+
+// Links
+//
+// Style anchor elements.
+
+$link-color: theme-color("primary") !default;
+$link-decoration: none !default;
+$link-hover-color: darken($link-color, 15%) !default;
+$link-hover-decoration: underline !default;
+
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom: 1rem !default;
+
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+$grid-breakpoints: (
+ xs: 0,
+ sm: 576px,
+ md: 768px,
+ lg: 992px,
+ xl: 1200px
+) !default;
+
+@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+@include _assert-starts-at-zero($grid-breakpoints);
+
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+$container-max-widths: (
+ sm: 540px,
+ md: 720px,
+ lg: 960px,
+ xl: 1140px
+) !default;
+
+@include _assert-ascending($container-max-widths, "$container-max-widths");
+
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns: 12 !default;
+$grid-gutter-width: 30px !default;
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$line-height-lg: 1.5 !default;
+$line-height-sm: 1.5 !default;
+
+$border-width: 1px !default;
+$border-color: $gray-300 !default;
+
+$border-radius: .25rem !default;
+$border-radius-lg: .3rem !default;
+$border-radius-sm: .2rem !default;
+
+$component-active-color: $white !default;
+$component-active-bg: theme-color("primary") !default;
+
+$caret-width: .3em !default;
+
+$transition-base: all .2s ease-in-out !default;
+$transition-fade: opacity .15s linear !default;
+$transition-collapse: height .35s ease !default;
+
+
+// Fonts
+//
+// Font, line-height, and color for body text, headings, and more.
+
+// stylelint-disable value-keyword-case
+$font-family-sans-serif: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-base: $font-family-sans-serif !default;
+// stylelint-enable value-keyword-case
+
+$font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
+$font-size-lg: ($font-size-base * 1.25) !default;
+$font-size-sm: ($font-size-base * .875) !default;
+
+$font-weight-light: 300 !default;
+$font-weight-normal: 400 !default;
+$font-weight-bold: 700 !default;
+
+$font-weight-base: $font-weight-normal !default;
+$line-height-base: 1.5 !default;
+
+$h1-font-size: $font-size-base * 2.5 !default;
+$h2-font-size: $font-size-base * 2 !default;
+$h3-font-size: $font-size-base * 1.75 !default;
+$h4-font-size: $font-size-base * 1.5 !default;
+$h5-font-size: $font-size-base * 1.25 !default;
+$h6-font-size: $font-size-base !default;
+
+$headings-margin-bottom: ($spacer / 2) !default;
+$headings-font-family: inherit !default;
+$headings-font-weight: 500 !default;
+$headings-line-height: 1.2 !default;
+$headings-color: inherit !default;
+
+$display1-size: 6rem !default;
+$display2-size: 5.5rem !default;
+$display3-size: 4.5rem !default;
+$display4-size: 3.5rem !default;
+
+$display1-weight: 300 !default;
+$display2-weight: 300 !default;
+$display3-weight: 300 !default;
+$display4-weight: 300 !default;
+$display-line-height: $headings-line-height !default;
+
+$lead-font-size: ($font-size-base * 1.25) !default;
+$lead-font-weight: 300 !default;
+
+$small-font-size: 80% !default;
+
+$text-muted: $gray-600 !default;
+
+$blockquote-small-color: $gray-600 !default;
+$blockquote-font-size: ($font-size-base * 1.25) !default;
+
+$hr-border-color: rgba($black, .1) !default;
+$hr-border-width: $border-width !default;
+
+$mark-padding: .2em !default;
+
+$dt-font-weight: $font-weight-bold !default;
+
+$kbd-box-shadow: inset 0 -.1rem 0 rgba($black, .25) !default;
+$nested-kbd-font-weight: $font-weight-bold !default;
+
+$list-inline-padding: .5rem !default;
+
+$mark-bg: #fcf8e3 !default;
+
+$hr-margin-y: $spacer !default;
+
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-cell-padding: .75rem !default;
+$table-cell-padding-sm: .3rem !default;
+
+$table-bg: transparent !default;
+$table-accent-bg: rgba($black, .05) !default;
+$table-hover-bg: rgba($black, .075) !default;
+$table-active-bg: $table-hover-bg !default;
+
+$table-border-width: $border-width !default;
+$table-border-color: $gray-300 !default;
+
+$table-head-bg: $gray-200 !default;
+$table-head-color: $gray-700 !default;
+
+$table-dark-bg: $gray-900 !default;
+$table-dark-accent-bg: rgba($white, .05) !default;
+$table-dark-hover-bg: rgba($white, .075) !default;
+$table-dark-border-color: lighten($gray-900, 7.5%) !default;
+$table-dark-color: $body-bg !default;
+
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+$input-btn-padding-y: .375rem !default;
+$input-btn-padding-x: .75rem !default;
+$input-btn-line-height: $line-height-base !default;
+
+$input-btn-focus-width: .2rem !default;
+$input-btn-focus-color: rgba($component-active-bg, .25) !default;
+$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+
+$input-btn-padding-y-sm: .25rem !default;
+$input-btn-padding-x-sm: .5rem !default;
+$input-btn-line-height-sm: $line-height-sm !default;
+
+$input-btn-padding-y-lg: .5rem !default;
+$input-btn-padding-x-lg: 1rem !default;
+$input-btn-line-height-lg: $line-height-lg !default;
+
+$input-btn-border-width: $border-width !default;
+
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+$btn-padding-y: $input-btn-padding-y !default;
+$btn-padding-x: $input-btn-padding-x !default;
+$btn-line-height: $input-btn-line-height !default;
+
+$btn-padding-y-sm: $input-btn-padding-y-sm !default;
+$btn-padding-x-sm: $input-btn-padding-x-sm !default;
+$btn-line-height-sm: $input-btn-line-height-sm !default;
+
+$btn-padding-y-lg: $input-btn-padding-y-lg !default;
+$btn-padding-x-lg: $input-btn-padding-x-lg !default;
+$btn-line-height-lg: $input-btn-line-height-lg !default;
+
+$btn-border-width: $input-btn-border-width !default;
+
+$btn-font-weight: $font-weight-normal !default;
+$btn-box-shadow: inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
+$btn-focus-width: $input-btn-focus-width !default;
+$btn-focus-box-shadow: $input-btn-focus-box-shadow !default;
+$btn-disabled-opacity: .65 !default;
+$btn-active-box-shadow: inset 0 3px 5px rgba($black, .125) !default;
+
+$btn-link-disabled-color: $gray-600 !default;
+
+$btn-block-spacing-y: .5rem !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius: $border-radius !default;
+$btn-border-radius-lg: $border-radius-lg !default;
+$btn-border-radius-sm: $border-radius-sm !default;
+
+$btn-transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+
+// Forms
+
+$input-padding-y: $input-btn-padding-y !default;
+$input-padding-x: $input-btn-padding-x !default;
+$input-line-height: $input-btn-line-height !default;
+
+$input-padding-y-sm: $input-btn-padding-y-sm !default;
+$input-padding-x-sm: $input-btn-padding-x-sm !default;
+$input-line-height-sm: $input-btn-line-height-sm !default;
+
+$input-padding-y-lg: $input-btn-padding-y-lg !default;
+$input-padding-x-lg: $input-btn-padding-x-lg !default;
+$input-line-height-lg: $input-btn-line-height-lg !default;
+
+$input-bg: $white !default;
+$input-disabled-bg: $gray-200 !default;
+
+$input-color: $gray-700 !default;
+$input-border-color: $gray-400 !default;
+$input-border-width: $input-btn-border-width !default;
+$input-box-shadow: inset 0 1px 1px rgba($black, .075) !default;
+
+$input-border-radius: $border-radius !default;
+$input-border-radius-lg: $border-radius-lg !default;
+$input-border-radius-sm: $border-radius-sm !default;
+
+$input-focus-bg: $input-bg !default;
+$input-focus-border-color: lighten($component-active-bg, 25%) !default;
+$input-focus-color: $input-color !default;
+$input-focus-width: $input-btn-focus-width !default;
+$input-focus-box-shadow: $input-btn-focus-box-shadow !default;
+
+$input-placeholder-color: $gray-600 !default;
+
+$input-height-border: $input-border-width * 2 !default;
+
+$input-height-inner: ($font-size-base * $input-btn-line-height) + ($input-btn-padding-y * 2) !default;
+$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
+
+$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) + ($input-btn-padding-y-sm * 2) !default;
+$input-height-sm: calc(#{$input-height-inner-sm} + #{$input-height-border}) !default;
+
+$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) + ($input-btn-padding-y-lg * 2) !default;
+$input-height-lg: calc(#{$input-height-inner-lg} + #{$input-height-border}) !default;
+
+$input-transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$form-text-margin-top: .25rem !default;
+
+$form-check-input-gutter: 1.25rem !default;
+$form-check-input-margin-y: .3rem !default;
+$form-check-input-margin-x: .25rem !default;
+
+$form-check-inline-margin-x: .75rem !default;
+$form-check-inline-input-margin-x: .3125rem !default;
+
+$form-group-margin-bottom: 1rem !default;
+
+$input-group-addon-color: $input-color !default;
+$input-group-addon-bg: $gray-200 !default;
+$input-group-addon-border-color: $input-border-color !default;
+
+$custom-control-gutter: 1.5rem !default;
+$custom-control-spacer-x: 1rem !default;
+
+$custom-control-indicator-size: 1rem !default;
+$custom-control-indicator-bg: $gray-300 !default;
+$custom-control-indicator-bg-size: 50% 50% !default;
+$custom-control-indicator-box-shadow: inset 0 .25rem .25rem rgba($black, .1) !default;
+
+$custom-control-indicator-disabled-bg: $gray-200 !default;
+$custom-control-label-disabled-color: $gray-600 !default;
+
+$custom-control-indicator-checked-color: $component-active-color !default;
+$custom-control-indicator-checked-bg: $component-active-bg !default;
+$custom-control-indicator-checked-disabled-bg: rgba(theme-color("primary"), .5) !default;
+$custom-control-indicator-checked-box-shadow: none !default;
+
+$custom-control-indicator-focus-box-shadow: 0 0 0 1px $body-bg, $input-btn-focus-box-shadow !default;
+
+$custom-control-indicator-active-color: $component-active-color !default;
+$custom-control-indicator-active-bg: lighten($component-active-bg, 35%) !default;
+$custom-control-indicator-active-box-shadow: none !default;
+
+$custom-checkbox-indicator-border-radius: $border-radius !default;
+$custom-checkbox-indicator-icon-checked: 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-indicator-checked-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-indicator-indeterminate-bg: $component-active-bg !default;
+$custom-checkbox-indicator-indeterminate-color: $custom-control-indicator-checked-color !default;
+$custom-checkbox-indicator-icon-indeterminate: 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-indicator-indeterminate-color}' d='M0 2h4'/%3E%3C/svg%3E"), "#", "%23") !default;
+$custom-checkbox-indicator-indeterminate-box-shadow: none !default;
+
+$custom-radio-indicator-border-radius: 50% !default;
+$custom-radio-indicator-icon-checked: 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-indicator-checked-color}'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+$custom-select-padding-y: .375rem !default;
+$custom-select-padding-x: .75rem !default;
+$custom-select-height: $input-height !default;
+$custom-select-indicator-padding: 1rem !default; // Extra padding to account for the presence of the background-image based indicator
+$custom-select-line-height: $input-btn-line-height !default;
+$custom-select-color: $input-color !default;
+$custom-select-disabled-color: $gray-600 !default;
+$custom-select-bg: $white !default;
+$custom-select-disabled-bg: $gray-200 !default;
+$custom-select-bg-size: 8px 10px !default; // In pixels because image dimensions
+$custom-select-indicator-color: $gray-800 !default;
+$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;
+$custom-select-border-width: $input-btn-border-width !default;
+$custom-select-border-color: $input-border-color !default;
+$custom-select-border-radius: $border-radius !default;
+
+$custom-select-focus-border-color: $input-focus-border-color !default;
+$custom-select-focus-box-shadow: inset 0 1px 2px rgba($black, .075), 0 0 5px rgba($custom-select-focus-border-color, .5) !default;
+
+$custom-select-font-size-sm: 75% !default;
+$custom-select-height-sm: $input-height-sm !default;
+
+$custom-select-font-size-lg: 125% !default;
+$custom-select-height-lg: $input-height-lg !default;
+
+$custom-file-height: $input-height !default;
+$custom-file-focus-border-color: $input-focus-border-color !default;
+$custom-file-focus-box-shadow: $input-btn-focus-box-shadow !default;
+
+$custom-file-padding-y: $input-btn-padding-y !default;
+$custom-file-padding-x: $input-btn-padding-x !default;
+$custom-file-line-height: $input-btn-line-height !default;
+$custom-file-color: $input-color !default;
+$custom-file-bg: $input-bg !default;
+$custom-file-border-width: $input-btn-border-width !default;
+$custom-file-border-color: $input-border-color !default;
+$custom-file-border-radius: $input-border-radius !default;
+$custom-file-box-shadow: $input-box-shadow !default;
+$custom-file-button-color: $custom-file-color !default;
+$custom-file-button-bg: $input-group-addon-bg !default;
+$custom-file-text: (
+ en: "Browse"
+) !default;
+
+
+// Form validation
+$form-feedback-margin-top: $form-text-margin-top !default;
+$form-feedback-font-size: $small-font-size !default;
+$form-feedback-valid-color: theme-color("success") !default;
+$form-feedback-invalid-color: theme-color("danger") !default;
+
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+$dropdown-min-width: 10rem !default;
+$dropdown-padding-y: .5rem !default;
+$dropdown-spacer: .125rem !default;
+$dropdown-bg: $white !default;
+$dropdown-border-color: rgba($black, .15) !default;
+$dropdown-border-radius: $border-radius !default;
+$dropdown-border-width: $border-width !default;
+$dropdown-divider-bg: $gray-200 !default;
+$dropdown-box-shadow: 0 .5rem 1rem rgba($black, .175) !default;
+
+$dropdown-link-color: $gray-900 !default;
+$dropdown-link-hover-color: darken($gray-900, 5%) !default;
+$dropdown-link-hover-bg: $gray-100 !default;
+
+$dropdown-link-active-color: $component-active-color !default;
+$dropdown-link-active-bg: $component-active-bg !default;
+
+$dropdown-link-disabled-color: $gray-600 !default;
+
+$dropdown-item-padding-y: .25rem !default;
+$dropdown-item-padding-x: 1.5rem !default;
+
+$dropdown-header-color: $gray-600 !default;
+
+
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+$zindex-dropdown: 1000 !default;
+$zindex-sticky: 1020 !default;
+$zindex-fixed: 1030 !default;
+$zindex-modal-backdrop: 1040 !default;
+$zindex-modal: 1050 !default;
+$zindex-popover: 1060 !default;
+$zindex-tooltip: 1070 !default;
+
+// Navs
+
+$nav-link-padding-y: .5rem !default;
+$nav-link-padding-x: 1rem !default;
+$nav-link-disabled-color: $gray-600 !default;
+
+$nav-tabs-border-color: $gray-300 !default;
+$nav-tabs-border-width: $border-width !default;
+$nav-tabs-border-radius: $border-radius !default;
+$nav-tabs-link-hover-border-color: $gray-200 $gray-200 $nav-tabs-border-color !default;
+$nav-tabs-link-active-color: $gray-700 !default;
+$nav-tabs-link-active-bg: $body-bg !default;
+$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
+
+$nav-pills-padding-y: 1rem;
+$nav-pills-padding-x: 1rem;
+
+$nav-pills-border-width: 1px;
+$nav-pills-border-color: $gray-300;
+$nav-pills-border-radius: $border-radius !default;
+
+$nav-pills-link-color: $gray-600;
+$nav-pills-link-hover-color: $gray-800;
+$nav-pills-link-active-color: $primary;
+$nav-pills-link-active-bg: transparent;
+
+// Navbar
+
+$navbar-padding-y: ($spacer / 2) !default;
+$navbar-padding-x: $spacer !default;
+
+$navbar-nav-link-padding-x: .5rem !default;
+
+$navbar-brand-font-size: $font-size-lg !default;
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+$nav-link-height: ($font-size-base * $line-height-base + $nav-link-padding-y * 2) !default;
+$navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
+
+$navbar-toggler-padding-y: .25rem !default;
+$navbar-toggler-padding-x: .75rem !default;
+$navbar-toggler-font-size: $font-size-lg !default;
+$navbar-toggler-border-radius: $btn-border-radius !default;
+
+$navbar-dark-color: rgba($white, .5) !default;
+$navbar-dark-hover-color: rgba($white, .75) !default;
+$navbar-dark-active-color: $white !default;
+$navbar-dark-disabled-color: rgba($white, .25) !default;
+$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;
+$navbar-dark-toggler-border-color: rgba($white, .1) !default;
+
+$navbar-light-color: rgba($black, .5) !default;
+$navbar-light-hover-color: rgba($black, .7) !default;
+$navbar-light-active-color: rgba($black, .9) !default;
+$navbar-light-disabled-color: rgba($black, .3) !default;
+$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;
+$navbar-light-toggler-border-color: rgba($black, .1) !default;
+
+// Pagination
+
+$pagination-padding-y: .5rem !default;
+$pagination-padding-x: .75rem !default;
+$pagination-padding-y-sm: .25rem !default;
+$pagination-padding-x-sm: .5rem !default;
+$pagination-padding-y-lg: .75rem !default;
+$pagination-padding-x-lg: 1.5rem !default;
+$pagination-line-height: 1.25 !default;
+
+$pagination-color: $link-color !default;
+$pagination-bg: $white !default;
+$pagination-border-width: $border-width !default;
+$pagination-border-color: $gray-300 !default;
+
+$pagination-focus-box-shadow: $input-btn-focus-box-shadow !default;
+
+$pagination-hover-color: $link-hover-color !default;
+$pagination-hover-bg: $gray-200 !default;
+$pagination-hover-border-color: $gray-300 !default;
+
+$pagination-active-color: $component-active-color !default;
+$pagination-active-bg: $component-active-bg !default;
+$pagination-active-border-color: $pagination-active-bg !default;
+
+$pagination-disabled-color: $gray-600 !default;
+$pagination-disabled-bg: $white !default;
+$pagination-disabled-border-color: $gray-300 !default;
+
+
+// Jumbotron
+
+$jumbotron-padding: 2rem !default;
+$jumbotron-bg: $gray-200 !default;
+
+
+// Cards
+
+$card-spacer-y: .75rem !default;
+$card-spacer-x: 1.25rem !default;
+$card-border-width: $border-width !default;
+$card-border-radius: $border-radius !default;
+$card-border-color: rgba($black, .05) !default;
+$card-inner-border-radius: calc(#{$card-border-radius} - #{$card-border-width}) !default;
+$card-cap-bg: rgba($black, .03) !default;
+$card-bg: $white !default;
+
+$card-img-overlay-padding: 1.25rem !default;
+
+$card-group-margin: ($grid-gutter-width / 2) !default;
+$card-deck-margin: $card-group-margin !default;
+
+$card-columns-count: 3 !default;
+$card-columns-gap: 1.25rem !default;
+$card-columns-margin: $card-spacer-y !default;
+
+
+// Tooltips
+
+$tooltip-font-size: $font-size-sm !default;
+$tooltip-max-width: 200px !default;
+$tooltip-color: $white !default;
+$tooltip-bg: $black !default;
+$tooltip-border-radius: $border-radius !default;
+$tooltip-opacity: .9 !default;
+$tooltip-padding-y: .25rem !default;
+$tooltip-padding-x: .5rem !default;
+$tooltip-margin: 0 !default;
+
+$tooltip-arrow-width: .8rem !default;
+$tooltip-arrow-height: .4rem !default;
+$tooltip-arrow-color: $tooltip-bg !default;
+
+
+// Popovers
+
+$popover-font-size: $font-size-sm !default;
+$popover-bg: $white !default;
+$popover-max-width: 276px !default;
+$popover-border-width: $border-width !default;
+$popover-border-color: rgba($black, .2) !default;
+$popover-border-radius: $border-radius-lg !default;
+$popover-box-shadow: 0 .25rem .5rem rgba($black, .2) !default;
+
+$popover-header-bg: darken($popover-bg, 3%) !default;
+$popover-header-color: $headings-color !default;
+$popover-header-padding-y: .5rem !default;
+$popover-header-padding-x: .75rem !default;
+
+$popover-body-color: $body-color !default;
+$popover-body-padding-y: $popover-header-padding-y !default;
+$popover-body-padding-x: $popover-header-padding-x !default;
+
+$popover-arrow-width: 1rem !default;
+$popover-arrow-height: .5rem !default;
+$popover-arrow-color: $popover-bg !default;
+
+$popover-arrow-outer-color: fade-in($popover-border-color, .05) !default;
+
+
+// Badges
+
+$badge-font-size: 75% !default;
+$badge-font-weight: $font-weight-bold !default;
+$badge-padding-y: .25em !default;
+$badge-padding-x: .4em !default;
+$badge-border-radius: $border-radius !default;
+
+$badge-pill-padding-x: .6em !default;
+// Use a higher than normal value to ensure completely rounded edges when
+// customizing padding or font-size on labels.
+$badge-pill-border-radius: 10rem !default;
+
+
+// Modals
+
+// Padding applied to the modal body
+$modal-inner-padding: 1rem !default;
+
+$modal-dialog-margin: .5rem !default;
+$modal-dialog-margin-y-sm-up: 1.75rem !default;
+
+$modal-title-line-height: $line-height-base !default;
+
+$modal-content-bg: $white !default;
+$modal-content-border-color: rgba($black, .2) !default;
+$modal-content-border-width: $border-width !default;
+$modal-content-box-shadow-xs: 0 .25rem .5rem rgba($black, .5) !default;
+$modal-content-box-shadow-sm-up: 0 .5rem 1rem rgba($black, .5) !default;
+
+$modal-backdrop-bg: $black !default;
+$modal-backdrop-opacity: .5 !default;
+$modal-header-border-color: $gray-200 !default;
+$modal-footer-border-color: $modal-header-border-color !default;
+$modal-header-border-width: $modal-content-border-width !default;
+$modal-footer-border-width: $modal-header-border-width !default;
+$modal-header-padding: 1rem !default;
+
+$modal-lg: 800px !default;
+$modal-md: 500px !default;
+$modal-sm: 300px !default;
+
+$modal-transition: transform .3s ease-out !default;
+
+
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+$alert-padding-y: .75rem !default;
+$alert-padding-x: 1.25rem !default;
+$alert-margin-bottom: 1rem !default;
+$alert-border-radius: $border-radius !default;
+$alert-link-font-weight: $font-weight-bold !default;
+$alert-border-width: $border-width !default;
+
+$alert-bg-level: -10 !default;
+$alert-border-level: -9 !default;
+$alert-color-level: 6 !default;
+
+
+// Progress bars
+
+$progress-height: 1rem !default;
+$progress-font-size: ($font-size-base * .75) !default;
+$progress-bg: $gray-200 !default;
+$progress-border-radius: $border-radius !default;
+$progress-box-shadow: inset 0 .1rem .1rem rgba($black, .1) !default;
+$progress-bar-color: $white !default;
+$progress-bar-bg: theme-color("primary") !default;
+$progress-bar-animation-timing: 1s linear infinite !default;
+$progress-bar-transition: width .6s ease !default;
+
+// List group
+
+$list-group-bg: $white !default;
+$list-group-border-color: rgba($black, .125) !default;
+$list-group-border-width: $border-width !default;
+$list-group-border-radius: $border-radius !default;
+
+$list-group-item-padding-y: .75rem !default;
+$list-group-item-padding-x: 1.25rem !default;
+
+$list-group-hover-bg: $gray-100 !default;
+$list-group-active-color: $component-active-color !default;
+$list-group-active-bg: $component-active-bg !default;
+$list-group-active-border-color: $list-group-active-bg !default;
+
+$list-group-disabled-color: $gray-600 !default;
+$list-group-disabled-bg: $list-group-bg !default;
+
+$list-group-action-color: $gray-700 !default;
+$list-group-action-hover-color: $list-group-action-color !default;
+
+$list-group-action-active-color: $body-color !default;
+$list-group-action-active-bg: $gray-200 !default;
+
+
+// Image thumbnails
+
+$thumbnail-padding: .25rem !default;
+$thumbnail-bg: $body-bg !default;
+$thumbnail-border-width: $border-width !default;
+$thumbnail-border-color: $gray-300 !default;
+$thumbnail-border-radius: $border-radius !default;
+$thumbnail-box-shadow: 0 1px 2px rgba($black, .075) !default;
+
+
+// Figures
+
+$figure-caption-font-size: 90% !default;
+$figure-caption-color: $gray-600 !default;
+
+
+// Breadcrumbs
+
+$breadcrumb-padding-y: .75rem !default;
+$breadcrumb-padding-x: 1rem !default;
+$breadcrumb-item-padding: .5rem !default;
+
+$breadcrumb-margin-bottom: 1rem !default;
+
+$breadcrumb-bg: $gray-200 !default;
+$breadcrumb-divider-color: $gray-600 !default;
+$breadcrumb-active-color: $gray-600 !default;
+$breadcrumb-divider: "/" !default;
+
+
+// Carousel
+
+$carousel-control-color: $white !default;
+$carousel-control-width: 15% !default;
+$carousel-control-opacity: .5 !default;
+
+$carousel-indicator-width: 30px !default;
+$carousel-indicator-height: 3px !default;
+$carousel-indicator-spacer: 3px !default;
+$carousel-indicator-active-bg: $white !default;
+
+$carousel-caption-width: 70% !default;
+$carousel-caption-color: $white !default;
+
+$carousel-control-icon-width: 20px !default;
+
+$carousel-control-prev-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E"), "#", "%23") !default;
+$carousel-control-next-icon-bg: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E"), "#", "%23") !default;
+
+$carousel-transition: transform .6s ease !default;
+
+
+// Close
+
+$close-font-size: $font-size-base * 1.5 !default;
+$close-font-weight: $font-weight-bold !default;
+$close-color: $black !default;
+$close-text-shadow: 0 1px 0 $white !default;
+
+// Code
+
+$code-font-size: 87.5% !default;
+$code-color: $pink !default;
+
+$kbd-padding-y: .2rem !default;
+$kbd-padding-x: .4rem !default;
+$kbd-font-size: $code-font-size !default;
+$kbd-color: $white !default;
+$kbd-bg: $gray-900 !default;
+
+$pre-color: $gray-900 !default;
+$pre-scrollable-max-height: 340px !default;
+
+
+// Printing
+$print-page-size: a3 !default;
+$print-body-min-width: map-get($grid-breakpoints, "lg") !default;
diff --git a/static/scss/bootstrap/mixins/_alert.scss b/static/scss/bootstrap/mixins/_alert.scss
new file mode 100644
index 0000000..db5a7eb
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_alert.scss
@@ -0,0 +1,13 @@
+@mixin alert-variant($background, $border, $color) {
+ color: $color;
+ @include gradient-bg($background);
+ border-color: $border;
+
+ hr {
+ border-top-color: darken($border, 5%);
+ }
+
+ .alert-link {
+ color: darken($color, 10%);
+ }
+}
diff --git a/static/scss/bootstrap/mixins/_background-variant.scss b/static/scss/bootstrap/mixins/_background-variant.scss
new file mode 100644
index 0000000..494439d
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_background-variant.scss
@@ -0,0 +1,21 @@
+// stylelint-disable declaration-no-important
+
+// Contextual backgrounds
+
+@mixin bg-variant($parent, $color) {
+ #{$parent} {
+ background-color: $color !important;
+ }
+ a#{$parent},
+ button#{$parent} {
+ @include hover-focus {
+ background-color: darken($color, 10%) !important;
+ }
+ }
+}
+
+@mixin bg-gradient-variant($parent, $color) {
+ #{$parent} {
+ background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
+ }
+}
diff --git a/static/scss/bootstrap/mixins/_badge.scss b/static/scss/bootstrap/mixins/_badge.scss
new file mode 100644
index 0000000..eeca0b4
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_badge.scss
@@ -0,0 +1,12 @@
+@mixin badge-variant($bg) {
+ color: color-yiq($bg);
+ background-color: $bg;
+
+ &[href] {
+ @include hover-focus {
+ color: color-yiq($bg);
+ text-decoration: none;
+ background-color: darken($bg, 10%);
+ }
+ }
+}
diff --git a/static/scss/bootstrap/mixins/_border-radius.scss b/static/scss/bootstrap/mixins/_border-radius.scss
new file mode 100644
index 0000000..2024feb
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_border-radius.scss
@@ -0,0 +1,35 @@
+// Single side border-radius
+
+@mixin border-radius($radius: $border-radius) {
+ @if $enable-rounded {
+ border-radius: $radius;
+ }
+}
+
+@mixin border-top-radius($radius) {
+ @if $enable-rounded {
+ border-top-left-radius: $radius;
+ border-top-right-radius: $radius;
+ }
+}
+
+@mixin border-right-radius($radius) {
+ @if $enable-rounded {
+ border-top-right-radius: $radius;
+ border-bottom-right-radius: $radius;
+ }
+}
+
+@mixin border-bottom-radius($radius) {
+ @if $enable-rounded {
+ border-bottom-right-radius: $radius;
+ border-bottom-left-radius: $radius;
+ }
+}
+
+@mixin border-left-radius($radius) {
+ @if $enable-rounded {
+ border-top-left-radius: $radius;
+ border-bottom-left-radius: $radius;
+ }
+}
diff --git a/static/scss/bootstrap/mixins/_box-shadow.scss b/static/scss/bootstrap/mixins/_box-shadow.scss
new file mode 100644
index 0000000..b2410e5
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_box-shadow.scss
@@ -0,0 +1,5 @@
+@mixin box-shadow($shadow...) {
+ @if $enable-shadows {
+ box-shadow: $shadow;
+ }
+}
diff --git a/static/scss/bootstrap/mixins/_breakpoints.scss b/static/scss/bootstrap/mixins/_breakpoints.scss
new file mode 100644
index 0000000..d1ad684
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_breakpoints.scss
@@ -0,0 +1,123 @@
+// Breakpoint viewport sizes and media queries.
+//
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//
+// (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//
+// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+// >> breakpoint-next(sm)
+// md
+// >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// md
+// >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+// md
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+ $n: index($breakpoint-names, $name);
+ @return if($n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+// >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// 576px
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+ $min: map-get($breakpoints, $name);
+ @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width. Null for the largest (last) breakpoint.
+// The maximum value is calculated as the minimum of the next one less 0.02px
+// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+// See https://bugs.webkit.org/show_bug.cgi?id=178261
+//
+// >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// 767.98px
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+ $next: breakpoint-next($name, $breakpoints);
+ @return if($next, breakpoint-min($next, $breakpoints) - .02px, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash infront.
+// Useful for making responsive utilities.
+//
+// >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// "" (Returns a blank string)
+// >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+// "-sm"
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+ @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+ $min: breakpoint-min($name, $breakpoints);
+ @if $min {
+ @media (min-width: $min) {
+ @content;
+ }
+ } @else {
+ @content;
+ }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+ $max: breakpoint-max($name, $breakpoints);
+ @if $max {
+ @media (max-width: $max) {
+ @content;
+ }
+ } @else {
+ @content;
+ }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+ $min: breakpoint-min($lower, $breakpoints);
+ $max: breakpoint-max($upper, $breakpoints);
+
+ @if $min != null and $max != null {
+ @media (min-width: $min) and (max-width: $max) {
+ @content;
+ }
+ } @else if $max == null {
+ @include media-breakpoint-up($lower, $breakpoints) {
+ @content;
+ }
+ } @else if $min == null {
+ @include media-breakpoint-down($upper, $breakpoints) {
+ @content;
+ }
+ }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+ $min: breakpoint-min($name, $breakpoints);
+ $max: breakpoint-max($name, $breakpoints);
+
+ @if $min != null and $max != null {
+ @media (min-width: $min) and (max-width: $max) {
+ @content;
+ }
+ } @else if $max == null {
+ @include media-breakpoint-up($name, $breakpoints) {
+ @content;
+ }
+ } @else if $min == null {
+ @include media-breakpoint-down($name, $breakpoints) {
+ @content;
+ }
+ }
+}
diff --git a/static/scss/bootstrap/mixins/_buttons.scss b/static/scss/bootstrap/mixins/_buttons.scss
new file mode 100644
index 0000000..06ad677
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_buttons.scss
@@ -0,0 +1,109 @@
+// Button variants
+//
+// Easily pump out default styles, as well as :hover, :focus, :active,
+// and disabled options for all buttons
+
+@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
+ color: color-yiq($background);
+ @include gradient-bg($background);
+ border-color: $border;
+ @include box-shadow($btn-box-shadow);
+
+ @include hover {
+ color: color-yiq($hover-background);
+ @include gradient-bg($hover-background);
+ border-color: $hover-border;
+ }
+
+ &:focus,
+ &.focus {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ @if $enable-shadows {
+ box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
+ } @else {
+ box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
+ }
+ }
+
+ // Disabled comes first so active can properly restyle
+ &.disabled,
+ &:disabled {
+ color: color-yiq($background);
+ background-color: $background;
+ border-color: $border;
+ }
+
+ &:not(:disabled):not(.disabled):active,
+ &:not(:disabled):not(.disabled).active,
+ .show > &.dropdown-toggle {
+ color: color-yiq($active-background);
+ background-color: $active-background;
+ @if $enable-gradients {
+ background-image: none; // Remove the gradient for the pressed/active state
+ }
+ border-color: $active-border;
+
+ &:focus {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ @if $enable-shadows {
+ box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
+ } @else {
+ box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
+ }
+ }
+ }
+}
+
+@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
+ color: $color;
+ background-color: transparent;
+ background-image: none;
+ border-color: $color;
+
+ &:hover {
+ color: $color-hover;
+ background-color: $active-background;
+ border-color: $active-border;
+ }
+
+ &:focus,
+ &.focus {
+ box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+ }
+
+ &.disabled,
+ &:disabled {
+ color: $color;
+ background-color: transparent;
+ }
+
+ &:not(:disabled):not(.disabled):active,
+ &:not(:disabled):not(.disabled).active,
+ .show > &.dropdown-toggle {
+ color: color-yiq($active-background);
+ background-color: $active-background;
+ border-color: $active-border;
+
+ &:focus {
+ // Avoid using mixin so we can pass custom focus shadow properly
+ @if $enable-shadows and $btn-active-box-shadow != none {
+ box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
+ } @else {
+ box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
+ }
+ }
+ }
+}
+
+// Button sizes
+@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+ padding: $padding-y $padding-x;
+ font-size: $font-size;
+ line-height: $line-height;
+ // Manually declare to provide an override to the browser default
+ @if $enable-rounded {
+ border-radius: $border-radius;
+ } @else {
+ border-radius: 0;
+ }
+}
diff --git a/static/scss/bootstrap/mixins/_caret.scss b/static/scss/bootstrap/mixins/_caret.scss
new file mode 100644
index 0000000..40478e4
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_caret.scss
@@ -0,0 +1,65 @@
+@mixin caret-down {
+ border-top: $caret-width solid;
+ border-right: $caret-width solid transparent;
+ border-bottom: 0;
+ border-left: $caret-width solid transparent;
+}
+
+@mixin caret-up {
+ border-top: 0;
+ border-right: $caret-width solid transparent;
+ border-bottom: $caret-width solid;
+ border-left: $caret-width solid transparent;
+}
+
+@mixin caret-right {
+ border-top: $caret-width solid transparent;
+ border-bottom: $caret-width solid transparent;
+ border-left: $caret-width solid;
+}
+
+@mixin caret-left {
+ border-top: $caret-width solid transparent;
+ border-right: $caret-width solid;
+ border-bottom: $caret-width solid transparent;
+}
+
+@mixin caret($direction: down) {
+ @if $enable-caret {
+ &::after {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ margin-left: $caret-width * .85;
+ vertical-align: $caret-width * .85;
+ content: "";
+ @if $direction == down {
+ @include caret-down;
+ } @else if $direction == up {
+ @include caret-up;
+ } @else if $direction == right {
+ @include caret-right;
+ }
+ }
+
+ @if $direction == left {
+ &::after {
+ display: none;
+ }
+
+ &::before {
+ display: inline-block;
+ width: 0;
+ height: 0;
+ margin-right: $caret-width * .85;
+ vertical-align: $caret-width * .85;
+ content: "";
+ @include caret-left;
+ }
+ }
+
+ &:empty::after {
+ margin-left: 0;
+ }
+ }
+}
diff --git a/static/scss/bootstrap/mixins/_clearfix.scss b/static/scss/bootstrap/mixins/_clearfix.scss
new file mode 100644
index 0000000..11a977b
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_clearfix.scss
@@ -0,0 +1,7 @@
+@mixin clearfix() {
+ &::after {
+ display: block;
+ clear: both;
+ content: "";
+ }
+}
diff --git a/static/scss/bootstrap/mixins/_float.scss b/static/scss/bootstrap/mixins/_float.scss
new file mode 100644
index 0000000..48fa8b6
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_float.scss
@@ -0,0 +1,11 @@
+// stylelint-disable declaration-no-important
+
+@mixin float-left {
+ float: left !important;
+}
+@mixin float-right {
+ float: right !important;
+}
+@mixin float-none {
+ float: none !important;
+}
diff --git a/static/scss/bootstrap/mixins/_forms.scss b/static/scss/bootstrap/mixins/_forms.scss
new file mode 100644
index 0000000..2290682
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_forms.scss
@@ -0,0 +1,137 @@
+// Form control focus state
+//
+// Generate a customized focus state and for any input with the specified color,
+// which defaults to the `$input-focus-border-color` variable.
+//
+// We highly encourage you to not customize the default value, but instead use
+// this to tweak colors on an as-needed basis. This aesthetic change is based on
+// WebKit's default styles, but applicable to a wider range of browsers. Its
+// usability and accessibility should be taken into account with any change.
+//
+// Example usage: change the default blue border and shadow to white for better
+// contrast against a dark gray background.
+@mixin form-control-focus() {
+ &:focus {
+ color: $input-focus-color;
+ background-color: $input-focus-bg;
+ border-color: $input-focus-border-color;
+ outline: 0;
+ // Avoid using mixin so we can pass custom focus shadow properly
+ @if $enable-shadows {
+ box-shadow: $input-box-shadow, $input-focus-box-shadow;
+ } @else {
+ box-shadow: $input-focus-box-shadow;
+ }
+ }
+}
+
+
+@mixin form-validation-state($state, $color) {
+ .#{$state}-feedback {
+ display: none;
+ width: 100%;
+ margin-top: $form-feedback-margin-top;
+ font-size: $form-feedback-font-size;
+ color: $color;
+ }
+
+ .#{$state}-tooltip {
+ position: absolute;
+ top: 100%;
+ z-index: 5;
+ display: none;
+ max-width: 100%; // Contain to parent when possible
+ padding: .5rem;
+ margin-top: .1rem;
+ font-size: .875rem;
+ line-height: 1;
+ color: #fff;
+ background-color: rgba($color, .8);
+ border-radius: .2rem;
+ }
+
+ .form-control,
+ .custom-select {
+ .was-validated &:#{$state},
+ &.is-#{$state} {
+ border-color: $color;
+
+ &:focus {
+ border-color: $color;
+ box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+ }
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+ }
+ }
+
+ .form-check-input {
+ .was-validated &:#{$state},
+ &.is-#{$state} {
+ ~ .form-check-label {
+ color: $color;
+ }
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+ }
+ }
+
+ .custom-control-input {
+ .was-validated &:#{$state},
+ &.is-#{$state} {
+ ~ .custom-control-label {
+ color: $color;
+
+ &::before {
+ background-color: lighten($color, 25%);
+ }
+ }
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+
+ &:checked {
+ ~ .custom-control-label::before {
+ @include gradient-bg(lighten($color, 10%));
+ }
+ }
+
+ &:focus {
+ ~ .custom-control-label::before {
+ box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
+ }
+ }
+ }
+ }
+
+ // custom file
+ .custom-file-input {
+ .was-validated &:#{$state},
+ &.is-#{$state} {
+ ~ .custom-file-label {
+ border-color: $color;
+
+ &::before { border-color: inherit; }
+ }
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+
+ &:focus {
+ ~ .custom-file-label {
+ box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+ }
+ }
+ }
+ }
+}
diff --git a/static/scss/bootstrap/mixins/_gradients.scss b/static/scss/bootstrap/mixins/_gradients.scss
new file mode 100644
index 0000000..ecd01f7
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_gradients.scss
@@ -0,0 +1,45 @@
+// Gradients
+
+@mixin gradient-bg($color) {
+ @if $enable-gradients {
+ background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x;
+ } @else {
+ background-color: $color;
+ }
+}
+
+// Horizontal gradient, from left to right
+//
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+@mixin gradient-x($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+ background-image: linear-gradient(to right, $start-color $start-percent, $end-color $end-percent);
+ background-repeat: repeat-x;
+}
+
+// Vertical gradient, from top to bottom
+//
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+@mixin gradient-y($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+ background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent);
+ background-repeat: repeat-x;
+}
+
+@mixin gradient-directional($start-color: #555, $end-color: #333, $deg: 45deg) {
+ background-image: linear-gradient($deg, $start-color, $end-color);
+ background-repeat: repeat-x;
+}
+@mixin gradient-x-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
+ background-image: linear-gradient(to right, $start-color, $mid-color $color-stop, $end-color);
+ background-repeat: no-repeat;
+}
+@mixin gradient-y-three-colors($start-color: #00b3ee, $mid-color: #7a43b6, $color-stop: 50%, $end-color: #c3325f) {
+ background-image: linear-gradient($start-color, $mid-color $color-stop, $end-color);
+ background-repeat: no-repeat;
+}
+@mixin gradient-radial($inner-color: #555, $outer-color: #333) {
+ background-image: radial-gradient(circle, $inner-color, $outer-color);
+ background-repeat: no-repeat;
+}
+@mixin gradient-striped($color: rgba(255,255,255,.15), $angle: 45deg) {
+ background-image: linear-gradient($angle, $color 25%, transparent 25%, transparent 50%, $color 50%, $color 75%, transparent 75%, transparent);
+}
diff --git a/static/scss/bootstrap/mixins/_grid-framework.scss b/static/scss/bootstrap/mixins/_grid-framework.scss
new file mode 100644
index 0000000..7b37f86
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_grid-framework.scss
@@ -0,0 +1,67 @@
+// Framework grid generation
+//
+// Used only by Bootstrap to generate the correct number of grid classes given
+// any value of `$grid-columns`.
+
+@mixin make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter-width, $breakpoints: $grid-breakpoints) {
+ // Common properties for all breakpoints
+ %grid-column {
+ position: relative;
+ width: 100%;
+ min-height: 1px; // Prevent columns from collapsing when empty
+ padding-right: ($gutter / 2);
+ padding-left: ($gutter / 2);
+ }
+
+ @each $breakpoint in map-keys($breakpoints) {
+ $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+ // Allow columns to stretch full width below their breakpoints
+ @for $i from 1 through $columns {
+ .col#{$infix}-#{$i} {
+ @extend %grid-column;
+ }
+ }
+ .col#{$infix},
+ .col#{$infix}-auto {
+ @extend %grid-column;
+ }
+
+ @include media-breakpoint-up($breakpoint, $breakpoints) {
+ // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+ .col#{$infix} {
+ flex-basis: 0;
+ flex-grow: 1;
+ max-width: 100%;
+ }
+ .col#{$infix}-auto {
+ flex: 0 0 auto;
+ width: auto;
+ max-width: none; // Reset earlier grid tiers
+ }
+
+ @for $i from 1 through $columns {
+ .col#{$infix}-#{$i} {
+ @include make-col($i, $columns);
+ }
+ }
+
+ .order#{$infix}-first { order: -1; }
+
+ .order#{$infix}-last { order: $columns + 1; }
+
+ @for $i from 0 through $columns {
+ .order#{$infix}-#{$i} { order: $i; }
+ }
+
+ // `$columns - 1` because offsetting by the width of an entire row isn't possible
+ @for $i from 0 through ($columns - 1) {
+ @if not ($infix == "" and $i == 0) { // Avoid emitting useless .offset-0
+ .offset#{$infix}-#{$i} {
+ @include make-col-offset($i, $columns);
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/static/scss/bootstrap/mixins/_grid.scss b/static/scss/bootstrap/mixins/_grid.scss
new file mode 100644
index 0000000..b75ebcb
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_grid.scss
@@ -0,0 +1,52 @@
+/// Grid system
+//
+// Generate semantic grid columns with these mixins.
+
+@mixin make-container() {
+ width: 100%;
+ padding-right: ($grid-gutter-width / 2);
+ padding-left: ($grid-gutter-width / 2);
+ margin-right: auto;
+ margin-left: auto;
+}
+
+
+// For each breakpoint, define the maximum width of the container in a media query
+@mixin make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints) {
+ @each $breakpoint, $container-max-width in $max-widths {
+ @include media-breakpoint-up($breakpoint, $breakpoints) {
+ max-width: $container-max-width;
+ }
+ }
+}
+
+@mixin make-row() {
+ display: flex;
+ flex-wrap: wrap;
+ margin-right: ($grid-gutter-width / -2);
+ margin-left: ($grid-gutter-width / -2);
+}
+
+@mixin make-col-ready() {
+ position: relative;
+ // Prevent columns from becoming too narrow when at smaller grid tiers by
+ // always setting `width: 100%;`. This works because we use `flex` values
+ // later on to override this initial width.
+ width: 100%;
+ min-height: 1px; // Prevent collapsing
+ padding-right: ($grid-gutter-width / 2);
+ padding-left: ($grid-gutter-width / 2);
+}
+
+@mixin make-col($size, $columns: $grid-columns) {
+ flex: 0 0 percentage($size / $columns);
+ // Add a `max-width` to ensure content within each column does not blow out
+ // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+ // do not appear to require this.
+ max-width: percentage($size / $columns);
+}
+
+@mixin make-col-offset($size, $columns: $grid-columns) {
+ $num: $size / $columns;
+ margin-left: if($num == 0, 0, percentage($num));
+}
diff --git a/static/scss/bootstrap/mixins/_hover.scss b/static/scss/bootstrap/mixins/_hover.scss
new file mode 100644
index 0000000..ec2e328
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_hover.scss
@@ -0,0 +1,39 @@
+// stylelint-disable indentation
+
+// Hover mixin and `$enable-hover-media-query` are deprecated.
+//
+// Origally added during our alphas and maintained during betas, this mixin was
+// designed to prevent `:hover` stickiness on iOS—an issue where hover styles
+// would persist after initial touch.
+//
+// For backward compatibility, we've kept these mixins and updated them to
+// always return their regular psuedo-classes instead of a shimmed media query.
+//
+// Issue: https://github.com/twbs/bootstrap/issues/25195
+
+@mixin hover {
+ &:hover { @content; }
+}
+
+@mixin hover-focus {
+ &:hover,
+ &:focus {
+ @content;
+ }
+}
+
+@mixin plain-hover-focus {
+ &,
+ &:hover,
+ &:focus {
+ @content;
+ }
+}
+
+@mixin hover-focus-active {
+ &:hover,
+ &:focus,
+ &:active {
+ @content;
+ }
+}
diff --git a/static/scss/bootstrap/mixins/_image.scss b/static/scss/bootstrap/mixins/_image.scss
new file mode 100644
index 0000000..0544f0d
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_image.scss
@@ -0,0 +1,36 @@
+// Image Mixins
+// - Responsive image
+// - Retina image
+
+
+// Responsive image
+//
+// Keep images from scaling beyond the width of their parents.
+
+@mixin img-fluid {
+ // Part 1: Set a maximum relative to the parent
+ max-width: 100%;
+ // Part 2: Override the height to auto, otherwise images will be stretched
+ // when setting a width and height attribute on the img element.
+ height: auto;
+}
+
+
+// Retina image
+//
+// Short retina mixin for setting background-image and -size.
+
+// stylelint-disable indentation, media-query-list-comma-newline-after
+@mixin img-retina($file-1x, $file-2x, $width-1x, $height-1x) {
+ background-image: url($file-1x);
+
+ // Autoprefixer takes care of adding -webkit-min-device-pixel-ratio and -o-min-device-pixel-ratio,
+ // but doesn't convert dppx=>dpi.
+ // There's no such thing as unprefixed min-device-pixel-ratio since it's nonstandard.
+ // Compatibility info: https://caniuse.com/#feat=css-media-resolution
+ @media only screen and (min-resolution: 192dpi), // IE9-11 don't support dppx
+ only screen and (min-resolution: 2dppx) { // Standardized
+ background-image: url($file-2x);
+ background-size: $width-1x $height-1x;
+ }
+}
diff --git a/static/scss/bootstrap/mixins/_list-group.scss b/static/scss/bootstrap/mixins/_list-group.scss
new file mode 100644
index 0000000..607ffcb
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_list-group.scss
@@ -0,0 +1,21 @@
+// List Groups
+
+@mixin list-group-item-variant($state, $background, $color) {
+ .list-group-item-#{$state} {
+ color: $color;
+ background-color: $background;
+
+ &.list-group-item-action {
+ @include hover-focus {
+ color: $color;
+ background-color: darken($background, 5%);
+ }
+
+ &.active {
+ color: #fff;
+ background-color: $color;
+ border-color: $color;
+ }
+ }
+ }
+}
diff --git a/static/scss/bootstrap/mixins/_lists.scss b/static/scss/bootstrap/mixins/_lists.scss
new file mode 100644
index 0000000..2518562
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_lists.scss
@@ -0,0 +1,7 @@
+// Lists
+
+// Unstyled keeps list items block level, just removes default browser padding and list-style
+@mixin list-unstyled {
+ padding-left: 0;
+ list-style: none;
+}
diff --git a/static/scss/bootstrap/mixins/_nav-divider.scss b/static/scss/bootstrap/mixins/_nav-divider.scss
new file mode 100644
index 0000000..493de03
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_nav-divider.scss
@@ -0,0 +1,10 @@
+// Horizontal dividers
+//
+// Dividers (basically an hr) within dropdowns and nav lists
+
+@mixin nav-divider($color: #e5e5e5) {
+ height: 0;
+ margin: ($spacer / 2) 0;
+ overflow: hidden;
+ border-top: 1px solid $color;
+}
diff --git a/static/scss/bootstrap/mixins/_navbar-align.scss b/static/scss/bootstrap/mixins/_navbar-align.scss
new file mode 100644
index 0000000..b351660
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_navbar-align.scss
@@ -0,0 +1,10 @@
+// Navbar vertical align
+//
+// Vertically center elements in the navbar.
+// Example: an element has a height of 30px, so write out `.navbar-vertical-align(30px);`
+// to calculate the appropriate top margin.
+
+// @mixin navbar-vertical-align($element-height) {
+// margin-top: (($navbar-height - $element-height) / 2);
+// margin-bottom: (($navbar-height - $element-height) / 2);
+// }
diff --git a/static/scss/bootstrap/mixins/_pagination.scss b/static/scss/bootstrap/mixins/_pagination.scss
new file mode 100644
index 0000000..ff36eb6
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_pagination.scss
@@ -0,0 +1,22 @@
+// Pagination
+
+@mixin pagination-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
+ .page-link {
+ padding: $padding-y $padding-x;
+ font-size: $font-size;
+ line-height: $line-height;
+ }
+
+ .page-item {
+ &:first-child {
+ .page-link {
+ @include border-left-radius($border-radius);
+ }
+ }
+ &:last-child {
+ .page-link {
+ @include border-right-radius($border-radius);
+ }
+ }
+ }
+}
diff --git a/static/scss/bootstrap/mixins/_reset-text.scss b/static/scss/bootstrap/mixins/_reset-text.scss
new file mode 100644
index 0000000..71edb00
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_reset-text.scss
@@ -0,0 +1,17 @@
+@mixin reset-text {
+ font-family: $font-family-base;
+ // We deliberately do NOT reset font-size or word-wrap.
+ font-style: normal;
+ font-weight: $font-weight-normal;
+ line-height: $line-height-base;
+ text-align: left; // Fallback for where `start` is not supported
+ text-align: start; // stylelint-disable-line declaration-block-no-duplicate-properties
+ text-decoration: none;
+ text-shadow: none;
+ text-transform: none;
+ letter-spacing: normal;
+ word-break: normal;
+ word-spacing: normal;
+ white-space: normal;
+ line-break: auto;
+}
diff --git a/static/scss/bootstrap/mixins/_resize.scss b/static/scss/bootstrap/mixins/_resize.scss
new file mode 100644
index 0000000..66f233a
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_resize.scss
@@ -0,0 +1,6 @@
+// Resize anything
+
+@mixin resizable($direction) {
+ overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
+ resize: $direction; // Options: horizontal, vertical, both
+}
diff --git a/static/scss/bootstrap/mixins/_screen-reader.scss b/static/scss/bootstrap/mixins/_screen-reader.scss
new file mode 100644
index 0000000..8f3eb1b
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_screen-reader.scss
@@ -0,0 +1,35 @@
+// Only display content to screen readers
+//
+// See: http://a11yproject.com/posts/how-to-hide-content/
+// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+
+@mixin sr-only {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ padding: 0;
+ overflow: hidden;
+ clip: rect(0, 0, 0, 0);
+ white-space: nowrap;
+ clip-path: inset(50%);
+ border: 0;
+}
+
+// Use in conjunction with .sr-only to only display content when it's focused.
+//
+// Useful for "Skip to main content" links; see https://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
+//
+// Credit: HTML5 Boilerplate
+
+@mixin sr-only-focusable {
+ &:active,
+ &:focus {
+ position: static;
+ width: auto;
+ height: auto;
+ overflow: visible;
+ clip: auto;
+ white-space: normal;
+ clip-path: none;
+ }
+}
diff --git a/static/scss/bootstrap/mixins/_size.scss b/static/scss/bootstrap/mixins/_size.scss
new file mode 100644
index 0000000..b9dd48e
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_size.scss
@@ -0,0 +1,6 @@
+// Sizing shortcuts
+
+@mixin size($width, $height: $width) {
+ width: $width;
+ height: $height;
+}
diff --git a/static/scss/bootstrap/mixins/_table-row.scss b/static/scss/bootstrap/mixins/_table-row.scss
new file mode 100644
index 0000000..84f1d30
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_table-row.scss
@@ -0,0 +1,30 @@
+// Tables
+
+@mixin table-row-variant($state, $background) {
+ // Exact selectors below required to override `.table-striped` and prevent
+ // inheritance to nested tables.
+ .table-#{$state} {
+ &,
+ > th,
+ > td {
+ background-color: $background;
+ }
+ }
+
+ // Hover states for `.table-hover`
+ // Note: this is not available for cells or rows within `thead` or `tfoot`.
+ .table-hover {
+ $hover-background: darken($background, 5%);
+
+ .table-#{$state} {
+ @include hover {
+ background-color: $hover-background;
+
+ > td,
+ > th {
+ background-color: $hover-background;
+ }
+ }
+ }
+ }
+}
diff --git a/static/scss/bootstrap/mixins/_text-emphasis.scss b/static/scss/bootstrap/mixins/_text-emphasis.scss
new file mode 100644
index 0000000..58db3e0
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_text-emphasis.scss
@@ -0,0 +1,14 @@
+// stylelint-disable declaration-no-important
+
+// Typography
+
+@mixin text-emphasis-variant($parent, $color) {
+ #{$parent} {
+ color: $color !important;
+ }
+ a#{$parent} {
+ @include hover-focus {
+ color: darken($color, 10%) !important;
+ }
+ }
+}
diff --git a/static/scss/bootstrap/mixins/_text-hide.scss b/static/scss/bootstrap/mixins/_text-hide.scss
new file mode 100644
index 0000000..aa551fd
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_text-hide.scss
@@ -0,0 +1,9 @@
+// CSS image replacement
+@mixin text-hide() {
+ // stylelint-disable-next-line font-family-no-missing-generic-family-keyword
+ font: 0/0 a;
+ color: transparent;
+ text-shadow: none;
+ background-color: transparent;
+ border: 0;
+}
diff --git a/static/scss/bootstrap/mixins/_text-truncate.scss b/static/scss/bootstrap/mixins/_text-truncate.scss
new file mode 100644
index 0000000..3504bb1
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_text-truncate.scss
@@ -0,0 +1,8 @@
+// Text truncate
+// Requires inline-block or block for proper styling
+
+@mixin text-truncate() {
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
diff --git a/static/scss/bootstrap/mixins/_transition.scss b/static/scss/bootstrap/mixins/_transition.scss
new file mode 100644
index 0000000..7e33dee
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_transition.scss
@@ -0,0 +1,9 @@
+@mixin transition($transition...) {
+ @if $enable-transitions {
+ @if length($transition) == 0 {
+ transition: $transition-base;
+ } @else {
+ transition: $transition;
+ }
+ }
+}
diff --git a/static/scss/bootstrap/mixins/_visibility.scss b/static/scss/bootstrap/mixins/_visibility.scss
new file mode 100644
index 0000000..fe523d0
--- /dev/null
+++ b/static/scss/bootstrap/mixins/_visibility.scss
@@ -0,0 +1,7 @@
+// stylelint-disable declaration-no-important
+
+// Visibility
+
+@mixin invisible($visibility) {
+ visibility: $visibility !important;
+}
diff --git a/static/scss/bootstrap/utilities/_align.scss b/static/scss/bootstrap/utilities/_align.scss
new file mode 100644
index 0000000..8b7df9f
--- /dev/null
+++ b/static/scss/bootstrap/utilities/_align.scss
@@ -0,0 +1,8 @@
+// stylelint-disable declaration-no-important
+
+.align-baseline { vertical-align: baseline !important; } // Browser default
+.align-top { vertical-align: top !important; }
+.align-middle { vertical-align: middle !important; }
+.align-bottom { vertical-align: bottom !important; }
+.align-text-bottom { vertical-align: text-bottom !important; }
+.align-text-top { vertical-align: text-top !important; }
diff --git a/static/scss/bootstrap/utilities/_background.scss b/static/scss/bootstrap/utilities/_background.scss
new file mode 100644
index 0000000..1f18b2f
--- /dev/null
+++ b/static/scss/bootstrap/utilities/_background.scss
@@ -0,0 +1,19 @@
+// stylelint-disable declaration-no-important
+
+@each $color, $value in $theme-colors {
+ @include bg-variant(".bg-#{$color}", $value);
+}
+
+@if $enable-gradients {
+ @each $color, $value in $theme-colors {
+ @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+ }
+}
+
+.bg-white {
+ background-color: $white !important;
+}
+
+.bg-transparent {
+ background-color: transparent !important;
+}
diff --git a/static/scss/bootstrap/utilities/_borders.scss b/static/scss/bootstrap/utilities/_borders.scss
new file mode 100644
index 0000000..b8832ef
--- /dev/null
+++ b/static/scss/bootstrap/utilities/_borders.scss
@@ -0,0 +1,59 @@
+// stylelint-disable declaration-no-important
+
+//
+// Border
+//
+
+.border { border: $border-width solid $border-color !important; }
+.border-top { border-top: $border-width solid $border-color !important; }
+.border-right { border-right: $border-width solid $border-color !important; }
+.border-bottom { border-bottom: $border-width solid $border-color !important; }
+.border-left { border-left: $border-width solid $border-color !important; }
+
+.border-0 { border: 0 !important; }
+.border-top-0 { border-top: 0 !important; }
+.border-right-0 { border-right: 0 !important; }
+.border-bottom-0 { border-bottom: 0 !important; }
+.border-left-0 { border-left: 0 !important; }
+
+@each $color, $value in $theme-colors {
+ .border-#{$color} {
+ border-color: $value !important;
+ }
+}
+
+.border-white {
+ border-color: $white !important;
+}
+
+//
+// Border-radius
+//
+
+.rounded {
+ border-radius: $border-radius !important;
+}
+.rounded-top {
+ border-top-left-radius: $border-radius !important;
+ border-top-right-radius: $border-radius !important;
+}
+.rounded-right {
+ border-top-right-radius: $border-radius !important;
+ border-bottom-right-radius: $border-radius !important;
+}
+.rounded-bottom {
+ border-bottom-right-radius: $border-radius !important;
+ border-bottom-left-radius: $border-radius !important;
+}
+.rounded-left {
+ border-top-left-radius: $border-radius !important;
+ border-bottom-left-radius: $border-radius !important;
+}
+
+.rounded-circle {
+ border-radius: 50% !important;
+}
+
+.rounded-0 {
+ border-radius: 0 !important;
+}
diff --git a/static/scss/bootstrap/utilities/_clearfix.scss b/static/scss/bootstrap/utilities/_clearfix.scss
new file mode 100644
index 0000000..e92522a
--- /dev/null
+++ b/static/scss/bootstrap/utilities/_clearfix.scss
@@ -0,0 +1,3 @@
+.clearfix {
+ @include clearfix();
+}
diff --git a/static/scss/bootstrap/utilities/_display.scss b/static/scss/bootstrap/utilities/_display.scss
new file mode 100644
index 0000000..20aeeb5
--- /dev/null
+++ b/static/scss/bootstrap/utilities/_display.scss
@@ -0,0 +1,38 @@
+// stylelint-disable declaration-no-important
+
+//
+// Utilities for common `display` values
+//
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .d#{$infix}-none { display: none !important; }
+ .d#{$infix}-inline { display: inline !important; }
+ .d#{$infix}-inline-block { display: inline-block !important; }
+ .d#{$infix}-block { display: block !important; }
+ .d#{$infix}-table { display: table !important; }
+ .d#{$infix}-table-row { display: table-row !important; }
+ .d#{$infix}-table-cell { display: table-cell !important; }
+ .d#{$infix}-flex { display: flex !important; }
+ .d#{$infix}-inline-flex { display: inline-flex !important; }
+ }
+}
+
+
+//
+// Utilities for toggling `display` in print
+//
+
+@media print {
+ .d-print-none { display: none !important; }
+ .d-print-inline { display: inline !important; }
+ .d-print-inline-block { display: inline-block !important; }
+ .d-print-block { display: block !important; }
+ .d-print-table { display: table !important; }
+ .d-print-table-row { display: table-row !important; }
+ .d-print-table-cell { display: table-cell !important; }
+ .d-print-flex { display: flex !important; }
+ .d-print-inline-flex { display: inline-flex !important; }
+}
diff --git a/static/scss/bootstrap/utilities/_embed.scss b/static/scss/bootstrap/utilities/_embed.scss
new file mode 100644
index 0000000..d3362b6
--- /dev/null
+++ b/static/scss/bootstrap/utilities/_embed.scss
@@ -0,0 +1,52 @@
+// Credit: Nicolas Gallagher and SUIT CSS.
+
+.embed-responsive {
+ position: relative;
+ display: block;
+ width: 100%;
+ padding: 0;
+ overflow: hidden;
+
+ &::before {
+ display: block;
+ content: "";
+ }
+
+ .embed-responsive-item,
+ iframe,
+ embed,
+ object,
+ video {
+ position: absolute;
+ top: 0;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border: 0;
+ }
+}
+
+.embed-responsive-21by9 {
+ &::before {
+ padding-top: percentage(9 / 21);
+ }
+}
+
+.embed-responsive-16by9 {
+ &::before {
+ padding-top: percentage(9 / 16);
+ }
+}
+
+.embed-responsive-4by3 {
+ &::before {
+ padding-top: percentage(3 / 4);
+ }
+}
+
+.embed-responsive-1by1 {
+ &::before {
+ padding-top: percentage(1 / 1);
+ }
+}
diff --git a/static/scss/bootstrap/utilities/_flex.scss b/static/scss/bootstrap/utilities/_flex.scss
new file mode 100644
index 0000000..8e47038
--- /dev/null
+++ b/static/scss/bootstrap/utilities/_flex.scss
@@ -0,0 +1,46 @@
+// stylelint-disable declaration-no-important
+
+// Flex variation
+//
+// Custom styles for additional flex alignment options.
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .flex#{$infix}-row { flex-direction: row !important; }
+ .flex#{$infix}-column { flex-direction: column !important; }
+ .flex#{$infix}-row-reverse { flex-direction: row-reverse !important; }
+ .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }
+
+ .flex#{$infix}-wrap { flex-wrap: wrap !important; }
+ .flex#{$infix}-nowrap { flex-wrap: nowrap !important; }
+ .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
+
+ .justify-content#{$infix}-start { justify-content: flex-start !important; }
+ .justify-content#{$infix}-end { justify-content: flex-end !important; }
+ .justify-content#{$infix}-center { justify-content: center !important; }
+ .justify-content#{$infix}-between { justify-content: space-between !important; }
+ .justify-content#{$infix}-around { justify-content: space-around !important; }
+
+ .align-items#{$infix}-start { align-items: flex-start !important; }
+ .align-items#{$infix}-end { align-items: flex-end !important; }
+ .align-items#{$infix}-center { align-items: center !important; }
+ .align-items#{$infix}-baseline { align-items: baseline !important; }
+ .align-items#{$infix}-stretch { align-items: stretch !important; }
+
+ .align-content#{$infix}-start { align-content: flex-start !important; }
+ .align-content#{$infix}-end { align-content: flex-end !important; }
+ .align-content#{$infix}-center { align-content: center !important; }
+ .align-content#{$infix}-between { align-content: space-between !important; }
+ .align-content#{$infix}-around { align-content: space-around !important; }
+ .align-content#{$infix}-stretch { align-content: stretch !important; }
+
+ .align-self#{$infix}-auto { align-self: auto !important; }
+ .align-self#{$infix}-start { align-self: flex-start !important; }
+ .align-self#{$infix}-end { align-self: flex-end !important; }
+ .align-self#{$infix}-center { align-self: center !important; }
+ .align-self#{$infix}-baseline { align-self: baseline !important; }
+ .align-self#{$infix}-stretch { align-self: stretch !important; }
+ }
+}
diff --git a/static/scss/bootstrap/utilities/_float.scss b/static/scss/bootstrap/utilities/_float.scss
new file mode 100644
index 0000000..01655e9
--- /dev/null
+++ b/static/scss/bootstrap/utilities/_float.scss
@@ -0,0 +1,9 @@
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .float#{$infix}-left { @include float-left; }
+ .float#{$infix}-right { @include float-right; }
+ .float#{$infix}-none { @include float-none; }
+ }
+}
diff --git a/static/scss/bootstrap/utilities/_position.scss b/static/scss/bootstrap/utilities/_position.scss
new file mode 100644
index 0000000..ef962ed
--- /dev/null
+++ b/static/scss/bootstrap/utilities/_position.scss
@@ -0,0 +1,36 @@
+// stylelint-disable declaration-no-important
+
+// Common values
+
+// Sass list not in variables since it's not intended for customization.
+$positions: static, relative, absolute, fixed, sticky;
+
+@each $position in $positions {
+ .position-#{$position} { position: $position !important; }
+}
+
+// Shorthand
+
+.fixed-top {
+ position: fixed;
+ top: 0;
+ right: 0;
+ left: 0;
+ z-index: $zindex-fixed;
+}
+
+.fixed-bottom {
+ position: fixed;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: $zindex-fixed;
+}
+
+.sticky-top {
+ @supports (position: sticky) {
+ position: sticky;
+ top: 0;
+ z-index: $zindex-sticky;
+ }
+}
diff --git a/static/scss/bootstrap/utilities/_screenreaders.scss b/static/scss/bootstrap/utilities/_screenreaders.scss
new file mode 100644
index 0000000..9f26fde
--- /dev/null
+++ b/static/scss/bootstrap/utilities/_screenreaders.scss
@@ -0,0 +1,11 @@
+//
+// Screenreaders
+//
+
+.sr-only {
+ @include sr-only();
+}
+
+.sr-only-focusable {
+ @include sr-only-focusable();
+}
diff --git a/static/scss/bootstrap/utilities/_sizing.scss b/static/scss/bootstrap/utilities/_sizing.scss
new file mode 100644
index 0000000..e95a4db
--- /dev/null
+++ b/static/scss/bootstrap/utilities/_sizing.scss
@@ -0,0 +1,12 @@
+// stylelint-disable declaration-no-important
+
+// Width and height
+
+@each $prop, $abbrev in (width: w, height: h) {
+ @each $size, $length in $sizes {
+ .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
+ }
+}
+
+.mw-100 { max-width: 100% !important; }
+.mh-100 { max-height: 100% !important; }
diff --git a/static/scss/bootstrap/utilities/_spacing.scss b/static/scss/bootstrap/utilities/_spacing.scss
new file mode 100644
index 0000000..b2e2354
--- /dev/null
+++ b/static/scss/bootstrap/utilities/_spacing.scss
@@ -0,0 +1,51 @@
+// stylelint-disable declaration-no-important
+
+// Margin and Padding
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ @each $prop, $abbrev in (margin: m, padding: p) {
+ @each $size, $length in $spacers {
+
+ .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
+ .#{$abbrev}t#{$infix}-#{$size},
+ .#{$abbrev}y#{$infix}-#{$size} {
+ #{$prop}-top: $length !important;
+ }
+ .#{$abbrev}r#{$infix}-#{$size},
+ .#{$abbrev}x#{$infix}-#{$size} {
+ #{$prop}-right: $length !important;
+ }
+ .#{$abbrev}b#{$infix}-#{$size},
+ .#{$abbrev}y#{$infix}-#{$size} {
+ #{$prop}-bottom: $length !important;
+ }
+ .#{$abbrev}l#{$infix}-#{$size},
+ .#{$abbrev}x#{$infix}-#{$size} {
+ #{$prop}-left: $length !important;
+ }
+ }
+ }
+
+ // Some special margin utils
+ .m#{$infix}-auto { margin: auto !important; }
+ .mt#{$infix}-auto,
+ .my#{$infix}-auto {
+ margin-top: auto !important;
+ }
+ .mr#{$infix}-auto,
+ .mx#{$infix}-auto {
+ margin-right: auto !important;
+ }
+ .mb#{$infix}-auto,
+ .my#{$infix}-auto {
+ margin-bottom: auto !important;
+ }
+ .ml#{$infix}-auto,
+ .mx#{$infix}-auto {
+ margin-left: auto !important;
+ }
+ }
+}
diff --git a/static/scss/bootstrap/utilities/_text.scss b/static/scss/bootstrap/utilities/_text.scss
new file mode 100644
index 0000000..f4b6e65
--- /dev/null
+++ b/static/scss/bootstrap/utilities/_text.scss
@@ -0,0 +1,52 @@
+// stylelint-disable declaration-no-important
+
+//
+// Text
+//
+
+// Alignment
+
+.text-justify { text-align: justify !important; }
+.text-nowrap { white-space: nowrap !important; }
+.text-truncate { @include text-truncate; }
+
+// Responsive alignment
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+ @include media-breakpoint-up($breakpoint) {
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+ .text#{$infix}-left { text-align: left !important; }
+ .text#{$infix}-right { text-align: right !important; }
+ .text#{$infix}-center { text-align: center !important; }
+ }
+}
+
+// Transformation
+
+.text-lowercase { text-transform: lowercase !important; }
+.text-uppercase { text-transform: uppercase !important; }
+.text-capitalize { text-transform: capitalize !important; }
+
+// Weight and italics
+
+.font-weight-light { font-weight: $font-weight-light !important; }
+.font-weight-normal { font-weight: $font-weight-normal !important; }
+.font-weight-bold { font-weight: $font-weight-bold !important; }
+.font-italic { font-style: italic !important; }
+
+// Contextual colors
+
+.text-white { color: #fff !important; }
+
+@each $color, $value in $theme-colors {
+ @include text-emphasis-variant(".text-#{$color}", $value);
+}
+
+.text-muted { color: $text-muted !important; }
+
+// Misc
+
+.text-hide {
+ @include text-hide();
+}
diff --git a/static/scss/bootstrap/utilities/_visibility.scss b/static/scss/bootstrap/utilities/_visibility.scss
new file mode 100644
index 0000000..823406d
--- /dev/null
+++ b/static/scss/bootstrap/utilities/_visibility.scss
@@ -0,0 +1,11 @@
+//
+// Visibility utilities
+//
+
+.visible {
+ @include invisible(visible);
+}
+
+.invisible {
+ @include invisible(hidden);
+}
diff --git a/static/scss/components/_alerts.scss b/static/scss/components/_alerts.scss
new file mode 100644
index 0000000..7b34f01
--- /dev/null
+++ b/static/scss/components/_alerts.scss
@@ -0,0 +1,94 @@
+.alert {
+ padding: $alert-padding-y $alert-padding-x;
+ border: 0;
+ @include border-radius($alert-border-radius);
+
+ .alert-inner--icon {
+ font-size: 1.25rem;
+ margin-right: 1.25rem;
+ display: inline-block;
+ vertical-align: middle;
+ }
+ .alert-inner--text {
+ display: inline-block;
+ vertical-align: middle;
+ }
+}
+.alert-shadow {
+ box-shadow: 0 8px 22px 0 rgba(0,0,0,0.37);
+}
+
+
+[class*="alert-"] {
+ .alert-link {
+ color: $white;
+ border-bottom: 1px dotted rgba($white, 0.5);
+ }
+}
+
+.alert-heading {
+ font-weight: $font-weight-bold;
+ font-size: $h4-font-size;
+ margin-top: 0.15rem;
+}
+
+.alert-dismissible {
+ .close {
+ top: 50%;
+ right: $alert-padding-x;
+ padding: 0;
+ transform: translateY(-50%);
+ color: $close-color;
+
+ &>span:not(.sr-only) {
+ background-color: rgba($white, 0.3);
+ line-height: 19px;
+ height: 20px;
+ width: 20px;
+ border-radius: 50%;
+ font-size: 0.8rem;
+ display: block;
+ }
+
+ &:hover,
+ &:focus {
+ color: $white;
+
+ span:not(.sr-only) {
+ background-color: rgba($white, 0.5);
+ }
+ }
+ }
+
+ .undo {
+ position: absolute;
+ right: $alert-padding-x + 2;
+ top: 50%;
+ transform: translateY(-50%);
+ color: transparentize($white, 0.5);
+ text-transform: uppercase;
+ font-size: $font-size-sm;
+ font-weight: $font-weight-bold;
+ background: transparent;
+ border: 0;
+ cursor: pointer;
+
+ &:hover,
+ &:focus {
+ color: transparentize($white, 0.2);
+ }
+ }
+}
+
+// Alert Inverse
+.alert-inverse {
+ background-color: #454545;
+ color: $white;
+}
+
+// Notify
+.alert-notify {
+ max-width: 600px;
+ width: 100%;
+ padding-right: 60px;
+}
diff --git a/static/scss/components/_avatars.scss b/static/scss/components/_avatars.scss
new file mode 100644
index 0000000..4bfdff5
--- /dev/null
+++ b/static/scss/components/_avatars.scss
@@ -0,0 +1,33 @@
+.avatar {
+ color: $white;
+ background-color: $gray-500;
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ font-size: 1rem;
+ border-radius: 50%;
+ height: 48px;
+ width: 48px;
+}
+
+.avatar img {
+ width: 100%;
+ border-radius: 50%;
+}
+
+.avatar + .avatar-content {
+ display: inline-block;
+ margin-left: .75rem;
+}
+.avatar-lg {
+ width: 58px;
+ height: 58px;
+ font-size: $font-size-sm;
+}
+
+.avatar-sm {
+ width: 38px;
+ height: 38px;
+ font-size: $font-size-sm;
+}
+
diff --git a/static/scss/components/_badge.scss b/static/scss/components/_badge.scss
new file mode 100644
index 0000000..a1a150b
--- /dev/null
+++ b/static/scss/components/_badge.scss
@@ -0,0 +1,46 @@
+.badge a {
+ color: #FFF;
+}
+
+.badge-inline {
+ margin-right: .625rem;
+}
+
+.badge-inline + span {
+ top: 2px;
+ position: relative;
+}
+
+.badge-inline + span > a {
+ text-decoration: underline;
+}
+
+.badge-md {
+ padding: .65em 1em;
+}
+
+.badge-lg {
+ padding: .85em 1.375em;
+}
+
+
+// Dot badges
+
+.badge-dot {
+ padding-left: 0;
+ padding-right: 0;
+ background: transparent;
+ color: $gray-400;
+ font-size: $font-size-sm;
+}
+.badge-dot strong {
+ color: $gray-800;
+}
+.badge-dot > i {
+ display: inline-block;
+ vertical-align: middle;
+ width: 6px;
+ height: 6px;
+ border-radius: 6px;
+ margin-right: 6px;
+}
\ No newline at end of file
diff --git a/static/scss/components/_buttons.scss b/static/scss/components/_buttons.scss
new file mode 100644
index 0000000..18ee3d6
--- /dev/null
+++ b/static/scss/components/_buttons.scss
@@ -0,0 +1,178 @@
+// Fixes
+.btn-outline-secondary {
+ color: darken(theme-color("secondary"), 50%);
+}
+
+// Sizes
+.btn-xl {
+ @include button-size($btn-padding-y-xl, $btn-padding-x-xl, $font-size-xl, $btn-line-height-xl, $btn-border-radius-xl);
+}
+
+// Icons
+.btn svg:not(:first-child),
+.btn i:not(:first-child) {
+ margin-left: 0.5rem;
+}
+
+.btn svg:not(:last-child),
+.btn i:not(:last-child) {
+ margin-right: 0.5rem;
+}
+
+// Animated
+.btn-animated {
+ position: relative;
+ overflow: hidden;
+
+ .btn-inner--visible {
+ position: relative;
+ }
+ .btn-inner--hidden {
+ position: absolute;
+ width: 100%;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+}
+
+.btn-animated-x {
+ .btn-inner--visible {
+ right: 0;
+ -webkit-transition: right .3s ease 0s;
+ transition: right .3s ease 0s;
+ }
+ .btn-inner--hidden {
+ right: -100%;
+ -webkit-transition: right .3s ease 0s;
+ transition: right .3s ease 0s;
+ }
+
+ &:hover .btn-inner--hidden {
+ right: 0;
+ }
+
+ &:hover .btn-inner--visible {
+ right: 150%;
+ }
+}
+
+.btn-animated-y {
+ .btn-inner--visible {
+ top: 0;
+ -webkit-transition: top .3s ease 0s;
+ transition: top .3s ease 0s;
+ }
+ .btn-inner--hidden {
+ left: 0;
+ bottom: -150%;
+ -webkit-transition: bottom .3s ease 0s;
+ transition: bottom .3s ease 0s;
+ }
+
+ &:hover .btn-inner--hidden {
+ bottom: 0;
+ }
+
+ &:hover .btn-inner--visible {
+ top: 100px;
+ }
+}
+
+// Labeled
+.btn-action-label {
+ .btn-label:hover {
+ background: transparent;
+ color: $gray-800;
+ }
+ .btn-secondary:hover {
+ color: theme-color("primary");
+ }
+}
+
+// Icon labels
+.btn-icon-label {
+ position: relative;
+
+ .btn-inner--icon {
+ position: absolute;
+ height: 100%;
+ line-height: 1;
+ border-radius: 0;
+ text-align: center;
+ margin: 0;
+ width: 3em;
+ background-color: rgba(0, 0, 0, .1);
+ }
+ .btn-inner--icon:not(:first-child) {
+ right: 0;
+ top: 0;
+ border-top-right-radius: inherit;
+ border-bottom-right-radius: inherit;
+ }
+ .btn-inner--icon:not(:last-child) {
+ left: 0;
+ top: 0;
+ border-top-left-radius: inherit;
+ border-bottom-left-radius: inherit;
+ }
+ .btn-inner--icon svg {
+ position: relative;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+
+ .btn-inner--text:not(:first-child) {
+ padding-left: 3em;
+ }
+ .btn-inner--text:not(:last-child) {
+ padding-right: 3em;
+ }
+}
+
+// Icons
+.btn-icon {
+ .btn-inner--text:not(:first-child) {
+ margin-left: 0.75em;
+ }
+ .btn-inner--text:not(:last-child) {
+ margin-right: 0.75em;
+ }
+}
+
+.btn-icon-only {
+ width: 3rem;
+ height: 3rem;
+ padding: 0;
+}
+a.btn-icon-only {
+ line-height: 3rem;
+}
+.btn-icon-only.btn-sm {
+ width: 2rem;
+ height: 2rem;
+}
+
+
+// Transparent buttons (remove horizontal paddings)
+.btn-nobg {
+ padding: 0;
+ background: transparent !important;
+
+ &:hover {
+ background: transparent !important;
+ border-color: transparent !important;
+ }
+}
+
+// Brand buttons
+@each $color,
+$value in $brand-colors {
+ .btn-#{$color} {
+ @include button-variant($value, $value);
+ }
+}
+
+// Hover animations
+.btn-zoom--hover:hover {
+ transform: scale(1.1);
+}
\ No newline at end of file
diff --git a/static/scss/components/_card.scss b/static/scss/components/_card.scss
new file mode 100644
index 0000000..7866c13
--- /dev/null
+++ b/static/scss/components/_card.scss
@@ -0,0 +1,93 @@
+// Images as card backgrounds
+.card-img-bg {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ background-size: cover;
+ border-radius: $card-border-radius;
+ -webkit-backface-visibility: hidden;
+ transition: all .7s cubic-bezier(.2,1,.22,1);
+ -webkit-transition: all .7s cubic-bezier(.2,1,.22,1);
+}
+
+.card:hover .card-img-bg {
+ transform: scale(1.1);
+ -webkit-transform: scale(1.1);
+}
+
+.card-img-bg ~ .card-body {
+ position: relative;
+}
+
+
+// Pricing
+
+.card-pricing {
+ .card-header {
+ padding-top: 1.25rem;
+ padding-bottom: 1.25rem;
+ }
+ .list-unstyled li {
+ padding: .5rem 0;
+ color: $gray-600;
+ }
+}
+
+.card-pricing.popular {
+ border: 3px solid theme-color("primary") !important;
+}
+
+
+// Card action buttons
+.card-icon-actions a {
+ display: inline-block;
+ margin-right: 0.625rem;
+ color: $gray-600;
+ font-size: 0.875rem;
+}
+.card-icon-actions-lg a {
+ font-size: 1.25rem;
+ margin-right: 0.875rem;
+}
+.card-icon-actions a:last-of-type {
+ margin-right: 0;
+}
+.card-icon-actions > a:hover,
+.card-icon-actions > .active {
+ color: $gray-800;
+}
+.card-icon-actions > .favorite:hover,
+.card-icon-actions > .favorite.active {
+ color: $favorite-color;
+}
+.card-icon-actions > .love:hover,
+.card-icon-actions > .love.active {
+ color: $love-color;
+}
+
+.card-icon-actions > .like:hover,
+.card-icon-actions > .like.active {
+ color: $like-color;
+}
+
+
+// Card comment box
+.card-comment-box {
+ input,
+ textarea {
+ width: 100%;
+ border: 0;
+ background: transparent;
+ padding: 0.3125rem 0;
+ margin: 0;
+ color: $gray-800;
+ outline: none;
+ resize: none;
+
+ &:focus {
+ background: transparent;
+ }
+ }
+}
\ No newline at end of file
diff --git a/static/scss/components/_carousel.scss b/static/scss/components/_carousel.scss
new file mode 100644
index 0000000..4c29f24
--- /dev/null
+++ b/static/scss/components/_carousel.scss
@@ -0,0 +1,156 @@
+/* CAROUSEL - STYLE 1 */
+.carousel--style-1 .carousel-control {
+ position: absolute;
+ top: 50%;
+ bottom: auto;
+ left: 0;
+ width: 50px;
+ height: 50px;
+ line-height: 50px;
+ margin-top: -25px;
+ font-size: 20px;
+ background: $carousel-control-bg;
+ color: $carousel-control-color;
+ text-align: center;
+ text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
+ filter: alpha(opacity=80);
+ opacity: 0.8;
+ -webkit-transition: all 100ms linear;
+ transition: all 100ms linear;
+}
+
+.carousel--style-1 .carousel-control.right {
+ right: 0;
+ left: auto;
+ border-top-left-radius: $border-radius;
+ border-bottom-left-radius: $border-radius;
+}
+
+.carousel--style-1 .carousel-control.left {
+ left: 0;
+ right: auto;
+ border-top-right-radius: $border-radius;
+ border-bottom-right-radius: $border-radius;
+}
+
+.carousel--style-1 .carousel-control:hover {
+ width: 70px;
+ background: $carousel-control-bg-hover;
+ color: $carousel-control-color-hover;
+ filter: alpha(opacity=100);
+ opacity: 1;
+}
+
+.carousel--style-1 .carousel-inner .carousel-item img {
+ //max-width: 100%;
+}
+// Carousel: STYLE 1 (variation 1)
+.carousel--style-1-v1 .carousel-control {
+ opacity: 0;
+}
+
+.carousel--style-1-v1:hover .carousel-control {
+ opacity: 1;
+}
+// Carousel: STYLE 2
+.carousel--style-2 .carousel-control {
+ position: absolute;
+ top: 50%;
+ bottom: auto;
+ left: 0;
+ width: 50px;
+ height: 50px;
+ line-height: 50px;
+ margin-top: -25px;
+ font-size: 20px;
+ background: rgba(37,37,37,0.8);
+ color: #fff;
+ text-align: center;
+ text-shadow: 0 1px 2px rgba(0,0,0,0.6);
+ filter:alpha(opacity=80);
+ opacity: 0.8;
+ -webkit-transition: all 100ms linear;
+ transition: all 100ms linear;
+}
+
+.carousel--style-2 .carousel-control.right {
+ right: 0;
+ left: auto;
+ border-top-left-radius: 2px;
+ border-bottom-left-radius: 2px;
+}
+
+.carousel--style-2 .carousel-control.left {
+ left: 0;
+ right: auto;
+ border-top-right-radius: 2px;
+ border-bottom-right-radius: 2px;
+}
+
+.carousel--style-2 .carousel-control:hover {
+ width: 70px;
+ background: #1f3a93;
+ color: #fff;
+ filter:alpha(opacity=100);
+ opacity: 1;
+}
+
+.carousel--style-2 .carousel-inner .carousel-item img {
+ max-width: 100%;
+}
+
+.carousel--style-2 .carousel-indicators {
+ position: absolute;
+ bottom: -5px;
+ left: 50%;
+ width: 60%;
+ padding-left: 0;
+ margin-left: -30%;
+ text-align: center;
+ list-style: none;
+}
+
+.carousel--style-2 .carousel-caption {
+ text-shadow: 0;
+ text-align: left;
+ background: rgba(0,0,0,0.5);
+ background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
+ background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
+ background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.65) 100%);
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr= '#00000000', endColorstr='#a6000000',GradientType=0 );
+ color: #fff;
+}
+
+.carousel--style-2 .carousel-caption {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ padding: 20px 30px;
+}
+
+.carousel--style-2 .carousel-caption .caption-title {
+ display: block;
+ margin: 10px 0 0;
+ padding: 0;
+ font-size: 22px;
+ line-height: 1.1;
+ color: #fff;
+ font-weight: 500;
+}
+
+.carousel--style-2 .carousel-caption .caption-subtitle {
+ display: block;
+ margin: 10px 0 0;
+ padding: 0;
+ font-size: 16px;
+ line-height: 1.1;
+ color: #ddd;
+ font-weight: 400;
+}
+
+.carousel--style-2 .carousel-caption .meta-info-cells li,
+.carousel--style-2 .carousel-caption .meta-info-cells li a,
+.carousel--style-2 .carousel-caption .meta-info-cells li i {
+ color: #ddd;
+}
diff --git a/static/scss/components/_close.scss b/static/scss/components/_close.scss
new file mode 100644
index 0000000..dd5ee8e
--- /dev/null
+++ b/static/scss/components/_close.scss
@@ -0,0 +1,26 @@
+.close {
+ @if $enable-transitions {
+ transition: $transition-base;
+ }
+ &>span:not(.sr-only) {
+ background-color: $close-bg;
+ line-height: 17px;
+ height: 1.25rem;
+ width: 1.25rem;
+ border-radius: 50%;
+ font-size: .8rem;
+ display: block;
+ @if $enable-transitions {
+ transition: $transition-base;
+ }
+ }
+
+ &:hover,
+ &:focus {
+ color: $white;
+
+ span:not(.sr-only) {
+ background-color: $close-hover-bg;
+ }
+ }
+}
diff --git a/static/scss/components/_collapse.scss b/static/scss/components/_collapse.scss
new file mode 100644
index 0000000..af1f7e6
--- /dev/null
+++ b/static/scss/components/_collapse.scss
@@ -0,0 +1,172 @@
+/* COLLAPSE STACKED */
+.accordion-cards--stacked .card {
+ border-radius: 0;
+}
+
+.accordion-cards--stacked .card:first-child {
+ border-top-left-radius: $border-radius;
+ border-top-right-radius: $border-radius;
+}
+
+.accordion-cards--stacked .card:last-child {
+ border-bottom-left-radius: $border-radius;
+ border-bottom-right-radius: $border-radius;
+}
+
+.accordion-cards--stacked .card + .card {
+ margin-top: 0;
+ border-top: 0;
+}
+
+/* COLLAPSE SPACED */
+.accordion-cards--spaced .card {
+ border-radius: $border-radius;
+}
+
+.accordion-cards--spaced .card + .card {
+ margin-top: $spacer;
+ //border-top: 1px solid $collapse-border-color;
+}
+
+/* STYLE 2 & STYLE 3 */
+.accordion--style-1 .card,
+.accordion--style-2 .card {
+ border: 0;
+ background: transparent;
+}
+
+.accordion--style-1 .card-block,
+.accordion--style-2 .card-block {
+ border: 0;
+}
+
+.accordion--style-1 .card-header,
+.accordion--style-2 .card-header {
+ color: #333;
+ border: none;
+ padding: 0 !important;
+}
+
+.accordion--style-1 .card-title,
+.accordion--style-2 .card-title {
+ margin: 0;
+ padding: 0;
+ font-size: $font-size-sm;
+ color: inherit;
+ background: #fff;
+ border: 0;
+}
+
+.accordion--style-2 .card-title {
+ background: #000;
+}
+
+.accordion--style-1 .card-title a,
+.accordion--style-2 .card-title a {
+ padding: 18px 35px 18px 22px;
+ display: table;
+ width: 100%;
+ border: 1px solid $collapse-border-color;
+ color: $card-heading-color;
+ font-size: $font-size-h5;
+ font-weight: 500;
+ position: relative;
+}
+
+.accordion--style-2 .card-title a {
+ border: none;
+ color: #fff;
+}
+
+.accordion--style-1 .card-title a span,
+.accordion--style-2 .card-title a span {
+ position: absolute;
+ top: 22px;
+ right: 17px;
+ color: #ccc;
+}
+
+/* STYLE 3 and 4 */
+.accordion--style-3 .card-header,
+.accordion--style-4 .card-header {
+ background-color: transparent;
+ border: none;
+ border-radius: 0;
+ padding: 0;
+}
+
+.accordion--style-4 .card-header {
+ border: 1px solid $card-border-color;
+ padding: 0 20px 0 0;
+}
+
+.accordion--style-3 .card,
+.accordion--style-4 .card {
+ margin-bottom: 1px;
+ border-radius: 0;
+ background-color: transparent;
+}
+
+.accordion--style-3 .card:first-child {
+ border-top: 1px solid $card-border-color;
+}
+
+.accordion--style-3 .card {
+ border-bottom: 1px solid $card-border-color;
+}
+
+.accordion--style-3 .card-title,
+.accordion--style-4 .card-title {
+ overflow: hidden;
+ padding: 0;
+ border: 0;
+}
+
+.accordion--style-3 .card-title a,
+.accordion--style-4 .card-title a {
+ padding: $spacer 0;
+ font-weight: 400;
+ font-size: $font-size-h6;
+ color: $card-heading-color;
+ display: table;
+ width: 100%;
+ position: relative;
+ overflow: hidden;
+}
+
+.accordion--style-4 .card-title a {
+ padding-left: 70px;
+}
+
+.accordion--style-4 .card-title a > .collapse-heading-icon {
+ position: absolute;
+ left: 0;
+ top: 0;
+ width: 54px;
+ height: 100%;
+ text-align: center;
+ line-height: 54px;
+ border-right: 1px solid $collapse-border-color;
+}
+
+.accordion--style-4 .card-title a > .collapse-heading-icon > i {
+ font-size: 28px;
+ line-height: 54px;
+ color: $color-gray-light;
+}
+
+.accordion--style-3 .card,
+.accordion--style-4 .card {
+ border: none;
+}
+
+.accordion--style-3 .card-header > .card-title,
+.accordion--style-3 .show .card-body {
+ border-bottom: 1px solid $collapse-border-color;
+}
+
+.accordion--style-3 .card-header > .card-title > a[aria-expanded="true"],
+.accordion--style-4 .card-header > .card-title > a[aria-expanded="true"] {
+ color: $color-base-1 !important;
+ text-decoration: none;
+}
diff --git a/static/scss/components/_custom-forms.scss b/static/scss/components/_custom-forms.scss
new file mode 100644
index 0000000..d3653ef
--- /dev/null
+++ b/static/scss/components/_custom-forms.scss
@@ -0,0 +1,200 @@
+// Custom controls
+.custom-control-label {
+ // Background-color and (when enabled) gradient
+ &::before {
+ border: $custom-control-indicator-border-width solid $custom-control-indicator-border-color;
+ @if $enable-transitions {
+ transition: $input-transition;
+ }
+ }
+
+ &:hover::before {
+ background: $component-hover-bg;
+ border-color: $component-hover-border-color;
+ }
+}
+
+.custom-control-input {
+ &:active~.custom-control-label::before {
+ border-color: $custom-control-indicator-active-border-color;
+ }
+}
+
+// Checkboxes */
+.custom-checkbox {
+ .custom-control-input~.custom-control-label {
+ &::after {
+ background-image: $custom-checkbox-indicator-icon-checked;
+ }
+ }
+
+ .custom-control-input:checked~.custom-control-label {
+ &::before {
+ border-color: $custom-control-indicator-checked-border-color;
+ }
+ }
+}
+
+// Radios
+.custom-radio {
+ .custom-control-input~.custom-control-label {
+ &::after {
+ background-image: $custom-radio-indicator-icon-checked;
+ }
+ }
+
+ .custom-control-input:checked~.custom-control-label {
+ &::before {
+ border-color: $custom-control-indicator-checked-border-color;
+ }
+ }
+}
+
+// Toggle switches
+
+.toggle-switch {
+ position: relative;
+ display: inline-block;
+ width: 50px;
+ height: 1.5rem;
+
+ input {
+ display: none;
+
+ &:checked+.toggle-switch-slider:before {
+ background-color: $custom-control-indicator-checked-bg;
+ border-color: $custom-control-indicator-checked-border-color;
+ }
+
+ &:checked+.toggle-switch-slider {
+ border: $custom-control-indicator-border-width solid $custom-control-indicator-checked-border-color;
+ }
+
+ &:focus+.toggle-switch-slider {
+
+ }
+
+ &:checked+.toggle-switch-slider:before {
+ -webkit-transform: translateX(1.625rem);
+ -ms-transform: translateX(1.625rem);
+ transform: translateX(1.625rem);
+ }
+
+ &:disabled+.toggle-switch-slider {
+ border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
+ }
+ &:checked:disabled+.toggle-switch-slider {
+ border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
+ }
+ &:checked:disabled+.toggle-switch-slider:before {
+ background-color: lighten($custom-control-indicator-checked-bg, 10%);
+ }
+ }
+}
+
+.toggle-switch-slider {
+ position: absolute;
+ cursor: pointer;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ border: $custom-control-indicator-border-width solid $input-border-color;
+ border-radius: $input-border-radius-sm;
+ background-color: transparent;
+ -webkit-transition: 0.4s;
+ transition: 0.4s;
+}
+
+.toggle-switch-slider:before {
+ position: absolute;
+ content: "";
+ height: 18px;
+ width: 18px;
+ left: $custom-control-indicator-border-width;
+ bottom: 2px;
+ border-radius: $input-border-radius-sm;
+ background-color: $input-border-color;
+ -webkit-transition: 0.3s;
+ transition: 0.3s;
+}
+
+.toggle-switch-slider.rounded-circle {
+ border-radius: 34px !important;
+}
+
+.toggle-switch-slider.rounded-circle:before {
+ border-radius: 50% !important;
+}
+
+
+
+
+// Custom file browser
+
+.custom-input-file {
+ width: 0.1px;
+ height: 0.1px;
+ opacity: 0;
+ outline: none;
+ overflow: hidden;
+ position: absolute;
+ z-index: -1;
+}
+
+.custom-input-file+label {
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ cursor: pointer;
+ display: block;
+ overflow: hidden;
+ padding: 0.625rem 1.25rem;
+ border: 1px solid $input-border-color;
+ border-radius: $input-border-radius;
+ color: $input-color;
+ background-color: $input-bg;
+ outline: none;
+}
+
+.custom-input-file+label:hover,
+.custom-input-file.has-focus+label,
+.custom-input-file:focus+label {
+ background-color: $input-focus-bg;
+}
+
+.no-js .custom-input-file+label {
+ display: none;
+}
+
+.custom-input-file.has-focus+label,
+.custom-input-file:focus+label {
+ outline: 1px dotted #000;
+ outline: -webkit-focus-ring-color auto 5px;
+}
+
+.custom-input-file+label i {
+ width: 1em;
+ height: 1em;
+ vertical-align: middle;
+ fill: currentColor;
+ margin-top: -0.25em;
+ margin-right: .5em;
+}
+
+
+/* Custom file input -- Style 2 */
+
+.custom-input-file--2+label {
+ color: color-yiq(theme-color("primary"));
+ border-color: theme-color("primary");
+ background: theme-color("primary");
+}
+
+.custom-input-file--2+label:hover,
+.custom-input-file--2.has-focus+label,
+.custom-input-file--2:focus+label {
+ color: color-yiq(theme-color("primary"));
+ border-color: darken(theme-color("primary"), 10%);
+ background: darken(theme-color("primary"), 10%);
+ ;
+}
\ No newline at end of file
diff --git a/static/scss/components/_delimiters.scss b/static/scss/components/_delimiters.scss
new file mode 100644
index 0000000..5a7afb2
--- /dev/null
+++ b/static/scss/components/_delimiters.scss
@@ -0,0 +1,11 @@
+[data-delimiter="1"]::before {
+ content: '';
+ display: block;
+ width: 80%;
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ margin-left: -40%;
+ height: 1px;
+ background: radial-gradient(ellipse at center, rgba(0,0,0,0.2) 0, rgba(255,255,255,0) 75%);
+}
\ No newline at end of file
diff --git a/static/scss/components/_dropdown.scss b/static/scss/components/_dropdown.scss
new file mode 100644
index 0000000..458dbaf
--- /dev/null
+++ b/static/scss/components/_dropdown.scss
@@ -0,0 +1,80 @@
+.dropdown,
+.dropup,
+.dropright,
+.dropleft {
+ display: inline-block;
+}
+
+.dropdown-menu {
+ min-width: 12rem;
+}
+
+@media (min-width:992px) {
+ .dropdown-menu {
+
+ .dropdown-menu {
+
+ }
+ }
+
+ .show>.dropdown-menu {
+
+ }
+}
+
+.dropdown-menu .dropdown-item {
+ padding: 0.5rem 1rem;
+ font-size: $font-size-sm;
+}
+
+.dropdown-menu .dropdown-item > i,
+.dropdown-menu .dropdown-item > svg {
+ margin-right: 1rem;
+ font-size: 1rem;
+ vertical-align: -17%;
+}
+
+.dropdown-header {
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+
+
+// Inverse dropdown menu
+
+.dropdown-menu-inverse {
+ background: #282f37;
+ border-color: #242a31;
+}
+
+.dropdown-menu-inverse .dropdown-item {
+ color: #dadada;
+}
+
+.dropdown-menu-inverse .dropdown-item:active,
+.dropdown-menu-inverse .dropdown-item:focus,
+.dropdown-menu-inverse .dropdown-item:hover {
+ color: #fff;
+ background: #31353e;
+}
+
+.dropdown-menu-inverse .dropdown-divider {
+ background: #191e23;
+}
+
+// Dropown: Sizes
+
+.dropdown-menu.dropdown-menu-sm {
+ min-width: 100px;
+ border: $border-radius-sm;
+}
+
+.dropdown-menu.dropdown-menu-lg {
+ min-width: 260px;
+ border-radius: $border-radius;
+}
+
+.dropdown-menu.dropdown-menu-xl {
+ min-width: 320px;
+ border-radius: $border-radius;
+}
diff --git a/static/scss/components/_footer.scss b/static/scss/components/_footer.scss
new file mode 100644
index 0000000..3d1b1c1
--- /dev/null
+++ b/static/scss/components/_footer.scss
@@ -0,0 +1,28 @@
+.footer {
+ background: $footer-bg;
+ color: $footer-color;
+
+ .nav .nav-item .nav-link,
+ .footer-link {
+ color: $footer-link-color !important;
+
+ &:hover {
+ color: $footer-link-hover-color !important;
+ }
+ }
+
+ .list-unstyled li a {
+ display: inline-block;
+ padding: .125rem 0;
+
+ &:hover {
+ color: theme-color("primary")!important;
+ }
+ }
+}
+
+.footer-dark {
+ .heading {
+ color: $white;
+ }
+}
diff --git a/static/scss/components/_forms.scss b/static/scss/components/_forms.scss
new file mode 100644
index 0000000..13d9981
--- /dev/null
+++ b/static/scss/components/_forms.scss
@@ -0,0 +1,103 @@
+/* Textareas */
+
+textarea[resize="none"] {
+ resize: none!important;
+}
+
+textarea[resize="both"] {
+ resize: both!important;
+}
+
+textarea[resize="vertical"] {
+ resize: vertical!important;
+}
+
+textarea[resize="horizontal"] {
+ resize: horizontal!important;
+}
+
+/* Form control sizing */
+
+.form-control-xl {
+ padding: $input-padding-y-xl $input-padding-x-xl;
+ font-size: $font-size-xl;
+ line-height: $input-line-height-xl;
+ @include border-radius($input-border-radius-xl);
+}
+
+select.form-control-xl {
+ &:not([size]):not([multiple]) {
+ //height: $input-height-xl;
+ }
+}
+
+
+/* Floating labels */
+
+.has-floating-label {
+ position: relative;
+}
+
+.has-floating-label .control-label {
+ font-size: $font-size-base;
+ pointer-events: none;
+ position: absolute;
+ top: 50%;
+ padding: 0 ($input-padding-x / 2);
+ margin: 0 ($input-padding-x / 2);
+ color: $input-placeholder-color;
+ transform: translateY(-50%) scale(1);
+ transform-origin: left top;
+ transition: 0.3s;
+ z-index: 1;
+}
+
+.has-floating-label .input-group .control-label {
+ left: 2rem;
+}
+
+.has-floating-label.focused .control-label {
+ padding: 0;
+ margin: 0;
+ top: -1.25rem;
+ left: 0;
+ transform: translateY(0) scale(0.85);
+}
+
+
+.has-floating-label .control-label-xl {
+ font-size: $font-size-xl;
+ padding: 0 ($input-padding-x-xl / 2);
+ margin: 0 ($input-padding-x-xl / 2);
+}
+
+.has-floating-label .control-label-lg {
+ font-size: $font-size-lg;
+ padding: 0 ($input-padding-x-lg / 2);
+ margin: 0 ($input-padding-x-lg / 2);
+}
+
+.has-floating-label .control-label-sm {
+ font-size: $font-size-sm;
+ padding: 0 ($input-padding-x-sm / 2);
+ margin: 0 ($input-padding-x-sm / 2);
+}
+
+// Alternative colors
+.form-primary {
+ .form-control {
+ color: color-yiq(theme-color("primary"));
+ background-color: darken(theme-color("primary"), 12%);
+ border: $input-border-width solid darken(theme-color("primary"), 12%);
+
+ &:focus {
+ background-color: darken(theme-color("primary"), 16%);
+ border: $input-border-width solid darken(theme-color("primary"), 16%);
+ }
+
+ // Placeholder
+ &::placeholder {
+ color: transparentize(color-yiq(theme-color("primary")), .2);
+ }
+ }
+}
\ No newline at end of file
diff --git a/static/scss/components/_icons.scss b/static/scss/components/_icons.scss
new file mode 100644
index 0000000..aff22b3
--- /dev/null
+++ b/static/scss/components/_icons.scss
@@ -0,0 +1,52 @@
+.icon {
+ width: $icon-size;
+ height: $icon-size;
+
+ i, svg {
+ font-size: $icon-size - .75;
+ }
+}
+
+.icon + .icon-text {
+ padding-left: 1rem;
+ width: calc(100% - $icon-size - 1);
+}
+
+.icon-xl {
+ width: $icon-size-xl;
+ height: $icon-size-xl
+
+ i, svg {
+ font-size: $icon-size-xl - .75;
+ }
+}
+
+.icon-xl + .icon-text {
+ width: calc(100% - $icon-size-xl - 1);
+}
+
+.icon-lg {
+ width: $icon-size-lg;
+ height: $icon-size-lg
+
+ i, svg {
+ font-size: $icon-size-lg - .75;
+ }
+}
+
+.icon-lg + .icon-text {
+ width: calc(100% - $icon-size-lg - 1);
+}
+
+.icon-sm {
+ width: $icon-size-sm;
+ height: $icon-size-sm
+
+ i, svg {
+ font-size: $icon-size-sm - .75;
+ }
+}
+
+.icon-sm + .icon-text {
+ width: calc(100% - $icon-size-sm - 1);
+}
\ No newline at end of file
diff --git a/static/scss/components/_input-group.scss b/static/scss/components/_input-group.scss
new file mode 100644
index 0000000..e3e2db5
--- /dev/null
+++ b/static/scss/components/_input-group.scss
@@ -0,0 +1,29 @@
+.input-group-text {
+ transition: $input-transition;
+}
+
+.focused .input-group-text {
+ color: $input-group-addon-focus-color;
+ background-color: $input-group-addon-focus-bg;
+ border-color: $input-group-addon-focus-border-color;
+}
+
+.input-group-transparent .input-group-text {
+ color: $input-group-addon-color;
+ background-color: transparent;
+ border: $input-border-width solid $input-group-addon-border-color;
+}
+
+.focused .input-group-transparent .input-group-text {
+ background-color: $input-focus-bg;
+}
+
+.input-group-transparent .form-control:not(:first-child) {
+ border-left: 0;
+ padding-left: 0;
+}
+
+.input-group-transparent .form-control:not(:last-child) {
+ border-right: 0;
+ padding-right: 0;
+}
diff --git a/static/scss/components/_list-group.scss b/static/scss/components/_list-group.scss
new file mode 100644
index 0000000..ce9bd74
--- /dev/null
+++ b/static/scss/components/_list-group.scss
@@ -0,0 +1,77 @@
+.list-group {
+ border-left: 0;
+ border-right: 0;
+}
+
+.list-group-item {
+ padding: 1rem 1rem;
+ border: 0;
+ border-bottom: 1px solid $border-color;
+ color: $gray-500;
+ font-size: $font-size-sm;
+ margin-bottom: 0;
+}
+
+.list-group-item-sm {
+ padding: 0.75rem 1rem;
+}
+.list-group-item:first-child {
+ border-top-right-radius: 0;
+ border-top-left-radius: 0;
+ border-top: 1px solid $border-color;
+}
+
+.list-group-item:last-child {
+ border-bottom-right-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+.list-group-item.active,
+.list-group-item.active:focus,
+.list-group-item.active:hover {
+ background-color: $gray-500;
+ color: $gray-800;
+ border-color: $gray-500;
+}
+
+.list-group-item .label {
+ margin-left: 1rem;
+}
+
+/* List groups included in cards */
+.card .list-group .list-group-item:first-child {
+ border-top: 0!important;
+}
+.card .list-group .list-group-item:last-child {
+ border-bottom: 0!important;
+}
+
+/* List group components */
+.list-group-img {
+ width: 3rem;
+ height: 3rem;
+ border-radius: 50%;
+ vertical-align: top;
+ margin: -.1rem 1.2rem 0 -.2rem;
+}
+.list-group-content {
+ -webkit-box-flex: 1;
+ -ms-flex: 1;
+ flex: 1;
+ min-width: 0;
+}
+.list-group-content > p {
+ color: $gray-500;
+ line-height: 1.5;
+ margin: .2rem 0 0;
+}
+.list-group-heading {
+ font-size: $font-size-base;
+ color: $gray-800;
+}
+.list-group-heading > small {
+ float: right;
+ color: $gray-500;
+ font-weight: 500;
+}
+
diff --git a/static/scss/components/_masks.scss b/static/scss/components/_masks.scss
new file mode 100644
index 0000000..bbdec1b
--- /dev/null
+++ b/static/scss/components/_masks.scss
@@ -0,0 +1,9 @@
+.mask {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ transition: all 0.3s ease-in-out;
+ -webkit-transition: all 0.3s ease-in-out;
+}
\ No newline at end of file
diff --git a/static/scss/components/_modal.scss b/static/scss/components/_modal.scss
new file mode 100644
index 0000000..719e2ca
--- /dev/null
+++ b/static/scss/components/_modal.scss
@@ -0,0 +1,26 @@
+.modal-content {
+ border: 0;
+ @if $enable-rounded {
+ border-radius: $modal-content-border-radius;
+ } @else {
+ border-radius: 0;
+ }
+}
+
+
+.modal-fluid {
+ .modal-dialog {
+ margin-top: 0;
+ margin-bottom: 0;
+ }
+ .modal-content {
+ border-radius: 0;
+ }
+}
+
+@each $color, $value in $theme-colors {
+ .modal-#{$color} {
+ @include modal-variant($value);
+ }
+}
+
diff --git a/static/scss/components/_nav.scss b/static/scss/components/_nav.scss
new file mode 100644
index 0000000..65264e8
--- /dev/null
+++ b/static/scss/components/_nav.scss
@@ -0,0 +1,47 @@
+.nav-link {
+ color: $nav-link-color;
+
+ &:hover {
+ color: theme-color("primary");
+ }
+}
+
+// Pills
+
+.nav-pills {
+ .nav-link {
+ padding: $nav-pills-padding-y $nav-pills-padding-x;
+ border: $nav-pills-border-width solid $nav-pills-border-color;
+ border-radius: 0;
+ color: $nav-pills-link-color;
+ font-weight: 500;
+
+ &:hover {
+ color: $nav-pills-link-hover-color;
+ }
+ }
+
+ .nav-item:not(:first-child) .nav-link {
+ border-left: 0;
+ }
+ .nav-item:first-child .nav-link {
+ border-top-left-radius: $nav-pills-border-radius;
+ border-bottom-left-radius: $nav-pills-border-radius;
+ }
+ .nav-item:last-child .nav-link {
+ border-top-right-radius: $nav-pills-border-radius;
+ border-bottom-right-radius: $nav-pills-border-radius;
+ }
+
+ .nav-link.active,
+ .show > .nav-link {
+ color: $nav-pills-link-active-color;
+ background-color: $nav-pills-link-active-bg;
+ }
+
+ @media(max-width: 576px) {
+ .nav-item {
+ margin-bottom: $spacer;
+ }
+ }
+}
\ No newline at end of file
diff --git a/static/scss/components/_navbar.scss b/static/scss/components/_navbar.scss
new file mode 100644
index 0000000..7b832eb
--- /dev/null
+++ b/static/scss/components/_navbar.scss
@@ -0,0 +1,193 @@
+.navbar-nav {
+ .nav-link {
+ font-size: $navbar-nav-link-font-size;
+ font-family: $navbar-nav-link-font-family;
+ font-weight: $navbar-nav-link-font-weight;
+ text-transform: $navbar-nav-link-text-transform;
+ letter-spacing: $navbar-nav-link-letter-spacing;
+ @if $enable-transitions {
+ -webkit-transition: $navbar-transition;
+ transition: $navbar-transition;
+ }
+ }
+
+ .dropdown-menu {}
+}
+
+@media (min-width: 992px) {
+ .navbar-nav {
+ .nav-item {
+ margin-right: 0.5rem;
+ }
+ .nav-link {
+ padding-top: $navbar-nav-link-padding-y;
+ padding-bottom: $navbar-nav-link-padding-y;
+ border-radius: $navbar-nav-link-border-radius;
+ }
+
+ .nav-link-icon {
+ border-radius: $navbar-nav-link-border-radius;
+ }
+ }
+}
+
+// Dark links against a light background
+.navbar-light {
+ .navbar-brand {
+ color: $navbar-light-active-color;
+
+ @include hover-focus {
+ color: $navbar-light-active-color;
+ }
+ }
+
+ .navbar-nav {
+ .nav-link {
+ color: $navbar-light-color;
+
+ @include hover-focus {
+ color: $navbar-light-hover-color;
+ }
+
+ &.disabled {
+ color: $navbar-light-disabled-color;
+ }
+ }
+
+ .show>.nav-link,
+ .active>.nav-link,
+ .nav-link.show,
+ .nav-link.active {
+ color: $navbar-light-active-color;
+ }
+ }
+
+ .navbar-toggler {
+ color: $navbar-light-color;
+ border-color: $navbar-light-toggler-border-color;
+ }
+
+ .navbar-toggler-icon {
+ background-image: $navbar-light-toggler-icon-bg;
+ }
+
+ .navbar-text {
+ color: $navbar-light-color;
+ a {
+ color: $navbar-light-active-color;
+
+ @include hover-focus {
+ color: $navbar-light-active-color;
+ }
+ }
+ }
+}
+
+// White links against a dark background
+.navbar-dark {
+ .navbar-nav {
+ .nav-link {
+ background-color: $navbar-dark-bg;
+
+ @include hover-focus {
+ background-color: $navbar-dark-hover-bg;
+ }
+ }
+
+ .show>.nav-link,
+ .active>.nav-link,
+ .nav-link.show,
+ .nav-link.active {
+ background-color: $navbar-dark-active-bg
+ }
+ } // .navbar-toggler {
+ // color: $navbar-dark-color;
+ // border-color: $navbar-dark-toggler-border-color;
+ // }
+ // .navbar-toggler-icon {
+ // background-image: $navbar-dark-toggler-icon-bg;
+ // }
+ // .navbar-text {
+ // color: $navbar-dark-color;
+ // a {
+ // color: $navbar-dark-active-color;
+ // @include hover-focus {
+ // color: $navbar-dark-active-color;
+ // }
+ // }
+ // }
+}
+
+
+// Transparent navbar
+@media(min-width: 992px) {
+ .navbar-transparent {
+ position: absolute;
+ top: 0;
+ width: 100%;
+ z-index: 100;
+ background-color: transparent !important;
+ border: 0;
+ box-shadow: none;
+ }
+
+ .navbar-transparent.border-bottom {
+ border-color: rgba(0, 0, 0, 0.1);
+ }
+}
+
+
+// Offset collapse
+@media (max-width: 991px) {
+ .offcanvas-collapse {
+ width: 270px;
+ position: fixed;
+ top: 0;
+ bottom: 0;
+ right: 0;
+ z-index: 1050;
+ padding: 1.5rem;
+ overflow-y: auto;
+ transition: transform 300ms, opacity 300ms;
+ transform: translate3d(100%, 0, 0);
+ opacity: 0;
+
+ .navbar-nav .nav-item {
+ margin-bottom: 0.2rem;
+ }
+ .navbar-nav .nav-link {
+ padding-left: 1rem;
+ padding-right: 1rem;
+ border-radius: $border-radius;
+ }
+ .nav-link.active {
+
+ }
+ }
+ .offcanvas-collapse.open {
+ box-shadow: -5px 0px 10px 0px rgba(0,0,0,.15);
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+
+ }
+
+ .navbar-light {
+ .offcanvas-collapse {
+ background-color: $white;
+ }
+
+ .dropdown-divider {
+ border-color: rgba(0, 0, 0, .1);
+ }
+ }
+
+ .navbar-dark {
+ .offcanvas-collapse {
+ background-color: $dark;
+ }
+
+ .dropdown-divider {
+ border-color: rgba(255, 255, 255, .1);
+ }
+ }
+}
diff --git a/static/scss/components/_pagination.scss b/static/scss/components/_pagination.scss
new file mode 100644
index 0000000..5f722d3
--- /dev/null
+++ b/static/scss/components/_pagination.scss
@@ -0,0 +1,24 @@
+.page-item .page-link,
+.page-item > span {
+ margin: 0 3px;
+ border-radius: $border-radius-sm;
+ text-align: center;
+}
+
+.pagination-circle .page-item .page-link,
+.pagination-circle .page-item > span {
+ border-radius: 50% !important;
+ margin: 0 5px;
+ display: block;
+ width: 36px;
+ height: 36px;
+}
+
+.pagination-circle.pagination-lg .page-item .page-link,
+.pagination-circle.pagination-lg .page-item > span {
+ border-radius: 50% !important;
+ margin: 0 5px;
+ display: block;
+ width: 52px;
+ height: 52px;
+}
diff --git a/static/scss/components/_popover.scss b/static/scss/components/_popover.scss
new file mode 100644
index 0000000..9f87ac7
--- /dev/null
+++ b/static/scss/components/_popover.scss
@@ -0,0 +1,14 @@
+.popover {
+ border: 0;
+}
+
+.popover-header {
+ font-weight: $font-weight-bold;
+}
+
+// Alternative colors
+@each $color, $value in $theme-colors {
+ .popover-#{$color} {
+ @include popover-variant($value);
+ }
+}
diff --git a/static/scss/components/_pricing.scss b/static/scss/components/_pricing.scss
new file mode 100644
index 0000000..a364d91
--- /dev/null
+++ b/static/scss/components/_pricing.scss
@@ -0,0 +1,498 @@
+/* Price Tags */
+.price-tag {
+ display: block;
+ padding: 0.75rem 0;
+}
+.price-tag--1 {
+ font-size: 3rem;
+}
+.price-tag--1 sup {
+ font-size: 1.25rem;
+ color: rgba(0, 0, 0, 0.4);
+ top: -1em;
+ right: -8px;
+}
+.price-tag--1 .price-type {
+ font-size: 0.875rem;
+ color: rgba(0, 0, 0, 0.4);
+ position: relative;
+ left: -10px;
+}
+.pricing-plans:after,
+.pricing-plans:before,
+.pricing-table:after,
+.pricing-table:before {
+ display: table;
+ content: " ";
+}
+.pricing-plans:before,
+.pricing-table:before {
+ clear: both;
+}
+
+.pricing-plans .plan-title {
+ margin: 0;
+ padding: 1rem 0;
+ font-size: $font-size-h5;
+ font-weight: 600;
+ color: $color-gray-dark;
+}
+.pricing-plans .price-tag {
+ margin: 0;
+ height: 90px;
+ line-height: 90px;
+ font-size: 50px;
+ font-weight: 700;
+ text-align: center;
+}
+.pricing-plans .price-tag span {
+ font-size: 28px;
+ font-weight: 600;
+}
+.pricing-plans .price-tag span.price-type {
+ font-size: 20px;
+ font-weight: 500;
+}
+.pricing-plans ul {
+ margin: 0;
+ padding: 0 15px;
+ list-style: none;
+}
+.pricing-plans ul li {
+ padding: 10px 0;
+ border-bottom: 1px solid $border-color-base;
+ font-size: $font-size-sm;
+}
+.pricing-plans ul li i {
+ margin-right: 8px;
+}
+.pricing-plans .plan-info {
+ margin: 0;
+ padding: 15px;
+ text-align: center;
+}
+.pricing-plans .plan-select {
+ padding: 15px;
+ border-top: 1px solid $border-color-base;
+}
+// Pricing plans: STYLE 1
+.pricing-plans--style-1 .block-pricing {
+ background: $card-bg;
+}
+.pricing-plans--style-1 .block-pricing.active {
+ background: $color-base-1;
+ color: $color-base-text-1;
+}
+.pricing-plans--style-1 .block-pricing.active * {
+ color: $color-base-text-1;
+}
+.pricing-plans--style-1 .block-pricing.active .btn {
+ color: $color-base-text-1 !important;
+ border-color: $color-base-text-1 !important;
+}
+.pricing-plans--style-1 .plan-title {
+ margin: 0;
+ font-size: 1rem;
+ font-weight: 500;
+ background: transparent;
+ color: $color-gray-dark;
+ text-transform: normal;
+}
+.pricing-plans--style-1 .price-tag {
+ margin: 0;
+ padding: 1rem ;
+ font-size: 4rem;
+ font-weight: 400;
+ height: auto;
+ line-height: 1;
+ text-align: center;
+ color: $color-gray-dark;
+}
+.pricing-plans--style-1 .price-tag span {
+ font-size: 28px;
+ font-weight: 600;
+ color: $color-gray-light;
+}
+.pricing-plans--style-1 .price-tag span.price-type {
+ font-size: 20px;
+ font-weight: 500;
+}
+.pricing-plans--style-1 .price-tag-subtitle {
+ font-size: 16px;
+ font-weight: 300;
+ text-transform: capitalize;
+ color: $color-gray-light;
+ display: block;
+ text-align: center;
+}
+.pricing-plans--style-1 ul li {
+ padding: 0.875rem 0;
+ color: $color-gray-light;
+}
+.pricing-plans--style-1 ul li.active {
+ color: $color-gray-dark;
+}
+// Pricing plans: STYLE 2
+.pricing-plans--style-2 .plan-title {
+ margin: 0;
+ padding: 2rem;
+ font-weight: 500;
+ //background: $color-base-1;
+ color: $color-gray-dark;
+ border-bottom: 1px solid $card-border-color;
+ text-transform: normal;
+}
+.pricing-plans--style-2 .block-pricing.active .plan-title {
+ background: $color-base-1;
+ color: $color-base-text-1;
+ border-bottom: 1px solid $color-base-1;
+}
+.pricing-plans--style-2 .block-pricing.active--style-2 .plan-title {
+ background: $color-base-4;
+ color: $color-base-text-4;
+ border-bottom: 1px solid $color-base-4;
+}
+
+.pricing-plans--style-2 .price-tag {
+ margin: 0.5rem 0 0 0;
+ padding: 1rem 0 0;
+ font-size: 3.75rem;
+ font-weight: 500;
+ height: auto;
+ line-height: 1;
+ text-align: center;
+ color: $color-gray-dark;
+}
+.pricing-plans--style-2 .price-tag span {
+ font-size: 28px;
+ font-weight: 600;
+}
+.pricing-plans--style-2 .price-tag span.price-type {
+ font-size: 20px;
+ font-weight: 500;
+}
+.pricing-plans--style-2 .price-tag-subtitle {
+ margin-top: 0.8rem;
+ font-size: 1rem;
+ font-weight: 300;
+ text-transform: capitalize;
+ color: $color-gray-light;
+ display: block;
+ text-align: center;
+}
+.pricing-plans--style-2 ul {
+ padding: 1rem 2rem;
+}
+.pricing-plans--style-2 ul li {
+ padding: 0.75rem 0;
+ border-bottom: 1px solid $card-border-color;
+ color: $color-gray-light;
+ font-size: $font-size-sm;
+}
+.pricing-plans--style-2 ul li:last-child {
+ border: 0;
+}
+.pricing-plans--style-2 ul li.active {
+ color: $color-gray-dark;
+ font-weight: 500;
+}
+
+// Style 3
+.pricing-plans--style-3 .block-pricing {
+ border: 1px solid $card-border-color;
+}
+.pricing-plans--style-3 .row-no-padding .block-pricing {
+ border-radius: 0;
+}
+.pricing-plans--style-3 .row-no-padding [class^="col-"]:not(:last-child) .block-pricing {
+ border-right: 0;
+}
+.pricing-plans--style-3 .block-pricing .plan-title-wrapper {
+ padding: $spacer;
+ text-align: center;
+ background: $color-gray-lightest;
+ border-bottom: 1px solid $card-border-color;
+}
+.pricing-plans--style-3 .block-pricing .plan-title-wrapper.active {
+ background: $color-base-1;
+ color: $color-base-text-1;
+}
+.pricing-plans--style-3 .block-pricing .plan-title-wrapper.active * {
+ color: $color-base-text-1!important;
+}
+.pricing-plans--style-3 .block-pricing .plan-title-wrapper .price-tag {
+ font-size: 4rem;
+ font-weight: 400;
+ color: $color-gray-dark;
+}
+
+.pricing-plans--style-1 .block-pricing .price-tag sup,
+.pricing-plans--style-2 .block-pricing .price-tag sup,
+.pricing-plans--style-3 .block-pricing .price-tag sup {
+ font-size: 1.5rem;
+ top: -1em;
+}
+
+.pricing-plans--style-3 .block-pricing .plan-title-wrapper .price-tag-subtitle {
+ display: inline-block;
+ margin-top: 0.5rem;
+ margin-bottom: 1rem;
+ font-size: $font-size-sm;
+ font-weight: 300;
+ text-transform: capitalize;
+}
+
+.pricing-plans--style-3 ul {
+ padding: 0;
+}
+
+.pricing-plans--style-3 ul > li {
+ padding: 15px 0;
+}
+
+// Other styles
+.pricing-plans .plan-select {
+ padding: 15px;
+ background: $card-footer-bg;
+ border-top: 1px solid $border-color-base;
+}
+.pricing-plans .block {
+ margin-top: $spacer * 2;
+ border: 1px solid $card-border-color;
+ background: $card-bg;
+ overflow: hidden;
+}
+
+@media(max-width: 767px) {
+ .pricing-plans {
+ margin-bottom: 30px;
+ }
+
+ // Style 3
+ .pricing-plans--style-3 [class^="col-"]:not(:last-child) .block-pricing {
+ border: 1px solid $card-border-color;
+ }
+}
+
+@media(min-width: 992px) {
+ .pricing-plans .block.popular {
+ margin-top: -$spacer;
+ }
+}
+
+// Promos
+.promos {
+ margin: 0 auto;
+}
+.promos:before,
+.promos:after {
+ content: '';
+ display: table;
+}
+.promos:after {
+ clear: both;
+}
+.promo {
+ margin: 15px 10px 25px;
+ padding: 5px 0 30px;
+ font-weight: 400;
+ line-height: 1.625;
+ text-align: center;
+}
+
+.promos.bg-base-1,
+.promos.bg-base-2,
+.promos.bg-base-3,
+.promos.bg-base-4,
+.promos.bg-base-5 {
+ background: transparent!important;
+}
+
+.promos.bg-base-1 .promo {
+ background: $color-base-1;
+}
+
+.promos.bg-base-2 .promo {
+ background: $color-base-2;
+}
+
+.promos.bg-base-3 .promo {
+ background: $color-base-3;
+}
+
+.promos.bg-base-4 .promo {
+ background: $color-base-4;
+}
+
+.promos.bg-base-5 .promo {
+ background: $color-base-5;
+}
+
+.promo h4 {
+ margin: 15px 0 0;
+ font-size: 150%;
+ font-weight: normal;
+}
+
+.promos.bg-base-1 .promo h4 {
+ color: $color-base-text-1;
+}
+
+.promos.bg-base-2 .promo h4 {
+ color: $color-base-text-2;
+}
+
+.promos.bg-base-3 .promo h4 {
+ color: $color-base-text-3;
+}
+
+.promos.bg-base-4 .promo h4 {
+ color: $color-base-text-4;
+}
+
+.promos.bg-base-5 .promo h4 {
+ color: $color-base-text-5;
+}
+
+.promo li {
+ padding: 5px 0;
+ font-size: $font-size-sm;
+}
+
+.promos.bg-base-1 .brief {
+ color: $color-base-text-1;
+}
+
+.promos.bg-base-2 .brief {
+ color: $color-base-text-2;
+}
+
+.promos.bg-base-3 .brief {
+ color: $color-base-text-3;
+}
+
+.promos.bg-base-4 .brief {
+ color: $color-base-text-4;
+}
+
+.promos.bg-base-5 .brief {
+ color: $color-base-text-5;
+}
+
+.promo .price {
+ margin: 10px 0;
+ padding: 5px 0;
+ font-size: 250%;
+}
+
+.promo .features {
+ margin: 0;
+ padding: 0;
+ list-style-type: none;
+}
+
+.promo .buy {
+ margin: 15px 0 0;
+}
+
+.promos.bg-base-1 .promo .features {
+ color: $color-base-text-1;
+}
+
+.promos.bg-base-2 .promo .features {
+ color: $color-base-text-2;
+}
+
+.promos.bg-base-3 .promo .features {
+ color: $color-base-text-3;
+}
+
+.promos.bg-base-4 .promo .features {
+ color: $color-base-text-4;
+}
+
+.promos.bg-base-5 .promo .features {
+ color: $color-base-text-5;
+}
+
+.promos.bg-base-1 .promo .price {
+ background: darken($color-base-1, 10%);
+ color: $color-base-text-1;
+}
+
+.promos.bg-base-2 .promo .price {
+ background: darken($color-base-2, 10%);
+ color: $color-base-text-2;
+}
+
+.promos.bg-base-3 .promo .price {
+ background: darken($color-base-3, 10%);
+ color: $color-base-text-3;
+}
+
+.promos.bg-base-4 .promo .price {
+ background: darken($color-base-4, 10%);
+ color: $color-base-text-4;
+}
+
+.promos.bg-base-5 .promo .price {
+ background: darken($color-base-5, 10%);
+ color: $color-base-text-5;
+}
+@media(min-width: 768px) {
+ .promo {
+ display: inline;
+ float: left;
+ width: 33.333%;
+ margin: 15px 0 0;
+ transition: transform 0.25s ease-out;
+ }
+
+ .promo.first {
+ border-right: none;
+ }
+
+ .promo.second {
+ float: right;
+ border-left: none;
+ }
+
+ .promo.first:hover,
+ .promo.second:hover {
+ transform: translateY(-25px);
+ }
+
+ .scale {
+ transform: scale(1.2);
+ }
+
+ .promos.bg-base-1 .scale {
+ box-shadow: 0 0 4px 1px darken($color-base-1, 10%);
+ }
+
+ .promos.bg-base-2 .scale {
+ box-shadow: 0 0 4px 1px darken($color-base-2, 10%);
+ }
+
+ .promos.bg-base-3 .scale {
+ box-shadow: 0 0 4px 1px darken($color-base-3, 10%);
+ }
+
+ .promos.bg-base-4 .scale {
+ box-shadow: 0 0 4px 1px darken($color-base-4, 10%);
+ }
+
+ .promos.bg-base-5 .scale {
+ box-shadow: 0 0 4px 1px darken($color-base-5, 10%);
+ }
+}
+@media(max-width: 767px) {
+ .promo {
+ margin-bottom: 2rem;
+ border-radius: $card-border-radius;
+ }
+
+ .promo:last-child {
+ margin-bottom: 0;
+ }
+}
diff --git a/static/scss/components/_progress.scss b/static/scss/components/_progress.scss
new file mode 100644
index 0000000..65a544f
--- /dev/null
+++ b/static/scss/components/_progress.scss
@@ -0,0 +1,104 @@
+.progress-wrapper {
+ position: relative;
+ padding-top: 1.5rem;
+}
+.progress {
+ height: 1rem;
+ margin-bottom: $spacer;
+ overflow: hidden;
+ border-radius: $border-radius-sm;
+ background-color: $progress-bg;
+ -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+.progress-inverse {
+ background-color: $dark;
+}
+.progress.progress-lg {
+ height: 1.5rem;
+}
+.progress.progress-md {
+ height: 1rem;
+}
+.progress.progress-sm {
+ height: 0.625rem;
+}
+.progress.progress-xs {
+ height: 0.25rem;
+}
+.progress .sr-only {
+ width: auto;
+ height: 20px;
+ margin: 0 0 0 30px;
+ left: 0;
+ clip: auto;
+ line-height: 20px;
+ font-size: 13px;
+}
+
+.progress-heading {
+ font-size: 14px;
+ font-weight: 500;
+ margin: 0 0 2px;
+ padding: 0;
+}
+.progress-bar {
+ //background-color: $progress-active-bg;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+ border-radius: 0;
+ height: auto;
+}
+.progress-text {
+ margin-bottom: 0;
+}
+.progress-text .mark {
+ float: left;
+ width: 50%;
+ background: transparent;
+}
+.progress-text .mark.right {
+ text-align: right;
+}
+.progress-tooltip {
+ display: inline-block;
+ background: rgba(0, 0, 0, .8);
+ color: $white;
+ padding: .25rem .375rem;
+ line-height: 1;
+ font-size: 0.7rem;
+ position: relative;
+ bottom: 8px;
+ border-radius: 3px;
+ margin-left: -15px;
+}
+.progress-tooltip:after {
+ top: 100%;
+ left: 10px;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border-color: rgba(51, 51, 51, 0);
+ border-top-color: rgba(0, 0, 0, .8);
+ border-width: 5px;
+}
+.progress-label {
+ display: inline-block;
+ color: $gray-600;
+ position: absolute;
+ top: 0;
+ left: 0;
+ font-size: $font-size-xs;
+}
+.progress-percentage {
+ display: inline-block;
+ color: $gray-600;
+ font-size: 1rem;
+ position: absolute;
+ right: 0;
+ top: 0;
+}
diff --git a/static/scss/components/_rating.scss b/static/scss/components/_rating.scss
new file mode 100644
index 0000000..c3eb68e
--- /dev/null
+++ b/static/scss/components/_rating.scss
@@ -0,0 +1,65 @@
+.star-rating {
+ display: inline-block;
+}
+
+.star-rating i {
+ display: inline-block;
+ color: $star-rating-color-active;
+ //font-size: $font;
+}
+.star-rating-sm i {
+ font-size: $font-size-xs;
+}
+// Rating stars: ANIMATED
+.rating {
+ display: inline-block;
+}
+
+.rating span.star {
+ font-family: FontAwesome;
+ font-weight: normal;
+ font-style: normal;
+ float: left;
+ padding: 0 1px;
+ cursor: pointer;
+}
+
+.rating span.star:before {
+ content: "\f005";
+ display: block;
+ font-size: 14px;
+ color: $star-rating-color;
+ -webkit-transition: all 0.2s linear;
+ -moz-transition: all 0.2s linear;
+ -ms-transition: all 0.2s linear;
+ transition: all 0.2s linear;
+}
+
+.rating-lg span.star:before {
+ font-size: 18px;
+}
+
+.rating-xl span.star:before {
+ font-size: 24px;
+}
+
+.rating span.voted:before {
+ color: $star-rating-color-active;
+}
+
+.rating:hover span.star:before {
+ color: $star-rating-color;
+}
+
+.rating:hover span.star.over:before {
+ color: $star-rating-color-active;
+}
+
+// Rating - Other elements
+.rating > .rating-count {
+ font-size: $font-size-xs;
+ color: $color-gray-light;
+ position: relative;
+ top: -3px;
+ margin-left: $spacer;
+}
diff --git a/static/scss/components/_section.scss b/static/scss/components/_section.scss
new file mode 100644
index 0000000..c888525
--- /dev/null
+++ b/static/scss/components/_section.scss
@@ -0,0 +1,43 @@
+// Main Wrapper
+.main {
+ position: relative;
+}
+
+// Sections
+.slice {
+ position: relative;
+ padding-top: $spacer * 4;
+ padding-bottom: $spacer * 4;
+}
+
+.slice-xl {
+ padding-top: $spacer * 8;
+ padding-bottom: $spacer * 8;
+}
+
+.slice-lg {
+ padding-top: $spacer * 6;
+ padding-bottom: $spacer * 6;
+}
+
+.slice-sm {
+ padding-top: $spacer * 2;
+ padding-bottom: $spacer * 2;
+}
+
+// Offset top when navbar has absolute or fixed position
+.offset-top {
+ padding-top: $spacer * 4;
+}
+
+.offset-top-xl {
+ padding-top: $spacer * 8;
+}
+
+.offset-top-lg {
+ padding-top: $spacer * 6;
+}
+
+.offset-top-sm {
+ padding-top: $spacer * 2;
+}
diff --git a/static/scss/components/_sidebar.scss b/static/scss/components/_sidebar.scss
new file mode 100644
index 0000000..a6cd57d
--- /dev/null
+++ b/static/scss/components/_sidebar.scss
@@ -0,0 +1,3 @@
+.sidebar-sticky.is_stuck {
+ padding-top: 1.5rem;
+}
\ No newline at end of file
diff --git a/static/scss/components/_social.scss b/static/scss/components/_social.scss
new file mode 100644
index 0000000..2e94637
--- /dev/null
+++ b/static/scss/components/_social.scss
@@ -0,0 +1,144 @@
+// General styling
+.social-media {
+ margin: 0;
+ padding: 0;
+ position: relative;
+ list-style: none;
+}
+.social-media > li {
+ display: inline-block;
+ font-size: 1rem;
+}
+.social-media > li > a {
+ display: block;
+}
+
+// Social - Style 1
+[class*="social-media--style-1"] > li > a {
+ width: 34px;
+ height: 34px;
+ line-height: 34px;
+ text-align: center;
+ margin-right: 0.3rem;
+ background: transparent;
+}
+[class*="social-media--style-1"] > li > a:hover {
+ background: $color-base-1;
+ color: $color-base-text-1;
+}
+.social-media-circle > li > a {
+ border-radius: 100%;
+}
+.social-media-round > li > a {
+ border-radius: $border-radius;
+}
+// STYLE 1 - Variation 1
+.social-media.social-media--style-1-v1 > li > a {
+ background: $color-base-1;
+ color: $color-base-text-1;
+}
+.social-media.social-media--style-1-v1 > li > a:hover {
+ background: darken($color-base-1, 10%);
+}
+// STYLE 1 - Variation 2
+.social-media.social-media--style-1-v2 > li > a {
+ background: #ddd;
+ color: #333;
+}
+.social-media.social-media--style-1-v2 > li > a:hover {
+ background: $color-base-1;
+ color: $color-base-text-1;
+}
+// STYLE 1 - Variation 3
+.social-media.social-media--style-1-v3 > li > a {
+ background: $color-gray-dark;
+ color: $color-gray-lighter;
+}
+.social-media.social-media--style-1-v3 > li > a:hover {
+ background: $color-base-1;
+ color: $color-base-text-1;
+}
+// STYLE 1 - Variation 4 (no bg color)
+.social-media.social-media--style-1-v4 > li > a {
+ font-size: 1rem;
+ width: auto;
+ height: auto;
+ padding-left: 0;
+ padding-right: 0;
+ margin-right: 1rem;
+ background: transparent;
+ color: rgba(0, 0, 0, 0.7);
+}
+.social-media.social-media--style-1-v4 > li > a:hover {
+ background: transparent;
+ color: rgba(0, 0, 0, 0.9);
+}
+.social-media.social-media--style-1-v4 > li:last-child > a {
+ margin-right: 0;
+}
+// STYLE 1 - Variation 5 (no bg color)
+.social-media.social-media--style-1-v5 > li > a {
+ font-size: 1rem;
+ width: auto;
+ height: auto;
+ padding-left: 0;
+ padding-right: 0;
+ margin-right: 1rem;
+ background: transparent;
+ color: rgba(255, 255, 255, 0.7);
+}
+.social-media.social-media--style-1-v5 > li > a:hover {
+ background: transparent;
+ color: rgba(255, 255, 255, 1);
+}
+.social-media.social-media--style-1-v5 > li:last-child > a {
+ margin-right: 0;
+}
+.social-media.social-media--style-1-v5 > li > span {
+ color: rgba(255, 255, 255, 0.5);
+}
+// Original brand colors
+.social-media-brand-color > li > a.facebook,
+.social-media-brand-color--hover > li > a.facebook:hover {
+ background: $color-facebook;
+ color: $color-facebook-text;
+}
+.social-media-brand-color > li > a.twitter,
+.social-media-brand-color--hover > li > a.twitter:hover {
+ background: $color-twitter;
+ color: $color-twitter-text;
+}
+.social-media-brand-color > li > a.instagram,
+.social-media-brand-color--hover > li > a.instagram:hover {
+ background: $color-instagram;
+ color: $color-instagram-text;
+}
+.social-media-brand-color > li > a.linkedin,
+.social-media-brand-color--hover > li > a.linkedin:hover {
+ background: $color-linkedin;
+ color: $color-linkedin-text;
+}
+.social-media-brand-color > li > a.pinterest,
+.social-media-brand-color--hover > li > a.pinterest:hover {
+ background: $color-pinterest;
+ color: $color-pinterest-text;
+}
+.social-media-brand-color > li > a.dribbble,
+.social-media-brand-color--hover > li > a.dribbble:hover {
+ background: $color-dribbble;
+ color: $color-dribbble-text;
+}
+.social-media-brand-color > li > a.googleplus,
+.social-media-brand-color--hover > li > a.googleplus:hover {
+ background: $color-googleplus;
+ color: $color-googleplus-text;
+}
+.social-media-brand-color > li > a.skype,
+.social-media-brand-color--hover > li > a.skype:hover {
+ background: $color-skype;
+ color: $color-skype-text;
+}
+.social-media-brand-color:not(.social-media-brand-color--hover) > li > a:hover {
+ background: $color-base-1;
+ color: $color-base-text-1;
+}
diff --git a/static/scss/components/_spotlight.scss b/static/scss/components/_spotlight.scss
new file mode 100644
index 0000000..326dd80
--- /dev/null
+++ b/static/scss/components/_spotlight.scss
@@ -0,0 +1,12 @@
+.spotlight {
+ position: relative;
+ .container {
+ height: 100%;
+ }
+}
+
+@media (min-height: 600px) and (min-width: 767px) {
+ [data-spotlight="fullscreen"] {
+ height: 100vh;
+ }
+}
\ No newline at end of file
diff --git a/static/scss/components/_tables.scss b/static/scss/components/_tables.scss
new file mode 100644
index 0000000..3573314
--- /dev/null
+++ b/static/scss/components/_tables.scss
@@ -0,0 +1,75 @@
+.table
+.table.align-items-center,
+.table.align-items-center {
+ th,
+ td {
+ vertical-align: middle;
+ }
+}
+
+.table-hover {
+ tr {
+ @if $enable-transitions {
+ -webkit-transition: $transition-base;
+ transition: $transition-base;
+ }
+ }
+}
+
+.table.table-cards {
+ border-collapse: collapse;
+}
+
+.table.table-cards {
+ th,
+ td {
+ border: none;
+ }
+}
+
+.table-cards tr.bg-white {
+ > th,
+ > td {
+ padding: 1rem;
+ position: relative;
+ }
+}
+
+.table-cards tr.bg-white>th:after,
+.table-cards tr.bg-white>td:after {
+ content: '';
+ position: absolute;
+ width: 100%;
+ height: 100%;
+ border-top: 1px solid $table-border-color;
+ border-bottom: 1px solid $table-border-color;
+ left: 0;
+ top: 0;
+ pointer-events: none;
+}
+
+.table-cards tr.bg-white>th {
+ border-radius: $border-radius 0 0 $border-radius;
+}
+
+.table-cards tr.bg-white>th:after {
+ border-radius: $border-radius 0 0 $border-radius;
+ border-left: 1px solid $table-border-color;
+}
+
+.table-cards tr.bg-white>td:last-child {
+ border-radius: 0 $border-radius $border-radius 0;
+}
+
+.table-cards tr.bg-white>td:last-child:after {
+ border-radius: 0 $border-radius $border-radius 0;
+ border-right: 1px solid $table-border-color;
+}
+
+.table-hover tr.bg-white:hover {
+ background-color: $table-hover-bg !important;
+}
+
+tr.table-divider {
+ height: 0.75rem;
+}
\ No newline at end of file
diff --git a/static/scss/components/_tabs.scss b/static/scss/components/_tabs.scss
new file mode 100644
index 0000000..b7b63a0
--- /dev/null
+++ b/static/scss/components/_tabs.scss
@@ -0,0 +1,248 @@
+.tab-body {
+ padding: 15px;
+}
+.tabbable-panel {
+ border: 1px solid $tab-panel-border-color;
+ padding: 10px;
+}
+.tabs.tabs--centered > .nav {
+ text-align: center;
+}
+.tabs.tabs--centered > .nav > li {
+ float: none;
+ display: inline-block;
+}
+
+// Tabs with image buttons
+.nav-tab-image-wrapper:hover {
+ cursor: pointer;
+}
+.nav-tab-image-wrapper .nav-tab-image {
+ display: block;
+ width: 96px;
+ height: 96px;
+ margin: auto;
+ border: 2px solid $border-color-base;
+}
+.nav-tab-image-wrapper:hover .nav-tab-image {
+ border-color: $color-base-1;
+}
+.nav-tab-image-wrapper .nav-tab-image img {
+ width: 100%;
+}
+.nav-tab-image-wrapper .nav-tab-image-title {
+ padding-top: 10px;
+ padding-bottom: 10px;
+ display: block;
+ font-weight: 600;
+ color: $heading-color;
+ font-size: $font-size-h6;
+ font-family: $font-family-alt;
+}
+.nav-tab-image-wrapper:hover .nav-tab-image-title {
+ color: $color-base-1;
+}
+// Rounded pills navigation (timeline style)
+@media(max-width: 991px) {
+ .tabs .nav-pills.nav-pills--rounded > li {
+ display: block;
+ margin-bottom: 5px;
+ }
+}
+@media(min-width: 992px) {
+ .tabs .nav-pills.nav-pills--rounded {
+ padding: 0 50px;
+ }
+ .tabs .nav-pills.nav-pills--rounded > li > a,
+ .tabs .nav-pills.nav-pills--rounded > li > a.active {
+ min-width: 200px;
+ background: transparent;
+ border: 0;
+ padding: 0;
+ position: relative;
+ }
+
+ .tabs .nav-pills.nav-pills--rounded > li:last-child > a {
+ min-width: auto;
+ }
+ .tabs .nav-pills.nav-pills--rounded > li > a:before {
+ content: "";
+ position: relative;
+ display: block;
+ top: 40px;
+ height: 1px;
+ margin-left: 105px;
+ margin-right: 0;
+ background: lighten($nav-pill-bg, 3%);
+ z-index: 0;
+ }
+ .tabs .nav-pills.nav-pills--rounded > li:last-child > a:before {
+ background: transparent;
+ }
+ .tabs .nav-pills.nav-pills--rounded > li > a > .nav-pill {
+ position: relative;
+ display: block;
+ width: 100px;
+ height: 100px;
+ }
+ .tabs .nav-pills.nav-pills--rounded > li > a > .nav-pill > .nav-pill-circle {
+ position: relative;
+ display: block;
+ width: 80px;
+ height: 80px;
+ line-height: 80px;
+ margin: auto;
+ text-align: center;
+ border-radius: 100%;
+ background: $nav-pill-bg;
+ color: $nav-pill-color;
+ font-size: 16px;
+ font-weight: 600;
+ font-family: $font-family-alt;
+ z-index: 10;
+ }
+ .tabs .nav-pills.nav-pills--rounded > li > a > .nav-pill > .nav-pill-circle > i {
+ display: block;
+ width: 80px;
+ height: 80px;
+ line-height: 80px;
+ font-size: 40px;
+ }
+
+ .tabs .nav-pills.nav-pills--rounded a:hover .nav-pill .nav-pill-circle {
+ background: darken($nav-pill-bg, 15%);
+ }
+
+ .tabs .nav-pills.nav-pills--rounded .active .nav-pill .nav-pill-circle,
+ .tabs .nav-pills.nav-pills--rounded a.active:hover .nav-pill .nav-pill-circle {
+ background: $color-base-1;
+ color: $color-base-text-1;
+ }
+
+ .tabs .nav-pills.nav-pills--rounded > li > a > .nav-pill > .nav-pill-text {
+ display: block;
+ margin: 10px 0 20px 0;
+ color: $color-gray-light;
+ font-size: 13px;
+ }
+}
+// Tabs - STYLE 1
+.tabs--style-1 .tab-content {
+ background-color: $tab-content-bg;
+ border: 1px solid $tab-content-border-color;
+}
+.tabs--style-1 .tab-pane {
+ border: 0;
+}
+.tabs--style-1 .nav-tabs {
+ border: 0;
+}
+.tabs--style-1 .nav-tabs > li {
+ margin-right: 5px;
+}
+.tabs--style-1 .nav-tabs > li > a {
+ border-radius: 0;
+ margin: 0;
+ text-align: center;
+ background-color: #FFF;
+ border-left: 0;
+ -webkit-transition: all 100ms linear;
+ transition: all 100ms linear;
+ padding: 18px 32px;
+ display: table;
+ width: 100%;
+ border: 1px solid #f1f1f1;
+ color: #000;
+ font-size: 13px;
+ font-family: $font-family-alt;
+ position: relative;
+}
+.tabs--style-1 .nav-tabs > li > a:hover {
+ background: $color-base-1;
+ color: $color-base-text-1;
+}
+.tabs--style-1 .nav-tabs > li > a.active {
+ border: 1px solid $color-base-1;
+ background: $color-base-1;
+ color: $color-base-text-1;
+}
+.tabs--style-1 .nav-tabs > li:first-child > a.active {
+ border-left: 1px solid $color-base-1;
+}
+
+.tabs--style-1 .nav-tabs > li.active > a,
+.tabs--style-1 .nav-tabs > li.active > a:focus,
+.tabs--style-1 .nav-tabs > li.active > a:hover {
+ background: $color-base-1;
+ color: $color-base-text-1;
+}
+.tabs--style-1 .tab-content {
+ margin-top: 5px;
+ border: 1px solid #f1f1f1;
+}
+
+// Tabs - STYLE 2
+.tabs--style-2 .nav-tabs {
+ border-bottom: 1px solid $nav-tabs-border-color;
+ padding: 0 20px;
+ margin: 0;
+}
+.tabs--style-2 .nav-tabs .nav-item {
+ margin-right: $spacer * 2;
+}
+.tabs--style-2 .nav-tabs .nav-item:last-child {
+ margin-right: 0;
+}
+.tabs--style-2 .nav-tabs .nav-link {
+ border: 0;
+ border-bottom: 1px solid transparent;
+ margin-right: 0;
+ color: $nav-tab-color;
+ padding: 1rem 0;
+ font-size: $font-size-sm;
+ font-family: $font-family-alt;
+}
+.tabs--style-2 > .nav-tabs > li > a > i {
+ color: #a6a6a6;
+}
+
+.tabs--style-2 > .nav-tabs .nav-link
+.tabs--style-2 > .nav-tabs .nav-link.active,
+.tabs--style-2 > .nav-tabs .nav-link:hover {
+ // border-bottom: 1px solid $color-base-1;
+ // background: none !important;
+ // color: $color-base-1;
+}
+
+
+.tabs--style-2 .nav-tabs .nav-item.show .nav-link,
+.tabs--style-2 .nav-tabs .nav-link.active,
+.tabs--style-2 .nav-tabs .nav-link:hover {
+ border-bottom: 1px solid $color-base-1;
+ background: transparent !important;
+ color: $color-base-1;
+}
+
+
+.tabs--style-2 > .nav-tabs > li.show > a > i,
+.tabs--style-2 > .nav-tabs > li:hover > a > i {
+ color: #a6a6a6;
+}
+.tabs--style-2 > .nav-tabs > li.open .dropdown-menu,
+.tabs--style-2 > .nav-tabs > li:hover .dropdown-menu {
+ margin-top: 0;
+}
+
+.tabs--style-2 > .nav-tabs > li.active > a > i {
+ color: $color-base-1;
+}
+.tabs--style-2 > .tab-content {
+ margin-top: 0;
+ border: 0;
+ border-top: 0;
+ padding: 15px 0;
+}
+.tabs--style-2.tabs--centered > .tab-content {
+ border-top: 0;
+ padding-top: 20px;
+}
diff --git a/不夜城考试/__init__.py b/static/scss/components/_tooltip.scss
similarity index 100%
rename from 不夜城考试/__init__.py
rename to static/scss/components/_tooltip.scss
diff --git a/static/scss/components/_type.scss b/static/scss/components/_type.scss
new file mode 100644
index 0000000..5baa032
--- /dev/null
+++ b/static/scss/components/_type.scss
@@ -0,0 +1,47 @@
+// General styles
+body {
+ font-family: $font-family-base;
+ font-size: $font-size-base;
+ line-height: $line-height-base;
+}
+
+
+// Headings
+.heading {
+ font-family: $font-family-alt;
+}
+
+
+// Fluid paragraph
+.fluid-paragraph {
+ width: 680px;
+ margin: auto;
+ padding: 0 1.5rem;
+ position: relative;
+}
+
+@media (max-width: 767px) {
+ .fluid-paragraph {
+ width: 100%;
+ }
+}
+
+
+// Links
+
+.link {
+ @if $enable-transitions {
+ transition: all 0.3s ease-in-out;
+ -webkit-transition: all 0.3s ease-in-out;
+ }
+}
+
+[data-link="1"] {
+ padding-bottom: 8px;
+ border-bottom: 3px solid theme-color("primary");
+ color: $gray-800;
+
+ &:hover {
+ color: theme-color("primary");
+ }
+}
diff --git a/static/scss/components/_well.scss b/static/scss/components/_well.scss
new file mode 100644
index 0000000..315e105
--- /dev/null
+++ b/static/scss/components/_well.scss
@@ -0,0 +1,7 @@
+.well {
+ border-radius: $border-radius;
+ background: $color-gray-lighter;
+ border-color: $color-gray-light;
+ -webkit-box-shadow: none;
+ box-shadow: none;
+}
diff --git a/static/scss/components/vendor/_bootstrap-select.scss b/static/scss/components/vendor/_bootstrap-select.scss
new file mode 100644
index 0000000..1aad063
--- /dev/null
+++ b/static/scss/components/vendor/_bootstrap-select.scss
@@ -0,0 +1,483 @@
+// Default styles
+
+select.bs-select-hidden,
+select.selectpicker {
+ display: none!important
+}
+
+.bootstrap-select {
+ width: 220px\9
+}
+
+.bootstrap-select>.dropdown-toggle {
+ width: 100%;
+ padding-right: 25px;
+ z-index: 1
+}
+
+.bootstrap-select>select {
+ position: absolute!important;
+ bottom: 0;
+ left: 50%;
+ display: block!important;
+ width: .5px!important;
+ height: 100%!important;
+ padding: 0!important;
+ opacity: 0!important;
+ border: none
+}
+
+.bootstrap-select>select.mobile-device {
+ top: 0;
+ left: 0;
+ display: block!important;
+ width: 100%!important;
+ z-index: 2
+}
+
+.error .bootstrap-select .dropdown-toggle,
+.has-error .bootstrap-select .dropdown-toggle {
+ border-color: #b94a48
+}
+
+.bootstrap-select.fit-width {
+ width: auto!important
+}
+
+.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
+ width: 220px
+}
+
+.bootstrap-select .dropdown-toggle:focus {
+ outline: thin dotted #333!important;
+ outline: 5px auto -webkit-focus-ring-color!important;
+ outline-offset: -2px
+}
+
+.bootstrap-select.form-control {
+ margin-bottom: 0;
+ padding: 0;
+ border: none
+}
+
+.bootstrap-select.form-control:not([class*=col-]) {
+ width: 100%
+}
+
+.bootstrap-select.form-control.input-group-btn {
+ z-index: auto
+}
+
+.bootstrap-select.form-control.input-group-btn:not(:first-child):not(:last-child)>.btn {
+ border-radius: 0
+}
+
+.bootstrap-select.btn-group:not(.input-group-btn),
+.bootstrap-select.btn-group[class*=col-] {
+ float: none;
+ display: inline-block;
+ margin-left: 0
+}
+
+.bootstrap-select.btn-group.dropdown-menu-right,
+.bootstrap-select.btn-group[class*=col-].dropdown-menu-right,
+.row .bootstrap-select.btn-group[class*=col-].dropdown-menu-right {
+ float: right
+}
+
+.form-group .bootstrap-select.btn-group,
+.form-horizontal .bootstrap-select.btn-group,
+.form-inline .bootstrap-select.btn-group {
+ margin-bottom: 0
+}
+
+.form-group-lg .bootstrap-select.btn-group.form-control,
+.form-group-sm .bootstrap-select.btn-group.form-control {
+ padding: 0
+}
+
+.form-group-lg .bootstrap-select.btn-group.form-control .dropdown-toggle,
+.form-group-sm .bootstrap-select.btn-group.form-control .dropdown-toggle {
+ height: 100%;
+ font-size: inherit;
+ line-height: inherit;
+ border-radius: inherit
+}
+
+.form-inline .bootstrap-select.btn-group .form-control {
+ width: 100%
+}
+
+.bootstrap-select.btn-group.disabled,
+.bootstrap-select.btn-group>.disabled {
+ cursor: not-allowed
+}
+
+.bootstrap-select.btn-group.disabled:focus,
+.bootstrap-select.btn-group>.disabled:focus {
+ outline: 0!important
+}
+
+.bootstrap-select.btn-group.bs-container {
+ position: absolute;
+ height: 0!important;
+ padding: 0!important
+}
+
+.bootstrap-select.btn-group.bs-container .dropdown-menu {
+ z-index: 1060
+}
+
+.bootstrap-select.btn-group .dropdown-toggle .filter-option {
+ display: inline-block;
+ overflow: hidden;
+ width: 100%;
+ text-align: left
+}
+
+.bootstrap-select.btn-group .dropdown-toggle .caret {
+ position: absolute;
+ top: 50%;
+ right: 12px;
+ margin-top: -2px;
+ vertical-align: middle
+}
+
+.bootstrap-select.btn-group[class*=col-] .dropdown-toggle {
+ width: 100%
+}
+
+.bootstrap-select.btn-group .dropdown-menu {
+ min-width: 100%;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box
+}
+
+.bootstrap-select.btn-group .dropdown-menu.inner {
+ display: block;
+ position: static;
+ float: none;
+ border: 0;
+ padding: 0;
+ margin: 0;
+ border-radius: 0;
+ -webkit-box-shadow: none;
+ box-shadow: none
+}
+
+.bootstrap-select.btn-group .dropdown-menu li {
+ position: relative
+}
+
+.bootstrap-select.btn-group .dropdown-menu li.active small {
+ color: #fff
+}
+
+.bootstrap-select.btn-group .dropdown-menu li.disabled a {
+ cursor: not-allowed
+}
+
+.bootstrap-select.btn-group .dropdown-menu li a {
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none
+}
+
+.bootstrap-select.btn-group .dropdown-menu li a.opt {
+ position: relative;
+ padding-left: 2.25em
+}
+
+.bootstrap-select.btn-group .dropdown-menu li a span.check-mark {
+ display: none
+}
+
+.bootstrap-select.btn-group .dropdown-menu li a span.text {
+ display: inline-block
+}
+
+.bootstrap-select.btn-group .dropdown-menu li small {
+ padding-left: .5em
+}
+
+.bootstrap-select.btn-group .dropdown-menu .notify {
+ position: absolute;
+ bottom: 5px;
+ width: 96%;
+ margin: 0 2%;
+ min-height: 26px;
+ padding: 3px 5px;
+ background: #f5f5f5;
+ border: 1px solid #e3e3e3;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
+ pointer-events: none;
+ opacity: .9;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box
+}
+
+.bootstrap-select.btn-group .no-results {
+ padding: 3px;
+ background: #f5f5f5;
+ margin: 0 5px;
+ white-space: nowrap
+}
+
+.bootstrap-select.btn-group.fit-width .dropdown-toggle .filter-option {
+ position: static
+}
+
+.bootstrap-select.btn-group.fit-width .dropdown-toggle .caret {
+ position: static;
+ top: auto;
+ margin-top: -1px
+}
+
+.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
+ position: absolute;
+ display: inline-block;
+ right: 15px;
+ margin-top: 5px
+}
+
+.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
+ margin-right: 34px
+}
+
+.bootstrap-select.show-menu-arrow.open>.dropdown-toggle {
+ z-index: 1061
+}
+
+.bootstrap-select.show-menu-arrow .dropdown-toggle:before {
+ content: '';
+ border-left: 7px solid transparent;
+ border-right: 7px solid transparent;
+ border-bottom: 7px solid rgba(204, 204, 204, .2);
+ position: absolute;
+ bottom: -4px;
+ left: 9px;
+ display: none
+}
+
+.bootstrap-select.show-menu-arrow .dropdown-toggle:after {
+ content: '';
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ border-bottom: 6px solid #fff;
+ position: absolute;
+ bottom: -4px;
+ left: 10px;
+ display: none
+}
+
+.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:before {
+ bottom: auto;
+ top: -3px;
+ border-top: 7px solid rgba(204, 204, 204, .2);
+ border-bottom: 0
+}
+
+.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:after {
+ bottom: auto;
+ top: -3px;
+ border-top: 6px solid #fff;
+ border-bottom: 0
+}
+
+.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:before {
+ right: 12px;
+ left: auto
+}
+
+.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:after {
+ right: 13px;
+ left: auto
+}
+
+.bootstrap-select.show-menu-arrow.open>.dropdown-toggle:after,
+.bootstrap-select.show-menu-arrow.open>.dropdown-toggle:before {
+ display: block
+}
+
+.bs-actionsbox,
+.bs-donebutton,
+.bs-searchbox {
+ padding: 4px 8px
+}
+
+.bs-actionsbox {
+ width: 100%;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box
+}
+
+.bs-actionsbox .btn-group button {
+ width: 50%
+}
+
+.bs-donebutton {
+ float: left;
+ width: 100%;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box
+}
+
+.bs-donebutton .btn-group button {
+ width: 100%
+}
+
+.bs-searchbox+.bs-actionsbox {
+ padding: 0 8px 4px;
+}
+
+.bs-searchbox .form-control {
+ margin-bottom: 0;
+ width: 100%;
+ float: none;
+ padding: 1rem;
+}
+
+
+// Custom styles
+
+.bootstrap-select:not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
+ width: 100%;
+}
+
+.bootstrap-select .dropdown-toggle {
+ text-align: left;
+}
+
+.bootstrap-select .btn-default.bs-placeholder {
+ color: $input-placeholder-color;
+ font-weight: normal;
+}
+.bootstrap-select .dropdown-toggle.btn-default {
+ color: $input-color;
+ background-color: $input-bg;
+ border-color: $input-border-color;
+ text-align: left;
+}
+
+.bootstrap-select .bs-placeholder {
+ font-weight: normal;
+}
+
+.bootstrap-select .btn-default.bs-placeholder {
+ color: $input-placeholder-color;
+}
+
+.bootstrap-select .dropdown-toggle.btn-default:active,
+.bootstrap-select.show > .btn-default.dropdown-toggle {
+ background-color: $input-group-addon-bg;
+ color: $input-group-addon-color;
+ border-color: $input-group-addon-border-color;
+ box-shadow: none;
+}
+
+.bootstrap-select .btn svg,
+.bootstrap-select .btn i {
+ margin-right: 0.5rem;
+ color: $gray-600;
+}
+
+// Input group
+.input-group>.input-group-prepend>.bootstrap-select,
+.input-group>.input-group-append>.bootstrap-select {
+ max-width: 100%;
+}
+
+.input-group .bootstrap-select .btn {
+ display: flex;
+ align-items: center;
+ padding: $input-padding-y 2rem $input-padding-y $input-padding-x;
+ margin-bottom: 0;
+ font-size: $font-size-base;
+ font-weight: $font-weight-normal;
+ line-height: $input-line-height;
+ color: $input-group-addon-color;
+ text-align: center;
+ white-space: nowrap;
+ background-color: $input-group-addon-bg;
+ border: $input-border-width solid $input-group-addon-border-color;
+ @include border-radius($input-border-radius);
+}
+
+.input-group>.input-group-prepend>.bootstrap-select>.btn {
+ border-top-right-radius: 0;
+ border-bottom-right-radius: 0;
+}
+
+.input-group>.input-group-append>.bootstrap-select>.btn {
+ border-top-left-radius: 0;
+ border-bottom-left-radius: 0;
+}
+
+.focused .bootstrap-select .btn {
+ color: $input-group-addon-focus-color;
+ background-color: $input-group-addon-focus-bg;
+ border-color: $input-group-addon-focus-border-color;
+}
+
+// Dropdown menu
+.bootstrap-select.show>.dropdown-menu>.dropdown-menu {
+ display: block;
+}
+
+.bootstrap-select .dropdown-menu .selected .dropdown-item {
+ color: $primary;
+}
+.bootstrap-select>.dropdown-menu>.dropdown-menu li.hidden {
+ display: none;
+}
+.bootstrap-select.btn-group .dropdown-menu li small {
+ display: block;
+ padding: 0;
+}
+
+.bootstrap-select .dropdown-menu .dropdown-item svg,
+.bootstrap-select .dropdown-menu .selected i {
+ margin-right: 0.5rem;
+ color: $gray-600;
+}
+
+.bootstrap-select>.dropdown-toggle:after {
+ position: absolute;
+ right: 1rem;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+// Live search
+.bs-searchbox {
+ padding: 0;
+ margin-bottom: .5rem;
+ margin-top: -.5rem;
+}
+.bootstrap-select .form-control {
+ background-color: transparent;
+ border: 0;
+ border-bottom: 1px solid $gray-200;
+ border-radius: 0;
+}
+.bootstrap-select .check-mark {
+ font-size: $font-size-xs;
+}
+
+.bootstrap-select button {
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+/* Make filled out selects be the same size as empty selects */
+
+.bootstrap-select.btn-group .dropdown-toggle .filter-option {
+ display: inline !important;
+}
\ No newline at end of file
diff --git a/static/scss/components/vendor/_bootstrap-tagsinput.scss b/static/scss/components/vendor/_bootstrap-tagsinput.scss
new file mode 100644
index 0000000..ea2fa99
--- /dev/null
+++ b/static/scss/components/vendor/_bootstrap-tagsinput.scss
@@ -0,0 +1,61 @@
+.bootstrap-tagsinput {
+ background-color: $input-bg;
+ border: $input-border-width solid $input-border-color;
+ display: inline-block;
+ padding: .3em .3em;
+ color: $input-border-color;
+ vertical-align: middle;
+ border-radius: $input-border-radius;
+ max-width: 100%;
+ cursor: text;
+}
+
+.bootstrap-tagsinput input {
+ border: none;
+ box-shadow: none;
+ outline: none;
+ background-color: transparent;
+ padding: 0 6px;
+ margin: 0;
+ width: auto;
+ max-width: inherit;
+}
+
+.bootstrap-tagsinput.form-control input::-moz-placeholder {
+ color: $input-placeholder-color;
+ opacity: 1;
+}
+
+.bootstrap-tagsinput.form-control input:-ms-input-placeholder {
+ color: $input-placeholder-color;
+}
+
+.bootstrap-tagsinput.form-control input::-webkit-input-placeholder {
+ color: $input-placeholder-color;
+}
+
+.bootstrap-tagsinput input:focus {
+ border: none;
+ box-shadow: none;
+}
+
+.bootstrap-tagsinput .badge {
+ padding: 1em .8em;
+ margin-right: 0.125rem;
+ border-radius: $input-border-radius;
+}
+
+.bootstrap-tagsinput [data-role="remove"] {
+ margin-left: 8px;
+ cursor: pointer;
+ color: rgba($white, 0.6);
+}
+
+.bootstrap-tagsinput [data-role="remove"]:after {
+ content: "x";
+ padding: 0px 2px;
+}
+
+.bootstrap-tagsinput [data-role="remove"]:hover {
+ color: rgba($white, 1);
+}
diff --git a/static/scss/components/vendor/_nouislider.scss b/static/scss/components/vendor/_nouislider.scss
new file mode 100644
index 0000000..d436606
--- /dev/null
+++ b/static/scss/components/vendor/_nouislider.scss
@@ -0,0 +1,469 @@
+// Original styles
+.noUi-target,
+.noUi-target * {
+ -webkit-touch-callout: none;
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+ -webkit-user-select: none;
+ -ms-touch-action: none;
+ touch-action: none;
+ -ms-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.noUi-target {
+ position: relative;
+ direction: ltr;
+}
+
+.noUi-base,
+.noUi-connects {
+ width: 100%;
+ height: 100%;
+ position: relative;
+ z-index: 1;
+}
+
+/* Wrapper for all connect elements.
+ */
+
+.noUi-connects {
+ overflow: hidden;
+ z-index: 0;
+}
+
+.noUi-connect,
+.noUi-origin {
+ will-change: transform;
+ position: absolute;
+ z-index: 1;
+ top: 0;
+ left: 0;
+ height: 100%;
+ width: 100%;
+ -webkit-transform-origin: 0 0;
+ transform-origin: 0 0;
+}
+
+
+html:not([dir="rtl"]) .noUi-horizontal .noUi-origin {
+ left: auto;
+ right: 0;
+}
+
+.noUi-vertical .noUi-origin {
+ width: 0;
+}
+
+.noUi-horizontal .noUi-origin {
+ height: 0;
+}
+
+.noUi-handle {
+ position: absolute;
+}
+
+.noUi-state-tap .noUi-connect,
+.noUi-state-tap .noUi-origin {
+ -webkit-transition: transform 0.3s;
+ transition: transform 0.3s;
+}
+
+.noUi-state-drag * {
+ cursor: inherit !important;
+}
+
+.noUi-horizontal {
+ height: $noui-target-thickness;
+}
+
+.noUi-horizontal .noUi-handle {
+ width: 34px;
+ height: 28px;
+ left: -17px;
+ top: -6px;
+}
+
+.noUi-vertical {
+ width: $noui-target-thickness;
+}
+
+.noUi-vertical .noUi-handle {
+ width: 28px;
+ height: 34px;
+ left: -6px;
+ top: -17px;
+}
+
+html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
+ right: -17px;
+ left: auto;
+}
+
+
+.noUi-target {
+ background: $noui-target-bg;
+ border-radius: $noui-target-border-radius;
+ border: 0;
+ box-shadow: inset 0 1px 1px #F0F0F0, 0 3px 6px -5px #BBB;
+}
+
+.noUi-connects {
+ border-radius: 3px;
+}
+
+.noUi-connect {
+ background: $noui-slider-connect-bg;
+}
+
+.noUi-draggable {
+ cursor: ew-resize;
+}
+
+.noUi-vertical .noUi-draggable {
+ cursor: ns-resize;
+}
+
+.noUi-handle {
+ border: 1px solid #D9D9D9;
+ border-radius: 3px;
+ background: #FFF;
+ cursor: default;
+ box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #EBEBEB, 0 3px 6px -3px #BBB;
+}
+
+.noUi-active {
+ box-shadow: inset 0 0 1px #FFF, inset 0 1px 7px #DDD, 0 3px 6px -3px #BBB;
+}
+
+
+/* Disabled state;
+ */
+
+[disabled] .noUi-connect {
+ background: #B8B8B8;
+}
+
+[disabled].noUi-target,
+[disabled].noUi-handle,
+[disabled] .noUi-handle {
+ cursor: not-allowed;
+}
+
+
+/* Base;
+ *
+ */
+
+.noUi-pips,
+.noUi-pips * {
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+.noUi-pips {
+ position: absolute;
+ color: #999;
+}
+
+
+/* Values;
+ *
+ */
+
+.noUi-value {
+ position: absolute;
+ white-space: nowrap;
+ text-align: center;
+}
+
+.noUi-value-sub {
+ color: #ccc;
+ font-size: 10px;
+}
+
+
+/* Markings;
+ *
+ */
+
+.noUi-marker {
+ position: absolute;
+ background: #CCC;
+}
+
+.noUi-marker-sub {
+ background: #AAA;
+}
+
+.noUi-marker-large {
+ background: #AAA;
+}
+
+
+/* Horizontal layout;
+ *
+ */
+
+.noUi-pips-horizontal {
+ padding: 10px 0;
+ height: 80px;
+ top: 100%;
+ left: 0;
+ width: 100%;
+}
+
+.noUi-value-horizontal {
+ -webkit-transform: translate(-50%, 50%);
+ transform: translate(-50%, 50%);
+}
+
+.noUi-rtl .noUi-value-horizontal {
+ -webkit-transform: translate(50%, 50%);
+ transform: translate(50%, 50%);
+}
+
+.noUi-marker-horizontal.noUi-marker {
+ margin-left: -1px;
+ width: 2px;
+ height: 5px;
+}
+
+.noUi-marker-horizontal.noUi-marker-sub {
+ height: 10px;
+}
+
+.noUi-marker-horizontal.noUi-marker-large {
+ height: 15px;
+}
+
+
+/* Vertical layout;
+ *
+ */
+
+.noUi-pips-vertical {
+ padding: 0 10px;
+ height: 100%;
+ top: 0;
+ left: 100%;
+}
+
+.noUi-value-vertical {
+ -webkit-transform: translate(0, -50%);
+ transform: translate(0, -50%, 0);
+ padding-left: 25px;
+}
+
+.noUi-rtl .noUi-value-vertical {
+ -webkit-transform: translate(0, 50%);
+ transform: translate(0, 50%);
+}
+
+.noUi-marker-vertical.noUi-marker {
+ width: 5px;
+ height: 2px;
+ margin-top: -1px;
+}
+
+.noUi-marker-vertical.noUi-marker-sub {
+ width: 10px;
+}
+
+.noUi-marker-vertical.noUi-marker-large {
+ width: 15px;
+}
+
+.noUi-tooltip {
+ display: block;
+ position: absolute;
+ border: 1px solid #D9D9D9;
+ border-radius: 3px;
+ background: #fff;
+ color: #000;
+ padding: 5px;
+ text-align: center;
+ white-space: nowrap;
+}
+
+.noUi-horizontal .noUi-tooltip {
+ -webkit-transform: translate(-50%, 0);
+ transform: translate(-50%, 0);
+ left: 50%;
+ bottom: 120%;
+}
+
+.noUi-vertical .noUi-tooltip {
+ -webkit-transform: translate(0, -50%);
+ transform: translate(0, -50%);
+ top: 50%;
+ right: 120%;
+}
+
+
+
+// Custom styles
+.noUi-target {
+ border-radius: 0;
+ box-shadow: none;
+ border: 0;
+ background: $noui-target-bg;
+ margin: 15px 0;
+}
+
+.noUi-horizontal {
+ height: $noui-target-thickness;
+}
+
+html:not([dir="rtl"]) .noUi-horizontal .noUi-handle {
+ right: -10px;
+}
+
+.noUi-vertical {
+ width: $noui-target-thickness;
+}
+
+.noUi-connect {
+ background: theme-color("primary");
+ box-shadow: none;
+}
+
+.noUi-horizontal .noUi-handle,
+.noUi-vertical .noUi-handle {
+ top: -7px;
+ width: 15px;
+ height: 15px;
+ border: 0;
+ border-radius: 100%;
+ box-shadow: none;
+ cursor: pointer;
+ background-color: theme-color("primary");
+ transition: box-shadow 0.2s,-webkit-transform 0.2s;
+ transition: box-shadow 0.2s,transform 0.2s;
+ transition: box-shadow 0.2s,transform 0.2s,-webkit-transform 0.2s;
+}
+
+.noUi-horizontal .noUi-handle:after,
+.noUi-horizontal .noUi-handle:before,
+.noUi-vertical .noUi-handle:after,
+.noUi-vertical .noUi-handle:before {
+ display: none;
+}
+
+.noUi-horizontal .noUi-handle.noUi-active,
+.noUi-vertical .noUi-handle.noUi-active {
+ -webkit-transform: scale(1.3);
+ transform: scale(1.3);
+}
+
+.noUi-horizontal .noUi-active,
+.noUi-vertical .noUi-active {
+ box-shadow: 0 0 0 3px rgba(0, 0, 0, .1);
+}
+
+.input-slider--cyan .noUi-connect {
+ background: $cyan;
+}
+
+.input-slider--cyan.noUi-horizontal .noUi-handle,
+.input-slider--cyan.noUi-vertical .noUi-handle {
+ background-color: $cyan;
+}
+
+.input-slider--red .noUi-connect {
+ background: $red;
+}
+
+.input-slider--red.noUi-horizontal .noUi-handle,
+.input-slider--red.noUi-vertical .noUi-handle {
+ background-color: $red;
+}
+
+.input-slider--green .noUi-connect {
+ background: $green;
+}
+
+.input-slider--green.noUi-horizontal .noUi-handle,
+.input-slider--green.noUi-vertical .noUi-handle {
+ background-color: $green;
+}
+
+.input-slider--yellow .noUi-connect {
+ background: $yellow;
+}
+
+.input-slider--yellow.noUi-horizontal .noUi-handle,
+.input-slider--yellow.noUi-vertical .noUi-handle {
+ background-color: $yellow;
+}
+
+.input-slider--pink .noUi-connect {
+ background: $pink;
+}
+
+.input-slider--pink.noUi-horizontal .noUi-handle,
+.input-slider--pink.noUi-vertical .noUi-handle {
+ background-color: $pink;
+}
+/* Disabled state */
+[disabled] .noUi-connect,
+[disabled].noUi-connect {
+ background: $noui-slider-connect-disabled-bg;
+}
+
+[disabled] .noUi-handle,
+[disabled].noUi-origin {
+ cursor: not-allowed;
+}
+
+/* Range slider value labels */
+.range-slider-value {
+ font-size: $font-size-xs;
+ font-weight: 500;
+ background-color: rgba($dark, .7);
+ color: color-yiq($dark);
+ border-radius: 10px;
+ padding: .4em .8em .3em .85em;
+}
+
+.range-slider-wrapper .upper-info {
+ font-weight: 400;
+ margin-bottom: 5px;
+}
+
+.input-slider-value-output {
+ background: #333;
+ color: #fff;
+ padding: 4px 8px;
+ position: relative;
+ top: 12px;
+ font-size: 11px;
+ border-radius: 2px;
+}
+
+.input-slider-value-output:after {
+ bottom: 100%;
+ left: 10px;
+ border: solid transparent;
+ content: " ";
+ height: 0;
+ width: 0;
+ position: absolute;
+ pointer-events: none;
+ border-color: rgba(136, 183, 213, 0);
+ border-bottom-color: #333;
+ border-width: 4px;
+ margin-left: -4px;
+}
+
+.input-slider-value-output.left:after {
+ left: 10px;
+ right: auto;
+}
+
+.input-slider-value-output.right:after {
+ right: 10px;
+ left: auto;
+}
diff --git a/static/scss/demo.scss b/static/scss/demo.scss
new file mode 100644
index 0000000..1f46131
--- /dev/null
+++ b/static/scss/demo.scss
@@ -0,0 +1,535 @@
+// Theme variables
+
+@import "_variables.scss";
+
+
+// User's custom variables
+
+@import "_custom-variables.scss";
+
+
+// Bootstrap variables and functions
+
+@import "bootstrap/functions";
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+
+// Demo styles
+
+@media(max-width: 767px) {
+ .btn-container {
+ margin-top: 2 * $spacer;
+ }
+}
+
+@media(max-width: 991px) {
+ .btn-container>.btn,
+ .btn-container>.btn-group {
+ margin-bottom: $spacer;
+ }
+}
+
+@media(min-width: 992px) {
+ .btn-container>.btn,
+ .btn-container>.btn-group {
+ margin-right: 1.5rem;
+ margin-bottom: 1rem;
+ }
+}
+
+// Main content section
+@media (min-width: 1200px) {
+ .content:not(.content--boxed):not(.content--full) {
+ padding: 0 0 0 240px;
+ }
+}
+
+@media (min-width: 576px) and (max-width: 1199px) {
+ .content:not(.content--boxed):not(.content--full) {
+ padding: 102px 30px 0;
+ }
+}
+
+@media (max-width: 575px) {
+ .content:not(.content--boxed):not(.content--full) {
+ padding: 87px 15px 0;
+ }
+}
+
+@media (min-width: 576px) {
+ .content--full {
+ padding: 102px 30px 0;
+ }
+}
+
+@media (max-width: 767px) {
+ .content--full {
+ padding: 87px 15px 0;
+ }
+}
+
+.content-inner {
+ margin: auto;
+ padding: 30px 15px;
+}
+
+.content-inner h3 {
+ //margin-bottom: 1.5rem;
+}
+
+.content-inner .example {
+ margin-bottom: 5rem;
+}
+
+@media (max-width: 767px) {
+ .content-inner .example .btn {
+ margin-bottom: 1rem;
+ }
+}
+
+// Header
+.header {
+ width: 100%;
+ height: 72px;
+ color: #FFFFFF;
+ padding: 0 30px 0 2rem;
+ z-index: 10;
+ display: flex;
+ align-items: center;
+ top: 0;
+ left: 0;
+ background: #FFF;
+ border-bottom: 1px solid $border-color;
+}
+
+@media(max-width: 1199px) {
+ .header {
+ position: fixed;
+ }
+}
+
+@media (max-width: 575px) {
+ .header {
+ padding-left: 15px;
+ padding-right: 15px;
+ }
+}
+
+.header::after {
+ display: block;
+ content: "";
+ clear: both;
+}
+
+.header .body-backdrop {
+ position: absolute;
+}
+
+.navigation-trigger {
+ float: left;
+ padding: 2rem 2rem 2rem 2.4rem;
+ margin-left: -2rem;
+}
+
+.navigation-trigger:hover {
+ cursor: pointer;
+}
+
+.navigation-trigger.toggled .navigation-trigger-inner {
+ transform: rotate(180deg);
+}
+
+.navigation-trigger.toggled .navigation-trigger-inner:before {
+ transform: scale(1);
+}
+
+.navigation-trigger.toggled .navigation-trigger-line:first-child {
+ width: 12px;
+ transform: translateX(8px) translateY(1px) rotate(45deg);
+}
+
+.navigation-trigger.toggled .navigation-trigger-line:last-child {
+ width: 11px;
+ transform: translateX(8px) translateY(-1px) rotate(-45deg);
+}
+
+.navigation-trigger-inner,
+.navigation-trigger-line {
+ width: 18px;
+ transition: all 300ms;
+}
+
+.navigation-trigger-inner {
+ position: relative;
+}
+
+.navigation-trigger-inner:before {
+ content: '';
+ position: absolute;
+ width: 40px;
+ height: 40px;
+ left: -11px;
+ top: -14px;
+ background-color: rgba(0, 0, 0, 0.25);
+ border-radius: 50%;
+ transition: all 300ms;
+ transform: scale(0);
+}
+
+.navigation-trigger-line {
+ height: 2px;
+ background-color: #333;
+ display: block;
+ position: relative;
+}
+
+.navigation-trigger-line:not(:last-child) {
+ margin-bottom: 3px;
+}
+
+@media (min-width: 1200px) {
+ .header-brand {
+ min-width: calc(270px - 2rem);
+ }
+}
+
+.header-brand>h1 {
+ line-height: 100%;
+ font-size: 1.3rem;
+ font-weight: normal;
+ margin: 0;
+}
+
+.header-brand>h1>a {
+ color: #999;
+}
+
+
+.header-nav .nav-link {
+ padding: 0 1rem;
+ font-size: $font-size-sm;
+ color: $gray-500;
+ transition: background-color 300ms;
+
+ &:hover {
+ color: $gray-800;
+ }
+}
+
+// Sidebar
+.sidebar {
+ width: 240px;
+ position: fixed;
+ left: 0;
+ padding: 0 0.5rem 0.5rem 1.5rem;
+ height: 100%;
+ overflow: hidden;
+ z-index: 1050;
+ background-color: $white;
+ border-right: 1px solid $border-color;
+}
+
+@media (max-width: 1199px) {
+ .sidebar {
+ //background-color: #FFFFFF;
+ transition: transform 300ms, opacity 300ms;
+ }
+ .sidebar:not(.toggled) {
+ opacity: 0;
+ transform: translate3d(-100%, 0, 0);
+ }
+ .sidebar.toggled {
+ box-shadow: 5px 0 10px rgba(0, 0, 0, 0.08);
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.sidebar-brand {
+ height: 72px;
+ padding: 1rem 0;
+
+ > h1 {
+ transform: translateY(50%);
+ font-size: 1.09375rem;
+ font-weight: normal;
+ margin: 0;
+
+ > a {
+ color: $gray-800;
+ }
+ }
+}
+
+.sidebar .scrollbar-inner>.scroll-element {
+ margin-right: 0;
+}
+
+.sidebar--hidden {
+ background-color: #FFFFFF;
+ transition: transform 300ms, opacity 300ms;
+}
+
+.sidebar--hidden:not(.toggled) {
+ opacity: 0;
+ transform: translate3d(-100%, 0, 0);
+}
+
+.sidebar--hidden.toggled {
+ box-shadow: 5px 0 10px rgba(0, 0, 0, 0.08);
+ opacity: 1;
+ transform: translate3d(0, 0, 0);
+}
+
+// Navigation
+.navigation {
+ list-style: none;
+ padding: 0;
+ padding-bottom: 4rem;
+}
+
+.navigation .navigation-title {
+ color: $gray-500;
+ font-weight: 600; //text-transform: uppercase;
+ margin: 0.875rem 0 0;
+ padding: 1rem 0rem 0.875rem;
+}
+
+.navigation .navigation-item {
+ //font-size: $font-size-sm;
+ color: $white;
+ font-weight: 500;
+}
+
+.navigation .navigation-link {
+ display: block;
+ padding: 0.25rem 1rem;
+ color: $gray-700;
+ font-weight: 500;
+ -webkit-transition: background 0.3s, box-shadow 0.3s;
+ transition: background 0.3s, box-shadow 0.3s;
+ border-radius: $border-radius;
+ text-decoration: none;
+}
+
+.navigation .navigation-link:hover,
+.navigation .navigation-link.active {
+ color: theme-color("primary");
+}
+
+// Scrollbar
+.scrollbar-inner {
+ height: 100%;
+}
+
+.scrollbar-inner>.scroll-element {
+ transition: opacity 300ms;
+ margin-right: 2px;
+}
+
+.scrollbar-inner>.scroll-element.scroll-y {
+ width: 3px;
+ right: 0;
+}
+
+.scrollbar-inner>.scroll-element.scroll-x {
+ height: 3px;
+ bottom: 0;
+}
+
+.scrollbar-inner>.scroll-element .scroll-bar,
+.scrollbar-inner>.scroll-element .scroll-element_track {
+ transition: background-color 300ms;
+}
+
+.scrollbar-inner>.scroll-element .scroll-element_track {
+ background-color: transparent;
+}
+
+.scrollbar-inner:not(:hover) .scroll-element {
+ opacity: 0;
+}
+
+// Page titles
+.page-title {
+ position: relative;
+ padding-bottom: 1rem;
+ margin-bottom: 1rem;
+ border-bottom: 1px solid $border-color;
+}
+
+.page-title .heading {
+ margin: 0;
+ padding: 0;
+ color: $gray-900;
+}
+
+.page-title .heading a {
+ color: $gray-900;
+}
+
+// Background image holer
+@media(min-width: 768px) {
+ .background-image-holder[data-holder-type="fullscreen"] {
+ //min-height: 480px;
+ }
+}
+
+@media (min-height: 600px) and (min-width: 767px) {
+ .background-image-holder[data-holder-type="hero"] {
+ height: 80vh;
+ }
+}
+
+.background-image-holder .holder-item {
+ height: 100%;
+ padding: 2rem 0;
+}
+
+@media(max-width: 991px) {
+ .background-image-holder .holder-item {
+ height: auto;
+ padding: 4rem 0;
+ }
+}
+
+.background-image-holder .swiper-container,
+.background-image-holder .container {
+ position: relative;
+ height: 100%;
+}
+
+.background-image-holder .swiper-container .swiper-slide .animated {
+ opacity: 0;
+}
+
+.background-image-holder .swiper-container .swiper-slide .animated.animation-ended {
+ opacity: 1;
+}
+
+// Background covers (.bg-cover)
+.bg-cover {
+ position: relative;
+}
+
+.bg-size--cover {
+ background-size: cover;
+ background-repeat: no-repeat;
+}
+
+.bg-size--contain {
+ background-size: contain;
+ background-repeat: no-repeat;
+}
+
+// Typeface palette
+.typeface-palette .typeface-entry {
+ position: relative;
+ display: block;
+ padding: 2rem;
+ background: $card-bg;
+ border: 1px solid $card-border-color;
+ border-radius: $card-border-radius;
+}
+
+.typeface-badge {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+}
+
+
+// Color palette
+.color-palette .color-entry {
+ position: relative;
+ display: block;
+ height: 170px;
+ color: #FFF;
+ border-radius: $border-radius;
+}
+
+.color-palette .color-entry .color-code {
+ background: $white;
+ color: $gray-700;
+ padding: 6px 10px;
+ position: absolute;
+ bottom: 12px;
+ right: 12px;
+}
+
+.content-docs {
+ h2[id]::before,
+ h3[id]::before,
+ h4[id]::before {
+ content: "";
+ display: block;
+ height: 3rem;
+ margin-top: -3rem;
+ }
+
+ h2[id]:not(:first-child),
+ h3[id]:not(:first-child),
+ h4[id]:not(:first-child) {
+ margin-top: 5rem;
+ }
+ h2[id],
+ h3[id],
+ h4[id] {
+ margin-bottom: 2rem;
+ }
+}
+
+.highlight {
+ pre {
+ padding: 1.5rem;
+ background: $gray-100;
+ border: 1px solid $gray-300;
+ border-radius: $border-radius;
+ }
+}
+
+.code-example {
+ margin: 2rem 0;
+}
+
+.code-clipboard {
+ position: relative;
+}
+
+.btn-clipboard {
+ position: absolute;
+ top: .5rem;
+ right: .5rem;
+ z-index: 10;
+ display: block;
+ padding: .25rem .5rem;
+ font-size: 75%;
+ color: #818a91;
+ cursor: pointer;
+ background-color: transparent;
+ border: 0;
+ border-radius: .25rem;
+
+ &:hover {
+ color: #fff;
+ background-color: #027de7;
+ }
+}
+
+
+// Toc nav
+.toc-entry {
+ display: block
+}
+
+.toc-entry a {
+ display: block;
+ padding: .125rem 1.5rem;
+ color: #99979c
+}
+
+.toc-entry a:hover {
+ color: #007bff;
+ text-decoration: none
+}
\ No newline at end of file
diff --git a/static/scss/mixins/_alert.scss b/static/scss/mixins/_alert.scss
new file mode 100644
index 0000000..1dbe85b
--- /dev/null
+++ b/static/scss/mixins/_alert.scss
@@ -0,0 +1,13 @@
+@mixin alert-variant($background, $border, $color) {
+ color: color-yiq($background);
+ @include gradient-bg($background);
+ border-color: $border;
+
+ hr {
+ border-top-color: darken($border, 5%);
+ }
+
+ .alert-link {
+ color: darken($color, 10%);
+ }
+}
\ No newline at end of file
diff --git a/static/scss/mixins/_background-variant.scss b/static/scss/mixins/_background-variant.scss
new file mode 100644
index 0000000..494439d
--- /dev/null
+++ b/static/scss/mixins/_background-variant.scss
@@ -0,0 +1,21 @@
+// stylelint-disable declaration-no-important
+
+// Contextual backgrounds
+
+@mixin bg-variant($parent, $color) {
+ #{$parent} {
+ background-color: $color !important;
+ }
+ a#{$parent},
+ button#{$parent} {
+ @include hover-focus {
+ background-color: darken($color, 10%) !important;
+ }
+ }
+}
+
+@mixin bg-gradient-variant($parent, $color) {
+ #{$parent} {
+ background: $color linear-gradient(180deg, mix($body-bg, $color, 15%), $color) repeat-x !important;
+ }
+}
diff --git a/static/scss/mixins/_forms.scss b/static/scss/mixins/_forms.scss
new file mode 100644
index 0000000..8083faa
--- /dev/null
+++ b/static/scss/mixins/_forms.scss
@@ -0,0 +1,128 @@
+@mixin form-control-focus() {
+ &:focus {
+ color: $input-focus-color;
+ background-color: $input-focus-bg;
+ border-color: $input-focus-border-color;
+ outline: 0;
+ // Avoid using mixin so we can pass custom focus shadow properly
+ @if $enable-shadows {
+ box-shadow: $input-box-shadow, $input-focus-box-shadow;
+ } @else {
+ box-shadow: $input-focus-box-shadow;
+ }
+ }
+}
+
+
+@mixin form-validation-state($state, $color) {
+ .#{$state}-feedback {
+ display: none;
+ width: 100%;
+ margin-top: $form-feedback-margin-top;
+ font-size: $form-feedback-font-size;
+ color: $color;
+ }
+
+ .#{$state}-tooltip {
+ position: absolute;
+ top: 100%;
+ z-index: 5;
+ display: none;
+ max-width: 100%; // Contain to parent when possible
+ padding: .5rem;
+ margin-top: .1rem;
+ font-size: .875rem;
+ line-height: 1;
+ color: #fff;
+ background-color: rgba($color, .8);
+ border-radius: .2rem;
+ }
+
+ .form-control,
+ .custom-select {
+ .was-validated &:#{$state},
+ &.is-#{$state} {
+ border-color: $color;
+
+ &:focus {
+ border-color: $color;
+ box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+ }
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+ }
+ }
+
+ .form-check-input {
+ .was-validated &:#{$state},
+ &.is-#{$state} {
+ ~ .form-check-label {
+ color: $color;
+ }
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+ }
+ }
+
+ .custom-control-input {
+ .was-validated &:#{$state},
+ &.is-#{$state} {
+ ~ .custom-control-label {
+ color: $color;
+
+ &::before {
+ background-color: lighten($color, 25%);
+ border-color: lighten($color, 25%);
+ }
+ }
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+
+ &:checked {
+ ~ .custom-control-label::before {
+ @include gradient-bg(lighten($color, 10%));
+ border-color: lighten($color, 25%);
+ }
+ }
+
+ &:focus {
+ ~ .custom-control-label::before {
+ box-shadow: 0 0 0 1px $body-bg, 0 0 0 $input-focus-width rgba($color, .25);
+ }
+ }
+ }
+ }
+
+ // custom file
+ .custom-file-input {
+ .was-validated &:#{$state},
+ &.is-#{$state} {
+ ~ .custom-file-label {
+ border-color: $color;
+
+ &::before { border-color: inherit; }
+ }
+
+ ~ .#{$state}-feedback,
+ ~ .#{$state}-tooltip {
+ display: block;
+ }
+
+ &:focus {
+ ~ .custom-file-label {
+ box-shadow: 0 0 0 $input-focus-width rgba($color, .25);
+ }
+ }
+ }
+ }
+}
+
diff --git a/static/scss/mixins/_modals.scss b/static/scss/mixins/_modals.scss
new file mode 100644
index 0000000..f912490
--- /dev/null
+++ b/static/scss/mixins/_modals.scss
@@ -0,0 +1,23 @@
+@mixin modal-variant($background) {
+ .modal-title {
+ color: color-yiq($background);
+ }
+ .modal-header,
+ .modal-footer {
+ border-color: rgba(color-yiq($background), .075);
+ }
+ .modal-content {
+ background-color: $background;
+ color: color-yiq($background);
+
+ .heading {
+ color: color-yiq($background);
+ }
+ }
+
+ .close {
+ &>span:not(.sr-only) {
+ color: $white;
+ }
+ }
+}
\ No newline at end of file
diff --git a/static/scss/mixins/_popover.scss b/static/scss/mixins/_popover.scss
new file mode 100644
index 0000000..7ac455c
--- /dev/null
+++ b/static/scss/mixins/_popover.scss
@@ -0,0 +1,33 @@
+@mixin popover-variant($background) {
+
+ background-color: $background;
+
+ .popover-header,
+ .popover-body {
+ background-color: $background;
+ color: color-yiq($background);
+ }
+ .popover-header{
+ border-color: rgba(color-yiq($background), .2);
+ }
+ &.bs-popover-top {
+ .arrow::after {
+ border-top-color: $background;
+ }
+ }
+ &.bs-popover-right {
+ .arrow::after {
+ border-right-color: $background;
+ }
+ }
+ &.bs-popover-bottom {
+ .arrow::after {
+ border-bottom-color: $background;
+ }
+ }
+ &.bs-popover-left {
+ .arrow::after {
+ border-left-color: $background;
+ }
+ }
+}
\ No newline at end of file
diff --git a/static/scss/theme.scss b/static/scss/theme.scss
new file mode 100644
index 0000000..6f4c392
--- /dev/null
+++ b/static/scss/theme.scss
@@ -0,0 +1,73 @@
+// Theme variables
+
+@import "_variables.scss";
+
+
+// User's custom variables
+
+@import "_custom-variables.scss";
+
+
+// Bootstrap variables and functions
+
+@import "bootstrap/functions";
+@import "bootstrap/variables";
+@import "bootstrap/mixins";
+
+
+// Overriden mixins
+
+@import "mixins/_alert.scss";
+@import "mixins/_background-variant.scss";
+@import "mixins/_forms.scss";
+@import "mixins/_modals.scss";
+@import "mixins/_popover.scss";
+
+
+// Bootstrap components
+
+@import "bootstrap/root";
+@import "bootstrap/reboot";
+@import "bootstrap/type";
+@import "bootstrap/images";
+@import "bootstrap/code";
+@import "bootstrap/grid";
+@import "bootstrap/tables";
+@import "bootstrap/forms";
+@import "bootstrap/buttons";
+@import "bootstrap/transitions";
+@import "bootstrap/dropdown";
+@import "bootstrap/button-group";
+@import "bootstrap/input-group";
+@import "bootstrap/custom-forms";
+@import "bootstrap/nav";
+@import "bootstrap/navbar";
+@import "bootstrap/card";
+@import "bootstrap/breadcrumb";
+@import "bootstrap/pagination";
+@import "bootstrap/badge";
+@import "bootstrap/jumbotron";
+@import "bootstrap/alert";
+@import "bootstrap/progress";
+@import "bootstrap/media";
+@import "bootstrap/list-group";
+@import "bootstrap/close";
+@import "bootstrap/modal";
+@import "bootstrap/tooltip";
+@import "bootstrap/popover";
+@import "bootstrap/carousel";
+@import "bootstrap/utilities";
+@import "bootstrap/print";
+
+
+// Theme styles
+
+@import "_reboot.scss";
+@import "_global.scss";
+@import "_utilities.scss";
+@import "_components.scss";
+
+
+// User's custom styles
+
+@import "_custom.scss";
diff --git a/static/scss/utilities/_backgrounds.scss b/static/scss/utilities/_backgrounds.scss
new file mode 100644
index 0000000..b9cb0a9
--- /dev/null
+++ b/static/scss/utilities/_backgrounds.scss
@@ -0,0 +1,9 @@
+@each $color, $value in $colors {
+ @include bg-variant(".bg-#{$color}", $value);
+}
+
+@if $enable-gradients {
+ @each $color, $value in $colors {
+ @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+ }
+}
\ No newline at end of file
diff --git a/static/scss/utilities/_helper.scss b/static/scss/utilities/_helper.scss
new file mode 100644
index 0000000..8916432
--- /dev/null
+++ b/static/scss/utilities/_helper.scss
@@ -0,0 +1,119 @@
+.box-shadow--removed {
+ border-width: 1px!important;
+ box-shadow: none!important;
+}
+.box-shadow-1:not(.btn),
+.box-shadow-1--hover:not(.btn):hover,
+.box-shadow-1-top:not(.btn),
+.box-shadow-1-top--hover:not(.btn):hover,
+.box-shadow-1-bottom:not(.btn),
+.box-shadow-1-bottom--hover:not(.btn):hover,
+.box-shadow-2:not(.btn),
+.box-shadow-2--hover:not(.btn):hover,
+.box-shadow-2-top:not(.btn),
+.box-shadow-2-top--hover:not(.btn):hover,
+.box-shadow-2-bottom:not(.btn),
+.box-shadow-2-bottom--hover:not(.btn):hover,
+.box-shadow-3:not(.btn),
+.box-shadow-3--hover:not(.btn):hover,
+.box-shadow-3-top:not(.btn),
+.box-shadow-3-top--hover:not(.btn):hover,
+.box-shadow-3-bottom:not(.btn),
+.box-shadow-3-bottom--hover:not(.btn):hover,
+.box-shadow-4:not(.btn),
+.box-shadow-4--hover:not(.btn):hover,
+.box-shadow-4-top:not(.btn),
+.box-shadow-4-top--hover:not(.btn):hover,
+.box-shadow-4-bottom:not(.btn),
+.box-shadow-4-bottom--hover:not(.btn):hover,
+.box-shadow-5:not(.btn),
+.box-shadow-5--hover:not(.btn):hover,
+.box-shadow-5-top:not(.btn),
+.box-shadow-5-top--hover:not(.btn):hover,
+.box-shadow-5-bottom:not(.btn),
+.box-shadow-5-bottom--hover:not(.btn):hover {
+ border-color: transparent !important;
+}
+
+.box-shadow-0,
+.box-shadow-0--hover:hover {
+ box-shadow: none !important;
+}
+.box-shadow-1,
+.box-shadow-1--hover:hover {
+ box-shadow: 0 .25rem .375rem rgba(0, 0, 0, .05);
+}
+
+.box-shadow-2,
+.box-shadow-2--hover:hover {
+ box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05);
+}
+
+.box-shadow-3,
+.box-shadow-3--hover:hover {
+ box-shadow: 0 .25rem 1.125rem rgba(0, 0, 0, .05);
+}
+
+.box-shadow-4,
+.box-shadow-4--hover:hover {
+ box-shadow: 0 .25rem 1.5rem rgba(0, 0, 0, .05);
+}
+
+.box-shadow-5,
+.box-shadow-5--hover:hover {
+ box-shadow: 0 .25rem 1.875rem rgba(0, 0, 0, .05);
+}
+
+// Overflows
+.overflow-visible {
+ overflow: visible !important;
+}
+.overflow-hidden {
+ overflow: hidden !important;
+}
+
+/* Opacities */
+.alpha-1,
+.alpha-container:hover .alpha-1--hover {
+ opacity: 0.1;
+}
+.alpha-2,
+.alpha-container:hover .alpha-2--hover {
+ opacity: 0.2;
+}
+.alpha-3,
+.alpha-container:hover .alpha-3--hover {
+ opacity: 0.3;
+}
+.alpha-4,
+.alpha-container:hover .alpha-4--hover {
+ opacity: 0.4;
+}
+.alpha-5,
+.alpha-container:hover .alpha-5--hover {
+ opacity: 0.5;
+}
+.alpha-6,
+.alpha-container:hover .alpha-6--hover {
+ opacity: 0.6;
+}
+.alpha-7,
+.alpha-container:hover .alpha-7--hover {
+ opacity: 0.7;
+}
+.alpha-8,
+.alpha-container:hover .alpha-8--hover {
+ opacity: 0.8;
+}
+.alpha-9,
+.alpha-container:hover .alpha-9--hover {
+ opacity: 0.9;
+}
+
+
+// Image
+.img-center {
+ display: block;
+ margin-left: auto;
+ margin-right: auto;
+}
\ No newline at end of file
diff --git a/static/scss/utilities/_position.scss b/static/scss/utilities/_position.scss
new file mode 100644
index 0000000..88f1b37
--- /dev/null
+++ b/static/scss/utilities/_position.scss
@@ -0,0 +1,14 @@
+@each $size, $value in $spacers {
+ .top-#{$size} {
+ top: $value;
+ }
+ .right-#{$size} {
+ right: $value;
+ }
+ .bottom-#{$size} {
+ bottom: $value;
+ }
+ .left-#{$size} {
+ left: $value;
+ }
+}
\ No newline at end of file
diff --git a/static/scss/utilities/_spacing.scss b/static/scss/utilities/_spacing.scss
new file mode 100644
index 0000000..e8c1b43
--- /dev/null
+++ b/static/scss/utilities/_spacing.scss
@@ -0,0 +1,48 @@
+// Add vertical space when columns reach a certain breakpoint
+.cols-space > div[class*='col-']:not(:last-child) {
+ margin-bottom: 4rem;
+}
+@media(max-width: 575px) {
+ .cols-xs-space > div[class*='col-']:not(:last-child) {
+ margin-bottom: 4rem;
+ }
+}
+@media(max-width: 767px) {
+ .cols-sm-space > div[class*='col-']:not(:last-child) {
+ margin-bottom: 4rem;
+ }
+}
+@media(max-width: 991px) {
+ .cols-md-space > div[class*='col-']:not(:last-child) {
+ margin-bottom: 4rem;
+ }
+}
+@media(max-width: 1199px) {
+ .cols-lg-space > div[class*='col-']:not(:last-child) {
+ margin-bottom: 4rem;
+ }
+}
+
+@media(max-width: 575px) {
+ .row-wrapper > .row .col-12:not(:last-child),
+ .row-wrapper > .row:not(:last-child) {
+ margin-bottom: $spacer * 3;
+ }
+}
+@media(min-width: 576px) and (max-width: 767px) {
+ .row-wrapper > .row .col-sm-12:not(:last-child),
+ .row-wrapper > .row:not(:last-child) {
+ margin-bottom: $spacer * 3;
+ }
+}
+@media(min-width: 768px) and (max-width: 991px) {
+ .row-wrapper .row .col-md-12:not(:last-child),
+ .row-wrapper .row:not(:last-child) {
+ margin-bottom: $spacer * 3;
+ }
+}
+@media(min-width: 992px) {
+ .row-wrapper > .row:not(:last-child) {
+ margin-bottom: $spacer * 3;
+ }
+}
diff --git a/static/scss/utilities/_text.scss b/static/scss/utilities/_text.scss
new file mode 100644
index 0000000..65eee61
--- /dev/null
+++ b/static/scss/utilities/_text.scss
@@ -0,0 +1,17 @@
+// Weight and italics
+
+.font-weight-300 { font-weight: 300 !important; }
+.font-weight-400 { font-weight: 400 !important; }
+.font-weight-500 { font-weight: 500 !important; }
+.font-weight-600 { font-weight: 600 !important; }
+.font-weight-700 { font-weight: 700 !important; }
+.font-weight-800 { font-weight: 800 !important; }
+.font-weight-900 { font-weight: 900 !important; }
+
+
+// Line heights
+
+.lh-100 { line-height: 1; }
+.lh-125 { line-height: 1.25; }
+.lh-150 { line-height: 1.5; }
+.lh-180 { line-height: 1.8; }
\ No newline at end of file
diff --git a/static/vendor/animate/animate.css b/static/vendor/animate/animate.css
new file mode 100644
index 0000000..98f29c2
--- /dev/null
+++ b/static/vendor/animate/animate.css
@@ -0,0 +1,3494 @@
+@charset "UTF-8";
+
+/*!
+ * animate.css -http://daneden.me/animate
+ * Version - 3.6.0
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2018 Daniel Eden
+ */
+
+.animated {
+ -webkit-animation-duration: 1s;
+ animation-duration: 1s;
+ -webkit-animation-fill-mode: both;
+ animation-fill-mode: both;
+}
+
+.animated.infinite {
+ -webkit-animation-iteration-count: infinite;
+ animation-iteration-count: infinite;
+}
+
+@-webkit-keyframes bounce {
+ from,
+ 20%,
+ 53%,
+ 80%,
+ to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ 40%,
+ 43% {
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ -webkit-transform: translate3d(0, -30px, 0);
+ transform: translate3d(0, -30px, 0);
+ }
+
+ 70% {
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ -webkit-transform: translate3d(0, -15px, 0);
+ transform: translate3d(0, -15px, 0);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(0, -4px, 0);
+ transform: translate3d(0, -4px, 0);
+ }
+}
+
+@keyframes bounce {
+ from,
+ 20%,
+ 53%,
+ 80%,
+ to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ 40%,
+ 43% {
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ -webkit-transform: translate3d(0, -30px, 0);
+ transform: translate3d(0, -30px, 0);
+ }
+
+ 70% {
+ -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
+ -webkit-transform: translate3d(0, -15px, 0);
+ transform: translate3d(0, -15px, 0);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(0, -4px, 0);
+ transform: translate3d(0, -4px, 0);
+ }
+}
+
+.bounce {
+ -webkit-animation-name: bounce;
+ animation-name: bounce;
+ -webkit-transform-origin: center bottom;
+ transform-origin: center bottom;
+}
+
+@-webkit-keyframes flash {
+ from,
+ 50%,
+ to {
+ opacity: 1;
+ }
+
+ 25%,
+ 75% {
+ opacity: 0;
+ }
+}
+
+@keyframes flash {
+ from,
+ 50%,
+ to {
+ opacity: 1;
+ }
+
+ 25%,
+ 75% {
+ opacity: 0;
+ }
+}
+
+.flash {
+ -webkit-animation-name: flash;
+ animation-name: flash;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes pulse {
+ from {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+
+ 50% {
+ -webkit-transform: scale3d(1.05, 1.05, 1.05);
+ transform: scale3d(1.05, 1.05, 1.05);
+ }
+
+ to {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+@keyframes pulse {
+ from {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+
+ 50% {
+ -webkit-transform: scale3d(1.05, 1.05, 1.05);
+ transform: scale3d(1.05, 1.05, 1.05);
+ }
+
+ to {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.pulse {
+ -webkit-animation-name: pulse;
+ animation-name: pulse;
+}
+
+@-webkit-keyframes rubberBand {
+ from {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+
+ 30% {
+ -webkit-transform: scale3d(1.25, 0.75, 1);
+ transform: scale3d(1.25, 0.75, 1);
+ }
+
+ 40% {
+ -webkit-transform: scale3d(0.75, 1.25, 1);
+ transform: scale3d(0.75, 1.25, 1);
+ }
+
+ 50% {
+ -webkit-transform: scale3d(1.15, 0.85, 1);
+ transform: scale3d(1.15, 0.85, 1);
+ }
+
+ 65% {
+ -webkit-transform: scale3d(0.95, 1.05, 1);
+ transform: scale3d(0.95, 1.05, 1);
+ }
+
+ 75% {
+ -webkit-transform: scale3d(1.05, 0.95, 1);
+ transform: scale3d(1.05, 0.95, 1);
+ }
+
+ to {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+@keyframes rubberBand {
+ from {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+
+ 30% {
+ -webkit-transform: scale3d(1.25, 0.75, 1);
+ transform: scale3d(1.25, 0.75, 1);
+ }
+
+ 40% {
+ -webkit-transform: scale3d(0.75, 1.25, 1);
+ transform: scale3d(0.75, 1.25, 1);
+ }
+
+ 50% {
+ -webkit-transform: scale3d(1.15, 0.85, 1);
+ transform: scale3d(1.15, 0.85, 1);
+ }
+
+ 65% {
+ -webkit-transform: scale3d(0.95, 1.05, 1);
+ transform: scale3d(0.95, 1.05, 1);
+ }
+
+ 75% {
+ -webkit-transform: scale3d(1.05, 0.95, 1);
+ transform: scale3d(1.05, 0.95, 1);
+ }
+
+ to {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.rubberBand {
+ -webkit-animation-name: rubberBand;
+ animation-name: rubberBand;
+}
+
+@-webkit-keyframes shake {
+ from,
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ 10%,
+ 30%,
+ 50%,
+ 70%,
+ 90% {
+ -webkit-transform: translate3d(-10px, 0, 0);
+ transform: translate3d(-10px, 0, 0);
+ }
+
+ 20%,
+ 40%,
+ 60%,
+ 80% {
+ -webkit-transform: translate3d(10px, 0, 0);
+ transform: translate3d(10px, 0, 0);
+ }
+}
+
+@keyframes shake {
+ from,
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ 10%,
+ 30%,
+ 50%,
+ 70%,
+ 90% {
+ -webkit-transform: translate3d(-10px, 0, 0);
+ transform: translate3d(-10px, 0, 0);
+ }
+
+ 20%,
+ 40%,
+ 60%,
+ 80% {
+ -webkit-transform: translate3d(10px, 0, 0);
+ transform: translate3d(10px, 0, 0);
+ }
+}
+
+.shake {
+ -webkit-animation-name: shake;
+ animation-name: shake;
+}
+
+@-webkit-keyframes headShake {
+ 0% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 6.5% {
+ -webkit-transform: translateX(-6px) rotateY(-9deg);
+ transform: translateX(-6px) rotateY(-9deg);
+ }
+
+ 18.5% {
+ -webkit-transform: translateX(5px) rotateY(7deg);
+ transform: translateX(5px) rotateY(7deg);
+ }
+
+ 31.5% {
+ -webkit-transform: translateX(-3px) rotateY(-5deg);
+ transform: translateX(-3px) rotateY(-5deg);
+ }
+
+ 43.5% {
+ -webkit-transform: translateX(2px) rotateY(3deg);
+ transform: translateX(2px) rotateY(3deg);
+ }
+
+ 50% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+@keyframes headShake {
+ 0% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+
+ 6.5% {
+ -webkit-transform: translateX(-6px) rotateY(-9deg);
+ transform: translateX(-6px) rotateY(-9deg);
+ }
+
+ 18.5% {
+ -webkit-transform: translateX(5px) rotateY(7deg);
+ transform: translateX(5px) rotateY(7deg);
+ }
+
+ 31.5% {
+ -webkit-transform: translateX(-3px) rotateY(-5deg);
+ transform: translateX(-3px) rotateY(-5deg);
+ }
+
+ 43.5% {
+ -webkit-transform: translateX(2px) rotateY(3deg);
+ transform: translateX(2px) rotateY(3deg);
+ }
+
+ 50% {
+ -webkit-transform: translateX(0);
+ transform: translateX(0);
+ }
+}
+
+.headShake {
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ -webkit-animation-name: headShake;
+ animation-name: headShake;
+}
+
+@-webkit-keyframes swing {
+ 20% {
+ -webkit-transform: rotate3d(0, 0, 1, 15deg);
+ transform: rotate3d(0, 0, 1, 15deg);
+ }
+
+ 40% {
+ -webkit-transform: rotate3d(0, 0, 1, -10deg);
+ transform: rotate3d(0, 0, 1, -10deg);
+ }
+
+ 60% {
+ -webkit-transform: rotate3d(0, 0, 1, 5deg);
+ transform: rotate3d(0, 0, 1, 5deg);
+ }
+
+ 80% {
+ -webkit-transform: rotate3d(0, 0, 1, -5deg);
+ transform: rotate3d(0, 0, 1, -5deg);
+ }
+
+ to {
+ -webkit-transform: rotate3d(0, 0, 1, 0deg);
+ transform: rotate3d(0, 0, 1, 0deg);
+ }
+}
+
+@keyframes swing {
+ 20% {
+ -webkit-transform: rotate3d(0, 0, 1, 15deg);
+ transform: rotate3d(0, 0, 1, 15deg);
+ }
+
+ 40% {
+ -webkit-transform: rotate3d(0, 0, 1, -10deg);
+ transform: rotate3d(0, 0, 1, -10deg);
+ }
+
+ 60% {
+ -webkit-transform: rotate3d(0, 0, 1, 5deg);
+ transform: rotate3d(0, 0, 1, 5deg);
+ }
+
+ 80% {
+ -webkit-transform: rotate3d(0, 0, 1, -5deg);
+ transform: rotate3d(0, 0, 1, -5deg);
+ }
+
+ to {
+ -webkit-transform: rotate3d(0, 0, 1, 0deg);
+ transform: rotate3d(0, 0, 1, 0deg);
+ }
+}
+
+.swing {
+ -webkit-transform-origin: top center;
+ transform-origin: top center;
+ -webkit-animation-name: swing;
+ animation-name: swing;
+}
+
+@-webkit-keyframes tada {
+ from {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+
+ 10%,
+ 20% {
+ -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+ transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+ }
+
+ 30%,
+ 50%,
+ 70%,
+ 90% {
+ -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+ transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+ }
+
+ 40%,
+ 60%,
+ 80% {
+ -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+ transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+ }
+
+ to {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+@keyframes tada {
+ from {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+
+ 10%,
+ 20% {
+ -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+ transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
+ }
+
+ 30%,
+ 50%,
+ 70%,
+ 90% {
+ -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+ transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
+ }
+
+ 40%,
+ 60%,
+ 80% {
+ -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+ transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
+ }
+
+ to {
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.tada {
+ -webkit-animation-name: tada;
+ animation-name: tada;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes wobble {
+ from {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ 15% {
+ -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+ transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+ }
+
+ 30% {
+ -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+ transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+ }
+
+ 45% {
+ -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+ transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+ }
+
+ 60% {
+ -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+ transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+ transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes wobble {
+ from {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ 15% {
+ -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+ transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
+ }
+
+ 30% {
+ -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+ transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
+ }
+
+ 45% {
+ -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+ transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
+ }
+
+ 60% {
+ -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+ transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+ transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.wobble {
+ -webkit-animation-name: wobble;
+ animation-name: wobble;
+}
+
+@-webkit-keyframes jello {
+ from,
+ 11.1%,
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ 22.2% {
+ -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+ transform: skewX(-12.5deg) skewY(-12.5deg);
+ }
+
+ 33.3% {
+ -webkit-transform: skewX(6.25deg) skewY(6.25deg);
+ transform: skewX(6.25deg) skewY(6.25deg);
+ }
+
+ 44.4% {
+ -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+ transform: skewX(-3.125deg) skewY(-3.125deg);
+ }
+
+ 55.5% {
+ -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+ transform: skewX(1.5625deg) skewY(1.5625deg);
+ }
+
+ 66.6% {
+ -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+ transform: skewX(-0.78125deg) skewY(-0.78125deg);
+ }
+
+ 77.7% {
+ -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+ transform: skewX(0.390625deg) skewY(0.390625deg);
+ }
+
+ 88.8% {
+ -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+ transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+ }
+}
+
+@keyframes jello {
+ from,
+ 11.1%,
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ 22.2% {
+ -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
+ transform: skewX(-12.5deg) skewY(-12.5deg);
+ }
+
+ 33.3% {
+ -webkit-transform: skewX(6.25deg) skewY(6.25deg);
+ transform: skewX(6.25deg) skewY(6.25deg);
+ }
+
+ 44.4% {
+ -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
+ transform: skewX(-3.125deg) skewY(-3.125deg);
+ }
+
+ 55.5% {
+ -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
+ transform: skewX(1.5625deg) skewY(1.5625deg);
+ }
+
+ 66.6% {
+ -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
+ transform: skewX(-0.78125deg) skewY(-0.78125deg);
+ }
+
+ 77.7% {
+ -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
+ transform: skewX(0.390625deg) skewY(0.390625deg);
+ }
+
+ 88.8% {
+ -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+ transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
+ }
+}
+
+.jello {
+ -webkit-animation-name: jello;
+ animation-name: jello;
+ -webkit-transform-origin: center;
+ transform-origin: center;
+}
+
+@-webkit-keyframes bounceIn {
+ from,
+ 20%,
+ 40%,
+ 60%,
+ 80%,
+ to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+
+ 0% {
+ opacity: 0;
+ -webkit-transform: scale3d(0.3, 0.3, 0.3);
+ transform: scale3d(0.3, 0.3, 0.3);
+ }
+
+ 20% {
+ -webkit-transform: scale3d(1.1, 1.1, 1.1);
+ transform: scale3d(1.1, 1.1, 1.1);
+ }
+
+ 40% {
+ -webkit-transform: scale3d(0.9, 0.9, 0.9);
+ transform: scale3d(0.9, 0.9, 0.9);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(1.03, 1.03, 1.03);
+ transform: scale3d(1.03, 1.03, 1.03);
+ }
+
+ 80% {
+ -webkit-transform: scale3d(0.97, 0.97, 0.97);
+ transform: scale3d(0.97, 0.97, 0.97);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+@keyframes bounceIn {
+ from,
+ 20%,
+ 40%,
+ 60%,
+ 80%,
+ to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+
+ 0% {
+ opacity: 0;
+ -webkit-transform: scale3d(0.3, 0.3, 0.3);
+ transform: scale3d(0.3, 0.3, 0.3);
+ }
+
+ 20% {
+ -webkit-transform: scale3d(1.1, 1.1, 1.1);
+ transform: scale3d(1.1, 1.1, 1.1);
+ }
+
+ 40% {
+ -webkit-transform: scale3d(0.9, 0.9, 0.9);
+ transform: scale3d(0.9, 0.9, 0.9);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(1.03, 1.03, 1.03);
+ transform: scale3d(1.03, 1.03, 1.03);
+ }
+
+ 80% {
+ -webkit-transform: scale3d(0.97, 0.97, 0.97);
+ transform: scale3d(0.97, 0.97, 0.97);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: scale3d(1, 1, 1);
+ transform: scale3d(1, 1, 1);
+ }
+}
+
+.bounceIn {
+ -webkit-animation-duration: 0.75s;
+ animation-duration: 0.75s;
+ -webkit-animation-name: bounceIn;
+ animation-name: bounceIn;
+}
+
+@-webkit-keyframes bounceInDown {
+ from,
+ 60%,
+ 75%,
+ 90%,
+ to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+
+ 0% {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -3000px, 0);
+ transform: translate3d(0, -3000px, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 25px, 0);
+ transform: translate3d(0, 25px, 0);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(0, -10px, 0);
+ transform: translate3d(0, -10px, 0);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(0, 5px, 0);
+ transform: translate3d(0, 5px, 0);
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes bounceInDown {
+ from,
+ 60%,
+ 75%,
+ 90%,
+ to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+
+ 0% {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -3000px, 0);
+ transform: translate3d(0, -3000px, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 25px, 0);
+ transform: translate3d(0, 25px, 0);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(0, -10px, 0);
+ transform: translate3d(0, -10px, 0);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(0, 5px, 0);
+ transform: translate3d(0, 5px, 0);
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.bounceInDown {
+ -webkit-animation-name: bounceInDown;
+ animation-name: bounceInDown;
+}
+
+@-webkit-keyframes bounceInLeft {
+ from,
+ 60%,
+ 75%,
+ 90%,
+ to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+
+ 0% {
+ opacity: 0;
+ -webkit-transform: translate3d(-3000px, 0, 0);
+ transform: translate3d(-3000px, 0, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translate3d(25px, 0, 0);
+ transform: translate3d(25px, 0, 0);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(-10px, 0, 0);
+ transform: translate3d(-10px, 0, 0);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(5px, 0, 0);
+ transform: translate3d(5px, 0, 0);
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes bounceInLeft {
+ from,
+ 60%,
+ 75%,
+ 90%,
+ to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+
+ 0% {
+ opacity: 0;
+ -webkit-transform: translate3d(-3000px, 0, 0);
+ transform: translate3d(-3000px, 0, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translate3d(25px, 0, 0);
+ transform: translate3d(25px, 0, 0);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(-10px, 0, 0);
+ transform: translate3d(-10px, 0, 0);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(5px, 0, 0);
+ transform: translate3d(5px, 0, 0);
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.bounceInLeft {
+ -webkit-animation-name: bounceInLeft;
+ animation-name: bounceInLeft;
+}
+
+@-webkit-keyframes bounceInRight {
+ from,
+ 60%,
+ 75%,
+ 90%,
+ to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(3000px, 0, 0);
+ transform: translate3d(3000px, 0, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translate3d(-25px, 0, 0);
+ transform: translate3d(-25px, 0, 0);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(10px, 0, 0);
+ transform: translate3d(10px, 0, 0);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(-5px, 0, 0);
+ transform: translate3d(-5px, 0, 0);
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes bounceInRight {
+ from,
+ 60%,
+ 75%,
+ 90%,
+ to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(3000px, 0, 0);
+ transform: translate3d(3000px, 0, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translate3d(-25px, 0, 0);
+ transform: translate3d(-25px, 0, 0);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(10px, 0, 0);
+ transform: translate3d(10px, 0, 0);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(-5px, 0, 0);
+ transform: translate3d(-5px, 0, 0);
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.bounceInRight {
+ -webkit-animation-name: bounceInRight;
+ animation-name: bounceInRight;
+}
+
+@-webkit-keyframes bounceInUp {
+ from,
+ 60%,
+ 75%,
+ 90%,
+ to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 3000px, 0);
+ transform: translate3d(0, 3000px, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translate3d(0, -20px, 0);
+ transform: translate3d(0, -20px, 0);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(0, 10px, 0);
+ transform: translate3d(0, 10px, 0);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(0, -5px, 0);
+ transform: translate3d(0, -5px, 0);
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes bounceInUp {
+ from,
+ 60%,
+ 75%,
+ 90%,
+ to {
+ -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+ }
+
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 3000px, 0);
+ transform: translate3d(0, 3000px, 0);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: translate3d(0, -20px, 0);
+ transform: translate3d(0, -20px, 0);
+ }
+
+ 75% {
+ -webkit-transform: translate3d(0, 10px, 0);
+ transform: translate3d(0, 10px, 0);
+ }
+
+ 90% {
+ -webkit-transform: translate3d(0, -5px, 0);
+ transform: translate3d(0, -5px, 0);
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.bounceInUp {
+ -webkit-animation-name: bounceInUp;
+ animation-name: bounceInUp;
+}
+
+@-webkit-keyframes bounceOut {
+ 20% {
+ -webkit-transform: scale3d(0.9, 0.9, 0.9);
+ transform: scale3d(0.9, 0.9, 0.9);
+ }
+
+ 50%,
+ 55% {
+ opacity: 1;
+ -webkit-transform: scale3d(1.1, 1.1, 1.1);
+ transform: scale3d(1.1, 1.1, 1.1);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: scale3d(0.3, 0.3, 0.3);
+ transform: scale3d(0.3, 0.3, 0.3);
+ }
+}
+
+@keyframes bounceOut {
+ 20% {
+ -webkit-transform: scale3d(0.9, 0.9, 0.9);
+ transform: scale3d(0.9, 0.9, 0.9);
+ }
+
+ 50%,
+ 55% {
+ opacity: 1;
+ -webkit-transform: scale3d(1.1, 1.1, 1.1);
+ transform: scale3d(1.1, 1.1, 1.1);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: scale3d(0.3, 0.3, 0.3);
+ transform: scale3d(0.3, 0.3, 0.3);
+ }
+}
+
+.bounceOut {
+ -webkit-animation-duration: 0.75s;
+ animation-duration: 0.75s;
+ -webkit-animation-name: bounceOut;
+ animation-name: bounceOut;
+}
+
+@-webkit-keyframes bounceOutDown {
+ 20% {
+ -webkit-transform: translate3d(0, 10px, 0);
+ transform: translate3d(0, 10px, 0);
+ }
+
+ 40%,
+ 45% {
+ opacity: 1;
+ -webkit-transform: translate3d(0, -20px, 0);
+ transform: translate3d(0, -20px, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 2000px, 0);
+ transform: translate3d(0, 2000px, 0);
+ }
+}
+
+@keyframes bounceOutDown {
+ 20% {
+ -webkit-transform: translate3d(0, 10px, 0);
+ transform: translate3d(0, 10px, 0);
+ }
+
+ 40%,
+ 45% {
+ opacity: 1;
+ -webkit-transform: translate3d(0, -20px, 0);
+ transform: translate3d(0, -20px, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 2000px, 0);
+ transform: translate3d(0, 2000px, 0);
+ }
+}
+
+.bounceOutDown {
+ -webkit-animation-name: bounceOutDown;
+ animation-name: bounceOutDown;
+}
+
+@-webkit-keyframes bounceOutLeft {
+ 20% {
+ opacity: 1;
+ -webkit-transform: translate3d(20px, 0, 0);
+ transform: translate3d(20px, 0, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(-2000px, 0, 0);
+ transform: translate3d(-2000px, 0, 0);
+ }
+}
+
+@keyframes bounceOutLeft {
+ 20% {
+ opacity: 1;
+ -webkit-transform: translate3d(20px, 0, 0);
+ transform: translate3d(20px, 0, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(-2000px, 0, 0);
+ transform: translate3d(-2000px, 0, 0);
+ }
+}
+
+.bounceOutLeft {
+ -webkit-animation-name: bounceOutLeft;
+ animation-name: bounceOutLeft;
+}
+
+@-webkit-keyframes bounceOutRight {
+ 20% {
+ opacity: 1;
+ -webkit-transform: translate3d(-20px, 0, 0);
+ transform: translate3d(-20px, 0, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(2000px, 0, 0);
+ transform: translate3d(2000px, 0, 0);
+ }
+}
+
+@keyframes bounceOutRight {
+ 20% {
+ opacity: 1;
+ -webkit-transform: translate3d(-20px, 0, 0);
+ transform: translate3d(-20px, 0, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(2000px, 0, 0);
+ transform: translate3d(2000px, 0, 0);
+ }
+}
+
+.bounceOutRight {
+ -webkit-animation-name: bounceOutRight;
+ animation-name: bounceOutRight;
+}
+
+@-webkit-keyframes bounceOutUp {
+ 20% {
+ -webkit-transform: translate3d(0, -10px, 0);
+ transform: translate3d(0, -10px, 0);
+ }
+
+ 40%,
+ 45% {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 20px, 0);
+ transform: translate3d(0, 20px, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -2000px, 0);
+ transform: translate3d(0, -2000px, 0);
+ }
+}
+
+@keyframes bounceOutUp {
+ 20% {
+ -webkit-transform: translate3d(0, -10px, 0);
+ transform: translate3d(0, -10px, 0);
+ }
+
+ 40%,
+ 45% {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 20px, 0);
+ transform: translate3d(0, 20px, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -2000px, 0);
+ transform: translate3d(0, -2000px, 0);
+ }
+}
+
+.bounceOutUp {
+ -webkit-animation-name: bounceOutUp;
+ animation-name: bounceOutUp;
+}
+
+@-webkit-keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+
+ to {
+ opacity: 1;
+ }
+}
+
+.fadeIn {
+ -webkit-animation-name: fadeIn;
+ animation-name: fadeIn;
+}
+
+@-webkit-keyframes fadeInDown {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes fadeInDown {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.fadeInDown {
+ -webkit-animation-name: fadeInDown;
+ animation-name: fadeInDown;
+}
+
+@-webkit-keyframes fadeInDownBig {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -2000px, 0);
+ transform: translate3d(0, -2000px, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes fadeInDownBig {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -2000px, 0);
+ transform: translate3d(0, -2000px, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.fadeInDownBig {
+ -webkit-animation-name: fadeInDownBig;
+ animation-name: fadeInDownBig;
+}
+
+@-webkit-keyframes fadeInLeft {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes fadeInLeft {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.fadeInLeft {
+ -webkit-animation-name: fadeInLeft;
+ animation-name: fadeInLeft;
+}
+
+@-webkit-keyframes fadeInLeftBig {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(-2000px, 0, 0);
+ transform: translate3d(-2000px, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes fadeInLeftBig {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(-2000px, 0, 0);
+ transform: translate3d(-2000px, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.fadeInLeftBig {
+ -webkit-animation-name: fadeInLeftBig;
+ animation-name: fadeInLeftBig;
+}
+
+@-webkit-keyframes fadeInRight {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes fadeInRight {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.fadeInRight {
+ -webkit-animation-name: fadeInRight;
+ animation-name: fadeInRight;
+}
+
+@-webkit-keyframes fadeInRightBig {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(2000px, 0, 0);
+ transform: translate3d(2000px, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes fadeInRightBig {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(2000px, 0, 0);
+ transform: translate3d(2000px, 0, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.fadeInRightBig {
+ -webkit-animation-name: fadeInRightBig;
+ animation-name: fadeInRightBig;
+}
+
+@-webkit-keyframes fadeInUp {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes fadeInUp {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.fadeInUp {
+ -webkit-animation-name: fadeInUp;
+ animation-name: fadeInUp;
+}
+
+@-webkit-keyframes fadeInUpBig {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 2000px, 0);
+ transform: translate3d(0, 2000px, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes fadeInUpBig {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 2000px, 0);
+ transform: translate3d(0, 2000px, 0);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.fadeInUpBig {
+ -webkit-animation-name: fadeInUpBig;
+ animation-name: fadeInUpBig;
+}
+
+@-webkit-keyframes fadeOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes fadeOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+
+.fadeOut {
+ -webkit-animation-name: fadeOut;
+ animation-name: fadeOut;
+}
+
+@-webkit-keyframes fadeOutDown {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ }
+}
+
+@keyframes fadeOutDown {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ }
+}
+
+.fadeOutDown {
+ -webkit-animation-name: fadeOutDown;
+ animation-name: fadeOutDown;
+}
+
+@-webkit-keyframes fadeOutDownBig {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 2000px, 0);
+ transform: translate3d(0, 2000px, 0);
+ }
+}
+
+@keyframes fadeOutDownBig {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, 2000px, 0);
+ transform: translate3d(0, 2000px, 0);
+ }
+}
+
+.fadeOutDownBig {
+ -webkit-animation-name: fadeOutDownBig;
+ animation-name: fadeOutDownBig;
+}
+
+@-webkit-keyframes fadeOutLeft {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ }
+}
+
+@keyframes fadeOutLeft {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ }
+}
+
+.fadeOutLeft {
+ -webkit-animation-name: fadeOutLeft;
+ animation-name: fadeOutLeft;
+}
+
+@-webkit-keyframes fadeOutLeftBig {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(-2000px, 0, 0);
+ transform: translate3d(-2000px, 0, 0);
+ }
+}
+
+@keyframes fadeOutLeftBig {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(-2000px, 0, 0);
+ transform: translate3d(-2000px, 0, 0);
+ }
+}
+
+.fadeOutLeftBig {
+ -webkit-animation-name: fadeOutLeftBig;
+ animation-name: fadeOutLeftBig;
+}
+
+@-webkit-keyframes fadeOutRight {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ }
+}
+
+@keyframes fadeOutRight {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ }
+}
+
+.fadeOutRight {
+ -webkit-animation-name: fadeOutRight;
+ animation-name: fadeOutRight;
+}
+
+@-webkit-keyframes fadeOutRightBig {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(2000px, 0, 0);
+ transform: translate3d(2000px, 0, 0);
+ }
+}
+
+@keyframes fadeOutRightBig {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(2000px, 0, 0);
+ transform: translate3d(2000px, 0, 0);
+ }
+}
+
+.fadeOutRightBig {
+ -webkit-animation-name: fadeOutRightBig;
+ animation-name: fadeOutRightBig;
+}
+
+@-webkit-keyframes fadeOutUp {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0);
+ }
+}
+
+@keyframes fadeOutUp {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0);
+ }
+}
+
+.fadeOutUp {
+ -webkit-animation-name: fadeOutUp;
+ animation-name: fadeOutUp;
+}
+
+@-webkit-keyframes fadeOutUpBig {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -2000px, 0);
+ transform: translate3d(0, -2000px, 0);
+ }
+}
+
+@keyframes fadeOutUpBig {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(0, -2000px, 0);
+ transform: translate3d(0, -2000px, 0);
+ }
+}
+
+.fadeOutUpBig {
+ -webkit-animation-name: fadeOutUpBig;
+ animation-name: fadeOutUpBig;
+}
+
+@-webkit-keyframes flip {
+ from {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+ -webkit-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+
+ 40% {
+ -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+ transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+ -webkit-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+
+ 50% {
+ -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+ transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+
+ 80% {
+ -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+ transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+
+ to {
+ -webkit-transform: perspective(400px);
+ transform: perspective(400px);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+}
+
+@keyframes flip {
+ from {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
+ -webkit-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+
+ 40% {
+ -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+ transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
+ -webkit-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+ }
+
+ 50% {
+ -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+ transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+
+ 80% {
+ -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+ transform: perspective(400px) scale3d(0.95, 0.95, 0.95);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+
+ to {
+ -webkit-transform: perspective(400px);
+ transform: perspective(400px);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+}
+
+.animated.flip {
+ -webkit-backface-visibility: visible;
+ backface-visibility: visible;
+ -webkit-animation-name: flip;
+ animation-name: flip;
+}
+
+@-webkit-keyframes flipInX {
+ from {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ opacity: 0;
+ }
+
+ 40% {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+
+ 60% {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+ opacity: 1;
+ }
+
+ 80% {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+ }
+
+ to {
+ -webkit-transform: perspective(400px);
+ transform: perspective(400px);
+ }
+}
+
+@keyframes flipInX {
+ from {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ opacity: 0;
+ }
+
+ 40% {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+
+ 60% {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+ opacity: 1;
+ }
+
+ 80% {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+ }
+
+ to {
+ -webkit-transform: perspective(400px);
+ transform: perspective(400px);
+ }
+}
+
+.flipInX {
+ -webkit-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+ -webkit-animation-name: flipInX;
+ animation-name: flipInX;
+}
+
+@-webkit-keyframes flipInY {
+ from {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ opacity: 0;
+ }
+
+ 40% {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+
+ 60% {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+ opacity: 1;
+ }
+
+ 80% {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+ }
+
+ to {
+ -webkit-transform: perspective(400px);
+ transform: perspective(400px);
+ }
+}
+
+@keyframes flipInY {
+ from {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ opacity: 0;
+ }
+
+ 40% {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+ }
+
+ 60% {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
+ opacity: 1;
+ }
+
+ 80% {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
+ }
+
+ to {
+ -webkit-transform: perspective(400px);
+ transform: perspective(400px);
+ }
+}
+
+.flipInY {
+ -webkit-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+ -webkit-animation-name: flipInY;
+ animation-name: flipInY;
+}
+
+@-webkit-keyframes flipOutX {
+ from {
+ -webkit-transform: perspective(400px);
+ transform: perspective(400px);
+ }
+
+ 30% {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+ opacity: 0;
+ }
+}
+
+@keyframes flipOutX {
+ from {
+ -webkit-transform: perspective(400px);
+ transform: perspective(400px);
+ }
+
+ 30% {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+ transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+ opacity: 0;
+ }
+}
+
+.flipOutX {
+ -webkit-animation-duration: 0.75s;
+ animation-duration: 0.75s;
+ -webkit-animation-name: flipOutX;
+ animation-name: flipOutX;
+ -webkit-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+}
+
+@-webkit-keyframes flipOutY {
+ from {
+ -webkit-transform: perspective(400px);
+ transform: perspective(400px);
+ }
+
+ 30% {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+ opacity: 0;
+ }
+}
+
+@keyframes flipOutY {
+ from {
+ -webkit-transform: perspective(400px);
+ transform: perspective(400px);
+ }
+
+ 30% {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+ transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
+ opacity: 0;
+ }
+}
+
+.flipOutY {
+ -webkit-animation-duration: 0.75s;
+ animation-duration: 0.75s;
+ -webkit-backface-visibility: visible !important;
+ backface-visibility: visible !important;
+ -webkit-animation-name: flipOutY;
+ animation-name: flipOutY;
+}
+
+@-webkit-keyframes lightSpeedIn {
+ from {
+ -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+ transform: translate3d(100%, 0, 0) skewX(-30deg);
+ opacity: 0;
+ }
+
+ 60% {
+ -webkit-transform: skewX(20deg);
+ transform: skewX(20deg);
+ opacity: 1;
+ }
+
+ 80% {
+ -webkit-transform: skewX(-5deg);
+ transform: skewX(-5deg);
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ opacity: 1;
+ }
+}
+
+@keyframes lightSpeedIn {
+ from {
+ -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
+ transform: translate3d(100%, 0, 0) skewX(-30deg);
+ opacity: 0;
+ }
+
+ 60% {
+ -webkit-transform: skewX(20deg);
+ transform: skewX(20deg);
+ opacity: 1;
+ }
+
+ 80% {
+ -webkit-transform: skewX(-5deg);
+ transform: skewX(-5deg);
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ opacity: 1;
+ }
+}
+
+.lightSpeedIn {
+ -webkit-animation-name: lightSpeedIn;
+ animation-name: lightSpeedIn;
+ -webkit-animation-timing-function: ease-out;
+ animation-timing-function: ease-out;
+}
+
+@-webkit-keyframes lightSpeedOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+ transform: translate3d(100%, 0, 0) skewX(30deg);
+ opacity: 0;
+ }
+}
+
+@keyframes lightSpeedOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
+ transform: translate3d(100%, 0, 0) skewX(30deg);
+ opacity: 0;
+ }
+}
+
+.lightSpeedOut {
+ -webkit-animation-name: lightSpeedOut;
+ animation-name: lightSpeedOut;
+ -webkit-animation-timing-function: ease-in;
+ animation-timing-function: ease-in;
+}
+
+@-webkit-keyframes rotateIn {
+ from {
+ -webkit-transform-origin: center;
+ transform-origin: center;
+ -webkit-transform: rotate3d(0, 0, 1, -200deg);
+ transform: rotate3d(0, 0, 1, -200deg);
+ opacity: 0;
+ }
+
+ to {
+ -webkit-transform-origin: center;
+ transform-origin: center;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ opacity: 1;
+ }
+}
+
+@keyframes rotateIn {
+ from {
+ -webkit-transform-origin: center;
+ transform-origin: center;
+ -webkit-transform: rotate3d(0, 0, 1, -200deg);
+ transform: rotate3d(0, 0, 1, -200deg);
+ opacity: 0;
+ }
+
+ to {
+ -webkit-transform-origin: center;
+ transform-origin: center;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ opacity: 1;
+ }
+}
+
+.rotateIn {
+ -webkit-animation-name: rotateIn;
+ animation-name: rotateIn;
+}
+
+@-webkit-keyframes rotateInDownLeft {
+ from {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate3d(0, 0, 1, -45deg);
+ transform: rotate3d(0, 0, 1, -45deg);
+ opacity: 0;
+ }
+
+ to {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ opacity: 1;
+ }
+}
+
+@keyframes rotateInDownLeft {
+ from {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate3d(0, 0, 1, -45deg);
+ transform: rotate3d(0, 0, 1, -45deg);
+ opacity: 0;
+ }
+
+ to {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ opacity: 1;
+ }
+}
+
+.rotateInDownLeft {
+ -webkit-animation-name: rotateInDownLeft;
+ animation-name: rotateInDownLeft;
+}
+
+@-webkit-keyframes rotateInDownRight {
+ from {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate3d(0, 0, 1, 45deg);
+ transform: rotate3d(0, 0, 1, 45deg);
+ opacity: 0;
+ }
+
+ to {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ opacity: 1;
+ }
+}
+
+@keyframes rotateInDownRight {
+ from {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate3d(0, 0, 1, 45deg);
+ transform: rotate3d(0, 0, 1, 45deg);
+ opacity: 0;
+ }
+
+ to {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ opacity: 1;
+ }
+}
+
+.rotateInDownRight {
+ -webkit-animation-name: rotateInDownRight;
+ animation-name: rotateInDownRight;
+}
+
+@-webkit-keyframes rotateInUpLeft {
+ from {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate3d(0, 0, 1, 45deg);
+ transform: rotate3d(0, 0, 1, 45deg);
+ opacity: 0;
+ }
+
+ to {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ opacity: 1;
+ }
+}
+
+@keyframes rotateInUpLeft {
+ from {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate3d(0, 0, 1, 45deg);
+ transform: rotate3d(0, 0, 1, 45deg);
+ opacity: 0;
+ }
+
+ to {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ opacity: 1;
+ }
+}
+
+.rotateInUpLeft {
+ -webkit-animation-name: rotateInUpLeft;
+ animation-name: rotateInUpLeft;
+}
+
+@-webkit-keyframes rotateInUpRight {
+ from {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate3d(0, 0, 1, -90deg);
+ transform: rotate3d(0, 0, 1, -90deg);
+ opacity: 0;
+ }
+
+ to {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ opacity: 1;
+ }
+}
+
+@keyframes rotateInUpRight {
+ from {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate3d(0, 0, 1, -90deg);
+ transform: rotate3d(0, 0, 1, -90deg);
+ opacity: 0;
+ }
+
+ to {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ opacity: 1;
+ }
+}
+
+.rotateInUpRight {
+ -webkit-animation-name: rotateInUpRight;
+ animation-name: rotateInUpRight;
+}
+
+@-webkit-keyframes rotateOut {
+ from {
+ -webkit-transform-origin: center;
+ transform-origin: center;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform-origin: center;
+ transform-origin: center;
+ -webkit-transform: rotate3d(0, 0, 1, 200deg);
+ transform: rotate3d(0, 0, 1, 200deg);
+ opacity: 0;
+ }
+}
+
+@keyframes rotateOut {
+ from {
+ -webkit-transform-origin: center;
+ transform-origin: center;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform-origin: center;
+ transform-origin: center;
+ -webkit-transform: rotate3d(0, 0, 1, 200deg);
+ transform: rotate3d(0, 0, 1, 200deg);
+ opacity: 0;
+ }
+}
+
+.rotateOut {
+ -webkit-animation-name: rotateOut;
+ animation-name: rotateOut;
+}
+
+@-webkit-keyframes rotateOutDownLeft {
+ from {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate3d(0, 0, 1, 45deg);
+ transform: rotate3d(0, 0, 1, 45deg);
+ opacity: 0;
+ }
+}
+
+@keyframes rotateOutDownLeft {
+ from {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate3d(0, 0, 1, 45deg);
+ transform: rotate3d(0, 0, 1, 45deg);
+ opacity: 0;
+ }
+}
+
+.rotateOutDownLeft {
+ -webkit-animation-name: rotateOutDownLeft;
+ animation-name: rotateOutDownLeft;
+}
+
+@-webkit-keyframes rotateOutDownRight {
+ from {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate3d(0, 0, 1, -45deg);
+ transform: rotate3d(0, 0, 1, -45deg);
+ opacity: 0;
+ }
+}
+
+@keyframes rotateOutDownRight {
+ from {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate3d(0, 0, 1, -45deg);
+ transform: rotate3d(0, 0, 1, -45deg);
+ opacity: 0;
+ }
+}
+
+.rotateOutDownRight {
+ -webkit-animation-name: rotateOutDownRight;
+ animation-name: rotateOutDownRight;
+}
+
+@-webkit-keyframes rotateOutUpLeft {
+ from {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate3d(0, 0, 1, -45deg);
+ transform: rotate3d(0, 0, 1, -45deg);
+ opacity: 0;
+ }
+}
+
+@keyframes rotateOutUpLeft {
+ from {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform-origin: left bottom;
+ transform-origin: left bottom;
+ -webkit-transform: rotate3d(0, 0, 1, -45deg);
+ transform: rotate3d(0, 0, 1, -45deg);
+ opacity: 0;
+ }
+}
+
+.rotateOutUpLeft {
+ -webkit-animation-name: rotateOutUpLeft;
+ animation-name: rotateOutUpLeft;
+}
+
+@-webkit-keyframes rotateOutUpRight {
+ from {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate3d(0, 0, 1, 90deg);
+ transform: rotate3d(0, 0, 1, 90deg);
+ opacity: 0;
+ }
+}
+
+@keyframes rotateOutUpRight {
+ from {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform-origin: right bottom;
+ transform-origin: right bottom;
+ -webkit-transform: rotate3d(0, 0, 1, 90deg);
+ transform: rotate3d(0, 0, 1, 90deg);
+ opacity: 0;
+ }
+}
+
+.rotateOutUpRight {
+ -webkit-animation-name: rotateOutUpRight;
+ animation-name: rotateOutUpRight;
+}
+
+@-webkit-keyframes hinge {
+ 0% {
+ -webkit-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+
+ 20%,
+ 60% {
+ -webkit-transform: rotate3d(0, 0, 1, 80deg);
+ transform: rotate3d(0, 0, 1, 80deg);
+ -webkit-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+
+ 40%,
+ 80% {
+ -webkit-transform: rotate3d(0, 0, 1, 60deg);
+ transform: rotate3d(0, 0, 1, 60deg);
+ -webkit-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 700px, 0);
+ transform: translate3d(0, 700px, 0);
+ opacity: 0;
+ }
+}
+
+@keyframes hinge {
+ 0% {
+ -webkit-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+
+ 20%,
+ 60% {
+ -webkit-transform: rotate3d(0, 0, 1, 80deg);
+ transform: rotate3d(0, 0, 1, 80deg);
+ -webkit-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ }
+
+ 40%,
+ 80% {
+ -webkit-transform: rotate3d(0, 0, 1, 60deg);
+ transform: rotate3d(0, 0, 1, 60deg);
+ -webkit-transform-origin: top left;
+ transform-origin: top left;
+ -webkit-animation-timing-function: ease-in-out;
+ animation-timing-function: ease-in-out;
+ opacity: 1;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 700px, 0);
+ transform: translate3d(0, 700px, 0);
+ opacity: 0;
+ }
+}
+
+.hinge {
+ -webkit-animation-duration: 2s;
+ animation-duration: 2s;
+ -webkit-animation-name: hinge;
+ animation-name: hinge;
+}
+
+@-webkit-keyframes jackInTheBox {
+ from {
+ opacity: 0;
+ -webkit-transform: scale(0.1) rotate(30deg);
+ transform: scale(0.1) rotate(30deg);
+ -webkit-transform-origin: center bottom;
+ transform-origin: center bottom;
+ }
+
+ 50% {
+ -webkit-transform: rotate(-10deg);
+ transform: rotate(-10deg);
+ }
+
+ 70% {
+ -webkit-transform: rotate(3deg);
+ transform: rotate(3deg);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+}
+
+@keyframes jackInTheBox {
+ from {
+ opacity: 0;
+ -webkit-transform: scale(0.1) rotate(30deg);
+ transform: scale(0.1) rotate(30deg);
+ -webkit-transform-origin: center bottom;
+ transform-origin: center bottom;
+ }
+
+ 50% {
+ -webkit-transform: rotate(-10deg);
+ transform: rotate(-10deg);
+ }
+
+ 70% {
+ -webkit-transform: rotate(3deg);
+ transform: rotate(3deg);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: scale(1);
+ transform: scale(1);
+ }
+}
+
+.jackInTheBox {
+ -webkit-animation-name: jackInTheBox;
+ animation-name: jackInTheBox;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollIn {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+ transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes rollIn {
+ from {
+ opacity: 0;
+ -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+ transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
+ }
+
+ to {
+ opacity: 1;
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.rollIn {
+ -webkit-animation-name: rollIn;
+ animation-name: rollIn;
+}
+
+/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
+
+@-webkit-keyframes rollOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+ transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+ }
+}
+
+@keyframes rollOut {
+ from {
+ opacity: 1;
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+ transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
+ }
+}
+
+.rollOut {
+ -webkit-animation-name: rollOut;
+ animation-name: rollOut;
+}
+
+@-webkit-keyframes zoomIn {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(0.3, 0.3, 0.3);
+ transform: scale3d(0.3, 0.3, 0.3);
+ }
+
+ 50% {
+ opacity: 1;
+ }
+}
+
+@keyframes zoomIn {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(0.3, 0.3, 0.3);
+ transform: scale3d(0.3, 0.3, 0.3);
+ }
+
+ 50% {
+ opacity: 1;
+ }
+}
+
+.zoomIn {
+ -webkit-animation-name: zoomIn;
+ animation-name: zoomIn;
+}
+
+@-webkit-keyframes zoomInDown {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ }
+}
+
+@keyframes zoomInDown {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ }
+}
+
+.zoomInDown {
+ -webkit-animation-name: zoomInDown;
+ animation-name: zoomInDown;
+}
+
+@-webkit-keyframes zoomInLeft {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ }
+}
+
+@keyframes zoomInLeft {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(10px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ }
+}
+
+.zoomInLeft {
+ -webkit-animation-name: zoomInLeft;
+ animation-name: zoomInLeft;
+}
+
+@-webkit-keyframes zoomInRight {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ }
+}
+
+@keyframes zoomInRight {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(-10px, 0, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ }
+}
+
+.zoomInRight {
+ -webkit-animation-name: zoomInRight;
+ animation-name: zoomInRight;
+}
+
+@-webkit-keyframes zoomInUp {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ }
+}
+
+@keyframes zoomInUp {
+ from {
+ opacity: 0;
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+
+ 60% {
+ opacity: 1;
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ }
+}
+
+.zoomInUp {
+ -webkit-animation-name: zoomInUp;
+ animation-name: zoomInUp;
+}
+
+@-webkit-keyframes zoomOut {
+ from {
+ opacity: 1;
+ }
+
+ 50% {
+ opacity: 0;
+ -webkit-transform: scale3d(0.3, 0.3, 0.3);
+ transform: scale3d(0.3, 0.3, 0.3);
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+
+@keyframes zoomOut {
+ from {
+ opacity: 1;
+ }
+
+ 50% {
+ opacity: 0;
+ -webkit-transform: scale3d(0.3, 0.3, 0.3);
+ transform: scale3d(0.3, 0.3, 0.3);
+ }
+
+ to {
+ opacity: 0;
+ }
+}
+
+.zoomOut {
+ -webkit-animation-name: zoomOut;
+ animation-name: zoomOut;
+}
+
+@-webkit-keyframes zoomOutDown {
+ 40% {
+ opacity: 1;
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+ -webkit-transform-origin: center bottom;
+ transform-origin: center bottom;
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ }
+}
+
+@keyframes zoomOutDown {
+ 40% {
+ opacity: 1;
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
+ -webkit-transform-origin: center bottom;
+ transform-origin: center bottom;
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ }
+}
+
+.zoomOutDown {
+ -webkit-animation-name: zoomOutDown;
+ animation-name: zoomOutDown;
+}
+
+@-webkit-keyframes zoomOutLeft {
+ 40% {
+ opacity: 1;
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
+ transform: scale(0.1) translate3d(-2000px, 0, 0);
+ -webkit-transform-origin: left center;
+ transform-origin: left center;
+ }
+}
+
+@keyframes zoomOutLeft {
+ 40% {
+ opacity: 1;
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
+ transform: scale(0.1) translate3d(-2000px, 0, 0);
+ -webkit-transform-origin: left center;
+ transform-origin: left center;
+ }
+}
+
+.zoomOutLeft {
+ -webkit-animation-name: zoomOutLeft;
+ animation-name: zoomOutLeft;
+}
+
+@-webkit-keyframes zoomOutRight {
+ 40% {
+ opacity: 1;
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
+ transform: scale(0.1) translate3d(2000px, 0, 0);
+ -webkit-transform-origin: right center;
+ transform-origin: right center;
+ }
+}
+
+@keyframes zoomOutRight {
+ 40% {
+ opacity: 1;
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
+ transform: scale(0.1) translate3d(2000px, 0, 0);
+ -webkit-transform-origin: right center;
+ transform-origin: right center;
+ }
+}
+
+.zoomOutRight {
+ -webkit-animation-name: zoomOutRight;
+ animation-name: zoomOutRight;
+}
+
+@-webkit-keyframes zoomOutUp {
+ 40% {
+ opacity: 1;
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+ -webkit-transform-origin: center bottom;
+ transform-origin: center bottom;
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ }
+}
+
+@keyframes zoomOutUp {
+ 40% {
+ opacity: 1;
+ -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+ transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
+ -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
+ }
+
+ to {
+ opacity: 0;
+ -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+ transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
+ -webkit-transform-origin: center bottom;
+ transform-origin: center bottom;
+ -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
+ }
+}
+
+.zoomOutUp {
+ -webkit-animation-name: zoomOutUp;
+ animation-name: zoomOutUp;
+}
+
+@-webkit-keyframes slideInDown {
+ from {
+ -webkit-transform: translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0);
+ visibility: visible;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes slideInDown {
+ from {
+ -webkit-transform: translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0);
+ visibility: visible;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.slideInDown {
+ -webkit-animation-name: slideInDown;
+ animation-name: slideInDown;
+}
+
+@-webkit-keyframes slideInLeft {
+ from {
+ -webkit-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ visibility: visible;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes slideInLeft {
+ from {
+ -webkit-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ visibility: visible;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.slideInLeft {
+ -webkit-animation-name: slideInLeft;
+ animation-name: slideInLeft;
+}
+
+@-webkit-keyframes slideInRight {
+ from {
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ visibility: visible;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes slideInRight {
+ from {
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ visibility: visible;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.slideInRight {
+ -webkit-animation-name: slideInRight;
+ animation-name: slideInRight;
+}
+
+@-webkit-keyframes slideInUp {
+ from {
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ visibility: visible;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+@keyframes slideInUp {
+ from {
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ visibility: visible;
+ }
+
+ to {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+}
+
+.slideInUp {
+ -webkit-animation-name: slideInUp;
+ animation-name: slideInUp;
+}
+
+@-webkit-keyframes slideOutDown {
+ from {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ }
+}
+
+@keyframes slideOutDown {
+ from {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ -webkit-transform: translate3d(0, 100%, 0);
+ transform: translate3d(0, 100%, 0);
+ }
+}
+
+.slideOutDown {
+ -webkit-animation-name: slideOutDown;
+ animation-name: slideOutDown;
+}
+
+@-webkit-keyframes slideOutLeft {
+ from {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ -webkit-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ }
+}
+
+@keyframes slideOutLeft {
+ from {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ -webkit-transform: translate3d(-100%, 0, 0);
+ transform: translate3d(-100%, 0, 0);
+ }
+}
+
+.slideOutLeft {
+ -webkit-animation-name: slideOutLeft;
+ animation-name: slideOutLeft;
+}
+
+@-webkit-keyframes slideOutRight {
+ from {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ }
+}
+
+@keyframes slideOutRight {
+ from {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ -webkit-transform: translate3d(100%, 0, 0);
+ transform: translate3d(100%, 0, 0);
+ }
+}
+
+.slideOutRight {
+ -webkit-animation-name: slideOutRight;
+ animation-name: slideOutRight;
+}
+
+@-webkit-keyframes slideOutUp {
+ from {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ -webkit-transform: translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0);
+ }
+}
+
+@keyframes slideOutUp {
+ from {
+ -webkit-transform: translate3d(0, 0, 0);
+ transform: translate3d(0, 0, 0);
+ }
+
+ to {
+ visibility: hidden;
+ -webkit-transform: translate3d(0, -100%, 0);
+ transform: translate3d(0, -100%, 0);
+ }
+}
+
+.slideOutUp {
+ -webkit-animation-name: slideOutUp;
+ animation-name: slideOutUp;
+}
diff --git a/static/vendor/animate/animate.min.css b/static/vendor/animate/animate.min.css
new file mode 100644
index 0000000..62832ba
--- /dev/null
+++ b/static/vendor/animate/animate.min.css
@@ -0,0 +1,11 @@
+@charset "UTF-8";
+
+/*!
+ * animate.css -http://daneden.me/animate
+ * Version - 3.6.0
+ * Licensed under the MIT license - http://opensource.org/licenses/MIT
+ *
+ * Copyright (c) 2018 Daniel Eden
+ */
+
+.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}.animated.infinite{-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite}@-webkit-keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}@keyframes bounce{0%,20%,53%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1);-webkit-transform:translateZ(0);transform:translateZ(0)}40%,43%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0)}70%{-webkit-animation-timing-function:cubic-bezier(.755,.05,.855,.06);animation-timing-function:cubic-bezier(.755,.05,.855,.06);-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0)}90%{-webkit-transform:translate3d(0,-4px,0);transform:translate3d(0,-4px,0)}}.bounce{-webkit-animation-name:bounce;animation-name:bounce;-webkit-transform-origin:center bottom;transform-origin:center bottom}@-webkit-keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}@keyframes flash{0%,50%,to{opacity:1}25%,75%{opacity:0}}.flash{-webkit-animation-name:flash;animation-name:flash}@-webkit-keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes pulse{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}50%{-webkit-transform:scale3d(1.05,1.05,1.05);transform:scale3d(1.05,1.05,1.05)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.pulse{-webkit-animation-name:pulse;animation-name:pulse}@-webkit-keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes rubberBand{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}30%{-webkit-transform:scale3d(1.25,.75,1);transform:scale3d(1.25,.75,1)}40%{-webkit-transform:scale3d(.75,1.25,1);transform:scale3d(.75,1.25,1)}50%{-webkit-transform:scale3d(1.15,.85,1);transform:scale3d(1.15,.85,1)}65%{-webkit-transform:scale3d(.95,1.05,1);transform:scale3d(.95,1.05,1)}75%{-webkit-transform:scale3d(1.05,.95,1);transform:scale3d(1.05,.95,1)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.rubberBand{-webkit-animation-name:rubberBand;animation-name:rubberBand}@-webkit-keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}@keyframes shake{0%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}10%,30%,50%,70%,90%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}20%,40%,60%,80%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}}.shake{-webkit-animation-name:shake;animation-name:shake}@-webkit-keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}@keyframes headShake{0%{-webkit-transform:translateX(0);transform:translateX(0)}6.5%{-webkit-transform:translateX(-6px) rotateY(-9deg);transform:translateX(-6px) rotateY(-9deg)}18.5%{-webkit-transform:translateX(5px) rotateY(7deg);transform:translateX(5px) rotateY(7deg)}31.5%{-webkit-transform:translateX(-3px) rotateY(-5deg);transform:translateX(-3px) rotateY(-5deg)}43.5%{-webkit-transform:translateX(2px) rotateY(3deg);transform:translateX(2px) rotateY(3deg)}50%{-webkit-transform:translateX(0);transform:translateX(0)}}.headShake{-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;-webkit-animation-name:headShake;animation-name:headShake}@-webkit-keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes swing{20%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}40%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}60%{-webkit-transform:rotate(5deg);transform:rotate(5deg)}80%{-webkit-transform:rotate(-5deg);transform:rotate(-5deg)}to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.swing{-webkit-transform-origin:top center;transform-origin:top center;-webkit-animation-name:swing;animation-name:swing}@-webkit-keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes tada{0%{-webkit-transform:scaleX(1);transform:scaleX(1)}10%,20%{-webkit-transform:scale3d(.9,.9,.9) rotate(-3deg);transform:scale3d(.9,.9,.9) rotate(-3deg)}30%,50%,70%,90%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(3deg);transform:scale3d(1.1,1.1,1.1) rotate(3deg)}40%,60%,80%{-webkit-transform:scale3d(1.1,1.1,1.1) rotate(-3deg);transform:scale3d(1.1,1.1,1.1) rotate(-3deg)}to{-webkit-transform:scaleX(1);transform:scaleX(1)}}.tada{-webkit-animation-name:tada;animation-name:tada}@-webkit-keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes wobble{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}15%{-webkit-transform:translate3d(-25%,0,0) rotate(-5deg);transform:translate3d(-25%,0,0) rotate(-5deg)}30%{-webkit-transform:translate3d(20%,0,0) rotate(3deg);transform:translate3d(20%,0,0) rotate(3deg)}45%{-webkit-transform:translate3d(-15%,0,0) rotate(-3deg);transform:translate3d(-15%,0,0) rotate(-3deg)}60%{-webkit-transform:translate3d(10%,0,0) rotate(2deg);transform:translate3d(10%,0,0) rotate(2deg)}75%{-webkit-transform:translate3d(-5%,0,0) rotate(-1deg);transform:translate3d(-5%,0,0) rotate(-1deg)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.wobble{-webkit-animation-name:wobble;animation-name:wobble}@-webkit-keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}@keyframes jello{0%,11.1%,to{-webkit-transform:translateZ(0);transform:translateZ(0)}22.2%{-webkit-transform:skewX(-12.5deg) skewY(-12.5deg);transform:skewX(-12.5deg) skewY(-12.5deg)}33.3%{-webkit-transform:skewX(6.25deg) skewY(6.25deg);transform:skewX(6.25deg) skewY(6.25deg)}44.4%{-webkit-transform:skewX(-3.125deg) skewY(-3.125deg);transform:skewX(-3.125deg) skewY(-3.125deg)}55.5%{-webkit-transform:skewX(1.5625deg) skewY(1.5625deg);transform:skewX(1.5625deg) skewY(1.5625deg)}66.6%{-webkit-transform:skewX(-.78125deg) skewY(-.78125deg);transform:skewX(-.78125deg) skewY(-.78125deg)}77.7%{-webkit-transform:skewX(.390625deg) skewY(.390625deg);transform:skewX(.390625deg) skewY(.390625deg)}88.8%{-webkit-transform:skewX(-.1953125deg) skewY(-.1953125deg);transform:skewX(-.1953125deg) skewY(-.1953125deg)}}.jello{-webkit-animation-name:jello;animation-name:jello;-webkit-transform-origin:center;transform-origin:center}@-webkit-keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}@keyframes bounceIn{0%,20%,40%,60%,80%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}20%{-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}40%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}60%{opacity:1;-webkit-transform:scale3d(1.03,1.03,1.03);transform:scale3d(1.03,1.03,1.03)}80%{-webkit-transform:scale3d(.97,.97,.97);transform:scale3d(.97,.97,.97)}to{opacity:1;-webkit-transform:scaleX(1);transform:scaleX(1)}}.bounceIn{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-name:bounceIn;animation-name:bounceIn}@-webkit-keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInDown{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,-3000px,0);transform:translate3d(0,-3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,25px,0);transform:translate3d(0,25px,0)}75%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}90%{-webkit-transform:translate3d(0,5px,0);transform:translate3d(0,5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInDown{-webkit-animation-name:bounceInDown;animation-name:bounceInDown}@-webkit-keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInLeft{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(-3000px,0,0);transform:translate3d(-3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(25px,0,0);transform:translate3d(25px,0,0)}75%{-webkit-transform:translate3d(-10px,0,0);transform:translate3d(-10px,0,0)}90%{-webkit-transform:translate3d(5px,0,0);transform:translate3d(5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInLeft{-webkit-animation-name:bounceInLeft;animation-name:bounceInLeft}@-webkit-keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInRight{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(3000px,0,0);transform:translate3d(3000px,0,0)}60%{opacity:1;-webkit-transform:translate3d(-25px,0,0);transform:translate3d(-25px,0,0)}75%{-webkit-transform:translate3d(10px,0,0);transform:translate3d(10px,0,0)}90%{-webkit-transform:translate3d(-5px,0,0);transform:translate3d(-5px,0,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInRight{-webkit-animation-name:bounceInRight;animation-name:bounceInRight}@-webkit-keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes bounceInUp{0%,60%,75%,90%,to{-webkit-animation-timing-function:cubic-bezier(.215,.61,.355,1);animation-timing-function:cubic-bezier(.215,.61,.355,1)}0%{opacity:0;-webkit-transform:translate3d(0,3000px,0);transform:translate3d(0,3000px,0)}60%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}75%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}90%{-webkit-transform:translate3d(0,-5px,0);transform:translate3d(0,-5px,0)}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.bounceInUp{-webkit-animation-name:bounceInUp;animation-name:bounceInUp}@-webkit-keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}@keyframes bounceOut{20%{-webkit-transform:scale3d(.9,.9,.9);transform:scale3d(.9,.9,.9)}50%,55%{opacity:1;-webkit-transform:scale3d(1.1,1.1,1.1);transform:scale3d(1.1,1.1,1.1)}to{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}}.bounceOut{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-name:bounceOut;animation-name:bounceOut}@-webkit-keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes bounceOutDown{20%{-webkit-transform:translate3d(0,10px,0);transform:translate3d(0,10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,-20px,0);transform:translate3d(0,-20px,0)}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.bounceOutDown{-webkit-animation-name:bounceOutDown;animation-name:bounceOutDown}@-webkit-keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes bounceOutLeft{20%{opacity:1;-webkit-transform:translate3d(20px,0,0);transform:translate3d(20px,0,0)}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.bounceOutLeft{-webkit-animation-name:bounceOutLeft;animation-name:bounceOutLeft}@-webkit-keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes bounceOutRight{20%{opacity:1;-webkit-transform:translate3d(-20px,0,0);transform:translate3d(-20px,0,0)}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.bounceOutRight{-webkit-animation-name:bounceOutRight;animation-name:bounceOutRight}@-webkit-keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes bounceOutUp{20%{-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0)}40%,45%{opacity:1;-webkit-transform:translate3d(0,20px,0);transform:translate3d(0,20px,0)}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.bounceOutUp{-webkit-animation-name:bounceOutUp;animation-name:bounceOutUp}@-webkit-keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.fadeIn{-webkit-animation-name:fadeIn;animation-name:fadeIn}@-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDown{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown}@-webkit-keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInDownBig{0%{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInDownBig{-webkit-animation-name:fadeInDownBig;animation-name:fadeInDownBig}@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInLeftBig{0%{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInLeftBig{-webkit-animation-name:fadeInLeftBig;animation-name:fadeInLeftBig}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInRightBig{0%{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInRightBig{-webkit-animation-name:fadeInRightBig;animation-name:fadeInRightBig}@-webkit-keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUp{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}@-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.fadeInUpBig{-webkit-animation-name:fadeInUpBig;animation-name:fadeInUpBig}@-webkit-keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.fadeOut{-webkit-animation-name:fadeOut;animation-name:fadeOut}@-webkit-keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}@-webkit-keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}@keyframes fadeOutDownBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,2000px,0);transform:translate3d(0,2000px,0)}}.fadeOutDownBig{-webkit-animation-name:fadeOutDownBig;animation-name:fadeOutDownBig}@-webkit-keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}@keyframes fadeOutLeftBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(-2000px,0,0);transform:translate3d(-2000px,0,0)}}.fadeOutLeftBig{-webkit-animation-name:fadeOutLeftBig;animation-name:fadeOutLeftBig}@-webkit-keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}@keyframes fadeOutRightBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(2000px,0,0);transform:translate3d(2000px,0,0)}}.fadeOutRightBig{-webkit-animation-name:fadeOutRightBig;animation-name:fadeOutRightBig}@-webkit-keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}@keyframes fadeOutUpBig{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(0,-2000px,0);transform:translate3d(0,-2000px,0)}}.fadeOutUpBig{-webkit-animation-name:fadeOutUpBig;animation-name:fadeOutUpBig}@-webkit-keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(-1turn);transform:perspective(400px) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);transform:perspective(400px) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);transform:perspective(400px) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}@keyframes flip{0%{-webkit-transform:perspective(400px) rotateY(-1turn);transform:perspective(400px) rotateY(-1turn);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}40%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-190deg);transform:perspective(400px) translateZ(150px) rotateY(-190deg);-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}50%{-webkit-transform:perspective(400px) translateZ(150px) rotateY(-170deg);transform:perspective(400px) translateZ(150px) rotateY(-170deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}80%{-webkit-transform:perspective(400px) scale3d(.95,.95,.95);transform:perspective(400px) scale3d(.95,.95,.95);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}to{-webkit-transform:perspective(400px);transform:perspective(400px);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}}.animated.flip{-webkit-backface-visibility:visible;backface-visibility:visible;-webkit-animation-name:flip;animation-name:flip}@-webkit-keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInX{0%{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateX(10deg);transform:perspective(400px) rotateX(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateX(-5deg);transform:perspective(400px) rotateX(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInX{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInX;animation-name:flipInX}@-webkit-keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}@keyframes flipInY{0%{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in;opacity:0}40%{-webkit-transform:perspective(400px) rotateY(-20deg);transform:perspective(400px) rotateY(-20deg);-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}60%{-webkit-transform:perspective(400px) rotateY(10deg);transform:perspective(400px) rotateY(10deg);opacity:1}80%{-webkit-transform:perspective(400px) rotateY(-5deg);transform:perspective(400px) rotateY(-5deg)}to{-webkit-transform:perspective(400px);transform:perspective(400px)}}.flipInY{-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipInY;animation-name:flipInY}@-webkit-keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}@keyframes flipOutX{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateX(-20deg);transform:perspective(400px) rotateX(-20deg);opacity:1}to{-webkit-transform:perspective(400px) rotateX(90deg);transform:perspective(400px) rotateX(90deg);opacity:0}}.flipOutX{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-animation-name:flipOutX;animation-name:flipOutX;-webkit-backface-visibility:visible!important;backface-visibility:visible!important}@-webkit-keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}@keyframes flipOutY{0%{-webkit-transform:perspective(400px);transform:perspective(400px)}30%{-webkit-transform:perspective(400px) rotateY(-15deg);transform:perspective(400px) rotateY(-15deg);opacity:1}to{-webkit-transform:perspective(400px) rotateY(90deg);transform:perspective(400px) rotateY(90deg);opacity:0}}.flipOutY{-webkit-animation-duration:.75s;animation-duration:.75s;-webkit-backface-visibility:visible!important;backface-visibility:visible!important;-webkit-animation-name:flipOutY;animation-name:flipOutY}@-webkit-keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes lightSpeedIn{0%{-webkit-transform:translate3d(100%,0,0) skewX(-30deg);transform:translate3d(100%,0,0) skewX(-30deg);opacity:0}60%{-webkit-transform:skewX(20deg);transform:skewX(20deg);opacity:1}80%{-webkit-transform:skewX(-5deg);transform:skewX(-5deg);opacity:1}to{-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.lightSpeedIn{-webkit-animation-name:lightSpeedIn;animation-name:lightSpeedIn;-webkit-animation-timing-function:ease-out;animation-timing-function:ease-out}@-webkit-keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}@keyframes lightSpeedOut{0%{opacity:1}to{-webkit-transform:translate3d(100%,0,0) skewX(30deg);transform:translate3d(100%,0,0) skewX(30deg);opacity:0}}.lightSpeedOut{-webkit-animation-name:lightSpeedOut;animation-name:lightSpeedOut;-webkit-animation-timing-function:ease-in;animation-timing-function:ease-in}@-webkit-keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateIn{0%{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(-200deg);transform:rotate(-200deg);opacity:0}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateIn{-webkit-animation-name:rotateIn;animation-name:rotateIn}@-webkit-keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInDownLeft{-webkit-animation-name:rotateInDownLeft;animation-name:rotateInDownLeft}@-webkit-keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInDownRight{-webkit-animation-name:rotateInDownRight;animation-name:rotateInDownRight}@-webkit-keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInUpLeft{-webkit-animation-name:rotateInUpLeft;animation-name:rotateInUpLeft}@-webkit-keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}@keyframes rotateInUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-90deg);transform:rotate(-90deg);opacity:0}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:translateZ(0);transform:translateZ(0);opacity:1}}.rotateInUpRight{-webkit-animation-name:rotateInUpRight;animation-name:rotateInUpRight}@-webkit-keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}@keyframes rotateOut{0%{-webkit-transform-origin:center;transform-origin:center;opacity:1}to{-webkit-transform-origin:center;transform-origin:center;-webkit-transform:rotate(200deg);transform:rotate(200deg);opacity:0}}.rotateOut{-webkit-animation-name:rotateOut;animation-name:rotateOut}@-webkit-keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}@keyframes rotateOutDownLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(45deg);transform:rotate(45deg);opacity:0}}.rotateOutDownLeft{-webkit-animation-name:rotateOutDownLeft;animation-name:rotateOutDownLeft}@-webkit-keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutDownRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutDownRight{-webkit-animation-name:rotateOutDownRight;animation-name:rotateOutDownRight}@-webkit-keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}@keyframes rotateOutUpLeft{0%{-webkit-transform-origin:left bottom;transform-origin:left bottom;opacity:1}to{-webkit-transform-origin:left bottom;transform-origin:left bottom;-webkit-transform:rotate(-45deg);transform:rotate(-45deg);opacity:0}}.rotateOutUpLeft{-webkit-animation-name:rotateOutUpLeft;animation-name:rotateOutUpLeft}@-webkit-keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}@keyframes rotateOutUpRight{0%{-webkit-transform-origin:right bottom;transform-origin:right bottom;opacity:1}to{-webkit-transform-origin:right bottom;transform-origin:right bottom;-webkit-transform:rotate(90deg);transform:rotate(90deg);opacity:0}}.rotateOutUpRight{-webkit-animation-name:rotateOutUpRight;animation-name:rotateOutUpRight}@-webkit-keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}@keyframes hinge{0%{-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}20%,60%{-webkit-transform:rotate(80deg);transform:rotate(80deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out}40%,80%{-webkit-transform:rotate(60deg);transform:rotate(60deg);-webkit-transform-origin:top left;transform-origin:top left;-webkit-animation-timing-function:ease-in-out;animation-timing-function:ease-in-out;opacity:1}to{-webkit-transform:translate3d(0,700px,0);transform:translate3d(0,700px,0);opacity:0}}.hinge{-webkit-animation-duration:2s;animation-duration:2s;-webkit-animation-name:hinge;animation-name:hinge}@-webkit-keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}@keyframes jackInTheBox{0%{opacity:0;-webkit-transform:scale(.1) rotate(30deg);transform:scale(.1) rotate(30deg);-webkit-transform-origin:center bottom;transform-origin:center bottom}50%{-webkit-transform:rotate(-10deg);transform:rotate(-10deg)}70%{-webkit-transform:rotate(3deg);transform:rotate(3deg)}to{opacity:1;-webkit-transform:scale(1);transform:scale(1)}}.jackInTheBox{-webkit-animation-name:jackInTheBox;animation-name:jackInTheBox}@-webkit-keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes rollIn{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0) rotate(-120deg);transform:translate3d(-100%,0,0) rotate(-120deg)}to{opacity:1;-webkit-transform:translateZ(0);transform:translateZ(0)}}.rollIn{-webkit-animation-name:rollIn;animation-name:rollIn}@-webkit-keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}@keyframes rollOut{0%{opacity:1}to{opacity:0;-webkit-transform:translate3d(100%,0,0) rotate(120deg);transform:translate3d(100%,0,0) rotate(120deg)}}.rollOut{-webkit-animation-name:rollOut;animation-name:rollOut}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}50%{opacity:1}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn}@-webkit-keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInDown{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInDown{-webkit-animation-name:zoomInDown;animation-name:zoomInDown}@-webkit-keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInLeft{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(-1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(10px,0,0);transform:scale3d(.475,.475,.475) translate3d(10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInLeft{-webkit-animation-name:zoomInLeft;animation-name:zoomInLeft}@-webkit-keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInRight{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);transform:scale3d(.1,.1,.1) translate3d(1000px,0,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);transform:scale3d(.475,.475,.475) translate3d(-10px,0,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInRight{-webkit-animation-name:zoomInRight;animation-name:zoomInRight}@-webkit-keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomInUp{0%{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);transform:scale3d(.1,.1,.1) translate3d(0,1000px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}60%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomInUp{-webkit-animation-name:zoomInUp;animation-name:zoomInUp}@-webkit-keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}@keyframes zoomOut{0%{opacity:1}50%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}to{opacity:0}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut}@-webkit-keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutDown{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);transform:scale3d(.475,.475,.475) translate3d(0,-60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutDown{-webkit-animation-name:zoomOutDown;animation-name:zoomOutDown}@-webkit-keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}@keyframes zoomOutLeft{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(42px,0,0);transform:scale3d(.475,.475,.475) translate3d(42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(-2000px,0,0);transform:scale(.1) translate3d(-2000px,0,0);-webkit-transform-origin:left center;transform-origin:left center}}.zoomOutLeft{-webkit-animation-name:zoomOutLeft;animation-name:zoomOutLeft}@-webkit-keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}@keyframes zoomOutRight{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(-42px,0,0);transform:scale3d(.475,.475,.475) translate3d(-42px,0,0)}to{opacity:0;-webkit-transform:scale(.1) translate3d(2000px,0,0);transform:scale(.1) translate3d(2000px,0,0);-webkit-transform-origin:right center;transform-origin:right center}}.zoomOutRight{-webkit-animation-name:zoomOutRight;animation-name:zoomOutRight}@-webkit-keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}@keyframes zoomOutUp{40%{opacity:1;-webkit-transform:scale3d(.475,.475,.475) translate3d(0,60px,0);transform:scale3d(.475,.475,.475) translate3d(0,60px,0);-webkit-animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-timing-function:cubic-bezier(.55,.055,.675,.19)}to{opacity:0;-webkit-transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);transform:scale3d(.1,.1,.1) translate3d(0,-2000px,0);-webkit-transform-origin:center bottom;transform-origin:center bottom;-webkit-animation-timing-function:cubic-bezier(.175,.885,.32,1);animation-timing-function:cubic-bezier(.175,.885,.32,1)}}.zoomOutUp{-webkit-animation-name:zoomOutUp;animation-name:zoomOutUp}@-webkit-keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInDown{0%{-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInDown{-webkit-animation-name:slideInDown;animation-name:slideInDown}@-webkit-keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInLeft{0%{-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInLeft{-webkit-animation-name:slideInLeft;animation-name:slideInLeft}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translateZ(0);transform:translateZ(0)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutDown{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown}@-webkit-keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes slideOutLeft{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.slideOutLeft{-webkit-animation-name:slideOutLeft;animation-name:slideOutLeft}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight}@-webkit-keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes slideOutUp{0%{-webkit-transform:translateZ(0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.slideOutUp{-webkit-animation-name:slideOutUp;animation-name:slideOutUp}
\ No newline at end of file
diff --git a/static/vendor/bootstrap-select/css/bootstrap-select.css b/static/vendor/bootstrap-select/css/bootstrap-select.css
new file mode 100644
index 0000000..752fb87
--- /dev/null
+++ b/static/vendor/bootstrap-select/css/bootstrap-select.css
@@ -0,0 +1,349 @@
+select.bs-select-hidden,
+select.selectpicker {
+ display: none!important
+}
+
+.bootstrap-select {
+ width: 220px\9
+}
+
+.bootstrap-select>.dropdown-toggle {
+ width: 100%;
+ padding-right: 25px;
+ z-index: 1
+}
+
+.bootstrap-select>.dropdown-toggle.bs-placeholder,
+.bootstrap-select>.dropdown-toggle.bs-placeholder:active,
+.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,
+.bootstrap-select>.dropdown-toggle.bs-placeholder:hover {
+ color: #999
+}
+
+.bootstrap-select>select {
+ position: absolute!important;
+ bottom: 0;
+ left: 50%;
+ display: block!important;
+ width: .5px!important;
+ height: 100%!important;
+ padding: 0!important;
+ opacity: 0!important;
+ border: none
+}
+
+.bootstrap-select>select.mobile-device {
+ top: 0;
+ left: 0;
+ display: block!important;
+ width: 100%!important;
+ z-index: 2
+}
+
+.error .bootstrap-select .dropdown-toggle,
+.has-error .bootstrap-select .dropdown-toggle {
+ border-color: #b94a48
+}
+
+.bootstrap-select.fit-width {
+ width: auto!important
+}
+
+.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn) {
+ width: 220px
+}
+
+.bootstrap-select .dropdown-toggle:focus {
+ outline: thin dotted #333!important;
+ outline: 5px auto -webkit-focus-ring-color!important;
+ outline-offset: -2px
+}
+
+.bootstrap-select.form-control {
+ margin-bottom: 0;
+ padding: 0;
+ border: none
+}
+
+.bootstrap-select.form-control:not([class*=col-]) {
+ width: 100%
+}
+
+.bootstrap-select.form-control.input-group-btn {
+ z-index: auto
+}
+
+.bootstrap-select.form-control.input-group-btn:not(:first-child):not(:last-child)>.btn {
+ border-radius: 0
+}
+
+.bootstrap-select.btn-group:not(.input-group-btn),
+.bootstrap-select.btn-group[class*=col-] {
+ float: none;
+ display: inline-block;
+ margin-left: 0
+}
+
+.bootstrap-select.btn-group.dropdown-menu-right,
+.bootstrap-select.btn-group[class*=col-].dropdown-menu-right,
+.row .bootstrap-select.btn-group[class*=col-].dropdown-menu-right {
+ float: right
+}
+
+.form-group .bootstrap-select.btn-group,
+.form-horizontal .bootstrap-select.btn-group,
+.form-inline .bootstrap-select.btn-group {
+ margin-bottom: 0
+}
+
+.form-group-lg .bootstrap-select.btn-group.form-control,
+.form-group-sm .bootstrap-select.btn-group.form-control {
+ padding: 0
+}
+
+.form-group-lg .bootstrap-select.btn-group.form-control .dropdown-toggle,
+.form-group-sm .bootstrap-select.btn-group.form-control .dropdown-toggle {
+ height: 100%;
+ font-size: inherit;
+ line-height: inherit;
+ border-radius: inherit
+}
+
+.form-inline .bootstrap-select.btn-group .form-control {
+ width: 100%
+}
+
+.bootstrap-select.btn-group.disabled,
+.bootstrap-select.btn-group>.disabled {
+ cursor: not-allowed
+}
+
+.bootstrap-select.btn-group.disabled:focus,
+.bootstrap-select.btn-group>.disabled:focus {
+ outline: 0!important
+}
+
+.bootstrap-select.btn-group.bs-container {
+ position: absolute;
+ height: 0!important;
+ padding: 0!important
+}
+
+.bootstrap-select.btn-group.bs-container .dropdown-menu {
+ z-index: 1060
+}
+
+.bootstrap-select.btn-group .dropdown-toggle .filter-option {
+ display: inline-block;
+ overflow: hidden;
+ width: 100%;
+ text-align: left
+}
+
+.bootstrap-select.btn-group .dropdown-toggle .caret {
+ position: absolute;
+ top: 50%;
+ right: 12px;
+ margin-top: -2px;
+ vertical-align: middle
+}
+
+.bootstrap-select.btn-group[class*=col-] .dropdown-toggle {
+ width: 100%
+}
+
+.bootstrap-select.btn-group .dropdown-menu {
+ min-width: 100%;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box
+}
+
+.bootstrap-select.btn-group .dropdown-menu.inner {
+ display: block;
+ position: static;
+ float: none;
+ border: 0;
+ padding: 0;
+ margin: 0;
+ border-radius: 0;
+ -webkit-box-shadow: none;
+ box-shadow: none
+}
+
+.bootstrap-select.btn-group .dropdown-menu li {
+ position: relative
+}
+
+.bootstrap-select.btn-group .dropdown-menu li.active small {
+ color: #fff
+}
+
+.bootstrap-select.btn-group .dropdown-menu li.disabled a {
+ cursor: not-allowed
+}
+
+.bootstrap-select.btn-group .dropdown-menu li a {
+ cursor: pointer;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none
+}
+
+.bootstrap-select.btn-group .dropdown-menu li a.opt {
+ position: relative;
+ padding-left: 2.25em
+}
+
+.bootstrap-select.btn-group .dropdown-menu li a span.check-mark {
+ display: none
+}
+
+.bootstrap-select.btn-group .dropdown-menu li a span.text {
+ display: inline-block
+}
+
+.bootstrap-select.btn-group .dropdown-menu li small {
+ padding-left: .5em
+}
+
+.bootstrap-select.btn-group .dropdown-menu .notify {
+ position: absolute;
+ bottom: 5px;
+ width: 96%;
+ margin: 0 2%;
+ min-height: 26px;
+ padding: 3px 5px;
+ background: #f5f5f5;
+ border: 1px solid #e3e3e3;
+ -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
+ box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
+ pointer-events: none;
+ opacity: .9;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box
+}
+
+.bootstrap-select.btn-group .no-results {
+ padding: 3px;
+ background: #f5f5f5;
+ margin: 0 5px;
+ white-space: nowrap
+}
+
+.bootstrap-select.btn-group.fit-width .dropdown-toggle .filter-option {
+ position: static
+}
+
+.bootstrap-select.btn-group.fit-width .dropdown-toggle .caret {
+ position: static;
+ top: auto;
+ margin-top: -1px
+}
+
+.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {
+ position: absolute;
+ display: inline-block;
+ right: 15px;
+ margin-top: 5px
+}
+
+.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {
+ margin-right: 34px
+}
+
+.bootstrap-select.show-menu-arrow.open>.dropdown-toggle {
+ z-index: 1061
+}
+
+.bootstrap-select.show-menu-arrow .dropdown-toggle:before {
+ content: '';
+ border-left: 7px solid transparent;
+ border-right: 7px solid transparent;
+ border-bottom: 7px solid rgba(204, 204, 204, .2);
+ position: absolute;
+ bottom: -4px;
+ left: 9px;
+ display: none
+}
+
+.bootstrap-select.show-menu-arrow .dropdown-toggle:after {
+ content: '';
+ border-left: 6px solid transparent;
+ border-right: 6px solid transparent;
+ border-bottom: 6px solid #fff;
+ position: absolute;
+ bottom: -4px;
+ left: 10px;
+ display: none
+}
+
+.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:before {
+ bottom: auto;
+ top: -3px;
+ border-top: 7px solid rgba(204, 204, 204, .2);
+ border-bottom: 0
+}
+
+.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:after {
+ bottom: auto;
+ top: -3px;
+ border-top: 6px solid #fff;
+ border-bottom: 0
+}
+
+.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:before {
+ right: 12px;
+ left: auto
+}
+
+.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:after {
+ right: 13px;
+ left: auto
+}
+
+.bootstrap-select.show-menu-arrow.open>.dropdown-toggle:after,
+.bootstrap-select.show-menu-arrow.open>.dropdown-toggle:before {
+ display: block
+}
+
+.bs-actionsbox,
+.bs-donebutton,
+.bs-searchbox {
+ padding: 4px 8px
+}
+
+.bs-actionsbox {
+ width: 100%;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box
+}
+
+.bs-actionsbox .btn-group button {
+ width: 50%
+}
+
+.bs-donebutton {
+ float: left;
+ width: 100%;
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box
+}
+
+.bs-donebutton .btn-group button {
+ width: 100%
+}
+
+.bs-searchbox+.bs-actionsbox {
+ padding: 0 8px 4px
+}
+
+.bs-searchbox .form-control {
+ margin-bottom: 0;
+ width: 100%;
+ float: none
+}
\ No newline at end of file
diff --git a/static/vendor/bootstrap-select/css/bootstrap-select.css.map b/static/vendor/bootstrap-select/css/bootstrap-select.css.map
new file mode 100644
index 0000000..53dd5db
--- /dev/null
+++ b/static/vendor/bootstrap-select/css/bootstrap-select.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["less/bootstrap-select.less","bootstrap-select.css"],"names":[],"mappings":"AAQA;;EAEE,yBAAA;CCPD;ADUD;EACE,gBAAA;ECRA,iBAAiB;CAClB;ADMD;EAKI,YAAA;EACA,oBAAA;EACA,WAAA;CCRH;ADUG;;;;EAG0B,YAAA;CCP7B;ADLD;EAgBI,8BAAA;EACA,UAAA;EACA,UAAA;EACA,0BAAA;EACA,wBAAA;EACA,wBAAA;EACA,sBAAA;EACA,sBAAA;EACA,aAAA;CCRH;ADUG;EACE,OAAA;EACA,QAAA;EACA,0BAAA;EACA,uBAAA;EACA,WAAA;CCRL;ADaC;;EAEE,sBAAA;CCXH;ADcC;EACE,uBAAA;CCZH;ADeC;EACE,aAAA;CCbH;ADjCD;EAkDI,wCAAA;EACA,sDAAA;EACA,qBAAA;CCdH;ADkBD;EACE,iBAAA;EACA,WAAA;EACA,aAAA;CChBD;ADkBC;EACE,YAAA;CChBH;ADmBC;EACE,cAAA;CCjBH;ADmBG;EAEI,iBAAA;CClBP;AD0BC;;EAEE,YAAA;EACA,sBAAA;EACA,eAAA;CCxBH;AD+BG;;;EACE,aAAA;CC3BL;AD+BC;;;EAGE,iBAAA;CC7BH;ADgCC;;EAEE,WAAA;CC9BH;AD4BC;;EAKI,aAAA;EACA,mBAAA;EACA,qBAAA;EACA,uBAAA;CC7BL;ADmCC;EACE,YAAA;CCjCH;ADoCC;;EA/HA,oBAAA;CC+FD;ADoCG;;EACE,yBAAA;CCjCL;ADqCC;EACE,mBAAA;EACA,qBAAA;EACA,sBAAA;CCnCH;ADgCC;EAMI,cAAA;CCnCL;ADrBD;EA+DM,sBAAA;EACA,iBAAA;EACA,YAAA;EACA,iBAAA;CCvCL;AD3BD;EAsEM,mBAAA;EACA,SAAA;EACA,YAAA;EACA,iBAAA;EACA,uBAAA;CCxCL;AD4CC;EACE,YAAA;CC1CH;ADrCD;EAoFI,gBAAA;EACA,+BAAA;KAAA,4BAAA;UAAA,uBAAA;CC5CH;AD8CG;EACE,iBAAA;EACA,YAAA;EACA,UAAA;EACA,WAAA;EACA,UAAA;EACA,iBAAA;EACA,yBAAA;UAAA,iBAAA;CC5CL;ADlDD;EAkGM,mBAAA;CC7CL;AD+CK;EACE,YAAA;CC7CP;ADgDK;EA9LJ,oBAAA;CCiJD;AD3DD;EA6GQ,gBAAA;EACA,0BAAA;KAAA,uBAAA;MAAA,sBAAA;UAAA,kBAAA;CC/CP;ADiDO;EACE,mBAAA;EACA,qBAAA;CC/CT;ADnED;EAsHU,cAAA;CChDT;ADtED;EA0HU,sBAAA;CCjDT;ADzED;EA+HQ,oBAAA;CCnDP;AD5ED;EAoIM,mBAAA;EACA,YAAA;EACA,WAAA;EACA,aAAA;EACA,iBAAA;EACA,iBAAA;EACA,oBAAA;EACA,0BAAA;EACA,wDAAA;UAAA,gDAAA;EACA,qBAAA;EACA,aAAA;EACA,+BAAA;KAAA,4BAAA;UAAA,uBAAA;CCrDL;AD1FD;EAoJI,aAAA;EACA,oBAAA;EACA,cAAA;EACA,oBAAA;CCvDH;AD0DC;EAEI,iBAAA;CCzDL;ADuDC;EAMI,iBAAA;EACA,UAAA;EACA,iBAAA;CC1DL;AD+DG;EACE,mBAAA;EACA,sBAAA;EACA,YAAA;EACA,gBAAA;CC7DL;ADwDC;EASI,mBAAA;CC9DL;ADoEC;EACE,cAAA;CClEH;ADsEG;EACE,YAAA;EACA,mCAAA;EACA,oCAAA;EACA,kDAAA;EACA,mBAAA;EACA,aAAA;EACA,UAAA;EACA,cAAA;CCpEL;ADuEG;EACE,YAAA;EACA,mCAAA;EACA,oCAAA;EACA,+BAAA;EACA,mBAAA;EACA,aAAA;EACA,WAAA;EACA,cAAA;CCrEL;AD0EG;EACE,aAAA;EACA,UAAA;EACA,+CAAA;EACA,iBAAA;CCxEL;AD2EG;EACE,aAAA;EACA,UAAA;EACA,4BAAA;EACA,iBAAA;CCzEL;AD8EG;EACE,YAAA;EACA,WAAA;CC5EL;AD+EG;EACE,YAAA;EACA,WAAA;CC7EL;ADkFG;;EAEE,eAAA;CChFL;ADqFD;;;EAGE,iBAAA;CCnFD;ADsFD;EACE,YAAA;EACA,+BAAA;KAAA,4BAAA;UAAA,uBAAA;CCpFD;ADsFC;EACE,WAAA;CCpFH;ADwFD;EACE,YAAA;EACA,YAAA;EACA,+BAAA;KAAA,4BAAA;UAAA,uBAAA;CCtFD;ADwFC;EACE,YAAA;CCtFH;AD2FC;EACE,mBAAA;CCzFH;AD4FC;EACE,iBAAA;EACA,YAAA;EACA,YAAA;CC1FH","file":"bootstrap-select.css","sourcesContent":["@import \"variables\";\n\n// Mixins\n.cursor-disabled() {\n cursor: not-allowed;\n}\n\n// Rules\nselect.bs-select-hidden,\nselect.selectpicker {\n display: none !important;\n}\n\n.bootstrap-select {\n width: 220px \\0; /*IE9 and below*/\n\n // The selectpicker button\n > .dropdown-toggle {\n width: 100%;\n padding-right: 25px;\n z-index: 1;\n\n &.bs-placeholder,\n &.bs-placeholder:hover,\n &.bs-placeholder:focus,\n &.bs-placeholder:active { color: @input-color-placeholder; }\n }\n\n > select {\n position: absolute !important;\n bottom: 0;\n left: 50%;\n display: block !important;\n width: 0.5px !important;\n height: 100% !important;\n padding: 0 !important;\n opacity: 0 !important;\n border: none;\n\n &.mobile-device {\n top: 0;\n left: 0;\n display: block !important;\n width: 100% !important;\n z-index: 2;\n }\n }\n\n // Error display\n .has-error & .dropdown-toggle,\n .error & .dropdown-toggle {\n border-color: @color-red-error;\n }\n\n &.fit-width {\n width: auto !important;\n }\n\n &:not([class*=\"col-\"]):not([class*=\"form-control\"]):not(.input-group-btn) {\n width: @width-default;\n }\n\n .dropdown-toggle:focus {\n outline: thin dotted #333333 !important;\n outline: 5px auto -webkit-focus-ring-color !important;\n outline-offset: -2px;\n }\n}\n\n.bootstrap-select.form-control {\n margin-bottom: 0;\n padding: 0;\n border: none;\n\n &:not([class*=\"col-\"]) {\n width: 100%;\n }\n\n &.input-group-btn {\n z-index: auto;\n\n &:not(:first-child):not(:last-child) {\n > .btn {\n border-radius: 0;\n }\n }\n }\n}\n\n// The selectpicker components\n.bootstrap-select.btn-group {\n &:not(.input-group-btn),\n &[class*=\"col-\"] {\n float: none;\n display: inline-block;\n margin-left: 0;\n }\n\n // Forces the pull to the right, if necessary\n &,\n &[class*=\"col-\"],\n .row &[class*=\"col-\"] {\n &.dropdown-menu-right {\n float: right;\n }\n }\n\n .form-inline &,\n .form-horizontal &,\n .form-group & {\n margin-bottom: 0;\n }\n\n .form-group-lg &.form-control,\n .form-group-sm &.form-control {\n padding: 0;\n\n .dropdown-toggle {\n height: 100%;\n font-size: inherit;\n line-height: inherit;\n border-radius: inherit;\n }\n }\n\n // Set the width of the live search (and any other form control within an inline form)\n // see https://github.com/silviomoreto/bootstrap-select/issues/685\n .form-inline & .form-control {\n width: 100%;\n }\n\n &.disabled,\n > .disabled {\n .cursor-disabled();\n\n &:focus {\n outline: none !important;\n }\n }\n\n &.bs-container {\n position: absolute;\n height: 0 !important;\n padding: 0 !important;\n \n .dropdown-menu {\n z-index: @zindex-select-dropdown;\n }\n }\n\n // The selectpicker button\n .dropdown-toggle {\n .filter-option {\n display: inline-block;\n overflow: hidden;\n width: 100%;\n text-align: left;\n }\n\n .caret {\n position: absolute;\n top: 50%;\n right: 12px;\n margin-top: -2px;\n vertical-align: middle;\n }\n }\n\n &[class*=\"col-\"] .dropdown-toggle {\n width: 100%;\n }\n\n // The selectpicker dropdown\n .dropdown-menu {\n min-width: 100%;\n box-sizing: border-box;\n\n &.inner {\n position: static;\n float: none;\n border: 0;\n padding: 0;\n margin: 0;\n border-radius: 0;\n box-shadow: none;\n }\n\n li {\n position: relative;\n\n &.active small {\n color: #fff;\n }\n\n &.disabled a {\n .cursor-disabled();\n }\n\n a {\n cursor: pointer;\n user-select: none;\n\n &.opt {\n position: relative;\n padding-left: 2.25em;\n }\n\n span.check-mark {\n display: none;\n }\n\n span.text {\n display: inline-block;\n }\n }\n\n small {\n padding-left: 0.5em;\n }\n }\n\n .notify {\n position: absolute;\n bottom: 5px;\n width: 96%;\n margin: 0 2%;\n min-height: 26px;\n padding: 3px 5px;\n background: rgb(245, 245, 245);\n border: 1px solid rgb(227, 227, 227);\n box-shadow: inset 0 1px 1px fade(rgb(0, 0, 0), 5%);\n pointer-events: none;\n opacity: 0.9;\n box-sizing: border-box;\n }\n }\n\n .no-results {\n padding: 3px;\n background: #f5f5f5;\n margin: 0 5px;\n white-space: nowrap;\n }\n\n &.fit-width .dropdown-toggle {\n .filter-option {\n position: static;\n }\n\n .caret {\n position: static;\n top: auto;\n margin-top: -1px;\n }\n }\n\n &.show-tick .dropdown-menu li {\n &.selected a span.check-mark {\n position: absolute;\n display: inline-block;\n right: 15px;\n margin-top: 5px;\n }\n\n a span.text {\n margin-right: 34px;\n }\n }\n}\n\n.bootstrap-select.show-menu-arrow {\n &.open > .dropdown-toggle {\n z-index: (@zindex-select-dropdown + 1);\n }\n\n .dropdown-toggle {\n &:before {\n content: '';\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n border-bottom: 7px solid @color-grey-arrow;\n position: absolute;\n bottom: -4px;\n left: 9px;\n display: none;\n }\n\n &:after {\n content: '';\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-bottom: 6px solid white;\n position: absolute;\n bottom: -4px;\n left: 10px;\n display: none;\n }\n }\n\n &.dropup .dropdown-toggle {\n &:before {\n bottom: auto;\n top: -3px;\n border-top: 7px solid @color-grey-arrow;\n border-bottom: 0;\n }\n\n &:after {\n bottom: auto;\n top: -3px;\n border-top: 6px solid white;\n border-bottom: 0;\n }\n }\n\n &.pull-right .dropdown-toggle {\n &:before {\n right: 12px;\n left: auto;\n }\n\n &:after {\n right: 13px;\n left: auto;\n }\n }\n\n &.open > .dropdown-toggle {\n &:before,\n &:after {\n display: block;\n }\n }\n}\n\n.bs-searchbox,\n.bs-actionsbox,\n.bs-donebutton {\n padding: 4px 8px;\n}\n\n.bs-actionsbox {\n width: 100%;\n box-sizing: border-box;\n\n & .btn-group button {\n width: 50%;\n }\n}\n\n.bs-donebutton {\n float: left;\n width: 100%;\n box-sizing: border-box;\n\n & .btn-group button {\n width: 100%;\n }\n}\n\n.bs-searchbox {\n & + .bs-actionsbox {\n padding: 0 8px 4px;\n }\n\n & .form-control {\n margin-bottom: 0;\n width: 100%;\n float: none;\n }\n}\n","select.bs-select-hidden,\nselect.selectpicker {\n display: none !important;\n}\n.bootstrap-select {\n width: 220px \\0;\n /*IE9 and below*/\n}\n.bootstrap-select > .dropdown-toggle {\n width: 100%;\n padding-right: 25px;\n z-index: 1;\n}\n.bootstrap-select > .dropdown-toggle.bs-placeholder,\n.bootstrap-select > .dropdown-toggle.bs-placeholder:hover,\n.bootstrap-select > .dropdown-toggle.bs-placeholder:focus,\n.bootstrap-select > .dropdown-toggle.bs-placeholder:active {\n color: #999;\n}\n.bootstrap-select > select {\n position: absolute !important;\n bottom: 0;\n left: 50%;\n display: block !important;\n width: 0.5px !important;\n height: 100% !important;\n padding: 0 !important;\n opacity: 0 !important;\n border: none;\n}\n.bootstrap-select > select.mobile-device {\n top: 0;\n left: 0;\n display: block !important;\n width: 100% !important;\n z-index: 2;\n}\n.has-error .bootstrap-select .dropdown-toggle,\n.error .bootstrap-select .dropdown-toggle {\n border-color: #b94a48;\n}\n.bootstrap-select.fit-width {\n width: auto !important;\n}\n.bootstrap-select:not([class*=\"col-\"]):not([class*=\"form-control\"]):not(.input-group-btn) {\n width: 220px;\n}\n.bootstrap-select .dropdown-toggle:focus {\n outline: thin dotted #333333 !important;\n outline: 5px auto -webkit-focus-ring-color !important;\n outline-offset: -2px;\n}\n.bootstrap-select.form-control {\n margin-bottom: 0;\n padding: 0;\n border: none;\n}\n.bootstrap-select.form-control:not([class*=\"col-\"]) {\n width: 100%;\n}\n.bootstrap-select.form-control.input-group-btn {\n z-index: auto;\n}\n.bootstrap-select.form-control.input-group-btn:not(:first-child):not(:last-child) > .btn {\n border-radius: 0;\n}\n.bootstrap-select.btn-group:not(.input-group-btn),\n.bootstrap-select.btn-group[class*=\"col-\"] {\n float: none;\n display: inline-block;\n margin-left: 0;\n}\n.bootstrap-select.btn-group.dropdown-menu-right,\n.bootstrap-select.btn-group[class*=\"col-\"].dropdown-menu-right,\n.row .bootstrap-select.btn-group[class*=\"col-\"].dropdown-menu-right {\n float: right;\n}\n.form-inline .bootstrap-select.btn-group,\n.form-horizontal .bootstrap-select.btn-group,\n.form-group .bootstrap-select.btn-group {\n margin-bottom: 0;\n}\n.form-group-lg .bootstrap-select.btn-group.form-control,\n.form-group-sm .bootstrap-select.btn-group.form-control {\n padding: 0;\n}\n.form-group-lg .bootstrap-select.btn-group.form-control .dropdown-toggle,\n.form-group-sm .bootstrap-select.btn-group.form-control .dropdown-toggle {\n height: 100%;\n font-size: inherit;\n line-height: inherit;\n border-radius: inherit;\n}\n.form-inline .bootstrap-select.btn-group .form-control {\n width: 100%;\n}\n.bootstrap-select.btn-group.disabled,\n.bootstrap-select.btn-group > .disabled {\n cursor: not-allowed;\n}\n.bootstrap-select.btn-group.disabled:focus,\n.bootstrap-select.btn-group > .disabled:focus {\n outline: none !important;\n}\n.bootstrap-select.btn-group.bs-container {\n position: absolute;\n height: 0 !important;\n padding: 0 !important;\n}\n.bootstrap-select.btn-group.bs-container .dropdown-menu {\n z-index: 1060;\n}\n.bootstrap-select.btn-group .dropdown-toggle .filter-option {\n display: inline-block;\n overflow: hidden;\n width: 100%;\n text-align: left;\n}\n.bootstrap-select.btn-group .dropdown-toggle .caret {\n position: absolute;\n top: 50%;\n right: 12px;\n margin-top: -2px;\n vertical-align: middle;\n}\n.bootstrap-select.btn-group[class*=\"col-\"] .dropdown-toggle {\n width: 100%;\n}\n.bootstrap-select.btn-group .dropdown-menu {\n min-width: 100%;\n box-sizing: border-box;\n}\n.bootstrap-select.btn-group .dropdown-menu.inner {\n position: static;\n float: none;\n border: 0;\n padding: 0;\n margin: 0;\n border-radius: 0;\n box-shadow: none;\n}\n.bootstrap-select.btn-group .dropdown-menu li {\n position: relative;\n}\n.bootstrap-select.btn-group .dropdown-menu li.active small {\n color: #fff;\n}\n.bootstrap-select.btn-group .dropdown-menu li.disabled a {\n cursor: not-allowed;\n}\n.bootstrap-select.btn-group .dropdown-menu li a {\n cursor: pointer;\n user-select: none;\n}\n.bootstrap-select.btn-group .dropdown-menu li a.opt {\n position: relative;\n padding-left: 2.25em;\n}\n.bootstrap-select.btn-group .dropdown-menu li a span.check-mark {\n display: none;\n}\n.bootstrap-select.btn-group .dropdown-menu li a span.text {\n display: inline-block;\n}\n.bootstrap-select.btn-group .dropdown-menu li small {\n padding-left: 0.5em;\n}\n.bootstrap-select.btn-group .dropdown-menu .notify {\n position: absolute;\n bottom: 5px;\n width: 96%;\n margin: 0 2%;\n min-height: 26px;\n padding: 3px 5px;\n background: #f5f5f5;\n border: 1px solid #e3e3e3;\n box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);\n pointer-events: none;\n opacity: 0.9;\n box-sizing: border-box;\n}\n.bootstrap-select.btn-group .no-results {\n padding: 3px;\n background: #f5f5f5;\n margin: 0 5px;\n white-space: nowrap;\n}\n.bootstrap-select.btn-group.fit-width .dropdown-toggle .filter-option {\n position: static;\n}\n.bootstrap-select.btn-group.fit-width .dropdown-toggle .caret {\n position: static;\n top: auto;\n margin-top: -1px;\n}\n.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark {\n position: absolute;\n display: inline-block;\n right: 15px;\n margin-top: 5px;\n}\n.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text {\n margin-right: 34px;\n}\n.bootstrap-select.show-menu-arrow.open > .dropdown-toggle {\n z-index: 1061;\n}\n.bootstrap-select.show-menu-arrow .dropdown-toggle:before {\n content: '';\n border-left: 7px solid transparent;\n border-right: 7px solid transparent;\n border-bottom: 7px solid rgba(204, 204, 204, 0.2);\n position: absolute;\n bottom: -4px;\n left: 9px;\n display: none;\n}\n.bootstrap-select.show-menu-arrow .dropdown-toggle:after {\n content: '';\n border-left: 6px solid transparent;\n border-right: 6px solid transparent;\n border-bottom: 6px solid white;\n position: absolute;\n bottom: -4px;\n left: 10px;\n display: none;\n}\n.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:before {\n bottom: auto;\n top: -3px;\n border-top: 7px solid rgba(204, 204, 204, 0.2);\n border-bottom: 0;\n}\n.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:after {\n bottom: auto;\n top: -3px;\n border-top: 6px solid white;\n border-bottom: 0;\n}\n.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:before {\n right: 12px;\n left: auto;\n}\n.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:after {\n right: 13px;\n left: auto;\n}\n.bootstrap-select.show-menu-arrow.open > .dropdown-toggle:before,\n.bootstrap-select.show-menu-arrow.open > .dropdown-toggle:after {\n display: block;\n}\n.bs-searchbox,\n.bs-actionsbox,\n.bs-donebutton {\n padding: 4px 8px;\n}\n.bs-actionsbox {\n width: 100%;\n box-sizing: border-box;\n}\n.bs-actionsbox .btn-group button {\n width: 50%;\n}\n.bs-donebutton {\n float: left;\n width: 100%;\n box-sizing: border-box;\n}\n.bs-donebutton .btn-group button {\n width: 100%;\n}\n.bs-searchbox + .bs-actionsbox {\n padding: 0 8px 4px;\n}\n.bs-searchbox .form-control {\n margin-bottom: 0;\n width: 100%;\n float: none;\n}\n/*# sourceMappingURL=bootstrap-select.css.map */"]}
\ No newline at end of file
diff --git a/static/vendor/bootstrap-select/css/bootstrap-select.min.css b/static/vendor/bootstrap-select/css/bootstrap-select.min.css
new file mode 100644
index 0000000..eaf0ddd
--- /dev/null
+++ b/static/vendor/bootstrap-select/css/bootstrap-select.min.css
@@ -0,0 +1,6 @@
+/*!
+ * Bootstrap-select v1.12.4 (https://silviomoreto.github.io/bootstrap-select)
+ *
+ * Copyright 2013-2017 bootstrap-select
+ * Licensed under MIT (https://github.com/silviomoreto/bootstrap-select/blob/master/LICENSE)
+ */select.bs-select-hidden,select.selectpicker{display:none!important}.bootstrap-select{width:220px\0}.bootstrap-select>.dropdown-toggle{width:100%;padding-right:25px;z-index:1}.bootstrap-select>select{position:absolute!important;bottom:0;left:50%;display:block!important;width:.5px!important;height:100%!important;padding:0!important;opacity:0!important;border:none}.bootstrap-select>select.mobile-device{top:0;left:0;display:block!important;width:100%!important;z-index:2}.error .bootstrap-select .dropdown-toggle,.has-error .bootstrap-select .dropdown-toggle{border-color:#b94a48}.bootstrap-select.fit-width{width:auto!important}.bootstrap-select:not([class*=col-]):not([class*=form-control]):not(.input-group-btn){width:220px}.bootstrap-select .dropdown-toggle:focus{outline:thin dotted #333!important;outline:5px auto -webkit-focus-ring-color!important;outline-offset:-2px}.bootstrap-select.form-control{margin-bottom:0;padding:0;border:none}.bootstrap-select.form-control:not([class*=col-]){width:100%}.bootstrap-select.form-control.input-group-btn{z-index:auto}.bootstrap-select.form-control.input-group-btn:not(:first-child):not(:last-child)>.btn{border-radius:0}.bootstrap-select.btn-group:not(.input-group-btn),.bootstrap-select.btn-group[class*=col-]{float:none;display:inline-block;margin-left:0}.bootstrap-select.btn-group.dropdown-menu-right,.bootstrap-select.btn-group[class*=col-].dropdown-menu-right,.row .bootstrap-select.btn-group[class*=col-].dropdown-menu-right{float:right}.form-group .bootstrap-select.btn-group,.form-horizontal .bootstrap-select.btn-group,.form-inline .bootstrap-select.btn-group{margin-bottom:0}.form-group-lg .bootstrap-select.btn-group.form-control,.form-group-sm .bootstrap-select.btn-group.form-control{padding:0}.form-group-lg .bootstrap-select.btn-group.form-control .dropdown-toggle,.form-group-sm .bootstrap-select.btn-group.form-control .dropdown-toggle{height:100%;font-size:inherit;line-height:inherit;border-radius:inherit}.form-inline .bootstrap-select.btn-group .form-control{width:100%}.bootstrap-select.btn-group.disabled,.bootstrap-select.btn-group>.disabled{cursor:not-allowed}.bootstrap-select.btn-group.disabled:focus,.bootstrap-select.btn-group>.disabled:focus{outline:0!important}.bootstrap-select.btn-group.bs-container{position:absolute;height:0!important;padding:0!important}.bootstrap-select.btn-group.bs-container .dropdown-menu{z-index:1060}.bootstrap-select.btn-group .dropdown-toggle .filter-option{display:inline-block;overflow:hidden;width:100%;text-align:left}.bootstrap-select.btn-group .dropdown-toggle .caret{position:absolute;top:50%;right:12px;margin-top:-2px;vertical-align:middle}.bootstrap-select.btn-group[class*=col-] .dropdown-toggle{width:100%}.bootstrap-select.btn-group .dropdown-menu{min-width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bootstrap-select.btn-group .dropdown-menu.inner{position:static;float:none;border:0;padding:0;margin:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none}.bootstrap-select.btn-group .dropdown-menu li{position:relative}.bootstrap-select.btn-group .dropdown-menu li.active small{color:#fff}.bootstrap-select.btn-group .dropdown-menu li.disabled a{cursor:not-allowed}.bootstrap-select.btn-group .dropdown-menu li a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.bootstrap-select.btn-group .dropdown-menu li a.opt{position:relative;padding-left:2.25em}.bootstrap-select.btn-group .dropdown-menu li a span.check-mark{display:none}.bootstrap-select.btn-group .dropdown-menu li a span.text{display:inline-block}.bootstrap-select.btn-group .dropdown-menu li small{padding-left:.5em}.bootstrap-select.btn-group .dropdown-menu .notify{position:absolute;bottom:5px;width:96%;margin:0 2%;min-height:26px;padding:3px 5px;background:#f5f5f5;border:1px solid #e3e3e3;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05);pointer-events:none;opacity:.9;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bootstrap-select.btn-group .no-results{padding:3px;background:#f5f5f5;margin:0 5px;white-space:nowrap}.bootstrap-select.btn-group.fit-width .dropdown-toggle .filter-option{position:static}.bootstrap-select.btn-group.fit-width .dropdown-toggle .caret{position:static;top:auto;margin-top:-1px}.bootstrap-select.btn-group.show-tick .dropdown-menu li.selected a span.check-mark{position:absolute;display:inline-block;right:15px;margin-top:5px}.bootstrap-select.btn-group.show-tick .dropdown-menu li a span.text{margin-right:34px}.bootstrap-select.show-menu-arrow.open>.dropdown-toggle{z-index:1061}.bootstrap-select.show-menu-arrow .dropdown-toggle:before{content:'';border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid rgba(204,204,204,.2);position:absolute;bottom:-4px;left:9px;display:none}.bootstrap-select.show-menu-arrow .dropdown-toggle:after{content:'';border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;bottom:-4px;left:10px;display:none}.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:before{bottom:auto;top:-3px;border-top:7px solid rgba(204,204,204,.2);border-bottom:0}.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle:after{bottom:auto;top:-3px;border-top:6px solid #fff;border-bottom:0}.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:before{right:12px;left:auto}.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle:after{right:13px;left:auto}.bootstrap-select.show-menu-arrow.open>.dropdown-toggle:after,.bootstrap-select.show-menu-arrow.open>.dropdown-toggle:before{display:block}.bs-actionsbox,.bs-donebutton,.bs-searchbox{padding:4px 8px}.bs-actionsbox{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bs-actionsbox .btn-group button{width:50%}.bs-donebutton{float:left;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.bs-donebutton .btn-group button{width:100%}.bs-searchbox+.bs-actionsbox{padding:0 8px 4px}.bs-searchbox .form-control{margin-bottom:0;width:100%;float:none}
\ No newline at end of file
diff --git a/static/vendor/bootstrap-select/js/bootstrap-select.js b/static/vendor/bootstrap-select/js/bootstrap-select.js
new file mode 100644
index 0000000..e2f63dd
--- /dev/null
+++ b/static/vendor/bootstrap-select/js/bootstrap-select.js
@@ -0,0 +1,1872 @@
+/*!
+ * Bootstrap-select v1.12.4 (https://silviomoreto.github.io/bootstrap-select)
+ *
+ * Copyright 2013-2017 bootstrap-select
+ * Licensed under MIT (https://github.com/silviomoreto/bootstrap-select/blob/master/LICENSE)
+ */
+
+(function (root, factory) {
+ if (typeof define === 'function' && define.amd) {
+ // AMD. Register as an anonymous module unless amdModuleId is set
+ define(["jquery"], function (a0) {
+ return (factory(a0));
+ });
+ } else if (typeof module === 'object' && module.exports) {
+ // Node. Does not work with strict CommonJS, but
+ // only CommonJS-like environments that support module.exports,
+ // like Node.
+ module.exports = factory(require("jquery"));
+ } else {
+ factory(root["jQuery"]);
+ }
+}(this, function (jQuery) {
+
+(function ($) {
+ 'use strict';
+
+ //
+ if (!String.prototype.includes) {
+ (function () {
+ 'use strict'; // needed to support `apply`/`call` with `undefined`/`null`
+ var toString = {}.toString;
+ var defineProperty = (function () {
+ // IE 8 only supports `Object.defineProperty` on DOM elements
+ try {
+ var object = {};
+ var $defineProperty = Object.defineProperty;
+ var result = $defineProperty(object, object, object) && $defineProperty;
+ } catch (error) {
+ }
+ return result;
+ }());
+ var indexOf = ''.indexOf;
+ var includes = function (search) {
+ if (this == null) {
+ throw new TypeError();
+ }
+ var string = String(this);
+ if (search && toString.call(search) == '[object RegExp]') {
+ throw new TypeError();
+ }
+ var stringLength = string.length;
+ var searchString = String(search);
+ var searchLength = searchString.length;
+ var position = arguments.length > 1 ? arguments[1] : undefined;
+ // `ToInteger`
+ var pos = position ? Number(position) : 0;
+ if (pos != pos) { // better `isNaN`
+ pos = 0;
+ }
+ var start = Math.min(Math.max(pos, 0), stringLength);
+ // Avoid the `indexOf` call if no match is possible
+ if (searchLength + start > stringLength) {
+ return false;
+ }
+ return indexOf.call(string, searchString, pos) != -1;
+ };
+ if (defineProperty) {
+ defineProperty(String.prototype, 'includes', {
+ 'value': includes,
+ 'configurable': true,
+ 'writable': true
+ });
+ } else {
+ String.prototype.includes = includes;
+ }
+ }());
+ }
+
+ if (!String.prototype.startsWith) {
+ (function () {
+ 'use strict'; // needed to support `apply`/`call` with `undefined`/`null`
+ var defineProperty = (function () {
+ // IE 8 only supports `Object.defineProperty` on DOM elements
+ try {
+ var object = {};
+ var $defineProperty = Object.defineProperty;
+ var result = $defineProperty(object, object, object) && $defineProperty;
+ } catch (error) {
+ }
+ return result;
+ }());
+ var toString = {}.toString;
+ var startsWith = function (search) {
+ if (this == null) {
+ throw new TypeError();
+ }
+ var string = String(this);
+ if (search && toString.call(search) == '[object RegExp]') {
+ throw new TypeError();
+ }
+ var stringLength = string.length;
+ var searchString = String(search);
+ var searchLength = searchString.length;
+ var position = arguments.length > 1 ? arguments[1] : undefined;
+ // `ToInteger`
+ var pos = position ? Number(position) : 0;
+ if (pos != pos) { // better `isNaN`
+ pos = 0;
+ }
+ var start = Math.min(Math.max(pos, 0), stringLength);
+ // Avoid the `indexOf` call if no match is possible
+ if (searchLength + start > stringLength) {
+ return false;
+ }
+ var index = -1;
+ while (++index < searchLength) {
+ if (string.charCodeAt(start + index) != searchString.charCodeAt(index)) {
+ return false;
+ }
+ }
+ return true;
+ };
+ if (defineProperty) {
+ defineProperty(String.prototype, 'startsWith', {
+ 'value': startsWith,
+ 'configurable': true,
+ 'writable': true
+ });
+ } else {
+ String.prototype.startsWith = startsWith;
+ }
+ }());
+ }
+
+ if (!Object.keys) {
+ Object.keys = function (
+ o, // object
+ k, // key
+ r // result array
+ ){
+ // initialize object and result
+ r=[];
+ // iterate over object keys
+ for (k in o)
+ // fill result array with non-prototypical keys
+ r.hasOwnProperty.call(o, k) && r.push(k);
+ // return result
+ return r;
+ };
+ }
+
+ // set data-selected on select element if the value has been programmatically selected
+ // prior to initialization of bootstrap-select
+ // * consider removing or replacing an alternative method *
+ var valHooks = {
+ useDefault: false,
+ _set: $.valHooks.select.set
+ };
+
+ $.valHooks.select.set = function(elem, value) {
+ if (value && !valHooks.useDefault) $(elem).data('selected', true);
+
+ return valHooks._set.apply(this, arguments);
+ };
+
+ var changed_arguments = null;
+
+ var EventIsSupported = (function() {
+ try {
+ new Event('change');
+ return true;
+ } catch (e) {
+ return false;
+ }
+ })();
+
+ $.fn.triggerNative = function (eventName) {
+ var el = this[0],
+ event;
+
+ if (el.dispatchEvent) { // for modern browsers & IE9+
+ if (EventIsSupported) {
+ // For modern browsers
+ event = new Event(eventName, {
+ bubbles: true
+ });
+ } else {
+ // For IE since it doesn't support Event constructor
+ event = document.createEvent('Event');
+ event.initEvent(eventName, true, false);
+ }
+
+ el.dispatchEvent(event);
+ } else if (el.fireEvent) { // for IE8
+ event = document.createEventObject();
+ event.eventType = eventName;
+ el.fireEvent('on' + eventName, event);
+ } else {
+ // fall back to jQuery.trigger
+ this.trigger(eventName);
+ }
+ };
+ //
+
+ // Case insensitive contains search
+ $.expr.pseudos.icontains = function (obj, index, meta) {
+ var $obj = $(obj).find('a');
+ var haystack = ($obj.data('tokens') || $obj.text()).toString().toUpperCase();
+ return haystack.includes(meta[3].toUpperCase());
+ };
+
+ // Case insensitive begins search
+ $.expr.pseudos.ibegins = function (obj, index, meta) {
+ var $obj = $(obj).find('a');
+ var haystack = ($obj.data('tokens') || $obj.text()).toString().toUpperCase();
+ return haystack.startsWith(meta[3].toUpperCase());
+ };
+
+ // Case and accent insensitive contains search
+ $.expr.pseudos.aicontains = function (obj, index, meta) {
+ var $obj = $(obj).find('a');
+ var haystack = ($obj.data('tokens') || $obj.data('normalizedText') || $obj.text()).toString().toUpperCase();
+ return haystack.includes(meta[3].toUpperCase());
+ };
+
+ // Case and accent insensitive begins search
+ $.expr.pseudos.aibegins = function (obj, index, meta) {
+ var $obj = $(obj).find('a');
+ var haystack = ($obj.data('tokens') || $obj.data('normalizedText') || $obj.text()).toString().toUpperCase();
+ return haystack.startsWith(meta[3].toUpperCase());
+ };
+
+ /**
+ * Remove all diatrics from the given text.
+ * @access private
+ * @param {String} text
+ * @returns {String}
+ */
+ function normalizeToBase(text) {
+ var rExps = [
+ {re: /[\xC0-\xC6]/g, ch: "A"},
+ {re: /[\xE0-\xE6]/g, ch: "a"},
+ {re: /[\xC8-\xCB]/g, ch: "E"},
+ {re: /[\xE8-\xEB]/g, ch: "e"},
+ {re: /[\xCC-\xCF]/g, ch: "I"},
+ {re: /[\xEC-\xEF]/g, ch: "i"},
+ {re: /[\xD2-\xD6]/g, ch: "O"},
+ {re: /[\xF2-\xF6]/g, ch: "o"},
+ {re: /[\xD9-\xDC]/g, ch: "U"},
+ {re: /[\xF9-\xFC]/g, ch: "u"},
+ {re: /[\xC7-\xE7]/g, ch: "c"},
+ {re: /[\xD1]/g, ch: "N"},
+ {re: /[\xF1]/g, ch: "n"}
+ ];
+ $.each(rExps, function () {
+ text = text ? text.replace(this.re, this.ch) : '';
+ });
+ return text;
+ }
+
+
+ // List of HTML entities for escaping.
+ var escapeMap = {
+ '&': '&',
+ '<': '<',
+ '>': '>',
+ '"': '"',
+ "'": ''',
+ '`': '`'
+ };
+
+ var unescapeMap = {
+ '&': '&',
+ '<': '<',
+ '>': '>',
+ '"': '"',
+ ''': "'",
+ '`': '`'
+ };
+
+ // Functions for escaping and unescaping strings to/from HTML interpolation.
+ var createEscaper = function(map) {
+ var escaper = function(match) {
+ return map[match];
+ };
+ // Regexes for identifying a key that needs to be escaped.
+ var source = '(?:' + Object.keys(map).join('|') + ')';
+ var testRegexp = RegExp(source);
+ var replaceRegexp = RegExp(source, 'g');
+ return function(string) {
+ string = string == null ? '' : '' + string;
+ return testRegexp.test(string) ? string.replace(replaceRegexp, escaper) : string;
+ };
+ };
+
+ var htmlEscape = createEscaper(escapeMap);
+ var htmlUnescape = createEscaper(unescapeMap);
+
+ var Selectpicker = function (element, options) {
+ // bootstrap-select has been initialized - revert valHooks.select.set back to its original function
+ if (!valHooks.useDefault) {
+ $.valHooks.select.set = valHooks._set;
+ valHooks.useDefault = true;
+ }
+
+ this.$element = $(element);
+ this.$newElement = null;
+ this.$button = null;
+ this.$menu = null;
+ this.$lis = null;
+ this.options = options;
+
+ // If we have no title yet, try to pull it from the html title attribute (jQuery doesnt' pick it up as it's not a
+ // data-attribute)
+ if (this.options.title === null) {
+ this.options.title = this.$element.attr('title');
+ }
+
+ // Format window padding
+ var winPad = this.options.windowPadding;
+ if (typeof winPad === 'number') {
+ this.options.windowPadding = [winPad, winPad, winPad, winPad];
+ }
+
+ //Expose public methods
+ this.val = Selectpicker.prototype.val;
+ this.render = Selectpicker.prototype.render;
+ this.refresh = Selectpicker.prototype.refresh;
+ this.setStyle = Selectpicker.prototype.setStyle;
+ this.selectAll = Selectpicker.prototype.selectAll;
+ this.deselectAll = Selectpicker.prototype.deselectAll;
+ this.destroy = Selectpicker.prototype.destroy;
+ this.remove = Selectpicker.prototype.remove;
+ this.show = Selectpicker.prototype.show;
+ this.hide = Selectpicker.prototype.hide;
+
+ this.init();
+ };
+
+ Selectpicker.VERSION = '1.12.4';
+
+ // part of this is duplicated in i18n/defaults-en_US.js. Make sure to update both.
+ Selectpicker.DEFAULTS = {
+ noneSelectedText: 'Nothing selected',
+ noneResultsText: 'No results matched {0}',
+ countSelectedText: function (numSelected, numTotal) {
+ return (numSelected == 1) ? "{0} item selected" : "{0} items selected";
+ },
+ maxOptionsText: function (numAll, numGroup) {
+ return [
+ (numAll == 1) ? 'Limit reached ({n} item max)' : 'Limit reached ({n} items max)',
+ (numGroup == 1) ? 'Group limit reached ({n} item max)' : 'Group limit reached ({n} items max)'
+ ];
+ },
+ selectAllText: 'Select All',
+ deselectAllText: 'Deselect All',
+ doneButton: false,
+ doneButtonText: 'Close',
+ multipleSeparator: ', ',
+ styleBase: 'btn',
+ style: 'btn-default',
+ size: 'auto',
+ title: null,
+ selectedTextFormat: 'values',
+ width: false,
+ container: false,
+ hideDisabled: false,
+ showSubtext: false,
+ showIcon: true,
+ showContent: true,
+ dropupAuto: true,
+ header: false,
+ liveSearch: false,
+ liveSearchPlaceholder: null,
+ liveSearchNormalize: false,
+ liveSearchStyle: 'contains',
+ actionsBox: false,
+ iconBase: 'glyphicon',
+ tickIcon: 'glyphicon-ok',
+ showTick: false,
+ template: {
+ caret: '
'
+ },
+ maxOptions: false,
+ mobile: false,
+ selectOnTab: false,
+ dropdownAlignRight: false,
+ windowPadding: 0
+ };
+
+ Selectpicker.prototype = {
+
+ constructor: Selectpicker,
+
+ init: function () {
+ var that = this,
+ id = this.$element.attr('id');
+
+ this.$element.addClass('bs-select-hidden');
+
+ // store originalIndex (key) and newIndex (value) in this.liObj for fast accessibility
+ // allows us to do this.$lis.eq(that.liObj[index]) instead of this.$lis.filter('[data-original-index="' + index + '"]')
+ this.liObj = {};
+ this.multiple = this.$element.prop('multiple');
+ this.autofocus = this.$element.prop('autofocus');
+ this.$newElement = this.createView();
+ this.$element
+ .after(this.$newElement)
+ .appendTo(this.$newElement);
+ this.$button = this.$newElement.children('button');
+ this.$menu = this.$newElement.children('.dropdown-menu');
+ this.$menuInner = this.$menu.children('.inner');
+ this.$searchbox = this.$menu.find('input');
+
+ this.$element.removeClass('bs-select-hidden');
+
+ if (this.options.dropdownAlignRight === true) this.$menu.addClass('dropdown-menu-right');
+
+ if (typeof id !== 'undefined') {
+ this.$button.attr('data-id', id);
+ $('label[for="' + id + '"]').click(function (e) {
+ e.preventDefault();
+ that.$button.focus();
+ });
+ }
+
+ this.checkDisabled();
+ this.clickListener();
+ if (this.options.liveSearch) this.liveSearchListener();
+ this.render();
+ this.setStyle();
+ this.setWidth();
+ if (this.options.container) this.selectPosition();
+ this.$menu.data('this', this);
+ this.$newElement.data('this', this);
+ if (this.options.mobile) this.mobile();
+
+ this.$newElement.on({
+ 'hide.bs.dropdown': function (e) {
+ that.$menuInner.attr('aria-expanded', false);
+ that.$element.trigger('hide.bs.select', e);
+ },
+ 'hidden.bs.dropdown': function (e) {
+ that.$element.trigger('hidden.bs.select', e);
+ },
+ 'show.bs.dropdown': function (e) {
+ that.$menuInner.attr('aria-expanded', true);
+ that.$element.trigger('show.bs.select', e);
+ },
+ 'shown.bs.dropdown': function (e) {
+ that.$element.trigger('shown.bs.select', e);
+ }
+ });
+
+ if (that.$element[0].hasAttribute('required')) {
+ this.$element.on('invalid', function () {
+ that.$button.addClass('bs-invalid');
+
+ that.$element.on({
+ 'focus.bs.select': function () {
+ that.$button.focus();
+ that.$element.off('focus.bs.select');
+ },
+ 'shown.bs.select': function () {
+ that.$element
+ .val(that.$element.val()) // set the value to hide the validation message in Chrome when menu is opened
+ .off('shown.bs.select');
+ },
+ 'rendered.bs.select': function () {
+ // if select is no longer invalid, remove the bs-invalid class
+ if (this.validity.valid) that.$button.removeClass('bs-invalid');
+ that.$element.off('rendered.bs.select');
+ }
+ });
+
+ that.$button.on('blur.bs.select', function() {
+ that.$element.focus().blur();
+ that.$button.off('blur.bs.select');
+ });
+ });
+ }
+
+ setTimeout(function () {
+ that.$element.trigger('loaded.bs.select');
+ });
+ },
+
+ createDropdown: function () {
+ // Options
+ // If we are multiple or showTick option is set, then add the show-tick class
+ var showTick = (this.multiple || this.options.showTick) ? ' show-tick' : '',
+ inputGroup = this.$element.parent().hasClass('input-group') ? ' input-group-btn' : '',
+ autofocus = this.autofocus ? ' autofocus' : '';
+ // Elements
+ var header = this.options.header ? '
' + this.options.header + '
' : '';
+ var searchbox = this.options.liveSearch ?
+ '
' +
+ '' +
+ '
'
+ : '';
+ var actionsbox = this.multiple && this.options.actionsBox ?
+ '
' +
+ '
' +
+ '' +
+ '' +
+ '
' +
+ '
'
+ : '';
+ var donebutton = this.multiple && this.options.doneButton ?
+ '
'
+ : '';
+ var drop =
+ '
' +
+ '' +
+ '' +
+ '
';
+
+ return $(drop);
+ },
+
+ createView: function () {
+ var $drop = this.createDropdown(),
+ li = this.createLi();
+
+ $drop.find('ul')[0].innerHTML = li;
+ return $drop;
+ },
+
+ reloadLi: function () {
+ // rebuild
+ var li = this.createLi();
+ this.$menuInner[0].innerHTML = li;
+ },
+
+ createLi: function () {
+ var that = this,
+ _li = [],
+ optID = 0,
+ titleOption = document.createElement('option'),
+ liIndex = -1; // increment liIndex whenever a new
element is created to ensure liObj is correct
+
+ // Helper functions
+ /**
+ * @param content
+ * @param [index]
+ * @param [classes]
+ * @param [optgroup]
+ * @returns {string}
+ */
+ var generateLI = function (content, index, classes, optgroup) {
+ return '' + content + '';
+ };
+
+ /**
+ * @param text
+ * @param [classes]
+ * @param [inline]
+ * @param [tokens]
+ * @returns {string}
+ */
+ var generateA = function (text, classes, inline, tokens) {
+ return '
' + text +
+ '' +
+ '';
+ };
+
+ if (this.options.title && !this.multiple) {
+ // this option doesn't create a new
element, but does add a new option, so liIndex is decreased
+ // since liObj is recalculated on every refresh, liIndex needs to be decreased even if the titleOption is already appended
+ liIndex--;
+
+ if (!this.$element.find('.bs-title-option').length) {
+ // Use native JS to prepend option (faster)
+ var element = this.$element[0];
+ titleOption.className = 'bs-title-option';
+ titleOption.innerHTML = this.options.title;
+ titleOption.value = '';
+ element.insertBefore(titleOption, element.firstChild);
+ // Check if selected or data-selected attribute is already set on an option. If not, select the titleOption option.
+ // the selected item may have been changed by user or programmatically before the bootstrap select plugin runs,
+ // if so, the select will have the data-selected attribute
+ var $opt = $(element.options[element.selectedIndex]);
+ if ($opt.attr('selected') === undefined && this.$element.data('selected') === undefined) {
+ titleOption.selected = true;
+ }
+ }
+ }
+
+ var $selectOptions = this.$element.find('option');
+
+ $selectOptions.each(function (index) {
+ var $this = $(this);
+
+ liIndex++;
+
+ if ($this.hasClass('bs-title-option')) return;
+
+ // Get the class and text for the option
+ var optionClass = this.className || '',
+ inline = htmlEscape(this.style.cssText),
+ text = $this.data('content') ? $this.data('content') : $this.html(),
+ tokens = $this.data('tokens') ? $this.data('tokens') : null,
+ subtext = typeof $this.data('subtext') !== 'undefined' ? '' + $this.data('subtext') + '' : '',
+ icon = typeof $this.data('icon') !== 'undefined' ? ' ' : '',
+ $parent = $this.parent(),
+ isOptgroup = $parent[0].tagName === 'OPTGROUP',
+ isOptgroupDisabled = isOptgroup && $parent[0].disabled,
+ isDisabled = this.disabled || isOptgroupDisabled,
+ prevHiddenIndex;
+
+ if (icon !== '' && isDisabled) {
+ icon = '' + icon + '';
+ }
+
+ if (that.options.hideDisabled && (isDisabled && !isOptgroup || isOptgroupDisabled)) {
+ // set prevHiddenIndex - the index of the first hidden option in a group of hidden options
+ // used to determine whether or not a divider should be placed after an optgroup if there are
+ // hidden options between the optgroup and the first visible option
+ prevHiddenIndex = $this.data('prevHiddenIndex');
+ $this.next().data('prevHiddenIndex', (prevHiddenIndex !== undefined ? prevHiddenIndex : index));
+
+ liIndex--;
+ return;
+ }
+
+ if (!$this.data('content')) {
+ // Prepend any icon and append any subtext to the main text.
+ text = icon + '' + text + subtext + '';
+ }
+
+ if (isOptgroup && $this.data('divider') !== true) {
+ if (that.options.hideDisabled && isDisabled) {
+ if ($parent.data('allOptionsDisabled') === undefined) {
+ var $options = $parent.children();
+ $parent.data('allOptionsDisabled', $options.filter(':disabled').length === $options.length);
+ }
+
+ if ($parent.data('allOptionsDisabled')) {
+ liIndex--;
+ return;
+ }
+ }
+
+ var optGroupClass = ' ' + $parent[0].className || '';
+
+ if ($this.index() === 0) { // Is it the first option of the optgroup?
+ optID += 1;
+
+ // Get the opt group label
+ var label = $parent[0].label,
+ labelSubtext = typeof $parent.data('subtext') !== 'undefined' ? '' + $parent.data('subtext') + '' : '',
+ labelIcon = $parent.data('icon') ? ' ' : '';
+
+ label = labelIcon + '' + htmlEscape(label) + labelSubtext + '';
+
+ if (index !== 0 && _li.length > 0) { // Is it NOT the first option of the select && are there elements in the dropdown?
+ liIndex++;
+ _li.push(generateLI('', null, 'divider', optID + 'div'));
+ }
+ liIndex++;
+ _li.push(generateLI(label, null, 'dropdown-header' + optGroupClass, optID));
+ }
+
+ if (that.options.hideDisabled && isDisabled) {
+ liIndex--;
+ return;
+ }
+
+ _li.push(generateLI(generateA(text, 'opt ' + optionClass + optGroupClass, inline, tokens), index, '', optID));
+ } else if ($this.data('divider') === true) {
+ _li.push(generateLI('', index, 'divider'));
+ } else if ($this.data('hidden') === true) {
+ // set prevHiddenIndex - the index of the first hidden option in a group of hidden options
+ // used to determine whether or not a divider should be placed after an optgroup if there are
+ // hidden options between the optgroup and the first visible option
+ prevHiddenIndex = $this.data('prevHiddenIndex');
+ $this.next().data('prevHiddenIndex', (prevHiddenIndex !== undefined ? prevHiddenIndex : index));
+
+ _li.push(generateLI(generateA(text, optionClass, inline, tokens), index, 'hidden is-hidden'));
+ } else {
+ var showDivider = this.previousElementSibling && this.previousElementSibling.tagName === 'OPTGROUP';
+
+ // if previous element is not an optgroup and hideDisabled is true
+ if (!showDivider && that.options.hideDisabled) {
+ prevHiddenIndex = $this.data('prevHiddenIndex');
+
+ if (prevHiddenIndex !== undefined) {
+ // select the element **before** the first hidden element in the group
+ var prevHidden = $selectOptions.eq(prevHiddenIndex)[0].previousElementSibling;
+
+ if (prevHidden && prevHidden.tagName === 'OPTGROUP' && !prevHidden.disabled) {
+ showDivider = true;
+ }
+ }
+ }
+
+ if (showDivider) {
+ liIndex++;
+ _li.push(generateLI('', null, 'divider', optID + 'div'));
+ }
+ _li.push(generateLI(generateA(text, optionClass, inline, tokens), index));
+ }
+
+ that.liObj[index] = liIndex;
+ });
+
+ //If we are not multiple, we don't have a selected item, and we don't have a title, select the first element so something is set in the button
+ if (!this.multiple && this.$element.find('option:selected').length === 0 && !this.options.title) {
+ this.$element.find('option').eq(0).prop('selected', true).attr('selected', 'selected');
+ }
+
+ return _li.join('');
+ },
+
+ findLis: function () {
+ if (this.$lis == null) this.$lis = this.$menu.find('li');
+ return this.$lis;
+ },
+
+ /**
+ * @param [updateLi] defaults to true
+ */
+ render: function (updateLi) {
+ var that = this,
+ notDisabled,
+ $selectOptions = this.$element.find('option');
+
+ //Update the LI to match the SELECT
+ if (updateLi !== false) {
+ $selectOptions.each(function (index) {
+ var $lis = that.findLis().eq(that.liObj[index]);
+
+ that.setDisabled(index, this.disabled || this.parentNode.tagName === 'OPTGROUP' && this.parentNode.disabled, $lis);
+ that.setSelected(index, this.selected, $lis);
+ });
+ }
+
+ this.togglePlaceholder();
+
+ this.tabIndex();
+
+ var selectedItems = $selectOptions.map(function () {
+ if (this.selected) {
+ if (that.options.hideDisabled && (this.disabled || this.parentNode.tagName === 'OPTGROUP' && this.parentNode.disabled)) return;
+
+ var $this = $(this),
+ icon = $this.data('icon') && that.options.showIcon ? ' ' : '',
+ subtext;
+
+ if (that.options.showSubtext && $this.data('subtext') && !that.multiple) {
+ subtext = ' ' + $this.data('subtext') + '';
+ } else {
+ subtext = '';
+ }
+ if (typeof $this.attr('title') !== 'undefined') {
+ return $this.attr('title');
+ } else if ($this.data('content') && that.options.showContent) {
+ return $this.data('content').toString();
+ } else {
+ return icon + $this.html() + subtext;
+ }
+ }
+ }).toArray();
+
+ //Fixes issue in IE10 occurring when no default option is selected and at least one option is disabled
+ //Convert all the values into a comma delimited string
+ var title = !this.multiple ? selectedItems[0] : selectedItems.join(this.options.multipleSeparator);
+
+ //If this is multi select, and the selectText type is count, the show 1 of 2 selected etc..
+ if (this.multiple && this.options.selectedTextFormat.indexOf('count') > -1) {
+ var max = this.options.selectedTextFormat.split('>');
+ if ((max.length > 1 && selectedItems.length > max[1]) || (max.length == 1 && selectedItems.length >= 2)) {
+ notDisabled = this.options.hideDisabled ? ', [disabled]' : '';
+ var totalCount = $selectOptions.not('[data-divider="true"], [data-hidden="true"]' + notDisabled).length,
+ tr8nText = (typeof this.options.countSelectedText === 'function') ? this.options.countSelectedText(selectedItems.length, totalCount) : this.options.countSelectedText;
+ title = tr8nText.replace('{0}', selectedItems.length.toString()).replace('{1}', totalCount.toString());
+ }
+ }
+
+ if (this.options.title == undefined) {
+ this.options.title = this.$element.attr('title');
+ }
+
+ if (this.options.selectedTextFormat == 'static') {
+ title = this.options.title;
+ }
+
+ //If we dont have a title, then use the default, or if nothing is set at all, use the not selected text
+ if (!title) {
+ title = typeof this.options.title !== 'undefined' ? this.options.title : this.options.noneSelectedText;
+ }
+
+ //strip all HTML tags and trim the result, then unescape any escaped tags
+ this.$button.attr('title', htmlUnescape($.trim(title.replace(/<[^>]*>?/g, ''))));
+ this.$button.children('.filter-option').html(title);
+
+ this.$element.trigger('rendered.bs.select');
+ },
+
+ /**
+ * @param [style]
+ * @param [status]
+ */
+ setStyle: function (style, status) {
+ if (this.$element.attr('class')) {
+ this.$newElement.addClass(this.$element.attr('class').replace(/selectpicker|mobile-device|bs-select-hidden|validate\[.*\]/gi, ''));
+ }
+
+ var buttonClass = style ? style : this.options.style;
+
+ if (status == 'add') {
+ this.$button.addClass(buttonClass);
+ } else if (status == 'remove') {
+ this.$button.removeClass(buttonClass);
+ } else {
+ this.$button.removeClass(this.options.style);
+ this.$button.addClass(buttonClass);
+ }
+ },
+
+ liHeight: function (refresh) {
+ if (!refresh && (this.options.size === false || this.sizeInfo)) return;
+
+ var newElement = document.createElement('div'),
+ menu = document.createElement('div'),
+ menuInner = document.createElement('ul'),
+ divider = document.createElement('li'),
+ li = document.createElement('li'),
+ a = document.createElement('a'),
+ text = document.createElement('span'),
+ header = this.options.header && this.$menu.find('.popover-title').length > 0 ? this.$menu.find('.popover-title')[0].cloneNode(true) : null,
+ search = this.options.liveSearch ? document.createElement('div') : null,
+ actions = this.options.actionsBox && this.multiple && this.$menu.find('.bs-actionsbox').length > 0 ? this.$menu.find('.bs-actionsbox')[0].cloneNode(true) : null,
+ doneButton = this.options.doneButton && this.multiple && this.$menu.find('.bs-donebutton').length > 0 ? this.$menu.find('.bs-donebutton')[0].cloneNode(true) : null;
+
+ text.className = 'text';
+ newElement.className = this.$menu[0].parentNode.className + ' open';
+ menu.className = 'dropdown-menu open';
+ menuInner.className = 'dropdown-menu inner';
+ divider.className = 'divider';
+
+ text.appendChild(document.createTextNode('Inner text'));
+ a.appendChild(text);
+ li.appendChild(a);
+ menuInner.appendChild(li);
+ menuInner.appendChild(divider);
+ if (header) menu.appendChild(header);
+ if (search) {
+ var input = document.createElement('input');
+ search.className = 'bs-searchbox';
+ input.className = 'form-control';
+ search.appendChild(input);
+ menu.appendChild(search);
+ }
+ if (actions) menu.appendChild(actions);
+ menu.appendChild(menuInner);
+ if (doneButton) menu.appendChild(doneButton);
+ newElement.appendChild(menu);
+
+ document.body.appendChild(newElement);
+
+ var liHeight = a.offsetHeight,
+ headerHeight = header ? header.offsetHeight : 0,
+ searchHeight = search ? search.offsetHeight : 0,
+ actionsHeight = actions ? actions.offsetHeight : 0,
+ doneButtonHeight = doneButton ? doneButton.offsetHeight : 0,
+ dividerHeight = $(divider).outerHeight(true),
+ // fall back to jQuery if getComputedStyle is not supported
+ menuStyle = typeof getComputedStyle === 'function' ? getComputedStyle(menu) : false,
+ $menu = menuStyle ? null : $(menu),
+ menuPadding = {
+ vert: parseInt(menuStyle ? menuStyle.paddingTop : $menu.css('paddingTop')) +
+ parseInt(menuStyle ? menuStyle.paddingBottom : $menu.css('paddingBottom')) +
+ parseInt(menuStyle ? menuStyle.borderTopWidth : $menu.css('borderTopWidth')) +
+ parseInt(menuStyle ? menuStyle.borderBottomWidth : $menu.css('borderBottomWidth')),
+ horiz: parseInt(menuStyle ? menuStyle.paddingLeft : $menu.css('paddingLeft')) +
+ parseInt(menuStyle ? menuStyle.paddingRight : $menu.css('paddingRight')) +
+ parseInt(menuStyle ? menuStyle.borderLeftWidth : $menu.css('borderLeftWidth')) +
+ parseInt(menuStyle ? menuStyle.borderRightWidth : $menu.css('borderRightWidth'))
+ },
+ menuExtras = {
+ vert: menuPadding.vert +
+ parseInt(menuStyle ? menuStyle.marginTop : $menu.css('marginTop')) +
+ parseInt(menuStyle ? menuStyle.marginBottom : $menu.css('marginBottom')) + 2,
+ horiz: menuPadding.horiz +
+ parseInt(menuStyle ? menuStyle.marginLeft : $menu.css('marginLeft')) +
+ parseInt(menuStyle ? menuStyle.marginRight : $menu.css('marginRight')) + 2
+ }
+
+ document.body.removeChild(newElement);
+
+ this.sizeInfo = {
+ liHeight: liHeight,
+ headerHeight: headerHeight,
+ searchHeight: searchHeight,
+ actionsHeight: actionsHeight,
+ doneButtonHeight: doneButtonHeight,
+ dividerHeight: dividerHeight,
+ menuPadding: menuPadding,
+ menuExtras: menuExtras
+ };
+ },
+
+ setSize: function () {
+ this.findLis();
+ this.liHeight();
+
+ if (this.options.header) this.$menu.css('padding-top', 0);
+ if (this.options.size === false) return;
+
+ var that = this,
+ $menu = this.$menu,
+ $menuInner = this.$menuInner,
+ $window = $(window),
+ selectHeight = this.$newElement[0].offsetHeight,
+ selectWidth = this.$newElement[0].offsetWidth,
+ liHeight = this.sizeInfo['liHeight'],
+ headerHeight = this.sizeInfo['headerHeight'],
+ searchHeight = this.sizeInfo['searchHeight'],
+ actionsHeight = this.sizeInfo['actionsHeight'],
+ doneButtonHeight = this.sizeInfo['doneButtonHeight'],
+ divHeight = this.sizeInfo['dividerHeight'],
+ menuPadding = this.sizeInfo['menuPadding'],
+ menuExtras = this.sizeInfo['menuExtras'],
+ notDisabled = this.options.hideDisabled ? '.disabled' : '',
+ menuHeight,
+ menuWidth,
+ getHeight,
+ getWidth,
+ selectOffsetTop,
+ selectOffsetBot,
+ selectOffsetLeft,
+ selectOffsetRight,
+ getPos = function() {
+ var pos = that.$newElement.offset(),
+ $container = $(that.options.container),
+ containerPos;
+
+ if (that.options.container && !$container.is('body')) {
+ containerPos = $container.offset();
+ containerPos.top += parseInt($container.css('borderTopWidth'));
+ containerPos.left += parseInt($container.css('borderLeftWidth'));
+ } else {
+ containerPos = { top: 0, left: 0 };
+ }
+
+ var winPad = that.options.windowPadding;
+ selectOffsetTop = pos.top - containerPos.top - $window.scrollTop();
+ selectOffsetBot = $window.height() - selectOffsetTop - selectHeight - containerPos.top - winPad[2];
+ selectOffsetLeft = pos.left - containerPos.left - $window.scrollLeft();
+ selectOffsetRight = $window.width() - selectOffsetLeft - selectWidth - containerPos.left - winPad[1];
+ selectOffsetTop -= winPad[0];
+ selectOffsetLeft -= winPad[3];
+ };
+
+ getPos();
+
+ if (this.options.size === 'auto') {
+ var getSize = function () {
+ var minHeight,
+ hasClass = function (className, include) {
+ return function (element) {
+ if (include) {
+ return (element.classList ? element.classList.contains(className) : $(element).hasClass(className));
+ } else {
+ return !(element.classList ? element.classList.contains(className) : $(element).hasClass(className));
+ }
+ };
+ },
+ lis = that.$menuInner[0].getElementsByTagName('li'),
+ lisVisible = Array.prototype.filter ? Array.prototype.filter.call(lis, hasClass('hidden', false)) : that.$lis.not('.hidden'),
+ optGroup = Array.prototype.filter ? Array.prototype.filter.call(lisVisible, hasClass('dropdown-header', true)) : lisVisible.filter('.dropdown-header');
+
+ getPos();
+ menuHeight = selectOffsetBot - menuExtras.vert;
+ menuWidth = selectOffsetRight - menuExtras.horiz;
+
+ if (that.options.container) {
+ if (!$menu.data('height')) $menu.data('height', $menu.height());
+ getHeight = $menu.data('height');
+
+ if (!$menu.data('width')) $menu.data('width', $menu.width());
+ getWidth = $menu.data('width');
+ } else {
+ getHeight = $menu.height();
+ getWidth = $menu.width();
+ }
+
+ if (that.options.dropupAuto) {
+ that.$newElement.toggleClass('dropup', selectOffsetTop > selectOffsetBot && (menuHeight - menuExtras.vert) < getHeight);
+ }
+
+ if (that.$newElement.hasClass('dropup')) {
+ menuHeight = selectOffsetTop - menuExtras.vert;
+ }
+
+ if (that.options.dropdownAlignRight === 'auto') {
+ $menu.toggleClass('dropdown-menu-right', selectOffsetLeft > selectOffsetRight && (menuWidth - menuExtras.horiz) < (getWidth - selectWidth));
+ }
+
+ if ((lisVisible.length + optGroup.length) > 3) {
+ minHeight = liHeight * 3 + menuExtras.vert - 2;
+ } else {
+ minHeight = 0;
+ }
+
+ $menu.css({
+ 'max-height': menuHeight + 'px',
+ 'overflow': 'hidden',
+ 'min-height': minHeight + headerHeight + searchHeight + actionsHeight + doneButtonHeight + 'px'
+ });
+ $menuInner.css({
+ 'max-height': menuHeight - headerHeight - searchHeight - actionsHeight - doneButtonHeight - menuPadding.vert + 'px',
+ 'overflow-y': 'auto',
+ 'min-height': Math.max(minHeight - menuPadding.vert, 0) + 'px'
+ });
+ };
+ getSize();
+ this.$searchbox.off('input.getSize propertychange.getSize').on('input.getSize propertychange.getSize', getSize);
+ $window.off('resize.getSize scroll.getSize').on('resize.getSize scroll.getSize', getSize);
+ } else if (this.options.size && this.options.size != 'auto' && this.$lis.not(notDisabled).length > this.options.size) {
+ var optIndex = this.$lis.not('.divider').not(notDisabled).children().slice(0, this.options.size).last().parent().index(),
+ divLength = this.$lis.slice(0, optIndex + 1).filter('.divider').length;
+ menuHeight = liHeight * this.options.size + divLength * divHeight + menuPadding.vert;
+
+ if (that.options.container) {
+ if (!$menu.data('height')) $menu.data('height', $menu.height());
+ getHeight = $menu.data('height');
+ } else {
+ getHeight = $menu.height();
+ }
+
+ if (that.options.dropupAuto) {
+ //noinspection JSUnusedAssignment
+ this.$newElement.toggleClass('dropup', selectOffsetTop > selectOffsetBot && (menuHeight - menuExtras.vert) < getHeight);
+ }
+ $menu.css({
+ 'max-height': menuHeight + headerHeight + searchHeight + actionsHeight + doneButtonHeight + 'px',
+ 'overflow': 'hidden',
+ 'min-height': ''
+ });
+ $menuInner.css({
+ 'max-height': menuHeight - menuPadding.vert + 'px',
+ 'overflow-y': 'auto',
+ 'min-height': ''
+ });
+ }
+ },
+
+ setWidth: function () {
+ if (this.options.width === 'auto') {
+ this.$menu.css('min-width', '0');
+
+ // Get correct width if element is hidden
+ var $selectClone = this.$menu.parent().clone().appendTo('body'),
+ $selectClone2 = this.options.container ? this.$newElement.clone().appendTo('body') : $selectClone,
+ ulWidth = $selectClone.children('.dropdown-menu').outerWidth(),
+ btnWidth = $selectClone2.css('width', 'auto').children('button').outerWidth();
+
+ $selectClone.remove();
+ $selectClone2.remove();
+
+ // Set width to whatever's larger, button title or longest option
+ this.$newElement.css('width', Math.max(ulWidth, btnWidth) + 'px');
+ } else if (this.options.width === 'fit') {
+ // Remove inline min-width so width can be changed from 'auto'
+ this.$menu.css('min-width', '');
+ this.$newElement.css('width', '').addClass('fit-width');
+ } else if (this.options.width) {
+ // Remove inline min-width so width can be changed from 'auto'
+ this.$menu.css('min-width', '');
+ this.$newElement.css('width', this.options.width);
+ } else {
+ // Remove inline min-width/width so width can be changed
+ this.$menu.css('min-width', '');
+ this.$newElement.css('width', '');
+ }
+ // Remove fit-width class if width is changed programmatically
+ if (this.$newElement.hasClass('fit-width') && this.options.width !== 'fit') {
+ this.$newElement.removeClass('fit-width');
+ }
+ },
+
+ selectPosition: function () {
+ this.$bsContainer = $('');
+
+ var that = this,
+ $container = $(this.options.container),
+ pos,
+ containerPos,
+ actualHeight,
+ getPlacement = function ($element) {
+ that.$bsContainer.addClass($element.attr('class').replace(/form-control|fit-width/gi, '')).toggleClass('dropup', $element.hasClass('dropup'));
+ pos = $element.offset();
+
+ if (!$container.is('body')) {
+ containerPos = $container.offset();
+ containerPos.top += parseInt($container.css('borderTopWidth')) - $container.scrollTop();
+ containerPos.left += parseInt($container.css('borderLeftWidth')) - $container.scrollLeft();
+ } else {
+ containerPos = { top: 0, left: 0 };
+ }
+
+ actualHeight = $element.hasClass('dropup') ? 0 : $element[0].offsetHeight;
+
+ that.$bsContainer.css({
+ 'top': pos.top - containerPos.top + actualHeight,
+ 'left': pos.left - containerPos.left,
+ 'width': $element[0].offsetWidth
+ });
+ };
+
+ this.$button.on('click', function () {
+ var $this = $(this);
+
+ if (that.isDisabled()) {
+ return;
+ }
+
+ getPlacement(that.$newElement);
+
+ that.$bsContainer
+ .appendTo(that.options.container)
+ .toggleClass('open', !$this.hasClass('open'))
+ .append(that.$menu);
+ });
+
+ $(window).on('resize scroll', function () {
+ getPlacement(that.$newElement);
+ });
+
+ this.$element.on('hide.bs.select', function () {
+ that.$menu.data('height', that.$menu.height());
+ that.$bsContainer.detach();
+ });
+ },
+
+ /**
+ * @param {number} index - the index of the option that is being changed
+ * @param {boolean} selected - true if the option is being selected, false if being deselected
+ * @param {JQuery} $lis - the 'li' element that is being modified
+ */
+ setSelected: function (index, selected, $lis) {
+ if (!$lis) {
+ this.togglePlaceholder(); // check if setSelected is being called by changing the value of the select
+ $lis = this.findLis().eq(this.liObj[index]);
+ }
+
+ $lis.toggleClass('selected', selected).find('a').attr('aria-selected', selected);
+ },
+
+ /**
+ * @param {number} index - the index of the option that is being disabled
+ * @param {boolean} disabled - true if the option is being disabled, false if being enabled
+ * @param {JQuery} $lis - the 'li' element that is being modified
+ */
+ setDisabled: function (index, disabled, $lis) {
+ if (!$lis) {
+ $lis = this.findLis().eq(this.liObj[index]);
+ }
+
+ if (disabled) {
+ $lis.addClass('disabled').children('a').attr('href', '#').attr('tabindex', -1).attr('aria-disabled', true);
+ } else {
+ $lis.removeClass('disabled').children('a').removeAttr('href').attr('tabindex', 0).attr('aria-disabled', false);
+ }
+ },
+
+ isDisabled: function () {
+ return this.$element[0].disabled;
+ },
+
+ checkDisabled: function () {
+ var that = this;
+
+ if (this.isDisabled()) {
+ this.$newElement.addClass('disabled');
+ this.$button.addClass('disabled').attr('tabindex', -1).attr('aria-disabled', true);
+ } else {
+ if (this.$button.hasClass('disabled')) {
+ this.$newElement.removeClass('disabled');
+ this.$button.removeClass('disabled').attr('aria-disabled', false);
+ }
+
+ if (this.$button.attr('tabindex') == -1 && !this.$element.data('tabindex')) {
+ this.$button.removeAttr('tabindex');
+ }
+ }
+
+ this.$button.click(function () {
+ return !that.isDisabled();
+ });
+ },
+
+ togglePlaceholder: function () {
+ var value = this.$element.val();
+ this.$button.toggleClass('bs-placeholder', value === null || value === '' || (value.constructor === Array && value.length === 0));
+ },
+
+ tabIndex: function () {
+ if (this.$element.data('tabindex') !== this.$element.attr('tabindex') &&
+ (this.$element.attr('tabindex') !== -98 && this.$element.attr('tabindex') !== '-98')) {
+ this.$element.data('tabindex', this.$element.attr('tabindex'));
+ this.$button.attr('tabindex', this.$element.data('tabindex'));
+ }
+
+ this.$element.attr('tabindex', -98);
+ },
+
+ clickListener: function () {
+ var that = this,
+ $document = $(document);
+
+ $document.data('spaceSelect', false);
+
+ this.$button.on('keyup', function (e) {
+ if (/(32)/.test(e.keyCode.toString(10)) && $document.data('spaceSelect')) {
+ e.preventDefault();
+ $document.data('spaceSelect', false);
+ }
+ });
+
+ this.$button.on('click', function () {
+ that.setSize();
+ });
+
+ this.$element.on('shown.bs.select', function () {
+ if (!that.options.liveSearch && !that.multiple) {
+ that.$menuInner.find('.selected a').focus();
+ } else if (!that.multiple) {
+ var selectedIndex = that.liObj[that.$element[0].selectedIndex];
+
+ if (typeof selectedIndex !== 'number' || that.options.size === false) return;
+
+ // scroll to selected option
+ var offset = that.$lis.eq(selectedIndex)[0].offsetTop - that.$menuInner[0].offsetTop;
+ offset = offset - that.$menuInner[0].offsetHeight/2 + that.sizeInfo.liHeight/2;
+ that.$menuInner[0].scrollTop = offset;
+ }
+ });
+
+ this.$menuInner.on('click', 'li a', function (e) {
+ var $this = $(this),
+ clickedIndex = $this.parent().data('originalIndex'),
+ prevValue = that.$element.val(),
+ prevIndex = that.$element.prop('selectedIndex'),
+ triggerChange = true;
+
+ // Don't close on multi choice menu
+ if (that.multiple && that.options.maxOptions !== 1) {
+ e.stopPropagation();
+ }
+
+ e.preventDefault();
+
+ //Don't run if we have been disabled
+ if (!that.isDisabled() && !$this.parent().hasClass('disabled')) {
+ var $options = that.$element.find('option'),
+ $option = $options.eq(clickedIndex),
+ state = $option.prop('selected'),
+ $optgroup = $option.parent('optgroup'),
+ maxOptions = that.options.maxOptions,
+ maxOptionsGrp = $optgroup.data('maxOptions') || false;
+
+ if (!that.multiple) { // Deselect all others if not multi select box
+ $options.prop('selected', false);
+ $option.prop('selected', true);
+ that.$menuInner.find('.selected').removeClass('selected').find('a').attr('aria-selected', false);
+ that.setSelected(clickedIndex, true);
+ } else { // Toggle the one we have chosen if we are multi select.
+ $option.prop('selected', !state);
+ that.setSelected(clickedIndex, !state);
+ $this.blur();
+
+ if (maxOptions !== false || maxOptionsGrp !== false) {
+ var maxReached = maxOptions < $options.filter(':selected').length,
+ maxReachedGrp = maxOptionsGrp < $optgroup.find('option:selected').length;
+
+ if ((maxOptions && maxReached) || (maxOptionsGrp && maxReachedGrp)) {
+ if (maxOptions && maxOptions == 1) {
+ $options.prop('selected', false);
+ $option.prop('selected', true);
+ that.$menuInner.find('.selected').removeClass('selected');
+ that.setSelected(clickedIndex, true);
+ } else if (maxOptionsGrp && maxOptionsGrp == 1) {
+ $optgroup.find('option:selected').prop('selected', false);
+ $option.prop('selected', true);
+ var optgroupID = $this.parent().data('optgroup');
+ that.$menuInner.find('[data-optgroup="' + optgroupID + '"]').removeClass('selected');
+ that.setSelected(clickedIndex, true);
+ } else {
+ var maxOptionsText = typeof that.options.maxOptionsText === 'string' ? [that.options.maxOptionsText, that.options.maxOptionsText] : that.options.maxOptionsText,
+ maxOptionsArr = typeof maxOptionsText === 'function' ? maxOptionsText(maxOptions, maxOptionsGrp) : maxOptionsText,
+ maxTxt = maxOptionsArr[0].replace('{n}', maxOptions),
+ maxTxtGrp = maxOptionsArr[1].replace('{n}', maxOptionsGrp),
+ $notify = $('');
+ // If {var} is set in array, replace it
+ /** @deprecated */
+ if (maxOptionsArr[2]) {
+ maxTxt = maxTxt.replace('{var}', maxOptionsArr[2][maxOptions > 1 ? 0 : 1]);
+ maxTxtGrp = maxTxtGrp.replace('{var}', maxOptionsArr[2][maxOptionsGrp > 1 ? 0 : 1]);
+ }
+
+ $option.prop('selected', false);
+
+ that.$menu.append($notify);
+
+ if (maxOptions && maxReached) {
+ $notify.append($('' + maxTxt + '
'));
+ triggerChange = false;
+ that.$element.trigger('maxReached.bs.select');
+ }
+
+ if (maxOptionsGrp && maxReachedGrp) {
+ $notify.append($('' + maxTxtGrp + '
'));
+ triggerChange = false;
+ that.$element.trigger('maxReachedGrp.bs.select');
+ }
+
+ setTimeout(function () {
+ that.setSelected(clickedIndex, false);
+ }, 10);
+
+ $notify.delay(750).fadeOut(300, function () {
+ $(this).remove();
+ });
+ }
+ }
+ }
+ }
+
+ if (!that.multiple || (that.multiple && that.options.maxOptions === 1)) {
+ that.$button.focus();
+ } else if (that.options.liveSearch) {
+ that.$searchbox.focus();
+ }
+
+ // Trigger select 'change'
+ if (triggerChange) {
+ if ((prevValue != that.$element.val() && that.multiple) || (prevIndex != that.$element.prop('selectedIndex') && !that.multiple)) {
+ // $option.prop('selected') is current option state (selected/unselected). state is previous option state.
+ changed_arguments = [clickedIndex, $option.prop('selected'), state];
+ that.$element
+ .triggerNative('change');
+ }
+ }
+ }
+ });
+
+ this.$menu.on('click', 'li.disabled a, .popover-title, .popover-title :not(.close)', function (e) {
+ if (e.currentTarget == this) {
+ e.preventDefault();
+ e.stopPropagation();
+ if (that.options.liveSearch && !$(e.target).hasClass('close')) {
+ that.$searchbox.focus();
+ } else {
+ that.$button.focus();
+ }
+ }
+ });
+
+ this.$menuInner.on('click', '.divider, .dropdown-header', function (e) {
+ e.preventDefault();
+ e.stopPropagation();
+ if (that.options.liveSearch) {
+ that.$searchbox.focus();
+ } else {
+ that.$button.focus();
+ }
+ });
+
+ this.$menu.on('click', '.popover-title .close', function () {
+ that.$button.click();
+ });
+
+ this.$searchbox.on('click', function (e) {
+ e.stopPropagation();
+ });
+
+ this.$menu.on('click', '.actions-btn', function (e) {
+ if (that.options.liveSearch) {
+ that.$searchbox.focus();
+ } else {
+ that.$button.focus();
+ }
+
+ e.preventDefault();
+ e.stopPropagation();
+
+ if ($(this).hasClass('bs-select-all')) {
+ that.selectAll();
+ } else {
+ that.deselectAll();
+ }
+ });
+
+ this.$element.change(function () {
+ that.render(false);
+ that.$element.trigger('changed.bs.select', changed_arguments);
+ changed_arguments = null;
+ });
+ },
+
+ liveSearchListener: function () {
+ var that = this,
+ $no_results = $('');
+
+ this.$button.on('click.dropdown.data-api', function () {
+ that.$menuInner.find('.active').removeClass('active');
+ if (!!that.$searchbox.val()) {
+ that.$searchbox.val('');
+ that.$lis.not('.is-hidden').removeClass('hidden');
+ if (!!$no_results.parent().length) $no_results.remove();
+ }
+ if (!that.multiple) that.$menuInner.find('.selected').addClass('active');
+ setTimeout(function () {
+ that.$searchbox.focus();
+ }, 10);
+ });
+
+ this.$searchbox.on('click.dropdown.data-api focus.dropdown.data-api touchend.dropdown.data-api', function (e) {
+ e.stopPropagation();
+ });
+
+ this.$searchbox.on('input propertychange', function () {
+ that.$lis.not('.is-hidden').removeClass('hidden');
+ that.$lis.filter('.active').removeClass('active');
+ $no_results.remove();
+
+ if (that.$searchbox.val()) {
+ var $searchBase = that.$lis.not('.is-hidden, .divider, .dropdown-header'),
+ $hideItems;
+ if (that.options.liveSearchNormalize) {
+ $hideItems = $searchBase.not(':a' + that._searchStyle() + '("' + normalizeToBase(that.$searchbox.val()) + '")');
+ } else {
+ $hideItems = $searchBase.not(':' + that._searchStyle() + '("' + that.$searchbox.val() + '")');
+ }
+
+ if ($hideItems.length === $searchBase.length) {
+ $no_results.html(that.options.noneResultsText.replace('{0}', '"' + htmlEscape(that.$searchbox.val()) + '"'));
+ that.$menuInner.append($no_results);
+ that.$lis.addClass('hidden');
+ } else {
+ $hideItems.addClass('hidden');
+
+ var $lisVisible = that.$lis.not('.hidden'),
+ $foundDiv;
+
+ // hide divider if first or last visible, or if followed by another divider
+ $lisVisible.each(function (index) {
+ var $this = $(this);
+
+ if ($this.hasClass('divider')) {
+ if ($foundDiv === undefined) {
+ $this.addClass('hidden');
+ } else {
+ if ($foundDiv) $foundDiv.addClass('hidden');
+ $foundDiv = $this;
+ }
+ } else if ($this.hasClass('dropdown-header') && $lisVisible.eq(index + 1).data('optgroup') !== $this.data('optgroup')) {
+ $this.addClass('hidden');
+ } else {
+ $foundDiv = null;
+ }
+ });
+ if ($foundDiv) $foundDiv.addClass('hidden');
+
+ $searchBase.not('.hidden').first().addClass('active');
+ that.$menuInner.scrollTop(0);
+ }
+ }
+ });
+ },
+
+ _searchStyle: function () {
+ var styles = {
+ begins: 'ibegins',
+ startsWith: 'ibegins'
+ };
+
+ return styles[this.options.liveSearchStyle] || 'icontains';
+ },
+
+ val: function (value) {
+ if (typeof value !== 'undefined') {
+ this.$element.val(value);
+ this.render();
+
+ return this.$element;
+ } else {
+ return this.$element.val();
+ }
+ },
+
+ changeAll: function (status) {
+ if (!this.multiple) return;
+ if (typeof status === 'undefined') status = true;
+
+ this.findLis();
+
+ var $options = this.$element.find('option'),
+ $lisVisible = this.$lis.not('.divider, .dropdown-header, .disabled, .hidden'),
+ lisVisLen = $lisVisible.length,
+ selectedOptions = [];
+
+ if (status) {
+ if ($lisVisible.filter('.selected').length === $lisVisible.length) return;
+ } else {
+ if ($lisVisible.filter('.selected').length === 0) return;
+ }
+
+ $lisVisible.toggleClass('selected', status);
+
+ for (var i = 0; i < lisVisLen; i++) {
+ var origIndex = $lisVisible[i].getAttribute('data-original-index');
+ selectedOptions[selectedOptions.length] = $options.eq(origIndex)[0];
+ }
+
+ $(selectedOptions).prop('selected', status);
+
+ this.render(false);
+
+ this.togglePlaceholder();
+
+ this.$element
+ .triggerNative('change');
+ },
+
+ selectAll: function () {
+ return this.changeAll(true);
+ },
+
+ deselectAll: function () {
+ return this.changeAll(false);
+ },
+
+ toggle: function (e) {
+ e = e || window.event;
+
+ if (e) e.stopPropagation();
+
+ this.$button.trigger('click');
+ },
+
+ keydown: function (e) {
+ var $this = $(this),
+ $parent = $this.is('input') ? $this.parent().parent() : $this.parent(),
+ $items,
+ that = $parent.data('this'),
+ index,
+ prevIndex,
+ isActive,
+ selector = ':not(.disabled, .hidden, .dropdown-header, .divider)',
+ keyCodeMap = {
+ 32: ' ',
+ 48: '0',
+ 49: '1',
+ 50: '2',
+ 51: '3',
+ 52: '4',
+ 53: '5',
+ 54: '6',
+ 55: '7',
+ 56: '8',
+ 57: '9',
+ 59: ';',
+ 65: 'a',
+ 66: 'b',
+ 67: 'c',
+ 68: 'd',
+ 69: 'e',
+ 70: 'f',
+ 71: 'g',
+ 72: 'h',
+ 73: 'i',
+ 74: 'j',
+ 75: 'k',
+ 76: 'l',
+ 77: 'm',
+ 78: 'n',
+ 79: 'o',
+ 80: 'p',
+ 81: 'q',
+ 82: 'r',
+ 83: 's',
+ 84: 't',
+ 85: 'u',
+ 86: 'v',
+ 87: 'w',
+ 88: 'x',
+ 89: 'y',
+ 90: 'z',
+ 96: '0',
+ 97: '1',
+ 98: '2',
+ 99: '3',
+ 100: '4',
+ 101: '5',
+ 102: '6',
+ 103: '7',
+ 104: '8',
+ 105: '9'
+ };
+
+
+ isActive = that.$newElement.hasClass('open');
+
+ if (!isActive && (e.keyCode >= 48 && e.keyCode <= 57 || e.keyCode >= 96 && e.keyCode <= 105 || e.keyCode >= 65 && e.keyCode <= 90)) {
+ if (!that.options.container) {
+ that.setSize();
+ that.$menu.parent().addClass('open');
+ isActive = true;
+ } else {
+ that.$button.trigger('click');
+ }
+ that.$searchbox.focus();
+ return;
+ }
+
+ if (that.options.liveSearch) {
+ if (/(^9$|27)/.test(e.keyCode.toString(10)) && isActive) {
+ e.preventDefault();
+ e.stopPropagation();
+ that.$menuInner.click();
+ that.$button.focus();
+ }
+ }
+
+ if (/(38|40)/.test(e.keyCode.toString(10))) {
+ $items = that.$lis.filter(selector);
+ if (!$items.length) return;
+
+ if (!that.options.liveSearch) {
+ index = $items.index($items.find('a').filter(':focus').parent());
+ } else {
+ index = $items.index($items.filter('.active'));
+ }
+
+ prevIndex = that.$menuInner.data('prevIndex');
+
+ if (e.keyCode == 38) {
+ if ((that.options.liveSearch || index == prevIndex) && index != -1) index--;
+ if (index < 0) index += $items.length;
+ } else if (e.keyCode == 40) {
+ if (that.options.liveSearch || index == prevIndex) index++;
+ index = index % $items.length;
+ }
+
+ that.$menuInner.data('prevIndex', index);
+
+ if (!that.options.liveSearch) {
+ $items.eq(index).children('a').focus();
+ } else {
+ e.preventDefault();
+ if (!$this.hasClass('dropdown-toggle')) {
+ $items.removeClass('active').eq(index).addClass('active').children('a').focus();
+ $this.focus();
+ }
+ }
+
+ } else if (!$this.is('input')) {
+ var keyIndex = [],
+ count,
+ prevKey;
+
+ $items = that.$lis.filter(selector);
+ $items.each(function (i) {
+ if ($.trim($(this).children('a').text().toLowerCase()).substring(0, 1) == keyCodeMap[e.keyCode]) {
+ keyIndex.push(i);
+ }
+ });
+
+ count = $(document).data('keycount');
+ count++;
+ $(document).data('keycount', count);
+
+ prevKey = $.trim($(':focus').text().toLowerCase()).substring(0, 1);
+
+ if (prevKey != keyCodeMap[e.keyCode]) {
+ count = 1;
+ $(document).data('keycount', count);
+ } else if (count >= keyIndex.length) {
+ $(document).data('keycount', 0);
+ if (count > keyIndex.length) count = 1;
+ }
+
+ $items.eq(keyIndex[count - 1]).children('a').focus();
+ }
+
+ // Select focused option if "Enter", "Spacebar" or "Tab" (when selectOnTab is true) are pressed inside the menu.
+ if ((/(13|32)/.test(e.keyCode.toString(10)) || (/(^9$)/.test(e.keyCode.toString(10)) && that.options.selectOnTab)) && isActive) {
+ if (!/(32)/.test(e.keyCode.toString(10))) e.preventDefault();
+ if (!that.options.liveSearch) {
+ var elem = $(':focus');
+ elem.click();
+ // Bring back focus for multiselects
+ elem.focus();
+ // Prevent screen from scrolling if the user hit the spacebar
+ e.preventDefault();
+ // Fixes spacebar selection of dropdown items in FF & IE
+ $(document).data('spaceSelect', true);
+ } else if (!/(32)/.test(e.keyCode.toString(10))) {
+ that.$menuInner.find('.active a').click();
+ $this.focus();
+ }
+ $(document).data('keycount', 0);
+ }
+
+ if ((/(^9$|27)/.test(e.keyCode.toString(10)) && isActive && (that.multiple || that.options.liveSearch)) || (/(27)/.test(e.keyCode.toString(10)) && !isActive)) {
+ that.$menu.parent().removeClass('open');
+ if (that.options.container) that.$newElement.removeClass('open');
+ that.$button.focus();
+ }
+ },
+
+ mobile: function () {
+ this.$element.addClass('mobile-device');
+ },
+
+ refresh: function () {
+ this.$lis = null;
+ this.liObj = {};
+ this.reloadLi();
+ this.render();
+ this.checkDisabled();
+ this.liHeight(true);
+ this.setStyle();
+ this.setWidth();
+ if (this.$lis) this.$searchbox.trigger('propertychange');
+
+ this.$element.trigger('refreshed.bs.select');
+ },
+
+ hide: function () {
+ this.$newElement.hide();
+ },
+
+ show: function () {
+ this.$newElement.show();
+ },
+
+ remove: function () {
+ this.$newElement.remove();
+ this.$element.remove();
+ },
+
+ destroy: function () {
+ this.$newElement.before(this.$element).remove();
+
+ if (this.$bsContainer) {
+ this.$bsContainer.remove();
+ } else {
+ this.$menu.remove();
+ }
+
+ this.$element
+ .off('.bs.select')
+ .removeData('selectpicker')
+ .removeClass('bs-select-hidden selectpicker');
+ }
+ };
+
+ // SELECTPICKER PLUGIN DEFINITION
+ // ==============================
+ function Plugin(option) {
+ // get the args of the outer function..
+ var args = arguments;
+ // The arguments of the function are explicitly re-defined from the argument list, because the shift causes them
+ // to get lost/corrupted in android 2.3 and IE9 #715 #775
+ var _option = option;
+
+ [].shift.apply(args);
+
+ var value;
+ var chain = this.each(function () {
+ var $this = $(this);
+ if ($this.is('select')) {
+ var data = $this.data('selectpicker'),
+ options = typeof _option == 'object' && _option;
+
+ if (!data) {
+ var config = $.extend({}, Selectpicker.DEFAULTS, $.fn.selectpicker.defaults || {}, $this.data(), options);
+ config.template = $.extend({}, Selectpicker.DEFAULTS.template, ($.fn.selectpicker.defaults ? $.fn.selectpicker.defaults.template : {}), $this.data().template, options.template);
+ $this.data('selectpicker', (data = new Selectpicker(this, config)));
+ } else if (options) {
+ for (var i in options) {
+ if (options.hasOwnProperty(i)) {
+ data.options[i] = options[i];
+ }
+ }
+ }
+
+ if (typeof _option == 'string') {
+ if (data[_option] instanceof Function) {
+ value = data[_option].apply(data, args);
+ } else {
+ value = data.options[_option];
+ }
+ }
+ }
+ });
+
+ if (typeof value !== 'undefined') {
+ //noinspection JSUnusedAssignment
+ return value;
+ } else {
+ return chain;
+ }
+ }
+
+ var old = $.fn.selectpicker;
+ $.fn.selectpicker = Plugin;
+ $.fn.selectpicker.Constructor = Selectpicker;
+
+ // SELECTPICKER NO CONFLICT
+ // ========================
+ $.fn.selectpicker.noConflict = function () {
+ $.fn.selectpicker = old;
+ return this;
+ };
+
+ $(document)
+ .data('keycount', 0)
+ .on('keydown.bs.select', '.bootstrap-select [data-toggle=dropdown], .bootstrap-select [role="listbox"], .bs-searchbox input', Selectpicker.prototype.keydown)
+ .on('focusin.modal', '.bootstrap-select [data-toggle=dropdown], .bootstrap-select [role="listbox"], .bs-searchbox input', function (e) {
+ e.stopPropagation();
+ });
+
+ // SELECTPICKER DATA-API
+ // =====================
+ $(window).on('load.bs.select.data-api', function () {
+ $('.selectpicker').each(function () {
+ var $selectpicker = $(this);
+ Plugin.call($selectpicker, $selectpicker.data());
+ })
+ });
+})(jQuery);
+
+
+}));
diff --git a/static/vendor/bootstrap-select/js/bootstrap-select.min.js b/static/vendor/bootstrap-select/js/bootstrap-select.min.js
new file mode 100644
index 0000000..8e1027d
--- /dev/null
+++ b/static/vendor/bootstrap-select/js/bootstrap-select.min.js
@@ -0,0 +1,9 @@
+/*!
+ * Bootstrap-select v1.12.2 (http://silviomoreto.github.io/bootstrap-select)
+ *
+ * Copyright 2013-2017 bootstrap-select
+ * Licensed under MIT (https://github.com/silviomoreto/bootstrap-select/blob/master/LICENSE)
+ */
+!function(a,b){"function"==typeof define&&define.amd?define(["jquery"],function(a){return b(a)}):"object"==typeof module&&module.exports?module.exports=b(require("jquery")):b(a.jQuery)}(this,function(a){!function(a){"use strict";function b(b){var c=[{re:/[\xC0-\xC6]/g,ch:"A"},{re:/[\xE0-\xE6]/g,ch:"a"},{re:/[\xC8-\xCB]/g,ch:"E"},{re:/[\xE8-\xEB]/g,ch:"e"},{re:/[\xCC-\xCF]/g,ch:"I"},{re:/[\xEC-\xEF]/g,ch:"i"},{re:/[\xD2-\xD6]/g,ch:"O"},{re:/[\xF2-\xF6]/g,ch:"o"},{re:/[\xD9-\xDC]/g,ch:"U"},{re:/[\xF9-\xFC]/g,ch:"u"},{re:/[\xC7-\xE7]/g,ch:"c"},{re:/[\xD1]/g,ch:"N"},{re:/[\xF1]/g,ch:"n"}];return a.each(c,function(){b=b?b.replace(this.re,this.ch):""}),b}function c(b){var c=arguments,d=b;[].shift.apply(c);var e,f=this.each(function(){var b=a(this);if(b.is("select")){var f=b.data("selectpicker"),g="object"==typeof d&&d;if(f){if(g)for(var h in g)g.hasOwnProperty(h)&&(f.options[h]=g[h])}else{var i=a.extend({},k.DEFAULTS,a.fn.selectpicker.defaults||{},b.data(),g);i.template=a.extend({},k.DEFAULTS.template,a.fn.selectpicker.defaults?a.fn.selectpicker.defaults.template:{},b.data().template,g.template),b.data("selectpicker",f=new k(this,i))}"string"==typeof d&&(e=f[d]instanceof Function?f[d].apply(f,c):f.options[d])}});return void 0!==e?e:f}String.prototype.includes||function(){var a={}.toString,b=function(){try{var a={},b=Object.defineProperty,c=b(a,a,a)&&b}catch(a){}return c}(),c="".indexOf,d=function(b){if(null==this)throw new TypeError;var d=String(this);if(b&&"[object RegExp]"==a.call(b))throw new TypeError;var e=d.length,f=String(b),g=f.length,h=arguments.length>1?arguments[1]:void 0,i=h?Number(h):0;return i!=i&&(i=0),!(g+Math.min(Math.max(i,0),e)>e)&&-1!=c.call(d,f,i)};b?b(String.prototype,"includes",{value:d,configurable:!0,writable:!0}):String.prototype.includes=d}(),String.prototype.startsWith||function(){var a=function(){try{var a={},b=Object.defineProperty,c=b(a,a,a)&&b}catch(a){}return c}(),b={}.toString,c=function(a){if(null==this)throw new TypeError;var c=String(this);if(a&&"[object RegExp]"==b.call(a))throw new TypeError;var d=c.length,e=String(a),f=e.length,g=arguments.length>1?arguments[1]:void 0,h=g?Number(g):0;h!=h&&(h=0);var i=Math.min(Math.max(h,0),d);if(f+i>d)return!1;for(var j=-1;++j
":">",'"':""","'":"'","`":"`"},g={"&":"&","<":"<",">":">",""":'"',"'":"'","`":"`"},h=function(a){var b=function(b){return a[b]},c="(?:"+Object.keys(a).join("|")+")",d=RegExp(c),e=RegExp(c,"g");return function(a){return a=null==a?"":""+a,d.test(a)?a.replace(e,b):a}},i=h(f),j=h(g),k=function(b,c){d.useDefault||(a.valHooks.select.set=d._set,d.useDefault=!0),this.$element=a(b),this.$newElement=null,this.$button=null,this.$menu=null,this.$lis=null,this.options=c,null===this.options.title&&(this.options.title=this.$element.attr("title"));var e=this.options.windowPadding;"number"==typeof e&&(this.options.windowPadding=[e,e,e,e]),this.val=k.prototype.val,this.render=k.prototype.render,this.refresh=k.prototype.refresh,this.setStyle=k.prototype.setStyle,this.selectAll=k.prototype.selectAll,this.deselectAll=k.prototype.deselectAll,this.destroy=k.prototype.destroy,this.remove=k.prototype.remove,this.show=k.prototype.show,this.hide=k.prototype.hide,this.init()};k.VERSION="1.12.2",k.DEFAULTS={noneSelectedText:"Nothing selected",noneResultsText:"No results matched {0}",countSelectedText:function(a,b){return 1==a?"{0} item selected":"{0} items selected"},maxOptionsText:function(a,b){return[1==a?"Limit reached ({n} item max)":"Limit reached ({n} items max)",1==b?"Group limit reached ({n} item max)":"Group limit reached ({n} items max)"]},selectAllText:"Select All",deselectAllText:"Deselect All",doneButton:!1,doneButtonText:"Close",multipleSeparator:", ",styleBase:"btn",style:"btn-default",size:"auto",title:null,selectedTextFormat:"values",width:!1,container:!1,hideDisabled:!1,showSubtext:!1,showIcon:!0,showContent:!0,dropupAuto:!0,header:!1,liveSearch:!1,liveSearchPlaceholder:null,liveSearchNormalize:!1,liveSearchStyle:"contains",actionsBox:!1,iconBase:"fas",tickIcon:"fa-check",showTick:!1,template:{caret:''},maxOptions:!1,mobile:!1,selectOnTab:!1,dropdownAlignRight:!1,windowPadding:0},k.prototype={constructor:k,init:function(){var b=this,c=this.$element.attr("id");this.$element.addClass("bs-select-hidden"),this.liObj={},this.multiple=this.$element.prop("multiple"),this.autofocus=this.$element.prop("autofocus"),this.$newElement=this.createView(),this.$element.after(this.$newElement).appendTo(this.$newElement),this.$button=this.$newElement.children("button"),this.$menu=this.$newElement.children(".dropdown-menu"),this.$menuInner=this.$menu.children(".inner"),this.$searchbox=this.$menu.find("input"),this.$element.removeClass("bs-select-hidden"),!0===this.options.dropdownAlignRight&&this.$menu.addClass("dropdown-menu-right"),void 0!==c&&(this.$button.attr("data-id",c),a('label[for="'+c+'"]').click(function(a){a.preventDefault(),b.$button.focus()})),this.checkDisabled(),this.clickListener(),this.options.liveSearch&&this.liveSearchListener(),this.render(),this.setStyle(),this.setWidth(),this.options.container&&this.selectPosition(),this.$menu.data("this",this),this.$newElement.data("this",this),this.options.mobile&&this.mobile(),this.$newElement.on({"hide.bs.dropdown":function(a){b.$menuInner.attr("aria-expanded",!1),b.$element.trigger("hide.bs.select",a)},"hidden.bs.dropdown":function(a){b.$element.trigger("hidden.bs.select",a)},"show.bs.dropdown":function(a){b.$menuInner.attr("aria-expanded",!0),b.$element.trigger("show.bs.select",a)},"shown.bs.dropdown":function(a){b.$element.trigger("shown.bs.select",a)}}),b.$element[0].hasAttribute("required")&&this.$element.on("invalid",function(){b.$button.addClass("bs-invalid").focus(),b.$element.on({"focus.bs.select":function(){b.$button.focus(),b.$element.off("focus.bs.select")},"shown.bs.select":function(){b.$element.val(b.$element.val()).off("shown.bs.select")},"rendered.bs.select":function(){this.validity.valid&&b.$button.removeClass("bs-invalid"),b.$element.off("rendered.bs.select")}})}),setTimeout(function(){b.$element.trigger("loaded.bs.select")})},createDropdown:function(){var b=this.multiple||this.options.showTick?" show-tick":"",c=this.$element.parent().hasClass("input-group")?" input-group-btn":"",d=this.autofocus?" autofocus":"",e=this.options.header?''+this.options.header+"
":"",f=this.options.liveSearch?'':"",g=this.multiple&&this.options.actionsBox?'