Initial commit

2023-11-10 15:57:52 +01:00
commit eb87e1912f
351 changed files with 51965 additions and 0 deletions
--- a/assets/scss/argon-design-system/accordion.scss
+++ b/assets/scss/argon-design-system/accordion.scss
--- a/assets/scss/argon-design-system/alert.scss
+++ b/assets/scss/argon-design-system/alert.scss
@@ -0,0 +1,75 @@
+.alert {
+    padding: $alert-padding-y $alert-padding-x;
+    border: 0;
+    font-size: $font-size-sm;
+    @include border-radius($alert-border-radius);
+
+    .alert-inner--icon {
+        font-size: 1.25rem;
+        margin-right: 1.25rem;
+        display: inline-block; 
+        vertical-align: middle;
+
+        i.ni {
+            position: relative;
+            top: 1px;
+        }
+    }
+    .alert-inner--text {
+        display: inline-block;
+        vertical-align: middle;
+    }
+}
+
+.alert:not(.alert-secondary) {
+    color: $white;
+}
+
+[class*="alert-"] {
+    .alert-link {
+        color: $white; 
+        border-bottom: 1px dotted rgba($white, .5);
+    }
+}
+
+.alert-heading {
+    font-weight: $font-weight-bold;
+    font-size: $h4-font-size;
+    margin-top: .15rem; 
+} 
+
+.alert-dismissible {
+    .close { 
+        top: 50%;
+        right: $alert-padding-x;
+        padding: 0;
+        transform: translateY(-50%);
+        color: rgba($white, .6);
+        opacity: 1;
+
+        &:hover,
+        &:focus {
+            color: rgba($white, .9);
+            opacity: 1 !important;
+        }
+
+        @include media-breakpoint-down(xs) {
+            top: 1rem;
+            right: .5rem;
+        }
+
+        &>span:not(.sr-only) {
+            font-size: 1.5rem;
+            background-color: transparent;
+            color: rgba($white, .6);
+        }
+
+        &:hover,
+        &:focus {
+            &>span:not(.sr-only) {
+                background-color: transparent;
+                color: rgba($white, .9);
+            }
+        }
+    }
+}
--- a/assets/scss/argon-design-system/avatar.scss
+++ b/assets/scss/argon-design-system/avatar.scss
@@ -0,0 +1,51 @@
+.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;
+}
+
+// Overlapped avatars
+
+.avatar-group {
+	.avatar {
+		position: relative;
+		z-index: 2;
+		border: 2px solid $card-bg;
+
+		&:hover {
+			z-index: 3;
+		}
+	}
+
+	.avatar + .avatar {
+		margin-left: -1rem;
+
+	}
+}
--- a/assets/scss/argon-design-system/badge.scss
+++ b/assets/scss/argon-design-system/badge.scss
@@ -0,0 +1,67 @@
+.badge {
+    text-transform: $badge-text-transfom;
+
+    a {
+        color: #FFF;
+    }
+}
+
+// Variations
+.badge-pill {
+    padding-right: $badge-pill-padding-x;
+    padding-left: $badge-pill-padding-x;
+}
+
+.badge-circle {
+    text-align: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+    width: 2rem;
+    height: 2rem;
+    font-size: .875rem;
+}
+
+// Multiple inline badges
+.badge-inline {
+    margin-right: .625rem;
+}
+
+.badge-inline + span {
+    top: 2px;
+    position: relative;
+}
+
+.badge-inline + span > a {
+    text-decoration: underline;
+} 
+
+// Sizes
+.badge-md {
+    padding: .65em 1em;
+}
+
+.badge-lg {
+    padding: .85em 1.375em;
+}
+
+
+// Color variations
+
+.badge-secondary {
+    color: $gray-800;
+}
+
+// Link badges
+
+.btn {
+    .badge {
+        &:not(:first-child) {
+            margin-left: .5rem;
+        }
+        &:not(:last-child) {
+            margin-right: .5rem;
+        }
+    }
+}
--- a/assets/scss/argon-design-system/buttons.scss
+++ b/assets/scss/argon-design-system/buttons.scss
@@ -0,0 +1,181 @@
+// General
+
+.btn {
+  position: relative;
+  text-transform: $btn-text-transform;
+  will-change: transform;
+  letter-spacing: $btn-letter-spacing;
+  font-size: $input-btn-font-size;
+
+  &:hover {
+    @include box-shadow($btn-hover-box-shadow);
+    transform: translateY(-1px);
+  }
+
+  &:not(:last-child) {
+    margin-right: .5rem;
+  }
+
+}
+
+.btn-group,
+.input-group {
+  .btn {
+    margin-right: 0;
+    transform: translateY(0);
+  }
+}
+
+// Sizes
+
+.btn-sm {
+  font-size: $input-btn-font-size-sm;
+
+  &.btn-icon-only {
+    width: 35px;
+    height: 35px;
+  }
+
+  .btn-inner--icon {
+    font-size: 0.5rem;;
+  }
+}
+
+.btn-lg {
+  &.btn-icon-only {
+    width: 52px;
+    height: 52px;
+  }
+
+  .btn-inner--icon {
+    font-size: 1.2rem;
+    position: relative;
+    top: 2px;
+  }
+}
+
+// Fixes
+
+[class*="btn-outline-"] {
+  border-width: 1px;
+}
+.btn-outline-secondary {
+  color: darken(theme-color("secondary"), 50%);
+}
+
+.btn-inner--icon {
+  i:not(.fa) {
+    position: relative;
+  }
+}
+
+.btn-link {
+  font-weight: $btn-font-weight;
+  box-shadow: none;
+
+  &:hover {
+    box-shadow: none;
+    transform: none;
+  }
+
+  &.text-secondary {
+    color: darken(theme-color("secondary"), 50%) !important;
+  }
+}
+
+.btn-neutral {
+  color: theme-color("primary");
+}
+
+// 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;
+}
+
+// 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--icon {
+        img {
+            width: 20px;
+        }
+    }
+    .btn-inner--text:not(:first-child) {
+        margin-left: .75em;
+    }
+    .btn-inner--text:not(:last-child) {
+        margin-right: .75em;
+    }
+}
+
+.btn-icon-only {
+    width: 2.375rem;
+    height: 2.375rem;
+    padding: 0;
+}
+a.btn-icon-only {
+    line-height: 2.5;
+}
+.btn-icon-only.btn-sm {
+    width: 2rem;
+    height: 2rem;
+}
+
+
+// Brand buttons
+
+@each $color,
+$value in $brand-colors {
+    .btn-#{$color} {
+        @include button-variant($value, $value);
+    }
+}
--- a/assets/scss/argon-design-system/card.scss
+++ b/assets/scss/argon-design-system/card.scss
@@ -0,0 +1,102 @@
+
+.card {
+  position: relative;
+
+  &.card-plain {
+    background: transparent;
+    box-shadow: none;
+    border: none;
+  }
+}
+
+.profile-page {
+    .card-profile {
+        margin-top: -150px;
+
+        .card-profile-image {
+            position: relative;
+            //min-height: 130px;
+
+            img {
+                max-width: 180px;
+                border-radius: $border-radius;
+                @extend .shadow;
+                transform: translate(-50%,-30%);
+                position: absolute;
+                left: 50%;
+                transition: $transition-base;
+
+                &:hover {
+                    transform: translate(-50%, -33%);
+                }
+            }
+        }
+
+        .card-profile-stats {
+            padding: 1rem 0;
+
+            > div {
+                text-align: center;
+                margin-right: 1rem;
+                padding: .875rem;
+
+                &:last-child {
+                    margin-right: 0;
+                }
+
+                .heading {
+                    font-size: 1.1rem;
+                    font-weight: bold;
+                    display: block;
+                }
+                .description {
+                    font-size: .875rem;
+                    color: $gray-500;
+                }
+            }
+        }
+
+        .card-profile-actions {
+            padding: .875rem;
+        }
+
+        @include media-breakpoint-down(xs) {
+            .card-profile-actions {
+                margin-top: 110px;
+            }
+        }
+
+        @include media-breakpoint-between(sm, md) {
+            .card-profile-stats {
+                margin-top: 30px;
+            }
+        }
+    }
+}
+
+// Card with blockquotes
+
+.card {
+  .card-blockquote {
+    padding: 2rem;
+    position: relative;
+
+    .svg-bg {
+        display: block;
+        width: 100%;
+        height: 95px;
+        position: absolute;
+        top: -94px;
+        left: 0;
+    }
+  }
+}
+
+// Animated cards
+
+.card-lift--hover {
+    &:hover {
+        transform: translateY(-20px);
+        @include transition($transition-base);
+    }
+}
--- a/assets/scss/argon-design-system/carousel.scss
+++ b/assets/scss/argon-design-system/carousel.scss
@@ -0,0 +1 @@
+// Bootstrap carousel
--- a/assets/scss/argon-design-system/close.scss
+++ b/assets/scss/argon-design-system/close.scss
@@ -0,0 +1,29 @@
+.close { 
+    @if $enable-transitions {
+        transition: $transition-base;
+    } 
+    &>span:not(.sr-only) {
+        background-color: $close-bg;
+        color: $close-color;
+        line-height: 17px;
+        height: 1.25rem;
+        width: 1.25rem; 
+        border-radius: 50%;
+        font-size: 1.25rem;
+        display: block;
+        @if $enable-transitions {
+            transition: $transition-base;
+        } 
+    } 
+
+    &:hover,
+    &:focus {
+        background-color: $close-hover-bg;
+        color: $close-hover-color;
+        outline: none;
+        
+        span:not(.sr-only) {
+            background-color: $close-hover-bg;
+        }
+    }
+}
--- a/assets/scss/argon-design-system/content.scss
+++ b/assets/scss/argon-design-system/content.scss
--- a/assets/scss/argon-design-system/custom-forms.scss
+++ b/assets/scss/argon-design-system/custom-forms.scss
@@ -0,0 +1,195 @@
+.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: all .3s ease;;
+        }
+    }
+
+    span {
+        position: relative;
+        top: 2px;
+    }
+}
+
+.custom-control {
+  padding-left: 1.7rem !important;
+}
+
+.custom-control-label {
+  margin-bottom: 0;
+
+  &:before,
+  &:after {
+    left: -1.75rem;
+  }
+}
+
+.custom-control-input {
+    &:active~.custom-control-label::before {
+        border-color: $custom-control-indicator-active-border-color;
+    }
+}
+
+// Alternative custom control
+.custom-control-alternative {
+    .custom-control-label {
+        // Background-color and (when enabled) gradient
+        &::before {
+            border: 0;
+            box-shadow: $input-alternative-box-shadow;
+        }
+    }
+
+    .custom-control-input {
+        &:checked {
+            ~ .custom-control-label {
+                &::before {
+                    box-shadow: $input-focus-alternative-box-shadow;
+                }
+            }
+        }
+
+        &:active~.custom-control-label::before,
+        &:focus~.custom-control-label::before {
+            box-shadow: $input-alternative-box-shadow;
+        }
+    }
+}
+
+
+// Checkboxes
+.custom-checkbox {
+    .custom-control-input~.custom-control-label {
+        cursor: pointer;
+        font-size: $font-size-sm;
+    }
+
+    .custom-control-input {
+        &:checked {
+            ~ .custom-control-label {
+                &::before {
+                    border-color: $custom-control-indicator-checked-border-color;
+                }
+                &::after {
+                    background-image: $custom-checkbox-indicator-icon-checked;
+                }
+            }
+        }
+
+        &:disabled {
+            ~ .custom-control-label {
+                &::before {
+                    border-color: $custom-control-indicator-disabled-bg;
+                }
+            }
+
+            &:checked {
+                &::before {
+                    border-color: $custom-control-indicator-checked-disabled-bg;
+                }
+            }
+        }
+    }
+}
+
+// Radios
+.custom-radio {
+    .custom-control-input~.custom-control-label {
+        cursor: pointer;
+        font-size: $font-size-sm;
+    }
+
+    .custom-control-input {
+        &:checked {
+            ~ .custom-control-label {
+                &::before {
+                    border-color: $custom-control-indicator-checked-border-color;
+                }
+                &::after {
+                    background-image: $custom-radio-indicator-icon-checked;
+                }
+            }
+        }
+
+        &:disabled {
+            ~ .custom-control-label {
+                &::before {
+                    border-color: $custom-control-indicator-disabled-bg;
+                }
+            }
+
+            &:checked {
+                &::before {
+                    border-color: $custom-control-indicator-checked-disabled-bg;
+                }
+            }
+        }
+    }
+
+}
+
+// Toggles
+.custom-toggle {
+    position: relative;
+    display: inline-block;
+    width: 50px;
+    height: 1.5rem;
+
+    input {
+        display: none;
+
+        &:checked {
+             + .custom-toggle-slider {
+                border: $custom-control-indicator-border-width solid $custom-control-indicator-checked-border-color;
+
+                &:before {
+                    background: $custom-toggle-checked-bg;
+                    transform: translateX(1.625rem);
+                }
+            }
+        }
+
+        &:disabled {
+            + .custom-toggle-slider {
+                border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
+            }
+
+            &:checked {
+                + .custom-toggle-slider {
+                    border: $custom-control-indicator-border-width solid $custom-control-indicator-disabled-bg;
+
+                    &:before {
+                        background-color: lighten($custom-control-indicator-checked-bg, 10%);
+                    }
+                }
+            }
+        }
+    }
+}
+
+.custom-toggle-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: 34px !important;
+    background-color: transparent;
+
+
+    &:before {
+        position: absolute;
+        content: "";
+        height: 18px;
+        width: 18px;
+        left: 2px;
+        bottom: 2px;
+        border-radius: 50% !important;
+        background-color: $custom-toggle-slider-bg;
+        transition: $input-transition;
+    }
+}
--- a/assets/scss/argon-design-system/docs.scss
+++ b/assets/scss/argon-design-system/docs.scss
@@ -0,0 +1,9 @@
+
+@import "docs/variables";
+@import "docs/clipboard-js";
+@import "docs/component-examples";
+@import "docs/content";
+@import "docs/footer";
+@import "docs/nav";
+@import "docs/prism";
+@import "docs/sidebar";
--- a/assets/scss/argon-design-system/docs/clipboard-js.scss
+++ b/assets/scss/argon-design-system/docs/clipboard-js.scss
@@ -0,0 +1,40 @@
+// clipboard.js
+//
+// JS-based `Copy` buttons for code snippets.
+
+.ct-clipboard {
+  position: relative;
+  display: none;
+  float: right;
+
+  + .highlight {
+    margin-top: 0;
+  }
+}
+
+.btn-clipboard {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 10;
+  display: block;
+  padding: .25rem .5rem;
+  font-size: 75%;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  border-radius: .25rem;
+  color: #fff;
+  background-color: $ct-primary;
+
+  &:hover {
+    color: #fff;
+    background-color: darken($ct-primary, 10%);
+  }
+}
+
+@media (min-width: 768px) {
+  .ct-clipboard {
+    display: block;
+  }
+}
--- a/assets/scss/argon-design-system/docs/component-examples.scss
+++ b/assets/scss/argon-design-system/docs/component-examples.scss
@@ -0,0 +1,516 @@
+// stylelint-disable no-duplicate-selectors, selector-no-qualifying-type
+
+//
+// Grid examples
+//
+
+.ct-example-row {
+  .row {
+    > .col,
+    > [class^="col-"] {
+      span {
+        display: block;
+        padding: .75rem;
+        color: rgb(57, 63, 73);
+        background-color: rgb(255, 255, 255);
+        box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 16px;
+        font-size: $font-size-sm;
+        border-radius: .25rem;
+        margin: 1rem 0;
+      }
+    }
+  }
+
+  .no-gutters {
+    > .col,
+    > [class^="col-"] {
+      span {
+        border-radius: 0;
+      }
+    }
+  }
+
+  .flex-items-top,
+  .flex-items-middle,
+  .flex-items-bottom {
+    min-height: 6rem;
+    background-color: rgba(255, 0, 0, .1);
+  }
+}
+
+.ct-example-row-flex-cols .row {
+  min-height: 10rem;
+  background-color: rgba(255, 0, 0, .1);
+
+  & + .row {
+    margin-top: 1rem;
+  }
+}
+
+.ct-highlight {
+  background-color: rgba($ct-primary, .15);
+  border: 1px solid rgba($ct-primary, .15);
+}
+
+// Grid mixins
+.example-container {
+  width: 800px;
+  @include make-container();
+}
+
+.example-row {
+  @include make-row();
+}
+
+.example-content-main {
+  @include make-col-ready();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col(6);
+  }
+
+  @include media-breakpoint-up(lg) {
+    @include make-col(8);
+  }
+}
+
+.example-content-secondary {
+  @include make-col-ready();
+
+  @include media-breakpoint-up(sm) {
+    @include make-col(6);
+  }
+
+  @include media-breakpoint-up(lg) {
+    @include make-col(4);
+  }
+}
+
+
+//
+// Container illustrations
+//
+
+.ct-example-container {
+  min-width: 16rem;
+  max-width: 25rem;
+  margin-right: auto;
+  margin-left: auto;
+}
+
+.ct-example-container-header {
+  height: 3rem;
+  margin-bottom: .5rem;
+  background-color: lighten($blue, 50%);
+  border-radius: .25rem;
+}
+
+.ct-example-container-sidebar {
+  float: right;
+  width: 4rem;
+  height: 8rem;
+  background-color: lighten($blue, 25%);
+  border-radius: .25rem;
+}
+
+.ct-example-container-body {
+  height: 8rem;
+  margin-right: 4.5rem;
+  background-color: lighten($ct-primary, 25%);
+  border-radius: .25rem;
+}
+
+.ct-example-container-fluid {
+  max-width: none;
+}
+
+
+//
+// Docs examples
+//
+
+.ct-example {
+  position: relative;
+  margin: 1rem (-$grid-gutter-width / 2) 0;
+  @include clearfix();
+
+  @include media-breakpoint-up(sm) {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  + .highlight,
+  + .clipboard + .highlight {
+    margin-top: 0;
+  }
+
+  + p {
+    margin-top: 2rem;
+  }
+
+  .pos-f-t {
+    position: relative;
+    margin: -1rem;
+
+    @include media-breakpoint-up(sm) {
+      margin: -1.5rem;
+    }
+  }
+
+  .custom-file-input:lang(es) ~ .custom-file-label::after {
+    content: "Elegir";
+  }
+
+  > .form-control {
+    + .form-control {
+      margin-top: .5rem;
+    }
+  }
+
+  > .nav + .nav,
+  > .alert + .alert,
+  > .navbar + .navbar,
+  > .progress + .progress,
+  > .progress + .btn,
+  .badge,
+  .btn {
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+  }
+
+  .btn-group {
+    margin-top: .5rem;
+    margin-bottom: .5rem;
+    .btn {
+      margin: 0;
+    }
+  }
+
+  .alert {
+    margin: 0;
+
+    + .alert {
+      margin-top: 1.25rem;
+    }
+  }
+
+  .badge {
+    margin-right: .5rem;
+  }
+
+  > .dropdown-menu:first-child {
+    position: static;
+    display: block;
+  }
+
+  > .form-group:last-child {
+    margin-bottom: 0;
+  }
+
+  > .close {
+    float: none;
+  }
+}
+
+// Typography
+.ct-example-type {
+  .table {
+    .type-info {
+      color: #999;
+      vertical-align: middle;
+    }
+    td {
+      padding: 1rem 0;
+      border-color: #eee;
+    }
+    tr:first-child td {
+      border-top: 0;
+    }
+  }
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+// Contextual background colors
+.ct-example-bg-classes p {
+  padding: 1rem;
+}
+
+// Images
+.ct-example > img {
+  + img {
+    margin-left: .5rem;
+  }
+}
+
+// Buttons
+.ct-example {
+  > .btn-group {
+    margin-top: .25rem;
+    margin-bottom: .25rem;
+  }
+  > .btn-toolbar + .btn-toolbar {
+    margin-top: .5rem;
+  }
+}
+
+// Forms
+.ct-example-control-sizing select,
+.ct-example-control-sizing input[type="text"] + input[type="text"] {
+  margin-top: .5rem;
+}
+.ct-example-form .input-group {
+  margin-bottom: .5rem;
+}
+.ct-example > textarea.form-control {
+  resize: vertical;
+}
+
+// List groups
+.ct-example > .list-group {
+  max-width: 400px;
+}
+
+// Navbars
+.ct-example {
+  .fixed-top,
+  .sticky-top {
+    position: static;
+    margin: -1rem -1rem 1rem;
+  }
+  .fixed-bottom {
+    position: static;
+    margin: 1rem -1rem -1rem;
+  }
+
+  @include media-breakpoint-up(sm) {
+    .fixed-top,
+    .sticky-top {
+      margin: -1.5rem -1.5rem 1rem;
+    }
+    .fixed-bottom {
+      margin: 1rem -1.5rem -1.5rem;
+    }
+  }
+}
+
+// Pagination
+.ct-example .pagination {
+  margin-top: .5rem;
+  margin-bottom: .5rem;
+}
+
+// Example modals
+.modal {
+  z-index: 1072;
+
+  .tooltip,
+  .popover {
+    z-index: 1073;
+  }
+}
+
+.modal-backdrop {
+  z-index: 1071;
+}
+
+.ct-example-modal {
+  background-color: #fafafa;
+
+  .modal {
+    position: relative;
+    top: auto;
+    right: auto;
+    bottom: auto;
+    left: auto;
+    z-index: 1;
+    display: block;
+  }
+
+  .modal-dialog {
+    left: auto;
+    margin-right: auto;
+    margin-left: auto;
+  }
+}
+
+// Example tabbable tabs
+.ct-example-tabs .nav-tabs {
+  margin-bottom: 1rem;
+}
+
+// Popovers
+.ct-example-popover-static {
+  padding-bottom: 1.5rem;
+  background-color: #f9f9f9;
+
+  .popover {
+    position: relative;
+    display: block;
+    float: left;
+    width: 260px;
+    margin: 1.25rem;
+  }
+}
+
+// Tooltips
+.tooltip-demo a {
+  white-space: nowrap;
+}
+
+.ct-example-tooltip-static .tooltip {
+  position: relative;
+  display: inline-block;
+  margin: 10px 20px;
+  opacity: 1;
+}
+
+// Scrollspy demo on fixed height div
+.scrollspy-example {
+  position: relative;
+  height: 200px;
+  margin-top: .5rem;
+  overflow: auto;
+}
+
+.scrollspy-example-2 {
+  position: relative;
+  height: 350px;
+  overflow: auto;
+}
+
+.ct-example-border-utils {
+  [class^="border"] {
+    display: inline-block;
+    width: 5rem;
+    height: 5rem;
+    margin: .25rem;
+    background-color: #f5f5f5;
+  }
+}
+
+.ct-example-border-utils-0 {
+  [class^="border"] {
+    border: 1px solid $border-color;
+  }
+}
+
+//
+// Code snippets
+//
+
+.highlight {
+  padding: 0;
+  margin-top: 1rem;
+  //margin-bottom: 3rem;
+  //background-color: $gray-100;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+
+  @include media-breakpoint-up(sm) {
+    padding: 0;
+  }
+}
+
+.ct-content .highlight {
+  margin-right: (-$grid-gutter-width / 2);
+  margin-left: (-$grid-gutter-width / 2);
+
+  @include media-breakpoint-up(sm) {
+    margin-right: 0;
+    margin-left: 0;
+  }
+}
+
+//
+// Component-Code tabs
+//
+
+.ct-example {
+  margin-bottom: 2rem;
+  padding-bottom: 2rem;
+  border-bottom: 1px solid $gray-200;
+
+  .tab-content {
+    .tab-example-result {
+        background-color: #f5f7f9;
+        border: 1px solid #e6ecf1;
+        padding: 1.25rem;
+        border-radius: .25rem;
+    }
+  }
+
+  .nav-tabs-code {
+    margin-bottom: .375rem;
+
+    .nav-link {
+      font-size: .875rem;
+
+      &:active,
+      &.active {
+        color: $ct-primary;
+      }
+    }
+  }
+}
+
+// Icon examples
+.icon-examples {
+  margin-top: 1rem;
+}
+.btn-icon-clipboard {
+  margin: 0px;
+  padding: 24px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.25;
+  color: rgb(57, 63, 73);
+  background-color: rgb(248, 249, 250);
+  border-radius: 4px;
+  border: 0px none;
+  text-align: left;
+  font-family: inherit;
+  display: inline-block;
+  vertical-align: middle;
+  text-decoration: none;
+  -moz-appearance: none;
+  cursor: pointer;
+  width: 100%;
+  margin: .5rem 0;
+
+  &:hover {
+    background-color: rgb(255, 255, 255);
+    box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 4px 16px;
+  }
+
+  > div {
+    align-items: center;
+    display: flex;
+  }
+
+  i {
+    box-sizing: content-box;
+    color: rgb(57, 63, 73);
+    vertical-align: middle;
+    font-size: 1.5rem;
+  }
+
+  span {
+    display: inline-block;
+    font-size: .875rem;
+    line-height: 1.5;
+    color: rgb(57, 63, 73);
+    margin-left: 16px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    vertical-align: middle;
+  }
+}
--- a/assets/scss/argon-design-system/docs/content.scss
+++ b/assets/scss/argon-design-system/docs/content.scss
@@ -0,0 +1,374 @@
+.docs {
+    background: #FFF;
+
+    h6 {
+        font-size: 1rem;
+        font-weight: $font-weight-bold;
+    }
+}
+
+.ct-content {
+    order: 1;
+
+    >h2[id],
+    >h3[id],
+    >h4[id] {
+        pointer-events: none;
+
+        >div,
+        >a {
+            pointer-events: auto;
+        }
+
+        &::before {
+            display: block;
+            height: 6rem;
+            margin-top: -6rem;
+            visibility: hidden;
+            content: "";
+        }
+    }
+
+    >table {
+        width: 100%;
+        max-width: 100%;
+        margin-bottom: 1rem;
+
+        @include media-breakpoint-down(md) {
+            display: block;
+            overflow-x: auto;
+            -ms-overflow-style: -ms-autohiding-scrollbar; // See https://github.com/twbs/bootstrap/pull/10057
+            &.table-bordered {
+                border: 0;
+            }
+        } // Cells
+        >thead,
+        >tbody,
+        >tfoot {
+            >tr {
+                >th,
+                >td {
+                    padding: $table-cell-padding;
+                    vertical-align: top;
+                    border: 1px solid $table-border-color;
+
+                    >p:last-child {
+                        margin-bottom: 0;
+                    }
+                }
+            }
+        } // Prevent breaking of code (e.g., Grunt tasks list)
+        td:first-child>code {
+            white-space: nowrap;
+        }
+    }
+}
+
+//
+// Docs sections
+//
+.ct-content {
+    >h2:not(:first-child) {
+        margin-top: 3rem;
+        font-size: 1.5rem;
+        font-weight: $font-weight-bold;
+    }
+
+    >h3 {
+        margin-top: 2.5rem;
+        font-size: 1.25rem;
+        font-weight: $font-weight-bold;
+    }
+
+    >ul li,
+    >ol li {
+        margin-bottom: .25rem;
+    }
+
+    @include media-breakpoint-up(lg) {
+        >ul,
+        >ol,
+        >p {
+            max-width: 80%;
+        }
+    }
+}
+
+.ct-page-title {
+    padding-left: 1.25rem;
+    border-left: 2px solid $ct-primary;
+    margin-bottom: 1.5rem;
+}
+
+.ct-title {
+    margin-top: 1rem;
+    margin-bottom: .5rem;
+    font-weight: 300;
+
+    @include media-breakpoint-up(sm) {
+        font-size: 1.5rem;
+        font-weight: $font-weight-bold;
+    }
+}
+
+.ct-lead {
+    color: rgb(59, 69, 78);
+    font-weight: 500;
+
+    @include media-breakpoint-up(sm) {
+        max-width: 80%;
+        margin-bottom: 1rem;
+        font-size: .875rem;
+    }
+}
+
+.ct-text-purple {
+    color: $ct-primary;
+}
+
+.ct-text-purple-bright {
+    color: $ct-primary-bright;
+}
+
+// Docs code example tabs
+.ct-tabs-example {
+    .nav-link i {
+        margin-right: 5px;
+    }
+}
+
+// Color swatches
+.color-swatch {
+    margin: 1rem 0;
+    border-radius: .25rem;
+    background-color: #F4F5F7;
+}
+
+.color-swatch:after {
+    content: " ";
+    display: table;
+    clear: both;
+}
+
+.color-swatch-header {
+    position: relative;
+    height: 0;
+    padding-bottom: 50%;
+    border-radius: .25rem .25rem 0 0;
+    border: 1px solid transparent;
+}
+
+.color-swatch-header.is-light {
+    border-color: #C1C7D0;
+}
+
+.color-swatch-header .pass-fail {
+    position: absolute;
+    width: 100%;
+    bottom: 0;
+}
+
+.color-swatch-header .pass-fail-item-wrap {
+    position: relative;
+    float: left;
+    left: 50%;
+    -webkit-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+}
+
+.color-swatch-header .pass-fail-item-group {
+    display: inline-block;
+    padding: 0 5px;
+}
+
+.color-swatch-header .pass-fail-item {
+    float: left;
+    display: inline-block;
+    text-align: center;
+    padding: 2px;
+}
+
+.color-swatch-header .pass-fail-item.white .example {
+    color: #fff;
+}
+
+.color-swatch-header .pass-fail-item.small .example {
+    font-size: 10px;
+}
+
+.color-swatch-header .pass-fail-item .lozenge {
+    font-size: 11px;
+    text-transform: uppercase;
+    font-weight: 600;
+    background: #000;
+    color: #fff;
+    padding: 2px 4px;
+    line-height: 10px;
+    border-radius: 4px;
+    letter-spacing: 0.05em;
+}
+
+.color-swatch-body {
+    position: relative;
+    left: 50%;
+    float: left;
+    padding: 10px 0;
+    -webkit-transform: translateX(-50%);
+    -ms-transform: translateX(-50%);
+    transform: translateX(-50%);
+}
+
+.color-swatch-body .prop-item-wrap {
+    float: left;
+    padding: 0 15px;
+    min-width: 65px;
+}
+
+.color-swatch-body .prop-item {
+    padding: 15px 0;
+}
+
+.color-swatch-body .prop-item .label {
+    font-size: 11px;
+    color: #62748C;
+    text-transform: uppercase;
+    line-height: 16px;
+}
+
+.color-swatch-body .prop-item .value {
+    font-size: 14px;
+}
+
+.table-colors {
+    font-weight: 600;
+    font-size: 16px;
+    width: 100%;
+}
+
+.table-colors td,
+.table-colors:first-child td,
+.table-colors td:first-child,
+.table-colors:first-child td:first-child,
+.table-colors td:last-child,
+.table-colors:first-child td:last-child {
+    background: $ct-primary-light;
+    border-bottom: 1px solid rgba(0, 0, 0, .1);
+    padding: 10px;
+}
+
+.table-colors tr:last-child td,
+.table-colors:first-child tr:last-child td {
+    border-bottom: none;
+}
+
+.table-colors td:nth-child(1),
+.table-colors:first-child td:nth-child(1) {
+    line-height: 40px;
+}
+
+.table-colors .swatch,
+.table-colors:first-child .swatch {
+    float: left;
+    height: 40px;
+    width: 40px;
+    margin-right: 20px;
+    display: inline-block;
+    border-radius: 4px;
+    border: 1px solid transparent;
+}
+
+.table-colors .swatch.is-light,
+.table-colors:first-child .swatch.is-light {
+    border-color: #C1C7D0;
+}
+
+.table-colors .lozenge,
+.table-colors:first-child .lozenge {
+    float: left;
+    margin: 5px 10px 0 0;
+    font-size: 10px;
+    display: inline-block;
+    text-transform: uppercase;
+    font-weight: 600;
+    background: #97A0AF;
+    color: #042A53;
+    padding: 2px 4px;
+    line-height: 10px;
+    border-radius: 4px;
+    letter-spacing: 0.05em;
+}
+
+
+
+#tags-component.tab-pane {
+  .choices__inner {
+    height: 60px;
+  }
+}
+
+.highlight pre {
+  overflow: auto;
+  margin: 0;
+  padding: 1.25rem;
+  font-family: Consolas,Menlo,Monaco,'Andale Mono WT','Andale Mono','Lucida Console','Lucida Sans Typewriter','DejaVu Sans Mono','Bitstream Vera Sans Mono','Liberation Mono','Nimbus Mono L','Courier New',Courier,monospace;
+  font-size: 14px;
+  line-height: 1.375;
+  text-align: left;
+  white-space: pre;
+  word-spacing: normal;
+  word-break: normal;
+  -moz-tab-size: 4;
+  -o-tab-size: 4;
+  tab-size: 4;
+  -webkit-hyphens: none;
+  hyphens: none;
+  color: #5e6687;
+  border-radius: .25rem;
+  background: #f5f7ff;
+  direction: ltr;
+  -ms-hyphens: none;
+
+  code {
+    font-size: 87.5%;
+    word-break: break-word;
+    color: #5e6687;
+  }
+
+  pre code {
+    font-size: inherit;
+    word-break: normal;
+    color: inherit;
+  }
+  code, kbd, pre, samp {
+    font-family: SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;
+    font-size: 1em;
+  }
+  .nt {
+    color: #3d8fd1;
+  }
+  .na {
+    color: #c76b29;
+  }
+  .s,
+  .token.control,
+  .token.directive,
+  .token.keyword,
+  .token.unit {
+    color: #ac9739;
+  }
+  .token.punctuation {
+    color: #5e6687;
+  }
+
+}
+.btn-clipboard {
+  top: 3.5rem;
+}
+
+.offline-doc .page-header{
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
--- a/assets/scss/argon-design-system/docs/footer.scss
+++ b/assets/scss/argon-design-system/docs/footer.scss
@@ -0,0 +1,39 @@
+//
+// Footer
+//
+.ct-footer {
+    font-size: 85%;
+    text-align: center;
+    background-color: #f7f7f7;
+
+    a {
+        font-weight: 500;
+        color: $gray-700;
+
+        &:hover,
+        &:focus {
+            color: $link-color;
+        }
+    }
+
+    p {
+        margin-bottom: 0;
+    }
+
+    @include media-breakpoint-up(sm) {
+        text-align: left;
+    }
+}
+
+.ct-footer-links {
+    padding-left: 0;
+    margin-bottom: 1rem;
+
+    li {
+        display: inline-block;
+
+        +li {
+            margin-left: 1rem;
+        }
+    }
+}
--- a/assets/scss/argon-design-system/docs/nav.scss
+++ b/assets/scss/argon-design-system/docs/nav.scss
@@ -0,0 +1,110 @@
+//
+// Main navbar
+//
+.ct-navbar {
+    background-color: $ct-primary;
+    box-shadow: rgba(116, 129, 141, 0.1) 0px 1px 1px 0px;
+    padding-top: .5rem;
+    padding-bottom: .5rem;
+    
+    @include media-breakpoint-down(md) {
+        padding-right: .5rem;
+        padding-left: .5rem;
+
+        .navbar-nav-scroll {
+            max-width: 100%;
+            height: 2.5rem;
+            margin-top: .25rem;
+            overflow: hidden;
+            font-size: .875rem;
+
+            .navbar-nav {
+                padding-bottom: 2rem;
+                overflow-x: auto;
+                white-space: nowrap;
+                -webkit-overflow-scrolling: touch;
+            }
+        }
+    }
+
+    @include media-breakpoint-up(md) {
+        @supports (position: sticky) {
+            position: sticky;
+            top: 0;
+            z-index: 1071; // over everything in bootstrap
+        }
+    }
+
+    .navbar-nav {
+        .nav-link {
+            padding-right: .5rem;
+            padding-left: .5rem;
+            color: $ct-primary-light !important;
+
+            &.active,
+            &:hover {
+                color: #fff !important;
+                background-color: transparent !important;
+            }
+
+            &.active {
+                font-weight: 500;
+            }
+        }
+    }
+
+    .navbar-nav-svg {
+        display: inline-block;
+        width: 1rem;
+        height: 1rem;
+        vertical-align: text-top;
+    }
+
+    .dropdown-menu {
+        font-size: .875rem;
+    }
+
+    .dropdown-item.active {
+        font-weight: 500;
+        color: $gray-900;
+        background-color: transparent;
+        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23292b2c' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: .4rem .87rem;
+        background-size: .75rem .75rem;
+        padding-left: 25px;
+    }
+}
+
+// Github corner
+.github-corner {
+    position: fixed;
+    right: 0;
+    z-index: 1080;
+
+    &:hover {
+        .octo-arm {
+            animation: octocat-wave 560ms ease-in-out
+        }
+    }
+
+    svg {
+        fill: $white;
+        color: $ct-primary;
+    }
+}
+
+@keyframes octocat-wave {
+    0%,
+    100% {
+        transform: rotate(0)
+    }
+    20%,
+    60% {
+        transform: rotate(-25deg)
+    }
+    40%,
+    80% {
+        transform: rotate(10deg)
+    }
+}
--- a/assets/scss/argon-design-system/docs/prism.scss
+++ b/assets/scss/argon-design-system/docs/prism.scss
@@ -0,0 +1,176 @@
+code[class*="language-"],
+pre[class*="language-"] {
+    font-family: Consolas, Menlo, Monaco, "Andale Mono WT", "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", "Courier New", Courier, monospace;
+    font-size: 14px;
+    line-height: 1.375;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+    background: #f5f7ff;
+    color: #5e6687;
+    border-radius: .25rem;
+}
+
+pre[class*="language-"]::-moz-selection,
+pre[class*="language-"] ::-moz-selection,
+code[class*="language-"]::-moz-selection,
+code[class*="language-"] ::-moz-selection {
+    text-shadow: none;
+    background: #dfe2f1;
+}
+
+pre[class*="language-"]::selection,
+pre[class*="language-"] ::selection,
+code[class*="language-"]::selection,
+code[class*="language-"] ::selection {
+    text-shadow: none;
+    background: #dfe2f1;
+}
+
+
+/* Code blocks */
+
+pre[class*="language-"] {
+    padding: 1.25rem;
+    margin: 0;
+    overflow: auto;
+}
+
+
+/* Inline code */
+
+:not(pre)>code[class*="language-"] {
+    padding: .1em;
+    border-radius: .3em;
+}
+
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+    color: #898ea4;
+}
+
+.token.punctuation {
+    color: #5e6687;
+}
+
+.token.namespace {
+    opacity: .7;
+}
+
+.token.operator,
+.token.boolean,
+.token.number {
+    color: #c76b29;
+}
+
+.token.property {
+    color: #c08b30;
+}
+
+.token.tag {
+    color: #3d8fd1;
+}
+
+.token.string {
+    color: #22a2c9;
+}
+
+.token.selector {
+    color: #6679cc;
+}
+
+.token.attr-name {
+    color: #c76b29;
+}
+
+.token.entity,
+.token.url,
+.language-css .token.string,
+.style .token.string {
+    color: #22a2c9;
+}
+
+.token.attr-value,
+.token.keyword,
+.token.control,
+.token.directive,
+.token.unit {
+    color: #ac9739;
+}
+
+.token.statement,
+.token.regex,
+.token.atrule {
+    color: #22a2c9;
+}
+
+.token.placeholder,
+.token.variable {
+    color: #3d8fd1;
+}
+
+.token.deleted {
+    text-decoration: line-through;
+}
+
+.token.inserted {
+    border-bottom: 1px dotted #202746;
+    text-decoration: none;
+}
+
+.token.italic {
+    font-style: italic;
+}
+
+.token.important,
+.token.bold {
+    font-weight: bold;
+}
+
+.token.important {
+    color: #c94922;
+}
+
+.token.entity {
+    cursor: help;
+}
+
+pre>code.highlight {
+    outline: 0.4em solid #c94922;
+    outline-offset: .4em;
+}
+
+
+/* overrides color-values for the Line Numbers plugin
+ * http://prismjs.com/plugins/line-numbers/
+ */
+
+.line-numbers .line-numbers-rows {
+    border-right-color: #dfe2f1;
+}
+
+.line-numbers-rows>span:before {
+    color: #979db4;
+}
+
+
+/* overrides color-values for the Line Highlight plugin
+ * http://prismjs.com/plugins/line-highlight/
+ */
+
+.line-highlight {
+    background: rgba(107, 115, 148, 0.2);
+    background: -webkit-linear-gradient(left, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
+    background: linear-gradient(to right, rgba(107, 115, 148, 0.2) 70%, rgba(107, 115, 148, 0));
+}
--- a/assets/scss/argon-design-system/docs/sidebar.scss
+++ b/assets/scss/argon-design-system/docs/sidebar.scss
@@ -0,0 +1,213 @@
+// stylelint-disable declaration-no-important
+//
+// Right side table of contents
+//
+.ct-toc {
+    @supports (position: sticky) {
+        position: sticky;
+        top: 4rem;
+        height: calc(100vh - 4rem);
+        overflow-y: auto;
+    }
+    order: 2;
+    padding-top: 2rem;
+    padding-bottom: 1.5rem;
+    font-size: .875rem;
+}
+
+.section-nav {
+    padding-left: 0;
+    border-left: 1px solid #eee;
+
+    ul {
+        padding-left: 1rem;
+
+        ul {
+            display: none;
+        }
+    }
+}
+
+.toc-entry {
+    display: block;
+    font-size: 1rem;
+
+    a {
+        display: block;
+        padding: .125rem 1.5rem;
+        color: #99979c;
+        font-size: 90%;
+
+        &:hover {
+            color: $blue;
+            text-decoration: none;
+        }
+    }
+}
+
+//
+// Left side navigation
+//
+.ct-sidebar {
+    order: 0; // background-color: #f5f2f9;
+    border-bottom: 1px solid $ct-sidebar-border-color;
+    background-color: $ct-sidebar-bg;
+
+    @include media-breakpoint-up(md) {
+        @supports (position: sticky) {
+            position: sticky;
+            top: 4rem;
+            z-index: 1000;
+            height: calc(100vh - 4rem);
+        }
+        border-right: 1px solid $ct-sidebar-border-color;
+    }
+
+    @include media-breakpoint-up(xl) {
+        flex: 0 1 320px;
+    }
+}
+
+.ct-links {
+    padding-top: 2rem;
+    padding-bottom: 1rem;
+    margin-right: -15px;
+    margin-left: -15px;
+
+    @include media-breakpoint-up(md) {
+        @supports (position: sticky) {
+            max-height: calc(100vh - 5rem);
+            overflow-y: auto;
+        }
+    } // Override collapse behaviors
+    @include media-breakpoint-up(md) {
+        display: block !important;
+    }
+}
+
+.ct-search {
+    position: relative; // To contain the Algolia search
+    padding: 1rem 15px;
+    margin-right: -15px;
+    margin-left: -15px;
+    border-bottom: 1px solid rgba(0, 0, 0, .05);
+
+    .form-control:focus {
+        border-color: $ct-primary-bright;
+        box-shadow: 0 0 0 3px rgba($ct-primary-bright, .25);
+    }
+}
+
+.ct-search-docs-toggle {
+    line-height: 1;
+    color: $gray-900;
+}
+
+.ct-sidenav {
+    display: none;
+}
+
+.ct-toc-link {
+    display: block;
+    padding: .25rem 1.5rem;
+    font-weight: 600;
+    font-size: .875rem;
+    color: #0d2b3e;
+
+    &:hover {
+        color: rgba(0, 0, 0, .85);
+        text-decoration: none;
+    }
+}
+
+.ct-toc-item {
+    &.active {
+        margin-bottom: 1rem;
+
+        &:not(:first-child) {
+            margin-top: 1rem;
+        }
+
+        >.ct-toc-link {
+            color: rgba(0, 0, 0, .85);
+
+            &:hover {
+                background-color: transparent;
+            }
+        }
+
+        >.ct-sidenav {
+            display: block;
+        }
+    }
+}
+
+// All levels of nav
+.ct-sidebar .nav>li>a {
+    display: block;
+    padding: .25rem 1.5rem;
+    font-size: 84%;
+    color: #4c555a;
+}
+
+.ct-sidebar .nav>li>a:hover {
+    color: rgba(0, 0, 0, .85);
+    text-decoration: none;
+    background-color: transparent;
+}
+
+.ct-sidebar .nav>.active>a {
+    font-weight: 500;
+    color: #0099e5;
+    background-color: transparent;
+    padding-left: 2rem;
+    position: relative;
+
+    &:before {
+        content: '';
+        position: absolute;
+        height: 16px;
+        width: 2px;
+        background-color: #0099e5;
+        top: 50%;
+        left: 1.5rem;
+        transform: translateY(-50%);
+    }
+}
+
+.ct-sidebar .nav>.active:hover>a {
+    color: #0099e5
+}
+
+
+.scrollbar-inner {
+    height: 100%;
+
+    &:not(:hover) .scroll-element {
+        opacity: 0;
+    }
+
+    .scroll-element {
+        transition: opacity 300ms;
+        margin-right: 2px;
+
+        .scroll-bar,
+        .scroll-element_track {
+            transition: background-color 300ms;
+        }
+
+        .scroll-element_track {
+            background-color: transparent;
+        }
+    }
+
+    .scroll-element.scroll-y {
+        width: 3px;
+        right: 0;
+    }
+
+    .scroll-element.scroll-x {
+        height: 3px;
+        bottom: 0;
+    }
+}
--- a/assets/scss/argon-design-system/docs/variables.scss
+++ b/assets/scss/argon-design-system/docs/variables.scss
@@ -0,0 +1,13 @@
+// Local docs variables
+$ct-primary:        theme-color("primary") !default;
+$ct-primary-bright: lighten(saturate($ct-primary, 5%), 15%) !default;
+$ct-primary-light:  rgba(255, 255, 255, .9) !default;
+$ct-dark:          	#2a2730 !default;
+$ct-download:      	#ffe484 !default;
+$ct-info:          	#5bc0de !default;
+$ct-warning:       	#f0ad4e !default;
+$ct-danger:        	#d9534f !default;
+
+$ct-sidebar-bg:	#f5f7f9;
+$ct-sidebar-border-color: #e6ecf1;
+
--- a/assets/scss/argon-design-system/dropdown.scss
+++ b/assets/scss/argon-design-system/dropdown.scss
@@ -0,0 +1,69 @@
+.dropdown,
+.dropup,
+.dropright,
+.dropleft {
+  display: inline-block;
+}
+
+.dropdown-menu {
+  min-width: 12rem;
+
+  .dropdown-item {
+    padding: 1rem;
+    font-size: $font-size-sm;
+    > i,
+    > svg {
+      margin-right: 1rem;
+      font-size: 1rem;
+      vertical-align: -17%;
+    }
+  }
+}
+
+.dropdown-header {
+  padding-left: 1rem;
+  padding-right: 1rem;
+  color: $gray-100;
+  font-size: .625rem;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
+
+// Dropdown elements
+
+.dropdown-menu {
+  a.media {
+    > div {
+      &:first-child {
+        line-height: 1;
+      }
+      }
+
+    p {
+      color: $gray-600;
+    }
+    &:hover {
+      .heading, p {
+        color: theme-color("default") !important;
+      }
+    }
+  }
+}
+
+// Dropown: Sizes
+
+.dropdown-menu-sm {
+    min-width: 100px;
+    border: $border-radius-lg;
+}
+
+.dropdown-menu-lg {
+    min-width: 260px;
+    border-radius: $border-radius-lg;
+}
+
+.dropdown-menu-xl {
+    min-width: 450px;
+    border-radius: $border-radius-lg;
+}
--- a/assets/scss/argon-design-system/footer.scss
+++ b/assets/scss/argon-design-system/footer.scss
@@ -0,0 +1,89 @@
+.footer {
+    background: $secondary;
+    padding: 1.5rem 0;
+
+    .col-footer {
+        .heading {
+            color: $footer-heading-color;
+            letter-spacing: 0;
+            font-size: $footer-heading-font-size;
+            text-transform: uppercase;
+            font-weight: $font-weight-bold;
+            margin-bottom: 1rem;
+        }
+    }
+
+    .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;
+        color: $footer-link-color;
+        font-size: $footer-link-font-size;
+
+        &:hover {
+            color: $footer-link-hover-color;
+        }
+    }
+
+    .copyright {
+        font-size: $font-size-sm;
+    }
+
+    .dropdown {
+      .btn:not(:disabled):not(.disabled):active:focus,
+      .btn:not(:disabled):not(.disabled).active:focus {
+        box-shadow: none;
+      }
+    }
+}
+
+.footer-dark {
+    .col-footer .heading {
+        color: $white;
+    }
+}
+
+.footer.has-cards {
+    overflow: hidden;
+    padding-top: 500px;
+    margin-top: -420px;
+    position: relative;
+    background: transparent;
+    pointer-events: none;
+
+    &:before {
+        content: "";
+        position: absolute;
+        left: 0;
+        right: 0;
+        top: 600px;
+        height: 2000px;
+        background: theme-color("secondary");
+        transform: skew(0,-8deg);
+    }
+
+    .container {
+        pointer-events: auto;
+        position: relative;
+    }
+}
+
+.nav-footer {
+    .nav-link {
+        font-size: $font-size-sm;
+    }
+
+    .nav-item:last-child {
+        .nav-link {
+            padding-right: 0;
+        }
+    }
+}
--- a/assets/scss/argon-design-system/forms.scss
+++ b/assets/scss/argon-design-system/forms.scss
@@ -0,0 +1,141 @@
+/* Form controls */
+
+label {
+    font-size: $font-size-sm;
+}
+
+.form-control {
+    font-size: $input-btn-font-size;
+    transition: $transition-base;
+
+    &:focus {
+        &::placeholder {
+            color: $input-focus-placeholder-color;
+        }
+    }
+
+    &.is-valid,
+    &.is-invalid {
+      background-image: none;
+    }
+}
+
+
+/* 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;
+}
+
+
+/* Alternative styles */
+
+.form-control-muted {
+    background-color: $input-muted-bg;
+    border-color: $input-muted-bg;
+    box-shadow: none;
+
+    &:focus {
+      background-color: $input-muted-bg;
+    }
+}
+
+.form-control-alternative {
+  box-shadow: $input-alternative-box-shadow;
+  border: 0;
+  transition: box-shadow .15s ease;
+
+  &:focus {
+    box-shadow: $input-focus-alternative-box-shadow;
+  }
+}
+
+// Sizes
+
+.form-control-lg {
+  font-size: $font-size-base;
+}
+
+// Validation
+
+.has-success,
+.has-danger {
+  position: relative;
+
+  &:after {
+    width: 19px;
+    height: 19px;
+    line-height: 19px;
+    text-align: center;
+    font-family: 'NucleoIcons';
+    display: inline-block;
+    position: absolute;
+    right: 15px;
+    top: 2px;
+    transform: translateY(50%);
+    border-radius: 50%;
+    font-size: 9px;
+    opacity: 1;
+  }
+
+  .form-control-alternative {
+    &.is-valid,
+    &.is-invalid {
+      &:focus {
+        box-shadow: $input-focus-alternative-box-shadow !important;
+      }
+    }
+  }
+}
+
+.has-success {
+  &:after {
+    content: "\ea26";
+    color: daken($form-feedback-valid-color, 18%);
+    background-color: $form-feedback-valid-bg;
+  }
+  .form-control {
+    background-color: $input-focus-bg;
+
+    &:focus {
+      border-color: $input-focus-border-color;
+    }
+
+    // Placeholder
+    &::placeholder {
+      color: $form-feedback-valid-color;
+    }
+  }
+}
+
+.has-danger {
+    &:after {
+      content: "\ea53";
+      color: daken($form-feedback-invalid-color, 18%);
+      background-color: $form-feedback-invalid-bg;
+    }
+    .form-control {
+      background-color: $input-focus-bg;
+
+      &:focus {
+        border-color: $input-focus-border-color;
+      }
+
+      // Placeholder
+      &::placeholder {
+        color: $form-feedback-invalid-color;
+      }
+    }
+}
--- a/assets/scss/argon-design-system/functions.scss
+++ b/assets/scss/argon-design-system/functions.scss
@@ -0,0 +1,23 @@
+// Retrieve color Sass maps
+
+@function section-color($key: "primary") {
+	@return map-get($section-colors, $key);
+}
+
+// Lines colors
+
+@function shapes-primary-color($key: "step-1-gradient-bg") {
+	@return map-get($shapes-primary-colors, $key);
+}
+
+@function shapes-default-color($key: "step-1-gradient-bg") {
+	@return map-get($shapes-default-colors, $key);
+}
+
+@function lines-light-color($key: "step-1-gradient-bg") {
+	@return map-get($shapes-light-colors, $key);
+}
+
+@function shapes-dark-color($key: "step-1-gradient-bg") {
+	@return map-get($shapes-dark-colors, $key);
+}
--- a/assets/scss/argon-design-system/global.scss
+++ b/assets/scss/argon-design-system/global.scss
@@ -0,0 +1,181 @@
+// Nucleo icons
+
+.section-nucleo-icons .icons-container {
+    position: relative;
+    max-width: 100%;
+    height: 360px;
+    margin: 0 auto;
+    z-index: 1;
+}
+
+.section-nucleo-icons {
+
+    --icon-size: 5rem;
+    --icon-sm-size: 3.75rem;
+    --gutter: 7rem;
+
+    .icons-container {
+        i {
+            position: absolute;
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            border-radius: 50%;
+            background: $white;
+            z-index: 1;
+            transform: translate(-50%, -50%);
+            @include box-shadow($box-shadow);
+            transition: all .2s cubic-bezier(.25,.65,.9,.75);
+
+            &.icon {
+                width: var(--icon-size);
+                height: var(--icon-size);
+                font-size: 1.7em;
+            }
+
+            &.icon-sm {
+                width: var(--icon-sm-size);
+                height: var(--icon-sm-size);
+                font-size: 1.5em;
+            }
+
+            &:nth-child(1) {
+                font-size: 42px;
+                color: theme-color("warning");
+                z-index: 2;
+            }
+        }
+
+        &:not(.on-screen) {
+            i {
+                transform: translate(-50%, -50%);
+                left: 50%;
+                top: 50%;
+
+                &:not(:nth-child(1)) {
+                    opacity: 0;
+                }
+            }
+        }
+
+        &.on-screen {
+
+            i {
+                opacity: 1;
+
+                &:nth-child(1) {
+                    left: 50%;
+                    top: 50%;
+                    font-size: 42px;
+                    color: theme-color("warning");
+                }
+
+                &:nth-child(2) {
+                    left: calc(50% + (var(--gutter) * 1.7));
+                    top: 50%;
+                }
+
+                &:nth-child(3) {
+                    left: calc(50% + var(--gutter));
+                    top: calc(50% + var(--gutter));
+                }
+
+                &:nth-child(4) {
+                    left: calc(50% + var(--gutter));
+                    top: calc(50% - var(--gutter));
+                }
+
+                &:nth-child(5) {
+                    left: calc(50% + (var(--gutter) * 3));
+                    top: 50%;
+                }
+
+                &:nth-child(6) {
+                    left: calc(50% + (var(--gutter) * 2.7));
+                    top: calc(50% + (var(--gutter) * 1.5));
+                }
+
+                &:nth-child(7) {
+                    left: calc(50% + (var(--gutter) * 2.7));
+                    top: calc(50% - (var(--gutter) * 1.5));
+                }
+
+                &:nth-child(8) {
+                    left: calc(50% - (var(--gutter) * 1.7));
+                    top: 50%;
+                }
+
+                &:nth-child(9) {
+                    left: calc(50% - var(--gutter));
+                    top: calc(50% + var(--gutter));
+                }
+
+                &:nth-child(10) {
+                    left: calc(50% - var(--gutter));
+                    top: calc(50% - var(--gutter));
+                }
+
+                &:nth-child(11) {
+                    left: calc(50% - (var(--gutter) * 4));
+                    top: 50%;
+                }
+
+                &:nth-child(12) {
+                    left: calc(50% - (var(--gutter) * 2.7));
+                    top: calc(50% + (var(--gutter) * 1.5));
+                }
+
+                &:nth-child(13) {
+                    left: calc(50% - (var(--gutter) * 2.7));
+                    top: calc(50% - (var(--gutter) * 1.5));
+                }
+            }
+
+        }
+    }
+
+    @include media-breakpoint-down(md) {
+      overflow: hidden;
+    }
+}
+
+
+// Blurable sections
+
+.blur--hover {
+    position: relative;
+
+    .blur-item {
+        transition: 1s cubic-bezier(.19,1,.22,1);
+        will-change: transform;
+        filter: blur(0);
+        opacity: 1;
+    }
+
+    .blur-hidden {
+        position: absolute;
+        top: calc(50% + 7px);
+        left: 50%;
+        transform: translate(-50%, -50%);
+        opacity: 0;
+        transition: $transition-base;
+        z-index: 100;
+    }
+    &:hover {
+        .blur-item {
+            opacity: .8;
+            filter: blur(10px);
+            transform: scale(.95);
+            z-index: 1;
+        }
+        .blur-hidden {
+            opacity: 1;
+            top: 50%;
+        }
+    }
+}
+
+.info .info-title{
+  margin: 25px 0 15px;
+  font-weight: 600;
+}
--- a/assets/scss/argon-design-system/grid.scss
+++ b/assets/scss/argon-design-system/grid.scss
@@ -0,0 +1,5 @@
+@include media-breakpoint-up(lg) {
+	.container-lg {
+		max-width: 1160px;
+	}
+}
--- a/assets/scss/argon-design-system/icons.scss
+++ b/assets/scss/argon-design-system/icons.scss
@@ -0,0 +1,107 @@
+.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);
+}
+
+// Extra Small icon
+
+.icon-xs {
+	width: $icon-size-xs;
+	height: $icon-size-xs;
+
+	i, svg {
+		font-size: $icon-size-xs - .75 !important;
+	}
+
+    + .icon-text {
+    	width: calc(100% - $icon-size-xs - 1);
+    }
+}
+
+
+// Icons included in shapes
+.icon-shape {
+	padding: 12px;
+	text-align: center;
+	display: inline-flex;
+	align-items: center;
+	justify-content: center;
+	border-radius: 50%;
+
+
+	i, svg {
+		font-size: 1.25rem;
+	}
+
+	&.icon-lg {
+		i, svg {
+			font-size: 1.625rem;
+		}
+	}
+
+	&.icon-sm {
+		i, svg {
+			font-size: .875rem;
+		}
+	}
+
+	svg {
+		width: 30px;
+		height: 30px;
+	}
+
+}
+
+@each $color, $value in $theme-colors {
+	.icon-shape-#{$color} {
+		@include icon-shape-variant(theme-color($color));
+	}
+}
--- a/assets/scss/argon-design-system/input-group.scss
+++ b/assets/scss/argon-design-system/input-group.scss
@@ -0,0 +1,70 @@
+.input-group {
+	box-shadow: $input-box-shadow;
+	border-radius: $input-border-radius;
+	transition: $transition-base;
+
+	.form-control {
+		box-shadow: none;
+
+		&:not(:first-child) {
+		    border-left: 0;
+		    padding-left: 0;
+		}
+		&:not(:last-child) {
+			border-right: 0;
+			padding-right: 0;
+		}
+		&:focus {
+			box-shadow: none;
+		}
+	}
+
+  .input-group-prepend {
+    margin-right: 0;
+
+    .input-group-text {
+      border-right: none;
+    }
+  }
+}
+
+.input-group-text {
+  transition: $transition-base;
+}
+
+.input-group-alternative {
+    box-shadow: $input-alternative-box-shadow;
+    border: 0;
+    transition: box-shadow .15s ease;
+
+    .form-control,
+    .input-group-text {
+        border: 0;
+        box-shadow: none;
+    }
+}
+
+.focused {
+	.input-group-alternative {
+    box-shadow: $input-focus-alternative-box-shadow !important;
+  }
+}
+
+
+// .focus class is applied dinamycally from theme.js
+
+.focused {
+	.input-group {
+		box-shadow: $input-focus-box-shadow;
+	}
+
+	.input-group-text {
+    color: $input-group-addon-focus-color;
+    background-color: $input-group-addon-focus-bg;
+    border-color: $primary;
+	}
+
+	.form-control {
+		border-color: $primary;
+	}
+}
--- a/assets/scss/argon-design-system/kit-free.scss
+++ b/assets/scss/argon-design-system/kit-free.scss
@@ -0,0 +1,30 @@
+// @import "accordion.scss";
+// @import "alerts.scss";
+// @import "avatars.scss";
+// @import "badge.scss";
+// @import "buttons.scss";
+// @import "card.scss";
+// @import "carousel.scss";
+// @import "close.scss";
+// @import "custom-forms.scss";
+// @import "dropdown.scss";
+// @import "footer.scss";
+// @import "forms.scss";
+// @import "grid.scss";
+// @import "icons.scss";
+// @import "input-group.scss";
+// @import "list-group.scss";
+// @import "modal.scss";
+// @import "nav.scss";
+// @import "navbar.scss";
+// @import "pagination.scss";
+// @import "popover.scss";
+// @import "progress.scss";
+// @import "section.scss";
+// @import "type.scss";
+//
+// // Vendor
+//
+// @import "vendor/bootstrap-datepicker.scss";
+// @import "vendor/headroom.scss";
+// @import "vendor/nouislider.scss";
--- a/assets/scss/argon-design-system/list-group.scss
+++ b/assets/scss/argon-design-system/list-group.scss
@@ -0,0 +1,39 @@
+// Space list items
+
+.list-group-space {
+    .list-group-item {
+        margin-bottom: 1.5rem;
+        @include border-radius($list-group-border-radius);
+    }
+}
+
+
+// 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;
+}
--- a/assets/scss/argon-design-system/mixins.scss
+++ b/assets/scss/argon-design-system/mixins.scss
@@ -0,0 +1,8 @@
+@import "mixins/alert";
+@import "mixins/badge";
+@import "mixins/background-variant";
+@import "mixins/buttons";
+@import "mixins/forms";
+@import "mixins/icon";
+@import "mixins/modals";
+@import "mixins/popover";
--- a/assets/scss/argon-design-system/mixins/alert.scss
+++ b/assets/scss/argon-design-system/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%);
+    }
+}
--- a/assets/scss/argon-design-system/mixins/background-variant.scss
+++ b/assets/scss/argon-design-system/mixins/background-variant.scss
@@ -0,0 +1,30 @@
+// 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: linear-gradient(35deg, $color 0, adjust-hue($color, 25%) 100%) !important;
+    }
+}
+
+@mixin bg-translucent-variant($parent, $color) {
+    #{$parent} {
+        background-color: darken(rgba($color, $translucent-color-opacity), 7%) !important;
+    }
+    a#{$parent},
+    button#{$parent} {
+        @include hover-focus {
+            background-color: darken(rgba($color, $translucent-color-opacity), 12%) !important;
+        }
+    }
+}
--- a/assets/scss/argon-design-system/mixins/badge.scss
+++ b/assets/scss/argon-design-system/mixins/badge.scss
@@ -0,0 +1,12 @@
+@mixin badge-variant($bg) {
+	color: saturate(darken($bg, 10%), 10);
+    background-color: transparentize(lighten($bg, 25%), .5);
+
+  	&[href] {
+	    @include hover-focus {
+	        color: color-yiq($bg);
+	        text-decoration: none;
+	        background-color: darken($bg, 10%);
+	    }
+	}
+}
--- a/assets/scss/argon-design-system/mixins/buttons.scss
+++ b/assets/scss/argon-design-system/mixins/buttons.scss
@@ -0,0 +1,106 @@
+@mixin button-variant($background, $border, $hover-background: darken($background, 0%), $hover-border: darken($border, 0%), $active-background: darken($background, 10%), $active-border: darken($border, 0%)) {
+    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;
+    }
+}
--- a/assets/scss/argon-design-system/mixins/forms.scss
+++ b/assets/scss/argon-design-system/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 1px $input-focus-width 0 rgba($color, .75);
+      }
+
+      ~ .#{$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);
+        }
+      }
+    }
+  }
+}
+
--- a/assets/scss/argon-design-system/mixins/icon.scss
+++ b/assets/scss/argon-design-system/mixins/icon.scss
@@ -0,0 +1,4 @@
+@mixin icon-shape-variant($color) {
+    color: saturate(darken($color, 10%), 10);
+    background-color: transparentize(lighten($color, 10%), .5);
+}
--- a/assets/scss/argon-design-system/mixins/modals.scss
+++ b/assets/scss/argon-design-system/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;
+    	}
+    }
+}
--- a/assets/scss/argon-design-system/mixins/popover.scss
+++ b/assets/scss/argon-design-system/mixins/popover.scss
@@ -0,0 +1,36 @@
+@mixin popover-variant($background) {
+
+	background-color: $background;
+
+	.popover-header {
+		background-color: $background;
+		color: color-yiq($background);
+	}
+
+	.popover-body {
+		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;
+		}
+	}
+}
--- a/assets/scss/argon-design-system/modal.scss
+++ b/assets/scss/argon-design-system/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);
+    }
+}
+
--- a/assets/scss/argon-design-system/nav.scss
+++ b/assets/scss/argon-design-system/nav.scss
@@ -0,0 +1,85 @@
+.nav-link {
+    color: $nav-link-color;
+
+    &:hover,
+    &.active {
+      color: theme-color("primary");
+    }
+
+    i:not(.fa) {
+        position: relative;
+        top: 2px;
+    }
+}
+
+// Pills
+
+.nav-pills {
+    .nav-item:not(:last-child) {
+        padding-right: $nav-pills-space-x;
+    }
+
+    .nav-link {
+    	padding: $nav-pills-padding-y $nav-pills-padding-x;
+        color: $nav-pills-link-color;
+        font-weight: 500;
+        font-size: $font-size-sm;
+        box-shadow: $nav-pills-box-shadow;
+        background-color: $nav-pills-bg;
+        transition: $transition-base;
+
+        &:hover {
+        	color: $nav-pills-link-hover-color;
+        }
+    }
+
+    .nav-link.active,
+    .show > .nav-link {
+        color: $nav-pills-link-active-color;
+        background-color: $nav-pills-link-active-bg;
+    }
+
+    @include media-breakpoint-down(xs) {
+        .nav-item {
+            margin-bottom: $spacer;
+        }
+    }
+}
+
+@include media-breakpoint-down(sm) {
+    .nav-pills:not(.nav-pills-circle) {
+        .nav-item {
+            padding-right: 0;
+        }
+    }
+}
+
+// Nav pills circle
+
+.nav-pills-circle {
+    .nav-link {
+        text-align: center;
+        height: 60px;
+        width: 60px;
+        padding: 0;
+        line-height: 60px;
+        border-radius: 50%;
+    }
+
+    .nav-link-icon {
+        i, svg {
+            font-size: 1rem;
+        }
+    }
+}
+
+// Nav wrapper
+.nav-wrapper {
+    padding: 1rem 0;
+    @include border-top-radius($card-border-radius);
+
+    + .card {
+        @include border-top-radius(0);
+        @include border-bottom-radius($card-border-radius);
+    }
+}
--- a/assets/scss/argon-design-system/navbar.scss
+++ b/assets/scss/argon-design-system/navbar.scss
@@ -0,0 +1,401 @@
+.navbar {
+
+  &.navbar-absolute {
+    position: absolute;
+    z-index: 1050;
+    width: 100%;
+  }
+
+  &.navbar-main {
+    z-index: 3;
+  }
+}
+
+.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;
+        @include transition($navbar-transition);
+
+        .nav-link-inner--text {
+            margin-left: .25rem;
+        }
+    }
+}
+
+.navbar-brand {
+    font-size: $font-size-sm;
+    font-weight: 600;
+    text-transform: uppercase;
+    font-size: .875rem;
+    letter-spacing: .05px;
+
+    img {
+        height: 30px;
+    }
+}
+
+.navbar-dark {
+    .navbar-brand {
+        color: $white;
+    }
+}
+
+.navbar-light {
+    .navbar-brand {
+        color: $gray-800;
+    }
+}
+
+.navbar-nav {
+  .nav-item {
+    .media:not(:last-child){
+      margin-bottom: 1.5rem;
+    }
+  }
+}
+
+@include media-breakpoint-up(lg) {
+    // .navbar-main {
+    //     padding: 1rem 0;
+    // }
+
+    .navbar-nav {
+        .nav-item {
+            margin-right: .5rem;
+
+            [data-toggle="dropdown"]::after {
+                transition: $transition-base;
+            }
+
+            &.show {
+                [data-toggle="dropdown"]::after {
+                    transform: rotate(180deg);
+                }
+            }
+        }
+        .nav-link {
+            padding-top: $navbar-nav-link-padding-y;
+            padding-bottom: $navbar-nav-link-padding-y;
+            border-radius: $navbar-nav-link-border-radius;
+
+            i {
+                margin-right: .625rem;
+            }
+        }
+
+        .nav-link-icon {
+            padding-left: .5rem !important;
+            padding-right: .5rem !important;
+            font-size: 1rem;
+            border-radius: $navbar-nav-link-border-radius;
+
+            i {
+                margin-right: 0;
+            }
+        }
+
+        // Dropdown menu
+        .dropdown-menu {
+            opacity: 0;
+            pointer-events: none;
+            margin: 0;
+
+            &:before {
+                background: $dropdown-bg;
+                box-shadow: none;
+                content: '';
+                display: block;
+                height: 16px;
+                width: 16px;
+                left: 5px;
+                position: absolute;
+                bottom: 100%;
+                transform: rotate(-45deg) translateY(1rem);
+                z-index: -5;
+                border-radius: $border-radius-sm;
+            }
+        }
+
+        .dropdown-menu-right {
+            &:before {
+                right: 20px;
+                left: auto;
+            }
+        }
+
+        &:not(.navbar-nav-hover) {
+            .dropdown-menu {
+                &.show {
+                    opacity: 1;
+                    pointer-events: auto;
+                    animation: show-navbar-dropdown .25s ease forwards;
+                }
+
+                &.close {
+                    display: block;
+                    animation: hide-navbar-dropdown .15s ease backwards;
+                }
+            }
+        }
+
+        &.navbar-nav-hover {
+          .dropdown-menu {
+            opacity: 0;
+            display: block;
+            pointer-events: none;
+            transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
+            transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
+            animation: none;
+          }
+
+          .nav-item.dropdown:hover > .dropdown-menu {
+            display: block;
+            opacity: 1;
+            pointer-events: auto;
+            visibility: visible;
+            transform: translate(0, 0);
+            animation: none;
+          }
+
+          .nav-item.dropdown > .dropdown-menu {
+            .dropdown-item.open + .dropdown-menu {
+              display: block;
+              opacity: 1;
+              pointer-events: auto;
+              visibility: visible;
+              transform: translate(0, 0);
+              animation: none;
+            }
+            .dropdown-item + .dropdown-menu {
+              margin-left: 10px;
+
+              &:before {
+                left: -16px;
+                top: 4px;
+              }
+            }
+          }
+        }
+
+        .dropdown-menu-inner {
+            position: relative;
+            padding: 1rem;
+        }
+    }
+}
+
+// Transparent navbar
+
+.navbar-transparent {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  z-index: 100;
+  background-color: transparent !important;
+  border: 0;
+  box-shadow: none;
+
+  .navbar-brand {
+    color: rgba(255, 255, 255, 1);
+  }
+
+  .navbar-toggler {
+    color: rgba(255, 255, 255, 1);
+  }
+
+  .navbar-toggler-icon {
+    background-image: $navbar-dark-toggler-icon-bg;
+  }
+}
+
+.bg-white {
+  .navbar-toggler-icon {
+    background-image: $navbar-light-toggler-icon-bg
+
+  }
+}
+
+@include media-breakpoint-up(md) {
+    .navbar-transparent {
+        .navbar-nav {
+            .nav-link {
+                color: $navbar-dark-color;
+
+                @include hover-focus {
+                    color: $navbar-dark-hover-color;
+                }
+
+                &.disabled {
+                    color: $navbar-dark-disabled-color;
+                }
+            }
+
+            .show > .nav-link,
+            .active > .nav-link,
+            .nav-link.show,
+            .nav-link.active {
+                color: $navbar-dark-active-color;
+            }
+        }
+
+        .navbar-brand {
+            color: $navbar-dark-color;
+
+            @include hover-focus {
+                color: $navbar-dark-color;
+            }
+        }
+    }
+}
+
+// Collapse
+
+.navbar-collapse-header {
+    display: none;
+}
+
+@include media-breakpoint-down(md) {
+    .navbar-nav {
+        .nav-link {
+            padding: .625rem 0;
+            color: theme-color("default") !important;
+        }
+
+        .dropdown-menu {
+            box-shadow: none;
+            min-width: auto;
+
+            .media {
+                svg {
+                    width: 30px;
+                }
+            }
+        }
+    }
+
+    .navbar-collapse {
+        width: calc(100% - 1.4rem);
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 1050;
+        margin: .7rem;
+        overflow-y: auto;
+        height: auto !important;
+        opacity: 0;
+
+        .navbar-toggler {
+            width: 20px;
+            height: 20px;
+            position: relative;
+            cursor: pointer;
+            display: inline-block;
+            padding: 0;
+
+            span {
+                display: block;
+                position: absolute;
+                width: 100%;
+                height: 2px;
+                border-radius: 2px;
+                opacity: 1;
+                background: #283448;
+            }
+
+            :nth-child(1) {
+                transform: rotate(135deg);
+            }
+
+            :nth-child(2) {
+                transform: rotate(-135deg);
+            }
+        }
+
+        .navbar-collapse-header {
+            display: block;
+            padding-bottom: 1rem;
+            margin-bottom: 1rem;
+            border-bottom: 1px solid rgba(0, 0, 0, .1);
+        }
+
+        .collapse-brand {
+            img {
+                height: 36px;
+            }
+        }
+
+        .collapse-close {
+            text-align: right;
+        }
+    }
+
+    .navbar-collapse.collapsing,
+    .navbar-collapse.show {
+        padding: 1.5rem;
+        border-radius: $border-radius;
+        background: #FFF;
+        box-shadow: 0 50px 100px rgba(50,50,93,.1),0 15px 35px rgba(50,50,93,.15),0 5px 15px rgba(0,0,0,.1);
+        animation: show-navbar-collapse .2s ease forwards;
+    }
+
+    .navbar-collapse.collapsing-out {
+        animation: hide-navbar-collapse .2s ease forwards;
+    }
+}
+
+// Keyframes
+
+@keyframes show-navbar-collapse {
+    0% {
+        opacity: 0;
+        transform: scale(.95);
+        transform-origin: 100% 0;
+    }
+
+    100% {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes hide-navbar-collapse {
+    from {
+        opacity: 1;
+        transform: scale(1);
+        transform-origin: 100% 0;
+    }
+
+    to {
+        opacity: 0;
+        transform: scale(.95);
+    }
+}
+
+@keyframes show-navbar-dropdown {
+    0% {
+        opacity: 0;
+        transform: translate(0, 10px) perspective(200px) rotateX(-2deg);
+        transition: visibility 0.25s, opacity 0.25s, transform 0.25s;
+    }
+
+    100% {
+        transform: translate(0, 0);
+        opacity: 1;
+    }
+}
+
+@keyframes hide-navbar-dropdown {
+    from {
+        opacity: 1;
+    }
+
+    to {
+        opacity: 0;
+        transform: translate(0, 10px);
+    }
+}
--- a/assets/scss/argon-design-system/pagination.scss
+++ b/assets/scss/argon-design-system/pagination.scss
@@ -0,0 +1,40 @@
+.page-item {
+    &.active .page-link {
+        box-shadow: $pagination-active-box-shadow;
+    }
+
+    .page-link,
+    span {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        margin: 0 3px;
+        border-radius: 50% !important;
+        width: 36px;
+		height: 36px;
+		font-size: $font-size-sm;
+    }
+}
+
+.pagination-lg {
+    .page-item {
+        .page-link,
+        span {
+            width: 46px;
+            height: 46px;
+            line-height: 46px;
+        }
+    }
+}
+
+.pagination-sm {
+    .page-item {
+        .page-link,
+        span {
+            width: 30px;
+            height: 30px;
+            line-height: 30px;
+        }
+    }
+}
--- a/assets/scss/argon-design-system/popover.scss
+++ b/assets/scss/argon-design-system/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);
+    }
+}
--- a/assets/scss/argon-design-system/progress.scss
+++ b/assets/scss/argon-design-system/progress.scss
@@ -0,0 +1,71 @@
+.progress-wrapper {
+    position: relative;
+    padding-top: 1.5rem;
+}
+.progress {
+    height: 8px;
+    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 .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 {
+    box-shadow: none;
+    border-radius: 0;
+    height: auto;
+}
+
+.progress-label {
+    span {
+        display: inline-block;
+        color: $default;
+        font-size: .625rem;
+        font-weight: 600;
+        text-transform: uppercase;
+        padding: .25rem 0rem;
+    }
+}
+
+.progress-percentage {
+    text-align: right;
+    span {
+        display: inline-block;
+        color: $gray-600;
+        font-size: .875rem;
+        font-weight: 600;
+    }
+}
+
+.index-page {
+  .progress-wrapper {
+    padding-top: 1rem;
+
+    .progress-label {
+      position: absolute;
+      top: auto;
+      bottom: 10px;
+    }
+
+    .progress {
+      margin-bottom: 0;
+    }
+  }
+}
--- a/assets/scss/argon-design-system/reboot.scss
+++ b/assets/scss/argon-design-system/reboot.scss
@@ -0,0 +1,13 @@
+iframe {
+    border: 0;
+}
+
+figcaption,
+figure,
+main {
+    display: block;
+}
+
+main {
+    overflow: hidden;
+}
--- a/assets/scss/argon-design-system/section.scss
+++ b/assets/scss/argon-design-system/section.scss
@@ -0,0 +1,571 @@
+.section {
+    position: relative;
+    padding-top: $spacer * 4;
+    padding-bottom: $spacer * 4;
+}
+
+.section-xl {
+    padding-top: $spacer * 8;
+    padding-bottom: $spacer * 8;
+}
+
+.section-lg {
+    padding-top: $spacer * 6;
+    padding-bottom: $spacer * 6;
+}
+
+.section-sm {
+    padding-top: $spacer * 2;
+    padding-bottom: $spacer * 2;
+}
+
+// Hero sections
+.section-hero {
+    @include media-breakpoint-up(md) {
+        min-height: 500px;
+    }
+}
+
+// Circle sections
+.section-shaped {
+    position: relative;
+    overflow: hidden;
+
+    &.section-hero {
+      &:before {
+        top: 680px;
+      }
+    }
+
+    .stars-and-coded{
+        margin-top: 8rem;
+    }
+
+    .shape {
+        position: absolute;
+        top: 0;
+        z-index: -1;
+        width: 100%;
+        height: 100%;
+
+        span {
+            position: absolute;
+        }
+
+        +.container {
+            position: relative;
+            // padding-top: 6rem;
+            // padding-bottom: 0rem;
+            height: 100%;
+        }
+
+        &.shape-skew {
+
+            +.container {
+                padding-top: 0;
+
+                .col {
+                    margin-top: -100px;
+                }
+            }
+
+            + .shape-container {
+                padding-top: 18rem;
+                padding-bottom: 19rem;
+            }
+        }
+    }
+
+    .shape-skew {
+        transform: skewY(-4deg);
+        transform-origin: 0;
+
+        span {
+            transform: skew(4deg);
+        }
+    }
+
+    // Color variations
+    .shape-primary {
+        background: linear-gradient(150deg, shapes-primary-color("step-1-gradient-bg") 15%, shapes-primary-color("step-2-gradient-bg") 70%, shapes-primary-color("step-3-gradient-bg") 94%);
+
+        :nth-child(1) {
+            background: shapes-primary-color("span-1-bg");
+        }
+
+         :nth-child(2) {
+            background: shapes-primary-color("span-2-bg");
+        }
+
+         :nth-child(3) {
+            background: shapes-primary-color("span-3-bg");
+        }
+
+         :nth-child(4) {
+            background: shapes-primary-color("span-4-bg");
+        }
+
+         :nth-child(5) {
+            background: shapes-primary-color("span-5-bg");
+        }
+    }
+
+    .shape-default {
+        background: linear-gradient(150deg, shapes-default-color("step-1-gradient-bg") 15%, shapes-default-color("step-2-gradient-bg") 70%, shapes-default-color("step-3-gradient-bg") 94%);
+
+         :nth-child(1) {
+            background: shapes-default-color("span-1-bg");
+        }
+
+         :nth-child(2) {
+            background: shapes-default-color("span-2-bg");
+        }
+
+         :nth-child(3) {
+            background: shapes-default-color("span-3-bg");
+        }
+
+         :nth-child(4) {
+            background: shapes-default-color("span-4-bg");
+        }
+
+         :nth-child(5) {
+            background: shapes-default-color("span-5-bg");
+        }
+    }
+
+    .shape-light {
+        background: linear-gradient(150deg, shapes-light-color("step-1-gradient-bg") 15%, shapes-light-color("step-2-gradient-bg") 70%, shapes-light-color("step-3-gradient-bg") 94%);
+
+         :nth-child(1) {
+            background: shapes-light-color("span-1-bg");
+        }
+
+         :nth-child(2) {
+            background: shapes-light-color("span-2-bg");
+        }
+
+         :nth-child(3) {
+            background: shapes-light-color("span-3-bg");
+        }
+
+         :nth-child(4) {
+            background: shapes-light-color("span-4-bg");
+        }
+
+         :nth-child(5) {
+            background: shapes-light-color("span-5-bg");
+        }
+    }
+
+    .shape-dark {
+        background: linear-gradient(150deg, shapes-dark-color("step-1-gradient-bg") 15%, shapes-dark-color("step-2-gradient-bg") 70%, shapes-dark-color("step-3-gradient-bg") 94%);
+
+         :nth-child(1) {
+            background: shapes-dark-color("span-1-bg");
+        }
+
+         :nth-child(2) {
+            background: shapes-dark-color("span-2-bg");
+        }
+
+         :nth-child(3) {
+            background: shapes-dark-color("span-3-bg");
+        }
+
+         :nth-child(4) {
+            background: shapes-dark-color("span-4-bg");
+        }
+
+         :nth-child(5) {
+            background: shapes-dark-color("span-5-bg");
+        }
+    }
+
+    .shape-style-1 {
+        span {
+            height: 120px;
+            width: 120px;
+            border-radius: 50%;
+        }
+
+        .span-200 {
+            height: 200px;
+            width: 200px;
+        }
+
+        .span-150 {
+            height: 150px;
+            width: 150px;
+        }
+
+        .span-100 {
+            height: 100px;
+            width: 100px;
+        }
+
+        .span-75 {
+            height: 75px;
+            width: 75px;
+        }
+
+        .span-50 {
+            height: 50px;
+            width: 50px;
+        }
+
+        :nth-child(1) {
+            left: -4%;
+            bottom: auto;
+            background: rgba(255, 255, 255, .1);
+        }
+
+        :nth-child(2) {
+            right: 4%;
+            top: 10%;
+            background: rgba(255, 255, 255, .1);
+        }
+
+        :nth-child(3) {
+            top: 280px;
+            right: 5.66666%;
+            background: rgba(255, 255, 255, .3);
+        }
+
+        :nth-child(4) {
+            top: 320px;
+            right: 7%;
+            background: rgba(255, 255, 255, .15);
+        }
+
+        :nth-child(5) {
+            top: 38%;
+            left: 1%;
+            right: auto;
+            background: rgba(255, 255, 255, .05);
+        }
+
+        :nth-child(6) {
+            width: 200px;
+            height: 200px;
+            top: 44%;
+            left: 10%;
+            right: auto;
+            background: rgba(255, 255, 255, .15);
+        }
+
+        :nth-child(7) {
+            bottom: 50%;
+            right: 36%;
+            background: rgba(255, 255, 255, .04);
+        }
+
+        :nth-child(8) {
+            bottom: 70px;
+            right: 2%;
+            background: rgba(255, 255, 255, .2);
+        }
+
+        :nth-child(9) {
+            bottom: 1%;
+            right: 2%;
+            background: rgba(255, 255, 255, .1);
+        }
+
+        :nth-child(10) {
+            bottom: 1%;
+            left: 1%;
+            right: auto;
+            background: rgba(255, 255, 255, .05);
+        }
+
+        @include media-breakpoint-down(md) {
+            span {
+                height: 120px;
+            }
+        }
+
+        @include media-breakpoint-down(sm) {
+            span {
+                height: 90px;
+            }
+        }
+
+        // shape color variations
+        &.shape-primary {
+            background: linear-gradient(150deg, shapes-primary-color("step-1-gradient-bg") 15%, shapes-primary-color("step-2-gradient-bg") 70%, shapes-primary-color("step-3-gradient-bg") 94%);
+        }
+
+        &.shape-default {
+            background: linear-gradient(150deg, shapes-default-color("step-1-gradient-bg") 15%, shapes-default-color("step-2-gradient-bg") 70%, shapes-default-color("step-3-gradient-bg") 94%);
+        }
+
+        &.shape-light {
+            background: linear-gradient(150deg, shapes-light-color("step-1-gradient-bg") 15%, shapes-light-color("step-2-gradient-bg") 70%, shapes-light-color("step-3-gradient-bg") 94%);
+
+        }
+
+        &.shape-dark {
+            background: linear-gradient(150deg, shapes-dark-color("step-1-gradient-bg") 15%, shapes-dark-color("step-2-gradient-bg") 70%, shapes-dark-color("step-3-gradient-bg") 94%);
+        }
+    }
+
+    // Styles - works with a color variation class (e.g shapes-default)
+    .shape-style-2 {
+        span {
+            height: 190px;
+        }
+
+        .span-sm {
+            height: 100px;
+        }
+
+         :nth-child(1) {
+            width: 33.33333%;
+            top: 0;
+            left: -16.66666%;
+        }
+
+         :nth-child(2) {
+            width: 33.33333%;
+            top: 0;
+            left: 16.66666%;
+            right: auto;
+        }
+
+         :nth-child(3) {
+            width: 33.33333%;
+            left: 49.99999%;
+            bottom: auto;
+        }
+
+         :nth-child(4) {
+            width: 33.33333%;
+            top: 55%;
+            right: -16.66666%;
+        }
+
+         :nth-child(5) {
+            width: 33.33333%;
+            bottom: 0;
+        }
+
+        @include media-breakpoint-down(md) {
+            span {
+                height: 120px;
+            }
+        }
+
+        @include media-breakpoint-down(sm) {
+            span {
+                height: 90px;
+            }
+        }
+    }
+
+    .shape-style-3 {
+        span {
+            height: 140px;
+        }
+
+        .span-sm {
+            height: 100px;
+        }
+
+        :nth-child(1) {
+            width: 66%;
+            left: -16.66666%;
+            bottom: auto;
+        }
+
+        :nth-child(2) {
+            width: 40%;
+            top: 54%;
+            //height: 320px;
+            right: -16.66666%;
+        }
+
+        :nth-child(3) {
+            width: 33.33333%;
+            top: 34%;
+            left: -16.66666%;
+            right: auto;
+        }
+
+        :nth-child(4) {
+            width: 60%;
+            bottom: 0;
+            right: -16.66666%;
+            opacity: .6;
+        }
+
+        :nth-child(5) {
+            width: 33.33333%;
+            bottom: 0;
+        }
+
+        @include media-breakpoint-down(md) {
+            span {
+                height: 120px;
+            }
+        }
+
+        @include media-breakpoint-down(sm) {
+            span {
+                height: 90px;
+            }
+        }
+    }
+
+}
+
+// Device illustrations used on shape sections
+.device-ill {
+    pointer-events: none;
+    position: absolute;
+    display: flex;
+    width: 1287px;
+    left: 50%;
+    margin-left: -644px;
+    transform: scale(.5) rotate(-12deg) translateX(50px);
+    transform-origin: 50% 20%;
+    will-change: transform;
+
+    div {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        border-radius: $border-radius;
+        padding: .875rem;
+        background: #fff;
+        box-shadow: inset 0 4px 7px 1px #fff, inset 0 -5px 20px rgba(173, 186, 204, .25), 0 2px 6px rgba(0, 21, 64, .14), 0 10px 20px rgba(0, 21, 64, .05);
+    }
+
+    .tablet-landscape {
+        width: 512px;
+        height: 352px;
+        margin: 115px 50px 0;
+    }
+}
+
+@media (min-width:670px) {
+    .device-ill {
+        flex-wrap: wrap;
+        width: 512px;
+        margin-left: -50px;
+        top: 215px;
+        transform: rotate(-12deg);
+        transform-origin: 100% 0;
+
+        [class^=tablet] {
+            margin: 0;
+        }
+
+        .tablet-landscape {
+            width: 512px;
+            height: 352px;
+        }
+    }
+}
+
+@media (min-width:880px) {
+    .device-ill {
+        width: 829px;
+        margin-left: -10px;
+        top: 20px;
+
+        .tablet-landscape {
+            align-self: flex-end;
+            margin-right: 50px;
+        }
+
+        .phone-big {
+            display: flex;
+            width: 267px;
+            height: 553px;
+        }
+    }
+}
+
+// Profile cover
+.section-profile-cover {
+    height: 580px;
+    background-size: cover;
+    background-position: center center;
+}
+
+@include media-breakpoint-down(md) {
+    .section-profile-cover {
+        height: 400px;
+    }
+}
+
+// Components section (for demo)
+.section-components {
+    >.form-control {
+        +.form-control {
+            margin-top: .5rem;
+        }
+    }
+
+    >.nav+.nav,
+    >.alert+.alert,
+    >.navbar+.navbar,
+    >.progress+.progress,
+    >.progress+.btn,
+    .badge,
+    .btn {
+        margin-top: .5rem;
+        margin-bottom: .5rem;
+    }
+
+    .btn-group {
+        margin-top: .5rem;
+        margin-bottom: .5rem;
+        .btn {
+            margin: 0;
+        }
+    }
+
+    .alert {
+        margin: 0;
+
+        +.alert {
+            margin-top: 1.25rem;
+        }
+    }
+
+    .badge {
+        margin-right: .1rem;
+    }
+
+    .modal-footer {
+        .btn {
+            margin: 0;
+        }
+    }
+}
+
+
+/* .floating-cards {
+     perspective:1500px;
+     position:relative;
+     align-items:center
+}
+
+.floating-cards > div {
+     position:absolute;
+     -ms-flex-negative:0;
+     flex-shrink:0;
+     border-radius:8px;
+     overflow:hidden
+}
+.floating-cards .shine {
+     position:absolute;
+     left:0;
+     right:0;
+     top:0;
+     bottom:0;
+     pointer-events:none
+}
+*/
--- a/assets/scss/argon-design-system/separator.scss
+++ b/assets/scss/argon-design-system/separator.scss
@@ -0,0 +1,215 @@
+.separator {
+    position: absolute;
+    top: auto;
+    left: 0;
+    right: 0;
+    width: 100%;
+    height: 150px;
+    z-index: 1;
+    transform: translateZ(0);
+    overflow: hidden;
+    pointer-events: none;
+
+    svg {
+        position: absolute;
+        pointer-events: none;
+    }
+}
+
+.separator-top {
+    top: 0;
+    bottom: auto;
+
+    svg {
+        top: 0;
+    }
+}
+
+.separator-bottom {
+    top: auto;
+    bottom: 0;
+
+    svg {
+        bottom: 0;
+    }
+}
+
+.separator-inverse {
+    transform: rotate(180deg);
+}
+
+// Styles
+
+.separator-skew {
+    height: 80px;
+    @include media-breakpoint-down(md) {
+        z-index: 0;
+    }
+}
+
+
+
+.mt-md,
+.my-md
+{
+    margin-top: 4rem !important;
+}
+
+.mr-md,
+.mx-md
+{
+    margin-right: 4rem !important;
+}
+
+.mb-md,
+.my-md
+{
+    margin-bottom: 4rem !important;
+}
+
+.ml-md,
+.mx-md
+{
+    margin-left: 4rem !important;
+}
+
+.m-lg
+{
+    margin: 6rem !important;
+}
+
+.mt-lg,
+.my-lg
+{
+    margin-top: 6rem !important;
+}
+
+.mr-lg,
+.mx-lg
+{
+    margin-right: 6rem !important;
+}
+
+.mb-lg,
+.my-lg
+{
+    margin-bottom: 6rem !important;
+}
+
+.ml-lg,
+.mx-lg
+{
+    margin-left: 6rem !important;
+}
+
+.m-xl
+{
+    margin: 8rem !important;
+}
+
+.mt-xl,
+.my-xl
+{
+    margin-top: 8rem !important;
+}
+
+.mr-xl,
+.mx-xl
+{
+    margin-right: 8rem !important;
+}
+
+.mb-xl,
+.my-xl
+{
+    margin-bottom: 8rem !important;
+}
+
+.ml-xl,
+.mx-xl
+{
+    margin-left: 8rem !important;
+}
+
+
+.pt-lg,
+.py-lg
+{
+    padding-top: 6rem !important;
+}
+
+.pr-lg,
+.px-lg
+{
+    padding-right: 6rem !important;
+}
+
+.pb-lg,
+.py-lg
+{
+    padding-bottom: 6rem !important;
+}
+
+.pl-lg,
+.px-lg
+{
+    padding-left: 6rem !important;
+}
+
+.p-xl
+{
+    padding: 8rem !important;
+}
+
+.pt-xl,
+.py-xl
+{
+    padding-top: 8rem !important;
+}
+
+.pr-xl,
+.px-xl
+{
+    padding-right: 8rem !important;
+}
+
+.pb-xl,
+.py-xl
+{
+    padding-bottom: 8rem !important;
+}
+
+.pl-xl,
+.px-xl
+{
+    padding-left: 8rem !important;
+}
+
+.m-auto
+{
+    margin: auto !important;
+}
+
+.mt-auto,
+.my-auto
+{
+    margin-top: auto !important;
+}
+
+.mr-auto,
+.mx-auto
+{
+    margin-right: auto !important;
+}
+
+.mb-auto,
+.my-auto
+{
+    margin-bottom: auto !important;
+}
+
+.ml-auto,
+.mx-auto
+{
+    margin-left: auto !important;
+}
--- a/assets/scss/argon-design-system/theme.scss
+++ b/assets/scss/argon-design-system/theme.scss
@@ -0,0 +1,62 @@
+
+/*!
+
+=========================================================
+* {{ site.product.name }} {{ site.product.name_long }} - v{{ site.product.version }}
+=========================================================
+
+* Product Page: {{ site.product.download }}
+* Copyright {{ 'now' | date: "%Y" }} {{ site.author }} ({{ site.website.url }})
+* Licensed under MIT ({{ site.product.license }})
+
+* Coded by www.creative-tim.com
+
+=========================================================
+
+* The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+*/
+
+// {{ site.product.name }} components
+
+@import "functions";
+@import "mixins";
+
+@import "reboot";
+@import "global";
+@import "utilities";
+
+@import "accordion";
+@import "alert";
+@import "avatar";
+@import "badge";
+@import "buttons";
+@import "card";
+@import "carousel";
+@import "close";
+@import "content";
+@import "custom-forms";
+@import "dropdown";
+@import "footer";
+@import "forms";
+@import "grid";
+@import "icons";
+@import "input-group";
+@import "list-group";
+@import "modal";
+@import "nav";
+@import "navbar";
+@import "pagination";
+@import "popover";
+@import "progress";
+@import "section";
+@import "separator";
+@import "type";
+
+// Vendor
+
+@import "vendors";
+
+// Docs
+
+@import "docs";
--- a/assets/scss/argon-design-system/type.scss
+++ b/assets/scss/argon-design-system/type.scss
@@ -0,0 +1,93 @@
+// General styles
+
+p {
+	font-size: $paragraph-font-size;
+	font-weight: $paragraph-font-weight;
+	line-height: $paragraph-line-height;
+}
+
+.lead {
+	font-size: $lead-font-size;
+  	font-weight: $lead-font-weight;
+	line-height: $paragraph-line-height;
+	margin-top: 1.5rem;
+
+	+ .btn-wrapper {
+		margin-top: 3rem;
+	}
+}
+
+.description {
+	font-size: $font-size-sm;
+}
+
+// Headings
+
+.heading {
+	letter-spacing: $heading-letter-spacing;
+	font-size: $heading-font-size;
+	text-transform: $heading-text-transform;
+	font-weight: $heading-font-weight;
+}
+
+.heading-title {
+	letter-spacing: $heading-title-letter-spacing;
+	font-size: $heading-title-font-size;
+	font-weight: $heading-title-font-weight;
+	text-transform: $heading-title-text-transform;
+}
+
+.heading-section {
+	letter-spacing: $heading-section-letter-spacing;
+	font-size: $heading-section-font-size;
+	font-weight: $heading-section-font-weight;
+	text-transform: $heading-section-text-transform;
+
+	img {
+		display: block;
+		width: 72px;
+		height: 72px;
+		margin-bottom: 1.5rem;
+	}
+
+	&.text-center {
+		img {
+			margin-left: auto;
+			margin-right: auto;
+		}
+	}
+}
+
+// Section titles
+
+.display-1,
+.display-2,
+.display-3,
+.display-4 {
+	span {
+		display: block;
+		font-weight: $font-weight-light;
+	}
+}
+
+
+// Articles
+
+article {
+	h4:not(:first-child),
+	h5:not(:first-child) {
+		margin-top: 3rem;
+	}
+
+	h4, h5 {
+		margin-bottom: 1.5rem;
+	}
+
+	figure {
+		margin: 3rem 0;
+	}
+
+	h5 + figure {
+		margin-top: 0;
+	}
+}
--- a/assets/scss/argon-design-system/utilities.scss
+++ b/assets/scss/argon-design-system/utilities.scss
@@ -0,0 +1,9 @@
+@import "utilities/backgrounds";
+@import "utilities/floating";
+@import "utilities/helper";
+@import "utilities/position";
+@import "utilities/sizing";
+@import "utilities/spacing";
+@import "utilities/shadows";
+@import "utilities/text";
+@import "utilities/transform";
--- a/assets/scss/argon-design-system/utilities/backgrounds.scss
+++ b/assets/scss/argon-design-system/utilities/backgrounds.scss
@@ -0,0 +1,44 @@
+@each $color, $value in $colors {
+	@include bg-variant(".bg-#{$color}", $value);
+}
+
+@each $color, $value in $theme-colors {
+	@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+}
+
+@each $color, $value in $colors { 
+	@include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+}
+
+// Background colors with transparency
+@each $color, $value in $theme-colors {
+    @include bg-translucent-variant(".bg-translucent-#{$color}", $value);
+}
+
+
+// Sections
+
+@each $color, $value in $section-colors {
+    @include bg-variant(".section-#{$color}", $value);
+}
+
+@each $color, $value in $theme-colors {
+    @include bg-gradient-variant(".bg-gradient-#{$color}", $value);
+}
+
+
+// Shape (svg) fill colors
+
+@each $color, $value in $theme-colors {
+    .fill-#{$color}  {
+        fill: $value;
+    }
+
+    .stroke-#{$color}  {
+        stroke: $value;
+    }
+}
+
+.fill-opacity-8 {
+	fill-opacity: .8;
+}
--- a/assets/scss/argon-design-system/utilities/floating.scss
+++ b/assets/scss/argon-design-system/utilities/floating.scss
@@ -0,0 +1,54 @@
+.floating {
+	animation: floating 3s ease infinite;
+	will-change: transform;
+
+	&:hover {
+        animation-play-state: paused;
+    }
+}
+
+.floating-lg {
+	animation: floating-lg 3s ease infinite;
+}
+
+.floating-sm {
+	animation: floating-sm 3s ease infinite;
+}
+
+// Keyframes
+
+@keyframes floating-lg {
+    0% {
+        transform: translateY(0px)
+    }
+    50% {
+        transform: translateY(15px)
+    }
+    100% {
+        transform: translateY(0px)
+    }
+}
+
+@keyframes floating {
+    0% {
+        transform: translateY(0px)
+    }
+    50% {
+        transform: translateY(10px)
+    }
+    100% {
+        transform: translateY(0px)
+    }
+}
+
+@keyframes floating-sm {
+    0% {
+        transform: translateY(0px)
+    }
+    50% {
+        transform: translateY(5px)
+    }
+    100% {
+        transform: translateY(0px)
+    }
+}
--- a/assets/scss/argon-design-system/utilities/helper.scss
+++ b/assets/scss/argon-design-system/utilities/helper.scss
@@ -0,0 +1,62 @@
+// Image
+
+.img-center {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+// Clearfix
+
+.floatfix {
+    &:before,
+    &:after {
+        content: '';
+        display: table;
+    }
+    &:after {
+        clear: both;
+    }
+}
+
+// Overflows
+
+.overflow-visible {
+    overflow: visible !important;
+}
+.overflow-hidden {
+    overflow: hidden !important;
+}
+
+// Opacity classes
+
+.opacity-1 {
+    opacity: .1 !important;
+}
+.opacity-2 {
+    opacity: .2 !important;
+}
+.opacity-3 {
+    opacity: .3 !important;
+}
+.opacity-4 {
+    opacity: .4 !important;
+}
+.opacity-5 {
+    opacity: .5 !important;
+}
+.opacity-6 {
+    opacity: .6 !important;
+}
+.opacity-7 {
+    opacity: .7 !important;
+}
+.opacity-8 {
+    opacity: .8 !important;
+}
+.opacity-9 {
+    opacity: .9 !important;
+}
+.opacity-10 {
+    opacity: 1 !important;
+}
--- a/assets/scss/argon-design-system/utilities/position.scss
+++ b/assets/scss/argon-design-system/utilities/position.scss
@@ -0,0 +1,19 @@
+@each $size, $value in $spacers {
+	.top-#{$size} {
+		top: $value;
+	}
+	.right-#{$size} {
+		right: $value;
+	}
+	.bottom-#{$size} {
+		bottom: $value;
+	}
+	.left-#{$size} {
+		left: $value;
+	}
+}
+
+.center {
+	left: 50%;
+	transform: translateX(-50%);
+}
--- a/assets/scss/argon-design-system/utilities/shadows.scss
+++ b/assets/scss/argon-design-system/utilities/shadows.scss
@@ -0,0 +1,10 @@
+[class*="shadow"] {
+	@if $enable-transitions {
+        transition: $transition-base;
+    }
+}
+
+.shadow-sm--hover:hover { box-shadow: $box-shadow-sm !important; }
+.shadow--hover:hover { box-shadow: $box-shadow !important; }
+.shadow-lg--hover:hover { box-shadow: $box-shadow-lg !important; }
+.shadow-none--hover:hover { box-shadow: none !important; }
--- a/assets/scss/argon-design-system/utilities/sizing.scss
+++ b/assets/scss/argon-design-system/utilities/sizing.scss
@@ -0,0 +1,5 @@
+// Height values in vh
+
+.h-100vh {
+	height: 100vh !important;
+}
--- a/assets/scss/argon-design-system/utilities/spacing.scss
+++ b/assets/scss/argon-design-system/utilities/spacing.scss
@@ -0,0 +1,105 @@
+// Spacing columns vertically
+
+.row.row-grid > [class*="col-"] + [class*="col-"] {
+    margin-top: 3rem;
+}
+
+@include media-breakpoint-up(lg) {
+    .row.row-grid > [class*="col-lg-"] + [class*="col-lg-"] {
+        margin-top: 0;
+    }
+}
+@include media-breakpoint-up(md) {
+    .row.row-grid > [class*="col-md-"] + [class*="col-md-"] {
+        margin-top: 0;
+    }
+}
+@include media-breakpoint-up(sm) {
+    .row.row-grid > [class*="col-sm-"] + [class*="col-sm-"] {
+        margin-top: 0;
+    }
+}
+
+.row-grid + .row-grid {
+    margin-top: 3rem;
+}
+
+// Negative margins and paddings
+
+@media(min-width: 992px) {
+    [class*="mt--"],
+    [class*="mr--"],
+    [class*="mb--"],
+    [class*="ml--"] {
+        position: relative;
+        z-index: 5;
+    }
+
+
+    // Large negative margins in pixels
+
+    .mt--100 {
+        margin-top: -100px !important;
+    }
+    .mr--100 {
+        margin-right: -100px !important;
+    }
+    .mb--100 {
+        margin-bottom: -100px !important;
+    }
+    .ml--100 {
+        margin-left: -100px !important;
+    }
+    .mt--150 {
+        margin-top: -150px !important;
+    }
+    .mb--150 {
+        margin-bottom: -150px !important;
+    }
+    .mt--200 {
+        margin-top: -200px !important;
+    }
+    .mb--200 {
+        margin-bottom: -200px !important;
+    }
+    .mt--300 {
+        margin-top: -300px !important;
+    }
+    .mb--300 {
+        margin-bottom: -300px !important;
+    }
+
+
+    // Large margins in pixels
+
+    .pt-100 {
+        padding-top: 100px !important;
+    }
+    .pb-100 {
+        padding-bottom: 100px !important;
+    }
+    .pt-150 {
+        padding-top: 150px !important;
+    }
+    .pb-150 {
+        padding-bottom: 150px !important;
+    }
+    .pt-200 {
+        padding-top: 200px !important;
+    }
+    .pb-200 {
+        padding-bottom: 200px !important;
+    }
+    .pt-250 {
+        padding-top: 250px !important;
+    }
+    .pb-250 {
+        padding-bottom: 250px !important;
+    }
+    .pt-300 {
+        padding-top: 300px!important;
+    }
+    .pb-300 {
+        padding-bottom: 300px!important;
+    }
+}
--- a/assets/scss/argon-design-system/utilities/text.scss
+++ b/assets/scss/argon-design-system/utilities/text.scss
@@ -0,0 +1,41 @@
+// 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; }
+
+
+// Text decorations
+
+.text-underline { text-decoration: underline; }
+.text-through { text-decoration: line-through; }
+
+
+// Line heights
+
+.lh-100 { line-height: 1; }
+.lh-110 { line-height: 1.1; }
+.lh-120 { line-height: 1.2; }
+.lh-130 { line-height: 1.3; }
+.lh-140 { line-height: 1.4; }
+.lh-150 { line-height: 1.5; }
+.lh-160 { line-height: 1.6; }
+.lh-170 { line-height: 1.7; }
+.lh-180 { line-height: 1.8; }
+
+
+// Letter spacings
+
+.ls-1 { letter-spacing: .0625rem; }
+.ls-15 { letter-spacing: .09375rem; }
+.ls-2 { letter-spacing: 0.125rem; }
+
+// Color variations
+
+@each $color, $value in $colors {
+	@include text-emphasis-variant(".text-#{$color}", $value);
+}
--- a/assets/scss/argon-design-system/utilities/transform.scss
+++ b/assets/scss/argon-design-system/utilities/transform.scss
@@ -0,0 +1,8 @@
+@include media-breakpoint-up(lg) {
+	.transform-perspective-right {
+		transform: scale(1) perspective(1040px) rotateY(-11deg) rotateX(2deg) rotate(2deg);
+	}
+	.transform-perspective-left{
+		transform: scale(1) perspective(2000px) rotateY(11deg) rotateX(2deg) rotate(-2deg)
+	}
+}
--- a/assets/scss/argon-design-system/variables.scss
+++ b/assets/scss/argon-design-system/variables.scss
@@ -0,0 +1,903 @@
+
+// Global settings
+
+$enable-caret:              true !default;
+$enable-rounded:            true !default;
+$enable-shadows:            true !default;
+$enable-gradients:          false !default;
+$enable-transitions:        true !default;
+$enable-grid-classes:       true !default;
+$enable-print-styles:       true !default;
+
+
+// Color system
+
+$white:    #fff !default;
+$gray-100: #f6f9fc !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #8898aa !default;   // Line footer color
+$gray-700: #525f7f !default;   // Line p color
+$gray-800: #32325d !default;   // Line heading color
+$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:    #5e72e4 !default;
+$indigo:  #5603ad !default;
+$purple:  #8965e0 !default;
+$pink:    #f3a4b5 !default;
+$red:     #f5365c !default;
+$orange:  #fb6340 !default;
+$yellow:  #ffd600 !default;
+$green:   #2dce89 !default;
+$teal:    #11cdef !default;
+$cyan:    #2bffc6 !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,
+  "light":      $gray-400,
+  "lighter":    $gray-200,
+  "gray-dark":  $gray-800
+), $colors);
+
+$default:       #172b4d !default;
+$primary:       #5e72e4 !default;
+$secondary:     #f4f5f7 !default;
+$success:       $green !default;
+$info:          $teal !default;
+$warning:       $orange !default;
+$danger:        $red !default;
+$light:         $gray-500 !default;
+$dark:          $gray-900 !default;
+$darker:        darken($gray-900, 15%) !default;
+
+$facebook:      #3b5999 !default;
+$twitter:       #1da1f2 !default;
+$google-plus:   #dd4b39 !default;
+$instagram:     #e4405f !default;
+$pinterest:     #bd081c !default;
+$youtube:       #cd201f !default;
+$slack:         #3aaf85 !default;
+$dribbble:      #ea4c89 !default;
+$github:        #222222 !default;
+
+$theme-colors: () !default;
+$theme-colors: map-merge((
+  "default":      $default,
+  "primary":      $primary,
+  "secondary":    $secondary,
+  "success":      $success,
+  "info":         $info,
+  "warning":      $warning,
+  "danger":       $danger,
+  "white":        $white,
+  "neutral":      $white,
+  "dark":         $dark,
+  "darker":       $darker
+), $theme-colors);
+
+$brand-colors: () !default;
+$brand-colors: map-merge((
+  "facebook":     $facebook,
+  "twitter":      $twitter,
+  "google-plus":  $google-plus,
+  "instagram":    $instagram,
+  "pinterest":    $pinterest,
+  "youtube":      $youtube,
+  "slack":        $slack,
+  "dribbble":     $dribbble,
+  "github":       $github
+), $brand-colors);
+
+$shape-colors: () !default;
+$shape-colors: map-merge((
+  "default":      #32325d,
+  "primary":      #5533ff,
+  "secondary":    #24b47e,
+  "neutral":      #e9ecef,
+  "blue-gray":    #b2cbe1,
+
+), $shape-colors);
+
+$shapes-primary-colors: () !default;
+$shapes-primary-colors: map-merge((
+  "step-1-gradient-bg":         #281483,
+  "step-2-gradient-bg":         #8f6ed5,
+  "step-3-gradient-bg":         #d782d9,
+  "span-1-bg":                  #53f,
+  "span-2-bg":                  #4553ff,
+  "span-3-bg":                  #4f40ff,
+  "span-4-bg":                  #25ddf5,
+  "span-5-bg":                  #1fa2ff
+), $shapes-primary-colors);
+
+$shapes-default-colors: () !default;
+$shapes-default-colors: map-merge((
+  "step-1-gradient-bg":         #7795f8,
+  "step-2-gradient-bg":         #6772e5,
+  "step-3-gradient-bg":         #555abf,
+  "span-1-bg":                  #7795f8,
+  "span-2-bg":                  #7b9aff,
+  "span-3-bg":                  #6f8ff8,
+  "span-4-bg":                  #76eea7,
+  "span-5-bg":                  #6adaff
+), $shapes-default-colors);
+
+$shapes-light-colors: () !default;
+$shapes-light-colors: map-merge((
+  "step-1-gradient-bg":         #b2cbe1,
+  "step-2-gradient-bg":         #f6f9fc,
+  "step-3-gradient-bg":         #f6f9fc,
+  "span-1-bg":                  #b4cce1,
+  "span-2-bg":                  #c5dbef,
+  "span-3-bg":                  #b9d5ed,
+  "span-4-bg":                  #74e4a2,
+  "span-5-bg":                  #008169
+), $shapes-light-colors);
+
+$shapes-dark-colors: () !default;
+$shapes-dark-colors: map-merge((
+  "step-1-gradient-bg":         #32325d,
+  "step-2-gradient-bg":         #32325d,
+  "step-3-gradient-bg":         #32325d,
+  "span-1-bg":                  #2e2e57,
+  "span-2-bg":                  #2b2b58,
+  "span-3-bg":                  #25254d,
+  "span-4-bg":                  #d782d9,
+  "span-5-bg":                  #008169
+), $shapes-dark-colors);
+
+
+// Translucent color variations
+$translucent-color-opacity: .6;
+
+// 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:  200 !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;
+
+// Action colors
+
+$star-rating-color: $gray-400 !default;
+$star-rating-color-active: $yellow !default;
+
+$favorite-color: $yellow !default;
+$like-color: $blue !default;
+$love-color: $red !default;
+
+
+// Body
+
+$body-bg: $white !default;
+$body-color: $gray-700 !default;
+
+
+// Sections
+
+$section-colors: () !default;
+$section-colors: map-merge((
+  "primary":      $body-bg,
+  "secondary":    $secondary,
+  "light":        $gray-400,
+  "dark":         $dark,
+  "darker":       $darker
+), $section-colors);
+
+// Links
+
+$link-color:                $primary !default;
+$link-decoration:           none !default;
+$link-hover-color:          darken($link-color, 15%);
+$link-hover-decoration:     none !default;
+
+// Grid breakpoints
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+);
+
+@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: 1040px
+);
+
+@include _assert-ascending($container-max-widths, "$container-max-widths");
+
+
+// Spacing
+
+$spacer: 1rem !default;
+$spacers: () !default;
+$spacers: map-merge((
+  -9: -($spacer * 10),
+  -8: -($spacer * 8),
+  -7: -($spacer * 6),
+  -6: -($spacer * 4.5),
+  -5: -($spacer * 3),
+  -4: -($spacer * 1.5),
+  -3: -$spacer,
+  -2: -($spacer * .5),
+  -1: -($spacer * .25),
+  0: 0,
+  1: ($spacer * .25),
+  2: ($spacer * .5),
+  3: $spacer,
+  4: ($spacer * 1.5),
+  5: ($spacer * 3),
+  6: ($spacer * 4.5),
+  7: ($spacer * 6),
+  8: ($spacer * 8),
+  9: ($spacer * 10)
+), $spacers);
+
+
+// This variable affects the `.h-*` and `.w-*` classes.
+
+$sizes: () !default;
+$sizes: map-merge((
+  25: 25%,
+  50: 50%,
+  75: 75%,
+  100: 100%
+), $sizes);
+
+// Components
+
+$shape-height-xl:              1.5 !default;
+$shape-height-lg:              1.5 !default;
+$shape-height-sm:              1.5 !default;
+
+$border-width:                .0625rem !default;
+$border-color:                $gray-200 !default;
+
+$border-radius:               .25rem !default;
+$border-radius-xl:            .35rem !default;
+$border-radius-lg:            .3rem !default;
+$border-radius-sm:            .2rem !default;
+
+$box-shadow-sm:               0 .125rem .25rem rgba($black, .075);
+$box-shadow:                  0 15px 35px rgba(50,50,93,.1), 0 5px 15px rgba(0,0,0,.07);
+$box-shadow-lg:               0 1rem 3rem rgba($black, .175);
+
+$component-active-color:        $white !default;
+$component-active-bg:           theme-color("primary") !default;
+$component-active-border-color: theme-color("primary") !default;
+
+$component-hover-color:        $gray-300 !default;
+$component-hover-bg:           $gray-300 !default;
+$component-hover-border-color: $gray-300 !default;
+
+$caret-width:                 .3em !default;
+
+$transition-base:             all .15s ease !default;
+$btn-transition:              $transition-base !default;
+$transition-fade:             opacity .15s linear !default;
+$transition-collapse:         height .35s ease !default;
+
+
+// Fonts
+
+$font-family-base: 'Open Sans', sans-serif !default;
+$font-family-alt: 'Open Sans', sans-serif !default;
+
+$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
+$font-size-xl:                ($font-size-base * 1.5);
+$font-size-lg:                ($font-size-base * 1.25);
+$font-size-sm:                ($font-size-base * .875);
+$font-size-xs:                ($font-size-base * .75);
+
+$font-weight-light:           300 !default;
+$font-weight-normal:          400 !default;
+$font-weight-bold:            600 !default;
+$font-weight-extra-bold:      700 !default;
+
+$font-weight-base:            $font-weight-normal !default;
+$shape-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);
+$headings-font-family:        inherit !default;
+$headings-font-weight:        $font-weight-normal !default;
+$headings-line-height:        1.5 !default;
+$headings-color:              $gray-800 !default;
+
+$heading-letter-spacing:      .025em !default;
+$heading-font-size:           .95rem !default;
+$heading-text-transform:      uppercase !default;
+$heading-font-weight:         $headings-font-weight !default;
+
+$heading-title-letter-spacing:      .025em !default;
+$heading-title-font-size:           1.375rem !default;
+$heading-title-font-weight:         $font-weight-bold !default;
+$heading-title-text-transform:      uppercase !default;
+
+$heading-section-letter-spacing:      .025em !default;
+$heading-section-font-size:           1.375rem !default;
+$heading-section-font-weight:         $font-weight-bold !default;
+$heading-section-text-transform:      uppercase !default;
+
+$display1-size:               3.3rem !default;
+$display2-size:               2.75rem !default;
+$display3-size:               2.1875rem !default;
+$display4-size:               1.6275rem !default;
+
+$display1-weight:             $font-weight-bold !default;
+$display2-weight:             $font-weight-bold !default;
+$display3-weight:             $font-weight-bold !default;
+$display4-weight:             $font-weight-bold !default;
+$display-line-height:         $headings-line-height !default;
+
+$paragraph-font-size:         1rem !default;
+$paragraph-font-weight:       300 !default;
+$paragraph-line-height:       1.7 !default;
+
+$lead-font-size:              ($paragraph-font-size * 1.25);
+$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);
+
+$hr-border-color:             rgba($black, .1);
+$hr-border-width:             $border-width !default;
+
+$mark-padding:                .2em !default;
+
+$dt-font-weight:              $font-weight-bold !default;
+
+$list-inline-padding:         .5rem !default;
+
+$mark-bg:                     #fcf8e3 !default;
+
+$hr-margin-y:                 $spacer * 2 !default;
+
+
+// Icons
+
+$icon-size: 3rem !default;
+$icon-size-xl: 5rem !default;
+$icon-size-lg: 4rem !default;
+$icon-size-sm: 2rem !default;
+$icon-size-xs: 1.25rem !default;
+
+
+// Tables
+
+$table-cell-padding:          1rem !default;
+$table-cell-padding-sm:       .3rem !default;
+
+$table-bg:                    transparent !default;
+$table-accent-bg:             rgba($black, .05);
+$table-hover-bg:              rgba($black, .075);
+$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);
+$table-dark-hover-bg:         rgba($white, .075);
+$table-dark-border-color:     lighten($gray-900, 7.5%);
+$table-dark-color:            $body-bg !default;
+
+
+// Buttons + Forms
+
+$input-btn-padding-y:         .625rem !default;
+$input-btn-padding-x:         .75rem !default;
+$input-btn-line-height:       $shape-height-base !default;
+
+$input-btn-focus-width:       0 !default;
+$input-btn-focus-color:       rgba($component-active-bg, 1);
+//$input-btn-focus-box-shadow:  0 4px 10px 0 rgba(0, 0, 0, 0.04);
+$input-btn-focus-box-shadow:  none !default;
+
+$input-btn-padding-y-sm:      .25rem !default;
+$input-btn-padding-x-sm:      .5rem !default;
+$input-btn-line-height-sm:    $shape-height-sm !default;
+
+$input-btn-padding-y-lg:      .875rem !default;
+$input-btn-padding-x-lg:      1rem !default;
+$input-btn-line-height-lg:    $shape-height-lg !default;
+
+$input-btn-border-width:      1px !default;
+
+$input-btn-font-size-sm:      .75rem !default;
+$input-btn-font-size:         .875rem !default;
+$input-btn-font-size-lg:         .875rem !default;
+
+// Buttons
+
+$btn-padding-y:               $input-btn-padding-y !default;
+$btn-padding-x:               $input-btn-padding-x + 0.5 !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:             600 !default;
+$btn-text-transform:          uppercase !default;
+$btn-letter-spacing:          .025em !default;
+$btn-box-shadow:              0 4px 6px rgba(50,50,93,.11), 0 1px 3px rgba(0,0,0,.08);
+$btn-hover-box-shadow:        0 7px 14px rgba(50,50,93,.1), 0 3px 6px rgba(0,0,0,.08);
+$btn-focus-box-shadow:        $btn-hover-box-shadow !default;
+$btn-focus-width:             $input-btn-focus-width !default;
+
+
+$btn-active-box-shadow:       none !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-border-radius:                   $border-radius !default;
+$input-border-radius-xl:                $border-radius-xl !default;
+$input-border-radius-lg:                $border-radius-lg !default;
+$input-border-radius-sm:                $border-radius-sm !default;
+
+$input-bg:                              $white !default;
+$input-disabled-bg:                     $gray-200 !default;
+
+$input-muted-bg:                        #EDF0F5 !default;
+
+$input-alternative-box-shadow:          0 1px 3px rgba(50,50,93,.15), 0 1px 0 rgba(0,0,0,.02);
+$input-focus-alternative-box-shadow:    0 4px 6px rgba(50,50,93,.11),0 1px 3px rgba(0,0,0,.08);
+
+$input-color:                           $gray-600 !default;
+$input-border-color:                    #cad1d7 !default;
+$input-border-width:                    $input-btn-border-width !default;
+$input-box-shadow:                      none !default; // 0 1px 3px 0 $gray-400 !default;
+
+$input-focus-bg:                        $white !default;
+$input-focus-border-color:              rgba(50,151,211,.25);
+$input-focus-color:                     $input-color !default;
+$input-focus-width:                     0 !default;
+$input-focus-box-shadow:                none !default; //0 1px 3px 0 $gray-500 !default;
+
+$input-placeholder-color:               $gray-500 !default;
+$input-focus-placeholder-color:         $gray-500 !default;
+
+$input-height-border:                   $input-border-width * 2 !default;
+
+$input-transition:                      all .2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+
+
+// Input groups
+
+$input-group-addon-color:               $input-placeholder-color !default;
+$input-group-addon-bg:                  $input-bg !default;
+$input-group-addon-border-color:        $input-border-color !default;
+
+$input-group-addon-focus-color:               $input-focus-color !default;
+$input-group-addon-focus-bg:                  $input-focus-bg !default;
+$input-group-addon-focus-border-color:        $input-focus-border-color !default;
+
+
+// Custom forms
+
+$custom-control-gutter:                 1.75rem !default;
+$custom-control-spacer-x:               1rem !default;
+$custom-control-indicator-size:         1.25rem !default;
+
+$custom-control-indicator-bg:                   $input-bg !default;
+$custom-control-indicator-border-width:         1px !default;
+$custom-control-indicator-border-color:         $input-border-color !default;
+$custom-control-indicator-box-shadow:           none !default;
+
+$custom-control-indicator-focus-box-shadow:     $custom-control-indicator-box-shadow !default;
+
+$custom-control-indicator-hover-color:         $component-hover-color !default;
+$custom-control-indicator-hover-bg:            $component-hover-bg !default;
+$custom-control-indicator-hover-border-color:  $component-hover-border-color !default;
+
+$custom-control-indicator-active-color:         $component-active-color !default;
+$custom-control-indicator-active-bg:            $component-active-bg !default;
+$custom-control-indicator-active-border-color:  $component-active-border-color !default;
+$custom-control-indicator-active-box-shadow:    $custom-control-indicator-box-shadow !default;
+
+$custom-control-indicator-checked-color:        $component-active-color !default;
+$custom-control-indicator-checked-bg:           $component-active-bg !default;
+$custom-control-indicator-checked-border-color: $component-active-border-color !default;
+$custom-control-indicator-checked-box-shadow:   $custom-control-indicator-box-shadow !default;
+$custom-control-indicator-checked-disabled-bg:  rgba(theme-color("primary"), .5);
+
+$custom-control-indicator-disabled-bg:          $gray-200 !default;
+$custom-control-label-disabled-color:           $gray-600 !default;
+
+$custom-checkbox-indicator-border-radius:       $border-radius-sm !default;
+//$custom-checkbox-indicator-icon-checked:        str-replace(url("data:image/svg+xml !default;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23fff' 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-toggle-slider-bg:   #ddd !default;
+$custom-toggle-checked-bg:  theme-color("primary") !default;
+
+// Form validation
+
+$form-feedback-valid-bg:         lighten($success, 15%);
+$form-feedback-valid-color:      theme-color("success") !default;
+$form-feedback-invalid-bg:       lighten($warning, 15%);
+$form-feedback-invalid-color:    theme-color("warning") !default;
+
+
+// Allows for customizing button radius independently from global border radius
+
+$btn-border-radius:           $input-border-radius !default;
+$btn-border-radius-xl:        $input-border-radius-xl !default;
+$btn-border-radius-lg:        $input-border-radius-lg !default;
+$btn-border-radius-sm:        $input-border-radius !default;
+
+
+// No UI Slider
+
+$noui-target-bg:                  #eceeef !default;
+$noui-target-thickness:           5px !default;
+$noui-target-border-radius:       5px !default;
+$noui-target-border-color:        0 !default;
+$noui-target-box-shadow:          inset 0 1px 2px rgba(90,97,105,.1);
+
+$noui-slider-connect-bg:          $primary !default;
+$noui-slider-connect-disabled-bg: #b2b2b2 !default;
+
+$noui-handle-width:               15px !default;
+$noui-handle-bg:                  theme-color("primary") !default;
+$noui-handle-border:              0 !default;
+$noui-handle-border-radius:       100% !default;
+
+$noui-origin-border-radius:       2px !default;
+
+
+// Dropdown
+
+$dropdown-bg:                       $white !default;
+$dropdown-border-width:             0 !default;
+$dropdown-border-color:             rgba($black, .15);
+$dropdown-border-radius:            $border-radius-lg !default;
+$dropdown-box-shadow:               0 50px 100px rgba(50, 50, 93, .1), 0 15px 35px rgba(50, 50, 93, .15), 0 5px 15px rgba(0, 0, 0, .1);
+
+$dropdown-link-active-color:        $component-active-color !default;
+$dropdown-link-active-bg:           $component-active-bg !default;
+
+// Navs
+
+$nav-link-padding-y:                .25rem !default;
+$nav-link-padding-x:                .75rem !default;
+$nav-link-color:                    $gray-700 !default;
+$nav-link-disabled-color:           $gray-600 !default;
+
+$nav-pills-padding-y:               .75rem !default;
+$nav-pills-padding-x:               1rem !default;
+
+$nav-pills-space-x:                 1rem !default;
+
+$nav-pills-bg:                      $white;
+$nav-pills-border-width:            1px !default;
+$nav-pills-border-color:            theme-color("primary") !default;
+$nav-pills-border-radius:           $border-radius !default;
+
+$nav-pills-link-color:              theme-color("primary") !default;
+$nav-pills-link-hover-color:        darken(theme-color("primary"), 5%);
+$nav-pills-link-active-color:       color-yiq(theme-color("primary"));
+$nav-pills-link-active-bg:          theme-color("primary") !default;
+$nav-pills-box-shadow:              $btn-box-shadow !default;
+
+// Navbar
+
+$navbar-transition:                 all .15s linear !default;
+$navbar-padding-y:                  1rem !default;
+$navbar-padding-x:                  1rem !default;
+
+$navbar-nav-link-padding-x:         1rem !default;
+$navbar-nav-link-padding-y:         1rem !default;
+
+$navbar-nav-link-font-family:       $font-family-alt !default;
+$navbar-nav-link-font-size:         .9rem !default;
+$navbar-nav-link-font-weight:       400 !default;
+$navbar-nav-link-text-transform:    normal !default;
+$navbar-nav-link-letter-spacing:    0 !default;
+$navbar-nav-link-border-radius:     $border-radius !default;
+
+$navbar-dark-bg:                    transparent !default;
+$navbar-dark-hover-bg:              rgba(255, 255, 255, .1);
+$navbar-dark-active-bg:             rgba(255, 255, 255, .1);
+$navbar-dark-color:                 rgba($white, .95);
+$navbar-dark-hover-color:           rgba($white, .65);
+$navbar-dark-active-color:          rgba($white, .65);
+$navbar-dark-disabled-color:        rgba($white, .25);
+$navbar-dark-toggler-border-color:  transparent !default;
+
+$navbar-light-bg:                   transparent !default;
+$navbar-light-hover-bg:             rgba(0, 0, 0, .1);
+$navbar-light-active-bg:            rgba(0, 0, 0, .1);
+$navbar-light-border-color:         #f3f3f3;
+$navbar-light-color:                rgba($black, .5);
+$navbar-light-hover-color:          rgba($black, .7);
+$navbar-light-active-color:         rgba($black, .9);
+$navbar-light-disabled-color:       rgba($black, .3);
+//$navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml !default;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: transparent !default;
+
+// Alerts
+
+$alert-padding-y: 1rem !default;
+$alert-padding-x: 1.5rem !default;
+$alert-border-radius: $border-radius !default;
+
+$alert-bg-level: -2 !default;
+$alert-border-level: -2 !default;
+$alert-color-level: 0 !default;
+
+
+// List group
+
+$list-group-bg:                     $white !default;
+$list-group-border-color:           $border-color !default; //rgba($black, .125);
+$list-group-border-width:           $border-width !default;
+$list-group-border-radius:          $border-radius !default;
+
+$list-group-item-padding-y:         1rem !default;
+$list-group-item-padding-x:         1rem !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:    $list-group-action-color !default;
+$list-group-action-active-bg:       $gray-200 !default;
+
+
+// Close
+
+$close-font-size:                   $font-size-base * 1.5 !default;
+$close-font-weight:                 $font-weight-bold !default;
+$close-bg:                          transparent !default;
+$close-hover-bg:                    transparent !default;
+$close-color:                       rgba(0, 0, 0, .6);
+$close-hover-color:                 rgba(0, 0, 0, .9);
+$close-text-shadow:                 none !default;
+
+
+// Popovers
+
+$popover-font-size:                 $font-size-sm !default;
+$popover-bg:                        $white !default;
+$popover-max-width:                 276px !default;
+$popover-border-width:              1px !default;
+$popover-border-color:              rgba($black, .05);
+$popover-border-radius:             $border-radius-lg !default;
+$popover-box-shadow:                0px .5rem 2rem 0px rgba($black, .2);
+
+$popover-header-bg:                 $popover-bg !default;
+$popover-header-color:              $headings-color !default;
+$popover-header-padding-y:          .75rem !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:               1.5rem !default;
+$popover-arrow-height:              .75rem !default;
+$popover-arrow-color:               $popover-bg !default;
+
+$popover-arrow-outer-color:         transparent !default;
+
+
+// Badges
+
+$badge-font-size:                   66% !default;
+$badge-font-weight:                 $font-weight-bold !default;
+$badge-padding-y:                   .35rem !default;
+$badge-padding-x:                   .375rem !default;
+$badge-border-radius:               $border-radius !default;
+$badge-text-transfom:               uppercase;
+
+$badge-pill-padding-x:              .875em !default;
+$badge-pill-border-radius:          10rem !default;
+
+$badge-circle-size:                 2rem;
+
+// 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:                  $gray-600 !default;
+$pagination-bg:                     $white  !default;
+$pagination-border-width:           $border-width !default;
+$pagination-border-color:           $gray-300 !default;
+
+//$pagination-focus-box-shadow:       $btn-hover-box-shadow !default;
+
+$pagination-hover-color:            $gray-600 !default;
+$pagination-hover-bg:               $gray-300 !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-active-box-shadow:      $btn-hover-box-shadow !default;
+
+$pagination-disabled-color:         $gray-600 !default;
+$pagination-disabled-bg:            $white !default;
+$pagination-disabled-border-color:  $gray-300 !default;
+
+
+// Cards
+
+$card-spacer-y:                     1.25rem !default;
+$card-spacer-x:                     1.5rem !default;
+$card-border-width:                 $border-width !default;
+$card-border-radius:                $border-radius !default;
+$card-border-color:                 rgba($black, .05);
+$card-inner-border-radius:          calc(#{$card-border-radius} - #{$card-border-width});
+$card-cap-bg:                       $gray-100 !default;
+$card-bg:                           $white !default;
+
+$card-img-overlay-padding:          1.25rem !default;
+
+//$card-group-margin:                 ($grid-gutter-width / 2);
+//$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;
+
+// Modals
+
+$modal-inner-padding:               1.5rem !default;
+
+$modal-lg:                          800px !default;
+$modal-md:                          500px !default;
+$modal-sm:                          380px !default;
+
+$modal-title-line-height:           1.1;
+
+//$modal-title-line-height:           $shape-height-base !default;
+
+$modal-content-bg:               $white !default;
+$modal-content-border-color:     rgba($black, .2);
+$modal-content-border-width:     1px !default;
+$modal-content-border-radius:   $border-radius-lg !default;
+$modal-content-box-shadow-xs:    0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17);
+$modal-content-box-shadow-sm-up: 0 15px 35px rgba(50,50,93,.2), 0 5px 15px rgba(0,0,0,.17);
+
+$modal-backdrop-bg:           $black !default;
+$modal-backdrop-opacity:      .16 !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:        1.25rem !default;
+
+// Datepicker
+
+$datepicker-border-radius: $card-border-radius !default;
+$datepicker-dropdown-padding: 20px 22px !default;
+
+$datepicker-cell-transition: $transition-base !default;
+$datepicker-cell-hover-background: lighten($gray-400, 55%);
+$datepicker-cell-border-radius: 50% !default;
+$datepicker-cell-width: 36px !default;
+$datepicker-cell-height: 36px !default;
+
+$datepicker-disabled-cell-color: $gray-300 !default;
+$datepicker-disabled-old-new-color: $gray-500 !default;
+
+$datepicker-header-cell-border-radius: $border-radius !default;
+
+$datepicker-active-color: $white !default;
+$datepicker-active-background: theme-color("primary") !default;
+$datepicker-active-box-shadow:      none !default;
+
+$datepicker-range-background: theme-color("primary") !default;
+$datepicker-range-cell-focused-background: darken($datepicker-range-background, 5%);
+$datepicker-range-color: $white !default;
+$datepicker-range-highlighted-bg: $gray-200 !default;
+
+$datepicker-dropdown-border: lighten($gray-400, 40%);
+$datepicker-dropdown-bg: $white !default;
+$datepicker-highlighted-bg: $datepicker-active-background !default;
+
+
+// Footer
+
+$footer-link-font-size: .85rem !default;
+$footer-bg: theme-color("secondary") !default;
+$footer-color: $gray-600 !default;
+$footer-link-color: $gray-600 !default;
+$footer-link-hover-color: $gray-700 !default;
+$footer-heading-color: $gray-600 !default;
+$footer-heading-font-size: $font-size-sm !default;
--- a/assets/scss/argon-design-system/vendors.scss
+++ b/assets/scss/argon-design-system/vendors.scss
@@ -0,0 +1,7 @@
+
+@import "vendor/datetimepicker";
+@import "vendor/_bootstrap-datepicker";
+@import "vendor/nouislider";
+
+
+@import "vendor/headroom";