@charset "UTF-8";
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *  xTheme (Default Theme)
 *
 *	Imports
 *	Main Collector
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Global Configurations
 *	Import all config files
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Tools
 *	Functions
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Global Configurations
 *	General configuration variables
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/* ---------------------------------------------------------------------------------------------------
    COLORS
------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------------------------------
    SPACING
------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------------------------------
    TYPOGRAPHY
------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------------------------------
    CONTAINER
------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------------------------------
    ICONS
------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------------------------------
    MISCELLANIOUS
------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------------------------------
    BREAKPOINTS
------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------------------------------
    GRID
------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------------------------------
    GRADIENTS
------------------------------------------------------------------------------------------------------ */
/* ---------------------------------------------------------------------------------------------------
    MISCELLANIOUS
------------------------------------------------------------------------------------------------------ */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Global Configurations
 *	Components - Atoms
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Global Configurations
 *	Components - Molecules
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Global Configurations
 *	Components - Navigations
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Global Configurations
 *	css-4 variables
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
:root {
  /* ---------------------------------------------------------------------------------------------------
      General configuration variables
  ------------------------------------------------------------------------------------------------------ */
  --color-light: #ffffff;
  --color-soft-light: #e6e6e6;
  --color-dark: #000000;
  --color-soft-dark: #1a1a1a;
  --color-light-grey: whitesmoke;
  --color-medium-grey: #d7d9d9;
  --color-dark-grey: #e0e0e0;
  --color-meta-text: gray;
  --color-primary: #806359;
  --color-light-primary: #a37d70;
  --color-dark-primary: #57423a;
  --color-secondary: #1a100c;
  --color-light-secondary: #4e3024;
  --color-dark-secondary: black;
  --color-success: #70bf44;
  --color-light-success: #d6edc9;
  --color-dark-success: #4f882f;
  --color-warning: #bf8344;
  --color-light-warning: #eddbc9;
  --color-dark-warning: #885c2f;
  --color-danger: #e74943;
  --color-light-danger: #fbe2e1;
  --color-dark-danger: #c41f19;
  --color-info: #4e44bf;
  --color-light-info: #ccc9ed;
  --color-dark-info: #362f88;
  --color-global-bg: #ffffff;
  --color-dark-font: #666666;
  --color-light-font: #ffffff;
  --color-dark-headline: #666666;
  --color-light-headline: #ffffff;
  --color-selection: #806359;
  --color-selection-backup: #57423a;
  --color-icon: #dadada;
  --spacing-small: 0.75em;
  --spacing-medium: 1.5em;
  --spacing-large: 2.5em;
  --typo-base-font: "OpenSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --typo-headline-font: "Teko", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --typo-nav-font: "OpenSans", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --typo-button-font: "Teko", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --typo-base-size: 1.6rem;
  --typo-viewport-s-size: 1.6rem;
  --typo-viewport-m-size: 1.6rem;
  --typo-viewport-l-size: 1.6rem;
  --typo-icon-font-size: 1.6rem;
  --typo-base-line-height: 1.7;
  --typo-base-letter-spacing: 0.025em;
  --typo-wide-letter-spacing: 0.08em;
  --typo-paragraph-spacing: var(--spacing-small);
  --container-width: 128rem;
  --container-spacing: 1.5em;
  --container-special-gap: 0;
  --icon-width: 1.75rem;
  --icon-height: 1.25rem;
  --icon-strength: 0.2rem;
  --border-radius: 0;
  --border-width: 2px;
  --base-shadow-x: 0;
  --base-shadow-y: 0.3rem;
  --base-shadow-spread: 4rem;
  --base-shadow-color: rgba(0, 0, 0, 0.05);
  --overlay-shadow-x: 0;
  --overlay-shadow-y: 3rem;
  --overlay-shadow-spread: 9rem;
  --overlay-shadow-color: rgba(0, 0, 0, 0.3);
  --shadow-base: var(--base-shadow-x) var(--base-shadow-y) var(--base-shadow-spread) var(--base-shadow-color);
  --shadow-overlay: var(--overlay-shadow-x) var(--overlay-shadow-y) var(--overlay-shadow-spread) var(--overlay-shadow-color);
  --transition-short: all 0.3s ease;
  --transition-medium: all 0.6s ease;
  --transition-long: all 1.2s ease;
  /* ---------------------------------------------------------------------------------------------------
      Components
  ------------------------------------------------------------------------------------------------------ */
  --headline-color: var(--color-dark-headline);
  --headline-margin-bottom: 1.6rem;
  --headline-font: var(--typo-headline-font);
  --headline-text-transform: uppercase;
  --headline-line-height: 1;
  --headline-transition: var(--transition-medium);
  --h1-mobile-size: 3em;
  --h1-desktop-size: 4.6em;
  --h1-weight: 800;
  --h2-mobile-size: 2.8em;
  --h2-desktop-size: 3.5em;
  --h2-weight: 700;
  --h3-mobile-size: 2em;
  --h3-desktop-size: 2.6em;
  --h3-weight: 400;
  --h4-mobile-size: 1.2em;
  --h4-desktop-size: 1.7em;
  --h4-weight: 400;
  --h5-mobile-size: 1em;
  --h5-desktop-size: 1em;
  --h5-weight: 400;
  --text-divider-width: 1px;
  --text-divider-style: solid;
  --text-divider-color: var(--color-medium-grey);
  --text-meta-color: var(--color-meta-text);
  --text-meta-font-size: 0.8em;
  --text-selection-bg: var(--color-selection);
  --text-selection-color: var(--color-light-font);
  --quotation-color: var(--color-dark-headline);
  --quotation-font-size: 1.5em;
  --quotation-font-weight: inherit;
  --quotation-font-style: italic;
  --quotation-meta-color: var(--color-primary);
  --quotation-meta-font-size: inherit;
  --quotation-meta-font-weight: inherit;
  --quotation-meta-font-style: var(--quotation-font-style);
  --quotation-meta-before: "—";
  --quotation-meta-before-spacing: 0.5em;
  --quotation-mark-font-size: var(--quotation-font-size);
  --quotation-mark-font-weight: var(--quotation-font-weight);
  --quotation-mark-font-style: var(--quotation-font-style);
  --quotation-mark-spacing: 0.25rem;
  --link-color: var(--color-primary);
  --link-hover-color: #53403a;
  --link-transition: var(--transition-medium);
  --link-text-deco: none;
  --link-hover-text-deco: underline;
  --nav-link-font: var(--typo-nav-font);
  --nav-link-color: var(--color-dark-font);
  --nav-link-hover-color: var(--color-primary);
  --nav-link-text-deco: none;
  --nav-link-hover-text-deco: var(--link-hover-text-deco);
  --nav-link-active-color: var(--color-primary);
  --nav-link-active-text-deco: inherit;
  --list-bullet-gap: 1rem;
  --list-divider: 1px solid var(--color-medium-grey);
  --list-dividing-spacing: 0.3em 0;
  --list-striped-spacing: 0.5em 0;
  --list-striped-bg: var(--color-light-grey);
  --list-dl-titel-fontsize: 1em;
  --list-dl-titel-fontweight: bold;
  --list-dl-indentation: 0;
  --list-dl-spacing: 0.5em;
  --list-pricing-fontsize: 1em;
  --list-pricing-spacing: var(--list-dl-spacing);
  --list-pricing-dots: 2px dotted var(--color-dark-font);
  --list-pricing-dots-spacing: 0.42em;
  --list-price-fontweight: bold;
  --button-font: var(--typo-button-font);
  --button-font-size: 2rem;
  --button-font-weight: 400;
  --button-transform: initial;
  --button-x-padding: 3rem;
  --button-y-padding: 1rem;
  --button-line-height: normal;
  --button-letter-spacing: var(--typo-base-letter-spacing);
  --button-text-deco: none;
  --button-outline-border: 2px;
  --button-border-radius: var(--border-radius);
  --button-transition: var(--transition-medium);
  --button-bg: var(--color-dark-grey);
  --button-hover-bg: #c7c7c7;
  --button-text-color: var(--color-dark-font);
  --button-round-border-radius: 3em;
  --label-bg: var(--color-dark-grey);
  --label-text-color: var(--color-dark-font);
  --label-x-padding: 0.9em;
  --label-y-padding: 0.55em;
  --label-font-size: 0.8em;
  --label-font-weight: 400;
  --label-letter-case: uppercase;
  --label-letter-spacing: var(--typo-wide-letter-spacing);
  --label-line-height: normal;
  --label-border-radius: var(--border-radius);
  --label-transition: var(--transition-medium);
  --dropdown-width: 24rem;
  --dropdown-transition: var(--transition-short);
  --dropdown-z-index: 6;
  --dropdown-nav-link-hover-color: var(--color-primary);
  --icon-box-bg: transparent;
  --icon-box-small-size: 2.5em;
  --icon-box-medium-size: 4em;
  --icon-box-large-size: 6em;
  --icon-box-padding: 0;
  --icon-box-round-bg: var(--color-medium-grey);
  --icon-box-round-padding: 1em;
  --icon-box-small-round-padding: 0.5em;
  --icon-box-large-round-padding: 1.25em;
  --icon-box-transition: var(--transition-medium);
  --divider-color: var(--color-medium-grey);
  --divider-spacing: 1.5em;
  --countdown-color: inherit;
  --countdown-font-size: 5em;
  --countdown-font-weight: inherit;
  --popover-width: 24em;
  --popover-transition: var(--transition-medium);
  --popover-box-shadow: var(--shadow-overlay);
  --popover-z-index: 8;
  --pagination-page-transition: var(--transition-medium);
  --pagination-link-spacing: 0.5em;
  --pagination-link-bg: transparent;
  --pagination-link-color: var(--link-color);
  --pagination-link-hover-bg: var(--color-dark-grey);
  --pagination-link-hover-color: var(--link-hover-color);
  --pagination-link-width: 4rem;
  --pagination-link-padding: var(--spacing-small) 0.75rem;
  --pagination-link-border-width: 1px;
  --pagination-link-border-color: transparent;
  --pagination-link-transition: var(--transition-medium);
  --pagination-link-active-bg: var(--color-primary);
  --pagination-link-active-color: var(--color-light-font);
  --pagination-link-border-radius: var(--border-radius);
  --accordion-header-bg: var(--color-global-bg);
  --accordion-header-color: var(--color-dark-font);
  --accordion-header-hover-bg: var(--color-global-bg);
  --accordion-header-hover-color: var(--color-dark-font);
  --accordion-header-font-size: var(--h4-desktop-size);
  --accordion-header-border: 1px solid var(--color-dark-grey);
  --accordion-header-transition: none;
  --accordion-padding: 0;
  --accordion-border: none;
  --accordion-box-shadow: none;
  --accordion-item-x-padding: 0;
  --accordion-item-y-padding: var(--spacing-small);
  --accordion-body-transition: var(--transition-medium);
  --alert-bg: var(--color-medium-grey);
  --alert-color: var(--color-dark-font);
  --alert-padding: var(--spacing-large);
  --alert-transition: var(--transition-medium);
  --box-bg: transparent;
  --card-bg: var(--color-global-bg);
  --card-bg-value: #ffffff;
  --card-color: var(--color-dark-font);
  --card-shadow: var(--shadow-base);
  --card-padding: 0;
  --card-border: none;
  --card-border-radius: var(--border-radius);
  --card-transition: var(--transition-medium);
  --card-content-x-padding: var(--spacing-large);
  --card-content-y-padding: var(--spacing-medium);
  --card-content-border: 1px solid var(--color-medium-grey);
  --card-vertical-img-height: 24rem;
  --form-padding: 0;
  --form-element-spacing: var(--spacing-small);
  --form-label-width: 6em;
  --form-label-x-spacing: var(--spacing-small);
  --form-label-y-spacing: var(--spacing-small);
  --form-label-fontweight: 400;
  --form-label-lettercase: initial;
  --form-field-bg: var(--color-medium-grey);
  --form-field-color: var(--color-dark-font);
  --form-field-border: none;
  --form-field-border-radius: var(--border-radius);
  --form-field-x-padding: 1em;
  --form-field-y-padding: var(--button-y-padding);
  --form-field-focus-outline: 0 0 0 1px var(--color-primary);
  --form-field-transition: var(--transition-short);
  --form-footnote-color: inherit;
  --form-footnote-fontsize: 0.8em;
  --form-footnote-fontweight: 300;
  --form-footnote-top-spacing: 0.35em;
  --form-select-bg: var(--form-field-bg);
  --form-select-hover-bg: #e8e8e8;
  --form-select-transition: var(--transition-medium);
  --form-select-icon-color: var(--color-primary);
  --form-select-active-bg: var(--color-primary);
  --form-select-active-color: var(--color-light-font);
  --form-checkbox-bg: var(--form-field-bg);
  --form-checkbox-gutter: 1em;
  --form-checkbox-size: 1.5em;
  --form-checkbox-border: 1px solid var(--color-dark-grey);
  --form-checkbox-radius: var(--border-radius);
  --form-checkbox-transition: var(--transition-short);
  --form-checked-bg: var(--color-primary);
  --form-check-hover-color: var(--color-light-primary);
  --form-check-width: 0.6rem;
  --form-check-height: 1.2rem;
  --form-check-spacing: 0.6rem;
  --form-check-border: 2px solid var(--color-light);
  --form-radio-radius: 50%;
  --form-radio-border: 5px solid var(--color-light);
  --form-switch-toggle-bg: var(--color-light);
  --form-switch-off-bg: var(--color-dark-grey);
  --form-switch-on-bg: var(--color-success);
  --form-switch-spacing: -0.2rem;
  --form-switch-toggle-spacing: 0.2em;
  --form-switch-radius: 1.6rem;
  --form-switch-transition: var(--transition-medium);
  --form-range-slider-bg: var(--color-light);
  --form-range-slider-height: 0.5rem;
  --form-range-slider-opacity: 1;
  --form-range-slider-radius: 0.3rem;
  --form-range-handle-bg: var(--color-light);
  --form-range-handle-width: 2rem;
  --form-range-handle-height: 2rem;
  --form-range-handle-border: 0.3rem solid var(--color-light);
  --form-range-handle-radius: 50%;
  --lightbox-bg: rgba(0, 0, 0, 0.8);
  --lightbox-transition: var(--transition-medium);
  --lightbox-overlay-color: var(--color-light);
  --lightbox-toggle-overlay: rgba(0, 0, 0, 0.5);
  --lightbox-toggle-overlay-transition: var(--transition-medium);
  --modal-transition: var(--transition-medium);
  --modal-dismiss-spacing: var(--spacing-medium);
  --off-canvas-bg: var(--color-primary);
  --off-canvas-transition: var(--transition-short);
  --off-canvas-padding: var(--spacing-medium);
  --off-canvas-overlay-bg: rgba(0, 0, 0, 0.3);
  --overlay-margin: 1em;
  --overlay-padding: 0.5em;
  --overlay-transition: var(--transition-medium);
  --slider-fade-transition: var(--transition-medium);
  --slider-slow-slide-transition: all 1.4s;
  --slider-medium-slide-transition: all 0.8s;
  --slider-fast-slide-transition: all 0.4s;
  --slider-control-area-bg: white;
  --slider-control-area-padding: var(--spacing-medium);
  --slider-control-area-hover-bg: #dadada;
  --slider-control-icon-color: #a7a7a7;
  --slider-control-area-transition: var(--transition-medium);
  --dotnav-padding: 0;
  --dotnav-size: 0.75em;
  --dotnav-bg: transparent;
  --dotnav-active-bg: var(--color-dark);
  --dotnav-border: 1px solid var(--color-dark);
  --dotnav-active-border: var(--slider-dotnav-border);
  --dotnav-spacing: 0.5em;
  --dotnav-transition: var(--transition-medium);
  --table-striped-bg: var(--color-light-grey);
  --table-head-letter-case: normal;
  --table-head-font-weight: bold;
  --table-padding: 0.75em 1em;
  --table-border-width: 1px;
  --table-border-style: solid;
  --table-row-border: var(--table-border-width) var(--table-border-style) var(--color-medium-grey);
  --table-column-border: var(--table-border-width) var(--table-border-style) var(--color-medium-grey);
  --tab-nav-bg: transparent;
  --tab-nav-link-bg: var(--color-global-bg);
  --tab-nav-link-color: var(--color-dark-font);
  --tab-nav-link-deco-color: var(--color-primary);
  --tab-nav-link-active-bg: var(--color-global-bg);
  --tab-nav-link-active-color: var(--color-primary);
  --tab-nav-link-hover-bg: var(--color-light-grey);
  --tab-nav-link-border: 1px solid var(--color-medium-grey);
  --tab-nav-link-letter-spacing: var(--typo-wide-letter-spacing);
  --tab-nav-link-text-deco: none;
  --tab-nav-link-transition: all 0.4s;
  --tab-nav-padding: 1.125em 1.5em 1.125em 1.5em;
  --tab-nav-hover-height: 2px;
  --tab-nav-border-bottom: 1px solid var(--color-medium-grey);
  --tab-border: none;
  --tab-bottom-border: var(--tab-nav-border-bottom);
  --tab-padding: var(--spacing-medium);
  --tab-transition: all 1.5s;
  --nav-link-gutter: var(--spacing-large);
  --nav-link-spacing: var(--spacing-medium) 0;
  --breadcrumb-item-spacing: 0 1.125em;
  --breadcrumb-item-divider: 1px solid var(--color-dark-grey);
  --breadcrumb-active-item-color: var(--color-primary);
  --breadcrumb-line-height: 1;
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Tools
 *	Mixins
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/* ---------------------------------------------------------------------------------------------------
    COLOR FEEDS
------------------------------------------------------------------------------------------------------ */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Global Configurations
 *	Includes
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement
 *	Basic classes and settings
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
body {
  background-color: var(--color-global-bg);
  color: var(--color-dark-font);
  overflow-x: hidden;
}

nav ol, nav ul {
  list-style: none;
  padding-left: 0;
}

.viewport {
  width: 100vw;
  height: 100vh;
}

.scroll-x {
  overflow-x: auto;
}

.object-cover {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.scroll-to-top {
  display: none;
  opacity: 0;
  -webkit-transition: var(--transition-medium);
  transition: var(--transition-medium);
  z-index: 9;
}
.scroll-to-top .icon-holder {
  -webkit-transform: scale(0.7);
          transform: scale(0.7);
}
.scroll-to-top .icon-holder .icon, .scroll-to-top .icon-holder .icon:before, .scroll-to-top .icon-holder .icon:after {
  background-color: var(--color-medium-grey);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement
 *	Typography
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement - Fonts
 *	OpenSans
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement - Fonts
 *	Teko
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement - Fonts
 *	Muli
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement - Fonts
 *	Raleway
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement - Fonts
 *	Rubik
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement - Fonts
 *	Nunito Sans
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement - Fonts
 *	SocialMedia
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
@font-face {
  font-family: "OpenSans";
  font-style: normal;
  font-weight: 300;
  src: url("../../../fonts/OpenSans/light/woff2/opensans-light-normal.woff2") format("woff2"), url("../../../fonts/OpenSans/light/woff/opensans-light-normal.woff") format("woff"), url("../../../fonts/OpenSans/light/ttf/opensans-light-normal.ttf") format("truetype");
}
@font-face {
  font-family: "OpenSans";
  font-style: italic;
  font-weight: 300;
  src: url("../../../fonts/OpenSans/light/woff2/opensans-light-italic.woff2") format("woff2"), url("../../../fonts/OpenSans/light/woff/opensans-light-italic.woff") format("woff"), url("../../../fonts/OpenSans/light/ttf/opensans-light-italic.ttf") format("truetype");
}
@font-face {
  font-family: "OpenSans";
  font-style: normal;
  font-weight: 400;
  src: url("../../../fonts/OpenSans/regular/woff2/opensans-regular-normal.woff2") format("woff2"), url("../../../fonts/OpenSans/regular/woff/opensans-regular-normal.woff") format("woff"), url("../../../fonts/OpenSans/regular/ttf/opensans-regular-normal.ttf") format("truetype");
}
@font-face {
  font-family: "OpenSans";
  font-style: italic;
  font-weight: 400;
  src: url("../../../fonts/OpenSans/regular/woff2/opensans-regular-italic.woff2") format("woff2"), url("../../../fonts/OpenSans/regular/woff/opensans-regular-italic.woff") format("woff"), url("../../../fonts/OpenSans/regular/ttf/opensans-regular-italic.ttf") format("truetype");
}
@font-face {
  font-family: "OpenSans";
  font-style: normal;
  font-weight: 700;
  src: url("../../../fonts/OpenSans/bold/woff2/opensans-bold-normal.woff2") format("woff2"), url("../../../fonts/OpenSans/bold/woff/opensans-bold-normal.woff") format("woff"), url("../../../fonts/OpenSans/bold/ttf/opensans-bold-normal.ttf") format("truetype");
}
@font-face {
  font-family: "OpenSans";
  font-style: italic;
  font-weight: 700;
  src: url("../../../fonts/OpenSans/bold/woff2/opensans-bold-italic.woff2") format("woff2"), url("../../../fonts/OpenSans/bold/woff/opensans-bold-italic.woff") format("woff"), url("../../../fonts/OpenSans/bold/ttf/opensans-bold-italic.ttf") format("truetype");
}
@font-face {
  font-family: "OpenSans";
  font-style: normal;
  font-weight: 800;
  src: url("../../../fonts/OpenSans/black/woff2/opensans-black-normal.woff2") format("woff2"), url("../../../fonts/OpenSans/black/woff/opensans-black-normal.woff") format("woff"), url("../../../fonts/OpenSans/black/ttf/opensans-black-normal.ttf") format("truetype");
}
@font-face {
  font-family: "Teko";
  font-style: normal;
  font-weight: 400;
  src: url("../../../fonts/Teko/regular/woff2/teko-regular-normal.woff2") format("woff2"), url("../../../fonts/Teko/regular/woff/teko-regular-normal.woff") format("woff"), url("../../../fonts/Teko/regular/ttf/teko-regular-normal.ttf") format("truetype");
}
@font-face {
  font-family: "Teko";
  font-style: normal;
  font-weight: 700;
  src: url("../../../fonts/Teko/bold/woff2/teko-bold-normal.woff2") format("woff2"), url("../../../fonts/Teko/bold/woff/teko-bold-normal.woff") format("woff"), url("../../../fonts/Teko/bold/ttf/teko-bold-normal.ttf") format("truetype");
}
@font-face {
  font-family: "Teko";
  font-style: normal;
  font-weight: 800;
  src: url("../../../fonts/Teko/black/woff2/teko-black-normal.woff2") format("woff2"), url("../../../fonts/Teko/black/woff/teko-black-normal.woff") format("woff"), url("../../../fonts/Teko/black/ttf/teko-black-normal.ttf") format("truetype");
}
@font-face {
  font-family: "icomoon";
  font-style: normal;
  font-weight: 400;
  src: url("../../../fonts/icomoon/regular/woff2/icomoon.woff2") format("woff2"), url("../../../fonts/icomoon/regular/woff/icomoon.woff") format("woff"), url("../../../fonts/icomoon/regular/ttf/icomoon.ttf") format("truetype");
}
body {
  font-family: var(--typo-base-font);
  font-size: var(--typo-base-size);
  font-style: normal;
  font-weight: 400;
  line-height: var(--typo-base-line-height);
  letter-spacing: var(--typo-base-letter-spacing);
}
@media (min-width: 600px) {
  body {
    font-size: var(--typo-viewport-s-size);
  }
}
@media (min-width: 900px) {
  body {
    font-size: var(--typo-viewport-m-size);
  }
}
@media (min-width: 1200px) {
  body {
    font-size: var(--typo-viewport-l-size);
  }
}

p {
  margin-top: var(--typo-paragraph-spacing);
  margin-bottom: var(--typo-paragraph-spacing);
  -webkit-transition: var(--transition-medium);
  transition: var(--transition-medium);
}

.italic {
  font-style: italic;
}

.bold {
  font-style: bold;
}

.underline {
  text-decoration: underline;
}

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

[class^=icon-], [class*=" icon-"] {
  font-size: var(--typo-icon-font-size);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement
 *	Containers
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement - Containers
 *	Grid-Container
 *
 *  author - König Alfonz
 *  version - v1
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement - Containers
 *	Flex-Container
 *
 *  author - König Alfonz
 *  version - v2
 *
 *  ======================================================================================================================= */
.container {
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
}

.container-small, .container-medium, .container-large {
  display: grid;
  grid-template-columns: 0 auto 0;
  grid-gap: var(--container-special-pag);
}
.container-small > .container-content, .container-medium > .container-content, .container-large > .container-content {
  min-width: 0;
  grid-column: 2/3;
}
.container-small > .off-content-left, .container-medium > .off-content-left, .container-large > .off-content-left {
  grid-column: 1/2;
  overflow: hidden;
}
.container-small > .off-content-right, .container-medium > .off-content-right, .container-large > .off-content-right {
  grid-column: 3/4;
  overflow: hidden;
}

.container, [class*=container-] > .container-content {
  padding-left: 1.5em;
  padding-right: 1.5em;
}

@media (min-width: 600px) {
  .container, [class*=container-] > .container-content {
    padding-left: 1.875em;
    padding-right: 1.875em;
  }
}
@media (min-width: 900px) {
  .container, [class*=container-] > .container-content {
    padding-left: 2.25em;
    padding-right: 2.25em;
  }
}
@media (min-width: 1200px) {
  .container, [class*=container-] > .container-content {
    padding-left: 2.625em;
    padding-right: 2.625em;
  }
}
@media (min-width: 1000px) {
  .container-small {
    grid-template-columns: 3% auto 3%;
  }
  .container-small.open-left {
    grid-template-columns: 0 auto 3%;
  }
  .container-small.open-right {
    grid-template-columns: 3% auto 0;
  }
  .container-medium {
    grid-template-columns: 2.25% auto 2.25%;
  }
  .container-medium.open-left {
    grid-template-columns: 0 auto 2.25%;
  }
  .container-medium.open-right {
    grid-template-columns: 2.25% auto 0;
  }
}
@media (min-width: 1200px) {
  .container-small {
    grid-template-columns: 6% auto 6%;
  }
  .container-small.open-left {
    grid-template-columns: 0 auto 6%;
  }
  .container-small.open-right {
    grid-template-columns: 6% auto 0;
  }
  .container-medium {
    grid-template-columns: 4.5% auto 4.5%;
  }
  .container-medium.open-left {
    grid-template-columns: 0 auto 4.5%;
  }
  .container-medium.open-right {
    grid-template-columns: 4.5% auto 0;
  }
}
@media (min-width: 1400px) {
  .container-small {
    grid-template-columns: 10% auto 10%;
  }
  .container-small.open-left {
    grid-template-columns: 0 auto 10%;
  }
  .container-small.open-right {
    grid-template-columns: 10% auto 0;
  }
  .container-medium {
    grid-template-columns: 7.5% auto 7.5%;
  }
  .container-medium.open-left {
    grid-template-columns: 0 auto 7.5%;
  }
  .container-medium.open-right {
    grid-template-columns: 7.5% auto 0;
  }
  .container-large {
    grid-template-columns: 5% auto 5%;
  }
  .container-large.open-left {
    grid-template-columns: 0 auto 5%;
  }
  .container-large.open-right {
    grid-template-columns: 5% auto 0;
  }
}
@media (min-width: 1600px) {
  .container-small {
    grid-template-columns: 15% auto 15%;
  }
  .container-small.open-left {
    grid-template-columns: 0 auto 15%;
  }
  .container-small.open-right {
    grid-template-columns: 15% auto 0;
  }
  .container-medium {
    grid-template-columns: 11.25% auto 11.25%;
  }
  .container-medium.open-left {
    grid-template-columns: 0 auto 11.25%;
  }
  .container-medium.open-right {
    grid-template-columns: 11.25% auto 0;
  }
  .container-large {
    grid-template-columns: 7.5% auto 7.5%;
  }
  .container-large.open-left {
    grid-template-columns: 0 auto 7.5%;
  }
  .container-large.open-right {
    grid-template-columns: 7.5% auto 0;
  }
}
@media (min-width: 1850px) {
  .container-small {
    grid-template-columns: 20% auto 20%;
  }
  .container-small.open-left {
    grid-template-columns: 0 auto 20%;
  }
  .container-small.open-right {
    grid-template-columns: 20% auto 0;
  }
  .container-medium {
    grid-template-columns: 15% auto 15%;
  }
  .container-medium.open-left {
    grid-template-columns: 0 auto 15%;
  }
  .container-medium.open-right {
    grid-template-columns: 15% auto 0;
  }
  .container-large {
    grid-template-columns: 10% auto 10%;
  }
  .container-large.open-left {
    grid-template-columns: 0 auto 10%;
  }
  .container-large.open-right {
    grid-template-columns: 10% auto 0;
  }
}
@media (min-width: 2200px) {
  .container-small {
    grid-template-columns: 24% auto 24%;
  }
  .container-small.open-left {
    grid-template-columns: 0 auto 24%;
  }
  .container-small.open-right {
    grid-template-columns: 24% auto 0;
  }
  .container-medium {
    grid-template-columns: 18% auto 18%;
  }
  .container-medium.open-left {
    grid-template-columns: 0 auto 18%;
  }
  .container-medium.open-right {
    grid-template-columns: 18% auto 0;
  }
  .container-large {
    grid-template-columns: 12% auto 12%;
  }
  .container-large.open-left {
    grid-template-columns: 0 auto 12%;
  }
  .container-large.open-right {
    grid-template-columns: 12% auto 0;
  }
}
@media (min-width: 2600px) {
  .container-small {
    grid-template-columns: 28% auto 28%;
  }
  .container-small.open-left {
    grid-template-columns: 0 auto 28%;
  }
  .container-small.open-right {
    grid-template-columns: 28% auto 0;
  }
  .container-medium {
    grid-template-columns: 21% auto 21%;
  }
  .container-medium.open-left {
    grid-template-columns: 0 auto 21%;
  }
  .container-medium.open-right {
    grid-template-columns: 21% auto 0;
  }
  .container-large {
    grid-template-columns: 14% auto 14%;
  }
  .container-large.open-left {
    grid-template-columns: 0 auto 14%;
  }
  .container-large.open-right {
    grid-template-columns: 14% auto 0;
  }
}
.container-small.open-left > .container-content,
.container-medium.open-left > .container-content,
.container-large.open-left > .container-content {
  padding-left: 0;
}

.container-small.open-right > .container-content,
.container-medium.open-right > .container-content,
.container-large.open-right > .container-content {
  padding-right: 0;
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement
 *	Grids
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement - Grids
 *	Fixed Grid
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement - Grids
 *	Auto Grid
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement - Grids
 *	Punctual Grid
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement - Grids
 *	MinMax Grid
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
.grid {
  width: 100%;
  display: grid;
}

.columns-1 {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
}

.columns-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.columns-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.columns-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.columns-5 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}

.columns-6 {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
}

.columns-7 {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
}

.columns-8 {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
}

.columns-9 {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
}

.columns-10 {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
}

.grid.auto-2, .grid.auto-3, .grid.auto-4, .grid.auto-5 {
  grid-template-columns: 1fr;
}
.grid.auto-6, .grid.auto-7, .grid.auto-8 {
  grid-template-columns: repeat(2, 1fr);
}
.grid.auto-9, .grid.auto-10 {
  grid-template-columns: repeat(3, 1fr);
}
@media (min-width: 600px) {
  .grid.auto-3, .grid.auto-4, .grid.auto-5 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid.auto-6, .grid.auto-7 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid.auto-8 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid.auto-10 {
    grid-template-columns: repeat(5, 1fr);
  }
}
@media (min-width: 900px) {
  .grid.auto-2 {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid.auto-3, .grid.auto-5 {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid.auto-4 {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid.auto-7 {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid.auto-8, .grid.auto-9 {
    grid-template-columns: repeat(6, 1fr);
  }
}
@media (min-width: 1200px) {
  .grid.auto-5 {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid.auto-6 {
    grid-template-columns: repeat(6, 1fr);
  }
  .grid.auto-7 {
    grid-template-columns: repeat(7, 1fr);
  }
  .grid.auto-8 {
    grid-template-columns: repeat(8, 1fr);
  }
  .grid.auto-9 {
    grid-template-columns: repeat(9, 1fr);
  }
  .grid.auto-10 {
    grid-template-columns: repeat(10, 1fr);
  }
}

@media (max-width: 599px) {
  .grid[columns="1"] {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid[columns="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid[columns="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid[columns="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid[columns="5"] {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid[columns="6"] {
    grid-template-columns: repeat(6, 1fr);
  }
  .grid[columns="7"] {
    grid-template-columns: repeat(7, 1fr);
  }
  .grid[columns="8"] {
    grid-template-columns: repeat(8, 1fr);
  }
  .grid[columns="9"] {
    grid-template-columns: repeat(9, 1fr);
  }
  .grid[columns="10"] {
    grid-template-columns: repeat(10, 1fr);
  }
}
@media (min-width: 600px) and (max-width: 900px) {
  .grid[columns-s="1"] {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid[columns-s="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid[columns-s="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid[columns-s="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid[columns-s="5"] {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid[columns-s="6"] {
    grid-template-columns: repeat(6, 1fr);
  }
  .grid[columns-s="7"] {
    grid-template-columns: repeat(7, 1fr);
  }
  .grid[columns-s="8"] {
    grid-template-columns: repeat(8, 1fr);
  }
  .grid[columns-s="9"] {
    grid-template-columns: repeat(9, 1fr);
  }
  .grid[columns-s="10"] {
    grid-template-columns: repeat(10, 1fr);
  }
}
@media (min-width: 900px) and (max-width: 1200px) {
  .grid[columns-m="1"] {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid[columns-m="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid[columns-m="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid[columns-m="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid[columns-m="5"] {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid[columns-m="6"] {
    grid-template-columns: repeat(6, 1fr);
  }
  .grid[columns-m="7"] {
    grid-template-columns: repeat(7, 1fr);
  }
  .grid[columns-m="8"] {
    grid-template-columns: repeat(8, 1fr);
  }
  .grid[columns-m="9"] {
    grid-template-columns: repeat(9, 1fr);
  }
  .grid[columns-m="10"] {
    grid-template-columns: repeat(10, 1fr);
  }
}
@media (min-width: 1200px) {
  .grid[columns-l="1"] {
    grid-template-columns: repeat(1, 1fr);
  }
  .grid[columns-l="2"] {
    grid-template-columns: repeat(2, 1fr);
  }
  .grid[columns-l="3"] {
    grid-template-columns: repeat(3, 1fr);
  }
  .grid[columns-l="4"] {
    grid-template-columns: repeat(4, 1fr);
  }
  .grid[columns-l="5"] {
    grid-template-columns: repeat(5, 1fr);
  }
  .grid[columns-l="6"] {
    grid-template-columns: repeat(6, 1fr);
  }
  .grid[columns-l="7"] {
    grid-template-columns: repeat(7, 1fr);
  }
  .grid[columns-l="8"] {
    grid-template-columns: repeat(8, 1fr);
  }
  .grid[columns-l="9"] {
    grid-template-columns: repeat(9, 1fr);
  }
  .grid[columns-l="10"] {
    grid-template-columns: repeat(10, 1fr);
  }
}
.minmax-10 {
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.minmax-12 {
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
}

.minmax-14 {
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
}

.minmax-16 {
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}

.minmax-18 {
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}

.minmax-20 {
  grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
}

.minmax-23 {
  grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr));
}

.minmax-26 {
  grid-template-columns: repeat(auto-fit, minmax(26rem, 1fr));
}

.minmax-30 {
  grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
}

.minmax-35 {
  grid-template-columns: repeat(auto-fit, minmax(35rem, 1fr));
}

.minmax-40 {
  grid-template-columns: repeat(auto-fit, minmax(40rem, 1fr));
}

.minmax-50 {
  grid-template-columns: repeat(auto-fit, minmax(50rem, 1fr));
}

@media (max-width: 352px) {
  .grid {
    grid-template-columns: 1fr;
  }
}
.span-x-all {
  grid-column: 1/-1;
}

.span-x-2 {
  grid-column: span 2;
}

.span-x-3 {
  grid-column: span 3;
}

.span-x-4 {
  grid-column: span 4;
}

.span-x-5 {
  grid-column: span 5;
}

.span-x-6 {
  grid-column: span 6;
}

.span-x-7 {
  grid-column: span 7;
}

.span-x-8 {
  grid-column: span 8;
}

.span-x-9 {
  grid-column: span 9;
}

.span-y-all {
  grid-row: 1/-1;
}

.span-y-2 {
  grid-row: span 2;
}

.span-y-3 {
  grid-row: span 3;
}

.span-y-4 {
  grid-row: span 4;
}

.span-y-5 {
  grid-row: span 5;
}

.span-y-6 {
  grid-row: span 6;
}

.span-y-7 {
  grid-row: span 7;
}

.span-y-8 {
  grid-row: span 8;
}

.span-y-9 {
  grid-row: span 9;
}

@media (min-width: 600px) {
  .span-x-all-s {
    grid-column: 1/-1;
  }
  .span-x-2-s {
    grid-column: span 2;
  }
  .span-x-3-s {
    grid-column: span 3;
  }
  .span-x-4-s {
    grid-column: span 4;
  }
  .span-x-5-s {
    grid-column: span 5;
  }
  .span-x-6-s {
    grid-column: span 6;
  }
  .span-x-7-s {
    grid-column: span 7;
  }
  .span-x-8-s {
    grid-column: span 8;
  }
  .span-x-9-s {
    grid-column: span 9;
  }
  .span-y-all-s {
    grid-row: 1/-1;
  }
  .span-y-2-s {
    grid-row: span 2;
  }
  .span-y-3-s {
    grid-row: span 3;
  }
  .span-y-4-s {
    grid-row: span 4;
  }
  .span-y-5-s {
    grid-row: span 5;
  }
  .span-y-6-s {
    grid-row: span 6;
  }
  .span-y-7-s {
    grid-row: span 7;
  }
  .span-y-8-s {
    grid-row: span 8;
  }
  .span-y-9-s {
    grid-row: span 9;
  }
}
@media (min-width: 900px) {
  .span-x-all-m {
    grid-column: 1/-1;
  }
  .span-x-2-m {
    grid-column: span 2;
  }
  .span-x-3-m {
    grid-column: span 3;
  }
  .span-x-4-m {
    grid-column: span 4;
  }
  .span-x-5-m {
    grid-column: span 5;
  }
  .span-x-6-m {
    grid-column: span 6;
  }
  .span-x-7-m {
    grid-column: span 7;
  }
  .span-x-8-m {
    grid-column: span 8;
  }
  .span-x-9-m {
    grid-column: span 9;
  }
  .span-y-all-m {
    grid-row: 1/-1;
  }
  .span-y-2-m {
    grid-row: span 2;
  }
  .span-y-3-m {
    grid-row: span 3;
  }
  .span-y-4-m {
    grid-row: span 4;
  }
  .span-y-5-m {
    grid-row: span 5;
  }
  .span-y-6-m {
    grid-row: span 6;
  }
  .span-y-7-m {
    grid-row: span 7;
  }
  .span-y-8-m {
    grid-row: span 8;
  }
  .span-y-9-m {
    grid-row: span 9;
  }
}
@media (min-width: 1200px) {
  .span-x-all-l {
    grid-column: 1/-1;
  }
  .span-x-2-l {
    grid-column: span 2;
  }
  .span-x-3-l {
    grid-column: span 3;
  }
  .span-x-4-l {
    grid-column: span 4;
  }
  .span-x-5-l {
    grid-column: span 5;
  }
  .span-x-6-l {
    grid-column: span 6;
  }
  .span-x-7-l {
    grid-column: span 7;
  }
  .span-x-8-l {
    grid-column: span 8;
  }
  .span-x-9-l {
    grid-column: span 9;
  }
  .span-y-all-l {
    grid-row: 1/-1;
  }
  .span-y-2-l {
    grid-row: span 2;
  }
  .span-y-3-l {
    grid-row: span 3;
  }
  .span-y-4-l {
    grid-row: span 4;
  }
  .span-y-5-l {
    grid-row: span 5;
  }
  .span-y-6-l {
    grid-row: span 6;
  }
  .span-y-7-l {
    grid-row: span 7;
  }
  .span-y-8-l {
    grid-row: span 8;
  }
  .span-y-9-l {
    grid-row: span 9;
  }
}
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement
 *	Stack
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
.stack {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}
.stack > .layer {
  grid-column: 1;
  grid-row: 1;
}
@media (min-width: 600px) {
  .stack > .layer-s {
    grid-column: 1;
    grid-row: 1;
  }
}
@media (min-width: 900px) {
  .stack > .layer-m {
    grid-column: 1;
    grid-row: 1;
  }
}
@media (min-width: 1200px) {
  .stack > .layer-l {
    grid-column: 1;
    grid-row: 1;
  }
}

.z-1 {
  z-index: -1;
}

.z0 {
  z-index: 0;
}

.z1 {
  z-index: 1;
}

.z2 {
  z-index: 2;
}

.z3 {
  z-index: 3;
}

.z4 {
  z-index: 4;
}

.z5 {
  z-index: 5;
}

.z6 {
  z-index: 6;
}

.z7 {
  z-index: 7;
}

.z8 {
  z-index: 8;
}

.z9 {
  z-index: 9;
}

.z10 {
  z-index: 10;
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement
 *	Alignments
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement - Alignment
 *	Positioning
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement - Alignment
 *	Order
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement - Alignment
 *	Flex extension
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
.align-childs-tl {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  justify-items: start;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  align-items: flex-start;
}

.align-childs-tc {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  justify-items: center;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  align-items: flex-start;
}

.align-childs-tr {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  justify-items: end;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: start;
  align-items: flex-start;
}

.align-childs-ml {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  justify-items: start;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.align-childs-mc {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  justify-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.align-childs-mr {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  justify-items: end;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.align-childs-bl {
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  justify-items: start;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  align-items: flex-end;
}

.align-childs-bc {
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  justify-items: center;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  align-items: flex-end;
}

.align-childs-br {
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  justify-items: end;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: end;
  align-items: flex-end;
}

.childs-around {
  -ms-flex-pack: distribute;
      justify-content: space-around;
}

.childs-between {
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

.childs-evenly {
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

@media (min-width: 600px) {
  .childs-around-s {
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  .childs-between-s {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .childs-evenly-s {
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
  }
}
@media (min-width: 900px) {
  .childs-around-m {
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  .childs-between-m {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .childs-evenly-m {
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
  }
}
@media (min-width: 1200px) {
  .childs-around-l {
    -ms-flex-pack: distribute;
        justify-content: space-around;
  }
  .childs-between-l {
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .childs-evenly-l {
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
  }
}
.align-self-tl {
  margin-right: auto;
  margin-left: initial;
  justify-self: start;
  -ms-flex-item-align: start;
      align-self: start;
  align-self: flex-start;
}

.align-self-tc {
  margin-left: auto;
  margin-right: auto;
  justify-self: center;
  -ms-flex-item-align: start;
      align-self: start;
  align-self: flex-start;
}

.align-self-tr {
  margin-left: auto;
  margin-right: initial;
  justify-self: end;
  -ms-flex-item-align: start;
      align-self: start;
  align-self: flex-start;
}

.align-self-ml {
  margin-right: auto;
  margin-left: initial;
  justify-self: start;
  -ms-flex-item-align: center;
      align-self: center;
}

.align-self-mc {
  margin-left: auto;
  margin-right: auto;
  justify-self: center;
  -ms-flex-item-align: center;
      align-self: center;
}

.align-self-mr {
  margin-left: auto;
  margin-right: initial;
  justify-self: end;
  -ms-flex-item-align: center;
      align-self: center;
}

.align-self-bl {
  margin-right: auto;
  margin-left: initial;
  justify-self: start;
  -ms-flex-item-align: end;
      align-self: end;
  align-self: flex-end;
}

.align-self-bc {
  margin-left: auto;
  margin-right: auto;
  justify-self: center;
  -ms-flex-item-align: end;
      align-self: end;
  align-self: flex-end;
}

.align-self-br {
  margin-left: auto;
  margin-right: initial;
  justify-self: end;
  -ms-flex-item-align: end;
      align-self: end;
  align-self: flex-end;
}

@media (min-width: 600px) {
  .align-self-tl-s {
    margin-right: auto;
    margin-left: initial;
    justify-self: start;
    -ms-flex-item-align: start;
        align-self: start;
    align-self: flex-start;
  }
  .align-self-tc-s {
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
    -ms-flex-item-align: start;
        align-self: start;
    align-self: flex-start;
  }
  .align-self-tr-s {
    margin-left: auto;
    margin-right: initial;
    justify-self: end;
    -ms-flex-item-align: start;
        align-self: start;
    align-self: flex-start;
  }
  .align-self-ml-s {
    margin-right: auto;
    margin-left: initial;
    justify-self: start;
    -ms-flex-item-align: center;
        align-self: center;
  }
  .align-self-mc-s {
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
    -ms-flex-item-align: center;
        align-self: center;
  }
  .align-self-mr-s {
    margin-left: auto;
    margin-right: initial;
    justify-self: end;
    -ms-flex-item-align: center;
        align-self: center;
  }
  .align-self-bl-s {
    margin-right: auto;
    margin-left: initial;
    justify-self: start;
    -ms-flex-item-align: end;
        align-self: end;
    align-self: flex-end;
  }
  .align-self-bc-s {
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
    -ms-flex-item-align: end;
        align-self: end;
    align-self: flex-end;
  }
  .align-self-br-s {
    margin-left: auto;
    margin-right: initial;
    justify-self: end;
    -ms-flex-item-align: end;
        align-self: end;
    align-self: flex-end;
  }
}
@media (min-width: 900px) {
  .align-self-tl-m {
    margin-right: auto;
    margin-left: initial;
    justify-self: start;
    -ms-flex-item-align: start;
        align-self: start;
    align-self: flex-start;
  }
  .align-self-tc-m {
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
    -ms-flex-item-align: start;
        align-self: start;
    align-self: flex-start;
  }
  .align-self-tr-m {
    margin-left: auto;
    margin-right: initial;
    justify-self: end;
    -ms-flex-item-align: start;
        align-self: start;
    align-self: flex-start;
  }
  .align-self-ml-m {
    margin-right: auto;
    margin-left: initial;
    justify-self: start;
    -ms-flex-item-align: center;
        align-self: center;
  }
  .align-self-mc-m {
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
    -ms-flex-item-align: center;
        align-self: center;
  }
  .align-self-mr-m {
    margin-left: auto;
    margin-right: initial;
    justify-self: end;
    -ms-flex-item-align: center;
        align-self: center;
  }
  .align-self-bl-m {
    margin-right: auto;
    margin-left: initial;
    justify-self: start;
    -ms-flex-item-align: end;
        align-self: end;
    align-self: flex-end;
  }
  .align-self-bc-m {
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
    -ms-flex-item-align: end;
        align-self: end;
    align-self: flex-end;
  }
  .align-self-br-m {
    margin-left: auto;
    margin-right: initial;
    justify-self: end;
    -ms-flex-item-align: end;
        align-self: end;
    align-self: flex-end;
  }
}
@media (min-width: 1200px) {
  .align-self-tl-l {
    margin-right: auto;
    margin-left: initial;
    justify-self: start;
    -ms-flex-item-align: start;
        align-self: start;
    align-self: flex-start;
  }
  .align-self-tc-l {
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
    -ms-flex-item-align: start;
        align-self: start;
    align-self: flex-start;
  }
  .align-self-tr-l {
    margin-left: auto;
    margin-right: initial;
    justify-self: end;
    -ms-flex-item-align: start;
        align-self: start;
    align-self: flex-start;
  }
  .align-self-ml-l {
    margin-right: auto;
    margin-left: initial;
    justify-self: start;
    -ms-flex-item-align: center;
        align-self: center;
  }
  .align-self-mc-l {
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
    -ms-flex-item-align: center;
        align-self: center;
  }
  .align-self-mr-l {
    margin-left: auto;
    margin-right: initial;
    justify-self: end;
    -ms-flex-item-align: center;
        align-self: center;
  }
  .align-self-bl-l {
    margin-right: auto;
    margin-left: initial;
    justify-self: start;
    -ms-flex-item-align: end;
        align-self: end;
    align-self: flex-end;
  }
  .align-self-bc-l {
    margin-left: auto;
    margin-right: auto;
    justify-self: center;
    -ms-flex-item-align: end;
        align-self: end;
    align-self: flex-end;
  }
  .align-self-br-l {
    margin-left: auto;
    margin-right: initial;
    justify-self: end;
    -ms-flex-item-align: end;
        align-self: end;
    align-self: flex-end;
  }
}
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-justify {
  text-align: justify;
}

@media (min-width: 600px) {
  .text-center-s {
    text-align: center;
  }
  .text-left-s {
    text-align: left;
  }
  .text-right-s {
    text-align: right;
  }
  .text-justify-s {
    text-align: justify;
  }
}
@media (min-width: 900px) {
  .text-center-m {
    text-align: center;
  }
  .text-left-m {
    text-align: left;
  }
  .text-right-m {
    text-align: right;
  }
  .text-justify-m {
    text-align: justify;
  }
}
@media (min-width: 1200px) {
  .text-center-l {
    text-align: center;
  }
  .text-left-l {
    text-align: left;
  }
  .text-right-l {
    text-align: right;
  }
  .text-justify-l {
    text-align: justify;
  }
}
.pos-fixed {
  position: fixed;
}

.pos-absolute {
  position: absolute;
}

.pos-relative {
  position: relative;
}

.pos-sticky {
  position: sticky;
}

@media (min-width: 600px) {
  .pos-fixed-s {
    position: fixed;
  }
  .pos-absolute-s {
    position: absolute;
  }
  .pos-relative-s {
    position: relative;
  }
  .pos-sticky-s {
    position: sticky;
  }
}
@media (min-width: 900px) {
  .pos-fixed-m {
    position: fixed;
  }
  .pos-absolute-m {
    position: absolute;
  }
  .pos-relative-m {
    position: relative;
  }
  .pos-sticky-m {
    position: sticky;
  }
}
@media (min-width: 1200px) {
  .pos-fixed-l {
    position: fixed;
  }
  .pos-absolute-l {
    position: absolute;
  }
  .pos-relative-l {
    position: relative;
  }
  .pos-sticky-l {
    position: sticky;
  }
}
.pos-tl {
  top: 0;
  left: 0;
}
.pos-tc {
  top: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.pos-tr {
  top: 0;
  right: 0;
}
.pos-ml {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: 0;
}
.pos-mc {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.pos-mr {
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: 0;
}
.pos-bl {
  bottom: 0;
  left: 0;
}
.pos-bc {
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}
.pos-br {
  bottom: 0;
  right: 0;
}

.order-1 {
  -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
          order: 1;
}

.order-2 {
  -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
          order: 2;
}

.order-3 {
  -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
          order: 3;
}

.order-4 {
  -webkit-box-ordinal-group: 5;
      -ms-flex-order: 4;
          order: 4;
}

.order-5 {
  -webkit-box-ordinal-group: 6;
      -ms-flex-order: 5;
          order: 5;
}

.order-6 {
  -webkit-box-ordinal-group: 7;
      -ms-flex-order: 6;
          order: 6;
}

.order-7 {
  -webkit-box-ordinal-group: 8;
      -ms-flex-order: 7;
          order: 7;
}

.order-8 {
  -webkit-box-ordinal-group: 9;
      -ms-flex-order: 8;
          order: 8;
}

.order-9 {
  -webkit-box-ordinal-group: 10;
      -ms-flex-order: 9;
          order: 9;
}

.order-10 {
  -webkit-box-ordinal-group: 11;
      -ms-flex-order: 10;
          order: 10;
}

@media (min-width: 600px) {
  .order-1-s {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .order-2-s {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .order-3-s {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  .order-4-s {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
  }
  .order-5-s {
    -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
            order: 5;
  }
  .order-6-s {
    -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
            order: 6;
  }
  .order-7-s {
    -webkit-box-ordinal-group: 8;
        -ms-flex-order: 7;
            order: 7;
  }
  .order-8-s {
    -webkit-box-ordinal-group: 9;
        -ms-flex-order: 8;
            order: 8;
  }
  .order-9-s {
    -webkit-box-ordinal-group: 10;
        -ms-flex-order: 9;
            order: 9;
  }
  .order-10-s {
    -webkit-box-ordinal-group: 11;
        -ms-flex-order: 10;
            order: 10;
  }
}
@media (min-width: 900px) {
  .order-1-m {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .order-2-m {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .order-3-m {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  .order-4-m {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
  }
  .order-5-m {
    -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
            order: 5;
  }
  .order-6-m {
    -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
            order: 6;
  }
  .order-7-m {
    -webkit-box-ordinal-group: 8;
        -ms-flex-order: 7;
            order: 7;
  }
  .order-8-m {
    -webkit-box-ordinal-group: 9;
        -ms-flex-order: 8;
            order: 8;
  }
  .order-9-m {
    -webkit-box-ordinal-group: 10;
        -ms-flex-order: 9;
            order: 9;
  }
  .order-10-m {
    -webkit-box-ordinal-group: 11;
        -ms-flex-order: 10;
            order: 10;
  }
}
@media (min-width: 1200px) {
  .order-1-l {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }
  .order-2-l {
    -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
            order: 2;
  }
  .order-3-l {
    -webkit-box-ordinal-group: 4;
        -ms-flex-order: 3;
            order: 3;
  }
  .order-4-l {
    -webkit-box-ordinal-group: 5;
        -ms-flex-order: 4;
            order: 4;
  }
  .order-5-l {
    -webkit-box-ordinal-group: 6;
        -ms-flex-order: 5;
            order: 5;
  }
  .order-6-l {
    -webkit-box-ordinal-group: 7;
        -ms-flex-order: 6;
            order: 6;
  }
  .order-7-l {
    -webkit-box-ordinal-group: 8;
        -ms-flex-order: 7;
            order: 7;
  }
  .order-8-l {
    -webkit-box-ordinal-group: 9;
        -ms-flex-order: 8;
            order: 8;
  }
  .order-9-l {
    -webkit-box-ordinal-group: 10;
        -ms-flex-order: 9;
            order: 9;
  }
  .order-10-l {
    -webkit-box-ordinal-group: 11;
        -ms-flex-order: 10;
            order: 10;
  }
}
.flex-grow-1 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.flex-shrink-1 {
  -ms-flex-negative: 1;
      flex-shrink: 1;
}

.flex-grow-0 {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}

.flex-shrink-0 {
  -ms-flex-negative: 0;
      flex-shrink: 0;
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Basement
 *	Icons (css styled)
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
.icon-holder {
  width: var(--icon-width);
  height: var(--icon-height);
  display: block;
  position: relative;
}

.icon-holder:hover {
  cursor: pointer;
}

span.icon {
  background-color: var(--color-icon);
  display: block;
  z-index: 2;
}
span.icon:before, span.icon:after {
  background-color: var(--color-icon);
  display: block;
  z-index: 2;
  content: "";
}

span.bars {
  width: var(--icon-width);
  height: var(--icon-strength);
  border-radius: 0.1rem;
}
span.bars:before {
  width: var(--icon-width);
  height: var(--icon-strength);
  border-radius: 0.1rem;
  -webkit-transform: translateY(0.525rem);
          transform: translateY(0.525rem);
}
span.bars:after {
  width: var(--icon-width);
  height: var(--icon-strength);
  border-radius: 0.1rem;
  -webkit-transform: translateY(0.85rem);
          transform: translateY(0.85rem);
}

span.close {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
span.close:before, span.close:after {
  width: 1.3125rem;
  height: var(--icon-strength);
  border-radius: 0.1rem;
  position: absolute;
  top: 0.425rem;
}

span.close:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}

span.close:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

span.minus {
  width: 0;
}
span.minus:before {
  width: 0.9375rem;
  height: var(--icon-strength);
  border-radius: 0.1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
span.plus {
  width: 0;
}
span.plus:after {
  width: var(--icon-strength);
  height: 0.9375rem;
  border-radius: 0.1rem;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

span.search {
  background-color: transparent;
  width: var(--icon-height);
  height: var(--icon-height);
  border-radius: 50%;
  border: var(--icon-strength) solid var(--color-icon);
}
span.search:after {
  width: 0.625rem;
  height: var(--icon-strength);
  border-radius: 0.1rem;
  -webkit-transform: rotate(40deg);
          transform: rotate(40deg);
  position: absolute;
  right: 0;
  bottom: 0;
}

span.angle-up:before, span.angle-up:after, span.angle-down:before, span.angle-down:after {
  width: var(--icon-strength);
  height: 0.875rem;
  border-radius: 0.1rem;
  position: absolute;
}
span.angle-left:before, span.angle-left:after, span.angle-right:before, span.angle-right:after {
  width: 0.875rem;
  height: var(--icon-strength);
  border-radius: 0.1rem;
  position: absolute;
  top: 0.425rem;
}
span.angle-up:before, span.angle-up:after {
  -webkit-transform-origin: top;
          transform-origin: top;
  left: 50%;
}
span.angle-down:before, span.angle-down:after {
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  left: 50%;
}
span.angle-left:before, span.angle-left:after {
  -webkit-transform-origin: left;
          transform-origin: left;
  right: 20%;
}
span.angle-right:before, span.angle-right:after {
  -webkit-transform-origin: right;
          transform-origin: right;
  left: 20%;
}
span.angle-up:before, span.angle-down:after, span.angle-left:before, span.angle-right:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
span.angle-up:after, span.angle-down:before, span.angle-left:after, span.angle-right:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

span.arrow {
  border-radius: 0.1rem;
  position: absolute;
}
span.arrow-up, span.arrow-down {
  width: var(--icon-strength);
  height: var(--icon-height);
  border-radius: 0.1rem;
  position: absolute;
  left: calc(50% - 0.2rem * 0.5);
}
span.arrow-left, span.arrow-right {
  width: var(--icon-width);
  height: var(--icon-strength);
  border-radius: 0.1rem;
  position: absolute;
  top: calc(50% - 0.2rem * 0.5);
}
span.arrow-up:before, span.arrow-up:after, span.arrow-down:before, span.arrow-down:after {
  width: var(--icon-strength);
  height: 0.875rem;
  border-radius: 0.1rem;
  position: absolute;
}
span.arrow-left:before, span.arrow-left:after, span.arrow-right:before, span.arrow-right:after {
  width: 0.875rem;
  height: var(--icon-strength);
  border-radius: 0.1rem;
  position: absolute;
}
span.arrow-up:before, span.arrow-up:after {
  -webkit-transform-origin: top;
          transform-origin: top;
  left: calc(50% - 0.2rem * 0.5);
}
span.arrow-down:before, span.arrow-down:after {
  -webkit-transform-origin: bottom;
          transform-origin: bottom;
  left: calc(50% - 0.2rem * 0.5);
  bottom: 0;
}
span.arrow-left:before, span.arrow-left:after {
  -webkit-transform-origin: left;
          transform-origin: left;
}
span.arrow-right:before, span.arrow-right:after {
  -webkit-transform-origin: right;
          transform-origin: right;
  right: 0;
}
span.arrow-up:before, span.arrow-down:after, span.arrow-left:before, span.arrow-right:before {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
span.arrow-up:after, span.arrow-down:before, span.arrow-left:after, span.arrow-right:after {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}

[class*=triangle] {
  width: 0;
  height: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

span.triangle-up {
  border-left: 0.3125rem solid transparent;
  border-right: 0.3125rem solid transparent;
  border-bottom: 0.3125rem solid var(--color-icon);
}
span.triangle-down {
  border-left: 0.3125rem solid transparent;
  border-right: 0.3125rem solid transparent;
  border-top: 0.3125rem solid var(--color-icon);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Atoms
 *	Headlines
 *
 *  ======================================================================================================================= */
h1, h2, h3, h4, h5 {
  color: var(--headline-color);
  margin-top: 0;
  margin-bottom: var(--headline-margin-bottom);
  font-family: var(--headline-font);
  line-height: var(--headline-line-height);
  text-transform: var(--headline-text-transform);
  -webkit-transition: var(--headline-transition);
  transition: var(--headline-transition);
}

h1, .h1 {
  font-size: var(--h1-mobile-size);
  font-weight: var(--h1-weight);
}

h2, .h2 {
  font-size: var(--h2-mobile-size);
  font-weight: var(--h2-weight);
}

h3, .h3 {
  font-size: var(--h3-mobile-size);
  font-weight: var(--h3-weight);
}

h4, .h4 {
  font-size: var(--h4-mobile-size);
  font-weight: var(--h4-weight);
}

h5, .h5 {
  font-size: var(--h5-mobile-size);
  font-weight: var(--h5-weight);
}

@media (min-width: 900px) {
  h1, .h1 {
    font-size: var(--h1-desktop-size);
  }
  h2, .h2 {
    font-size: var(--h2-desktop-size);
  }
  h3, .h3 {
    font-size: var(--h3-desktop-size);
  }
  h4, .h4 {
    font-size: var(--h4-desktop-size);
  }
  h5, .h5 {
    font-size: var(--h5-desktop-size);
  }
}
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Atoms
 *	Text
 *
 *  ======================================================================================================================= */
p:first-child {
  margin-top: 0;
}

p:last-child {
  margin-bottom: 0;
}

.text-column-width-10 {
  -webkit-column-width: 10rem;
     -moz-column-width: 10rem;
          column-width: 10rem;
}

.text-column-width-12 {
  -webkit-column-width: 12rem;
     -moz-column-width: 12rem;
          column-width: 12rem;
}

.text-column-width-14 {
  -webkit-column-width: 14rem;
     -moz-column-width: 14rem;
          column-width: 14rem;
}

.text-column-width-16 {
  -webkit-column-width: 16rem;
     -moz-column-width: 16rem;
          column-width: 16rem;
}

.text-column-width-18 {
  -webkit-column-width: 18rem;
     -moz-column-width: 18rem;
          column-width: 18rem;
}

.text-column-width-20 {
  -webkit-column-width: 20rem;
     -moz-column-width: 20rem;
          column-width: 20rem;
}

.text-column-width-23 {
  -webkit-column-width: 23rem;
     -moz-column-width: 23rem;
          column-width: 23rem;
}

.text-column-width-26 {
  -webkit-column-width: 26rem;
     -moz-column-width: 26rem;
          column-width: 26rem;
}

.text-column-width-30 {
  -webkit-column-width: 30rem;
     -moz-column-width: 30rem;
          column-width: 30rem;
}

.text-column-width-35 {
  -webkit-column-width: 35rem;
     -moz-column-width: 35rem;
          column-width: 35rem;
}

.text-column-width-40 {
  -webkit-column-width: 40rem;
     -moz-column-width: 40rem;
          column-width: 40rem;
}

.text-column-width-50 {
  -webkit-column-width: 50rem;
     -moz-column-width: 50rem;
          column-width: 50rem;
}

.text-gap-0 {
  -webkit-column-gap: 0;
     -moz-column-gap: 0;
          column-gap: 0;
}

.text-gap-0_25 {
  -webkit-column-gap: 0.25em;
     -moz-column-gap: 0.25em;
          column-gap: 0.25em;
}

.text-gap-0_5 {
  -webkit-column-gap: 0.5em;
     -moz-column-gap: 0.5em;
          column-gap: 0.5em;
}

.text-gap-0_75 {
  -webkit-column-gap: 0.75em;
     -moz-column-gap: 0.75em;
          column-gap: 0.75em;
}

.text-gap-1 {
  -webkit-column-gap: 1em;
     -moz-column-gap: 1em;
          column-gap: 1em;
}

.text-gap-1_5 {
  -webkit-column-gap: 1.5em;
     -moz-column-gap: 1.5em;
          column-gap: 1.5em;
}

.text-gap-2 {
  -webkit-column-gap: 2em;
     -moz-column-gap: 2em;
          column-gap: 2em;
}

.text-gap-2_5 {
  -webkit-column-gap: 2.5em;
     -moz-column-gap: 2.5em;
          column-gap: 2.5em;
}

.text-gap-3 {
  -webkit-column-gap: 3em;
     -moz-column-gap: 3em;
          column-gap: 3em;
}

.text-gap-3_5 {
  -webkit-column-gap: 3.5em;
     -moz-column-gap: 3.5em;
          column-gap: 3.5em;
}

.text-gap-4 {
  -webkit-column-gap: 4em;
     -moz-column-gap: 4em;
          column-gap: 4em;
}

.text-gap-5 {
  -webkit-column-gap: 5em;
     -moz-column-gap: 5em;
          column-gap: 5em;
}

.text-span-all {
  -webkit-column-span: all;
     -moz-column-span: all;
          column-span: all;
}

.text-column-divider {
  -webkit-column-rule: var(--text-divider-width) var(--text-divider-style) var(--text-divider-color);
     -moz-column-rule: var(--text-divider-width) var(--text-divider-style) var(--text-divider-color);
          column-rule: var(--text-divider-width) var(--text-divider-style) var(--text-divider-color);
}

.text-meta {
  color: var(--text-color);
  font-size: var(--text-font-size);
}

::-moz-selection {
  background: var(--text-selection-bg);
  color: var(--text-selection-color);
}

::-moz-selection, ::selection {
  background: var(--text-selection-bg);
  color: var(--text-selection-color);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Atoms
 *	Quotations
 *
 *  ======================================================================================================================= */
blockquote .quotation {
  color: var(--quotation-color);
  font-size: var(--quotation-font-size);
  font-weight: var(--quotation-font-weight);
  font-style: var(--quotation-font-style);
}
blockquote .quotation:before {
  content: "„";
  margin-right: var(--quotation-mark-spacing);
}
blockquote .quotation:after {
  content: "”";
  margin-left: var(--quotation-mark-spacing);
}
blockquote .quotation:before, blockquote .quotation:after {
  font-size: var(--quotation-mark-font-size);
  font-weight: var(--quotation-mark-font-weight);
  font-style: var(--quotation-mark-font-style);
  line-height: 1;
  display: inline-block;
  height: 1em;
}
blockquote .quotation-meta {
  color: var(--quotation-meta-color);
  font-size: var(--quotation-meta-font-size);
  font-weight: var(--quotation-meta-font-weight);
  font-style: var(--quotation-meta-font-style);
}
blockquote .quotation-meta:before {
  content: var(--quotation-meta-before);
  margin-right: var(--quotation-meta-before-spacing);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Atoms
 *	Lists
 *
 *  ======================================================================================================================= */
[class^=list-] li {
  text-indent: var(--list-bullet-gap);
}

.list-bullet {
  list-style: disc;
}

.list-circle {
  list-style: circle;
}

.list-square {
  list-style: square;
}

.list-decimal {
  list-style: decimal;
}

.list-dual-decimal {
  list-style: decimal-leading-zero;
}

.list-lower-alpha {
  list-style: lower-alpha;
}

.list-lower-roman {
  list-style: lower-roman;
}

.list-upper-alpha {
  list-style: upper-alpha;
}

.list-upper-roman {
  list-style: upper-roman;
}

.list-plain, .list-dividing, .list-striped {
  padding-left: initial;
  list-style: none;
}
.list-plain li, .list-dividing li, .list-striped li {
  padding: var(--list-dividing-spacing);
}
.list-plain li:first-child, .list-dividing li:first-child, .list-striped li:first-child {
  padding-top: 0;
}
.list-plain li:last-child, .list-dividing li:last-child, .list-striped li:last-child {
  padding-bottom: 0;
}

.list-dividing li:not(:last-child) {
  border-bottom: var(--list-divider);
}

.list-striped li:nth-child(even) {
  background-color: var(--list-striped-bg);
}

.list-description {
  margin: 0;
}
.list-description dt {
  font-size: var(--list-dl-titel-fontsize);
  font-weight: var(--list-dl-titel-fontweight);
}
.list-description dd {
  margin-left: var(--list-dl-indentation);
}
.list-description dd:not(:last-child) {
  margin-bottom: var(--list-dl-spacing);
}

dl.list-pricing {
  margin: 0;
}
dl.list-pricing div {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
dl.list-pricing div:not(:last-child) {
  margin-bottom: var(--list-pricing-spacing);
}
dl.list-pricing dt, dl.list-pricing dd {
  font-size: var(--list-pricing-fontsize);
}
dl.list-pricing dt {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
dl.list-pricing dt:after {
  content: "";
  display: inline;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin: var(--list-pricing-dots-spacing);
  border-bottom: var(--list-pricing-dots);
}
dl.list-pricing dd {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  margin-left: 0;
  font-weight: var(--list-price-fontweight);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Atoms
 *	Buttons
 *
 *  version - Standard
 *
 *  ======================================================================================================================= */
button,
[role=button],
[type=reset],
[type=submit] {
  padding: var(--button-y-padding) var(--button-x-padding);
  display: inline-block;
  font-family: var(--button-font);
  font-size: var(--button-font-size);
  font-weight: var(--button-font-weight);
  line-height: var(--button-line-height);
  letter-spacing: var(--button-letter-spacing);
  text-transform: var(--button-transform);
  -webkit-text-decoration: var(--button-text-deco);
          text-decoration: var(--button-text-deco);
  border: none;
  border-radius: var(--button-border-radius);
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-transition: var(--button-transition);
  transition: var(--button-transition);
  background-color: var(--button-bg);
  color: var(--button-text-color);
}
button:hover, button:focus, button:active,
[role=button]:hover,
[role=button]:focus,
[role=button]:active,
[type=reset]:hover,
[type=reset]:focus,
[type=reset]:active,
[type=submit]:hover,
[type=submit]:focus,
[type=submit]:active {
  background-color: var(--button-hover-bg);
  color: var(--button-text-color);
  -webkit-text-decoration: var(--button-text-deco);
          text-decoration: var(--button-text-deco);
  cursor: pointer;
}
button.dark,
[role=button].dark,
[type=reset].dark,
[type=submit].dark {
  background-color: var(--color-dark);
  color: var(--color-light-font);
}
button.dark:hover, button.dark:focus, button.dark:active,
[role=button].dark:hover,
[role=button].dark:focus,
[role=button].dark:active,
[type=reset].dark:hover,
[type=reset].dark:focus,
[type=reset].dark:active,
[type=submit].dark:hover,
[type=submit].dark:focus,
[type=submit].dark:active {
  background-color: var(--color-soft-dark);
  color: var(--color-light-font);
}
button.light,
[role=button].light,
[type=reset].light,
[type=submit].light {
  background-color: var(--color-light);
  color: var(--color-dark-font);
}
button.light:hover, button.light:focus, button.light:active,
[role=button].light:hover,
[role=button].light:focus,
[role=button].light:active,
[type=reset].light:hover,
[type=reset].light:focus,
[type=reset].light:active,
[type=submit].light:hover,
[type=submit].light:focus,
[type=submit].light:active {
  background-color: var(--color-soft-light);
  color: var(--color-dark-font);
}
button.primary,
[role=button].primary,
[type=reset].primary,
[type=submit].primary {
  background-color: var(--color-primary);
  color: var(--color-light-font);
}
button.primary:hover, button.primary:focus, button.primary:active,
[role=button].primary:hover,
[role=button].primary:focus,
[role=button].primary:active,
[type=reset].primary:hover,
[type=reset].primary:focus,
[type=reset].primary:active,
[type=submit].primary:hover,
[type=submit].primary:focus,
[type=submit].primary:active {
  background-color: var(--color-light-primary);
  color: var(--color-light-font);
}
button.secondary,
[role=button].secondary,
[type=reset].secondary,
[type=submit].secondary {
  background-color: var(--color-secondary);
  color: var(--color-light-font);
}
button.secondary:hover, button.secondary:focus, button.secondary:active,
[role=button].secondary:hover,
[role=button].secondary:focus,
[role=button].secondary:active,
[type=reset].secondary:hover,
[type=reset].secondary:focus,
[type=reset].secondary:active,
[type=submit].secondary:hover,
[type=submit].secondary:focus,
[type=submit].secondary:active {
  background-color: var(--color-light-secondary);
  color: var(--color-light-font);
}
button.success,
[role=button].success,
[type=reset].success,
[type=submit].success {
  background-color: var(--color-success);
  color: var(--color-light-font);
}
button.success:hover, button.success:focus, button.success:active,
[role=button].success:hover,
[role=button].success:focus,
[role=button].success:active,
[type=reset].success:hover,
[type=reset].success:focus,
[type=reset].success:active,
[type=submit].success:hover,
[type=submit].success:focus,
[type=submit].success:active {
  background-color: var(--color-light-success);
  color: var(--color-dark-font);
}
button.warning,
[role=button].warning,
[type=reset].warning,
[type=submit].warning {
  background-color: var(--color-warning);
  color: var(--color-light-font);
}
button.warning:hover, button.warning:focus, button.warning:active,
[role=button].warning:hover,
[role=button].warning:focus,
[role=button].warning:active,
[type=reset].warning:hover,
[type=reset].warning:focus,
[type=reset].warning:active,
[type=submit].warning:hover,
[type=submit].warning:focus,
[type=submit].warning:active {
  background-color: var(--color-light-warning);
  color: var(--color-dark-font);
}
button.danger,
[role=button].danger,
[type=reset].danger,
[type=submit].danger {
  background-color: var(--color-danger);
  color: var(--color-light-font);
}
button.danger:hover, button.danger:focus, button.danger:active,
[role=button].danger:hover,
[role=button].danger:focus,
[role=button].danger:active,
[type=reset].danger:hover,
[type=reset].danger:focus,
[type=reset].danger:active,
[type=submit].danger:hover,
[type=submit].danger:focus,
[type=submit].danger:active {
  background-color: var(--color-light-danger);
  color: var(--color-dark-font);
}
button.info,
[role=button].info,
[type=reset].info,
[type=submit].info {
  background-color: var(--color-info);
  color: var(--color-light-font);
}
button.info:hover, button.info:focus, button.info:active,
[role=button].info:hover,
[role=button].info:focus,
[role=button].info:active,
[type=reset].info:hover,
[type=reset].info:focus,
[type=reset].info:active,
[type=submit].info:hover,
[type=submit].info:focus,
[type=submit].info:active {
  background-color: var(--color-light-info);
  color: var(--color-dark-font);
}
button.outline,
[role=button].outline,
[type=reset].outline,
[type=submit].outline {
  background-color: transparent;
  color: var(--color-dark-font);
  border: var(--button-outline-border) solid var(--button-text-color);
  padding: calc(var(--button-y-padding) - var(--button-outline-border)) calc(var(--button-x-padding) - var(--button-outline-border));
}
button.outline:hover, button.outline:focus, button.outline:active,
[role=button].outline:hover,
[role=button].outline:focus,
[role=button].outline:active,
[type=reset].outline:hover,
[type=reset].outline:focus,
[type=reset].outline:active,
[type=submit].outline:hover,
[type=submit].outline:focus,
[type=submit].outline:active {
  background-color: var(--button-color);
  color: var(--button-text-color);
}
button.outline.light,
[role=button].outline.light,
[type=reset].outline.light,
[type=submit].outline.light {
  color: var(--color-light);
  border: var(--border-width) solid var(--color-light);
}
button.outline.light:hover, button.outline.light:focus, button.outline.light:active,
[role=button].outline.light:hover,
[role=button].outline.light:focus,
[role=button].outline.light:active,
[type=reset].outline.light:hover,
[type=reset].outline.light:focus,
[type=reset].outline.light:active,
[type=submit].outline.light:hover,
[type=submit].outline.light:focus,
[type=submit].outline.light:active {
  background-color: var(--color-light);
  color: var(--color-dark-font);
}
button.outline.dark,
[role=button].outline.dark,
[type=reset].outline.dark,
[type=submit].outline.dark {
  color: var(--color-dark);
  border: var(--border-width) solid var(--color-dark);
}
button.outline.dark:hover, button.outline.dark:focus, button.outline.dark:active,
[role=button].outline.dark:hover,
[role=button].outline.dark:focus,
[role=button].outline.dark:active,
[type=reset].outline.dark:hover,
[type=reset].outline.dark:focus,
[type=reset].outline.dark:active,
[type=submit].outline.dark:hover,
[type=submit].outline.dark:focus,
[type=submit].outline.dark:active {
  background-color: var(--color-dark);
  color: var(--color-light-font);
}
button.outline.primary,
[role=button].outline.primary,
[type=reset].outline.primary,
[type=submit].outline.primary {
  color: var(--color-primary);
  border: var(--border-width) solid var(--color-primary);
}
button.outline.primary:hover, button.outline.primary:focus, button.outline.primary:active,
[role=button].outline.primary:hover,
[role=button].outline.primary:focus,
[role=button].outline.primary:active,
[type=reset].outline.primary:hover,
[type=reset].outline.primary:focus,
[type=reset].outline.primary:active,
[type=submit].outline.primary:hover,
[type=submit].outline.primary:focus,
[type=submit].outline.primary:active {
  background-color: var(--color-primary);
  color: var(--color-light-font);
}
button.outline.secondary,
[role=button].outline.secondary,
[type=reset].outline.secondary,
[type=submit].outline.secondary {
  color: var(--color-secondary);
  border: var(--border-width) solid var(--color-secondary);
}
button.outline.secondary:hover, button.outline.secondary:focus, button.outline.secondary:active,
[role=button].outline.secondary:hover,
[role=button].outline.secondary:focus,
[role=button].outline.secondary:active,
[type=reset].outline.secondary:hover,
[type=reset].outline.secondary:focus,
[type=reset].outline.secondary:active,
[type=submit].outline.secondary:hover,
[type=submit].outline.secondary:focus,
[type=submit].outline.secondary:active {
  background-color: var(--color-secondary);
  color: var(--color-light-font);
}
button.outline.success,
[role=button].outline.success,
[type=reset].outline.success,
[type=submit].outline.success {
  color: var(--color-success);
  border: var(--border-width) solid var(--color-success);
}
button.outline.success:hover, button.outline.success:focus, button.outline.success:active,
[role=button].outline.success:hover,
[role=button].outline.success:focus,
[role=button].outline.success:active,
[type=reset].outline.success:hover,
[type=reset].outline.success:focus,
[type=reset].outline.success:active,
[type=submit].outline.success:hover,
[type=submit].outline.success:focus,
[type=submit].outline.success:active {
  background-color: var(--color-success);
  color: var(--color-light-font);
}
button.outline.warning,
[role=button].outline.warning,
[type=reset].outline.warning,
[type=submit].outline.warning {
  color: var(--color-warning);
  border: var(--border-width) solid var(--color-warning);
}
button.outline.warning:hover, button.outline.warning:focus, button.outline.warning:active,
[role=button].outline.warning:hover,
[role=button].outline.warning:focus,
[role=button].outline.warning:active,
[type=reset].outline.warning:hover,
[type=reset].outline.warning:focus,
[type=reset].outline.warning:active,
[type=submit].outline.warning:hover,
[type=submit].outline.warning:focus,
[type=submit].outline.warning:active {
  background-color: var(--color-warning);
  color: var(--color-light-font);
}
button.outline.danger,
[role=button].outline.danger,
[type=reset].outline.danger,
[type=submit].outline.danger {
  color: var(--color-danger);
  border: var(--border-width) solid var(--color-danger);
}
button.outline.danger:hover, button.outline.danger:focus, button.outline.danger:active,
[role=button].outline.danger:hover,
[role=button].outline.danger:focus,
[role=button].outline.danger:active,
[type=reset].outline.danger:hover,
[type=reset].outline.danger:focus,
[type=reset].outline.danger:active,
[type=submit].outline.danger:hover,
[type=submit].outline.danger:focus,
[type=submit].outline.danger:active {
  background-color: var(--color-danger);
  color: var(--color-light-font);
}
button.outline.info,
[role=button].outline.info,
[type=reset].outline.info,
[type=submit].outline.info {
  color: var(--color-info);
  border: var(--border-width) solid var(--color-info);
}
button.outline.info:hover, button.outline.info:focus, button.outline.info:active,
[role=button].outline.info:hover,
[role=button].outline.info:focus,
[role=button].outline.info:active,
[type=reset].outline.info:hover,
[type=reset].outline.info:focus,
[type=reset].outline.info:active,
[type=submit].outline.info:hover,
[type=submit].outline.info:focus,
[type=submit].outline.info:active {
  background-color: var(--color-info);
  color: var(--color-light-font);
}
button.round,
[role=button].round,
[type=reset].round,
[type=submit].round {
  border-radius: var(--button-round-border-radius);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Atoms
 *	Label
 *
 *  ======================================================================================================================= */
.label {
  background-color: var(--label-bg);
  color: var(--label-text-color);
  padding: var(--label-y-padding) var(--label-x-padding);
  border-radius: var(--label-border-radius);
  display: inline-block;
  font-size: var(--label-font-size);
  font-weight: var(--label-font-weight);
  text-transform: var(--label-letter-case);
  letter-spacing: var(--label-letter-spacing);
  line-height: var(--label-line-height);
  vertical-align: middle;
  white-space: nowrap;
  -webkit-transition: var(--label-transition);
  transition: var(--label-transition);
}
.label.light {
  background-color: var(--color-light);
  color: var(--color-dark-font);
}
.label.light:hover, .label.light:focus, .label.light:active {
  background-color: var(--color-soft-light);
  color: var(--color-dark-font);
}
.label.primary {
  background-color: var(--color-primary);
  color: var(--color-light-font);
}
.label.primary:hover, .label.primary:focus, .label.primary:active {
  background-color: var(--color-light-primary);
  color: var(--color-light-font);
}
.label.secondary {
  background-color: var(--color-secondary);
  color: var(--color-light-font);
}
.label.secondary:hover, .label.secondary:focus, .label.secondary:active {
  background-color: var(--color-light-secondary);
  color: var(--color-light-font);
}
.label.success {
  background-color: var(--color-success);
  color: var(--color-light-font);
}
.label.success:hover, .label.success:focus, .label.success:active {
  background-color: var(--color-light-success);
  color: var(--color-dark-font);
}
.label.warning {
  background-color: var(--color-warning);
  color: var(--color-light-font);
}
.label.warning:hover, .label.warning:focus, .label.warning:active {
  background-color: var(--color-light-warning);
  color: var(--color-dark-font);
}
.label.danger {
  background-color: var(--color-danger);
  color: var(--color-light-font);
}
.label.danger:hover, .label.danger:focus, .label.danger:active {
  background-color: var(--color-light-danger);
  color: var(--color-dark-font);
}
.label.info {
  background-color: var(--color-info);
  color: var(--color-light-font);
}
.label.info:hover, .label.info:focus, .label.info:active {
  background-color: var(--color-light-info);
  color: var(--color-dark-font);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Atoms
 *	Dropdowns
 *
 *  ======================================================================================================================= */
.dropdown {
  min-width: var(--dropdown-width);
  display: none;
  opacity: 0;
  -webkit-transition: var(--dropdown-transition);
  transition: var(--dropdown-transition);
  position: absolute;
  z-index: var(--dropdown-z-index);
}
.dropdown-container {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  position: relative;
}
.dropdown-container:hover .dropdown-toggle.nav-link, .dropdown-container:focus .dropdown-toggle.nav-link, .dropdown-container:active .dropdown-toggle.nav-link {
  color: var(--dropdown-nav-link-hover-color);
}
.dropdown-toggle:hover, .dropdown-toggle:focus, .dropdown-toggle:active {
  cursor: pointer;
}
.dropdown.card {
  display: none;
}
.dropdown.left {
  left: 0;
}
.dropdown.right {
  right: 0;
}
.dropdown.middle {
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Atoms
 *	icon-box
 *
 *  ======================================================================================================================= */
.icon-box {
  background: var(--icon-box-bg);
  width: var(--icon-box-medium-size);
  height: var(--icon-box-medium-size);
  padding: var(--icon-box-padding);
  -webkit-transition: var(--icon-box-transition);
  transition: var(--icon-box-transition);
}
.icon-box img {
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.icon-box.round {
  background: var(--icon-box-round-bg);
  padding: var(--icon-box-round-padding);
  border-radius: 50%;
  overflow: hidden;
}
.icon-box.small {
  width: var(--icon-box-small-size);
  height: var(--icon-box-small-size);
}
.icon-box.small.round {
  padding: var(--icon-box-small-round-padding);
}
.icon-box.large {
  width: var(--icon-box-large-size);
  height: var(--icon-box-large-size);
}
.icon-box.large.round {
  padding: var(--icon-box-large-round-padding);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Atoms
 *	Divider
 *
 *  ======================================================================================================================= */
hr, .hr {
  border: none;
  border-bottom: 1px solid var(--divider-color);
}

hr, .hr {
  margin: 1.5em 0;
}

@media (min-width: 600px) {
  hr, .hr {
    margin: 1.875em 0;
  }
}
@media (min-width: 900px) {
  hr, .hr {
    margin: 2.25em 0;
  }
}
@media (min-width: 1200px) {
  hr, .hr {
    margin: 2.625em 0;
  }
}
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Atoms
 *	Countdown
 *
 *  ======================================================================================================================= */
.countdown {
  color: var(--countdown-color);
  font-size: var(--countdown-font-size);
  font-weight: var(--countdown-font-weight);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Atoms
 *	Popover
 *
 *  ======================================================================================================================= */
.popover {
  width: var(--popover-width);
  -webkit-box-shadow: var(--popover-box-shadow);
          box-shadow: var(--popover-box-shadow);
  display: none;
  position: absolute;
  opacity: 0;
  -webkit-transition: var(--popover-transition);
  transition: var(--popover-transition);
  z-index: var(--popover-z-index);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Atoms
 *	Pagination
 *
 *  ======================================================================================================================= */
.pagination-wrapper {
  display: grid;
  z-index: 0;
}
.pagination-wrapper .pagination-page {
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  align-self: start;
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  -webkit-transition: var(--pagination-page-transition);
  transition: var(--pagination-page-transition);
}
.pagination-wrapper .pagination-page.active {
  opacity: 1;
}

.pagination {
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.pagination li:not(:last-child) {
  margin-right: var(--pagination-link-spacing);
}
.pagination li.active .pagination-link {
  background-color: var(--pagination-link-active-bg);
  color: var(--pagination-link-active-color);
  pointer-events: none;
}
.pagination .pagination-link {
  background-color: var(--pagination-link-bg);
  color: var(--pagination-link-color);
  min-width: var(--pagination-link-width);
  height: 100%;
  padding: var(--pagination-link-padding);
  border: var(--pagination-link-border-width) solid var(--pagination-link-border-color);
  border-radius: var(--pagination-link-border-radius);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-transition: var(--pagination-link-transition);
  transition: var(--pagination-link-transition);
  cursor: pointer;
}
.pagination .pagination-link:hover, .pagination .pagination-link:focus, .pagination .pagination-link:active {
  background-color: var(--pagination-link-hover-bg);
  color: var(--pagination-link-hover-color);
}
.pagination .pagination-link.disabled {
  pointer-events: none;
  visibility: hidden;
}
.pagination .icon, .pagination .icon:before, .pagination .icon:after {
  background-color: var(--pagination-link-color);
}
.pagination .icon:hover, .pagination .icon:focus, .pagination .icon:active, .pagination .icon:before:hover, .pagination .icon:before:focus, .pagination .icon:before:active, .pagination .icon:after:hover, .pagination .icon:after:focus, .pagination .icon:after:active {
  background-color: var(--pagination-link-hover-color);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Molecules
 *	Accordion
 *
 *  ======================================================================================================================= */
.accordion {
  padding: var(--accordion-padding);
  border: var(--accordion-border);
  -webkit-box-shadow: var(--accordion-box-shadow);
          box-shadow: var(--accordion-box-shadow);
  list-style: none;
}
.accordion-header {
  background-color: var(--accordion-header-bg);
  color: var(--accordion-header-color);
  padding: var(--accordion-item-y-padding) var(--accordion-item-x-padding);
  border-top: var(--accordion-header-border);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: var(--accordion-header-font-size);
  -webkit-transition: var(--accordion-header-transition);
  transition: var(--accordion-header-transition);
}
.accordion-header:hover, .accordion-header:focus, .accordion-header:active {
  background-color: var(--accordion-header-hover-bg);
  color: var(--accordion-header-hover-color);
  cursor: pointer;
}
.accordion-body {
  height: 0;
  -webkit-transition: var(--accordion-body-transition);
  transition: var(--accordion-body-transition);
  overflow: hidden;
}
.accordion-body .accordion-content {
  padding: var(--accordion-item-y-padding) var(--accordion-item-x-padding);
}
.accordion li:first-child .accordion-header {
  border-top: none;
}
.accordion li.active .accordion-header {
  border-bottom: var(--accordion-header-border);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Molecules
 *	Alert
 *
 *  version - v1
 *
 *  ======================================================================================================================= */
.alert {
  background-color: var(--alert-bg);
  color: var(--alert-color);
  position: relative;
  -webkit-transition: var(--alert-transition);
  transition: var(--alert-transition);
  overflow: hidden;
}
.alert .close-alert {
  position: absolute;
  top: var(--alert-padding);
  right: var(--alert-padding);
}
.alert .icon, .alert .icon:before, .alert .icon:after {
  background-color: var(--alert-color);
  color: var(--alert-color);
}
.alert .alert-content {
  padding: var(--alert-padding);
}
.alert.primary {
  background-color: var(--color-light-primary);
  color: var(--color-dark-primary);
}
.alert.primary h1, .alert.primary h2, .alert.primary h3, .alert.primary h4, .alert.primary h5 {
  color: var(--color-dark-primary);
}
.alert.primary .icon, .alert.primary .icon:before, .alert.primary .icon:after {
  background-color: var(--color-dark-primary);
  color: var(--color-dark-primary);
}
.alert.secondary {
  background-color: var(--color-light-secondary);
  color: var(--color-dark-secondary);
}
.alert.secondary h1, .alert.secondary h2, .alert.secondary h3, .alert.secondary h4, .alert.secondary h5 {
  color: var(--color-dark-secondary);
}
.alert.secondary .icon, .alert.secondary .icon:before, .alert.secondary .icon:after {
  background-color: var(--color-dark-secondary);
  color: var(--color-dark-secondary);
}
.alert.success {
  background-color: var(--color-light-success);
  color: var(--color-dark-success);
}
.alert.success h1, .alert.success h2, .alert.success h3, .alert.success h4, .alert.success h5 {
  color: var(--color-dark-success);
}
.alert.success .icon, .alert.success .icon:before, .alert.success .icon:after {
  background-color: var(--color-dark-success);
  color: var(--color-dark-success);
}
.alert.warning {
  background-color: var(--color-light-warning);
  color: var(--color-dark-warning);
}
.alert.warning h1, .alert.warning h2, .alert.warning h3, .alert.warning h4, .alert.warning h5 {
  color: var(--color-dark-warning);
}
.alert.warning .icon, .alert.warning .icon:before, .alert.warning .icon:after {
  background-color: var(--color-dark-warning);
  color: var(--color-dark-warning);
}
.alert.danger {
  background-color: var(--color-light-danger);
  color: var(--color-dark-danger);
}
.alert.danger h1, .alert.danger h2, .alert.danger h3, .alert.danger h4, .alert.danger h5 {
  color: var(--color-dark-danger);
}
.alert.danger .icon, .alert.danger .icon:before, .alert.danger .icon:after {
  background-color: var(--color-dark-danger);
  color: var(--color-dark-danger);
}
.alert.info {
  background-color: var(--color-light-info);
  color: var(--color-dark-info);
}
.alert.info h1, .alert.info h2, .alert.info h3, .alert.info h4, .alert.info h5 {
  color: var(--color-dark-info);
}
.alert.info .icon, .alert.info .icon:before, .alert.info .icon:after {
  background-color: var(--color-dark-info);
  color: var(--color-dark-info);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Molecules
 *	Box
 *
 *  ======================================================================================================================= */
.box {
  background-color: var(--box-bg);
  display: grid;
}
.box.focus-top {
  grid-template-rows: -webkit-max-content auto;
  grid-template-rows: max-content auto;
}
.box.focus-left {
  grid-template-columns: -webkit-max-content auto;
  grid-template-columns: max-content auto;
}
.box.focus-right {
  grid-template-columns: auto -webkit-max-content;
  grid-template-columns: auto max-content;
}
.box.focus-bottom {
  grid-template-rows: auto -webkit-max-content;
  grid-template-rows: auto max-content;
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Molecules
 *	Card
 *
 *  ======================================================================================================================= */
.card {
  background-color: var(--card-bg);
  color: var(--card-color);
  padding: var(--card-padding);
  border: var(--card-border);
  border-radius: var(--card-border-radius);
  display: grid;
  -webkit-box-shadow: var(--card-shadow);
          box-shadow: var(--card-shadow);
  overflow: hidden;
  -webkit-transition: var(--card-transition);
  transition: var(--card-transition);
}
.card h1, .card h2, .card h3, .card h4, .card h5 {
  color: var(--color-dark-headline);
}
.card .card-content {
  width: 100%;
  padding: var(--card-content-y-padding) var(--card-content-x-padding);
}
.card .card-content:first-child {
  padding-top: var(--card-content-x-padding);
}
.card .card-content:last-child {
  padding-bottom: var(--card-content-x-padding);
}
.card .card-content.media {
  min-width: 30%;
  height: var(--card-vertical-img-height);
  padding: 0;
}
.card .card-content.media > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.card.dividing .card-content:not(:last-child) {
  border-bottom: var(--card-content-border);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Molecules
 *	Form
 *
 *  ======================================================================================================================= */
form {
  margin: 0;
  padding: var(--form-padding);
}

label {
  line-height: 1;
  font-weight: var(--form-label-fontweight);
  text-transform: var(--form-label-lettercase);
}

.form-field {
  background-color: var(--form-field-bg);
  color: var(--form-field-color);
  padding: var(--form-field-y-padding) var(--form-field-x-padding);
  border: var(--form-field-border);
  border-radius: var(--form-field-border-radius);
  outline: 0;
  line-height: 1;
  -webkit-transition: var(--form-field-transition);
  transition: var(--form-field-transition);
}
.form-field:focus, .form-field:active {
  -webkit-box-shadow: var(--form-field-focus-outline);
          box-shadow: var(--form-field-focus-outline);
}

.foot-note {
  color: var(--form-footnote-color);
  margin-top: var(--form-footnote-top-spacing);
  font-size: var(--form-footnote-fontsize);
  font-weight: var(--form-footnote-fontweight);
}

.form-element {
  padding: var(--form-element-spacing) 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.form-element.inline {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.form-element.inline label:not(.radio) {
  min-width: var(--form-label-width);
  margin-right: var(--form-label-x-spacing);
}
.form-element.inline .form-field {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}
.form-element.inline .foot-note {
  margin-left: var(--form-label-width);
}
.form-element.stacked {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.form-element.stacked label:not(.radio) {
  margin-bottom: var(--form-label-y-spacing);
}
.form-element.stacked .form-field, .form-element.stacked .foot-note {
  width: 100%;
}

.checkbox {
  width: 100%;
  display: grid;
  cursor: pointer;
}
.checkbox:hover span:after, .checkbox:focus span:after, .checkbox:active span:after {
  border-color: var(--form-check-hover-color);
}
.checkbox input {
  grid-column: 1;
  grid-row: 1;
  z-index: 0;
  visibility: hidden;
}
.checkbox input:checked + span:before {
  background-color: var(--form-checked-bg);
}
.checkbox span {
  width: 100%;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: -webkit-max-content 1fr;
  grid-template-columns: max-content 1fr;
  grid-gap: var(--form-checkbox-gutter);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.checkbox span:before {
  content: "";
  background-color: var(--form-checkbox-bg);
  width: var(--form-checkbox-size);
  height: var(--form-checkbox-size);
  border: var(--form-checkbox-border);
  border-radius: var(--form-checkbox-radius);
  display: block;
  -webkit-transition: var(--form-checkbox-transition);
  transition: var(--form-checkbox-transition);
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
}
.checkbox span:after {
  content: "";
  width: var(--form-check-width);
  height: var(--form-check-height);
  margin-bottom: var(--form-check-spacing);
  border-right: var(--form-check-border);
  border-bottom: var(--form-check-border);
  display: block;
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: var(--form-checkbox-transition);
  transition: var(--form-checkbox-transition);
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  z-index: 2;
}

.radio {
  display: grid;
  cursor: pointer;
}
.radio:hover span:after, .radio:focus span:after, .radio:active span:after {
  border-color: var(--form-check-hover-color);
}
.radio input {
  grid-column: 1;
  grid-row: 1;
  z-index: 0;
  visibility: hidden;
}
.radio input:checked + span:before {
  background-color: var(--form-checked-bg);
}
.radio span {
  width: 100%;
  grid-column: 1;
  grid-row: 1;
  display: grid;
  grid-template-columns: -webkit-max-content 1fr;
  grid-template-columns: max-content 1fr;
  grid-gap: var(--form-checkbox-gutter);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.radio span:before {
  content: "";
  background-color: var(--form-checkbox-bg);
  width: var(--form-checkbox-size);
  height: var(--form-checkbox-size);
  border: var(--form-checkbox-border);
  border-radius: var(--form-radio-radius);
  display: block;
  -webkit-transition: var(--form-checkbox-transition);
  transition: var(--form-checkbox-transition);
  grid-column: 1;
  grid-row: 1;
  z-index: 1;
}
.radio span:after {
  content: "";
  border: var(--form-radio-border);
  border-radius: var(--form-radio-radius);
  display: block;
  -webkit-transition: var(--form-checkbox-transition);
  transition: var(--form-checkbox-transition);
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  justify-self: center;
}

.select {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  outline: 0;
  position: relative;
}
.select:focus, .select:active {
  -webkit-box-shadow: var(--form-field-focus-outline);
          box-shadow: var(--form-field-focus-outline);
}
.select input {
  pointer-events: none;
  border-right: none;
  outline: 0;
  -webkit-transition: var(--form-select-transition);
  transition: var(--form-select-transition);
}
.select input:focus {
  pointer-events: none;
  color: transparent;
}
.select:hover, .select input:hover {
  cursor: pointer;
}
.select:hover input, .select:hover a, .select input:hover input, .select input:hover a {
  background-color: var(--form-select-hover-bg);
}
.select a {
  background-color: var(--form-field-bg);
  width: 2em;
  height: auto;
  border: var(--form-field-border);
  border-left: none;
}
.select span.triangle-up {
  border-bottom-color: var(--form-select-icon-color);
}
.select span.triangle-down {
  border-top-color: var(--form-select-icon-color);
}

.select-dropdown {
  width: 100%;
  padding: 0;
  border: var(--form-field-border);
  display: none;
  opacity: 0;
  list-style: none;
  -webkit-transition: var(--form-select-transition);
  transition: var(--form-select-transition);
  position: absolute;
  top: 100%;
  z-index: 4;
}
.select-dropdown li {
  background-color: var(--form-select-bg);
  width: 100%;
  padding: var(--form-field-y-padding) var(--form-field-x-padding);
  line-height: 1;
}
.select-dropdown li.active, .select-dropdown li:hover, .select-dropdown li:focus {
  background-color: var(--form-select-active-bg);
  color: var(--form-select-active-color);
}

label.switch {
  position: relative;
  cursor: pointer;
}
label.switch input[type=checkbox] {
  width: 0;
  height: 0;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
}
label.switch .switch-toggle {
  background-color: var(--form-switch-off-bg);
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--form-switch-radius);
  -webkit-transition: var(--form-switch-transition);
  transition: var(--form-switch-transition);
}
label.switch .switch-toggle:before {
  content: "";
  background-color: var(--form-switch-toggle-bg);
  width: 1em;
  height: 1em;
  margin: var(--form-switch-spacing) 0 var(--form-switch-spacing) var(--form-switch-spacing);
  padding: var(--form-switch-toggle-spacing);
  border-radius: var(--form-switch-radius);
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  -webkit-transform: translateX(0);
          transform: translateX(0);
  -webkit-transition: var(--form-switch-transition);
  transition: var(--form-switch-transition);
}
label.switch input:checked + .switch-toggle {
  background-color: var(--form-switch-on-bg);
}
label.switch input:checked + .switch-toggle:before {
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
}

input[type=range] {
  -webkit-appearance: none;
  -moz-appearance: none;
       appearance: none;
  background-color: var(--form-range-slider-bg);
  width: 100%;
  height: var(--form-range-slider-height);
  border-radius: var(--form-range-slider-radius);
  outline: none;
  opacity: var(--form-range-slider-opacity);
}
input[type=range]::-webkit-slider-runnable-track {
  background-color: var(--form-range-slider-bg);
  width: 100%;
  height: var(--form-range-slider-height);
  border-radius: var(--form-range-slider-radius);
  outline: none;
  opacity: var(--form-range-slider-opacity);
}
input[type=range]:hover {
  opacity: 1;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background-color: var(--form-range-handle-bg);
  width: var(--form-range-handle-width);
  height: var(--form-range-handle-height);
  -webkit-transform: translateY(calc(-50% + (0.5rem / 2)));
          transform: translateY(calc(-50% + (0.5rem / 2)));
  border: var(--form-range-handle-border);
  border-radius: var(--form-range-handle-radius);
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  background-color: var(--form-range-handle-bg);
  width: var(--form-range-handle-width);
  height: var(--form-range-handle-height);
  border: var(--form-range-handle-border);
  border-radius: var(--form-range-handle-radius);
  cursor: pointer;
}
input[type=range][orient=vertical] {
  -webkit-appearance: none;
  width: var(--form-range-slider-height);
  height: 100%;
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Molecules
 *	Lightbox
 *
 *  ======================================================================================================================= */
.lightbox {
  background: var(--lightbox-bg);
  width: 100vw;
  height: 100vh;
  display: none;
  justify-items: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6;
  opacity: 0;
  -webkit-transition: var(--lightbox-transition);
  transition: var(--lightbox-transition);
}

.lightbox:target {
  display: grid;
}

.lightbox > * {
  max-width: 90%;
}

.lightbox > .icon-holder {
  position: fixed;
  top: 1em;
  right: 1em;
}

.lightbox-toggle {
  display: grid;
  position: relative;
  cursor: pointer;
}
.lightbox-toggle .lightbox-item {
  display: grid;
}
.lightbox-toggle .overlay {
  background-color: var(--lightbox-toggle-overlay);
  color: var(--lightbox-overlay-color);
  margin: 0;
  opacity: 0;
  -webkit-transition: var(--lightbox-toggle-overlay-transition);
  transition: var(--lightbox-toggle-overlay-transition);
}
.lightbox-toggle:hover > .overlay {
  opacity: 1;
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Molecules
 *	Modal
 *
 *  ======================================================================================================================= */
.modal {
  display: none;
  opacity: 0;
  overflow: auto;
  -webkit-transition: var(--modal-transition);
  transition: var(--modal-transition);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 8;
}
.modal-content {
  position: relative;
}
.modal-content.overlay-tl {
  justify-self: start;
  -ms-flex-item-align: start;
      align-self: start;
}
.modal-content.overlay-tc {
  justify-self: center;
  -ms-flex-item-align: start;
      align-self: start;
}
.modal-content.overlay-tr {
  justify-self: end;
  -ms-flex-item-align: start;
      align-self: start;
}
.modal-content.overlay-ml {
  justify-self: start;
  -ms-flex-item-align: center;
      align-self: center;
}
.modal-content.overlay-mc {
  justify-self: center;
  -ms-flex-item-align: center;
      align-self: center;
}
.modal-content.overlay-mr {
  justify-self: end;
  -ms-flex-item-align: center;
      align-self: center;
}
.modal-content.overlay-bl {
  justify-self: start;
  -ms-flex-item-align: end;
      align-self: end;
}
.modal-content.overlay-bc {
  justify-self: center;
  -ms-flex-item-align: end;
      align-self: end;
}
.modal-content.overlay-br {
  justify-self: end;
  -ms-flex-item-align: end;
      align-self: end;
}
.modal-dismiss {
  padding: var(--modal-dismiss-spacing);
  position: absolute;
  top: 0;
  right: 0;
}

.toggle-modal, .close-modal {
  cursor: pointer;
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Molecules
 *	Off-Canvas
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
.off-canvas {
  background-color: var(--off-canvas-bg);
  padding: var(--off-canvas-padding);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: fixed;
  -webkit-transition: var(--off-canvas-transition);
  transition: var(--off-canvas-transition);
  z-index: 10;
}
.off-canvas.left, .off-canvas.right {
  width: 20em;
  max-width: 75vw;
  height: 100vh;
  top: 0;
}
.off-canvas.left {
  left: 0;
  -webkit-transform: translate3d(-101%, 0, 0);
          transform: translate3d(-101%, 0, 0);
}
.off-canvas.right {
  right: 0;
  -webkit-transform: translate3d(101%, 0, 0);
          transform: translate3d(101%, 0, 0);
}
.off-canvas.top, .off-canvas.bottom {
  width: 100vw;
  height: 20em;
  left: 0;
}
.off-canvas.top {
  top: 0;
  -webkit-transform: translate3d(0, -101%, 0);
          transform: translate3d(0, -101%, 0);
}
.off-canvas.bottom {
  bottom: 0;
  -webkit-transform: translate3d(0, 101%, 0);
          transform: translate3d(0, 101%, 0);
}

.off-canvas-toggle {
  cursor: pointer;
}
.off-canvas-toggle.active:after {
  content: "";
  background-color: var(--off-canvas-overlay-bg);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 6;
}

.reset-canvas.top, .reset-canvas.bottom, .reset-canvas.left, .reset-canvas.right {
  width: initial;
  height: initial;
  padding: initial;
  position: initial;
  -webkit-transform: initial;
          transform: initial;
  z-index: initial;
}

@media (min-width: 600px) {
  .reset-canvas-s.top, .reset-canvas-s.bottom, .reset-canvas-s.left, .reset-canvas-s.right {
    width: initial;
    height: initial;
    padding: initial;
    position: initial;
    -webkit-transform: initial;
            transform: initial;
    z-index: initial;
  }
}
@media (min-width: 900px) {
  .reset-canvas-m.top, .reset-canvas-m.bottom, .reset-canvas-m.left, .reset-canvas-m.right {
    width: initial;
    height: initial;
    padding: initial;
    position: initial;
    -webkit-transform: initial;
            transform: initial;
    z-index: initial;
  }
}
@media (min-width: 1200px) {
  .reset-canvas-l.top, .reset-canvas-l.bottom, .reset-canvas-l.left, .reset-canvas-l.right {
    width: initial;
    height: initial;
    padding: initial;
    position: initial;
    -webkit-transform: initial;
            transform: initial;
    z-index: initial;
  }
}
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Molecules
 *	Overlay
 *
 *  ======================================================================================================================= */
.overlay {
  max-width: 100vw;
  margin: var(--overlay-margin);
  padding: var(--overlay-padding);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  grid-template-areas: "tl tc tr" "ml mc mr" "bl bc br";
  pointer-events: none;
}
.overlay * {
  pointer-events: all;
}
.overlay-hover {
  position: relative;
}
.overlay-hover > .overlay {
  opacity: 0;
  -webkit-transition: var(--overlay-transition);
  transition: var(--overlay-transition);
}
.overlay-hover:hover > .overlay, .overlay-hover:focus > .overlay, .overlay-hover:active > .overlay {
  opacity: 1;
}

.overlay-tl {
  grid-area: tl;
}

.overlay-tc {
  grid-area: tc;
}

.overlay-tr {
  grid-area: tr;
}

.overlay-ml {
  grid-area: ml;
}

.overlay-mc {
  grid-area: mc;
}

.overlay-mr {
  grid-area: mr;
}

.overlay-bl {
  grid-area: bl;
}

.overlay-bc {
  grid-area: bc;
}

.overlay-br {
  grid-area: br;
}

.overlay-light {
  color: var(--color-light);
}
.overlay-light .icon, .overlay-light .icon:before, .overlay-light .icon:after {
  background-color: var(--color-light);
}
.overlay-light .dot-nav li.active a {
  background-color: var(--color-light);
  border-color: var(--color-light);
}
.overlay-light .dot-nav a {
  border-color: var(--color-light);
}
.overlay-light .dot-nav a:hover, .overlay-light .dot-nav a:focus {
  background-color: var(--color-light);
  border-color: var(--color-light);
}

.overlay-dark {
  color: var(--color-dark);
}
.overlay-dark .icon, .overlay-dark .icon:before, .overlay-dark .icon:after {
  background-color: var(--color-dark);
}
.overlay-dark .dot-nav li.active a {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}
.overlay-dark .dot-nav a {
  border-color: var(--color-dark);
}
.overlay-dark .dot-nav a:hover, .overlay-dark .dot-nav a:focus {
  background-color: var(--color-dark);
  border-color: var(--color-dark);
}

.overlay-primary {
  color: var(--color-primary);
}
.overlay-primary .icon, .overlay-primary .icon:before, .overlay-primary .icon:after {
  background-color: var(--color-primary);
}
.overlay-primary .dot-nav li.active a {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.overlay-primary .dot-nav a {
  border-color: var(--color-primary);
}
.overlay-primary .dot-nav a:hover, .overlay-primary .dot-nav a:focus {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.overlay-secondary {
  color: var(--color-secondary);
}
.overlay-secondary .icon, .overlay-secondary .icon:before, .overlay-secondary .icon:after {
  background-color: var(--color-secondary);
}
.overlay-secondary .dot-nav li.active a {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}
.overlay-secondary .dot-nav a {
  border-color: var(--color-secondary);
}
.overlay-secondary .dot-nav a:hover, .overlay-secondary .dot-nav a:focus {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
}

.point-through {
  pointer-events: none;
}

.point-reset {
  pointer-events: initial;
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Molecules
 *	Slider
 *
 *  ======================================================================================================================= */
.slider {
  position: relative;
}
.slider img {
  width: 100%;
  display: grid;
}
.slider .slider-content {
  display: grid;
  overflow: hidden;
}
.slider .slides-container {
  min-width: 0;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
}
.slider .slide {
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  -webkit-transition: var(--slider-fade-transition);
  transition: var(--slider-fade-transition);
}

.dot-nav {
  padding: var(--dotnav-padding);
  list-style: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.dot-nav li:not(:last-child) {
  margin-right: var(--dotnav-spacing);
}
.dot-nav li.active a {
  background-color: var(--dotnav-active-bg);
  border: var(--dotnav-active-border);
}
.dot-nav a {
  background-color: var(--dotnav-bg);
  width: var(--dotnav-size);
  height: var(--dotnav-size);
  border: var(--dotnav-border);
  border-radius: 50%;
  display: block;
  -webkit-transition: var(--dotnav-transition);
  transition: var(--dotnav-transition);
}
.dot-nav a:hover, .dot-nav a:focus {
  cursor: pointer;
}
.dot-nav.vertical {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}
.dot-nav.vertical li:not(:last-child) {
  margin-bottom: var(--dotnav-spacing);
}

.slider.fading .slides-container {
  display: grid;
}
.slider.fading .slide {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
}
.slider.fading .slide.active {
  opacity: 1;
}

.slider.inline .slides-container {
  width: 100%;
  display: inline-grid;
}
.slider.inline .vertical .slide {
  display: grid;
  align-self: start;
}
.slider.inline .slow-speed {
  -webkit-transition: var(--slider-fast-slide-transition);
  transition: var(--slider-fast-slide-transition);
}
.slider.inline .medium-speed {
  -webkit-transition: var(--slider-fast-slide-transition);
  transition: var(--slider-fast-slide-transition);
}
.slider.inline .fast-speed {
  -webkit-transition: var(--slider-fast-slide-transition);
  transition: var(--slider-fast-slide-transition);
}
@media (hover: hover) {
  .slider.inline .slow-speed {
    -webkit-transition: var(--slider-slow-slide-transition);
    transition: var(--slider-slow-slide-transition);
  }
  .slider.inline .medium-speed {
    -webkit-transition: var(--slider-medium-slide-transition);
    transition: var(--slider-medium-slide-transition);
  }
  .slider.inline .fast-speed {
    -webkit-transition: var(--slider-fast-slide-transition);
    transition: var(--slider-fast-slide-transition);
  }
}

.slider.inline.overflow .slider-content {
  overflow: visible;
}
.slider.inline.overflow .horizontal {
  -webkit-transform: translateX(0);
          transform: translateX(0);
}
.slider.inline.overflow .vertical {
  -webkit-transform: translateY(0);
          transform: translateY(0);
}

.control-area {
  background-color: var(--slider-control-area-bg);
  padding: var(--slider-control-area-padding);
  -webkit-transition: var(--slider-control-area-transition);
  transition: var(--slider-control-area-transition);
  cursor: pointer;
}
.control-area:hover, .control-area:focus, .control-area:active {
  background-color: var(--slider-control-area-hover-bg);
}
.control-area .icon, .control-area .icon:before, .control-area .icon:after {
  background-color: var(--slider-control-icon-color);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Molecules
 *	Table
 *
 *  ======================================================================================================================= */
table {
  width: 100%;
}
table th {
  text-transform: var(--table-head-letter-case);
  font-weight: var(--table-head-font-weight);
}
table th, table td {
  text-align: left;
  padding: var(--table-padding);
}
table th:not(:last-child), table td:not(:last-child) {
  border-right: var(--table-column-border);
}
table tr:not(:last-child) {
  border-bottom: var(--table-row-border);
}

table.striped tr:nth-child(even) {
  background-color: var(--table-striped-bg);
}

table.hover-light tr:not(:first-child) th, table.hover-light tr:not(:first-child) td, table.hover-dark tr:not(:first-child) th, table.hover-dark tr:not(:first-child) td, table.hover-primary tr:not(:first-child) th, table.hover-primary tr:not(:first-child) td, table.hover-secondary tr:not(:first-child) th, table.hover-secondary tr:not(:first-child) td {
  border-top: var(--table-row-border);
}
table.hover-light tr:last-child, table.hover-dark tr:last-child, table.hover-primary tr:last-child, table.hover-secondary tr:last-child {
  border-bottom: var(--table-border-width) var(--table-border-style) transparent;
}
table.hover-light th, table.hover-light td, table.hover-dark th, table.hover-dark td, table.hover-primary th, table.hover-primary td, table.hover-secondary th, table.hover-secondary td {
  border: var(--table-border-width) var(--table-border-style) transparent;
  border-bottom: 0;
}
table.hover-light th:not(:last-child), table.hover-light td:not(:last-child), table.hover-dark th:not(:last-child), table.hover-dark td:not(:last-child), table.hover-primary th:not(:last-child), table.hover-primary td:not(:last-child), table.hover-secondary th:not(:last-child), table.hover-secondary td:not(:last-child) {
  border-right: var(--table-columns-border);
}
table.hover-light tr:hover th, table.hover-light tr:hover td, table.hover-light tr:focus th, table.hover-light tr:focus td, table.hover-light tr:active th, table.hover-light tr:active td {
  border-top-color: var(--color-light);
  border-bottom: var(--table-border-width) var(--table-border-style) var(--color-light);
}
table.hover-light tr:hover th:first-child, table.hover-light tr:hover td:first-child, table.hover-light tr:focus th:first-child, table.hover-light tr:focus td:first-child, table.hover-light tr:active th:first-child, table.hover-light tr:active td:first-child {
  border-left-color: var(--color-light);
}
table.hover-light tr:hover th:last-child, table.hover-light tr:hover td:last-child, table.hover-light tr:focus th:last-child, table.hover-light tr:focus td:last-child, table.hover-light tr:active th:last-child, table.hover-light tr:active td:last-child {
  border-right-color: var(--color-light);
}
table.hover-dark tr:hover th, table.hover-dark tr:hover td, table.hover-dark tr:focus th, table.hover-dark tr:focus td, table.hover-dark tr:active th, table.hover-dark tr:active td {
  border-top-color: var(--color-dark);
  border-bottom: var(--table-border-width) var(--table-border-style) var(--color-dark);
}
table.hover-dark tr:hover th:first-child, table.hover-dark tr:hover td:first-child, table.hover-dark tr:focus th:first-child, table.hover-dark tr:focus td:first-child, table.hover-dark tr:active th:first-child, table.hover-dark tr:active td:first-child {
  border-left-color: var(--color-dark);
}
table.hover-dark tr:hover th:last-child, table.hover-dark tr:hover td:last-child, table.hover-dark tr:focus th:last-child, table.hover-dark tr:focus td:last-child, table.hover-dark tr:active th:last-child, table.hover-dark tr:active td:last-child {
  border-right-color: var(--color-dark);
}
table.hover-primary tr:hover th, table.hover-primary tr:hover td, table.hover-primary tr:focus th, table.hover-primary tr:focus td, table.hover-primary tr:active th, table.hover-primary tr:active td {
  border-top-color: var(--color-primary);
  border-bottom: var(--table-border-width) var(--table-border-style) var(--color-primary);
}
table.hover-primary tr:hover th:first-child, table.hover-primary tr:hover td:first-child, table.hover-primary tr:focus th:first-child, table.hover-primary tr:focus td:first-child, table.hover-primary tr:active th:first-child, table.hover-primary tr:active td:first-child {
  border-left-color: var(--color-primary);
}
table.hover-primary tr:hover th:last-child, table.hover-primary tr:hover td:last-child, table.hover-primary tr:focus th:last-child, table.hover-primary tr:focus td:last-child, table.hover-primary tr:active th:last-child, table.hover-primary tr:active td:last-child {
  border-right-color: var(--color-primary);
}
table.hover-secondary tr:hover th, table.hover-secondary tr:hover td, table.hover-secondary tr:focus th, table.hover-secondary tr:focus td, table.hover-secondary tr:active th, table.hover-secondary tr:active td {
  border-top-color: var(--color-secondary);
  border-bottom: var(--table-border-width) var(--table-border-style) var(--color-secondary);
}
table.hover-secondary tr:hover th:first-child, table.hover-secondary tr:hover td:first-child, table.hover-secondary tr:focus th:first-child, table.hover-secondary tr:focus td:first-child, table.hover-secondary tr:active th:first-child, table.hover-secondary tr:active td:first-child {
  border-left-color: var(--color-secondary);
}
table.hover-secondary tr:hover th:last-child, table.hover-secondary tr:hover td:last-child, table.hover-secondary tr:focus th:last-child, table.hover-secondary tr:focus td:last-child, table.hover-secondary tr:active th:last-child, table.hover-secondary tr:active td:last-child {
  border-right-color: var(--color-secondary);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Molecules
 *	Tabs
 *
 *  ======================================================================================================================= */
.tab-nav {
  background-color: var(--tab-nav-bg);
  border-bottom: var(--tab-nav-border-bottom);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.tab-nav a {
  background-color: var(--tab-nav-link-bg);
  color: var(--tab-nav-link-color);
  width: 100%;
  padding: var(--tab-nav-padding);
  display: block;
  letter-spacing: var(--tab-nav-link-letter-spacing);
  text-align: center;
  -webkit-text-decoration: var(--tab-nav-link-text-deco);
          text-decoration: var(--tab-nav-link-text-deco);
  position: relative;
}
.tab-nav a:not(:last-child) {
  border-right: var(--tab-nav-link-border);
}
.tab-nav a:before, .tab-nav a:after {
  content: "";
  background-color: var(--tab-nav-link-deco-color);
  width: 0;
  height: var(--tab-nav-hover-height);
  display: block;
  position: absolute;
  bottom: 0;
  -webkit-transform-origin: center;
          transform-origin: center;
  -webkit-transition: var(--tab-nav-link-transition);
  transition: var(--tab-nav-link-transition);
}
.tab-nav a:before {
  right: 50%;
}
.tab-nav a:after {
  left: 50%;
}
.tab-nav a:hover, .tab-nav a:focus, .tab-nav a:active {
  background-color: var(--tab-nav-link-hover-bg);
  cursor: pointer;
}
.tab-nav a:hover:before, .tab-nav a:hover:after, .tab-nav a:focus:before, .tab-nav a:focus:after, .tab-nav a:active:before, .tab-nav a:active:after {
  width: 50%;
}
.tab-nav a.active {
  background-color: var(--tab-nav-link-active-bg);
  color: var(--tab-nav-link-active-color);
}
.tab-nav a.active:before, .tab-nav a.active:after {
  width: 50%;
}
.tab-nav a.active:hover, .tab-nav a.active:focus, .tab-nav a.active:active {
  cursor: initial;
}
.tab-nav.vertical {
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: stretch;
      -ms-flex-pack: stretch;
          justify-content: stretch;
}
.tab-nav.vertical a {
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
  width: 100%;
  border-right: none;
}
.tab-nav.vertical a:not(:last-child) {
  border-bottom: var(--tab-nav-link-border);
}

@media (min-width: 600px) {
  .tab-nav a {
    width: auto;
  }
}
.tab-container {
  display: grid;
}
.tab-container .tab {
  grid-row: 1;
  grid-column: 1;
  min-width: 0;
  padding: var(--tab-padding);
  border: var(--tab-border);
  border-bottom: var(--tab-bottom-border);
  -webkit-transition: var(--tab-transition);
  transition: var(--tab-transition);
  opacity: 0;
  z-index: 0;
}
.tab-container .tab.active {
  opacity: 1;
  z-index: 2;
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components
 *	Navigations
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
.navbar {
  padding: 1em;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.nav-link {
  display: block;
  cursor: pointer;
}

.nav-x {
  background-color: transparent !important;
  padding: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

.nav-x > li:not(:last-child) {
  margin-right: var(--nav-link-gutter);
}

@media (min-width: 600px) {
  .nav-x-s {
    background-color: transparent !important;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
  }
  .nav-x-s > li:not(:last-child) {
    margin-right: var(--nav-link-gutter);
  }
}
@media (min-width: 900px) {
  .nav-x-m {
    background-color: transparent !important;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
  }
  .nav-x-m > li:not(:last-child) {
    margin-right: var(--nav-link-gutter);
  }
}
@media (min-width: 1200px) {
  .nav-x-l {
    background-color: transparent !important;
    padding: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: relative;
  }
  .nav-x-l > li:not(:last-child) {
    margin-right: var(--nav-link-gutter);
  }
}
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Components - Navigations
 *	Breadcrumb
 *
 *  ======================================================================================================================= */
.breadcrumb ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.breadcrumb li {
  padding: var(--breadcrumb-item-spacing);
  line-height: var(--breadcrumb-line-height);
}
.breadcrumb li:first-child {
  padding-left: 0;
}
.breadcrumb li:not(:last-child) {
  border-right: var(--breadcrumb-item-divider);
}
.breadcrumb .active {
  color: var(--breadcrumb-active-item-color);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Effects
 *	Shadows
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
.base-box-shadow {
  -webkit-box-shadow: var(--shadow-base);
          box-shadow: var(--shadow-base);
}

.overlay-box-shadow {
  -webkit-box-shadow: var(--shadow-overlay);
          box-shadow: var(--shadow-overlay);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Effects
 *	Gradients
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
.primary-gradient {
  background: -webkit-gradient(linear, left top, right bottom, from(var(--color-light-primary)), to(var(--color-dark-primary)));
  background: linear-gradient(to bottom right, var(--color-light-primary), var(--color-dark-primary));
  color: var(--color-light-font);
}
.primary-gradient h1, .primary-gradient h2, .primary-gradient h3, .primary-gradient h4, .primary-gradient h5 {
  color: var(--color-light-headline);
}

.secondary-gradient {
  background: -webkit-gradient(linear, left top, right bottom, from(white), to(var(--color-secondary)));
  background: linear-gradient(to bottom right, white, var(--color-secondary));
  color: var(--color-light-font);
}
.secondary-gradient h1, .secondary-gradient h2, .secondary-gradient h3, .secondary-gradient h4, .secondary-gradient h5 {
  color: var(--color-light-headline);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Effects
 *	Animations
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
.fade, .fade-childs > * {
  -webkit-transition: all 1.25s;
  transition: all 1.25s;
  opacity: 0;
}

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

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

.parallax {
  -webkit-transition: all 0.1s;
  transition: all 0.1s;
  z-index: 2;
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Overrides
 *	Colorize
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
.bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.bg-default {
  background-color: var(--color-global-bg) !important;
  color: var(--color-dark-font) !important;
}

.bg-light {
  background-color: var(--color-light) !important;
  color: var(--color-dark-font) !important;
}
.bg-light h1, .bg-light h2, .bg-light h3, .bg-light h4, .bg-light h5 {
  color: var(--color-dark-headline);
}

.bg-dark {
  background-color: var(--color-dark) !important;
  color: var(--color-light-font) !important;
}
.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5 {
  color: var(--color-light-headline);
}

.bg-grey {
  background-color: var(--color-medium-grey) !important;
  color: var(--color-dark-font) !important;
}
.bg-grey h1, .bg-grey h2, .bg-grey h3, .bg-grey h4, .bg-grey h5 {
  color: var(--color-dark-headline);
}

.bg-primary {
  background-color: var(--color-primary) !important;
  color: var(--color-light-font) !important;
}
.bg-primary h1, .bg-primary h2, .bg-primary h3, .bg-primary h4, .bg-primary h5 {
  color: var(--color-light-headline);
}

.bg-secondary {
  background-color: var(--color-secondary) !important;
  color: var(--color-light-font) !important;
}
.bg-secondary h1, .bg-secondary h2, .bg-secondary h3, .bg-secondary h4, .bg-secondary h5 {
  color: var(--color-light-headline);
}

.bg-success {
  background-color: var(--color-success) !important;
  color: var(--color-light-font) !important;
}
.bg-success h1, .bg-success h2, .bg-success h3, .bg-success h4, .bg-success h5 {
  color: var(--color-light-headline);
}

.bg-warning {
  background-color: var(--color-warning) !important;
  color: var(--color-light-font) !important;
}
.bg-warning h1, .bg-warning h2, .bg-warning h3, .bg-warning h4, .bg-warning h5 {
  color: var(--color-light-headline);
}

.bg-danger {
  background-color: var(--color-danger) !important;
  color: var(--color-light-font) !important;
}
.bg-danger h1, .bg-danger h2, .bg-danger h3, .bg-danger h4, .bg-danger h5 {
  color: var(--color-light-headline);
}

.bg-info {
  background-color: var(--color-info) !important;
  color: var(--color-light-font) !important;
}
.bg-info h1, .bg-info h2, .bg-info h3, .bg-info h4, .bg-info h5 {
  color: var(--color-light-headline);
}

.rgba-light-10 {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.rgba-light-20 {
  background-color: rgba(255, 255, 255, 0.2) !important;
}

.rgba-light-30 {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

.rgba-light-40 {
  background-color: rgba(255, 255, 255, 0.4) !important;
}

.rgba-light-50 {
  background-color: rgba(255, 255, 255, 0.5) !important;
}

.rgba-light-60 {
  background-color: rgba(255, 255, 255, 0.6) !important;
}

.rgba-light-70 {
  background-color: rgba(255, 255, 255, 0.7) !important;
}

.rgba-light-80 {
  background-color: rgba(255, 255, 255, 0.8) !important;
}

.rgba-light-90 {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

.rgba-dark-10 {
  background-color: rgba(0, 0, 0, 0.1) !important;
}

.rgba-dark-20 {
  background-color: rgba(0, 0, 0, 0.2) !important;
}

.rgba-dark-30 {
  background-color: rgba(0, 0, 0, 0.3) !important;
}

.rgba-dark-40 {
  background-color: rgba(0, 0, 0, 0.4) !important;
}

.rgba-dark-50 {
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.rgba-dark-60 {
  background-color: rgba(0, 0, 0, 0.6) !important;
}

.rgba-dark-70 {
  background-color: rgba(0, 0, 0, 0.7) !important;
}

.rgba-dark-80 {
  background-color: rgba(0, 0, 0, 0.8) !important;
}

.rgba-dark-90 {
  background-color: rgba(0, 0, 0, 0.9) !important;
}

.rgba-primary-10 {
  background-color: rgba(128, 99, 89, 0.1) !important;
}

.rgba-primary-20 {
  background-color: rgba(128, 99, 89, 0.2) !important;
}

.rgba-primary-30 {
  background-color: rgba(128, 99, 89, 0.3) !important;
}

.rgba-primary-40 {
  background-color: rgba(128, 99, 89, 0.4) !important;
}

.rgba-primary-50 {
  background-color: rgba(128, 99, 89, 0.5) !important;
}

.rgba-primary-60 {
  background-color: rgba(128, 99, 89, 0.6) !important;
}

.rgba-primary-70 {
  background-color: rgba(128, 99, 89, 0.7) !important;
}

.rgba-primary-80 {
  background-color: rgba(128, 99, 89, 0.8) !important;
}

.rgba-primary-90 {
  background-color: rgba(128, 99, 89, 0.9) !important;
}

.rgba-secondary-10 {
  background-color: rgba(26, 16, 12, 0.1) !important;
}

.rgba-secondary-20 {
  background-color: rgba(26, 16, 12, 0.2) !important;
}

.rgba-secondary-30 {
  background-color: rgba(26, 16, 12, 0.3) !important;
}

.rgba-secondary-40 {
  background-color: rgba(26, 16, 12, 0.4) !important;
}

.rgba-secondary-50 {
  background-color: rgba(26, 16, 12, 0.5) !important;
}

.rgba-secondary-60 {
  background-color: rgba(26, 16, 12, 0.6) !important;
}

.rgba-secondary-70 {
  background-color: rgba(26, 16, 12, 0.7) !important;
}

.rgba-secondary-80 {
  background-color: rgba(26, 16, 12, 0.8) !important;
}

.rgba-secondary-90 {
  background-color: rgba(26, 16, 12, 0.9) !important;
}

.font-default {
  color: var(--color-dark-font) !important;
}
.font-light {
  color: var(--color-light-font) !important;
}
.font-dark {
  color: var(--color-dark-font) !important;
}
.font-primary {
  color: var(--color-primary) !important;
}
.font-secondary {
  color: var(--color-secondary) !important;
}
.font-success {
  color: var(--color-success) !important;
}
.font-warning {
  color: var(--color-warning) !important;
}
.font-danger {
  color: var(--color-danger) !important;
}
.font-info {
  color: var(--color-info) !important;
}

.outline.light {
  color: var(--color-light);
  border: var(--border-width) solid var(--color-light);
}

.outline.dark {
  color: var(--color-dark);
  border: var(--border-width) solid var(--color-dark);
}

.outline.primary {
  color: var(--color-primary);
  border: var(--border-width) solid var(--color-primary);
}

.outline.secondary {
  color: var(--color-secondary);
  border: var(--border-width) solid var(--color-secondary);
}

.outline.success {
  color: var(--color-success);
  border: var(--border-width) solid var(--color-success);
}

.outline.warning {
  color: var(--color-warning);
  border: var(--border-width) solid var(--color-warning);
}

.outline.danger {
  color: var(--color-danger);
  border: var(--border-width) solid var(--color-danger);
}

.outline.info {
  color: var(--color-info);
  border: var(--border-width) solid var(--color-info);
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Overrides
 *	Width
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
.min-width-10 {
  min-width: 10rem !important;
}

.width-10 {
  width: 10rem !important;
  max-width: 100% !important;
}

.max-width-10 {
  max-width: 10rem !important;
}

.min-width-20 {
  min-width: 20rem !important;
}

.width-20 {
  width: 20rem !important;
  max-width: 100% !important;
}

.max-width-20 {
  max-width: 20rem !important;
}

.min-width-30 {
  min-width: 30rem !important;
}

.width-30 {
  width: 30rem !important;
  max-width: 100% !important;
}

.max-width-30 {
  max-width: 30rem !important;
}

.min-width-40 {
  min-width: 40rem !important;
}

.width-40 {
  width: 40rem !important;
  max-width: 100% !important;
}

.max-width-40 {
  max-width: 40rem !important;
}

.min-width-50 {
  min-width: 50rem !important;
}

.width-50 {
  width: 50rem !important;
  max-width: 100% !important;
}

.max-width-50 {
  max-width: 50rem !important;
}

.min-width-60 {
  min-width: 60rem !important;
}

.width-60 {
  width: 60rem !important;
  max-width: 100% !important;
}

.max-width-60 {
  max-width: 60rem !important;
}

.min-width-70 {
  min-width: 70rem !important;
}

.width-70 {
  width: 70rem !important;
  max-width: 100% !important;
}

.max-width-70 {
  max-width: 70rem !important;
}

.min-width-80 {
  min-width: 80rem !important;
}

.width-80 {
  width: 80rem !important;
  max-width: 100% !important;
}

.max-width-80 {
  max-width: 80rem !important;
}

.min-width-90 {
  min-width: 90rem !important;
}

.width-90 {
  width: 90rem !important;
  max-width: 100% !important;
}

.max-width-90 {
  max-width: 90rem !important;
}

.min-width-100 {
  min-width: 100rem !important;
}

.width-100 {
  width: 100rem !important;
  max-width: 100% !important;
}

.max-width-100 {
  max-width: 100rem !important;
}

.min-width-110 {
  min-width: 110rem !important;
}

.width-110 {
  width: 110rem !important;
  max-width: 100% !important;
}

.max-width-110 {
  max-width: 110rem !important;
}

.min-width-120 {
  min-width: 120rem !important;
}

.width-120 {
  width: 120rem !important;
  max-width: 100% !important;
}

.max-width-120 {
  max-width: 120rem !important;
}

.min-width-130 {
  min-width: 130rem !important;
}

.width-130 {
  width: 130rem !important;
  max-width: 100% !important;
}

.max-width-130 {
  max-width: 130rem !important;
}

.min-width-140 {
  min-width: 140rem !important;
}

.width-140 {
  width: 140rem !important;
  max-width: 100% !important;
}

.max-width-140 {
  max-width: 140rem !important;
}

.min-width-150 {
  min-width: 150rem !important;
}

.width-150 {
  width: 150rem !important;
  max-width: 100% !important;
}

.max-width-150 {
  max-width: 150rem !important;
}

.min-width-160 {
  min-width: 160rem !important;
}

.width-160 {
  width: 160rem !important;
  max-width: 100% !important;
}

.max-width-160 {
  max-width: 160rem !important;
}

.min-width-170 {
  min-width: 170rem !important;
}

.width-170 {
  width: 170rem !important;
  max-width: 100% !important;
}

.max-width-170 {
  max-width: 170rem !important;
}

.min-width-180 {
  min-width: 180rem !important;
}

.width-180 {
  width: 180rem !important;
  max-width: 100% !important;
}

.max-width-180 {
  max-width: 180rem !important;
}

.min-width-190 {
  min-width: 190rem !important;
}

.width-190 {
  width: 190rem !important;
  max-width: 100% !important;
}

.max-width-190 {
  max-width: 190rem !important;
}

.min-width-200 {
  min-width: 200rem !important;
}

.width-200 {
  width: 200rem !important;
  max-width: 100% !important;
}

.max-width-200 {
  max-width: 200rem !important;
}

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

.viewport-width {
  width: 100vw !important;
}

@media (min-width: 600px) {
  .full-width-s {
    width: 100% !important;
  }
  .viewport-width-s {
    width: 100vw !important;
  }
}
@media (min-width: 900px) {
  .full-width-m {
    width: 100% !important;
  }
  .viewport-width-m {
    width: 100vw !important;
  }
}
@media (min-width: 1200px) {
  .full-width-l {
    width: 100% !important;
  }
  .viewport-width-l {
    width: 100vw !important;
  }
}
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Overrides
 *	Height
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
.height-10 {
  height: 10rem !important;
}

.height-20 {
  height: 20rem !important;
}

.height-30 {
  height: 30rem !important;
}

.height-40 {
  height: 40rem !important;
}

.height-50 {
  height: 50rem !important;
}

.height-60 {
  height: 60rem !important;
}

.height-70 {
  height: 70rem !important;
}

.height-80 {
  height: 80rem !important;
}

.height-90 {
  height: 90rem !important;
}

.height-100 {
  height: 100rem !important;
}

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

.viewport-height {
  height: 100vh !important;
}

@media (min-width: 600px) {
  .height-10-s {
    height: 10rem !important;
  }
  .height-20-s {
    height: 20rem !important;
  }
  .height-30-s {
    height: 30rem !important;
  }
  .height-40-s {
    height: 40rem !important;
  }
  .height-50-s {
    height: 50rem !important;
  }
  .height-60-s {
    height: 60rem !important;
  }
  .height-70-s {
    height: 70rem !important;
  }
  .height-80-s {
    height: 80rem !important;
  }
  .height-90-s {
    height: 90rem !important;
  }
  .height-100-s {
    height: 100rem !important;
  }
  .full-height-s {
    height: 100% !important;
  }
  .viewport-height-s {
    height: 100vh !important;
  }
}
@media (min-width: 900px) {
  .height-10-m {
    height: 10rem !important;
  }
  .height-20-m {
    height: 20rem !important;
  }
  .height-30-m {
    height: 30rem !important;
  }
  .height-40-m {
    height: 40rem !important;
  }
  .height-50-m {
    height: 50rem !important;
  }
  .height-60-m {
    height: 60rem !important;
  }
  .height-70-m {
    height: 70rem !important;
  }
  .height-80-m {
    height: 80rem !important;
  }
  .height-90-m {
    height: 90rem !important;
  }
  .height-100-m {
    height: 100rem !important;
  }
  .full-height-m {
    height: 100% !important;
  }
  .viewport-height-m {
    height: 100vh !important;
  }
}
@media (min-width: 1200px) {
  .height-10-l {
    height: 10rem !important;
  }
  .height-20-l {
    height: 20rem !important;
  }
  .height-30-l {
    height: 30rem !important;
  }
  .height-40-l {
    height: 40rem !important;
  }
  .height-50-l {
    height: 50rem !important;
  }
  .height-60-l {
    height: 60rem !important;
  }
  .height-70-l {
    height: 70rem !important;
  }
  .height-80-l {
    height: 80rem !important;
  }
  .height-90-l {
    height: 90rem !important;
  }
  .height-100-l {
    height: 100rem !important;
  }
  .full-height-l {
    height: 100% !important;
  }
  .viewport-height-l {
    height: 100vh !important;
  }
}
/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Overrides
 *	Replacements
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
.list-reset {
  padding-left: 0;
  list-style: none;
}
.list-reset li {
  text-indent: 0;
}

.uppercase {
  text-transform: uppercase;
}

.normalcase {
  text-transform: normal;
}

.lowercase {
  text-transform: lowercase;
}

.capitalize {
  text-transform: capitalize;
}

.rounded {
  border-radius: var(--border-radius);
}

.wrap {
  white-space: normal;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.no-wrap {
  white-space: nowrap;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
}

.gap-0 {
  grid-gap: 0;
}

.gap-0_25 {
  grid-gap: 0.25em;
}

.gap-0_5 {
  grid-gap: 0.5em;
}

.gap-0_75 {
  grid-gap: 0.75em;
}

.gap-1 {
  grid-gap: 1em;
}

.gap-1_5 {
  grid-gap: 1.5em;
}

.gap-2 {
  grid-gap: 2em;
}

.gap-2_5 {
  grid-gap: 2.5em;
}

.gap-3 {
  grid-gap: 3em;
}

.gap-3_5 {
  grid-gap: 3.5em;
}

.gap-4 {
  grid-gap: 4em;
}

.gap-5 {
  grid-gap: 5em;
}

@media (min-width: 600px) {
  .gap-0-s {
    grid-gap: 0;
  }
  .gap-0_25-s {
    grid-gap: 0.25em;
  }
  .gap-0_5-s {
    grid-gap: 0.5em;
  }
  .gap-0_75-s {
    grid-gap: 0.75em;
  }
  .gap-1-s {
    grid-gap: 1em;
  }
  .gap-1_5-s {
    grid-gap: 1.5em;
  }
  .gap-2-s {
    grid-gap: 2em;
  }
  .gap-2_5-s {
    grid-gap: 2.5em;
  }
  .gap-3-s {
    grid-gap: 3em;
  }
  .gap-3_5-s {
    grid-gap: 3.5em;
  }
  .gap-4-s {
    grid-gap: 4em;
  }
  .gap-5-s {
    grid-gap: 5em;
  }
}
@media (min-width: 900px) {
  .gap-0-m {
    grid-gap: 0;
  }
  .gap-0_25-m {
    grid-gap: 0.25em;
  }
  .gap-0_5-m {
    grid-gap: 0.5em;
  }
  .gap-0_75-m {
    grid-gap: 0.75em;
  }
  .gap-1-m {
    grid-gap: 1em;
  }
  .gap-1_5-m {
    grid-gap: 1.5em;
  }
  .gap-2-m {
    grid-gap: 2em;
  }
  .gap-2_5-m {
    grid-gap: 2.5em;
  }
  .gap-3-m {
    grid-gap: 3em;
  }
  .gap-3_5-m {
    grid-gap: 3.5em;
  }
  .gap-4-m {
    grid-gap: 4em;
  }
  .gap-5-m {
    grid-gap: 5em;
  }
}
@media (min-width: 1200px) {
  .gap-0-l {
    grid-gap: 0;
  }
  .gap-0_25-l {
    grid-gap: 0.25em;
  }
  .gap-0_5-l {
    grid-gap: 0.5em;
  }
  .gap-0_75-l {
    grid-gap: 0.75em;
  }
  .gap-1-l {
    grid-gap: 1em;
  }
  .gap-1_5-l {
    grid-gap: 1.5em;
  }
  .gap-2-l {
    grid-gap: 2em;
  }
  .gap-2_5-l {
    grid-gap: 2.5em;
  }
  .gap-3-l {
    grid-gap: 3em;
  }
  .gap-3_5-l {
    grid-gap: 3.5em;
  }
  .gap-4-l {
    grid-gap: 4em;
  }
  .gap-5-l {
    grid-gap: 5em;
  }
}
.flex-x {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

.flex-y {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

@media (min-width: 600px) {
  .flex-x-s {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .flex-y-s {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media (min-width: 900px) {
  .flex-x-m {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .flex-y-m {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
@media (min-width: 1200px) {
  .flex-x-l {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
  }
  .flex-y-l {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
  }
}
.hidden {
  display: none !important;
}

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

.d-flex {
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
}

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

@media (min-width: 600px) {
  .hidden-s {
    display: none !important;
  }
  .d-block-s {
    display: block !important;
  }
  .d-flex-s {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-grid-s {
    display: grid !important;
  }
}
@media (min-width: 900px) {
  .hidden-m {
    display: none !important;
  }
  .d-block-m {
    display: block !important;
  }
  .d-flex-m {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-grid-m {
    display: grid !important;
  }
}
@media (min-width: 1200px) {
  .hidden-l {
    display: none !important;
  }
  .d-block-l {
    display: block !important;
  }
  .d-flex-l {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
  .d-grid-l {
    display: grid !important;
  }
}
@media (hover: none) {
  .hidden-mobile {
    display: none !important;
  }
  .d-block-mobile {
    display: block !important;
  }
  .d-grid-mobile {
    display: grid !important;
  }
  .d-flex-mobile {
    display: -webkit-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
  }
}
.invisible {
  visibility: hidden !important;
}

.visible {
  visibility: visible !important;
}

/*  ==========================================================================================================================
 *
 *	xFrontend Framework
 *
 *	Overrides
 *	Reverts
 *
 *  author - König Alfonz
 *
 *  ======================================================================================================================= */
.revert-list-style {
  padding-left: 4rem !important;
  list-style: initial !important;
}

.revert-border {
  border: initial !important;
}

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

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

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

.revert-border-right {
  border-right: initial !important;
}

.revert-box-shadow {
  -webkit-box-shadow: initial !important;
          box-shadow: initial !important;
}

.revert-width {
  width: initial !important;
  max-width: initial !important;
}

.revert-max-width {
  max-width: initial !important;
}

.revert-pos {
  position: initial !important;
}

.revert-height {
  height: initial !important;
}

@media (min-width: 600px) {
  .revert-pos-s {
    position: initial !important;
  }
  .revert-height-s {
    height: initial !important;
  }
}
@media (min-width: 900px) {
  .revert-pos-m {
    position: initial !important;
  }
  .revert-height-m {
    height: initial !important;
  }
}
@media (min-width: 1200px) {
  .revert-pos-l {
    position: initial !important;
  }
  .revert-height-l {
    height: initial !important;
  }
}
/* general */
html {
  scroll-behavior: smooth;
}

body {
  font-size: 1.4rem;
}

.text-lg {
  font-size: 1.6rem;
}

.text-lead {
  font-size: 1.7rem;
}
@media (min-width: 900px) {
  .text-lead {
    font-size: 1.9rem;
  }
}

h1, h2, h3, h4, h5 {
  margin-top: 6px !important;
}

a {
  color: inherit;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

.rn-content-height {
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}

/* header */
header.big-header #intro .rn-toggle-video {
  background-color: white;
  color: var(--color-primary);
  padding: 1.5rem;
  border: none;
  border-radius: 50%;
  line-height: 1;
  aspect-ratio: 1/1;
  -webkit-transition: var(--transition-short);
  transition: var(--transition-short);
}
@media (min-width: 1200px) {
  header.big-header #intro .rn-toggle-video {
    margin-top: 6rem;
  }
}
header.big-header #intro .rn-toggle-video span {
  font-size: 56px;
}
header.big-header #intro .rn-toggle-video:hover, header.big-header #intro .rn-toggle-video:focus {
  background-color: whitesmoke;
}
header.big-header #intro .rn-logo {
  max-width: 32rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: -6.4rem;
}
@media (min-width: 600px) {
  header.big-header #intro .rn-logo {
    bottom: -10.1rem;
  }
}
header.big-header #intro .rn-logo img {
  width: 32rem;
  pointer-events: none;
}
@media (min-width: 1200px) {
  header.big-header .nav-holder {
    top: -24rem;
  }
}
header.big-header .off-canvas nav .rn-logo {
  max-width: 32rem;
}
header.big-header .off-canvas nav img {
  width: 32rem;
  pointer-events: none;
}
@media (min-width: 1200px) {
  header.big-header .off-canvas nav a {
    color: var(--color-dark-font) !important;
  }
}
@media (min-width: 1200px) {
  header.big-header .off-canvas nav li:not(.rn-logo) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    padding-bottom: 2rem;
  }
}

header.header-home {
  background-image: url("../../../img/couple-holding-boxes.jpg");
  background-position: 45% 20%;
  background-size: cover;
  height: 85vh;
}

header.header-mannheim {
  background-image: url("../../../img/mannheim-bg.jpg");
  background-position: 45% 35%;
  background-size: cover;
  height: 85vh;
}
header.header-mannheim h2 {
  padding-inline: 1rem;
  max-width: 72rem;
}

header.header-heidelberg {
  background-image: url("../../../img/heidelberg-bg.jpg");
  background-position: 45% 50%;
  background-size: cover;
  height: 85vh;
}
header.header-heidelberg h2 {
  padding-inline: 1rem;
  max-width: 72rem;
}

#intro {
  background-color: rgba(128, 99, 89, 0.4);
}
#intro h1 {
  color: #222;
}

/* nav */
.off-canvas a {
  color: white !important;
}
@media (min-width: 1200px) {
  .off-canvas a {
    font-size: 1.8rem;
  }
}

.off-canvas-toggle {
  color: #666;
}
.off-canvas-toggle span {
  font-size: 1.5em;
}

@media (min-width: 900px) {
  .off-canvas {
    background-color: transparent;
  }
  .off-canvas a {
    color: var(--color-light) !important;
  }
}
.nav-holder {
  width: 100%;
}

nav a {
  font-size: 1.2em;
}

/* container */
@media (max-width: 600px) {
  .container-medium.open-left > .container-content {
    padding-left: 1.5em;
  }
  .container-medium.open-right > .container-content {
    padding-right: 1.5em;
  }
}
@media (max-width: 900px) {
  .container-medium.open-left > .container-content {
    padding-left: 1.875em;
  }
  .container-medium.open-right > .container-content {
    padding-right: 1.875em;
  }
}
/* video */
#video .rn-video-wrapper {
  display: grid;
}
#video .rn-video-wrapper .rn-video-preview, #video .rn-video-wrapper .rn-video-frame, #video .rn-video-wrapper img, #video .rn-video-wrapper .rn-video-preview > div {
  grid-row: 1;
  grid-column: 1;
}
#video .rn-video-wrapper .rn-video-frame {
  z-index: 1;
}
#video .rn-video-wrapper .rn-video-preview {
  display: grid;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  cursor: pointer;
  z-index: 2;
}
#video .rn-video-wrapper .rn-video-preview button.rn-play-video {
  background-color: #4c4c4c;
  color: white;
  margin: auto;
  border-radius: 25%/25%;
  padding: 1rem 2.3rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
#video .rn-video-wrapper .rn-video-preview button.rn-play-video span {
  font-size: 4rem;
}
#video .rn-video-wrapper .rn-video-preview:hover button {
  background-color: var(--color-primary);
}
#video .rn-video-wrapper .rn-video-preview a.rn-yt-link {
  background-color: #4c4c4c;
  color: white;
  padding: 0.5rem;
  font-size: 12px;
  position: absolute;
  left: 0;
  bottom: 0;
}
@media (min-width: 600px) {
  #video .rn-video-wrapper .rn-video-preview a.rn-yt-link {
    bottom: 4rem;
  }
}
@media (min-width: 900px) {
  #video .rn-video-wrapper .rn-video-preview a.rn-yt-link {
    padding: 0.75rem;
    bottom: 6rem;
  }
}
#video .rn-video-wrapper video {
  width: 100%;
  height: 100%;
}

/* teaser */
#teaser .rn-image-holder {
  max-height: 50rem;
}
#teaser .rn-image-holder > img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: 50% 30%;
     object-position: 50% 30%;
}

/* calc */
#calc {
  height: 0;
  overflow: hidden;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#calc.open {
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
}
#calc .rn-toggle-calc {
  display: grid;
  border-radius: 50%;
}

.rn-calc {
  max-width: 60rem;
  margin: auto;
}
.rn-calc label, .rn-calc .rn-range-preview, .rn-calc p.m-0 {
  font-size: 1.2em;
}
.rn-calc .form-field {
  background-color: var(--color-light);
  color: var(--color-dark-font);
  width: 8rem;
  padding: 1rem;
}
.rn-calc .rn-calc-value {
  background-color: var(--color-light);
  color: var(--color-dark-font);
  border-radius: 6px;
  font-family: "Teko", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 3em;
  font-weight: bold;
  text-align: center;
}

/* services */
#services h3, #ratings h3 {
  font-size: 22px;
  font-weight: bold;
}

#services ul {
  max-width: 100%;
  display: grid;
  grid-column-gap: 8em;
}
#services ul > li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 1em 0;
  font-size: 1em;
  border-color: var(--color-medium-grey);
}
@media (min-width: 900px) {
  #services ul > li {
    font-size: 1.5em;
  }
}
#services li p {
  margin: 0;
}
#services span.icon-check {
  padding: 0.5rem;
  border-radius: 50%;
}
@media (min-width: 900px) {
  #services span.icon-check {
    padding: 1rem;
  }
}

/* contact */
.form-field {
  background-color: rgba(255, 255, 255, 0.15);
  color: white;
  padding: 1.25em;
  border-bottom: 2px solid rgba(255, 255, 255, 0.15);
  -webkit-transition: all 0.2s;
  transition: all 0.2s;
}
.form-field:focus {
  border-bottom-color: white;
}

/* ratings */
.card {
  display: block !important;
}

span[class^=icon-star] {
  color: var(--color-light-primary);
}

.rn-add-rating {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}
.rn-add-rating a {
  color: var(--color-medium-grey);
  padding: 1.5em;
  border: 2px solid var(--color-medium-grey);
  border-radius: 50%;
  display: grid;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.rn-add-rating a:hover {
  color: var(--color-light-primary);
  border-color: var(--color-light-primary);
  text-decoration: none;
}
.rn-add-rating span {
  font-size: 4em;
}

.rn-rating-details span[class^=icon-star] {
  font-size: 3em;
}
.rn-rating-details .rn-rating-date, .rn-rating-details .rn-rating-author {
  font-size: 1.5em;
}
.rn-rating-details .rn-rating-date {
  font-weight: 800;
}
.rn-rating-details .rn-rating-description {
  font-size: 1.2em;
}

.rn-new-rating span[class^=icon-star] {
  font-size: 3em;
  cursor: pointer;
}
.rn-new-rating label {
  font-weight: bold;
}
.rn-new-rating .form-field {
  background-color: var(--color-light-grey);
  color: var(--color-dark-font);
}

.rn-total-rating {
  color: var(--color-primary);
  margin-bottom: 0;
  font-family: "Teko", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-size: 3em;
  text-transform: uppercase;
  line-height: 1;
}

.rn-all-ratings main a {
  font-size: 1.5em;
}

/* footer */
footer h3 {
  text-align: center;
  line-height: 1.2;
}
footer .rn-footer-logo {
  max-width: 10rem;
}
footer .rn-footer-content {
  text-align: center;
  margin: 0 auto;
}
@media (min-width: 900px) {
  footer .rn-footer-content {
    text-align: left;
    margin: initial;
  }
}
footer .rn-footer-top ul {
  padding-left: 0;
  list-style: none;
}
footer .rn-footer-top ul li::before {
  content: "\ea58";
  margin-right: 0.5em;
  font-family: "icomoon";
  font-size: 1.5em;
  line-height: 1.2;
}
footer .rn-footer-top ul li {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

/* privacy */
#rn-sub-page .nav-holder {
  background-color: var(--color-light);
  -webkit-box-shadow: var(--shadow-base);
          box-shadow: var(--shadow-base);
}
@media (min-width: 1200px) {
  #rn-sub-page .nav-holder nav a {
    color: var(--color-dark-font) !important;
  }
}
#rn-sub-page h2 {
  margin-top: 7rem !important;
}
#rn-sub-page main h3 {
  margin-top: 3rem !important;
}

nav button {
  background-color: initial !important;
  padding: 0;
  display: none !important;
  font-family: var(--typo-base-font);
}
@media (min-width: 900px) {
  nav button {
    display: block !important;
    line-height: 28px;
  }
}

header nav {
  place-self: center;
  margin-inline: auto;
}

@media (min-width: 900px) {
  header .has-dropdown {
    position: relative;
  }
  header .nav-dropdown {
    background-color: white;
    min-width: 20rem;
    padding: 2.5rem 3rem 0.5rem 3rem;
    -webkit-box-shadow: 0 3px 2rem rgba(0, 0, 0, 0.1);
            box-shadow: 0 3px 2rem rgba(0, 0, 0, 0.1);
    position: absolute;
    left: -3rem;
    bottom: 0;
    -webkit-transform: translateY(100%);
            transform: translateY(100%);
    opacity: 0;
    z-index: -1;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
  }
  header .nav-dropdown li {
    padding-bottom: 1rem !important;
  }
  header .nav-dropdown li:last-child {
    padding-bottom: 2rem !important;
  }
  header .nav-dropdown:hover,
  header .has-dropdown button:hover + .nav-dropdown {
    opacity: 1;
    z-index: 2;
  }
}
#mannheim img, #heidelberg img {
  min-width: 30rem;
}
@media (min-width: 1200px) {
  #mannheim img, #heidelberg img {
    min-width: 40rem;
  }
}
#mannheim .text-lead span, #heidelberg .text-lead span {
  font-weight: 800;
}

.ButtonBase__ButtonContainer-sc-p43e7i-3 > span {
  padding: 14px !important;
}

.Close__Component-sc-9nuxpx-0.jcCdwO {
  background-color: rgba(255, 255, 255, 0.3);
  padding: 12px;
}

.Header__AnswerTime-sc-5nh99s-3.fDhGDk {
  max-width: 18rem;
}/*# sourceMappingURL=xtheme.css.map */