/*====================================================================
[Table of contents]

1.  Normalize v8.0.1 | MIT License | github.com/necolas/normalize.css
2.  Variables
3.  Setup
	3.1. Scrollbar
4.  Grid System
	4.1. Grid System -> Columns
		4.1.1. Grid System -> Columns -> Width
		4.1.2. Grid System -> Columns -> Offset
		4.1.3. Grid System -> Columns -> Pull
		4.1.4. Grid System -> Columns -> Push
5.  Flex
	5.1. Flex -> Directions
	5.2. Flex -> Justify
	5.3. Flex -> Align
	5.4. Flex -> Align Self
	5.5. Flex -> Wrap
	5.6. Flex -> Order
	5.7. Flex -> Grow and Shrink
	5.8. Flex -> Gap
	5.9. Flex -> Spacer
6.  Float
7.  Clear
8.  Display
9.  Positions
10. Offset
	10.1. Offset -> Top
	10.2. Offset -> Bottom
	10.3. Offset -> Left
	10.4. Offset -> Right
11. Width
	11.1. Width -> Max
	11.2. Width -> Min
12. Height
	12.1. Height -> Max
	12.2. Height -> Min
13. Aspect Ratio
14. Overflow
15. Z Index
16. Elevation
17. Round
18. Backdrop
	18.1. Backdrop -> Blur
19. Typography
	19.1. Typography -> html tags
	19.2. Typography -> headings
	19.2. Typography -> Display
	19.3. Typography -> Headlines
	19.4. Typography -> Titles
	19.5. Typography -> Body
	19.6. Typography -> Labels
	19.7. Typography -> Font Weights
	19.8. Typography -> Text Align
	19.9. Typography -> White Spaces
20. Margin
	20.1. Margin -> Left
	20.2. Margin -> Right
	20.3. Margin -> Top
	20.4. Margin -> Bottom
	20.5. Margin -> Left and Right (X)
	20.6. Margin -> Top and Bottom (Y)
21. Padding
	21.1. Padding -> Left
	21.2. Padding -> Right
	21.3. Padding -> Top
	21.4. Padding -> Bottom
	21.5. Padding -> Left and Right (X)
	21.6. Padding -> Top and Bottom (Y)
22. Colors
	22.1. Colors -> Light theme background
	22.2. Colors -> Dark theme background
	22.3. Colors -> Light theme colors
	22.4. Colors -> Dark theme colors
	22.5. Colors -> Background Colors
		22.5.1. Colors -> Background Colors -> Primary
		22.5.2. Colors -> Background Colors -> Secondary
		22.5.3. Colors -> Background Colors -> Tertiary
		22.5.4. Colors -> Background Colors -> Error
		22.5.5. Colors -> Background Colors -> Neutral
		22.5.6. Colors -> Background Colors -> Neutral Variant
	22.6. Colors -> Colors -> Primary
		22.6.1. Colors -> Colors -> Primary
		22.6.2. Colors -> Colors -> Secondary
		22.6.3. Colors -> Colors -> Tertiary
		22.6.4. Colors -> Colors -> Error
		22.6.5. Colors -> Colors -> Neutral
		22.6.6. Colors -> Colors -> Neutral Variant
	22.7. Colors -> Black and white
23. Images

====================================================================*/

/*====================================================================
1. Normalize
====================================================================*/

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

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

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

html {
	line-height: 1.15; /* 1 */
	-webkit-text-size-adjust: 100%; /* 2 */
}

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

/**
 * Remove the margin in all browsers.
 */

body {
	margin: 0;
}

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

main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

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

/**
 * 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;
}

/**
 * 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. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
	font-family: monospace, 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 {
	font-size: 75%;
	line-height: 0;
	position: relative;
	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 {
	font-family: inherit; /* 1 */
	font-size: 100%; /* 1 */
	line-height: 1.15; /* 1 */
	margin: 0; /* 2 */
}

/**
 * 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 {
	border-style: none;
	padding: 0;
}

/**
 * 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 {
	box-sizing: border-box; /* 1 */
	color: inherit; /* 2 */
	display: table; /* 1 */
	max-width: 100%; /* 1 */
	padding: 0; /* 3 */
	white-space: normal; /* 1 */
}

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

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 Chrome.
 */

[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"] {
	-webkit-appearance: textfield; /* 1 */
	outline-offset: -2px; /* 2 */
}

/**
 * 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 {
	-webkit-appearance: button; /* 1 */
	font: inherit; /* 2 */
}

/* 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] {
	display: none;
}

/*====================================================================
1. Variables
====================================================================*/

:root {

	/* Primary color */
	--primary-10: #21005D;
	--primary-20: #381E72;
	--primary-30: #4F378B;
	--primary-40: #6750A4;
	--primary-50: #7F67BE;
	--primary-60: #9A82DB;
	--primary-70: #B69DF8;
	--primary-80: #D0BCFF;
	--primary-90: #EADDFF;
	--primary-95: #F6EDFF;
	--primary-99: #FFFBFE;

	--primary-light-opacity-05: #6750A40D;
	--primary-light-opacity-12: #6750A41F;
	--primary-light-opacity-16: #6750A429;
	--primary-light-opacity-32: #6750A452;
	--primary-light-opacity-64: #6750A4A3;

	--primary-dark-opacity-05: #D0BCFF0D;
	--primary-dark-opacity-12: #D0BCFF1F;
	--primary-dark-opacity-16: #D0BCFF29;
	--primary-dark-opacity-32: #D0BCFF52;
	--primary-dark-opacity-64: #D0BCFFA3;

	/* Secondary color */
	--secondary-10: #1e192b;
	--secondary-20: #332d41;
	--secondary-30: #4a4358;
	--secondary-40: #625b71;
	--secondary-50: #7b738a;
	--secondary-60: #958da5;
	--secondary-70: #b0a7c0;
	--secondary-80: #ccc2dc;
	--secondary-90: #e8def9;
	--secondary-95: #f6edff;
	--secondary-99: #fffbff;

	--secondary-light-opacity-05: #625b710D;
	--secondary-light-opacity-12: #625b711F;
	--secondary-light-opacity-16: #625b7129;
	--secondary-light-opacity-32: #625b7152;
	--secondary-light-opacity-64: #625b71A3;

	--secondary-dark-opacity-05: #ccc2dc0D;
	--secondary-dark-opacity-12: #ccc2dc1F;
	--secondary-dark-opacity-16: #ccc2dc29;
	--secondary-dark-opacity-32: #ccc2dc52;
	--secondary-dark-opacity-64: #ccc2dcA3;

	/* Tertiary color */
	--tertiary-10: #31111d;
	--tertiary-20: #492532;
	--tertiary-30: #633b48;
	--tertiary-40: #7d5260;
	--tertiary-50: #986a79;
	--tertiary-60: #b48392;
	--tertiary-70: #d19dad;
	--tertiary-80: #eeb8c8;
	--tertiary-90: #ffd9e3;
	--tertiary-95: #ffecf0;
	--tertiary-99: #fffbff;

	--tertiary-light-opacity-05: #7d52600D;
	--tertiary-light-opacity-12: #7d52601F;
	--tertiary-light-opacity-16: #7d526029;
	--tertiary-light-opacity-32: #7d526052;
	--tertiary-light-opacity-64: #7d5260A3;

	--tertiary-dark-opacity-05: #eeb8c80D;
	--tertiary-dark-opacity-12: #eeb8c81F;
	--tertiary-dark-opacity-16: #eeb8c829;
	--tertiary-dark-opacity-32: #eeb8c852;
	--tertiary-dark-opacity-64: #eeb8c8A3;

	/* Error color */
	--error-10: #410E0B;
	--error-20: #601410;
	--error-30: #8C1D18;
	--error-40: #B3261E;
	--error-50: #DC362E;
	--error-60: #E46962;
	--error-70: #EC928E;
	--error-80: #F2B8B5;
	--error-90: #F9DEDC;
	--error-95: #FCEEEE;
	--error-99: #FFFBF9;

	--error-light-opacity-05: #B3261E0D;
	--error-light-opacity-12: #B3261E1F;
	--error-light-opacity-16: #B3261E29;
	--error-light-opacity-32: #B3261E52;
	--error-light-opacity-64: #B3261EA3;

	--error-dark-opacity-05: #F2B8B50D;
	--error-dark-opacity-12: #F2B8B51F;
	--error-dark-opacity-16: #F2B8B529;
	--error-dark-opacity-32: #F2B8B552;
	--error-dark-opacity-64: #F2B8B5A3;

	/* Neutral color */
	--neutral-10: #1c1b1f;
	--neutral-20: #313131; /* culoare originala #322f34 */
	--neutral-30: #48464a;
	--neutral-40: #605d62;
	--neutral-50: #79767b;
	--neutral-60: #938f95;
	--neutral-70: #aeaaaf;
	--neutral-80: #cac5cb;
	--neutral-90: #e6e1e7;
	--neutral-95: #f5eff5;
	--neutral-99: #fffbff;

	--neutral-light-opacity-05: #605d620D;
	--neutral-light-opacity-12: #605d621F;
	--neutral-light-opacity-16: #605d6229;
	--neutral-light-opacity-32: #605d6252;
	--neutral-light-opacity-64: #605d62A3;

	--neutral-dark-opacity-05: #cac5cb0D;
	--neutral-dark-opacity-12: #cac5cb1F;
	--neutral-dark-opacity-16: #cac5cb29;
	--neutral-dark-opacity-32: #cac5cb52;
	--neutral-dark-opacity-64: #cac5cbA3;

	/* Neutral Variant color */
	--neutral-v-10: #1c1b22;
	--neutral-v-20: #312f37;
	--neutral-v-30: #48454e;
	--neutral-v-40: #605d66;
	--neutral-v-50: #79757f;
	--neutral-v-60: #938f99;
	--neutral-v-70: #aea9b3;
	--neutral-v-80: #c9c4cf;
	--neutral-v-90: #e6e0eb;
	--neutral-v-95: #f4eff9;
	--neutral-v-99: #fffbff;

	--neutral-v-light-opacity-05: #605d660D;
	--neutral-v-light-opacity-12: #605d661F;
	--neutral-v-light-opacity-16: #605d6629;
	--neutral-v-light-opacity-32: #605d6652;
	--neutral-v-light-opacity-64: #605d66A3;

	--neutral-v-dark-opacity-05: #c9c4cf0D;
	--neutral-v-dark-opacity-12: #c9c4cf1F;
	--neutral-v-dark-opacity-16: #c9c4cf29;
	--neutral-v-dark-opacity-32: #c9c4cf52;
	--neutral-v-dark-opacity-64: #c9c4cfA3;

	--topbar-height: 64px;
	--megamenu-height: 64px;

	--text-headline-l-font-size: 22px;
	--text-headline-l-line-height: 28px;
	--text-headline-l-letter-spacing: initial;
	--text-headline-l-font-weight: normal;

	--text-headline-m-font-size: 20px;
	--text-headline-m-line-height: 24px;
	--text-headline-m-letter-spacing: initial;
	--text-headline-m-font-weight: normal;

	--text-headline-s-font-size: 18px;
	--text-headline-s-line-height: 24px;
	--text-headline-s-letter-spacing: initial;
	--text-headline-s-font-weight: normal;


	--text-display-l-font-size: 32px;
	--text-display-l-line-height: 40px;
	--text-display-l-letter-spacing: -0.25px;
	--text-display-l-font-weight: normal;
	--text-display-l-margin: 0;

	--text-display-m-font-size: 28px;
	--text-display-m-line-height: 36px;
	--text-display-m-letter-spacing: initial;
	--text-display-m-font-weight: normal;
	--text-display-m-margin: 0;

	--text-display-s-font-size: 22px;
	--text-display-s-line-height: 32px;
	--text-display-s-letter-spacing: initial;
	--text-display-s-font-weight: normal;
	--text-display-s-margin: 0;


	--text-body-s-font-size: 12px;
	--text-body-s-line-height: 16px;
	--text-body-s-letter-spacing: 0.4px;
	--text-body-s-font-weight: normal;

	--text-body-m-font-size: 14px;
	--text-body-m-line-height: 20px;
	--text-body-m-letter-spacing: 0.25px;
	--text-body-m-font-weight: normal;

	--text-body-l-font-size: 16px;
	--text-body-l-line-height: 24px;
	--text-body-l-letter-spacing: 0.5px;
	--text-body-l-font-weight: normal;


	--text-label-l-font-size: 14px;
	--text-label-l-line-height: 20px;
	--text-label-l-letter-spacing: 0.1px;
	--text-label-l-font-weight: 500;

	--text-label-m-font-size: 12px;
	--text-label-m-line-height: 16px;
	--text-label-m-letter-spacing: 0.5px;
	--text-label-m-font-weight: 500;

	--text-label-s-font-size: 11px;
	--text-label-s-line-height: 16px;
	--text-label-s-letter-spacing: 0.5px;
	--text-label-s-font-weight: 500;


	--text-title-l-font-size: 22px;
	--text-title-l-line-height: 28px;
	--text-title-l-letter-spacing: 0px;
	--text-title-l-font-weight: 500;

	--text-title-m-font-size: 16px;
	--text-title-m-line-height: 24px;
	--text-title-m-letter-spacing: 0.1px;
	--text-title-m-font-weight: 500;

	--text-title-s-font-size: 14px;
	--text-title-s-line-height: 20px;
	--text-title-s-letter-spacing: 0.1px;
	--text-title-s-font-weight: 500;
}


@media (min-width: 360px) {
   :root {
		--text-headline-l-font-size: 32px;
	 	--text-headline-l-line-height: 40px;

	 	--text-headline-m-font-size: 28px;
	 	--text-headline-m-line-height: 36px;

	 	--text-headline-s-font-size: 24px;
	 	--text-headline-s-line-height: 32px;


		--text-display-l-font-size: 40px;
		--text-display-l-line-height: 52px;

		--text-display-m-font-size: 32px;
		--text-display-m-line-height: 40px;

		--text-display-s-font-size: 28px;
		--text-display-s-line-height: 36px;
    }
}

@media (min-width: 600px) {
   :root {
		--text-display-l-font-size: 48px;
		--text-display-l-line-height: 58px;

		--text-display-m-font-size: 36px;
		--text-display-m-line-height: 44px;

		--text-display-s-font-size: 32px;
		--text-display-s-line-height: 40px;
    }
}


@media (min-width: 1264px) {
   :root {
		--text-display-l-font-size: 57px;
		--text-display-l-line-height: 64px;

		--text-display-m-font-size: 45px;
		--text-display-m-line-height: 52px;

		--text-display-s-font-size: 36px;
		--text-display-s-line-height: 44px;
    }
}

@media (min-width: 1904px) {
   :root {
		--text-display-l-font-size: 72px;
		--text-display-l-line-height: 80px;

		--text-display-m-font-size: 52px;
		--text-display-m-line-height: 64px;

		--text-display-s-font-size: 45px;
		--text-display-s-line-height: 52px;
    }
}

/*====================================================================
3. Setup
====================================================================*/

* {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}

*:before, *:after {
	-webkit-box-sizing: inherit;
	   -moz-box-sizing: inherit;
			box-sizing: inherit;
}

html {
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
}

body {
	overflow-x: hidden;
	color: var(--neutral-10);
	background-color: #FFF;
}

body.dark {
	color: var(--neutral-90);
	background-color: var(--neutral-10);
}

/*====================================================================
3.1. Scrollbar
====================================================================*/

::-webkit-scrollbar {
	width: 4px;
	height: 4px;
}

::-webkit-scrollbar-track {
	background-color: transparent;
}
 
::-webkit-scrollbar-thumb {
	background-color: var(--neutral-v-50);
	border-radius: 4px;
	transition: background-color .3s;
}

:hover::-webkit-scrollbar-thumb {
	background-color: var(--neutral-v-40);
}

.dark :hover::-webkit-scrollbar-thumb,
.dark:hover::-webkit-scrollbar-thumb {
	background-color: var(--neutral-v-80);
}

::-webkit-scrollbar-thumb:hover {
	background-color: var(--neutral-v-80);
}

.dark ::-webkit-scrollbar-thumb:hover,
.dark::-webkit-scrollbar-thumb:hover {
	background-color: var(--neutral-v-40);
}

::-webkit-scrollbar-corner {
	background-color: transparent;
}

/*====================================================================
4. Grid System
====================================================================*/

.container {
	margin-left: auto;
	margin-right: auto;
	max-width: 1264px !important;
	padding-left: 16px;
	padding-right: 16px;
}

.container.full-width {
	max-width: none !important;
}

.row {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 16px;
}

.row .row {
	margin-left: -8px;
	margin-right: -8px;
}

.row:after {
	content: "";
	display: table;
	clear: both;
}

/*====================================================================
4.1. Grid System -> Columns
====================================================================*/

.col {
	float: left;
	width: 100%;
	min-height: 1px;
	padding: 0 4px;
	margin-bottom: 16px;
}

@media (min-width: 600px) {
	.col {
		padding: 0 8px;
	}
}

.col[class*="push-"],
.col[class*="pull-"] {
	position: relative;
}

/*====================================================================
4.1.1. Grid System -> Columns -> Width
====================================================================*/

.col.xs-1 {
	width: 25%;
}

.col.xs-2 {
	width: 50%;
}

.col.xs-3 {
	width: 75%;
}

.col.xs-4 {
	width: 100%;
}

@media (min-width: 600px) {
	.col.sm-1 {
		width: 12.5%;
	}

	.col.sm-2 {
		width: 25%;
	}

	.col.sm-3 {
		width: 37.5%;
	}

	.col.sm-4 {
		width: 50%;
	}

	.col.sm-5 {
		width: 62.5%;
	}

	.col.sm-6 {
		width: 75%;
	}

	.col.sm-7 {
		width: 87.5%;
	}

	.col.sm-8 {
		width: 100%;
	}
}

@media (min-width: 960px) {
	.col.md-1 {
		width: 8.3333333333%;
	}

	.col.md-2 {
		width: 16.6666666667%;
	}

	.col.md-3 {
		width: 25%;
	}

	.col.md-4 {
		width: 33.3333333333%;
	}

	.col.md-5 {
		width: 41.6666666667%;
	}

	.col.md-6 {
		width: 50%;
	}

	.col.md-7 {
		width: 58.3333333333%;
	}

	.col.md-8 {
		width: 66.6666666667%;
	}

	.col.md-9 {
		width: 75%;
	}

	.col.md-10 {
		width: 83.3333333333%;
	}

	.col.md-11 {
		width: 91.6666666667%;
	}

	.col.md-12 {
		width: 100%;
	}
}

@media (min-width: 1264px) {
	.col.lg-1 {
		width: 8.3333333333%;
	}

	.col.lg-2 {
		width: 16.6666666667%;
	}

	.col.lg-3 {
		width: 25%;
	}

	.col.lg-4 {
		width: 33.3333333333%;
	}

	.col.lg-5 {
		width: 41.6666666667%;
	}

	.col.lg-6 {
		width: 50%;
	}

	.col.lg-7 {
		width: 58.3333333333%;
	}

	.col.lg-8 {
		width: 66.6666666667%;
	}

	.col.lg-9 {
		width: 75%;
	}

	.col.lg-10 {
		width: 83.3333333333%;
	}

	.col.lg-11 {
		width: 91.6666666667%;
	}

	.col.lg-12 {
		width: 100%;
	}
}

@media (min-width: 1904px) {
	.col.xl-1 {
		width: 8.3333333333%;
	}

	.col.xl-2 {
		width: 16.6666666667%;
	}

	.col.xl-3 {
		width: 25%;
	}

	.col.xl-4 {
		width: 33.3333333333%;
	}

	.col.xl-5 {
		width: 41.6666666667%;
	}

	.col.xl-6 {
		width: 50%;
	}

	.col.xl-7 {
		width: 58.3333333333%;
	}

	.col.xl-8 {
		width: 66.6666666667%;
	}

	.col.xl-9 {
		width: 75%;
	}

	.col.xl-10 {
		width: 83.3333333333%;
	}

	.col.xl-11 {
		width: 91.6666666667%;
	}

	.col.xl-12 {
		width: 100%;
	}
}

/*====================================================================
4.1.2. Grid System -> Columns -> Offset
====================================================================*/

.col.offset-xs-1 {
	margin-left: 25%;
}

.col.offset-xs-2 {
	margin-left: 50%;
}

.col.offset-xs-3 {
	margin-left: 75%;
}

.col.offset-xs-4 {
	margin-left: 100%;
}

@media (min-width: 600px) {
	.col.offset-sm-0 {
		margin-left: 0;
	}

	.col.offset-sm-1 {
		margin-left: 12.5%;
	}

	.col.offset-sm-2 {
		margin-left: 25%;
	}

	.col.offset-sm-3 {
		margin-left: 37.5%;
	}

	.col.offset-sm-4 {
		margin-left: 50%;
	}

	.col.offset-sm-5 {
		margin-left: 62.5%;
	}

	.col.offset-sm-6 {
		margin-left: 75%;
	}

	.col.offset-sm-7 {
		margin-left: 87.5%;
	}

	.col.offset-sm-8 {
		margin-left: 100%;
	}
}

@media (min-width: 960px) {
	.col.offset-md-0 {
		margin-left: 0;
	}

	.col.offset-md-1 {
		margin-left: 8.3333333333%;
	}

	.col.offset-md-2 {
		margin-left: 16.6666666667%;
	}

	.col.offset-md-3 {
		margin-left: 25%;
	}

	.col.offset-md-4 {
		margin-left: 33.3333333333%;
	}

	.col.offset-md-5 {
		margin-left: 41.6666666667%;
	}

	.col.offset-md-6 {
		margin-left: 50%;
	}

	.col.offset-md-7 {
		margin-left: 58.3333333333%;
	}

	.col.offset-md-8 {
		margin-left: 66.6666666667%;
	}

	.col.offset-md-9 {
		margin-left: 75%;
	}

	.col.offset-md-10 {
		margin-left: 83.3333333333%;
	}

	.col.offset-md-11 {
		margin-left: 91.6666666667%;
	}

	.col.offset-md-12 {
		margin-left: 100%;
	}
}

@media (min-width: 1264px) {
	.col.offset-lg-0 {
		margin-left: 0;
	}

	.col.offset-lg-1 {
		margin-left: 8.3333333333%;
	}

	.col.offset-lg-2 {
		margin-left: 16.6666666667%;
	}

	.col.offset-lg-3 {
		margin-left: 25%;
	}

	.col.offset-lg-4 {
		margin-left: 33.3333333333%;
	}

	.col.offset-lg-5 {
		margin-left: 41.6666666667%;
	}

	.col.offset-lg-6 {
		margin-left: 50%;
	}

	.col.offset-lg-7 {
		margin-left: 58.3333333333%;
	}

	.col.offset-lg-8 {
		margin-left: 66.6666666667%;
	}

	.col.offset-lg-9 {
		margin-left: 75%;
	}

	.col.offset-lg-10 {
		margin-left: 83.3333333333%;
	}

	.col.offset-lg-11 {
		margin-left: 91.6666666667%;
	}

	.col.offset-lg-12 {
		margin-left: 100%;
	}
}

@media (min-width: 1904px) {
	.col.offset-xl-0 {
		width: 0;
	}

	.col.offset-xl-1 {
		width: 8.3333333333%;
	}

	.col.offset-xl-2 {
		width: 16.6666666667%;
	}

	.col.offset-xl-3 {
		width: 25%;
	}

	.col.offset-xl-4 {
		width: 33.3333333333%;
	}

	.col.offset-xl-5 {
		width: 41.6666666667%;
	}

	.col.offset-xl-6 {
		width: 50%;
	}

	.col.offset-xl-7 {
		width: 58.3333333333%;
	}

	.col.offset-xl-8 {
		width: 66.6666666667%;
	}

	.col.offset-xl-9 {
		width: 75%;
	}

	.col.offset-xl-10 {
		width: 83.3333333333%;
	}

	.col.offset-xl-11 {
		width: 91.6666666667%;
	}

	.col.offset-xl-12 {
		width: 100%;
	}
}

/*====================================================================
4.1.3. Grid System -> Columns -> Pull
====================================================================*/

.col.pull-xs-1 {
	right: 25%;
}

.col.pull-xs-2 {
	right: 50%;
}

.col.pull-xs-3 {
	right: 75%;
}

.col.pull-xs-4 {
	right: 100%;
}

@media (min-width: 600px) {
	.col.pull-sm-0 {
		right: 0;
	}

	.col.pull-sm-1 {
		right: 12.5%;
	}

	.col.pull-sm-2 {
		right: 25%;
	}

	.col.pull-sm-3 {
		right: 37.5%;
	}

	.col.pull-sm-4 {
		right: 50%;
	}

	.col.pull-sm-5 {
		right: 62.5%;
	}

	.col.pull-sm-6 {
		right: 75%;
	}

	.col.pull-sm-7 {
		right: 87.5%;
	}

	.col.pull-sm-8 {
		right: 100%;
	}
}

@media (min-width:  960px) {
	.col.pull-md-0 {
		right: 0;
	}

	.col.pull-md-1 {
		right: 8.3333333333%;
	}

	.col.pull-md-2 {
		right: 16.6666666667%;
	}

	.col.pull-md-3 {
		right: 25%;
	}

	.col.pull-md-4 {
		right: 33.3333333333%;
	}

	.col.pull-md-5 {
		right: 41.6666666667%;
	}

	.col.pull-md-6 {
		right: 50%;
	}

	.col.pull-md-7 {
		right: 58.3333333333%;
	}

	.col.pull-md-8 {
		right: 66.6666666667%;
	}

	.col.pull-md-9 {
		right: 75%;
	}

	.col.pull-md-10 {
		right: 83.3333333333%;
	}

	.col.pull-md-11 {
		right: 91.6666666667%;
	}

	.col.pull-md-12 {
		right: 100%;
	}
}


@media (min-width: 1264px) {
	.col.pull-lg-0 {
		right: 0;
	}

	.col.pull-lg-1 {
		right: 8.3333333333%;
	}

	.col.pull-lg-2 {
		right: 16.6666666667%;
	}

	.col.pull-lg-3 {
		right: 25%;
	}

	.col.pull-lg-4 {
		right: 33.3333333333%;
	}

	.col.pull-lg-5 {
		right: 41.6666666667%;
	}

	.col.pull-lg-6 {
		right: 50%;
	}

	.col.pull-lg-7 {
		right: 58.3333333333%;
	}

	.col.pull-lg-8 {
		right: 66.6666666667%;
	}

	.col.pull-lg-9 {
		right: 75%;
	}

	.col.pull-lg-10 {
		right: 83.3333333333%;
	}

	.col.pull-lg-11 {
		right: 91.6666666667%;
	}

	.col.pull-lg-12 {
		right: 100%;
	}
}

@media (min-width: 1904px) {
	.col.pull-xl-0 {
		width: 0;
	}

	.col.pull-xl-1 {
		width: 8.3333333333%;
	}

	.col.pull-xl-2 {
		width: 16.6666666667%;
	}

	.col.pull-xl-3 {
		width: 25%;
	}

	.col.pull-xl-4 {
		width: 33.3333333333%;
	}

	.col.pull-xl-5 {
		width: 41.6666666667%;
	}

	.col.pull-xl-6 {
		width: 50%;
	}

	.col.pull-xl-7 {
		width: 58.3333333333%;
	}

	.col.pull-xl-8 {
		width: 66.6666666667%;
	}

	.col.pull-xl-9 {
		width: 75%;
	}

	.col.pull-xl-10 {
		width: 83.3333333333%;
	}

	.col.pull-xl-11 {
		width: 91.6666666667%;
	}

	.col.pull-xl-12 {
		width: 100%;
	}
}

/*====================================================================
4.1.4. Grid System -> Columns -> Push
====================================================================*/

.col.push-xs-1 {
	left: 25%;
}

.col.push-xs-2 {
	left: 50%;
}

.col.push-xs-3 {
	left: 75%;
}

.col.push-xs-4 {
	left: 100%;
}

@media (min-width: 600px) {
	.col.push-sm-0 {
		left: 0;
	}

	.col.push-sm-1 {
		left: 12.5%;
	}

	.col.push-sm-2 {
		left: 25%;
	}

	.col.push-sm-3 {
		left: 37.5%;
	}

	.col.push-sm-4 {
		left: 50%;
	}

	.col.push-sm-5 {
		left: 62.5%;
	}

	.col.push-sm-6 {
		left: 75%;
	}

	.col.push-sm-7 {
		left: 87.5%;
	}

	.col.push-sm-8 {
		left: 100%;
	}
}

@media (min-width: 960px) {
	.col.push-md-0 {
		left: 0;
	}

	.col.push-md-1 {
		left: 8.3333333333%;
	}

	.col.push-md-2 {
		left: 16.6666666667%;
	}

	.col.push-md-3 {
		left: 25%;
	}

	.col.push-md-4 {
		left: 33.3333333333%;
	}

	.col.push-md-5 {
		left: 41.6666666667%;
	}

	.col.push-md-6 {
		left: 50%;
	}

	.col.push-md-7 {
		left: 58.3333333333%;
	}

	.col.push-md-8 {
		left: 66.6666666667%;
	}

	.col.push-md-9 {
		left: 75%;
	}

	.col.push-md-10 {
		left: 83.3333333333%;
	}

	.col.push-md-11 {
		left: 91.6666666667%;
	}

	.col.push-md-12 {
		left: 100%;
	}
}

@media (min-width: 1264px) {
	.col.push-lg-0 {
		left: 0;
	}

	.col.push-lg-1 {
		left: 8.3333333333%;
	}

	.col.push-lg-2 {
		left: 16.6666666667%;
	}

	.col.push-lg-3 {
		left: 25%;
	}

	.col.push-lg-4 {
		left: 33.3333333333%;
	}

	.col.push-lg-5 {
		left: 41.6666666667%;
	}

	.col.push-lg-6 {
		left: 50%;
	}

	.col.push-lg-7 {
		left: 58.3333333333%;
	}

	.col.push-lg-8 {
		left: 66.6666666667%;
	}

	.col.push-lg-9 {
		left: 75%;
	}

	.col.push-lg-10 {
		left: 83.3333333333%;
	}

	.col.push-lg-11 {
		left: 91.6666666667%;
	}

	.col.push-lg-12 {
		left: 100%;
	}
}

@media (min-width: 1904px) {
	.col.push-xl-0 {
		width: 0;
	}

	.col.push-xl-1 {
		width: 8.3333333333%;
	}

	.col.push-xl-2 {
		width: 16.6666666667%;
	}

	.col.push-xl-3 {
		width: 25%;
	}

	.col.push-xl-4 {
		width: 33.3333333333%;
	}

	.col.push-xl-5 {
		width: 41.6666666667%;
	}

	.col.push-xl-6 {
		width: 50%;
	}

	.col.push-xl-7 {
		width: 58.3333333333%;
	}

	.col.push-xl-8 {
		width: 66.6666666667%;
	}

	.col.push-xl-9 {
		width: 75%;
	}

	.col.push-xl-10 {
		width: 83.3333333333%;
	}

	.col.push-xl-11 {
		width: 91.6666666667%;
	}

	.col.push-xl-12 {
		width: 100%;
	}
}

/*====================================================================
5. Flex
====================================================================*/

/*====================================================================
5.1. Flex -> Directions
====================================================================*/

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

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

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

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

@media (min-width: 600px) {
	.flex-sm-row {
		flex-direction: row !important;
	}

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

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

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

@media (min-width: 960px) {
	.flex-md-row {
		flex-direction: row !important;
	}

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

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

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

@media (min-width: 1264px) {
	.flex-lg-row {
		flex-direction: row !important;
	}

	.flex-lg-row-reverse {
		flex-direction: row-reverse !important;
	}

	.flex-lg-column {
		flex-direction: column !important;
	}

	.flex-lg-column-reverse {
		flex-direction: column-reverse !important;
	}
}

@media (min-width: 1904px) {
	.flex-xl-row {
		flex-direction: row !important;
	}

	.flex-xl-row-reverse {
		flex-direction: row-reverse !important;
	}

	.flex-xl-column {
		flex-direction: column !important;
	}

	.flex-xl-column-reverse {
		flex-direction: column-reverse !important;
	}
}

/*====================================================================
5.2. Flex -> Justify
====================================================================*/

.justify-start {
	justify-content: start !important;
}

.justify-end {
	justify-content: end !important;
}

.justify-center {
	justify-content: center !important;
}

.justify-space-between {
	justify-content: space-between !important;
}

.justify-space-around {
	justify-content: space-around !important;
}

@media (min-width: 600px) {
	.justify-sm-start {
		justify-content: start !important;
	}

	.justify-sm-end {
		justify-content: end !important;
	}

	.justify-sm-center {
		justify-content: center !important;
	}

	.justify-sm-space-between {
		justify-content: space-between !important;
	}

	.justify-sm-space-around {
		justify-content: space-around !important;
	}
}

@media (min-width: 960px) {
	.justify-md-start {
		justify-content: start !important;
	}

	.justify-md-end {
		justify-content: end !important;
	}

	.justify-md-center {
		justify-content: center !important;
	}

	.justify-md-space-between {
		justify-content: space-between !important;
	}

	.justify-md-space-around {
		justify-content: space-around !important;
	}
}

@media (min-width: 1264px) {
	.justify-lg-start {
		justify-content: start !important;
	}

	.justify-lg-end {
		justify-content: end !important;
	}

	.justify-lg-center {
		justify-content: center !important;
	}

	.justify-lg-space-between {
		justify-content: space-between !important;
	}

	.justify-lg-space-around {
		justify-content: space-around !important;
	}
}

@media (min-width: 1904px) {
	.justify-xl-start {
		justify-content: start !important;
	}

	.justify-xl-end {
		justify-content: end !important;
	}

	.justify-xl-center {
		justify-content: center !important;
	}

	.justify-xl-space-between {
		justify-content: space-between !important;
	}

	.justify-xl-space-around {
		justify-content: space-around !important;
	}
}

/*====================================================================
5.3. Flex -> Align
====================================================================*/

.align-start {
	align-items: start !important;
}

.align-end {
	align-items: end !important;
}

.align-center {
	align-items: center !important;
}

.align-stretch {
	align-items: stretch !important;
}

@media (min-width: 600px) {
	.align-sm-start {
		align-items: start !important;
	}

	.align-sm-end {
		align-items: end !important;
	}

	.align-sm-center {
		align-items: center !important;
	}

	.align-sm-stretch {
		align-items: stretch !important;
	}
}

@media (min-width: 960px) {
	.align-md-start {
		align-items: start !important;
	}

	.align-md-end {
		align-items: end !important;
	}

	.align-md-center {
		align-items: center !important;
	}

	.align-md-stretch {
		align-items: stretch !important;
	}
}

@media (min-width: 1264px) {
	.align-lg-start {
		align-items: start !important;
	}

	.align-lg-end {
		align-items: end !important;
	}

	.align-lg-center {
		align-items: center !important;
	}

	.align-lg-stretch {
		align-items: stretch !important;
	}
}

@media (min-width: 1904px) {
	.align-xl-start {
		align-items: start !important;
	}

	.align-xl-end {
		align-items: end !important;
	}

	.align-xl-center {
		align-items: center !important;
	}

	.align-xl-stretch {
		align-items: stretch !important;
	}
}

/*====================================================================
5.4. Flex -> Align Self
====================================================================*/

.align-self-start {
	align-self: start !important;
}

.align-self-end {
	align-self: end !important;
}

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

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

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

@media (min-width: 600px) {
	.align-sm-self-start {
		align-self: start !important;
	}

	.align-sm-self-end {
		align-self: end !important;
	}

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

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

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

@media (min-width: 960px) {
	.align-md-self-start {
		align-self: start !important;
	}

	.align-md-self-end {
		align-self: end !important;
	}

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

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

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

@media (min-width: 1264px) {
	.align-lg-self-start {
		align-self: start !important;
	}

	.align-lg-self-end {
		align-self: end !important;
	}

	.align-lg-self-center {
		align-self: center !important;
	}

	.align-lg-self-auto {
		align-self: auto !important;
	}

	.align-lg-self-stretch {
		align-self: stretch !important;
	}
}

@media (min-width: 1904px) {
	.align-xl-self-start {
		align-self: start !important;
	}

	.align-xl-self-end {
		align-self: end !important;
	}

	.align-xl-self-center {
		align-self: center !important;
	}

	.align-xl-self-auto {
		align-self: auto !important;
	}

	.align-xl-self-stretch {
		align-self: stretch !important;
	}
}

/*====================================================================
5.5. Flex -> Wrap
====================================================================*/

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

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

.flex-wrap-reverse {
	flex-wrap: wrap-reverse !important;
}

@media (min-width: 600px) {
	.flex-sm-nowrap {
		flex-wrap: nowrap !important;
	}

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

	.flex-sm-wrap-reverse {
		flex-wrap: wrap-reverse !important;
	}
}

@media (min-width: 960px) {
	.flex-md-nowrap {
		flex-wrap: nowrap !important;
	}

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

	.flex-md-wrap-reverse {
		flex-wrap: wrap-reverse !important;
	}
}

@media (min-width: 1264px) {
	.flex-lg-nowrap {
		flex-wrap: nowrap !important;
	}

	.flex-lg-wrap {
		flex-wrap: wrap !important;
	}

	.flex-lg-wrap-reverse {
		flex-wrap: wrap-reverse !important;
	}
}

@media (min-width: 1904px) {
	.flex-xl-nowrap {
		flex-wrap: nowrap !important;
	}

	.flex-xl-wrap {
		flex-wrap: wrap !important;
	}

	.flex-xl-wrap-reverse {
		flex-wrap: wrap-reverse !important;
	}
}

/*====================================================================
5.6. Flex -> Order
====================================================================*/

.order-first {
	order: -1 !important;
}

.order-0 {
	order: 0 !important;
}

.order-1 {
	order: 1 !important;
}

.order-2 {
	order: 2 !important;
}

.order-3 {
	order: 3 !important;
}

.order-4 {
	order: 4 !important;
}

.order-5 {
	order: 5 !important;
}

.order-6 {
	order: 6 !important;
}

.order-7 {
	order: 7 !important;
}

.order-8 {
	order: 8 !important;
}

.order-9 {
	order: 9 !important;
}

.order-10 {
	order: 10 !important;
}

.order-11 {
	order: 11 !important;
}

.order-12 {
	order: 12 !important;
}

.order-last {
	order: 999 !important;
}

@media (min-width: 600px) {
	.order-sm-first {
		order: -1 !important;
	}

	.order-sm-0 {
		order: 0 !important;
	}

	.order-sm-1 {
		order: 1 !important;
	}

	.order-sm-2 {
		order: 2 !important;
	}

	.order-sm-3 {
		order: 3 !important;
	}

	.order-sm-4 {
		order: 4 !important;
	}

	.order-sm-5 {
		order: 5 !important;
	}

	.order-sm-6 {
		order: 6 !important;
	}

	.order-sm-7 {
		order: 7 !important;
	}

	.order-sm-8 {
		order: 8 !important;
	}

	.order-sm-9 {
		order: 9 !important;
	}

	.order-sm-10 {
		order: 10 !important;
	}

	.order-sm-11 {
		order: 11 !important;
	}

	.order-sm-12 {
		order: 12 !important;
	}

	.order-sm-last {
		order: 999 !important;
	}
}

@media (min-width: 960px) {
	.order-md-first {
		order: -1 !important;
	}

	.order-md-0 {
		order: 0 !important;
	}

	.order-md-1 {
		order: 1 !important;
	}

	.order-md-2 {
		order: 2 !important;
	}

	.order-md-3 {
		order: 3 !important;
	}

	.order-md-4 {
		order: 4 !important;
	}

	.order-md-5 {
		order: 5 !important;
	}

	.order-md-6 {
		order: 6 !important;
	}

	.order-md-7 {
		order: 7 !important;
	}

	.order-md-8 {
		order: 8 !important;
	}

	.order-md-9 {
		order: 9 !important;
	}

	.order-md-10 {
		order: 10 !important;
	}

	.order-md-11 {
		order: 11 !important;
	}

	.order-md-12 {
		order: 12 !important;
	}

	.order-md-last {
		order: 999 !important;
	}
}

@media (min-width: 1264px) {
	.order-lg-first {
		order: -1 !important;
	}

	.order-lg-0 {
		order: 0 !important;
	}

	.order-lg-1 {
		order: 1 !important;
	}

	.order-lg-2 {
		order: 2 !important;
	}

	.order-lg-3 {
		order: 3 !important;
	}

	.order-lg-4 {
		order: 4 !important;
	}

	.order-lg-5 {
		order: 5 !important;
	}

	.order-lg-6 {
		order: 6 !important;
	}

	.order-lg-7 {
		order: 7 !important;
	}

	.order-lg-8 {
		order: 8 !important;
	}

	.order-lg-9 {
		order: 9 !important;
	}

	.order-lg-10 {
		order: 10 !important;
	}

	.order-lg-11 {
		order: 11 !important;
	}

	.order-lg-12 {
		order: 12 !important;
	}

	.order-lg-last {
		order: 999 !important;
	}
}

@media (min-width: 1904px) {
	.order-xl-first {
		order: -1 !important;
	}

	.order-xl-0 {
		order: 0 !important;
	}

	.order-xl-1 {
		order: 1 !important;
	}

	.order-xl-2 {
		order: 2 !important;
	}

	.order-xl-3 {
		order: 3 !important;
	}

	.order-xl-4 {
		order: 4 !important;
	}

	.order-xl-5 {
		order: 5 !important;
	}

	.order-xl-6 {
		order: 6 !important;
	}

	.order-xl-7 {
		order: 7 !important;
	}

	.order-xl-8 {
		order: 8 !important;
	}

	.order-xl-9 {
		order: 9 !important;
	}

	.order-xl-10 {
		order: 10 !important;
	}

	.order-xl-11 {
		order: 11 !important;
	}

	.order-xl-12 {
		order: 12 !important;
	}

	.order-xl-last {
		order: 999 !important;
	}
}

/*====================================================================
5.7. Flex -> Grow and Shrink
====================================================================*/

.flex-grow-0 {
	flex-grow: 0 !important;
}

.flex-grow-1 {
	flex-grow: 1 !important;
}

.flex-shrink-0 {
	flex-shrink: 0 !important;
}

.flex-shrink-1 {
	flex-shrink: 1 !important;
}

@media (min-width: 600px) {
	.flex-sm-grow-0 {
		flex-grow: 0 !important;
	}

	.flex-sm-grow-1 {
		flex-grow: 1 !important;
	}

	.flex-sm-shrink-0 {
		flex-shrink: 0 !important;
	}

	.flex-sm-shrink-1 {
		flex-shrink: 1 !important;
	}
}

@media (min-width: 960px) {
	.flex-md-grow-0 {
		flex-grow: 0 !important;
	}

	.flex-md-grow-1 {
		flex-grow: 1 !important;
	}

	.flex-md-shrink-0 {
		flex-shrink: 0 !important;
	}

	.flex-md-shrink-1 {
		flex-shrink: 1 !important;
	}
}

@media (min-width: 1264px) {
	.flex-lg-grow-0 {
		flex-grow: 0 !important;
	}

	.flex-lg-grow-1 {
		flex-grow: 1 !important;
	}

	.flex-lg-shrink-0 {
		flex-shrink: 0 !important;
	}

	.flex-lg-shrink-1 {
		flex-shrink: 1 !important;
	}
}

@media (min-width: 1904px) {
	.flex-xl-grow-0 {
		flex-grow: 0 !important;
	}

	.flex-xl-grow-1 {
		flex-grow: 1 !important;
	}

	.flex-xl-shrink-0 {
		flex-shrink: 0 !important;
	}

	.flex-xl-shrink-1 {
		flex-shrink: 1 !important;
	}
}

/*====================================================================
5.8. Flex -> Gap
====================================================================*/

.gap-0 {
	gap: 0 !important;
}

.gap-4 {
	gap: 4px !important;
}

.gap-8 {
	gap: 8px !important;
}

.gap-16 {
	gap: 16px !important;
}

/*====================================================================
5.9. Flex -> Spacer
====================================================================*/

.spacer {
	width: 99%;
}

/*====================================================================
6. Float
====================================================================*/

.float-none {
	float: none !important;
}

.float-left {
	float: left !important;
}

.float-right {
	float: right !important;
}

@media (min-width: 600px) {
	.float-sm-none {
		float: none !important;
	}

	.float-sm-left {
		float: left !important;
	}

	.float-sm-right {
		float: right !important;
	}
}

@media (min-width: 960px) {
	.float-md-none {
		float: none !important;
	}

	.float-md-left {
		float: left !important;
	}

	.float-md-right {
		float: right !important;
	}
}

@media (min-width: 1264px) {
	.float-lg-none {
		float: none !important;
	}

	.float-lg-left {
		float: left !important;
	}

	.float-lg-right {
		float: right !important;
	}
}

@media (min-width: 1904px) {
	.float-xl-none {
		float: none !important;
	}

	.float-xl-left {
		float: left !important;
	}

	.float-xl-right {
		float: right !important;
	}
}

/*====================================================================
7. Clear
====================================================================*/

.clear-none {
	clear: none !important;
}

.clear-left {
	clear: left !important;
}

.clear-right {
	clear: right !important;
}

.clear-both {
	clear: both !important;
}

@media (min-width: 600px) {
	.clear-sm-none {
		clear: none !important;
	}

	.clear-sm-left {
		clear: left !important;
	}

	.clear-sm-right {
		clear: right !important;
	}

	.clear-sm-both {
		clear: both !important;
	}
}

@media (min-width: 960px) {
	.clear-md-none {
		clear: none !important;
	}

	.clear-md-left {
		clear: left !important;
	}

	.clear-md-right {
		clear: right !important;
	}

	.clear-md-both {
		clear: both !important;
	}
}

@media (min-width: 1264px) {
	.clear-lg-none {
		clear: none !important;
	}

	.clear-lg-left {
		clear: left !important;
	}

	.clear-lg-right {
		clear: right !important;
	}

	.clear-lg-both {
		clear: both !important;
	}
}

@media (min-width: 1904px) {
	.clear-xl-none {
		clear: none !important;
	}

	.clear-xl-left {
		clear: left !important;
	}

	.clear-xl-right {
		clear: right !important;
	}

	.clear-xl-both {
		clear: both !important;
	}
}

/*====================================================================
8. Display
====================================================================*/

.d-initial {
	display: initial !important;
}

.d-none {
	display: none !important;
}

.d-inline {
	display: inline !important;
}

.d-inline-block {
	display: inline-block !important;
}

.d-block {
	display: block !important;
}

.d-flex {
	display: flex !important;
}

.d-inline-flex {
	display: inline-flex !important;
}

.d-table {
	display: table !important;
}

.d-table-row {
	display: table-row !important;
}

.d-table-column {
	display: table-column !important;
}

.d-table-cell {
	display: table-cell !important;
}

@media (min-width: 600px) {
	.d-sm-initial {
		display: initial !important;
	}

	.d-sm-none {
		display: none !important;
	}

	.d-sm-inline {
		display: inline !important;
	}

	.d-sm-inline-block {
		display: inline-block !important;
	}

	.d-sm-block {
		display: block !important;
	}

	.d-sm-flex {
		display: flex !important;
	}

	.d-sm-inline-flex {
		display: inline-flex !important;
	}

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

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

	.d-sm-table-column {
		display: table-column !important;
	}

	.d-sm-table-cell {
		display: table-cell !important;
	}
}

@media (min-width: 960px) {
	.d-md-initial {
		display: initial !important;
	}

	.d-md-none {
		display: none !important;
	}

	.d-md-inline {
		display: inline !important;
	}

	.d-md-inline-block {
		display: inline-block !important;
	}

	.d-md-block {
		display: block !important;
	}

	.d-md-flex {
		display: flex !important;
	}

	.d-md-inline-flex {
		display: inline-flex !important;
	}

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

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

	.d-md-table-column {
		display: table-column !important;
	}

	.d-md-table-cell {
		display: table-cell !important;
	}
}

@media (min-width: 1264px) {
	.d-lg-initial {
		display: initial !important;
	}

	.d-lg-none {
		display: none !important;
	}

	.d-lg-inline {
		display: inline !important;
	}

	.d-lg-inline-block {
		display: inline-block !important;
	}

	.d-lg-block {
		display: block !important;
	}

	.d-lg-flex {
		display: flex !important;
	}

	.d-lg-inline-flex {
		display: inline-flex !important;
	}

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

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

	.d-lg-table-column {
		display: table-column !important;
	}

	.d-lg-table-cell {
		display: table-cell !important;
	}
}

@media (min-width: 1904px) {
	.d-xl-initial {
		display: initial !important;
	}

	.d-xl-none {
		display: none !important;
	}

	.d-xl-inline {
		display: inline !important;
	}

	.d-xl-inline-block {
		display: inline-block !important;
	}

	.d-xl-block {
		display: block !important;
	}

	.d-xl-flex {
		display: flex !important;
	}

	.d-xl-inline-flex {
		display: inline-flex !important;
	}

	.d-xl-table {
		display: table !important;
	}

	.d-xl-table-row {
		display: table-row !important;
	}

	.d-xl-table-column {
		display: table-column !important;
	}

	.d-xl-table-cell {
		display: table-cell !important;
	}
}

/*====================================================================
9. Positions
====================================================================*/

.p-initial {
	position: initial !important;
}

.p-relative {
	position: relative !important;
}

.p-absolute {
	position: absolute !important;
}

.p-fixed {
	position: fixed !important;
}

.p-sticky {
	position: sticky !important;
}

@media (min-width: 600px) {
	.p-sm-initial {
		position: initial !important;
	}

	.p-sm-relative {
		position: relative !important;
	}

	.p-sm-absolute {
		position: absolute !important;
	}

	.p-sm-fixed {
		position: fixed !important;
	}

	.p-sm-sticky {
		position: sticky !important;
	}
}

@media (min-width: 960px) {
	.p-md-initial {
		position: initial !important;
	}

	.p-md-relative {
		position: relative !important;
	}

	.p-md-absolute {
		position: absolute !important;
	}

	.p-md-fixed {
		position: fixed !important;
	}

	.p-md-sticky {
		position: sticky !important;
	}
}

@media (min-width: 1264px) {
	.p-lg-initial {
		position: initial !important;
	}

	.p-lg-relative {
		position: relative !important;
	}

	.p-lg-absolute {
		position: absolute !important;
	}

	.p-lg-fixed {
		position: fixed !important;
	}

	.p-lg-sticky {
		position: sticky !important;
	}
}

@media (min-width: 1904px) {
	.p-xl-initial {
		position: initial !important;
	}

	.p-xl-relative {
		position: relative !important;
	}

	.p-xl-absolute {
		position: absolute !important;
	}

	.p-xl-fixed {
		position: fixed !important;
	}

	.p-xl-sticky {
		position: sticky !important;
	}
}

/*====================================================================
10. Offset
====================================================================*/

/*====================================================================
10.1. Offset -> Top
====================================================================*/

.top-initial {
	top: initial !important;
}

.top-0 {
	top: 0 !important;
}

.top-4 {
	top: 4px !important;
}

.top-8 {
	top: 8px !important;
}

.top-16 {
	top: 16px !important;
}

.top-24 {
	top: 24px !important;
}

.top-32 {
	top: 32px !important;
}

.top-40 {
	top: 40px !important;
}

.top-56 {
	top: 56px !important;
}

.top-64 {
	top: 64px !important;
}

.top-72 {
	top: 72px !important;
}

.top-80 {
	top: 80px !important;
}

.top-half {
	top: 50% !important;
}

.top-full {
	top: 100% !important;
}

.top-topbar {
	top: var(--topbar-height) !important;
}

@media (min-width: 600px) {
	.top-sm-initial {
		top: initial !important;
	}

	.top-sm-0 {
		top: 0 !important;
	}

	.top-sm-4 {
		top: 4px !important;
	}

	.top-sm-8 {
		top: 8px !important;
	}

	.top-sm-16 {
		top: 16px !important;
	}

	.top-sm-24 {
		top: 24px !important;
	}

	.top-sm-32 {
		top: 32px !important;
	}

	.top-sm-40 {
		top: 40px !important;
	}

	.top-sm-56 {
		top: 56px !important;
	}

	.top-sm-64 {
		top: 64px !important;
	}

	.top-sm-72 {
		top: 72px !important;
	}

	.top-sm-80 {
		top: 80px !important;
	}

	.top-sm-half {
		top: 50% !important;
	}

	.top-sm-full {
		top: 100% !important;
	}

	.top-sm-topbar {
		top: var(--topbar-height) !important;
	}
}

@media (min-width: 960px) {
	.top-md-initial {
		top: initial !important;
	}

	.top-md-0 {
		top: 0 !important;
	}

	.top-md-4 {
		top: 4px !important;
	}

	.top-md-8 {
		top: 8px !important;
	}

	.top-md-16 {
		top: 16px !important;
	}

	.top-md-24 {
		top: 24px !important;
	}

	.top-md-32 {
		top: 32px !important;
	}

	.top-md-40 {
		top: 40px !important;
	}

	.top-md-56 {
		top: 56px !important;
	}

	.top-md-64 {
		top: 64px !important;
	}

	.top-md-72 {
		top: 72px !important;
	}

	.top-md-80 {
		top: 80px !important;
	}

	.top-md-half {
		top: 50% !important;
	}

	.top-md-full {
		top: 100% !important;
	}

	.top-md-topbar {
		top: var(--topbar-height) !important;
	}
}

@media (min-width: 1264px) {
	.top-lg-initial {
		top: initial !important;
	}

	.top-lg-0 {
		top: 0 !important;
	}

	.top-lg-4 {
		top: 4px !important;
	}

	.top-lg-8 {
		top: 8px !important;
	}

	.top-lg-16 {
		top: 16px !important;
	}

	.top-lg-24 {
		top: 24px !important;
	}

	.top-lg-32 {
		top: 32px !important;
	}

	.top-lg-40 {
		top: 40px !important;
	}

	.top-lg-56 {
		top: 56px !important;
	}

	.top-lg-64 {
		top: 64px !important;
	}

	.top-lg-72 {
		top: 72px !important;
	}

	.top-lg-80 {
		top: 80px !important;
	}

	.top-lg-half {
		top: 50% !important;
	}

	.top-lg-full {
		top: 100% !important;
	}

	.top-lg-topbar {
		top: var(--topbar-height) !important;
	}
}

@media (min-width: 1904px) {
	.top-xl-initial {
		top: initial !important;
	}

	.top-xl-0 {
		top: 0 !important;
	}

	.top-xl-4 {
		top: 4px !important;
	}

	.top-xl-8 {
		top: 8px !important;
	}

	.top-xl-16 {
		top: 16px !important;
	}

	.top-xl-24 {
		top: 24px !important;
	}

	.top-xl-32 {
		top: 32px !important;
	}

	.top-xl-40 {
		top: 40px !important;
	}

	.top-xl-56 {
		top: 56px !important;
	}

	.top-xl-64 {
		top: 64px !important;
	}

	.top-xl-72 {
		top: 72px !important;
	}

	.top-xl-80 {
		top: 80px !important;
	}

	.top-xl-half {
		top: 50% !important;
	}

	.top-xl-full {
		top: 100% !important;
	}

	.top-xl-topbar {
		top: var(--topbar-height) !important;
	}
}

/*====================================================================
10.2. Offset -> Bottom
====================================================================*/

.bottom-initial {
	bottom: initial !important;
}

.bottom-0 {
	bottom: 0 !important;
}

.bottom-4 {
	bottom: 4px !important;
}

.bottom-8 {
	bottom: 8px !important;
}

.bottom-16 {
	bottom: 16px !important;
}

.bottom-24 {
	bottom: 24px !important;
}

.bottom-32 {
	bottom: 32px !important;
}

.bottom-40 {
	bottom: 40px !important;
}

.bottom-56 {
	bottom: 56px !important;
}

.bottom-64 {
	bottom: 64px !important;
}

.bottom-72 {
	bottom: 72px !important;
}

.bottom-80 {
	bottom: 80px !important;
}

.bottom-half {
	bottom: 50% !important;
}

.bottom-full {
	bottom: 100% !important;
}

.bottom-topbar {
	bottom: var(--topbar-height) !important;
}

@media (min-width: 600px) {
	.bottom-sm-initial {
		bottom: initial !important;
	}

	.bottom-sm-0 {
		bottom: 0 !important;
	}

	.bottom-sm-4 {
		bottom: 4px !important;
	}

	.bottom-sm-8 {
		bottom: 8px !important;
	}

	.bottom-sm-16 {
		bottom: 16px !important;
	}

	.bottom-sm-24 {
		bottom: 24px !important;
	}

	.bottom-sm-32 {
		bottom: 32px !important;
	}

	.bottom-sm-40 {
		bottom: 40px !important;
	}

	.bottom-sm-56 {
		bottom: 56px !important;
	}

	.bottom-sm-64 {
		bottom: 64px !important;
	}

	.bottom-sm-72 {
		bottom: 72px !important;
	}

	.bottom-sm-80 {
		bottom: 80px !important;
	}

	.bottom-sm-half {
		bottom: 50% !important;
	}

	.bottom-sm-full {
		bottom: 100% !important;
	}

	.bottom-sm-topbar {
		bottom: var(--topbar-height) !important;
	}
}

@media (min-width: 960px) {
	.bottom-md-initial {
		bottom: initial !important;
	}

	.bottom-md-0 {
		bottom: 0 !important;
	}

	.bottom-md-4 {
		bottom: 4px !important;
	}

	.bottom-md-8 {
		bottom: 8px !important;
	}

	.bottom-md-16 {
		bottom: 16px !important;
	}

	.bottom-md-24 {
		bottom: 24px !important;
	}

	.bottom-md-32 {
		bottom: 32px !important;
	}

	.bottom-md-40 {
		bottom: 40px !important;
	}

	.bottom-md-56 {
		bottom: 56px !important;
	}

	.bottom-md-64 {
		bottom: 64px !important;
	}

	.bottom-md-72 {
		bottom: 72px !important;
	}

	.bottom-md-80 {
		bottom: 80px !important;
	}

	.bottom-md-half {
		bottom: 50% !important;
	}

	.bottom-md-full {
		bottom: 100% !important;
	}

	.bottom-md-topbar {
		bottom: var(--topbar-height) !important;
	}
}

@media (min-width: 1264px) {
	.bottom-lg-initial {
		bottom: initial !important;
	}

	.bottom-lg-0 {
		bottom: 0 !important;
	}

	.bottom-lg-4 {
		bottom: 4px !important;
	}

	.bottom-lg-8 {
		bottom: 8px !important;
	}

	.bottom-lg-16 {
		bottom: 16px !important;
	}

	.bottom-lg-24 {
		bottom: 24px !important;
	}

	.bottom-lg-32 {
		bottom: 32px !important;
	}

	.bottom-lg-40 {
		bottom: 40px !important;
	}

	.bottom-lg-56 {
		bottom: 56px !important;
	}

	.bottom-lg-64 {
		bottom: 64px !important;
	}

	.bottom-lg-72 {
		bottom: 72px !important;
	}

	.bottom-lg-80 {
		bottom: 80px !important;
	}

	.bottom-lg-half {
		bottom: 50% !important;
	}

	.bottom-lg-full {
		bottom: 100% !important;
	}

	.bottom-lg-topbar {
		bottom: var(--topbar-height) !important;
	}
}

@media (min-width: 1904px) {
	.bottom-xl-initial {
		bottom: initial !important;
	}

	.bottom-xl-0 {
		bottom: 0 !important;
	}

	.bottom-xl-4 {
		bottom: 4px !important;
	}

	.bottom-xl-8 {
		bottom: 8px !important;
	}

	.bottom-xl-16 {
		bottom: 16px !important;
	}

	.bottom-xl-24 {
		bottom: 24px !important;
	}

	.bottom-xl-32 {
		bottom: 32px !important;
	}

	.bottom-xl-40 {
		bottom: 40px !important;
	}

	.bottom-xl-56 {
		bottom: 56px !important;
	}

	.bottom-xl-64 {
		bottom: 64px !important;
	}

	.bottom-xl-72 {
		bottom: 72px !important;
	}

	.bottom-xl-80 {
		bottom: 80px !important;
	}

	.bottom-xl-half {
		bottom: 50% !important;
	}

	.bottom-xl-full {
		bottom: 100% !important;
	}

	.bottom-xl-topbar {
		bottom: var(--topbar-height) !important;
	}
}

/*====================================================================
10.3. Offset -> Left
====================================================================*/

.left-initial {
	left: initial !important;
}

.left-0 {
	left: 0 !important;
}

.left-4 {
	left: 4px !important;
}

.left-8 {
	left: 8px !important;
}

.left-16 {
	left: 16px !important;
}

.left-24 {
	left: 24px !important;
}

.left-32 {
	left: 32px !important;
}

.left-40 {
	left: 40px !important;
}

.left-56 {
	left: 56px !important;
}

.left-64 {
	left: 64px !important;
}

.left-72 {
	left: 72px !important;
}

.left-80 {
	left: 80px !important;
}

.left-half {
	left: 50% !important;
}

.left-full {
	left: 100% !important;
}

@media (min-width: 600px) {
	.left-sm-initial {
		left: initial !important;
	}

	.left-sm-0 {
		left: 0 !important;
	}

	.left-sm-4 {
		left: 4px !important;
	}

	.left-sm-8 {
		left: 8px !important;
	}

	.left-sm-16 {
		left: 16px !important;
	}

	.left-sm-24 {
		left: 24px !important;
	}

	.left-sm-32 {
		left: 32px !important;
	}

	.left-sm-40 {
		left: 40px !important;
	}

	.left-sm-56 {
		left: 56px !important;
	}

	.left-sm-64 {
		left: 64px !important;
	}

	.left-sm-72 {
		left: 72px !important;
	}

	.left-sm-80 {
		left: 80px !important;
	}

	.left-sm-half {
		left: 50% !important;
	}

	.left-sm-full {
		left: 100% !important;
	}
}

@media (min-width: 960px) {
	.left-md-initial {
		left: initial !important;
	}

	.left-md-0 {
		left: 0 !important;
	}

	.left-md-4 {
		left: 4px !important;
	}

	.left-md-8 {
		left: 8px !important;
	}

	.left-md-16 {
		left: 16px !important;
	}

	.left-md-24 {
		left: 24px !important;
	}

	.left-md-32 {
		left: 32px !important;
	}

	.left-md-40 {
		left: 40px !important;
	}

	.left-md-56 {
		left: 56px !important;
	}

	.left-md-64 {
		left: 64px !important;
	}

	.left-md-72 {
		left: 72px !important;
	}

	.left-md-80 {
		left: 80px !important;
	}

	.left-md-half {
		left: 50% !important;
	}

	.left-md-full {
		left: 100% !important;
	}
}

@media (min-width: 1264px) {
	.left-lg-initial {
		left: initial !important;
	}

	.left-lg-0 {
		left: 0 !important;
	}

	.left-lg-4 {
		left: 4px !important;
	}

	.left-lg-8 {
		left: 8px !important;
	}

	.left-lg-16 {
		left: 16px !important;
	}

	.left-lg-24 {
		left: 24px !important;
	}

	.left-lg-32 {
		left: 32px !important;
	}

	.left-lg-40 {
		left: 40px !important;
	}

	.left-lg-56 {
		left: 56px !important;
	}

	.left-lg-64 {
		left: 64px !important;
	}

	.left-lg-72 {
		left: 72px !important;
	}

	.left-lg-80 {
		left: 80px !important;
	}

	.left-lg-half {
		left: 50% !important;
	}

	.left-lg-full {
		left: 100% !important;
	}
}

@media (min-width: 1904px) {
	.left-xl-initial {
		left: initial !important;
	}

	.left-xl-0 {
		left: 0 !important;
	}

	.left-xl-4 {
		left: 4px !important;
	}

	.left-xl-8 {
		left: 8px !important;
	}

	.left-xl-16 {
		left: 16px !important;
	}

	.left-xl-24 {
		left: 24px !important;
	}

	.left-xl-32 {
		left: 32px !important;
	}

	.left-xl-40 {
		left: 40px !important;
	}

	.left-xl-56 {
		left: 56px !important;
	}

	.left-xl-64 {
		left: 64px !important;
	}

	.left-xl-72 {
		left: 72px !important;
	}

	.left-xl-80 {
		left: 80px !important;
	}

	.left-xl-half {
		left: 50% !important;
	}

	.left-xl-full {
		left: 100% !important;
	}
}

/*====================================================================
10.4. Offset -> Right
====================================================================*/

.right-initial {
	right: initial !important;
}

.right-0 {
	right: 0 !important;
}

.right-4 {
	right: 4px !important;
}

.right-8 {
	right: 8px !important;
}

.right-16 {
	right: 16px !important;
}

.right-24 {
	right: 24px !important;
}

.right-32 {
	right: 32px !important;
}

.right-40 {
	right: 40px !important;
}

.right-56 {
	right: 56px !important;
}

.right-64 {
	right: 64px !important;
}

.right-72 {
	right: 72px !important;
}

.right-80 {
	right: 80px !important;
}

.right-half {
	right: 50% !important;
}

.right-full {
	right: 100% !important;
}

@media (min-width: 600px) {
	.right-sm-initial {
		right: initial !important;
	}

	.right-sm-0 {
		right: 0 !important;
	}

	.right-sm-4 {
		right: 4px !important;
	}

	.right-sm-8 {
		right: 8px !important;
	}

	.right-sm-16 {
		right: 16px !important;
	}

	.right-sm-24 {
		right: 24px !important;
	}

	.right-sm-32 {
		right: 32px !important;
	}

	.right-sm-40 {
		right: 40px !important;
	}

	.right-sm-56 {
		right: 56px !important;
	}

	.right-sm-64 {
		right: 64px !important;
	}

	.right-sm-72 {
		right: 72px !important;
	}

	.right-sm-80 {
		right: 80px !important;
	}

	.right-sm-half {
		right: 50% !important;
	}

	.right-sm-full {
		right: 100% !important;
	}
}

@media (min-width: 960px) {
	.right-md-initial {
		right: initial !important;
	}

	.right-md-0 {
		right: 0 !important;
	}

	.right-md-4 {
		right: 4px !important;
	}

	.right-md-8 {
		right: 8px !important;
	}

	.right-md-16 {
		right: 16px !important;
	}

	.right-md-24 {
		right: 24px !important;
	}

	.right-md-32 {
		right: 32px !important;
	}

	.right-md-40 {
		right: 40px !important;
	}

	.right-md-56 {
		right: 56px !important;
	}

	.right-md-64 {
		right: 64px !important;
	}

	.right-md-72 {
		right: 72px !important;
	}

	.right-md-80 {
		right: 80px !important;
	}

	.right-md-half {
		right: 50% !important;
	}

	.right-md-full {
		right: 100% !important;
	}
}

@media (min-width: 1264px) {
	.right-lg-initial {
		right: initial !important;
	}

	.right-lg-0 {
		right: 0 !important;
	}

	.right-lg-4 {
		right: 4px !important;
	}

	.right-lg-8 {
		right: 8px !important;
	}

	.right-lg-16 {
		right: 16px !important;
	}

	.right-lg-24 {
		right: 24px !important;
	}

	.right-lg-32 {
		right: 32px !important;
	}

	.right-lg-40 {
		right: 40px !important;
	}

	.right-lg-56 {
		right: 56px !important;
	}

	.right-lg-64 {
		right: 64px !important;
	}

	.right-lg-72 {
		right: 72px !important;
	}

	.right-lg-80 {
		right: 80px !important;
	}

	.right-lg-half {
		right: 50% !important;
	}

	.right-lg-full {
		right: 100% !important;
	}
}

@media (min-width: 1904px) {
	.right-xl-initial {
		right: initial !important;
	}

	.right-xl-0 {
		right: 0 !important;
	}

	.right-xl-4 {
		right: 4px !important;
	}

	.right-xl-8 {
		right: 8px !important;
	}

	.right-xl-16 {
		right: 16px !important;
	}

	.right-xl-24 {
		right: 24px !important;
	}

	.right-xl-32 {
		right: 32px !important;
	}

	.right-xl-40 {
		right: 40px !important;
	}

	.right-xl-56 {
		right: 56px !important;
	}

	.right-xl-64 {
		right: 64px !important;
	}

	.right-xl-72 {
		right: 72px !important;
	}

	.right-xl-80 {
		right: 80px !important;
	}

	.right-xl-half {
		right: 50% !important;
	}

	.right-xl-full {
		right: 100% !important;
	}
}

/*====================================================================
11. Width
====================================================================*/

.width-4 {
	width: 4px !important;
}

.width-8 {
	width: 8px !important;
}

.width-16 {
	width: 16px !important;
}

.width-24 {
	width: 24px !important;
}

.width-32 {
	width: 32px !important;
}

.width-40 {
	width: 40px !important;
}

.width-56 {
	width: 56px !important;
}

.width-64 {
	width: 64px !important;
}

.width-72 {
	width: 72px !important;
}

.width-80 {
	width: 80px !important;
}

.width-128 {
	width: 128px !important;
}

.width-160 {
	width: 160px !important;
}

.width-200 {
	width: 200px !important;
}

.width-256 {
	width: 256px !important;
}

.width-320 {
	width: 320px !important;
}

.width-480 {
	width: 480px !important;
}

.width-512 {
	width: 512px !important;
}

.width-640 {
	width: 640px !important;
}

.width-720 {
	width: 720px !important;
}

.width-1024 {
	width: 1024px !important;
}

.width-quarter {
	width: 25% !important;
}

.width-half {
	width: 50% !important;
}

.width-full {
	width: 100% !important;
}

@media (min-width: 600px) {
	.width-sm-4 {
		width: 4px !important;
	}

	.width-sm-8 {
		width: 8px !important;
	}

	.width-sm-16 {
		width: 16px !important;
	}

	.width-sm-24 {
		width: 24px !important;
	}

	.width-sm-32 {
		width: 32px !important;
	}

	.width-sm-40 {
		width: 40px !important;
	}

	.width-sm-56 {
		width: 56px !important;
	}

	.width-sm-64 {
		width: 64px !important;
	}

	.width-sm-72 {
		width: 72px !important;
	}

	.width-sm-80 {
		width: 80px !important;
	}

	.width-sm-128 {
		width: 128px !important;
	}

	.width-sm-160 {
		width: 160px !important;
	}

	.width-sm-200 {
		width: 200px !important;
	}

	.width-sm-256 {
		width: 256px !important;
	}

	.width-sm-320 {
		width: 320px !important;
	}

	.width-sm-480 {
		width: 480px !important;
	}

	.width-sm-512 {
		width: 512px !important;
	}

	.width-sm-640 {
		width: 640px !important;
	}

	.width-sm-720 {
		width: 720px !important;
	}

	.width-sm-1024 {
		width: 1024px !important;
	}

	.width-sm-quarter {
		width: 25% !important;
	}

	.width-sm-half {
		width: 50% !important;
	}

	.width-sm-full {
		width: 100% !important;
	}
}

@media (min-width: 960px) {
	.width-md-4 {
		width: 4px !important;
	}

	.width-md-8 {
		width: 8px !important;
	}

	.width-md-16 {
		width: 16px !important;
	}

	.width-md-24 {
		width: 24px !important;
	}

	.width-md-32 {
		width: 32px !important;
	}

	.width-md-40 {
		width: 40px !important;
	}

	.width-md-56 {
		width: 56px !important;
	}

	.width-md-64 {
		width: 64px !important;
	}

	.width-md-72 {
		width: 72px !important;
	}

	.width-md-80 {
		width: 80px !important;
	}

	.width-md-128 {
		width: 128px !important;
	}

	.width-md-160 {
		width: 160px !important;
	}

	.width-md-200 {
		width: 200px !important;
	}

	.width-md-256 {
		width: 256px !important;
	}

	.width-md-320 {
		width: 320px !important;
	}

	.width-md-480 {
		width: 480px !important;
	}

	.width-md-512 {
		width: 512px !important;
	}

	.width-md-640 {
		width: 640px !important;
	}

	.width-md-720 {
		width: 720px !important;
	}

	.width-md-1024 {
		width: 1024px !important;
	}

	.width-md-quarter {
		width: 25% !important;
	}

	.width-md-half {
		width: 50% !important;
	}

	.width-md-full {
		width: 100% !important;
	}
}

@media (min-width: 1264px) {
}

@media (min-width: 1904px) {
}

/*====================================================================
11.1. Width -> Max
====================================================================*/

.max-width-4 {
	max-width: 4px !important;
}

.max-width-8 {
	max-width: 8px !important;
}

.max-width-16 {
	max-width: 16px !important;
}

.max-width-24 {
	max-width: 24px !important;
}

.max-width-32 {
	max-width: 32px !important;
}

.max-width-40 {
	max-width: 40px !important;
}

.max-width-56 {
	max-width: 56px !important;
}

.max-width-64 {
	max-width: 64px !important;
}

.max-width-72 {
	max-width: 72px !important;
}

.max-width-80 {
	max-width: 80px !important;
}

.max-width-128 {
	max-width: 128px !important;
}

.max-width-160 {
	max-width: 160px !important;
}

.max-width-200 {
	max-width: 200px !important;
}

.max-width-256 {
	max-width: 256px !important;
}

.max-width-320 {
	max-width: 320px !important;
}

.max-width-480 {
	max-width: 480px !important;
}

.max-width-512 {
	max-width: 512px !important;
}

.max-width-640 {
	max-width: 640px !important;
}

.max-width-720 {
	max-width: 720px !important;
}

.max-width-1024 {
	max-width: 1024px !important;
}

.max-width-quarter {
	max-width: 25% !important;
}

.max-width-half {
	max-width: 50% !important;
}

.max-width-full {
	max-width: 100% !important;
}

@media (min-width: 600px) {
	.max-width-sm-4 {
		max-width: 4px !important;
	}

	.max-width-sm-8 {
		max-width: 8px !important;
	}

	.max-width-sm-16 {
		max-width: 16px !important;
	}

	.max-width-sm-24 {
		max-width: 24px !important;
	}

	.max-width-sm-32 {
		max-width: 32px !important;
	}

	.max-width-sm-40 {
		max-width: 40px !important;
	}

	.max-width-sm-56 {
		max-width: 56px !important;
	}

	.max-width-sm-64 {
		max-width: 64px !important;
	}

	.max-width-sm-72 {
		max-width: 72px !important;
	}

	.max-width-sm-80 {
		max-width: 80px !important;
	}

	.max-width-sm-128 {
		max-width: 128px !important;
	}

	.max-width-sm-160 {
		max-width: 160px !important;
	}

	.max-width-sm-200 {
		max-width: 200px !important;
	}

	.max-width-sm-256 {
		max-width: 256px !important;
	}

	.max-width-sm-320 {
		max-width: 320px !important;
	}

	.max-width-sm-480 {
		max-width: 480px !important;
	}

	.max-width-sm-512 {
		max-width: 512px !important;
	}

	.max-width-sm-640 {
		max-width: 640px !important;
	}

	.max-width-sm-720 {
		max-width: 720px !important;
	}

	.max-width-sm-1024 {
		max-width: 1024px !important;
	}

	.max-width-sm-quarter {
		max-width: 25% !important;
	}

	.max-width-sm-half {
		max-width: 50% !important;
	}

	.max-width-sm-full {
		max-width: 100% !important;
	}
}

@media (min-width: 960px) {
	.max-width-md-4 {
		max-width: 4px !important;
	}

	.max-width-md-8 {
		max-width: 8px !important;
	}

	.max-width-md-16 {
		max-width: 16px !important;
	}

	.max-width-md-24 {
		max-width: 24px !important;
	}

	.max-width-md-32 {
		max-width: 32px !important;
	}

	.max-width-md-40 {
		max-width: 40px !important;
	}

	.max-width-md-56 {
		max-width: 56px !important;
	}

	.max-width-md-64 {
		max-width: 64px !important;
	}

	.max-width-md-72 {
		max-width: 72px !important;
	}

	.max-width-md-80 {
		max-width: 80px !important;
	}

	.max-width-md-128 {
		max-width: 128px !important;
	}

	.max-width-md-160 {
		max-width: 160px !important;
	}

	.max-width-md-200 {
		max-width: 200px !important;
	}

	.max-width-md-256 {
		max-width: 256px !important;
	}

	.max-width-md-320 {
		max-width: 320px !important;
	}

	.max-width-md-480 {
		max-width: 480px !important;
	}

	.max-width-md-512 {
		max-width: 512px !important;
	}

	.max-width-md-640 {
		max-width: 640px !important;
	}

	.max-width-md-720 {
		max-width: 720px !important;
	}

	.max-width-md-1024 {
		max-width: 1024px !important;
	}

	.max-width-md-quarter {
		max-width: 25% !important;
	}

	.max-width-md-half {
		max-width: 50% !important;
	}

	.max-width-md-full {
		max-width: 100% !important;
	}
}

/*====================================================================
11.2. Width -> Min
====================================================================*/

.min-width-4 {
	min-width: 4px !important;
}

.min-width-8 {
	min-width: 8px !important;
}

.min-width-16 {
	min-width: 16px !important;
}

.min-width-24 {
	min-width: 24px !important;
}

.min-width-32 {
	min-width: 32px !important;
}

.min-width-40 {
	min-width: 40px !important;
}

.min-width-56 {
	min-width: 56px !important;
}

.min-width-64 {
	min-width: 64px !important;
}

.min-width-72 {
	min-width: 72px !important;
}

.min-width-80 {
	min-width: 80px !important;
}

.min-width-128 {
	min-width: 128px !important;
}

.min-width-160 {
	min-width: 160px !important;
}

.min-width-200 {
	min-width: 200px !important;
}

.min-width-256 {
	min-width: 256px !important;
}

.min-width-320 {
	min-width: 320px !important;
}

.min-width-480 {
	min-width: 480px !important;
}

.min-width-512 {
	min-width: 512px !important;
}

.min-width-640 {
	min-width: 640px !important;
}

.min-width-720 {
	min-width: 720px !important;
}

.min-width-1024 {
	min-width: 1024px !important;
}

.min-width-quarter {
	min-width: 25% !important;
}

.min-width-half {
	min-width: 50% !important;
}

.min-width-full {
	min-width: 100% !important;
}

/*====================================================================
12. Height
====================================================================*/

.height-auto {
	height: auto !important;
}

.height-4 {
	height: 4px !important;
}

.height-8 {
	height: 8px !important;
}

.height-16 {
	height: 16px !important;
}

.height-24 {
	height: 24px !important;
}

.height-32 {
	height: 32px !important;
}

.height-40 {
	height: 40px !important;
}

.height-56 {
	height: 56px !important;
}

.height-64 {
	height: 64px !important;
}

.height-72 {
	height: 72px !important;
}

.height-80 {
	height: 80px !important;
}

.height-128 {
	height: 128px !important;
}

.height-160 {
	height: 160px !important;
}

.height-200 {
	height: 200px !important;
}

.height-256 {
	height: 256px !important;
}

.height-320 {
	height: 320px !important;
}

.height-480 {
	height: 480px !important;
}

.height-512 {
	height: 512px !important;
}

.height-640 {
	height: 640px !important;
}

.height-720 {
	height: 720px !important;
}

.height-1024 {
	height: 1024px !important;
}

.height-quarter {
	height: 25% !important;
}

.height-half {
	height: 50% !important;
}

.height-full {
	height: 100% !important;
}

.height-topbar {
	height: var(--topbar-height) !important;
}

@media (min-width: 960px) {
	.height-md-720 {
		height: 720px !important;
	}
}

/*====================================================================
12.1. Height -> Max
====================================================================*/

.max-height-4 {
	max-height: 4px !important;
}

.max-height-8 {
	max-height: 8px !important;
}

.max-height-16 {
	max-height: 16px !important;
}

.max-height-24 {
	max-height: 24px !important;
}

.max-height-32 {
	max-height: 32px !important;
}

.max-height-40 {
	max-height: 40px !important;
}

.max-height-56 {
	max-height: 56px !important;
}

.max-height-64 {
	max-height: 64px !important;
}

.max-height-72 {
	max-height: 72px !important;
}

.max-height-80 {
	max-height: 80px !important;
}

.max-height-128 {
	max-height: 128px !important;
}

.max-height-160 {
	max-height: 160px !important;
}

.max-height-200 {
	max-height: 200px !important;
}

.max-height-256 {
	max-height: 256px !important;
}

.max-height-320 {
	max-height: 320px !important;
}

.max-height-480 {
	max-height: 480px !important;
}

.max-height-512 {
	max-height: 512px !important;
}

.max-height-640 {
	max-height: 640px !important;
}

.max-height-720 {
	max-height: 720px !important;
}

.max-height-1024 {
	max-height: 1024px !important;
}

.max-height-quarter {
	max-height: 25% !important;
}

.max-height-half {
	max-height: 50% !important;
}

.max-height-full {
	max-height: 100% !important;
}

.max-height-topbar {
	max-height: var(--topbar-height) !important;
}

/*====================================================================
12.2. Height -> Min
====================================================================*/

.min-height-4 {
	min-height: 4px !important;
}

.min-height-8 {
	min-height: 8px !important;
}

.min-height-16 {
	min-height: 16px !important;
}

.min-height-24 {
	min-height: 24px !important;
}

.min-height-32 {
	min-height: 32px !important;
}

.min-height-40 {
	min-height: 40px !important;
}

.min-height-56 {
	min-height: 56px !important;
}

.min-height-64 {
	min-height: 64px !important;
}

.min-height-72 {
	min-height: 72px !important;
}

.min-height-80 {
	min-height: 80px !important;
}

.min-height-128 {
	min-height: 128px !important;
}

.min-height-160 {
	min-height: 160px !important;
}

.min-height-200 {
	min-height: 200px !important;
}

.min-height-256 {
	min-height: 256px !important;
}

.min-height-320 {
	min-height: 320px !important;
}

.min-height-480 {
	min-height: 480px !important;
}

.min-height-512 {
	min-height: 512px !important;
}

.min-height-640 {
	min-height: 640px !important;
}

.min-height-720 {
	min-height: 720px !important;
}

.min-height-1024 {
	min-height: 1024px !important;
}

.min-height-quarter {
	min-height: 25% !important;
}

.min-height-half {
	min-height: 50% !important;
}

.min-height-full {
	min-height: 100% !important;
}

.min-height-topbar {
	min-height: var(--topbar-height) !important;
}

/*====================================================================
13. Aspect Ratio
====================================================================*/

.ar-1-1 {
	aspect-ratio: 1/1 !important;
}

.ar-2-1 {
	aspect-ratio: 2/1 !important;
}

.ar-3-1 {
	aspect-ratio: 3/1 !important;
}

.ar-4-1 {
	aspect-ratio: 4/1 !important;
}

.ar-3-2 {
	aspect-ratio: 3/2 !important;
}

.ar-4-3 {
	aspect-ratio: 4/3 !important;
}

.ar-16-9 {
	aspect-ratio: 16/9 !important;
}

.ar-2-3 {
	aspect-ratio: 2/3 !important;
}

.ar-3-4 {
	aspect-ratio: 3/4 !important;
}

.ar-9-16 {
	aspect-ratio: 9/16 !important;
}

@media (min-width: 600px) {
	.ar-sm-1-1 {
		aspect-ratio: 1/1 !important;
	}

	.ar-sm-2-1 {
		aspect-ratio: 2/1 !important;
	}

	.ar-sm-3-1 {
		aspect-ratio: 3/1 !important;
	}

	.ar-sm-4-1 {
		aspect-ratio: 4/1 !important;
	}

	.ar-sm-3-2 {
		aspect-ratio: 3/2 !important;
	}

	.ar-sm-4-3 {
		aspect-ratio: 4/3 !important;
	}

	.ar-sm-16-9 {
		aspect-ratio: 16/9 !important;
	}

	.ar-sm-2-3 {
		aspect-ratio: 2/3 !important;
	}

	.ar-sm-3-4 {
		aspect-ratio: 3/4 !important;
	}

	.ar-sm-9-16 {
		aspect-ratio: 9/16 !important;
	}
}

@media (min-width: 960px) {
	.ar-md-1-1 {
		aspect-ratio: 1/1 !important;
	}

	.ar-md-2-1 {
		aspect-ratio: 2/1 !important;
	}

	.ar-md-3-1 {
		aspect-ratio: 3/1 !important;
	}

	.ar-md-4-1 {
		aspect-ratio: 4/1 !important;
	}

	.ar-md-3-2 {
		aspect-ratio: 3/2 !important;
	}

	.ar-md-4-3 {
		aspect-ratio: 4/3 !important;
	}

	.ar-md-16-9 {
		aspect-ratio: 16/9 !important;
	}

	.ar-md-2-3 {
		aspect-ratio: 2/3 !important;
	}

	.ar-md-3-4 {
		aspect-ratio: 3/4 !important;
	}

	.ar-md-9-16 {
		aspect-ratio: 9/16 !important;
	}
}

@media (min-width: 1264px) {
	.ar-lg-1-1 {
		aspect-ratio: 1/1 !important;
	}

	.ar-lg-2-1 {
		aspect-ratio: 2/1 !important;
	}

	.ar-lg-3-1 {
		aspect-ratio: 3/1 !important;
	}

	.ar-lg-4-1 {
		aspect-ratio: 4/1 !important;
	}

	.ar-lg-3-2 {
		aspect-ratio: 3/2 !important;
	}

	.ar-lg-4-3 {
		aspect-ratio: 4/3 !important;
	}

	.ar-lg-16-9 {
		aspect-ratio: 16/9 !important;
	}

	.ar-lg-2-3 {
		aspect-ratio: 2/3 !important;
	}

	.ar-lg-3-4 {
		aspect-ratio: 3/4 !important;
	}

	.ar-lg-9-16 {
		aspect-ratio: 9/16 !important;
	}
}

@media (min-width: 1904px) {
	.ar-xl-1-1 {
		aspect-ratio: 1/1 !important;
	}

	.ar-xl-2-1 {
		aspect-ratio: 2/1 !important;
	}

	.ar-xl-3-1 {
		aspect-ratio: 3/1 !important;
	}

	.ar-xl-4-1 {
		aspect-ratio: 4/1 !important;
	}

	.ar-xl-3-2 {
		aspect-ratio: 3/2 !important;
	}

	.ar-xl-4-3 {
		aspect-ratio: 4/3 !important;
	}

	.ar-xl-16-9 {
		aspect-ratio: 16/9 !important;
	}

	.ar-xl-2-3 {
		aspect-ratio: 2/3 !important;
	}

	.ar-xl-3-4 {
		aspect-ratio: 3/4 !important;
	}

	.ar-xl-9-16 {
		aspect-ratio: 9/16 !important;
	}
}

/*====================================================================
14. Overflow
====================================================================*/

.overflow-auto{
	overflow: auto !important;
}

.overflow-visivle {
	overflow: visible !important;
}

.overflow-hidden {
	overflow: hidden !important;
}

.overflow-scroll{
	overflow: scroll !important;
}

.overflow-x-auto{
	overflow-x: auto !important;
}

.overflow-x-visivle {
	overflow-x: visible !important;
}

.overflow-x-hidden {
	overflow-x: hidden !important;
}

.overflow-x-scroll{
	overflow-x: scroll !important;
}

.overflow-y-auto{
	overflow-y: auto !important;
}

.overflow-y-visivle {
	overflow-y: visible !important;
}

.overflow-y-hidden {
	overflow-y: hidden !important;
}

.overflow-y-scroll{
	overflow-y: scroll !important;
}

/*====================================================================
15. Z Index
====================================================================*/

.z-index--1 {
	z-index: -1 !important;
}

.z-index-0 {
	z-index: 0 !important;
}

.z-index-1 {
	z-index: 1 !important;
}

.z-index-10 {
	z-index: 10 !important;
}

.z-index-100 {
	z-index: 100 !important;
}

.z-index-1000 {
	z-index: 1000 !important;
}

.z-index-5000 {
	z-index: 5000 !important;
}

.z-index-10000 {
	z-index: 10000 !important;
}

.z-index-max {
	z-index: 2147483647 !important;
}

@media (min-width: 600px) {
	.z-index-sm--1 {
		z-index: -1 !important;
	}

	.z-index-sm-0 {
		z-index: 0 !important;
	}

	.z-index-sm-1 {
		z-index: 1 !important;
	}

	.z-index-sm-10 {
		z-index: 10 !important;
	}

	.z-index-sm-100 {
		z-index: 100 !important;
	}

	.z-index-sm-1000 {
		z-index: 1000 !important;
	}

	.z-index-sm-5000 {
		z-index: 5000 !important;
	}

	.z-index-sm-10000 {
		z-index: 10000 !important;
	}

	.z-index-sm-max {
		z-index: 2147483647 !important;
	}
}

@media (min-width: 960px) {
	.z-index-md--1 {
		z-index: -1 !important;
	}

	.z-index-md-0 {
		z-index: 0 !important;
	}

	.z-index-md-1 {
		z-index: 1 !important;
	}

	.z-index-md-10 {
		z-index: 10 !important;
	}

	.z-index-md-100 {
		z-index: 100 !important;
	}

	.z-index-md-1000 {
		z-index: 1000 !important;
	}

	.z-index-md-5000 {
		z-index: 5000 !important;
	}

	.z-index-md-10000 {
		z-index: 10000 !important;
	}

	.z-index-md-max {
		z-index: 2147483647 !important;
	}
}

@media (min-width: 1264px) {
	.z-index-lg--1 {
		z-index: -1 !important;
	}

	.z-index-lg-0 {
		z-index: 0 !important;
	}

	.z-index-lg-1 {
		z-index: 1 !important;
	}

	.z-index-lg-10 {
		z-index: 10 !important;
	}

	.z-index-lg-100 {
		z-index: 100 !important;
	}

	.z-index-lg-1000 {
		z-index: 1000 !important;
	}

	.z-index-lg-5000 {
		z-index: 5000 !important;
	}

	.z-index-lg-10000 {
		z-index: 10000 !important;
	}

	.z-index-lg-max {
		z-index: 2147483647 !important;
	}
}

@media (min-width: 1904px) {
	.z-index-xl--1 {
		z-index: -1 !important;
	}

	.z-index-xl-0 {
		z-index: 0 !important;
	}

	.z-index-xl-1 {
		z-index: 1 !important;
	}

	.z-index-xl-10 {
		z-index: 10 !important;
	}

	.z-index-xl-100 {
		z-index: 100 !important;
	}

	.z-index-xl-1000 {
		z-index: 1000 !important;
	}

	.z-index-xl-1 {
		z-index: 5000 !important;
	}

	.z-index-xl-10000 {
		z-index: 10000 !important;
	}

	.z-index-xl-max {
		z-index: 2147483647 !important;
	}
}

/*====================================================================
16. Elevation
====================================================================*/

.elevation-1:before,
.elevation-2:before,
.elevation-3:before,
.elevation-4:before,
.elevation-5:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background-color: var(--primary-40);
	opacity: 0;
}

.elevation-1 {
	position: relative;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.3), 0 1px 3px 1px rgba(0,0,0,.15) !important;
}

.elevation-2 {
	position: relative;
	box-shadow: 0 1px 2px 0 rgba(0,0,0,.3), 0 2px 6px 2px rgba(0,0,0,.15) !important;
}

.elevation-3 {
	position: relative;
	box-shadow: 0 1px 3px 0 rgba(0,0,0,.3), 0 4px 8px 3px rgba(0,0,0,.15) !important;
}

.elevation-4 {
	position: relative;
	box-shadow: 0 2px 3px 0 rgba(0,0,0,.3), 0 6px 10px 4px rgba(0,0,0,.15) !important;
}

.elevation-5 {
	position: relative;
	box-shadow: 0 4px 4px 0 rgba(0,0,0,.3), 0 8px 12px 6px rgba(0,0,0,.15) !important;
}

.bg-surface,
.bg-surface-variant {
	position: relative;
	z-index: 1;
}

.bg-surface:before,
.bg-surface-variant:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background-color: var(--primary-40);
	opacity: 0;
}

.dark .bg-surface:before,
.dark .bg-surface-variant:before {
	background-color: var(--primary-80);
}

.bg-surface.elevation-1:before,
.bg-surface-variant.elevation-1:before {
	opacity: .05;
}

.bg-surface.elevation-2:before,
.bg-surface-variant.elevation-2:before {
	opacity: .08;
}

.bg-surface.elevation-3:before,
.bg-surface-variant.elevation-3:before {
	opacity: .11;
}

.bg-surface.elevation-4:before,
.bg-surface-variant.elevation-4:before {
	opacity: .12;
}

.bg-surface.elevation-5:before,
.bg-surface-variant.elevation-5:before {
	opacity: .14;
}

/*====================================================================
17. Round
====================================================================*/

.r-0,
.r-0:before {
	border-radius: 0px !important;
}

.r-4,
.r-4:before {
	border-radius: 4px !important;
}

.r-8,
.r-8:before {
	border-radius: 8px !important;
}

.r-12,
.r-12:before {
	border-radius: 12px !important;
}

.r-16,
.r-16:before {
	border-radius: 16px !important;
}

.r-28,
.r-28:before {
	border-radius: 28px !important;
}

.r-full,
.r-full:before {
	border-radius: 99999px !important;
}

@media (min-width: 600px) {
	.r-sm-0,
	.r-sm-0:before {
		border-radius: 0px !important;
	}

	.r-sm-4,
	.r-sm-4:before {
		border-radius: 4px !important;
	}

	.r-sm-8,
	.r-sm-8:before {
		border-radius: 8px !important;
	}

	.r-sm-12,
	.r-sm-12:before {
		border-radius: 12px !important;
	}

	.r-sm-16,
	.r-sm-16:before {
		border-radius: 16px !important;
	}

	.r-sm-28,
	.r-sm-28:before {
		border-radius: 28px !important;
	}

	.r-sm-full,
	.r-sm-full:before {
		border-radius: 99999px !important;
	}
}

@media (min-width: 960px) {
	.r-md-0,
	.r-md-0:before {
		border-radius: 0px !important;
	}

	.r-md-4,
	.r-md-4:before {
		border-radius: 4px !important;
	}

	.r-md-8,
	.r-md-8:before {
		border-radius: 8px !important;
	}

	.r-md-12,
	.r-md-12:before {
		border-radius: 12px !important;
	}

	.r-md-16,
	.r-md-16:before {
		border-radius: 16px !important;
	}

	.r-md-28,
	.r-md-28:before {
		border-radius: 28px !important;
	}

	.r-md-full,
	.r-md-full:before {
		border-radius: 99999px !important;
	}
}

@media (min-width: 1264px) {
	.r-lg-0,
	.r-lg-0:before {
		border-radius: 0px !important;
	}

	.r-lg-4,
	.r-lg-4:before {
		border-radius: 4px !important;
	}

	.r-lg-8,
	.r-lg-8:before {
		border-radius: 8px !important;
	}

	.r-lg-12,
	.r-lg-12:before {
		border-radius: 12px !important;
	}

	.r-lg-16,
	.r-lg-16:before {
		border-radius: 16px !important;
	}

	.r-lg-28,
	.r-lg-28:before {
		border-radius: 28px !important;
	}

	.r-lg-full,
	.r-lg-full:before {
		border-radius: 99999px !important;
	}
}

@media (min-width: 1904px) {
	.r-xl-0,
	.r-xl-0:before {
		border-radius: 0px !important;
	}

	.r-xl-4,
	.r-xl-4:before {
		border-radius: 4px !important;
	}

	.r-xl-8,
	.r-xl-8:before {
		border-radius: 8px !important;
	}

	.r-xl-12,
	.r-xl-12:before {
		border-radius: 12px !important;
	}

	.r-xl-16,
	.r-xl-16:before {
		border-radius: 16px !important;
	}

	.r-xl-28,
	.r-xl-28:before {
		border-radius: 28px !important;
	}

	.r-xl-full,
	.r-xl-full:before {
		border-radius: 99999px !important;
	}
}

/*====================================================================
18. Backdrop
====================================================================*/

/*====================================================================
18.1. Backdrop -> Blur
====================================================================*/

.backdrop-blur-0 {
	-webkit-backdrop-filter: blur(0) !important;
	        backdrop-filter: blur(0) !important;
}

.backdrop-blur-2 {
	-webkit-backdrop-filter: blur(2px) !important;
	        backdrop-filter: blur(2px) !important;
}

.backdrop-blur-4 {
	-webkit-backdrop-filter: blur(4px) !important;
	        backdrop-filter: blur(4px) !important;
}

.backdrop-blur-8 {
	-webkit-backdrop-filter: blur(8px) !important;
	        backdrop-filter: blur(8px) !important;
}

.backdrop-blur-16 {
	-webkit-backdrop-filter: blur(16px) !important;
	        backdrop-filter: blur(16px) !important;
}

/*====================================================================
19. Typography
====================================================================*/

/*====================================================================
19.1. Typography -> html tags
====================================================================*/

html,
body {
	font-family: 'Roboto', sans-serif;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.5px;
}

a,
a:visited {
	color: var(--neutral-10);
	text-decoration: none;
}

a:hover {
	color: var(--primary-20);
}

.dark a,
.dark a:visited {
	color: var(--primary-80);
}

.dark a:hover {
	color: var(--primary-90);
}

::selection {
	color: var(--neutral-99);
	background: #596e53;
}

.dark::selection {
	color: var(--neutral-10);
	background: var(--primary-80);
}

p {
	margin: 0 0 16px 0;
}

code,
kbd,
pre,
samp {
	font-size: 14px;
	line-height: 16px;
	padding: 0 8px;
	font-family: monospace;
	background-color: var(--neutral-90);
	border-radius: 4px;
}

pre {
	padding: 8px;
	 -moz-tab-size: 2em; /* Firefox */
	      tab-size: 2em;
}

pre code {
	display: block;
}

.dark code,
.dark kbd,
.dark pre,
.dark samp {
	background-color: var(--neutral-20);
}

label {
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.5px;
}

/*====================================================================
19.2. Typography -> headings
====================================================================*/

h1 {
	font-weight: normal;
	font-size: 22px;
	line-height: 28px;
	margin-top: 0;
	margin-bottom: 8px;
}

h2 {
	font-weight: normal;
	font-size: 20px;
	line-height: 24px;
	margin-top: 0;
	margin-bottom: 16px;
}

h3 {
	font-weight: normal;
	font-size: 18px;
	line-height: 24px;
	margin-top: 0;
	margin-bottom: 16px;
}

h4 {
	font-weight: 500;
	font-size: 22px;
	line-height: 28px;
	letter-spacing: 0;
	margin-top: 0;
	margin-bottom: 8px;
}

h5 {
	font-weight: 500;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: 0.1px;
	margin-top: 0;
	margin-bottom: 8px;
}

h6 {
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: 0.1px;
	margin-top: 0;
	margin-bottom: 8px;
}

@media (min-width: 360px) {
	h1 {
		font-size: 32px;
		line-height: 40px;
	}

	h2 {
		font-size: 28px;
		line-height: 36px;
	}

	h3 {
		font-size: 24px;
		line-height: 32px;
	}
}

/*====================================================================
19.2. Typography -> Display
====================================================================*/

.text-display-l {
	font-weight: normal !important;
	font-size: 32px !important;
	line-height: 40px !important;
	letter-spacing: -0.25px !important;
	margin: 0 !important;
}

.text-display-m {
	font-weight: normal !important;
	font-size: 28px !important;
	line-height: 36px !important;
	margin: 0 !important;
}

.text-display-s {
	font-weight: normal !important;
	font-size: 22px !important;
	line-height: 32px !important;
	margin: 0 !important;
}

@media (min-width: 360px) {
	.text-display-l {
		font-size: 40px !important;
		line-height: 52px !important;
	}

	.text-display-m {
		font-size: 32px !important;
		line-height: 40px !important;
	}

	.text-display-s {
		font-size: 28px !important;
		line-height: 36px !important;
	}
}

@media (min-width: 600px) {
	.text-display-l {
		font-size: 48px !important;
		line-height: 58px !important;
	}

	.text-display-m {
		font-size: 36px !important;
		line-height: 44px !important;
	}

	.text-display-s {
		font-size: 32px !important;
		line-height: 40px !important;
	}
}

@media (min-width: 1264px) {
	.text-display-l {
		font-size: 57px !important;
		line-height: 64px !important;
	}

	.text-display-m {
		font-size: 45px !important;
		line-height: 52px !important;
	}

	.text-display-s {
		font-size: 36px !important;
		line-height: 44px !important;
	}
}

@media (min-width: 1904px) {
	.text-display-l {
		font-size: 72px !important;
		line-height: 80px !important;
	}

	.text-display-m {
		font-size: 52px !important;
		line-height: 64px !important;
	}

	.text-display-s {
		font-size: 45px !important;
		line-height: 52px !important;
	}
}

/*====================================================================
19.3. Typography -> Headlines
====================================================================*/

.text-headline-l {
	font-weight: normal !important;
	font-size: 22px !important;
	line-height: 28px !important;
}

.text-headline-m {
	font-weight: normal !important;
	font-size: 20px !important;
	line-height: 24px !important;
}

.text-headline-s {
	font-weight: normal !important;
	font-size: 18px !important;
	line-height: 24px !important;
}

@media (min-width: 360px) {
	.text-headline-l {
		font-size: 32px !important;
		line-height: 40px !important;
	}

	.text-headline-m {
		font-size: 28px !important;
		line-height: 36px !important;
	}

	.text-headline-s {
		font-size: 24px !important;
		line-height: 32px !important;
	}
}

/*====================================================================
19.4. Typography -> Titles
====================================================================*/

.text-title-l {
	font-weight: 500 !important;
	font-size: 22px !important;
	line-height: 28px !important;
	letter-spacing: 0 !important;
}

.text-title-m {
	font-weight: 500 !important;
	font-size: 16px !important;
	line-height: 24px !important;
	letter-spacing: 0.1px !important;
}

.text-title-s {
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	letter-spacing: 0.1px !important;
}

/*====================================================================
19.5. Typography -> Body
====================================================================*/

.text-body-l {
	font-size: 16px !important;
	line-height: 24px !important;
	letter-spacing: 0.5px !important;
}


.text-body-m {
	font-size: 14px !important;
	line-height: 20px !important;
	letter-spacing: 0.25px !important;
}

.text-body-s {
	font-size: 12px !important;
	line-height: 16px !important;
	letter-spacing: 0.4px !important;
}

/*====================================================================
19.6. Typography -> Labels
====================================================================*/

.text-label-l {
	font-weight: 500 !important;
	font-size: 14px !important;
	line-height: 20px !important;
	letter-spacing: 0.1px !important;
}

.text-label-m {
	font-weight: 500 !important;
	font-size: 12px !important;
	line-height: 16px !important;
	letter-spacing: 0.5px !important;
}

.text-label-s {
	font-weight: 500 !important;
	font-size: 11px !important;
	line-height: 16px !important;
	letter-spacing: 0.5px !important;
}

/*====================================================================
19.7. Typography -> Font Weights
====================================================================*/

.bold {
	font-weight: 700 !important;
}

.medium {
	font-weight: 500 !important;
}

.normal {
	font-weight: 400 !important;
}

.thin {
	font-weight: 100 !important;
}

/*====================================================================
19.8. Typography -> Text Align
====================================================================*/

.text-initial {
	text-align: initial !important;
}

.text-left {
	text-align: left !important;
}

.text-center {
	text-align: center !important;
}

.text-right {
	text-align: right !important;
}

@media (min-width: 600px) {
	.text-sm-initial {
		text-align: initial !important;
	}

	.text-sm-left {
		text-align: left !important;
	}

	.text-sm-center {
		text-align: center !important;
	}

	.text-sm-right {
		text-align: right !important;
	}
}

@media (min-width: 960px) {
	.text-md-initial {
		text-align: initial !important;
	}

	.text-md-left {
		text-align: left !important;
	}

	.text-md-center {
		text-align: center !important;
	}

	.text-md-right {
		text-align: right !important;
	}
}

@media (min-width: 1264px) {
	.text-lg-initial {
		text-align: initial !important;
	}

	.text-lg-left {
		text-align: left !important;
	}

	.text-lg-center {
		text-align: center !important;
	}

	.text-lg-right {
		text-align: right !important;
	}
}

@media (min-width: 1904px) {
	.text-xl-initial {
		text-align: initial !important;
	}

	.text-xl-left {
		text-align: left !important;
	}

	.text-xl-center {
		text-align: center !important;
	}

	.text-xl-right {
		text-align: right !important;
	}
}

/*====================================================================
19.9. Typography -> White Spaces
====================================================================*/

.white-space-nowrap {
	white-space: nowrap;
}

.white-space-normal {
	white-space: normal;
}

.white-space-pre {
	white-space: pre;
}

@media (min-width: 600px) {
	.white-space-sm-nowrap {
		white-space: nowrap;
	}

	.white-space-sm-normal {
		white-space: normal;
	}

	.white-space-sm-pre {
		white-space: pre;
	}
}

@media (min-width: 960px) {
	.white-space-md-nowrap {
		white-space: nowrap;
	}

	.white-space-md-normal {
		white-space: normal;
	}

	.white-space-md-pre {
		white-space: pre;
	}
}

@media (min-width: 1264px) {
	.white-space-lg-nowrap {
		white-space: nowrap;
	}

	.white-space-lg-normal {
		white-space: normal;
	}

	.white-space-lg-pre {
		white-space: pre;
	}
}

@media (min-width: 1904px) {
	.white-space-xl-nowrap {
		white-space: nowrap;
	}

	.white-space-xl-normal {
		white-space: normal;
	}

	.white-space-xl-pre {
		white-space: pre;
	}
}

/*====================================================================
20. Margin
====================================================================*/

.m-auto {
	margin: auto !important;
}

.m-0 {
	margin: 0 !important;
}

.m-4 {
	margin: 4px !important;
}

.m-8 {
	margin: 8px !important;
}

.m-16 {
	margin: 16px !important;
}

.m-24 {
	margin: 24px !important;
}

.m-40 {
	margin: 40px !important;
}

.m-80 {
	margin: 80px !important;
}

@media (min-width: 600px) {
	.m-sm-auto {
		margin: auto !important;
	}

	.m-sm-0 {
		margin: 0 !important;
	}

	.m-sm-4 {
		margin: 4px !important;
	}

	.m-sm-8 {
		margin: 8px !important;
	}

	.m-sm-16 {
		margin: 16px !important;
	}

	.m-sm-24 {
		margin: 24px !important;
	}

	.m-sm-40 {
		margin: 40px !important;
	}

	.m-sm-80 {
		margin: 80px !important;
	}
}

@media (min-width: 960px) {
	.m-md-auto {
		margin: auto !important;
	}

	.m-md-0 {
		margin: 0 !important;
	}

	.m-md-4 {
		margin: 4px !important;
	}

	.m-md-8 {
		margin: 8px !important;
	}

	.m-md-16 {
		margin: 16px !important;
	}

	.m-md-24 {
		margin: 24px !important;
	}

	.m-md-40 {
		margin: 40px !important;
	}

	.m-md-80 {
		margin: 80px !important;
	}
}

@media (min-width: 1264px) {
	.m-lg-auto {
		margin: auto !important;
	}

	.m-lg-0 {
		margin: 0 !important;
	}

	.m-lg-4 {
		margin: 4px !important;
	}

	.m-lg-8 {
		margin: 8px !important;
	}

	.m-lg-16 {
		margin: 16px !important;
	}

	.m-lg-24 {
		margin: 24px !important;
	}

	.m-lg-40 {
		margin: 40px !important;
	}

	.m-lg-80 {
		margin: 80px !important;
	}
}

@media (min-width: 1904px) {
	.m-xl-auto {
		margin: auto !important;
	}

	.m-xl-0 {
		margin: 0 !important;
	}

	.m-xl-4 {
		margin: 4px !important;
	}

	.m-xl-8 {
		margin: 8px !important;
	}

	.m-xl-16 {
		margin: 16px !important;
	}

	.m-xl-24 {
		margin: 24px !important;
	}

	.m-xl-40 {
		margin: 40px !important;
	}

	.m-xl-80 {
		margin: 80px !important;
	}
}

/*====================================================================
20.1. Margin -> Left
====================================================================*/

.ml-auto {
	margin-left: auto !important;
}

.ml-0 {
	margin-left: 0 !important;
}

.ml-4 {
	margin-left: 4px !important;
}

.ml-8 {
	margin-left: 8px !important;
}

.ml-16 {
	margin-left: 16px !important;
}

.ml-24 {
	margin-left: 24px !important;
}

.ml-40 {
	margin-left: 40px !important;
}

.ml-80 {
	margin-left: 80px !important;
}

@media (min-width: 600px) {
	.ml-sm-auto {
		margin-left: auto !important;
	}

	.ml-sm-0 {
		margin-left: 0 !important;
	}

	.ml-sm-4 {
		margin-left: 4px !important;
	}

	.ml-sm-8 {
		margin-left: 8px !important;
	}

	.ml-sm-16 {
		margin-left: 16px !important;
	}

	.ml-sm-24 {
		margin-left: 24px !important;
	}

	.ml-sm-40 {
		margin-left: 40px !important;
	}

	.ml-sm-80 {
		margin-left: 80px !important;
	}
}

@media (min-width: 960px) {
	.ml-md-auto {
		margin-left: auto !important;
	}

	.ml-md-0 {
		margin-left: 0 !important;
	}

	.ml-md-4 {
		margin-left: 4px !important;
	}

	.ml-md-8 {
		margin-left: 8px !important;
	}

	.ml-md-16 {
		margin-left: 16px !important;
	}

	.ml-md-24 {
		margin-left: 24px !important;
	}

	.ml-md-40 {
		margin-left: 40px !important;
	}

	.ml-md-80 {
		margin-left: 80px !important;
	}
}

@media (min-width: 1264px) {
	.ml-lg-auto {
		margin-left: auto !important;
	}

	.ml-lg-0 {
		margin-left: 0 !important;
	}

	.ml-lg-4 {
		margin-left: 4px !important;
	}

	.ml-lg-8 {
		margin-left: 8px !important;
	}

	.ml-lg-16 {
		margin-left: 16px !important;
	}

	.ml-lg-24 {
		margin-left: 24px !important;
	}

	.ml-lg-40 {
		margin-left: 40px !important;
	}

	.ml-lg-80 {
		margin-left: 80px !important;
	}
}

@media (min-width: 1904px) {
	.ml-xl-auto {
		margin-left: auto !important;
	}

	.ml-xl-0 {
		margin-left: 0 !important;
	}

	.ml-xl-4 {
		margin-left: 4px !important;
	}

	.ml-xl-8 {
		margin-left: 8px !important;
	}

	.ml-xl-16 {
		margin-left: 16px !important;
	}

	.ml-xl-24 {
		margin-left: 24px !important;
	}

	.ml-xl-40 {
		margin-left: 40px !important;
	}

	.ml-xl-80 {
		margin-left: 80px !important;
	}
}

/*====================================================================
20.2. Margin -> Right
====================================================================*/

.mr-auto {
	margin-right: auto !important;
}

.mr-0 {
	margin-right: 0 !important;
}

.mr-4 {
	margin-right: 4px !important;
}

.mr-8 {
	margin-right: 8px !important;
}

.mr-16 {
	margin-right: 16px !important;
}

.mr-24 {
	margin-right: 24px !important;
}

.mr-40 {
	margin-right: 40px !important;
}

.mr-80 {
	margin-right: 80px !important;
}

@media (min-width: 600px) {
	.mr-sm-auto {
		margin-right: auto !important;
	}

	.mr-sm-0 {
		margin-right: 0 !important;
	}

	.mr-sm-4 {
		margin-right: 4px !important;
	}

	.mr-sm-8 {
		margin-right: 8px !important;
	}

	.mr-sm-16 {
		margin-right: 16px !important;
	}

	.mr-sm-24 {
		margin-right: 24px !important;
	}

	.mr-sm-40 {
		margin-right: 40px !important;
	}

	.mr-sm-80 {
		margin-right: 80px !important;
	}
}

@media (min-width: 960px) {
	.mr-md-auto {
		margin-right: auto !important;
	}

	.mr-md-0 {
		margin-right: 0 !important;
	}

	.mr-md-4 {
		margin-right: 4px !important;
	}

	.mr-md-8 {
		margin-right: 8px !important;
	}

	.mr-md-16 {
		margin-right: 16px !important;
	}

	.mr-md-24 {
		margin-right: 24px !important;
	}

	.mr-md-40 {
		margin-right: 40px !important;
	}

	.mr-md-80 {
		margin-right: 80px !important;
	}
}

@media (min-width: 1264px) {
	.mr-lg-auto {
		margin-right: auto !important;
	}

	.mr-lg-0 {
		margin-right: 0 !important;
	}

	.mr-lg-4 {
		margin-right: 4px !important;
	}

	.mr-lg-8 {
		margin-right: 8px !important;
	}

	.mr-lg-16 {
		margin-right: 16px !important;
	}

	.mr-lg-24 {
		margin-right: 24px !important;
	}

	.mr-lg-40 {
		margin-right: 40px !important;
	}

	.mr-lg-80 {
		margin-right: 80px !important;
	}
}

@media (min-width: 1904px) {
	.mr-xl-auto {
		margin-right: auto !important;
	}

	.mr-xl-0 {
		margin-right: 0 !important;
	}

	.mr-xl-4 {
		margin-right: 4px !important;
	}

	.mr-xl-8 {
		margin-right: 8px !important;
	}

	.mr-xl-16 {
		margin-right: 16px !important;
	}

	.mr-xl-24 {
		margin-right: 24px !important;
	}

	.mr-xl-40 {
		margin-right: 40px !important;
	}

	.mr-xl-80 {
		margin-right: 80px !important;
	}
}

/*====================================================================
20.3. Margin -> Top
====================================================================*/

.mt-auto {
	margin-top: auto !important;
}

.mt-0 {
	margin-top: 0 !important;
}

.mt-4 {
	margin-top: 4px !important;
}

.mt-8 {
	margin-top: 8px !important;
}

.mt-16 {
	margin-top: 16px !important;
}

.mt-24 {
	margin-top: 24px !important;
}

.mt-40 {
	margin-top: 40px !important;
}

.mt-80 {
	margin-top: 80px !important;
}

@media (min-width: 600px) {
	.mt-sm-auto {
		margin-top: auto !important;
	}

	.mt-sm-0 {
		margin-top: 0 !important;
	}

	.mt-sm-4 {
		margin-top: 4px !important;
	}

	.mt-sm-8 {
		margin-top: 8px !important;
	}

	.mt-sm-16 {
		margin-top: 16px !important;
	}

	.mt-sm-24 {
		margin-top: 24px !important;
	}

	.mt-sm-40 {
		margin-top: 40px !important;
	}

	.mt-sm-80 {
		margin-top: 80px !important;
	}
}

@media (min-width: 960px) {
	.mt-md-auto {
		margin-top: auto !important;
	}

	.mt-md-0 {
		margin-top: 0 !important;
	}

	.mt-md-4 {
		margin-top: 4px !important;
	}

	.mt-md-8 {
		margin-top: 8px !important;
	}

	.mt-md-16 {
		margin-top: 16px !important;
	}

	.mt-md-24 {
		margin-top: 24px !important;
	}

	.mt-md-40 {
		margin-top: 40px !important;
	}

	.mt-md-80 {
		margin-top: 80px !important;
	}
}

@media (min-width: 1264px) {
	.mt-lg-auto {
		margin-top: auto !important;
	}

	.mt-lg-0 {
		margin-top: 0 !important;
	}

	.mt-lg-4 {
		margin-top: 4px !important;
	}

	.mt-lg-8 {
		margin-top: 8px !important;
	}

	.mt-lg-16 {
		margin-top: 16px !important;
	}

	.mt-lg-24 {
		margin-top: 24px !important;
	}

	.mt-lg-40 {
		margin-top: 40px !important;
	}

	.mt-lg-80 {
		margin-top: 80px !important;
	}
}

@media (min-width: 1904px) {
	.mt-xl-auto {
		margin-top: auto !important;
	}

	.mt-xl-0 {
		margin-top: 0 !important;
	}

	.mt-xl-4 {
		margin-top: 4px !important;
	}

	.mt-xl-8 {
		margin-top: 8px !important;
	}

	.mt-xl-16 {
		margin-top: 16px !important;
	}

	.mt-xl-24 {
		margin-top: 24px !important;
	}

	.mt-xl-40 {
		margin-top: 40px !important;
	}

	.mt-xl-80 {
		margin-top: 80px !important;
	}
}

/*====================================================================
20.4. Margin -> Bottom
====================================================================*/

.mb-auto {
	margin-bottom: auto !important;
}

.mb-0 {
	margin-bottom: 0 !important;
}

.mb-4 {
	margin-bottom: 4px !important;
}

.mb-8 {
	margin-bottom: 8px !important;
}

.mb-16 {
	margin-bottom: 16px !important;
}

.mb-24 {
	margin-bottom: 24px !important;
}

.mb-40 {
	margin-bottom: 40px !important;
}

.mb-80 {
	margin-bottom: 80px !important;
}

@media (min-width: 600px) {
	.mb-sm-auto {
		margin-bottom: auto !important;
	}

	.mb-sm-0 {
		margin-bottom: 0 !important;
	}

	.mb-sm-4 {
		margin-bottom: 4px !important;
	}

	.mb-sm-8 {
		margin-bottom: 8px !important;
	}

	.mb-sm-16 {
		margin-bottom: 16px !important;
	}

	.mb-sm-24 {
		margin-bottom: 24px !important;
	}

	.mb-sm-40 {
		margin-bottom: 40px !important;
	}

	.mb-sm-80 {
		margin-bottom: 80px !important;
	}
}

@media (min-width: 960px) {
	.mb-md-auto {
		margin-bottom: auto !important;
	}
	
	.mb-md-0 {
		margin-bottom: 0 !important;
	}

	.mb-md-4 {
		margin-bottom: 4px !important;
	}

	.mb-md-8 {
		margin-bottom: 8px !important;
	}

	.mb-md-16 {
		margin-bottom: 16px !important;
	}

	.mb-md-24 {
		margin-bottom: 24px !important;
	}

	.mb-md-40 {
		margin-bottom: 40px !important;
	}

	.mb-md-80 {
		margin-bottom: 80px !important;
	}
}

@media (min-width: 1264px) {
	.mb-lg-auto {
		margin-bottom: auto !important;
	}
	
	.mb-lg-0 {
		margin-bottom: 0 !important;
	}

	.mb-lg-4 {
		margin-bottom: 4px !important;
	}

	.mb-lg-8 {
		margin-bottom: 8px !important;
	}

	.mb-lg-16 {
		margin-bottom: 16px !important;
	}

	.mb-lg-24 {
		margin-bottom: 24px !important;
	}

	.mb-lg-40 {
		margin-bottom: 40px !important;
	}

	.mb-lg-80 {
		margin-bottom: 80px !important;
	}
}

@media (min-width: 1904px) {
	.mb-xl-auto {
		margin-bottom: auto !important;
	}
	
	.mb-xl-0 {
		margin-bottom: 0 !important;
	}

	.mb-xl-4 {
		margin-bottom: 4px !important;
	}

	.mb-xl-8 {
		margin-bottom: 8px !important;
	}

	.mb-xl-16 {
		margin-bottom: 16px !important;
	}

	.mb-xl-24 {
		margin-bottom: 24px !important;
	}

	.mb-xl-40 {
		margin-bottom: 40px !important;
	}

	.mb-xl-80 {
		margin-bottom: 80px !important;
	}
}

/*====================================================================
20.5. Margin -> Left and Right (X)
====================================================================*/

.mx-auto {
	margin-left: auto !important;
	margin-right: auto !important;
}

.mx-0 {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

.mx-4 {
	margin-left: 4px !important;
	margin-right: 4px !important;
}

.mx-8 {
	margin-left: 8px !important;
	margin-right: 8px !important;
}

.mx-16 {
	margin-left: 16px !important;
	margin-right: 16px !important;
}

.mx-24 {
	margin-left: 24px !important;
	margin-right: 24px !important;
}

.mx-40 {
	margin-left: 40px !important;
	margin-right: 40px !important;
}

.mx-80 {
	margin-left: 80px !important;
	margin-right: 80px !important;
}

@media (min-width: 600px) {
	.mx-sm-auto {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.mx-sm-0 {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.mx-sm-4 {
		margin-left: 4px !important;
		margin-right: 4px !important;
	}

	.mx-sm-8 {
		margin-left: 8px !important;
		margin-right: 8px !important;
	}

	.mx-sm-16 {
		margin-left: 16px !important;
		margin-right: 16px !important;
	}

	.mx-sm-24 {
		margin-left: 24px !important;
		margin-right: 24px !important;
	}

	.mx-sm-40 {
		margin-left: 40px !important;
		margin-right: 40px !important;
	}

	.mx-sm-80 {
		margin-left: 80px !important;
		margin-right: 80px !important;
	}
}

@media (min-width: 960px) {
	.mx-md-auto {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.mx-md-0 {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.mx-md-4 {
		margin-left: 4px !important;
		margin-right: 4px !important;
	}

	.mx-md-8 {
		margin-left: 8px !important;
		margin-right: 8px !important;
	}

	.mx-md-16 {
		margin-left: 16px !important;
		margin-right: 16px !important;
	}

	.mx-md-24 {
		margin-left: 24px !important;
		margin-right: 24px !important;
	}

	.mx-md-40 {
		margin-left: 40px !important;
		margin-right: 40px !important;
	}

	.mx-md-80 {
		margin-left: 80px !important;
		margin-right: 80px !important;
	}
}

@media (min-width: 1264px) {
	.mx-lg-auto {
		margin-left: auto !important;
		margin-right: auto !important;
	}

	.mx-lg-0 {
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.mx-lg-4 {
		margin-left: 4px !important;
		margin-right: 4px !important;
	}

	.mx-lg-8 {
		margin-left: 8px !important;
		margin-right: 8px !important;
	}

	.mx-lg-16 {
		margin-left: 16px !important;
		margin-right: 16px !important;
	}

	.mx-lg-24 {
		margin-left: 24px !important;
		margin-right: 24px !important;
	}

	.mx-lg-40 {
		margin-left: 40px !important;
		margin-right: 40px !important;
	}

	.mx-lg-80 {
		margin-left: 80px !important;
		margin-right: 80px !important;
	}
}

@media (min-width: 1904px) {
	.mx-xl-auto {
		margin-top: auto !important;
	}

	.mx-xl-0 {
		margin-top: 0 !important;
	}

	.mx-xl-4 {
		margin-top: 4px !important;
	}

	.mx-xl-8 {
		margin-top: 8px !important;
	}

	.mx-xl-16 {
		margin-top: 16px !important;
	}

	.mx-xl-24 {
		margin-top: 24px !important;
	}

	.mx-xl-40 {
		margin-top: 40px !important;
	}

	.mx-xl-80 {
		margin-top: 80px !important;
	}
}

/*====================================================================
20.6. Margin -> Top and Bottom (Y)
====================================================================*/

.my-auto {
	margin-top: auto !important;
	margin-bottom: auto !important;
}

.my-0 {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.my-4 {
	margin-top: 4px !important;
	margin-bottom: 4px !important;
}

.my-8 {
	margin-top: 8px !important;
	margin-bottom: 8px !important;
}

.my-16 {
	margin-top: 16px !important;
	margin-bottom: 16px !important;
}

.my-24 {
	margin-top: 24px !important;
	margin-bottom: 24px !important;
}

.my-40 {
	margin-top: 40px !important;
	margin-bottom: 40px !important;
}

.my-80 {
	margin-top: 80px !important;
	margin-bottom: 80px !important;
}

@media (min-width: 600px) {
	.my-sm-auto {
		margin-top: auto !important;
		margin-bottom: auto !important;
	}

	.my-sm-0 {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.my-sm-4 {
		margin-top: 4px !important;
		margin-bottom: 4px !important;
	}

	.my-sm-8 {
		margin-top: 8px !important;
		margin-bottom: 8px !important;
	}

	.my-sm-16 {
		margin-top: 16px !important;
		margin-bottom: 16px !important;
	}

	.my-sm-24 {
		margin-top: 24px !important;
		margin-bottom: 24px !important;
	}

	.my-sm-40 {
		margin-top: 40px !important;
		margin-bottom: 40px !important;
	}

	.my-sm-80 {
		margin-top: 80px !important;
		margin-bottom: 80px !important;
	}
}

@media (min-width: 960px) {
	.my-md-auto {
		margin-top: auto !important;
		margin-bottom: auto !important;
	}

	.my-md-0 {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.my-md-4 {
		margin-top: 4px !important;
		margin-bottom: 4px !important;
	}

	.my-md-8 {
		margin-top: 8px !important;
		margin-bottom: 8px !important;
	}

	.my-md-16 {
		margin-top: 16px !important;
		margin-bottom: 16px !important;
	}

	.my-md-24 {
		margin-top: 24px !important;
		margin-bottom: 24px !important;
	}

	.my-md-40 {
		margin-top: 40px !important;
		margin-bottom: 40px !important;
	}

	.my-md-80 {
		margin-top: 80px !important;
		margin-bottom: 80px !important;
	}
}

@media (min-width: 1264px) {
	.my-lg-auto {
		margin-top: auto !important;
		margin-bottom: auto !important;
	}

	.my-lg-0 {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.my-lg-4 {
		margin-top: 4px !important;
		margin-bottom: 4px !important;
	}

	.my-lg-8 {
		margin-top: 8px !important;
		margin-bottom: 8px !important;
	}

	.my-lg-16 {
		margin-top: 16px !important;
		margin-bottom: 16px !important;
	}

	.my-lg-24 {
		margin-top: 24px !important;
		margin-bottom: 24px !important;
	}

	.my-lg-40 {
		margin-top: 40px !important;
		margin-bottom: 40px !important;
	}

	.my-lg-80 {
		margin-top: 80px !important;
		margin-bottom: 80px !important;
	}
}

@media (min-width: 1904px) {
	.my-xl-auto {
		margin-top: auto !important;
		margin-bottom: auto !important;
	}

	.my-xl-0 {
		margin-top: 0 !important;
		margin-bottom: 0 !important;
	}

	.my-xl-4 {
		margin-top: 4px !important;
		margin-bottom: 4px !important;
	}

	.my-xl-8 {
		margin-top: 8px !important;
		margin-bottom: 8px !important;
	}

	.my-xl-16 {
		margin-top: 16px !important;
		margin-bottom: 16px !important;
	}

	.my-xl-24 {
		margin-top: 24px !important;
		margin-bottom: 24px !important;
	}

	.my-xl-40 {
		margin-top: 40px !important;
		margin-bottom: 40px !important;
	}

	.my-xl-80 {
		margin-top: 80px !important;
		margin-bottom: 80px !important;
	}
}

/*====================================================================
21. Padding
====================================================================*/

.p-auto {
	padding: auto !important;
}

.p-0 {
	padding: 0 !important;
}

.p-4 {
	padding: 4px !important;
}

.p-8 {
	padding: 8px !important;
}

.p-16 {
	padding: 16px !important;
}

.p-24 {
	padding: 24px !important;
}

.p-40 {
	padding: 40px !important;
}

.p-80 {
	padding: 80px !important;
}

@media (min-width: 600px) {
	.p-sm-auto {
		padding: auto !important;
	}

	.p-sm-0 {
		padding: 0 !important;
	}

	.p-sm-4 {
		padding: 4px !important;
	}

	.p-sm-8 {
		padding: 8px !important;
	}

	.p-sm-16 {
		padding: 16px !important;
	}

	.p-sm-24 {
		padding: 24px !important;
	}

	.p-sm-40 {
		padding: 40px !important;
	}

	.p-sm-80 {
		padding: 80px !important;
	}
}

@media (min-width: 960px) {
	.p-md-auto {
		padding: auto !important;
	}

	.p-md-0 {
		padding: 0 !important;
	}

	.p-md-4 {
		padding: 4px !important;
	}

	.p-md-8 {
		padding: 8px !important;
	}

	.p-md-16 {
		padding: 16px !important;
	}

	.p-md-24 {
		padding: 24px !important;
	}

	.p-md-40 {
		padding: 40px !important;
	}

	.p-md-80 {
		padding: 80px !important;
	}
}

@media (min-width: 1264px) {
	.p-lg-auto {
		padding: auto !important;
	}

	.p-lg-0 {
		padding: 0 !important;
	}

	.p-lg-4 {
		padding: 4px !important;
	}

	.p-lg-8 {
		padding: 8px !important;
	}

	.p-lg-16 {
		padding: 16px !important;
	}

	.p-lg-24 {
		padding: 24px !important;
	}

	.p-lg-40 {
		padding: 40px !important;
	}

	.p-lg-80 {
		padding: 80px !important;
	}
}

@media (min-width: 1904px) {
	.p-xl-auto {
		padding: auto !important;
	}

	.p-xl-0 {
		padding: 0 !important;
	}

	.p-xl-4 {
		padding: 4px !important;
	}

	.p-xl-8 {
		padding: 8px !important;
	}

	.p-xl-16 {
		padding: 16px !important;
	}

	.p-xl-24 {
		padding: 24px !important;
	}

	.p-xl-40 {
		padding: 40px !important;
	}

	.p-xl-80 {
		padding: 80px !important;
	}
}

/*====================================================================
21.1. Padding -> Left
====================================================================*/

.pl-auto {
	padding-left: auto !important;
}

.pl-0 {
	padding-left: 0 !important;
}

.pl-4 {
	padding-left: 4px !important;
}

.pl-8 {
	padding-left: 8px !important;
}

.pl-16 {
	padding-left: 16px !important;
}

.pl-24 {
	padding-left: 24px !important;
}

.pl-40 {
	padding-left: 40px !important;
}

.pl-80 {
	padding-left: 80px !important;
}

@media (min-width: 600px) {
	.pl-sm-auto {
		padding-left: auto !important;
	}

	.pl-sm-0 {
		padding-left: 0 !important;
	}

	.pl-sm-4 {
		padding-left: 4px !important;
	}

	.pl-sm-8 {
		padding-left: 8px !important;
	}

	.pl-sm-16 {
		padding-left: 16px !important;
	}

	.pl-sm-24 {
		padding-left: 24px !important;
	}

	.pl-sm-40 {
		padding-left: 40px !important;
	}

	.pl-sm-80 {
		padding-left: 80px !important;
	}
}

@media (min-width: 960px) {
	.pl-md-auto {
		padding-left: auto !important;
	}

	.pl-md-0 {
		padding-left: 0 !important;
	}

	.pl-md-4 {
		padding-left: 4px !important;
	}

	.pl-md-8 {
		padding-left: 8px !important;
	}

	.pl-md-16 {
		padding-left: 16px !important;
	}

	.pl-md-24 {
		padding-left: 24px !important;
	}

	.pl-md-40 {
		padding-left: 40px !important;
	}

	.pl-md-80 {
		padding-left: 80px !important;
	}
}

@media (min-width: 1264px) {
	.pl-lg-auto {
		padding-left: auto !important;
	}

	.pl-lg-0 {
		padding-left: 0 !important;
	}

	.pl-lg-4 {
		padding-left: 4px !important;
	}

	.pl-lg-8 {
		padding-left: 8px !important;
	}

	.pl-lg-16 {
		padding-left: 16px !important;
	}

	.pl-lg-24 {
		padding-left: 24px !important;
	}

	.pl-lg-40 {
		padding-left: 40px !important;
	}

	.pl-lg-80 {
		padding-left: 80px !important;
	}
}

@media (min-width: 1904px) {
	.pl-xl-auto {
		padding-left: auto !important;
	}

	.pl-xl-0 {
		padding-left: 0 !important;
	}

	.pl-xl-4 {
		padding-left: 4px !important;
	}

	.pl-xl-8 {
		padding-left: 8px !important;
	}

	.pl-xl-16 {
		padding-left: 16px !important;
	}

	.pl-xl-24 {
		padding-left: 24px !important;
	}

	.pl-xl-40 {
		padding-left: 40px !important;
	}

	.pl-xl-80 {
		padding-left: 80px !important;
	}
}

/*====================================================================
21.2. Padding -> Right
====================================================================*/

.pr-0 {
	padding-right: 0 !important;
}

.pr-4 {
	padding-right: 4px !important;
}

.pr-8 {
	padding-right: 8px !important;
}

.pr-16 {
	padding-right: 16px !important;
}

.pr-24 {
	padding-right: 24px !important;
}

.pr-40 {
	padding-right: 40px !important;
}

.pr-80 {
	padding-right: 80px !important;
}

@media (min-width: 600px) {
	.pr-sm-0 {
		padding-right: 0 !important;
	}

	.pr-sm-4 {
		padding-right: 4px !important;
	}

	.pr-sm-8 {
		padding-right: 8px !important;
	}

	.pr-sm-16 {
		padding-right: 16px !important;
	}

	.pr-sm-24 {
		padding-right: 24px !important;
	}

	.pr-sm-40 {
		padding-right: 40px !important;
	}

	.pr-sm-80 {
		padding-right: 80px !important;
	}
}

@media (min-width: 960px) {
	.pr-md-0 {
		padding-right: 0 !important;
	}

	.pr-md-4 {
		padding-right: 4px !important;
	}

	.pr-md-8 {
		padding-right: 8px !important;
	}

	.pr-md-16 {
		padding-right: 16px !important;
	}

	.pr-md-24 {
		padding-right: 24px !important;
	}

	.pr-md-40 {
		padding-right: 40px !important;
	}

	.pr-md-80 {
		padding-right: 80px !important;
	}
}

@media (min-width: 1264px) {
	.pr-lg-0 {
		padding-right: 0 !important;
	}

	.pr-lg-4 {
		padding-right: 4px !important;
	}

	.pr-lg-8 {
		padding-right: 8px !important;
	}

	.pr-lg-16 {
		padding-right: 16px !important;
	}

	.pr-lg-24 {
		padding-right: 24px !important;
	}

	.pr-lg-40 {
		padding-right: 40px !important;
	}

	.pr-lg-80 {
		padding-right: 80px !important;
	}
}

@media (min-width: 1904px) {
	.pr-xl-0 {
		padding-right: 0 !important;
	}

	.pr-xl-4 {
		padding-right: 4px !important;
	}

	.pr-xl-8 {
		padding-right: 8px !important;
	}

	.pr-xl-16 {
		padding-right: 16px !important;
	}

	.pr-xl-24 {
		padding-right: 24px !important;
	}

	.pr-xl-40 {
		padding-right: 40px !important;
	}

	.pr-xl-80 {
		padding-right: 80px !important;
	}
}

/*====================================================================
21.3. Padding -> Top
====================================================================*/

.pt-0 {
	padding-top: 0 !important;
}

.pt-4 {
	padding-top: 4px !important;
}

.pt-8 {
	padding-top: 8px !important;
}

.pt-16 {
	padding-top: 16px !important;
}

.pt-24 {
	padding-top: 24px !important;
}

.pt-40 {
	padding-top: 40px !important;
}

.pt-80 {
	padding-top: 80px !important;
}

@media (min-width: 600px) {
	.pt-sm-0 {
		padding-top: 0 !important;
	}

	.pt-sm-4 {
		padding-top: 4px !important;
	}

	.pt-sm-8 {
		padding-top: 8px !important;
	}

	.pt-sm-16 {
		padding-top: 16px !important;
	}

	.pt-sm-24 {
		padding-top: 24px !important;
	}

	.pt-sm-40 {
		padding-top: 40px !important;
	}

	.pt-sm-80 {
		padding-top: 80px !important;
	}
}

@media (min-width: 960px) {
	.pt-md-0 {
		padding-top: 0 !important;
	}

	.pt-md-4 {
		padding-top: 4px !important;
	}

	.pt-md-8 {
		padding-top: 8px !important;
	}

	.pt-md-16 {
		padding-top: 16px !important;
	}

	.pt-md-24 {
		padding-top: 24px !important;
	}

	.pt-md-40 {
		padding-top: 40px !important;
	}

	.pt-md-80 {
		padding-top: 80px !important;
	}
}

@media (min-width: 1264px) {
	.pt-lg-0 {
		padding-top: 0 !important;
	}

	.pt-lg-4 {
		padding-top: 4px !important;
	}

	.pt-lg-8 {
		padding-top: 8px !important;
	}

	.pt-lg-16 {
		padding-top: 16px !important;
	}

	.pt-lg-24 {
		padding-top: 24px !important;
	}

	.pt-lg-40 {
		padding-top: 40px !important;
	}

	.pt-lg-80 {
		padding-top: 80px !important;
	}
}

@media (min-width: 1904px) {
	.pt-xl-0 {
		padding-top: 0 !important;
	}

	.pt-xl-4 {
		padding-top: 4px !important;
	}

	.pt-xl-8 {
		padding-top: 8px !important;
	}

	.pt-xl-16 {
		padding-top: 16px !important;
	}

	.pt-xl-24 {
		padding-top: 24px !important;
	}

	.pt-xl-40 {
		padding-top: 40px !important;
	}

	.pt-xl-80 {
		padding-top: 80px !important;
	}
}

/*====================================================================
21.4. Padding -> Bottom
====================================================================*/

.pb-0 {
	padding-bottom: 0 !important;
}

.pb-4 {
	padding-bottom: 4px !important;
}

.pb-8 {
	padding-bottom: 8px !important;
}

.pb-16 {
	padding-bottom: 16px !important;
}

.pb-24 {
	padding-bottom: 24px !important;
}

.pb-40 {
	padding-bottom: 40px !important;
}

.pb-80 {
	padding-bottom: 80px !important;
}

@media (min-width: 600px) {
	.pb-sm-0 {
		padding-bottom: 0 !important;
	}

	.pb-sm-4 {
		padding-bottom: 4px !important;
	}

	.pb-sm-8 {
		padding-bottom: 8px !important;
	}

	.pb-sm-16 {
		padding-bottom: 16px !important;
	}

	.pb-sm-24 {
		padding-bottom: 24px !important;
	}

	.pb-sm-40 {
		padding-bottom: 40px !important;
	}

	.pb-sm-80 {
		padding-bottom: 80px !important;
	}
}

@media (min-width: 960px) {
	.pb-md-0 {
		padding-bottom: 0 !important;
	}

	.pb-md-4 {
		padding-bottom: 4px !important;
	}

	.pb-md-8 {
		padding-bottom: 8px !important;
	}

	.pb-md-16 {
		padding-bottom: 16px !important;
	}

	.pb-md-24 {
		padding-bottom: 24px !important;
	}

	.pb-md-40 {
		padding-bottom: 40px !important;
	}

	.pb-md-80 {
		padding-bottom: 80px !important;
	}
}

@media (min-width: 1264px) {
	.pb-lg-0 {
		padding-bottom: 0 !important;
	}

	.pb-lg-4 {
		padding-bottom: 4px !important;
	}

	.pb-lg-8 {
		padding-bottom: 8px !important;
	}

	.pb-lg-16 {
		padding-bottom: 16px !important;
	}

	.pb-lg-24 {
		padding-bottom: 24px !important;
	}

	.pb-lg-40 {
		padding-bottom: 40px !important;
	}

	.pb-lg-80 {
		padding-bottom: 80px !important;
	}
}

@media (min-width: 1904px) {
	.pb-xl-0 {
		padding-bottom: 0 !important;
	}

	.pb-xl-4 {
		padding-bottom: 4px !important;
	}

	.pb-xl-8 {
		padding-bottom: 8px !important;
	}

	.pb-xl-16 {
		padding-bottom: 16px !important;
	}

	.pb-xl-24 {
		padding-bottom: 24px !important;
	}

	.pb-xl-40 {
		padding-bottom: 40px !important;
	}

	.pb-xl-80 {
		padding-bottom: 80px !important;
	}
}

/*====================================================================
21.5. Padding -> Left and Right (X)
====================================================================*/

.px-0 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.px-4 {
	padding-left: 4px !important;
	padding-right: 4px !important;
}

.px-8 {
	padding-left: 8px !important;
	padding-right: 8px !important;
}

.px-16 {
	padding-left: 16px !important;
	padding-right: 16px !important;
}

.px-24 {
	padding-left: 24px !important;
	padding-right: 24px !important;
}

.px-40 {
	padding-left: 40px !important;
	padding-right: 40px !important;
}

.px-80 {
	padding-left: 80px !important;
	padding-right: 80px !important;
}

@media (min-width: 600px) {
	.px-sm-0 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.px-sm-4 {
		padding-left: 4px !important;
		padding-right: 4px !important;
	}

	.px-sm-8 {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	.px-sm-16 {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.px-sm-24 {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	.px-sm-40 {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}

	.px-sm-80 {
		padding-left: 80px !important;
		padding-right: 80px !important;
	}
}

@media (min-width: 960px) {
	.px-md-0 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.px-md-4 {
		padding-left: 4px !important;
		padding-right: 4px !important;
	}

	.px-md-8 {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	.px-md-16 {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.px-md-24 {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	.px-md-40 {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}

	.px-md-80 {
		padding-left: 80px !important;
		padding-right: 80px !important;
	}
}

@media (min-width: 1264px) {
	.px-lg-0 {
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	.px-lg-4 {
		padding-left: 4px !important;
		padding-right: 4px !important;
	}

	.px-lg-8 {
		padding-left: 8px !important;
		padding-right: 8px !important;
	}

	.px-lg-16 {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	.px-lg-24 {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}

	.px-lg-40 {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}

	.px-lg-80 {
		padding-left: 80px !important;
		padding-right: 80px !important;
	}
}

@media (min-width: 1904px) {
	.px-xl-0 {
		padding-top: 0 !important;
	}

	.px-xl-4 {
		padding-top: 4px !important;
	}

	.px-xl-8 {
		padding-top: 8px !important;
	}

	.px-xl-16 {
		padding-top: 16px !important;
	}

	.px-xl-24 {
		padding-top: 24px !important;
	}

	.px-xl-40 {
		padding-top: 40px !important;
	}

	.px-xl-80 {
		padding-top: 80px !important;
	}
}

/*====================================================================
21.6. Padding -> Top and Bottom (Y)
====================================================================*/

.py-0 {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.py-4 {
	padding-top: 4px !important;
	padding-bottom: 4px !important;
}

.py-8 {
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

.py-16 {
	padding-top: 16px !important;
	padding-bottom: 16px !important;
}

.py-24 {
	padding-top: 24px !important;
	padding-bottom: 24px !important;
}

.py-40 {
	padding-top: 40px !important;
	padding-bottom: 40px !important;
}

.py-80 {
	padding-top: 80px !important;
	padding-bottom: 80px !important;
}

@media (min-width: 600px) {
	.py-sm-0 {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.py-sm-4 {
		padding-top: 4px !important;
		padding-bottom: 4px !important;
	}

	.py-sm-8 {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	.py-sm-16 {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}

	.py-sm-24 {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	.py-sm-40 {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	.py-sm-80 {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}
}

@media (min-width: 960px) {
	.py-md-0 {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.py-md-4 {
		padding-top: 4px !important;
		padding-bottom: 4px !important;
	}

	.py-md-8 {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	.py-md-16 {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}

	.py-md-24 {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	.py-md-40 {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	.py-md-80 {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}
}

@media (min-width: 1264px) {
	.py-lg-0 {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.py-lg-4 {
		padding-top: 4px !important;
		padding-bottom: 4px !important;
	}

	.py-lg-8 {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	.py-lg-16 {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}

	.py-lg-24 {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	.py-lg-40 {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	.py-lg-80 {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}
}

@media (min-width: 1904px) {
	.py-xl-0 {
		padding-top: 0 !important;
		padding-bottom: 0 !important;
	}

	.py-xl-4 {
		padding-top: 4px !important;
		padding-bottom: 4px !important;
	}

	.py-xl-8 {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	.py-xl-16 {
		padding-top: 16px !important;
		padding-bottom: 16px !important;
	}

	.py-xl-24 {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
	}

	.py-xl-40 {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}

	.py-xl-80 {
		padding-top: 80px !important;
		padding-bottom: 80px !important;
	}
}

/*====================================================================
22. Colors
====================================================================*/

/*====================================================================
22.1. Colors -> Light theme background
====================================================================*/

.bg-primary {
	color: #FFFFFF;
	background-color: var(--primary-40);
}

.bg-primary-05 {
	color: #FFFFFF;
	background-color: var(--primary-light-opacity-05);
}

.bg-primary-12 {
	color: #FFFFFF;
	background-color: var(--primary-light-opacity-12);
}

.bg-primary-16 {
	color: #FFFFFF;
	background-color: var(--primary-light-opacity-16);
}

.bg-primary-32 {
	color: #FFFFFF;
	background-color: var(--primary-light-opacity-32);
}

.bg-primary-64 {
	color: #FFFFFF;
	background-color: var(--primary-light-opacity-64);
}

.bg-on-primary {
	color: var(--primary-10);
	background-color: var(--primary-90);
}

.bg-secondary {
	color: #FFFFFF;
	background-color: var(--secondary-40);
}

.bg-on-secondary {
	color: var(--secondary-10);
	background-color: var(--secondary-90);
}

.bg-tertiary {
	color: #FFFFFF;
	background-color: var(--tertiary-40);
}

.bg-on-tertiary {
	color: var(--tertiary-10);
	background-color: var(--tertiary-90);
}

.bg-error {
	color: #FFFFFF;
	background-color: var(--error-40);
}

.bg-on-error {
	color: var(--error-10);
	background-color: var(--error-90);
}

.bg-surface,
.bg-background {
	color: var(--neutral-10);
	background-color: var(--neutral-99);
}

.bg-surface-variant {
	color: var(--neutral-v-30);
	background-color: var(--neutral-90);
}

.outline {
	border: 1px solid #313131; /* original var(--neutral-v-50) */
}

/*====================================================================
22.2. Colors -> Dark theme background
====================================================================*/

.dark .bg-primary {
	color: var(--primary-20);
	background-color: var(--primary-80);
}

.dark .bg-primary-05 {
	color: #FFFFFF;
	background-color: var(--primary-dark-opacity-05);
}

.dark .bg-primary-12 {
	color: #FFFFFF;
	background-color: var(--primary-dark-opacity-12);
}

.dark .bg-primary-16 {
	color: #FFFFFF;
	background-color: var(--primary-dark-opacity-16);
}

.dark .bg-primary-32 {
	color: #FFFFFF;
	background-color: var(--primary-dark-opacity-32);
}

.dark .bg-primary-64 {
	color: #FFFFFF;
	background-color: var(--primary-dark-opacity-64);
}

.dark .bg-on-primary {
	color: var(--primary-90);
	background-color: var(--primary-30);
}

.dark .bg-secondary {
	color: var(--secondary-20);
	background-color: var(--secondary-80);
}

.dark .bg-on-secondary {
	color: var(--secondary-90);
	background-color: var(--secondary-30);
}

.dark .bg-tertiary {
	color: var(--tertiary-20);
	background-color: var(--tertiary-80);
}

.dark .bg-on-tertiary {
	color: var(--tertiary-90);
	background-color: var(--tertiary-30);
}

.dark .bg-error {
	color: var(--error-20);
	background-color: var(--error-80);
}

.dark .bg-on-error {
	color: var(--error-90);
	background-color: var(--error-30);
}

.dark .bg-surface,
.dark .bg-background {
	color: var(--neutral-90);
	background-color: var(--neutral-10);
}

.dark .bg-surface-variant {
	color: var(--neutral-v-80);
	background-color: var(--neutral-v-30);
}

.dark .outline {
	border: 1px solid var(--neutral-v-60);
}

/*====================================================================
22.3. Colors -> Light theme colors
====================================================================*/

.color-primary {
	color: var(--primary-40) !important;
}

.color-on-primary {
	color: var(--primary-90) !important;
}

.color-secondary {
	color: var(--secondary-40) !important;
}

.color-on-secondary {
	color: var(--secondary-90) !important;
}

.color-tertiary {
	color: var(--tertiary-40) !important;
}

.color-on-tertiary {
	color: var(--tertiary-90) !important;
}

.color-error {
	color: var(--error-40) !important;
}

.color-on-error {
	color: var(--error-90) !important;
}

.color-background {
	color: var(--neutral-99) !important;
}

.color-surface {
	color: var(--neutral-99) !important;
}

.color-on-surface {
	color: var(--neutral-10) !important;
}

.color-surface-variant {
	color: var(--neutral-v-90) !important;
}

/*====================================================================
22.4. Colors -> Dark theme colors
====================================================================*/

.dark .color-primary {
	color: var(--primary-80) !important;
}

.dark .color-on-primary {
	color: var(--primary-30) !important;
}

.dark .color-secondary {
	color: var(--secondary-80) !important;
}

.dark .color-on-secondary {
	color: var(--secondary-30) !important;
}

.dark .color-tertiary {
	color: var(--tertiary-80) !important;
}

.dark .color-on-tertiary {
	color: var(--tertiary-30) !important;
}

.dark .color-error {
	color: var(--error-80) !important;
}

.dark .color-on-error {
	color: var(--error-30) !important;
}

.dark .color-background {
	color: var(--neutral-10) !important;
}

.dark .color-surface {
	color: var(--neutral-10) !important;
}

.dark .color-on-surface {
	color: var(--neutral-99) !important;
}

.dark .color-surface-variant {
	color: var(--neutral-v-30) !important;
}

/*====================================================================
22.5. Colors -> Background Colors
====================================================================*/

/*====================================================================
22.5.1. Colors -> Background Colors -> Primary
====================================================================*/

.bg-primary-10 {
	background-color: var(--primary-10) !important;
}

.bg-primary-20 {
	background-color: var(--primary-20) !important;
}

.bg-primary-30 {
	background-color: var(--primary-30) !important;
}

.bg-primary-40 {
	background-color: var(--primary-40) !important;
}

.bg-primary-50 {
	background-color: var(--primary-50) !important;
}

.bg-primary-60 {
	background-color: var(--primary-60) !important;
}

.bg-primary-70 {
	background-color: var(--primary-70) !important;
}

.bg-primary-80 {
	background-color: var(--primary-80) !important;
}

.bg-primary-90 {
	background-color: var(--primary-90) !important;
}

.bg-primary-95 {
	background-color: var(--primary-95) !important;
}

.bg-primary-99 {
	background-color: var(--primary-99) !important;
}

/*====================================================================
22.5.2. Colors -> Background Colors -> Secondary
====================================================================*/

.bg-secondary-10 {
	background-color: var(--secondary-10) !important;
}

.bg-secondary-20 {
	background-color: var(--secondary-20) !important;
}

.bg-secondary-30 {
	background-color: var(--secondary-30) !important;
}

.bg-secondary-40 {
	background-color: var(--secondary-40) !important;
}

.bg-secondary-50 {
	background-color: var(--secondary-50) !important;
}

.bg-secondary-60 {
	background-color: var(--secondary-60) !important;
}

.bg-secondary-70 {
	background-color: var(--secondary-70) !important;
}

.bg-secondary-80 {
	background-color: var(--secondary-80) !important;
}

.bg-secondary-90 {
	background-color: var(--secondary-90) !important;
}

.bg-secondary-95 {
	background-color: var(--secondary-95) !important;
}

.bg-secondary-99 {
	background-color: var(--secondary-99) !important;
}

/*====================================================================
22.5.3. Colors -> Background Colors -> Tertiary
====================================================================*/

.bg-tertiary-10 {
	background-color: var(--tertiary-10) !important;
}

.bg-tertiary-20 {
	background-color: var(--tertiary-20) !important;
}

.bg-tertiary-30 {
	background-color: var(--tertiary-30) !important;
}

.bg-tertiary-40 {
	background-color: var(--tertiary-40) !important;
}

.bg-tertiary-50 {
	background-color: var(--tertiary-50) !important;
}

.bg-tertiary-60 {
	background-color: var(--tertiary-60) !important;
}

.bg-tertiary-70 {
	background-color: var(--tertiary-70) !important;
}

.bg-tertiary-80 {
	background-color: var(--tertiary-80) !important;
}

.bg-tertiary-90 {
	background-color: var(--tertiary-90) !important;
}

.bg-tertiary-95 {
	background-color: var(--tertiary-95) !important;
}

.bg-tertiary-99 {
	background-color: var(--tertiary-99) !important;
}

/*====================================================================
22.5.4. Colors -> Background Colors -> Error
====================================================================*/

.bg-error-10 {
	background-color: var(--error-10) !important;
}

.bg-error-20 {
	background-color: var(--error-20) !important;
}

.bg-error-30 {
	background-color: var(--error-30) !important;
}

.bg-error-40 {
	background-color: var(--error-40) !important;
}

.bg-error-50 {
	background-color: var(--error-50) !important;
}

.bg-error-60 {
	background-color: var(--error-60) !important;
}

.bg-error-70 {
	background-color: var(--error-70) !important;
}

.bg-error-80 {
	background-color: var(--error-80) !important;
}

.bg-error-90 {
	background-color: var(--error-90) !important;
}

.bg-error-95 {
	background-color: var(--error-95) !important;
}

.bg-error-99 {
	background-color: var(--error-99) !important;
}

/*====================================================================
22.5.5. Colors -> Background Colors -> Neutral
====================================================================*/

.bg-neutral-10 {
	background-color: var(--neutral-10) !important;
}

.bg-neutral-20 {
	background-color: var(--neutral-20) !important;
}

.bg-neutral-30 {
	background-color: var(--neutral-30) !important;
}

.bg-neutral-40 {
	background-color: var(--neutral-40) !important;
}

.bg-neutral-50 {
	background-color: var(--neutral-50) !important;
}

.bg-neutral-60 {
	background-color: var(--neutral-60) !important;
}

.bg-neutral-70 {
	background-color: var(--neutral-70) !important;
}

.bg-neutral-80 {
	background-color: var(--neutral-80) !important;
}

.bg-neutral-90 {
	background-color: var(--neutral-90) !important;
}

.bg-neutral-95 {
	background-color: var(--neutral-95) !important;
}

.bg-neutral-99 {
	background-color: var(--neutral-99) !important;
}

/*====================================================================
22.5.6. Colors -> Background Colors -> Neutral Variant
====================================================================*/

.bg-neutral-v-10 {
	background-color: var(--neutral-v-10) !important;
}

.bg-neutral-v-20 {
	background-color: var(--neutral-v-20) !important;
}

.bg-neutral-v-30 {
	background-color: var(--neutral-v-30) !important;
}

.bg-neutral-v-40 {
	background-color: var(--neutral-v-40) !important;
}

.bg-neutral-v-50 {
	background-color: var(--neutral-v-50) !important;
}

.bg-neutral-v-60 {
	background-color: var(--neutral-v-60) !important;
}

.bg-neutral-v-70 {
	background-color: var(--neutral-v-70) !important;
}

.bg-neutral-v-80 {
	background-color: var(--neutral-v-80) !important;
}

.bg-neutral-v-90 {
	background-color: var(--neutral-v-90) !important;
}

.bg-neutral-v-95 {
	background-color: var(--neutral-v-95) !important;
}

.bg-neutral-v-99 {
	background-color: var(--neutral-v-99) !important;
}

/*====================================================================
22.6. Colors -> Colors
====================================================================*/

/*====================================================================
22.6.1. Colors -> Colors -> Primary
====================================================================*/

.color-primary-10 {
	color: var(--primary-10) !important;
}

.color-primary-20 {
	color: var(--primary-20) !important;
}

.color-primary-30 {
	color: var(--primary-30) !important;
}

.color-primary-40 {
	color: var(--primary-40) !important;
}

.color-primary-50 {
	color: var(--primary-50) !important;
}

.color-primary-60 {
	color: var(--primary-60) !important;
}

.color-primary-70 {
	color: var(--primary-70) !important;
}

.color-primary-80 {
	color: var(--primary-80) !important;
}

.color-primary-90 {
	color: var(--primary-90) !important;
}

.color-primary-95 {
	color: var(--primary-95) !important;
}

.color-primary-99 {
	color: var(--primary-99) !important;
}

/*====================================================================
22.6.2. Colors -> Colors -> Secondary
====================================================================*/

.color-secondary-10 {
	color: var(--secondary-10) !important;
}

.color-secondary-20 {
	color: var(--secondary-20) !important;
}

.color-secondary-30 {
	color: var(--secondary-30) !important;
}

.color-secondary-40 {
	color: var(--secondary-40) !important;
}

.color-secondary-50 {
	color: var(--secondary-50) !important;
}

.color-secondary-60 {
	color: var(--secondary-60) !important;
}

.color-secondary-70 {
	color: var(--secondary-70) !important;
}

.color-secondary-80 {
	color: var(--secondary-80) !important;
}

.color-secondary-90 {
	color: var(--secondary-90) !important;
}

.color-secondary-95 {
	color: var(--secondary-95) !important;
}

.color-secondary-99 {
	color: var(--secondary-99) !important;
}

/*====================================================================
22.6.3. Colors -> Colors -> Tertiary
====================================================================*/

.color-tertiary-10 {
	color: var(--tertiary-10) !important;
}

.color-tertiary-20 {
	color: var(--tertiary-20) !important;
}

.color-tertiary-30 {
	color: var(--tertiary-30) !important;
}

.color-tertiary-40 {
	color: var(--tertiary-40) !important;
}

.color-tertiary-50 {
	color: var(--tertiary-50) !important;
}

.color-tertiary-60 {
	color: var(--tertiary-60) !important;
}

.color-tertiary-70 {
	color: var(--tertiary-70) !important;
}

.color-tertiary-80 {
	color: var(--tertiary-80) !important;
}

.color-tertiary-90 {
	color: var(--tertiary-90) !important;
}

.color-tertiary-95 {
	color: var(--tertiary-95) !important;
}

.color-tertiary-99 {
	color: var(--tertiary-99) !important;
}

/*====================================================================
22.6.4. Colors -> Colors -> Error
====================================================================*/

.color-error-10 {
	color: var(--error-10) !important;
}

.color-error-20 {
	color: var(--error-20) !important;
}

.color-error-30 {
	color: var(--error-30) !important;
}

.color-error-40 {
	color: var(--error-40) !important;
}

.color-error-50 {
	color: var(--error-50) !important;
}

.color-error-60 {
	color: var(--error-60) !important;
}

.color-error-70 {
	color: var(--error-70) !important;
}

.color-error-80 {
	color: var(--error-80) !important;
}

.color-error-90 {
	color: var(--error-90) !important;
}

.color-error-95 {
	color: var(--error-95) !important;
}

.color-error-99 {
	color: var(--error-99) !important;
}

/*====================================================================
22.6.5. Colors -> Colors -> Neutral
====================================================================*/

.color-neutral-10 {
	color: var(--neutral-10) !important;
}

.color-neutral-20 {
	color: var(--neutral-20) !important;
}

.color-neutral-30 {
	color: var(--neutral-30) !important;
}

.color-neutral-40 {
	color: var(--neutral-40) !important;
}

.color-neutral-50 {
	color: var(--neutral-50) !important;
}

.color-neutral-60 {
	color: var(--neutral-60) !important;
}

.color-neutral-70 {
	color: var(--neutral-70) !important;
}

.color-neutral-80 {
	color: var(--neutral-80) !important;
}

.color-neutral-90 {
	color: var(--neutral-90) !important;
}

.color-neutral-95 {
	color: var(--neutral-95) !important;
}

.color-neutral-99 {
	color: var(--neutral-99) !important;
}

/*====================================================================
22.6.6. Colors -> Colors -> Neutral Variant
====================================================================*/

.color-neutral-v-10 {
	color: var(--neutral-v-10) !important;
}

.color-neutral-v-20 {
	color: var(--neutral-v-20) !important;
}

.color-neutral-v-30 {
	color: var(--neutral-v-30) !important;
}

.color-neutral-v-40 {
	color: var(--neutral-v-40) !important;
}

.color-neutral-v-50 {
	color: var(--neutral-v-50) !important;
}

.color-neutral-v-60 {
	color: var(--neutral-v-60) !important;
}

.color-neutral-v-70 {
	color: var(--neutral-v-70) !important;
}

.color-neutral-v-80 {
	color: var(--neutral-v-80) !important;
}

.color-neutral-v-90 {
	color: var(--neutral-v-90) !important;
}

.color-neutral-v-95 {
	color: var(--neutral-v-95) !important;
}

.color-neutral-v-99 {
	color: var(--neutral-v-99) !important;
}

/*====================================================================
22.7. Colors -> Black and white
====================================================================*/

.bg-white {
	background-color: #FFFFFF !important;
}

.bg-black {
	background-color: #000000 !important;
}

.color-white {
	color: #FFFFFF !important;
}

.color-black {
	color: #000000 !important;
}

/*====================================================================
23. Images
====================================================================*/

.image img {
    display: block;
    width: 100%;
    height: 100%;
}

.image.cover img {
    object-fit: cover;
}

.image.contain img {
    object-fit: contain;
}

.image.no-resize img {
    object-fit: none;
}

.image.fill img {
    object-fit: fill;
}

.azura-select-field.value .slot-label {
    transform: translateY(-8px) scale(.75);
}

.azura-select-field.opened .slot-menu {
	display: block;
}

.azura-select-field .azura-select-field {
	margin-bottom: 0;
}

.wp-block-azura-select-item {
	padding: 8px 16px;
	cursor: pointer;
}

.wp-block-azura-select-item:hover {
	background-color: #f6f1eb;
}

.azura-select-field .slot-display {
    min-height: 56px;
/*    background-color: #f6f1eb;*/
    background-color: #faf2e5;
    border-bottom: 1px solid var(--neutral-10);
    border: 1px solid #ebdbc7;
    border-radius: 4px;
}

.mb-0 {
	margin-bottom: 0 !important;
}

.aspect-1_1 {
	aspect-ratio: 1/1 !important;
}

/*====================================================================
24. Masonry
====================================================================*/

.masonry {
	margin: 0 -8px;
  position: relative;
  -webkit-animation: fade 2s;
          animation: fade 2s;
  -moz-column-gap: 0;
       column-gap: 0;
}

.slot-item {
  -moz-column-break-inside: avoid;
              break-inside: avoid;
}

.slot-content {
  overflow: hidden;
  width: 100%;
  padding: 8px;
}

.masonry.xs-1 {
  -moz-column-count: 1;
       column-count: 1;
}

.masonry.xs-2 {
  -moz-column-count: 2;
       column-count: 2;
}

.masonry.xs-3 {
  -moz-column-count: 3;
       column-count: 3;
}

.masonry.xs-4 {
  -moz-column-count: 4;
       column-count: 4;
}

@media (min-width: 600px) {
  .masonry.sm-1 {
    -moz-column-count: 1;
         column-count: 1;
  }

  .masonry.sm-2 {
    -moz-column-count: 2;
         column-count: 2;
  }

  .masonry.sm-3 {
    -moz-column-count: 3;
         column-count: 3;
  }

  .masonry.sm-4 {
    -moz-column-count: 4;
         column-count: 4;
  }

  .masonry.sm-5 {
    -moz-column-count: 5;
         column-count: 5;
  }

  .masonry.sm-6 {
    -moz-column-count: 6;
         column-count: 6;
  }

  .masonry.sm-7 {
    -moz-column-count: 7;
         column-count: 7;
  }

  .masonry.sm-8 {
    -moz-column-count: 8;
         column-count: 8;
  }
}

@media (min-width: 960px) {
  .masonry.md-1 {
    -moz-column-count: 1;
         column-count: 1;
  }

  .masonry.md-2 {
    -moz-column-count: 2;
         column-count: 2;
  }

  .masonry.md-3 {
    -moz-column-count: 3;
         column-count: 3;
  }

  .masonry.md-4 {
    -moz-column-count: 4;
         column-count: 4;
  }

  .masonry.md-5 {
    -moz-column-count: 5;
         column-count: 5;
  }

  .masonry.md-6 {
    -moz-column-count: 6;
         column-count: 6;
  }

  .masonry.md-7 {
    -moz-column-count: 7;
         column-count: 7;
  }

  .masonry.md-8 {
    -moz-column-count: 8;
         column-count: 8;
  }

  .masonry.md-9 {
    -moz-column-count: 9;
         column-count: 9;
  }

  .masonry.md-10 {
    -moz-column-count: 10;
         column-count: 10;
  }

  .masonry.md-11 {
    -moz-column-count: 11;
         column-count: 11;
  }

  .masonry.md-12 {
    -moz-column-count: 12;
         column-count: 12;
  }
}

@media (min-width: 1264px) {
  .masonry.lg-1 {
    -moz-column-count: 1;
         column-count: 1;
  }

  .masonry.lg-2 {
    -moz-column-count: 2;
         column-count: 2;
  }

  .masonry.lg-3 {
    -moz-column-count: 3;
         column-count: 3;
  }

  .masonry.lg-4 {
    -moz-column-count: 4;
         column-count: 4;
  }

  .masonry.lg-5 {
    -moz-column-count: 5;
         column-count: 5;
  }

  .masonry.lg-6 {
    -moz-column-count: 6;
         column-count: 6;
  }

  .masonry.lg-7 {
    -moz-column-count: 7;
         column-count: 7;
  }

  .masonry.lg-8 {
    -moz-column-count: 8;
         column-count: 8;
  }

  .masonry.lg-9 {
    -moz-column-count: 9;
         column-count: 9;
  }

  .masonry.lg-10 {
    -moz-column-count: 10;
         column-count: 10;
  }

  .masonry.lg-11 {
    -moz-column-count: 11;
         column-count: 11;
  }

  .masonry.lg-12 {
    -moz-column-count: 12;
         column-count: 12;
  }
}

@media (min-width: 1904px) {
  .masonry.xl-1 {
    -moz-column-count: 1;
         column-count: 1;
  }

  .masonry.xl-2 {
    -moz-column-count: 2;
         column-count: 2;
  }

  .masonry.xl-3 {
    -moz-column-count: 3;
         column-count: 3;
  }

  .masonry.xl-4 {
    -moz-column-count: 4;
         column-count: 4;
  }

  .masonry.xl-5 {
    -moz-column-count: 5;
         column-count: 5;
  }

  .masonry.xl-6 {
    -moz-column-count: 6;
         column-count: 6;
  }

  .masonry.xl-7 {
    -moz-column-count: 7;
         column-count: 7;
  }

  .masonry.xl-8 {
    -moz-column-count: 8;
         column-count: 8;
  }

  .masonry.xl-9 {
    -moz-column-count: 9;
         column-count: 9;
  }

  .masonry.xl-10 {
    -moz-column-count: 10;
         column-count: 10;
  }

  .masonry.xl-11 {
    -moz-column-count: 11;
         column-count: 11;
  }

  .masonry.xl-12 {
    -moz-column-count: 12;
         column-count: 12;
  }
}

@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


.acym_module_form {
	display: flex;
	align-items: start;
	max-width: 480px !important;
	gap: 16px;
}

.acym_module_form p {
	margin-bottom: 0 !important;
}

.acym_module  {
	margin-top: 16px;
}

.acym_module_form input {
	max-width: initial !important;
	height: 40px;
	display: block;
	width: 100%;
	background-color: white;
	outline: none !important;
	border: none !important;
	padding: 0 16px;
	border-radius: 999px !important;
	border: 1px solid var(--neutral-10); !important;
	margin-right: 16px !important;


}

.acym_module_form input.subbutton {
	background-color: #FFF !important;
	font-size: 35px;
	border-radius: 0 999em 999em 0 !important;
	border: none !important;
	transform: translateX(-64px);
	margin-top: -1px;
	margin-bottom: -1px;
	height: 42px;
	
}

.acym_module_form input.subbutton {
	border: 1px solid #313131 !important;
	background-color: #FFF !important;
	color: var(--neutral-10) !important;
}

.acym_module_form input.subbutton:hover:before {
	opacity: .08 !important;
	background-color: currentColor !important;
}

.acym_module_form input.subbutton:focus:before {
	opacity: .12 !important;
	background-color: currentColor !important;
}

.acym_module_form input.subbutton:focus {
	border-color: #313131 !important;
}

.acym_module_form input.subbutton:hover {
	box-shadow: none !important;
}

.acym_module_form .onefield {
	margin: 0 !important;
	height: 40px;
}

.acym_form {
	width: 90%;
}

.subbutton {
	display: inline-flex;
	flex: 0 0 auto;
	position: relative;
	height: 40px;
	line-height: 24px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	padding: 0 24px;
	margin: 0 8px 8px 0;
	white-space: nowrap;
	border: none;
	vertical-align: middle;
	outline: none;
	font-size: 14px;
	font-weight: 500;
	color: #FFFFFF;
	background-color: var(--primary-40) !important;
	user-select: none;
	text-decoration: none;
	z-index: 1;
	border-radius: 0 !important;
	transition: all .175s ease-in-out;
}

.urbancaves-subscribe .wp-block-media-text__media {
 display: none;
}

.urbancaves-subscribe .wp-block-media-text__content {
	padding-top: 24px;
	padding-bottom: 24px;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

@media (min-width: 601px) {
	.urbancaves-subscribe .wp-block-media-text__media {
		 display: block;
		}
}

/*--------------------------------------------------------------
## BUTTONS PRIMARY
--------------------------------------------------------------*/

.button {
	display: inline-flex;
	flex: 0 0 auto;
	position: relative;
	height: 40px;
	line-height: 24px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	cursor: pointer;
	padding: 0 24px;
	margin: 0 8px 8px 0;
	white-space: nowrap;
	border: none;
	vertical-align: middle;
	outline: none;
	font-size: 14px;
	font-weight: 500;
	color: #FFFFFF !important;
	background-color: var(--primary-40) !important;
	border-radius: 999px;
	user-select: none;
	text-decoration: none;
	z-index: 1;
	transition: all .175s ease-in-out;
}

.button.button-icon {
	padding-left: 16px;
}

.dark .button {
	background-color: var(--primary-80);
	color: var(--primary-20);
}

.button:hover {
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.button:before{
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	background-color: #FFFFFF;
	opacity: 0;
	border-radius: 100px;
	pointer-events: none;
	transition: all .175s ease-in-out;
}

.button:hover:before {
	opacity: .08;
}

.button:focus:before {
	opacity: .12;
}

.button.disabled,
.button[disabled] {
	cursor: default;
	color: var(--neutral-10);
	background-color: transparent;
}

.button.disabled:hover,
.button[disabled]:hover {
	box-shadow: none;
}

.dark .button.disabled,
.dark .button[disabled] {
	color: var(--neutral-90);
}

.button.disabled > span,
.button[disabled] > span {
	color: var(--neutral-10);
	opacity: .38;
}

.dark .button.disabled > span,
.dark .button[disabled] > span {
	color: var(--neutral-90);
}

.button.disabled:before,
.button[disabled]:before {
	background-color: #1F1F1F;
	opacity: .12;
}

.dark .button.disabled:before,
.dark .button[disabled]:before {
	background-color: #E3E3E3;
}


/*--------------------------------------------------------------
## BUTTONS OUTLINED
--------------------------------------------------------------*/

.button.outlined {
	border: 1px solid var(--neutral-10) !important;
	background-color: #FFF !important;
	color: var(--neutral-10) !important;
}

.dark .button.outlined {
	border: 1px solid var(--neutral-v-60);
	background-color: white !important;
	color: var(--primary-80) !important;
}

.button.outlined:hover:before {
	opacity: .08 !important;
	background-color: currentColor !important;
}

.button.outlined:focus:before {
	opacity: .12 !important;
	background-color: currentColor !important;
}

.button.outlined:focus {
	border-color: var(--primary-40) !important;
}

.dark .button.outlined:focus {
	border-color: var(--primary-80) !important;
}

.button.outlined:hover {
	box-shadow: none !important;
}

.button.outlined.disabled,
.button.outlined[disabled] {
	border-color: rgba(31, 31, 31, .12) !important;
}

.dark .button.outlined.disabled,
.dark .button.outlined[disabled] {
	border-color: rgba(227, 227, 227, 0.12) !important;
}

.button.outlined.disabled:before,
.button.outlined[disabled]:before,
.button.outlined.disabled:hover:before,
.button.outlined[disabled]:hover:before,
.button.outlined.disabled:focus:before,
.button.outlined[disabled]:focus:before {
	opacity: 0 !important;
}

/*--------------------------------------------------------------
## BUTTONS TEXT
--------------------------------------------------------------*/

.button.text {
	background-color: transparent;
	color: var(--primary-40);
}

.dark .button.text {
	color: var(--primary-80);
}

.button.text:hover {
	box-shadow: none;
}

.button.text:hover:before {
	opacity: .08;
	background-color: currentColor;
}

.button.text:focus:before {
	opacity: .12;
	background-color: currentColor;
}

.button.text.disabled:before,
.button.text[disabled]:before,
.button.text.disabled:hover:before,
.button.text[disabled]:hover:before,
.button.text.disabled:focus:before,
.button.text[disabled]:focus:before {
	opacity: 0;
}

/*--------------------------------------------------------------
## BUTTONS ELEVATED
--------------------------------------------------------------*/

.button.elevated {
	color: var(--primary-40);
	background-color: transparent;
	box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.3), 0px 1px 3px 1px rgba(0, 0, 0, 0.15);
}

.dark .button.elevated {
	color: var(--primary-80);
}

.button.elevated:before {
	background-color: var(--primary-40);
	opacity: .05;
}

.dark .button.elevated:before {
	background-color: var(--primary-80);
	opacity: .08;
}

.button.elevated:hover:before {
	background-color: var(--primary-40);
	opacity: .08;
}

.dark .button.elevated:hover:before {
	background-color: var(--primary-80);
	opacity: .11;
}

.button.elevated:focus:before {
	background-color: var(--primary-40);
	opacity: .11;
}

.dark .button.elevated:focus:before {
	background-color: var(--primary-80);
	opacity: .16;
}

.button.elevated.disabled,
.button.elevated[disabled] {
	box-shadow: none;
}

.button.elevated.disabled:before,
.button.elevated[disabled]:before,
.button.elevated.disabled:hover:before,
.button.elevated[disabled]:hover:before,
.button.elevated.disabled:focus:before,
.button.elevated[disabled]:focus:before {
	background-color: #1F1F1F;
	opacity: .12;
}

.dark .button.elevated.disabled:before,
.dark .button.elevated[disabled]:before,
.dark .button.elevated.disabled:hover:before,
.dark .button.elevated[disabled]:hover:before,
.dark .button.elevated.disabled:focus:before,
.dark .button.elevated[disabled]:focus:before {
	background-color: #E3E3E3;
	opacity: .12;
}

/*--------------------------------------------------------------
## BUTTONS TONAL
--------------------------------------------------------------*/

.button.tonal {
	color: var(--secondary-10);
	background-color: var(--secondary-90);
}

.dark .button.tonal {
	color: var(--secondary-90);
	background-color: var(--secondary-30);
}

.button.tonal:before {
	background-color: currentColor;
}

.button.tonal.disabled,
.button.tonal[disabled] {
	cursor: default;
	color: var(--neutral-10);
	background-color: transparent;
}

.button.tonal.disabled:hover,
.button.tonal[disabled]:hover {
	box-shadow: none;
}

.dark .button.tonal.disabled,
.dark .button.tonal[disabled] {
	color: var(--neutral-90);
}

.button.tonal.disabled > span,
.button.tonal[disabled] > span {
	color: var(--neutral-10);
	opacity: .38;
}

.dark .button.tonal.disabled > span,
.dark .button.tonal[disabled] > span {
	color: var(--neutral-90);
}

.button.tonal.disabled:before,
.button.tonal[disabled]:before {
	background-color: #1F1F1F;
	opacity: .12;
}

.dark .button.tonal.disabled:before,
.dark .button.tonal[disabled]:before {
	background-color: #E3E3E3;
}

/*--------------------------------------------------------------
## BUTTONS SIZE
--------------------------------------------------------------*/

.button.button-s {
	height: 24px;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 0.5px;
	padding: 0 16px;
}

.button.button-s.button-icon {
	padding-left: 12px;
}

.button.button-m {
	height: 32px;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.5px;
	padding: 0 20px;
}

.button.button-m.button-icon {
	padding-left: 14px;
}

/*--------------------------------------------------------------
## BUTTONS SQUARE
--------------------------------------------------------------*/

.button.button-square {
	height: 32px;
	width: 32px;
	background-color: transparent;
	color: var(--primary-40);
}

.button.button-square:hover {
	box-shadow: none;
}

.dark .button.button-square {
	color: var(--primary-80);
}

.button.button-square:hover:before {
	opacity: .08;
	background-color: currentColor;
}

.button.button-square:focus:before {
	opacity: .12;
	background-color: currentColor;
}

.button.button-square.disabled:before,
.button.button-square[disabled]:before,
.button.button-square.disabled:hover:before,
.button.button-square[disabled]:hover:before,
.button.button-square.disabled:focus:before,
.button.button-square[disabled]:focus:before {
	opacity: 0;
}

.button.button-square > span {
	font-size: 24px;
}






.portrait-image {
	min-height: initial !important;
	padding: 0 !important;
}

.portrait-image img {
	position: relative !important;
}

@media (min-width: 601px) {

.portrait-image {
	min-height: 757px !important;
	padding: 15px !important;
}

.portrait-image-s {
	min-height: 480px !important;
	padding: 15px !important;
}

.portrait-image img {
	position: absolute !important;
}


}

.ar-11 {
	aspect-ratio: 1 / 1 ;
}

.outlined-313131 {
	border: 1px solid #313131;
}

.mt--16 {
	margin-top: -16px !important;
}

.azura-checkbox .icon-fill {
	fill: var(--neutral-10)  !important;
}

.azura-app-container * {
	margin-block-end: 0;
	margin-block-start: 0;
}

.trans-y--9 {
	transform: translateY(-9px) !important;
}

.ellipsis-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: all 150ms ease-in-out;
}

.read-more-input {
	display: none;
}

.read-more-input:checked + .ellipsis-3 {
	-webkit-line-clamp: 100;
}

.read-more-label {
	display: flex;
	padding-top: 24px;
	font-size: 16px;
	cursor: pointer;
	margin-bottom: 24px;
}

.read-less-exp {
	display: none;
}

.read-more-input:checked ~ .read-more-label .read-more-exp {
	display: none;
}

.read-more-input:checked ~ .read-more-label .read-less-exp {
	display: block;
}

.cky-btn {
	border-radius: 8px !important;
}

.cky-title {
	margin: 0 !important;
}

.min-height-full-img,
.min-height-full-img img {
	min-height: 100% !important;
}

@media (min-width: 960px) {
	.min-height-md-685 {
		min-height: 685px !important;
	}
}

.xs-contain img {
	object-fit: contain !important;
}

@media (min-width: 960px) {
	.md-cover img {
		object-fit: cover !important;
	}
}


/**/
.category-section-backgound{
	background-color: #f9f2e5;
	border-radius: 16px;
}

/*.product .price::after{
	content: '(Pret cu tva)';
	padding-left: 8px;
	display: inline-block;
}*/

.popup-urbancaves-nl {
	background-color: #f9f2e5 !important;
	color: #251e21 !important;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 10px 10px;
	border-radius: 0px !important;
	/* margin: auto; */
	border: 1px solid #414141 !important;
	width: auto;
	min-width: 80%;
	z-index: 999999;
}

.text-popup-nl {
	color: #251e21 !important;
}

#acym_fulldiv_formAcym1.acym__subscription__form__shortcode {
	background:  transparent !important;
}

li.wp-block-post.product {
	position: relative;
}

.status-stoc {
	position: absolute;
	top: 8px;
	left: 8px;
	background-color: white;
	border-radius: 4px;
	border: 1px solid #212121;
	padding: 4px 8px 2px 8px;
	display: flex;
	align-items: center;
	margin: 0 !important;
}

.product {
	position: relative !important;
}

.woocommerce-product-gallery__image {
	background-color: #FFF !important;
}

.woocommerce-product-gallery__image > a > img {
	height: 450px !important;
	object-fit: contain !important;
}

.custom-delivery-time {
	margin-bottom: 16px !important;
	color: #466d1d;
}

@media screen and (max-width: 720px) {
	.wc-block-components-product-stock-indicator {
		display: none !important;
	}
}

#toggle-drawer img {
	width: 40px !important;
}

.cautare-si-sortare {
	display: flex !important;
	flex-direction: row !important;
}

@media screen and (max-width: 720px) {
	.cautare-si-sortare {
		flex-direction: column !important;
	}
}

#acym_fulldiv_formAcym1.acym__subscription__form__shortcode input#email_field_274 {
	border: 1px solid #414141 !important;
}

#formAcym1 #email_field_500 {
	border: 1px solid #414141 !important;
}