/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/*! modern-normalize | MIT License | https://github.com/sindresorhus/modern-normalize */
/*! KF Helpers */

/* Document
   ========================================================================== */

/**
 * Use a better box model (opinionated).
 */
*,
html {
    box-sizing: border-box;
}

*,
*::before,
*::after {
    box-sizing: inherit;
    outline: none;
}

/**
 * Use a more readable tab size (opinionated).
 */

:root {
    -moz-tab-size: 4;
    tab-size: 4;
}

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
    position: relative;
    min-height: 100%;
    font-size: 100%;
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

/* Sections
   ========================================================================== */

/**
 * 1. Set min height
 * 2. Remove the margin in all browsers
 * 3. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
 */

body {
    min-height: 100%;
    margin: 0;
    padding: 0;
    font-family: -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    'Apple Color Emoji',
    'Segoe UI Emoji',
    'Segoe UI Symbol';
    font-style: normal;
    line-height: 1.5em;
    letter-spacing: 0;
    -webkit-text-size-adjust: 100%;
    -ms-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased !important;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
    display: block;
}

/* Grouping content
   ========================================================================== */

/**
 * Add the correct height in Firefox.
 */

hr {
    height: 0;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
    overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
    background-color: transparent;
    text-decoration: none;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
    font-weight: bolder;
}

/**
 * 1. Improve consistency of default fonts in all browsers. (https://github.com/sindresorhus/modern-normalize/issues/3)
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp,
pre {
    font-family: SFMono-Regular, Consolas, 'Liberation Mono', Menlo, Courier, monospace; /* 1 */
    font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
    font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in all browsers.
 */

sub,
sup {
    position: relative;
    font-size: 75%;
    line-height: 0;
    vertical-align: baseline;
}

sub {
    bottom: -0.25em;
}

sup {
    top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
    border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
    margin: 0; /* 2 */
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
    overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
    text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type='button'],
[type='reset'],
[type='submit'] {
    -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type='button']::-moz-focus-inner,
[type='reset']::-moz-focus-inner,
[type='submit']::-moz-focus-inner {
    padding: 0;
    border-style: none;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type='button']:-moz-focusring,
[type='reset']:-moz-focusring,
[type='submit']:-moz-focusring {
    outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
    padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
    display: table; /* 1 */
    box-sizing: border-box; /* 1 */
    max-width: 100%; /* 1 */
    padding: 0; /* 3 */
    color: inherit; /* 2 */
    white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome and Firefox.
 */

progress {
    vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
    overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */

[type='number']::-webkit-inner-spin-button,
[type='number']::-webkit-outer-spin-button {
    height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type='search'] {
    outline-offset: -2px; /* 2 */
    -webkit-appearance: textfield; /* 1 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type='search']::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
    font: inherit; /* 2 */
    -webkit-appearance: button; /* 1 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
    display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
    display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
    display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden],
.hidden {
    display: none;
}


/* Krapan Framework Helpers
   ========================================================================== */

:root {
    --col-width: 6.25%;
    --col-gutter: 20px;
}

a,
button,
input,
.tr {
    transition: all .3s ease-in-out;
}

/**
 * Text helpers
 */

/**
 * Alignment
 */
.text-left {
    text-align: left
}

.text-center {
    text-align: center
}

.text-right {
    text-align: right
}

.text-justify {
    text-align: justify
}

.text-transparent {
    color: transparent
}

/**
 * Colors
 */

.text-black {
    color: #000
}

.text-white {
    color: #fff
}

/**
 * Transform
 */
.upper,
.uppercase,
.text-uppercase,
.text--uppercase {
    text-transform: uppercase;
}

.lowercase,
.text-lowercase,
.text--lowercase {
    text-transform: lowercase;
}

.capitalize,
.text-capitalize,
.text--capitalize {
    text-transform: capitalize;
}

.normal-case {
    text-transform: none
}

/**
 * Decoration
 */
.underline {
    text-decoration: underline
}

.line-through {
    text-decoration: line-through
}

.no-underline {
    text-decoration: none
}

/**
 * Weight
 */

.font-weight--thin,
.font-weight--100 {
    font-weight: 100;
}

.font-weight--ultralight,
.font-weight--200 {
    font-weight: 200;
}

.font-weight--light,
.font-weight--300 {
    font-weight: 300;
}

.font-weight--normal,
.font-weight--regular,
.font-weight--400 {
    font-weight: 400;
}

.font-weight--medium,
.font-weight--500 {
    font-weight: 500;
}

b,
strong,
.bold,
.font-bold,
.font-weight--bold,
.font-weight--700 {
    font-weight: 700;
}

.font-weight--heavy,
.font-weight--800 {
    font-weight: 800;
}

.font-weight--black,
.font-weight--900 {
    font-weight: 900;
}

/**
 * Style
 */

em,
i,
.font-italic,
.font-style--italic {
    font-style: italic;
}

.not-italic {
    font-style: normal
}


/**
 * Whitespace
 */
.whitespace-normal {
    white-space: normal
}

.whitespace-no-wrap {
    white-space: nowrap
}

.whitespace-pre {
    white-space: pre
}

.whitespace-pre-line {
    white-space: pre-line
}

.whitespace-pre-wrap {
    white-space: pre-wrap
}

/**
 * Break
 */

.break-normal {
    word-break: normal;
    overflow-wrap: normal;
}

.break-words {
    overflow-wrap: break-word
}

.break-all {
    word-break: break-all
}

.truncate {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/**
 * Headings
 */

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
    font-weight: 400;
}

/**
 * Position
 */

.abs,
.absolute,
.position--absolute {
    position: absolute;
}

.fixed,
.position--fixed {
    position: fixed;
}

.rel,
.relative,
.position--relative {
    position: relative;
}

.sticky,
.position--sticky {
    position: -webkit-sticky; /* Safari */
    position: sticky;
}

/**
 * Overflow
 */

.overflow--auto {
    overflow: auto;
}

.overflow--hidden {
    overflow: hidden;
}

.overflow--scroll {
    overflow: scroll;
}

.overflow--visible {
    overflow: visible;
}

/**
 * Display
 */

.tbl,
.display--table {
    display: table;
}

.display--block {
    display: block;
}

.display--inline-block {
    display: inline-block;
}

.display--inline {
    display: inline;
}

.flex,
.display--flex {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.display--inline-flex {
    display: inline-flex;
}

.display--grid {
    display: grid;
}

@supports not (display: grid) {
    .display--grid {
        display: table;
        width: 100%;
    }
}

/*
 * Absolute centering
 */

.cY {
    top: 50%;
    transform: translateY(-50%);
}

.cX {
    left: 50%;
    transform: translateX(-50%);
}

.cXY {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/*
 * Border
 */

.border-solid {
    border-style: solid
}

.border-dashed {
    border-style: dashed
}

.border-dotted {
    border-style: dotted
}

.border-none {
    border-style: none
}

.border-0 {
    border-width: 0
}

.border {
    border-width: 1px
}

.border-2 {
    border-width: 2px
}

.border-4 {
    border-width: 4px
}

.border-8 {
    border-width: 8px
}

.border-t-0 {
    border-top-width: 0
}

.border-r-0 {
    border-right-width: 0
}

.border-b-0 {
    border-bottom-width: 0
}

.border-l-0 {
    border-left-width: 0
}

.border-t {
    border-top-width: 1px
}

.border-r {
    border-right-width: 1px
}

.border-b {
    border-bottom-width: 1px
}

.border-l {
    border-left-width: 1px
}

.border-t-2 {
    border-top-width: 2px
}

.border-r-2 {
    border-right-width: 2px
}

.border-b-2 {
    border-bottom-width: 2px
}

.border-l-2 {
    border-left-width: 2px
}

.border-t-4 {
    border-top-width: 4px
}

.border-r-4 {
    border-right-width: 4px
}

.border-b-4 {
    border-bottom-width: 4px
}

.border-l-4 {
    border-left-width: 4px
}

.border-t-8 {
    border-top-width: 8px
}

.border-r-8 {
    border-right-width: 8px
}

.border-b-8 {
    border-bottom-width: 8px
}

.border-l-8 {
    border-left-width: 8px
}


/*
 * Radius
 */

.radius-none {
    border-radius: 0;
}

.radius-4 {
    border-radius: 4px;
}

.radius-8 {
    border-radius: 8px;
}

.radius-10 {
    border-radius: 10px;
}

.radius-20 {
    border-radius: 20px;
}

.radius-full {
    border-radius: 9999px;
}


/*
 * Background
 * ------------------
 */
/*
 * Background position
 * ------------------
 */

.bg-bottom {
    background-position: bottom
}

.bg-center {
    background-position: center
}

.bg-left {
    background-position: left
}

.bg-left-bottom {
    background-position: left bottom
}

.bg-left-top {
    background-position: left top
}

.bg-right {
    background-position: right
}

.bg-right-bottom {
    background-position: right bottom
}

.bg-right-top {
    background-position: right top
}

.bg-top {
    background-position: top
}

/*
 * Background repeat
 * ------------------
 */
.bg-repeat {
    background-repeat: repeat
}

.bg-no-repeat {
    background-repeat: no-repeat
}

.bg-repeat-x {
    background-repeat: repeat-x
}

.bg-repeat-y {
    background-repeat: repeat-y
}

.bg-repeat-round {
    background-repeat: round
}

.bg-repeat-space {
    background-repeat: space
}

/*
 * Background size
 * ------------------
 */
.bg-auto {
    background-size: auto
}

.bg-cover {
    background-size: cover
}

.bg-contain {
    background-size: contain
}


/*
 * shadow
 */
.shadow-lg {
    box-shadow: 0 15px 50px rgba(0, 0, 0, .1);
}

.shadow-md {
    box-shadow: 0 10px 30px rgba(0, 0, 0, .1);
}

.shadow-sm {
    box-shadow: 0 5px 20px rgba(0, 0, 0, .1);
}

/**
 * Width and height
 */

.min-w-0 {
    min-width: 0
}

.min-w-1 {
    min-width: 1px
}

.min-w-full {
    min-width: 100%
}

.max-w-0 {
    max-width: 0
}

.max-w-full {
    max-width: 100%
}

.min-h-0 {
    min-height: 0
}

.min-h-1 {
    min-height: 1px
}

.min-h-full {
    min-height: 100%
}

.max-h-0 {
    max-height: 0
}

.max-h-full {
    max-height: 100%
}

.min-h-screen {
    min-height: 100vh
}

.w-full {
    width: 100%
}

.w-screen {
    width: 100vw
}

/**
 * z-index
 */

.z-0 {
    z-index: 0
}

.z-10 {
    z-index: 10
}

.z-20 {
    z-index: 20
}

.z-30 {
    z-index: 30
}

.z-40 {
    z-index: 40
}

.z-50 {
    z-index: 50
}

.z-auto {
    z-index: auto
}


/**
 * Object-fit
 */

.object-contain {
    -o-object-fit: contain;
    object-fit: contain
}

.object-cover {
    -o-object-fit: cover;
    object-fit: cover
}

.object-fill {
    -o-object-fit: fill;
    object-fit: fill
}

.object-none {
    -o-object-fit: none;
    object-fit: none
}

.object-scale-down {
    -o-object-fit: scale-down;
    object-fit: scale-down
}

.object-bottom {
    -o-object-position: bottom;
    object-position: bottom
}

.object-center {
    -o-object-position: center;
    object-position: center
}

.object-left {
    -o-object-position: left;
    object-position: left
}

.object-left-bottom {
    -o-object-position: left bottom;
    object-position: left bottom
}

.object-left-top {
    -o-object-position: left top;
    object-position: left top
}

.object-right {
    -o-object-position: right;
    object-position: right
}

.object-right-bottom {
    -o-object-position: right bottom;
    object-position: right bottom
}

.object-right-top {
    -o-object-position: right top;
    object-position: right top
}

.object-top {
    -o-object-position: top;
    object-position: top
}


/**
 * Pointer events
 */

.pointer-events-none {
    pointer-events: none
}

.pointer-events-auto {
    pointer-events: auto
}


/**
 * SVG currentColor
 */
.fill-current {
    fill: currentColor
}

.stroke-current {
    stroke: currentColor
}

p:empty {
    display: none;
}


/**
 * Code
 */

code, kbd, pre, samp {
    font-family: Menlo, Monaco, Consolas, "Courier New", monospace;
}

pre {
    display: block;
    margin: 0 0 10px;
    padding: 9px;
    color: rgb(51, 51, 51);
    background-color: rgb(245, 245, 245);
    border: 1px solid rgb(204, 204, 204);
    border-radius: 4px;
    border-image: initial;
    font-size: 13px;
    line-height: 1.42857;
    word-wrap: break-word;
    word-break: break-all;
    overflow: auto;
}

/*
 * Grayscale
 */

.grayscale {
    filter: grayscale(1);
    -webkit-filter: grayscale(1);
    -moz-filter: grayscale(1);
    -o-filter: grayscale(1);
}

.grayscale:hover {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    -moz-filter: grayscale(0);
    -o-filter: grayscale(0);
}


/*
 * Vendor
 * b-lazy.js
 */

.b-lazy {
    opacity: 0;
    transition: opacity 500ms ease-in-out;
}

.b-lazy.b-error,
.b-lazy.b-loaded {
    opacity: 1;
}

/**
 * Buttons
 */

.btn {
    display: inline-block;
    padding: .375rem .75rem;
    color: #000000;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: .25rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    -moz-user-select: none;
    -ms-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}


/*
 * Containers
 * ------------------
 */

.container,
.container--lg,
.container--xl,
.container--xxl,
.container--full {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}

.container--full {
    padding: 0 80px;
}

@media (max-width: 991px) {
    .container {
        padding: 0 20px;
    }

    .container--lg,
    .container--xl,
    .container--xxl,
    .container--full {
        padding: 0 20px;
    }
}

@media (min-width: 992px) and (max-width: 1400px) {
    .container,
    .container--full {
        padding: 0 40px;
    }
}

@media (min-width: 1400px) {
    .container {
        max-width: 1200px;
    }
}

@media (min-width: 1480px) {
    .container--xl {
        max-width: 1440px;
    }
}

@media (min-width: 1680px) {
    .container--xxl {
        max-width: 1600px;
    }
}

@media (max-width: 767px) {
    .container,
    .container--lg,
    .container--xl,
    .container--xxl {
        padding: 0 var(--col-gutter--sm);
    }
}


/*
 * Columns
 * ------------------
 */

:root {
    --col-width: 6.25%;
    --col-gutter: 10px;
    --col-gutter--sm: 15px;
}

.row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}


[class^="col-"], [class*="col-"] {
    position: relative;
    width: 100%;
}

@media (min-width: 768px) {
    .row {
        margin-right: calc(var(--col-gutter) * -1);
        margin-left: calc(var(--col-gutter) * -1);
    }

    [class^="col-"], [class*="col-"] {
        padding-right: var(--col-gutter);
        padding-left: var(--col-gutter);
    }
}

@media (max-width: 767px) {
    .row {
        margin-right: calc(var(--col-gutter--sm) * -1);
        margin-left: calc(var(--col-gutter--sm) * -1);
    }

    [class^="col-"], [class*="col-"] {
        padding-right: var(--col-gutter--sm);
        padding-left: var(--col-gutter--sm);
    }
}


.col-1 {
    flex: 0 0 var(--col-width);
    max-width: var(--col-width);
}

.col-2 {
    flex: 0 0 calc(2 * var(--col-width));
    max-width: calc(2 * var(--col-width));
}

.col-3 {
    flex: 0 0 calc(3 * var(--col-width));
    max-width: calc(3 * var(--col-width));
}

.col-4 {
    flex: 0 0 25%;
    max-width: 25%;
}

.col-5 {
    flex: 0 0 calc(5 * var(--col-width));
    max-width: calc(5 * var(--col-width));
}

.col-6 {
    flex: 0 0 calc(6 * var(--col-width));
    max-width: calc(6 * var(--col-width));
}

.col-7 {
    flex: 0 0 calc(7 * var(--col-width));
    max-width: calc(7 * var(--col-width));
}

.col-8 {
    flex: 0 0 50%;
    max-width: 50%;
}

.col-9 {
    flex: 0 0 calc(9 * var(--col-width));
    max-width: calc(9 * var(--col-width));
}

.col-10 {
    flex: 0 0 calc(10 * var(--col-width));
    max-width: calc(10 * var(--col-width));
}

.col-11 {
    flex: 0 0 calc(11 * var(--col-width));
    max-width: calc(11 * var(--col-width));
}

.col-12 {
    flex: 0 0 75%;
    max-width: 75%;
}

.col-13 {
    flex: 0 0 calc(13 * var(--col-width));
    max-width: calc(13 * var(--col-width));
}

.col-14 {
    flex: 0 0 calc(14 * var(--col-width));
    max-width: calc(14 * var(--col-width));
}

.col-15 {
    flex: 0 0 calc(15 * var(--col-width));
    max-width: calc(15 * var(--col-width));
}

.col-16 {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .col-md-1 {
        flex: 0 0 var(--col-width);
        max-width: var(--col-width);
    }

    .col-md-2 {
        flex: 0 0 calc(2 * var(--col-width));
        max-width: calc(2 * var(--col-width));
    }

    .col-md-3 {
        flex: 0 0 calc(3 * var(--col-width));
        max-width: calc(3 * var(--col-width));
    }

    .col-md-4 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-md-5 {
        flex: 0 0 calc(5 * var(--col-width));
        max-width: calc(5 * var(--col-width));
    }

    .col-md-6 {
        flex: 0 0 calc(6 * var(--col-width));
        max-width: calc(6 * var(--col-width));
    }

    .col-md-7 {
        flex: 0 0 calc(7 * var(--col-width));
        max-width: calc(7 * var(--col-width));
    }

    .col-md-8 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-md-9 {
        flex: 0 0 calc(9 * var(--col-width));
        max-width: calc(9 * var(--col-width));
    }

    .col-md-10 {
        flex: 0 0 calc(10 * var(--col-width));
        max-width: calc(10 * var(--col-width));
    }

    .col-md-11 {
        flex: 0 0 calc(11 * var(--col-width));
        max-width: calc(11 * var(--col-width));
    }

    .col-md-12 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-md-13 {
        flex: 0 0 calc(13 * var(--col-width));
        max-width: calc(13 * var(--col-width));
    }

    .col-md-14 {
        flex: 0 0 calc(14 * var(--col-width));
        max-width: calc(14 * var(--col-width));
    }

    .col-md-15 {
        flex: 0 0 calc(15 * var(--col-width));
        max-width: calc(15 * var(--col-width));
    }

    .col-md-16 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .col-sm-1 {
        flex: 0 0 var(--col-width);
        max-width: var(--col-width);
    }

    .col-sm-2 {
        flex: 0 0 calc(2 * var(--col-width));
        max-width: calc(2 * var(--col-width));
    }

    .col-sm-3 {
        flex: 0 0 calc(3 * var(--col-width));
    }

    .col-sm-4 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-sm-5 {
        flex: 0 0 calc(5 * var(--col-width));
        max-width: calc(5 * var(--col-width));
    }

    .col-sm-6 {
        flex: 0 0 calc(6 * var(--col-width));
        max-width: calc(6 * var(--col-width));
    }

    .col-sm-7 {
        flex: 0 0 calc(7 * var(--col-width));
        max-width: calc(7 * var(--col-width));
    }

    .col-sm-8 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-sm-9 {
        flex: 0 0 calc(7 * var(--col-width));
        max-width: calc(7 * var(--col-width));
    }

    .col-sm-10 {
        flex: 0 0 calc(10 * var(--col-width));
        max-width: calc(10 * var(--col-width));
    }

    .col-sm-11 {
        flex: 0 0 calc(11 * var(--col-width));
        max-width: calc(11 * var(--col-width));
    }

    .col-sm-12 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-sm-13 {
        flex: 0 0 calc(13 * var(--col-width));
        max-width: calc(13 * var(--col-width));
    }

    .col-sm-14 {
        flex: 0 0 calc(14 * var(--col-width));
        max-width: calc(14 * var(--col-width));
    }

    .col-sm-15 {
        flex: 0 0 calc(15 * var(--col-width));
        max-width: calc(15 * var(--col-width));
    }

    .col-sm-16 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (max-width: 767px) {

    .col-xs-1 {
        flex: 0 0 var(--col-width);
        max-width: var(--col-width);
    }

    .col-xs-2 {
        flex: 0 0 calc(2 * var(--col-width));
        max-width: calc(2 * var(--col-width));
    }

    .col-xs-3 {
        flex: 0 0 calc(3 * var(--col-width));
    }

    .col-xs-4 {
        flex: 0 0 25%;
        max-width: 25%;
    }

    .col-xs-5 {
        flex: 0 0 calc(5 * var(--col-width));
        max-width: calc(5 * var(--col-width));
    }

    .col-xs-6 {
        flex: 0 0 calc(6 * var(--col-width));
        max-width: calc(6 * var(--col-width));
    }

    .col-xs-7 {
        flex: 0 0 calc(7 * var(--col-width));
        max-width: calc(7 * var(--col-width));
    }

    .col-xs-8 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .col-xs-9 {
        flex: 0 0 calc(7 * var(--col-width));
        max-width: calc(7 * var(--col-width));
    }

    .col-xs-10 {
        flex: 0 0 calc(10 * var(--col-width));
        max-width: calc(10 * var(--col-width));
    }

    .col-xs-11 {
        flex: 0 0 calc(11 * var(--col-width));
        max-width: calc(11 * var(--col-width));
    }

    .col-xs-12 {
        flex: 0 0 75%;
        max-width: 75%;
    }

    .col-xs-13 {
        flex: 0 0 calc(13 * var(--col-width));
        max-width: calc(13 * var(--col-width));
    }

    .col-xs-14 {
        flex: 0 0 calc(14 * var(--col-width));
        max-width: calc(14 * var(--col-width));
    }

    .col-xs-15 {
        flex: 0 0 calc(15 * var(--col-width));
        max-width: calc(15 * var(--col-width));
    }

    .col-xs-16 {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/*
 * Offset
 * ------------------
 */

.offset-1 {
    padding-left: var(--col-width);
}

.offset-2 {
    padding-left: calc(2 * var(--col-width));
}

.offset-3 {
    padding-left: calc(3 * var(--col-width));
}

.offset-4 {
    padding-left: calc(4 * var(--col-width));
}

.offset-5 {
    padding-left: calc(5 * var(--col-width));
}

.offset-6 {
    padding-left: calc(6 * var(--col-width));
}

.offset-7 {
    padding-left: calc(7 * var(--col-width));
}

.offset-8 {
    padding-left: calc(8 * var(--col-width));
}

.offset-9 {
    padding-left: calc(9 * var(--col-width));
}

.offset-10 {
    padding-left: calc(10 * var(--col-width));
}

.offset-11 {
    padding-left: calc(11 * var(--col-width));
}

.offset-12 {
    padding-left: calc(12 * var(--col-width));
}

.offset-13 {
    padding-left: calc(13 * var(--col-width));
}

.offset-14 {
    padding-left: calc(14 * var(--col-width));
}

.offset-15 {
    padding-left: calc(15 * var(--col-width));
}

@media (min-width: 992px) and (max-width: 1199px) {
    .offset-md-0 {
        padding-left: 0;
    }

    .offset-md-1 {
        padding-left: var(--col-width);
    }

    .offset-md-2 {
        padding-left: calc(2 * var(--col-width));
    }

    .offset-md-3 {
        padding-left: calc(3 * var(--col-width));
    }

    .offset-md-4 {
        padding-left: 25%;
    }

    .offset-md-5 {
        padding-left: calc(5 * var(--col-width));
    }

    .offset-md-6 {
        padding-left: calc(6 * var(--col-width));
    }

    .offset-md-7 {
        padding-left: calc(7 * var(--col-width));
    }

    .offset-md-8 {
        padding-left: 50%;
    }

    .offset-md-9 {
        padding-left: calc(9 * var(--col-width));
    }

    .offset-md-10 {
        padding-left: calc(10 * var(--col-width));
    }

    .offset-md-11 {
        padding-left: calc(11 * var(--col-width));
    }

    .offset-md-12 {
        padding-left: 75%;
    }

    .offset-md-13 {
        padding-left: calc(13 * var(--col-width));
    }

    .offset-md-14 {
        padding-left: calc(14 * var(--col-width));
    }

    .offset-md-15 {
        padding-left: calc(15 * var(--col-width));
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .offset-sm-0 {
        padding-left: 0;
    }

    .offset-sm-1 {
        padding-left: var(--col-width);
    }

    .offset-sm-2 {
        padding-left: calc(2 * var(--col-width));
    }

    .offset-sm-3 {
        padding-left: calc(3 * var(--col-width));
    }

    .offset-sm-4 {
        padding-left: 25%;
    }

    .offset-sm-5 {
        padding-left: calc(5 * var(--col-width));
    }

    .offset-sm-6 {
        padding-left: calc(6 * var(--col-width));
    }

    .offset-sm-7 {
        padding-left: calc(7 * var(--col-width));
    }

    .offset-sm-8 {
        padding-left: 50%;
    }

    .offset-sm-9 {
        padding-left: calc(9 * var(--col-width));
    }

    .offset-sm-10 {
        padding-left: calc(10 * var(--col-width));
    }

    .offset-sm-11 {
        padding-left: calc(11 * var(--col-width));
    }

    .offset-sm-12 {
        padding-left: 75%;
    }

    .offset-sm-13 {
        padding-left: calc(13 * var(--col-width));
    }

    .offset-sm-14 {
        padding-left: calc(14 * var(--col-width));
    }

    .offset-sm-15 {
        padding-left: calc(15 * var(--col-width));
    }
}

@media (max-width: 767px) {
    [class^="offset-"], [class*="offset-"] {
        padding-left: var(--col-gutter--sm);
    }
}

/*
 * Flex alignment
 * ------------------
 */

.flex-row {
    flex-direction: row;
}

.flex-column {
    flex-direction: column;
}

.flex-row-reverse {
    flex-direction: row-reverse;
}

.flex-column-reverse {
    flex-direction: column-reverse;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.justify-content-start {
    justify-content: flex-start
}

.justify-content-end {
    justify-content: flex-end
}

.justify-content-center {
    justify-content: center
}

.justify-content-between {
    justify-content: space-between
}

.justify-content-around {
    justify-content: space-around
}

.align-item-start {
    align-items: flex-start;
}

.align-item-end {
    align-items: flex-end;
}

.align-item-center {
    align-items: center;
}

.align-item-baseline {
    align-items: baseline;
}

.align-item-stretch {
    align-items: stretch;
}

.align-content-start {
    align-content: flex-start;
}

.align-content-end {
    align-content: flex-end;
}

.align-content-center {
    align-content: center
}

.align-content-between {
    align-content: space-between;
}

.align-content-around {
    align-content: space-around;
}

.align-content-stretch {
    align-content: stretch;
}

.align-self-auto {
    align-self: auto;
}

.align-self-start {
    align-self: flex-start;
}

.align-self-end {
    align-self: flex-end;
}

.align-self-center {
    align-self: center;
}

.align-self-baseline {
    align-self: baseline;
}

.align-self-stretch {
    align-self: stretch;
}

@media (min-width: 992px) and (max-width: 1199px) {
    .flex-md-row {
        flex-direction: row;
    }

    .flex-md-column {
        flex-direction: column;
    }

    .flex-md-row-reverse {
        flex-direction: row-reverse;
    }

    .flex-md-column-reverse {
        flex-direction: column-reverse;
    }

    .flex-md-wrap {
        flex-wrap: wrap;
    }

    .flex-md-nowrap {
        flex-wrap: nowrap;
    }

    .justify-content-md-start {
        justify-content: flex-start
    }

    .justify-content-md-end {
        justify-content: flex-end
    }

    .justify-content-md-center {
        justify-content: center
    }

    .justify-content-md-between {
        justify-content: space-between
    }

    .justify-content-md-around {
        justify-content: space-around
    }

    .align-item-md-start {
        align-items: flex-start;
    }

    .align-item-md-end {
        align-items: flex-end;
    }

    .align-item-md-center {
        align-items: center;
    }

    .align-item-md-baseline {
        align-items: baseline;
    }

    .align-item-md-stretch {
        align-items: stretch;
    }

    .align-content-md-start {
        align-content: flex-start;
    }

    .align-content-md-end {
        align-content: flex-end;
    }

    .align-content-md-center {
        align-content: center
    }

    .align-content-md-between {
        align-content: space-between;
    }

    .align-content-md-around {
        align-content: space-around;
    }

    .align-content-md-stretch {
        align-content: stretch;
    }

    .align-self-md-auto {
        align-self: auto;
    }

    .align-self-md-start {
        align-self: flex-start;
    }

    .align-self-md-end {
        align-self: flex-end;
    }

    .align-self-md-center {
        align-self: center;
    }

    .align-self-md-baseline {
        align-self: baseline;
    }

    .align-self-md-stretch {
        align-self: stretch;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .flex-sm-row {
        flex-direction: row;
    }

    .flex-sm-column {
        flex-direction: column;
    }

    .flex-sm-row-reverse {
        flex-direction: row-reverse;
    }

    .flex-sm-column-reverse {
        flex-direction: column-reverse;
    }

    .flex-sm-wrap {
        flex-wrap: wrap;
    }

    .flex-sm-nowrap {
        flex-wrap: nowrap;
    }

    .justify-content-sm-start {
        justify-content: flex-start
    }

    .justify-content-sm-end {
        justify-content: flex-end
    }

    .justify-content-sm-center {
        justify-content: center
    }

    .justify-content-sm-between {
        justify-content: space-between
    }

    .justify-content-sm-around {
        justify-content: space-around
    }

    .align-item-sm-start {
        align-items: flex-start;
    }

    .align-item-sm-end {
        align-items: flex-end;
    }

    .align-item-sm-center {
        align-items: center;
    }

    .align-item-sm-baseline {
        align-items: baseline;
    }

    .align-item-sm-stretch {
        align-items: stretch;
    }

    .align-content-sm-start {
        align-content: flex-start;
    }

    .align-content-sm-end {
        align-content: flex-end;
    }

    .align-content-sm-center {
        align-content: center
    }

    .align-content-sm-between {
        align-content: space-between;
    }

    .align-content-sm-around {
        align-content: space-around;
    }

    .align-content-sm-stretch {
        align-content: stretch;
    }

    .align-self-sm-auto {
        align-self: auto;
    }

    .align-self-sm-start {
        align-self: flex-start;
    }

    .align-self-sm-end {
        align-self: flex-end;
    }

    .align-self-sm-center {
        align-self: center;
    }

    .align-self-sm-baseline {
        align-self: baseline;
    }

    .align-self-sm-stretch {
        align-self: stretch;
    }
}

@media (max-width: 767px) {
    .flex-xs-row {
        flex-direction: row;
    }

    .flex-xs-column {
        flex-direction: column;
    }

    .flex-xs-row-reverse {
        flex-direction: row-reverse;
    }

    .flex-xs-column-reverse {
        flex-direction: column-reverse;
    }

    .flex-xs-wrap {
        flex-wrap: wrap;
    }

    .flex-xs-nowrap {
        flex-wrap: nowrap;
    }

    .justify-content-xs-start {
        justify-content: flex-start
    }

    .justify-content-xs-end {
        justify-content: flex-end
    }

    .justify-content-xs-center {
        justify-content: center
    }

    .justify-content-xs-between {
        justify-content: space-between
    }

    .justify-content-xs-around {
        justify-content: space-around
    }

    .align-item-xs-start {
        align-items: flex-start;
    }

    .align-item-xs-end {
        align-items: flex-end;
    }

    .align-item-xs-center {
        align-items: center;
    }

    .align-item-xs-baseline {
        align-items: baseline;
    }

    .align-item-xs-stretch {
        align-items: stretch;
    }

    .align-content-xs-start {
        align-content: flex-start;
    }

    .align-content-xs-end {
        align-content: flex-end;
    }

    .align-content-xs-center {
        align-content: center
    }

    .align-content-xs-between {
        align-content: space-between;
    }

    .align-content-xs-around {
        align-content: space-around;
    }

    .align-content-xs-stretch {
        align-content: stretch;
    }

    .align-self-xs-auto {
        align-self: auto;
    }

    .align-self-xs-start {
        align-self: flex-start;
    }

    .align-self-xs-end {
        align-self: flex-end;
    }

    .align-self-xs-center {
        align-self: center;
    }

    .align-self-xs-baseline {
        align-self: baseline;
    }

    .align-self-xs-stretch {
        align-self: stretch;
    }
}


/*
 * Order
 * ------------------
 */
.order-0 {
    order: 0
}

.order-1 {
    order: 1
}

.order-2 {
    order: 2
}

.order-3 {
    order: 3
}

.order-4 {
    order: 4
}

.order-5 {
    order: 5
}

.order-6 {
    order: 6
}

.order-7 {
    order: 7
}

.order-8 {
    order: 8
}

.order-9 {
    order: 9
}

.order-10 {
    order: 10
}

.order-11 {
    order: 11
}

.order-12 {
    order: 12
}

.order-12 {
    order: 13
}

.order-13 {
    order: 14
}

.order-15 {
    order: 15
}

.order-16 {
    order: 16
}

@media (min-width: 992px) and (max-width: 1199px) {
    .order-md-0 {
        order: 0
    }

    .order-md-1 {
        order: 1
    }

    .order-md-2 {
        order: 2
    }

    .order-md-3 {
        order: 3
    }

    .order-md-4 {
        order: 4
    }

    .order-md-5 {
        order: 5
    }

    .order-md-6 {
        order: 6
    }

    .order-md-7 {
        order: 7
    }

    .order-md-8 {
        order: 8
    }

    .order-md-9 {
        order: 9
    }

    .order-md-10 {
        order: 10
    }

    .order-md-11 {
        order: 11
    }

    .order-md-12 {
        order: 12
    }

    .order-md-12 {
        order: 13
    }

    .order-md-13 {
        order: 14
    }

    .order-md-15 {
        order: 15
    }

    .order-md-16 {
        order: 16
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .order-sm-0 {
        order: 0
    }

    .order-sm-1 {
        order: 1
    }

    .order-sm-2 {
        order: 2
    }

    .order-sm-3 {
        order: 3
    }

    .order-sm-4 {
        order: 4
    }

    .order-sm-5 {
        order: 5
    }

    .order-sm-6 {
        order: 6
    }

    .order-sm-7 {
        order: 7
    }

    .order-sm-8 {
        order: 8
    }

    .order-sm-9 {
        order: 9
    }

    .order-sm-10 {
        order: 10
    }

    .order-sm-11 {
        order: 11
    }

    .order-sm-12 {
        order: 12
    }

    .order-sm-12 {
        order: 13
    }

    .order-sm-13 {
        order: 14
    }

    .order-sm-15 {
        order: 15
    }

    .order-sm-16 {
        order: 16
    }
}

@media (max-width: 767px) {
    .order-xs-0 {
        order: 0
    }

    .order-xs-1 {
        order: 1
    }

    .order-xs-2 {
        order: 2
    }

    .order-xs-3 {
        order: 3
    }

    .order-xs-4 {
        order: 4
    }

    .order-xs-5 {
        order: 5
    }

    .order-xs-6 {
        order: 6
    }

    .order-xs-7 {
        order: 7
    }

    .order-xs-8 {
        order: 8
    }

    .order-xs-9 {
        order: 9
    }

    .order-xs-10 {
        order: 10
    }

    .order-xs-11 {
        order: 11
    }

    .order-xs-12 {
        order: 12
    }

    .order-xs-12 {
        order: 13
    }

    .order-xs-13 {
        order: 14
    }

    .order-xs-15 {
        order: 15
    }

    .order-xs-16 {
        order: 16
    }
}

.mt-0 {
    margin-top: 0
}

.mt-4 {
    margin-top: 4px
}

.mt-5 {
    margin-top: 5px
}

.mt-8 {
    margin-top: 8px
}

.mt-10 {
    margin-top: 10px
}

.mt-12 {
    margin-top: 12px
}

.mt-15 {
    margin-top: 15px
}

.mt-16 {
    margin-top: 16px
}

.mt-20 {
    margin-top: 20px
}

.mt-24 {
    margin-top: 24px
}

.mt-25 {
    margin-top: 25px
}

.mt-40 {
    margin-top: 40px
}

.mt-50 {
    margin-top: 50px
}

/* Responsive utilities */
.visible-xs,
.visible-sm,
.visible-md,
.visible-lg {
    display: none !important;
}

.visible-xs-block,
.visible-xs-inline,
.visible-xs-inline-block,
.visible-sm-block,
.visible-sm-inline,
.visible-sm-inline-block,
.visible-md-block,
.visible-md-inline,
.visible-md-inline-block,
.visible-lg-block,
.visible-lg-inline,
.visible-lg-inline-block {
    display: none !important;
}

@media (max-width: 767px) {
    .visible-xs {
        display: block !important;
    }

    table.visible-xs {
        display: table !important;
    }

    tr.visible-xs {
        display: table-row !important;
    }

    th.visible-xs,
    td.visible-xs {
        display: table-cell !important;
    }
}

@media (max-width: 767px) {
    .visible-xs-block {
        display: block !important;
    }
}

@media (max-width: 767px) {
    .visible-xs-inline {
        display: inline !important;
    }
}

@media (max-width: 767px) {
    .visible-xs-inline-block {
        display: inline-block !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm {
        display: block !important;
    }

    table.visible-sm {
        display: table !important;
    }

    tr.visible-sm {
        display: table-row !important;
    }

    th.visible-sm,
    td.visible-sm {
        display: table-cell !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-block {
        display: block !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-inline {
        display: inline !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .visible-sm-inline-block {
        display: inline-block !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md {
        display: block !important;
    }

    table.visible-md {
        display: table !important;
    }

    tr.visible-md {
        display: table-row !important;
    }

    th.visible-md,
    td.visible-md {
        display: table-cell !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md-block {
        display: block !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md-inline {
        display: inline !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .visible-md-inline-block {
        display: inline-block !important;
    }
}

@media (min-width: 1200px) {
    .visible-lg {
        display: block !important;
    }

    table.visible-lg {
        display: table !important;
    }

    tr.visible-lg {
        display: table-row !important;
    }

    th.visible-lg,
    td.visible-lg {
        display: table-cell !important;
    }
}

@media (min-width: 1200px) {
    .visible-lg-block {
        display: block !important;
    }
}

@media (min-width: 1200px) {
    .visible-lg-inline {
        display: inline !important;
    }
}

@media (min-width: 1200px) {
    .visible-lg-inline-block {
        display: inline-block !important;
    }
}

@media (max-width: 767px) {
    .hidden-xs {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .hidden-sm {
        display: none !important;
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    .hidden-md {
        display: none !important;
    }
}

@media (min-width: 1200px) {
    .hidden-lg {
        display: none !important;
    }
}

/*
 * Feather Icons
 * ------------------
 */
.feather {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}


/*
 * FIX
 * iphone inputs font size
 * ------------------
 */
@media screen and (device-aspect-ratio: 2/3) {
       select, textarea, input[type="text"], input[type="password"],
       input[type="datetime"], input[type="datetime-local"],
       input[type="date"], input[type="month"], input[type="time"],
       input[type="week"], input[type="number"], input[type="email"],
       input[type="url"], input[type="search"] {
        font-size: 16px !important;
    }
}

/* iPhone 5, 5C, 5S, iPod Touch 5g */
@media screen and (device-aspect-ratio: 40/71) {
       select, textarea, input[type="text"], input[type="password"],
       input[type="datetime"], input[type="datetime-local"],
       input[type="date"], input[type="month"], input[type="time"],
       input[type="week"], input[type="number"], input[type="email"],
       input[type="url"], input[type="search"] {
        font-size: 16px !important;
    }
}

/* iPhone 6, iPhone 6s, iPhone 7 portrait/landscape */
@media screen and (device-aspect-ratio: 375/667) {
       select, textarea, input[type="text"], input[type="password"],
       input[type="datetime"], input[type="datetime-local"],
       input[type="date"], input[type="month"], input[type="time"],
       input[type="week"], input[type="number"], input[type="email"],
       input[type="url"], input[type="search"] {
        font-size: 16px !important;
    }
}

/* iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus portrait/landscape */
@media screen and (device-aspect-ratio: 9/16) {
       select, textarea, input[type="text"], input[type="password"],
       input[type="datetime"], input[type="datetime-local"],
       input[type="date"], input[type="month"], input[type="time"],
       input[type="week"], input[type="number"], input[type="email"],
       input[type="url"], input[type="search"] {
        font-size: 16px !important;
    }
}