/* Roboto Light 300 */
@font-face {
    font-family: 'Roboto';
    font-weight: 300;
    src: url('../Fonts/Roboto/Roboto-Light.woff2') format('woff2'),
        url('../Fonts/Roboto/Roboto-Light.woff') format('woff');
}

/* Roboto Regular 400 */
@font-face {
    font-family: 'Roboto';
    font-weight: 400;
    src: url('../Fonts/Roboto/Roboto-Regular.woff2') format('woff2'),
        url('../Fonts/Roboto/Roboto-Regular.woff') format('woff');
}

/* Roboto Bold 700 */
@font-face {
    font-family: 'Roboto';
    font-weight: 700;
    src: url('../Fonts/Roboto/Roboto-Bold.woff2') format('woff2'),
        url('../Fonts/Roboto/Roboto-Bold.woff') format('woff');
}


/* Globale Definitionen
---------------------------------------------------------------------------------------------- */
:root {
    /* Hue */
    --color-h: 230;
    /* Saturation */
    --color-s: 50%;
    /* Lightness  */
    --color-l: 49%;
    /*Variante*/
    --variante-color-dark: 20%;
    --variante-color-light: 30%;
    /* Color variables */
    --primary-color: hsl(var(--color-h), var(--color-s), var(--color-l));
    --primary-color-dark: hsl(var(--color-h), var(--color-s), calc(var(--color-l) - var(--variante-color-dark)));
    --primary-color-light: hsl(var(--color-h), var(--color-s), calc(var(--color-l) + var(--variante-color-light)));
    --secondary-color: #6c757d;
    --light-color: #f8f9fa;
    --dark-color: #343a40;
    /*border-radius*/
    --border-radius: 0px;
    /* Font variables */
    --font-color: #333;
    --font-card: #505050;
    --font-family: 'Roboto', sans-serif;
    --font-family-header: var(--font-family);
    --font-size: 16px;
    --font-weight-normal: 400;
    --font-weight-bold: 700;
    --font-weight-header: var(--font-weight-bold);
    /* Transition variables */
    --transition-duration: 0.3s;
    /*link variables */
    --link-color: var(--font-color);
    --link-color-hover: var(--dark-color);
    /* message colors */
    --success-color: #28a745;
    --danger-color: #dc3545;
    --warning-color: #ffc107;
    --info-color: #17a2b8;

    /* button setup */
    --btn-color: #303030;
    --btn-border-color: var(--btn-color);
    --btn-secondary-background-color: var(--secondary-color);
    --btn-light-background-color: var(--secondary-color);


    --cc-bg: #fff;
    --cc-text: #2d4156;
    --cc-border-radius: .35em;
    --cc-btn-primary-bg: #2d4156;
    --cc-btn-primary-text: var(--cc-bg);
    --cc-btn-primary-hover-bg: #1d2e38;
    --cc-btn-secondary-bg: #eaeff2;
    --cc-btn-secondary-text: var(--cc-text);
    --cc-btn-secondary-hover-bg: #d8e0e6;
    --cc-btn-border-radius: 4px;
    --cc-toggle-bg-off: #919ea6;
    --cc-toggle-bg-on: var(--cc-btn-primary-bg);
    --cc-toggle-bg-readonly: #d5dee2;
    --cc-toggle-knob-bg: #fff;
    --cc-toggle-knob-icon-color: #ecf2fa;
    --cc-block-text: var(--cc-text);
    --cc-cookie-category-block-bg: #f0f4f7;
    --cc-cookie-category-block-bg-hover: #e9eff4;
    --cc-section-border: #f1f3f5;
    --cc-cookie-table-border: #e9edf2;
    --cc-overlay-bg: rgba(4, 6, 8, .85);
    --cc-webkit-scrollbar-bg: #cfd5db;
    --cc-webkit-scrollbar-bg-hover: #9199a0;
    --cc-font-family: $font-stack;
}

.tx-cf-cookiemanager img{
    height: 15px;
    width: 15px;
}

.tx-cf-cookiemanager a{
    height: 25px;
    width: 25px;
    display: grid;
    place-items: center;

}

    


/* Hero Color themes */
.hero-primary-color {
    --bg-color-section: var(--primary-color);
    /* change font color to --font-color if contrast is too weak */
    --font-color-section: var(--light-color);
}

.hero-secondary-color {
    --bg-color-section: var(--secondary-color);
    /* change font color to --font-color if contrast is too weak */
    --font-color-section: var(--dark-color);
}

.hero-dark {
    --bg-color-section: var(--dark-color);
    --font-color-section: var(--light-color);
}



* {
    box-sizing: border-box;
}

html,
body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    background-color: var(--light-color);
}

img {
    max-width: 100%;
    height: auto;
    width: auto;
}


/* General
---------------------------------------------------------------------------------------------- */
body {
    font-family: var(--font-family);
    font-size: var(--font-size);
    font-weight: var(--font-weight-normal);
    line-height: 1.6em;
    color: var(--font-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-family-header);
    font-weight: var(--font-weight-header);
    margin: 0 0 15px;
    line-height: 1.45em;
}

h1 {
    font-size: 2.8em;
}

h2 {
    font-size: 2em;
}

h3 {
    font-size: 1.4em;
}

h4 {
    font-size: 1em;
}

h5 {
    font-size: 1em;
}

h6 {
    font-size: 1em;
}

a {
    text-decoration: none;
    color: var(--link-color);
}

a:hover {
    text-decoration: underline;
    color: var(--link-color-hover);
}

strong {
    font-weight: var(--font-weight-bold);
}

hr {
    border-top: 1px solid var(--light-color);
    background-color: var(--light-color);
    margin-top: 70px;
    margin-bottom: 50px;
    opacity: 1;
}

ul {
    padding: 0;
    margin: 0;
    list-style-type: none;
}

.break-out {
    position: relative;
    margin: 30px calc(50% - 50vw) !important;
    color: rgba(0, 0, 0, .6);
}


/* Loader
------------------------- */
/* with logo */
#page-loader-wait {
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    z-index: 9999;
    background: var(--light-color);
    background-size: 150px 150px;
    content: "Loading";
    display: flex;
    justify-content: center;
    align-items: center;
}

#page-loader-wait img {
    height: 150px;
    max-width: 200px;
    max-height: 200px;
    animation: loading infinite 2s;
}

@keyframes loading {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* with dots */
#page-loader-wait .dot {
    position: relative;
    width: 28px;
    height: 28px;
    margin: 22px;
    border-radius: 50%;
    background-color: var(--primary-color);
}

#page-loader-wait .dot::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    animation: wave 1.7s ease-out infinite;
}

#page-loader-wait .dot:nth-child(1)::before {
    animation-delay: 0.1s;
}

#page-loader-wait .dot:nth-child(2)::before {
    animation-delay: 0.2s;
}

#page-loader-wait .dot:nth-child(3)::before {
    animation-delay: 0.3s;
}

@keyframes wave {

    50%,
    75% {
        transform: scale(3);
    }

    80%,
    100% {
        opacity: 0;
    }
}

/* #language
---------------------------------------------------------------------------------------------- */
#language_menu {
    display: flex;
}

#language_menu li:nth-child(1) {
    border-right: 1px solid var(--primary-color);
}

#language_menu li {
    padding: 3px 15px;
}


/* Cards
------------------------- */
.frame-layout-30 {
    height: 100%;
}

.card {
    --card-border-radius: var(--border-radius);
    --card-margin: 15px;
    /* height: calc(100% - var(--card-margin) * 2); */
    height: auto;
    margin: var(--card-margin) 0;
    border-radius: var(--card-border-radius);
    border: none;
    background-color: var(--primary-color-light);
    color: var(--font-card);
}

.card a {
    text-decoration: none;
    transition: .2s ease-in-out;
    color: var(--primary-color);
}

.card a:hover {
    text-decoration: none;
}

.card-img {
    height: auto;
    border-radius: 0;
    border-top-right-radius: var(--card-border-radius);
    border-top-left-radius: var(--card-border-radius);
}

.card-body {
    padding: 25px 15px;
    transition: .2s ease-in-out;
    text-align: center;
    margin: 0;
}

/* horizontal cards */


/* Logo and Navigation
---------------------------------------------------------------------------------------------- */
.menu-container {
    background-color: var(--primary-color-light);
}

.menu-sticky {
    position: sticky;
    top: 0;
    z-index: 9;
}

.menu-container .container {
    padding-top: 10px;
}

.menu-container .row {
    height: 120px;
}


/* Logo
--------------------------- */
#logo a {
    width: 100%;
    height: 100%;
    max-width: 260px;
    max-height: 100px;
}

#logo img {
    width: auto;
    height: auto;
    max-width: 260px;
    max-height: 100px;
}


/* Navigation
--------------------------- */
#menu nav {
    width: 100%;
}

#menu .menu_level_1 {
    display: flex;
    justify-content: space-around;
}

#menu .menu_level_1>li>a {
    font-weight: 700;
    text-transform: uppercase;
    padding: 5px 15px;
}

#menu .menu_level_1>li:hover .menu_level_2 {
    display: block;
    padding-top: 5px;
}

#menu .menu_level_1 .menu_level_2>li {
    margin-top: 5px;
}

#menu .menu_level_2 {
    display: none;
    position: absolute;
    z-index: 1;
    background-color: var(--primary-color-light);
    padding: 10px 5px;
}

#menu .menu_level_2 a {
    padding: 10px 15px;
}


/* SlickNav
------------------------ */
#menu_spacer,
#menu_mobile,
#menu_mobile .slicknav_menu {
    min-height: 100px;
}

#menu_mobile {
    position: fixed;
    z-index: 10;
    top: 0;
    width: 100%;
    text-align: left;
}

#menu_mobile .slicknav_brand {
    float: none;
    position: absolute;
}

#menu_mobile .slicknav_brand {
    max-width: 260px;
    max-height: 90px;
    padding: 5px;
}

#menu_mobile .slicknav_brand a,
#menu_mobile .slicknav_brand img {
    display: block;
    max-width: 250px;
    max-height: 80px;
}

#menu_mobile .slicknav_brand,
#menu_mobile .slicknav_brand a {
    width: 100%;
    height: 100%;
}

#menu_mobile .slicknav_brand img {
    width: auto;
    height: auto;
}



/* SlickNav
------------------------ */
.slicknav_menu {
    background-color: var(--primary-color-light);
}

.slicknav_icon-bar {
    display: none !important;
}


/* Menu Togggle Burger */
.slicknav_btn {
    background-color: transparent;
    border-radius: 0;
    height: 39px;
    width: 47px;
    padding: 8px;
    cursor: pointer;
    margin: 22px 5px;
    right: 7px;
}

.slicknav_icon {
    margin-top: 13px !important;
    height: 20px;
}

.slicknav_icon,
.slicknav_icon::before,
.slicknav_icon::after {
    margin-left: 0 !important;
    content: '';
    display: block;
    background: var(--primary-color-dark) !important;
    height: 3px !important;
    width: 31px !important;
    border-radius: 4px;
    -webkit-transition: all ease-in-out 350ms;
    transition: all ease-in-out 350ms;
}

.slicknav_icon::before {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
}

.slicknav_icon::after {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
}


/* Toggle Burger open */
.slicknav_btn.slicknav_open .slicknav_icon {
    margin-top: 8px !important;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
}

.slicknav_btn.slicknav_open .slicknav_icon::before {
    display: none;
}

.slicknav_btn.slicknav_open .slicknav_icon::after {
    -webkit-transform: translateY(-1px) rotate(-90deg);
    transform: translateY(-1px) rotate(-90deg);
}

.slicknav_nav {
    padding-top: 20px;
}

.slicknav_nav ul {
    margin: 0;
}

.slicknav_nav a {
    color: var(--link-color) !important;
    border-radius: 0 !important;
}

.slicknav_nav .slicknav_row:hover,
.slicknav_nav a:hover,
.slicknav_nav a:hover a.aktiv,
.slicknav_nav a.aktiv:hover {
    background-color: var(--link-color-hover);
    color: var(--light-color) !important;
    text-decoration: none;
}

.slicknav_nav li>a {
    font-size: 1.2em;
}

.slicknav_nav a.aktiv {
    color: var(--link-color-hover);
}

.slicknav_item:hover>a {
    color: var(--light-color) !important;
}

.slicknav_nav .menu_level_2 {
    font-size: 0.9em;
}

.slicknav_nav .menu_level_3 {
    font-size: 0.9em;
}


/* Slider
------------------------------- */
.slider-container {
    overflow: hidden;
}

.slide-image img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.slick-slider .slick-prev {
    left: 15px;
    z-index: 1;
}

.slick-slider .slick-next {
    right: 15px;
    z-index: 2;
}

.slick-dots {
    bottom: 10px;
}


/* Slick dots personalization */
.slick-dots li button {
    width: 12px;
    height: 12px;
    border: none;
    border-radius: 100%;
    background-color: var(--light-color);
}

.slick-dots li button::before {
    content: none;
}

.slick-dots li.slick-active button {
    background-color: var(--light-color);
}


/* Arrow personalization */
.slick-prev,
.slick-next {
    height: auto;
}

.slick-prev {
    padding-right: 50px;
    padding-left: 20px;
}

.slick-next {
    padding-left: 50px;
    padding-right: 20px;
}

.slick-arrow {
    height: 100%;
}

.slick-prev::before,
.slick-next::before {
    content: '';
    font-family: none;
    font-size: 20px;
    line-height: 1;
    opacity: 1;
    display: block;
    border-top: 12px solid transparent;
    border-bottom: 12px solid transparent;
}

.slick-prev::before {
    border-right: 12px solid var(--light-color);
}

.slick-next::before {
    border-left: 12px solid var(--light-color);
}

.slick-prev:hover::before {
    border-right: 12px solid var(--primary-color)
}

.slick-next:hover::before {
    border-left: 12px solid var(--primary-color)
}


/* customization */
.slider-container,
.slider-container .slick-track,
.slider-container .slide-image {
    max-height: 70vh;
}

.slick-track {
    display: flex;
}

.slide-image {
    overflow: hidden;
    background-size: cover;
    color: white;
    height: inherit;
}

.slider-container .slide-image iframe {
    width: 105vw;
    height: calc(100vh * (16 / 9));
    top: 50%;
    left: 50%;
    position: absolute;
    pointer-events: none;
    transform: translate(-50%, -50%);
}

#content .slide-image iframe {
    width: 100%;
    height: 100%;
}

.slide-image .text_slide {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: rgba(0, 0, 0, 0.5);
}


/* Content
----------------------------------------------------------------- */
.content-container {
    margin-top: 50px;
    margin-bottom: 30px;
    flex: 1;
    /* overflow hidden for break-outs */
    overflow-x: hidden;
}


/* Partial Headers */
#content .frame-layout-10 header,
#content .frame-layout-20 header,
#content .frame-layout-30 header,
#content .frame-layout-40 header,
#content .frame-layout-50 header,
#content .frame-layout-60 header {
    display: none;
}


/* Lists */
#content ul,
#content ol {
    padding-left: 20px;
    margin: 0 0 10px;
}

#content ul {
    list-style-type: initial;
}


/* Tables */
#content table {
    margin: 20px 0;
}

#content table,
#content table th,
#content table td {
    border: 1px solid #666;
}

#content table th {
    padding: 20px 10px;
}

#content table td {
    padding: 10px;
}


/* Flexible iFrames
---------------------------------------------------------------------------------------------- */
#iframe-container {
    position: relative;
    height: 0;
    overflow: hidden;
    padding-top: 30px;
}

.youtube {
    padding-bottom: 56.25%;
}

.map {
    padding-bottom: 65%;
}

#iframe-container iframe,
#iframe-container object,
#iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Masonry
--------------------- */
/* ---- grid ---- */
.masonry-grid {
    width: 100%;
}


/* ---- grid-item ---- */
.masonry-grid-sizer,
.masonry-grid-item {
    width: 23.5%;
}

/* double width for landscape images */
/* .masonry-grid-item-width2 {
    width: 49%;
} */

.masonry-gutter-sizer {
    width: 2%;
}

.masonry-grid-item {
    margin-bottom: 20px;
    overflow: hidden;
}

.masonry-grid-item img {
    transition: all .2s ease-in-out;
}

.masonry-grid-item:hover img {
    transform: scale(1.1);
}


/* Forms */
form .form-group {
    margin: 15px 0px;
}

form .form-control {
    border-radius: var(--border-radius);
}

form textarea {
    min-height: 110px !important;
    max-height: 250px;
}

form .error {
    border-bottom: 2px solid var(--danger-color);
    /* box-shadow: 0 0 10px var(--danger-color); */
}

form .success {
    border-bottom: 2px solid var(--success-color);
    /* box-shadow: 0 0 10px var(--success-color); */
}


/* Hero */
.hero-container {
    position: relative;
    margin: 30px calc(50% - 50vw) !important;
    background-color: var(--bg-color-section, --dark-color);
    padding: 20px 0px;
}

.full-width {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.hero {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    gap: 30px;
}

.hero-reverse {
    flex-direction: row-reverse;
    justify-content: start;
}

.hero .hero-body {
    margin: auto;
    color: var(--font-color-section, --light-color);
    max-width: 50%;
}

.hero-full {
    width: 100vw;
    height: calc(100vh);
    text-align: center;
    background-size: cover;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
}

.hero-full .hero {
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.hero-full .hero-body {
    margin: auto;
    text-align: center;
    max-width: 100%;
    color: var(--light-color);
}

.hero h1,
.hero h2,
.hero h3 {
    color: var(--font-color-section, --light-color);
}

.hero .hero-icon-body {
    position: relative;
    margin-top: 60px;
}
.hero .hero-icon-body header {
    margin-bottom: 60px;
    max-width: 70%;
}

.hero .hero-icon {
    position: absolute;
    top: -45px;
    right: 0;
}

.hero-full .hero .hero-icon {
    position: relative;
    top: unset;
    margin-bottom: 30px;
}


/* Accordion */
.accordion {
    margin: 15px 0px;
    overflow: hidden;
}

.accordion.horizontal {
    display: flex;
}

.accordion-button {
    background-color: var(--primary-color-light) !important;
    color: var(--font-color) !important;
}

.accordion-item {
    background-color: transparent;
}

.accordion-item,
.accordion-button,
.accordion-collapse {
    border-radius: var(--border-radius);
}


/* Tabs */
.tab-container {
    overflow-x: hidden;
}

.tab-container ul.nav-tabs {
    border-bottom: 1px solid var(--primary-color-dark);
}

.tab-container li.nav-item {
    border: 1px solid var(--primary-color-dark)
}

.tab-container li.nav-item.ui-tabs-active {
    background-color: var(--primary-color-dark);
}

.tab-container li.nav-item.ui-tabs-active a {
    color: var(--light-color);
}

.tab-container .nav-item a {
    border-radius: var(--border-radius);
    color: var(--font-color);
}

.ui-tabs .ui-tabs-nav li:hover {
    background-color: var(--primary-color-light);
}

.tab-container li.nav-item:hover a {
    color: var(--font-color);
}

.tab-container .nav-tabs .nav-link {
    border: none;
}

.tab-container .nav-tabs {
    padding-left: 0px !important;
}

.tab-container .single-tab {
    padding-left: 0px;
}


/* Tabs vertical */
.tab-container.vertical-tabs-reverse,
.tab-container.vertical-tabs {
    display: flex;
}

.tab-container.vertical-tabs-reverse {
    flex-direction: row-reverse;
}

.tab-container.vertical-tabs-reverse .nav-tabs,
.tab-container.vertical-tabs .nav-tabs {
    display: flex;
    flex-direction: column;
    margin-top: 20px;
    padding: 0px;
    z-index: 1;
}

.tab-container.vertical-tabs .nav-tabs {
    border-bottom: 0px;
    border-right: 1px solid var(--primary-color-dark);
    margin-right: 20px;
}

.tab-container.vertical-tabs .nav-tabs li {
    border: 1px solid var(--primary-color-dark);
    margin: 0;
}

.tab-container.vertical-tabs-reverse .nav-tabs {
    border-bottom: 0px;
    border-left: 0px;
    border-left: 1px solid var(--primary-color-light);
}

.tab-container.vertical-tabs-reverse ul li,
.tab-container.vertical-tabs-reverse ul li a,
.tab-container.vertical-tabs ul li,
.tab-container.vertical-tabs ul li a {
    width: 100%;
}

.tab-container.vertical-tabs-reverse .single-tab,
.tab-container.vertical-tabs .single-tab {
    width: 100%;
    padding-left: 1.4em;
}




/* Animations on scroll */
.content-container .frame,
.content-container .card,
/* .content-container .separator, */
.content-container .accordion,
.content-container .masonry-grid,
.content-container .ce_slider,
.content-container .alert,
.content-container .tile-container,
.content-container .btn-modal,
.content-container .article-item,
.content-container .tab-container {
    opacity: 0;
    filter: blur(5px);
    transform: translateX(-20%);
    transition: all 1s;
}

.content-container .show {
    opacity: 1;
    filter: blur(0);
    transform: translateX(0);
}


/* Tile */
.tile-container {
    /* width: 500px; */
    height: 500px;
    overflow: hidden;
    margin: 20px 0px;
}

.tile {
    height: 100%;
    width: 100%;
    position: relative;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
}

.tile .tile-img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    transition: all var(--transition-duration);
}

.tile .tile-content {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0, 0, 0, 0.2);
    transition: all var(--transition-duration);
    flex-direction: column;
    gap: 20px;
}

.tile.tile-link:hover>.tile-img {
    transform: scale(1.1);
}

.tile a:hover {
    background-color: rgba(0, 0, 0, 0.4);
    text-decoration: none;
}

.tile .tile-title {
    display: block;
    font-size: 30px;
    color: white;
    height: max-content;
}

.tile .tile-subtitle {
    display: block;
    font-size: 20px;
    color: white;
    height: max-content;
}


/* Dividers */
.text-divider {
    display: flex;
    align-items: center;
    --text-divider-gap: 1rem;
}

.text-divider::before,
.text-divider::after {
    content: '';
    height: 1px;
    background-color: silver;
    flex-grow: 1;
}

.text-divider::before {
    margin-right: var(--text-divider-gap);
}

.text-divider::after {
    margin-left: var(--text-divider-gap);
}

.custom-shape-container {
    --height-wave: 300px;
    padding-top: var(--height-wave);
}

.custom-shape-divider-top {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-top svg {
    position: relative;
    display: block;
    width: calc(130% + 1.3px);
    height: var(--height-wave);
}

.custom-shape-divider-top .shape-fill {
    fill: var(--dark-color);
}

.custom-shape-divider-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom svg {
    position: relative;
    display: block;
    width: calc(130% + 1.3px);
    height: var(--height-wave);
}

.custom-shape-divider-bottom .shape-fill {
    fill: var(--dark-color);
}


/* FIltrabe gallery*/
.filterable-gallery {
    display: grid;
    grid-template-columns: repeat(3, 33%);
    gap: 15px;
}

.filterable-gallery .single-image {
    width: 100%;
}

.filterable-gallery .single-image:hover {
    -webkit-animation: blur-effect 0.5s;
    animation: blur-effect 0.5s;
}

@-webkit-keyframes blur-effect {
    0% {
        -webkit-filter: blur(0);
        filter: blur(0);
    }

    50% {
        -webkit-filter: blur(2px);
        filter: blur(5px);
    }

    100% {
        -webkit-filter: blur(0);
        filter: blur(0);
    }
}

@keyframes blur-effect {
    0% {
        filter: blur(0);
    }

    50% {
        filter: blur(2px);
    }

    100% {
        filter: blur(0);
    }
}

.filterable-gallery.filter-active .gallery-item {
    display: none;
}

.filterable-gallery.filter-active .gallery-item.image-active {
    display: block;
}

.filter-list {
    margin-bottom: 20px;
}

.filter {
    margin-bottom: 50px;
}

/* Quotes */
.quote_container .slick-next::before {
    border-left-color: var(--primary-color-dark);
}

.quote_container .slick-prev::before {
    border-right-color: var(--primary-color-dark);
}

.otro-blockquote {
    width: 60%;
    margin: 50px auto;
    font-style: italic;
    color: var(--light-color);
    padding: 1.2em 30px 1.2em 75px;
    border-left: 8px solid var(--primary-color);
    line-height: 1.6;
    position: relative;
    background: var(--primary-color-dark);
}

.otro-blockquote::before {
    font-family: Arial;
    content: "\201C";
    color: var(--primary-color);
    font-size: 4em;
    position: absolute;
    left: 10px;
    top: -10px;
}

.otro-blockquote::after {
    content: '';
}

.otro-blockquote span {
    display: block;
    color: var(--light-color);
    font-style: normal;
    font-weight: bold;
    margin-top: 1em;
}



/*Separator */
.separator {
    height: 150px;
    background-size: cover;
    background-attachment: fixed;
    margin: 30px 0 50px;
}

.tilted {
    clip-path: polygon(100% 20%, 100% 100%, 0 80%, 0 0);
}

/* Extend https://wave.novoselski.net/ */
.wave {
    clip-path: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%);
    shape-outside: polygon(0% 0%, 0% 82.5%, 1.69492% 84.3293%, 3.38983% 86.1385%, 5.08475% 87.9078%, 6.77966% 89.6179%, 8.47458% 91.25%, 10.1695% 92.7862%, 11.8644% 94.2098%, 13.5593% 95.505%, 15.2542% 96.6578%, 16.9492% 97.6555%, 18.6441% 98.487%, 20.339% 99.1435%, 22.0339% 99.6176%, 23.7288% 99.9041%, 25.4237% 100%, 27.1186% 99.9041%, 28.8136% 99.6176%, 30.5085% 99.1435%, 32.2034% 98.487%, 33.8983% 97.6555%, 35.5932% 96.6578%, 37.2881% 95.505%, 38.9831% 94.2098%, 40.678% 92.7862%, 42.3729% 91.25%, 44.0678% 89.6179%, 45.7627% 87.9078%, 47.4576% 86.1385%, 49.1525% 84.3293%, 50.8475% 82.5%, 52.5424% 80.6708%, 54.2373% 78.8616%, 55.9322% 77.0922%, 57.6271% 75.3821%, 59.322% 73.75%, 61.017% 72.2138%, 62.7119% 70.7902%, 64.4068% 69.495%, 66.1017% 68.3422%, 67.7966% 67.3446%, 69.4915% 66.513%, 71.1864% 65.8565%, 72.8814% 65.3824%, 74.5763% 65.0959%, 76.2712% 65%, 77.9661% 65.0959%, 79.661% 65.3824%, 81.3559% 65.8565%, 83.0509% 66.513%, 84.7458% 67.3446%, 86.4407% 68.3422%, 88.1356% 69.495%, 89.8305% 70.7902%, 91.5254% 72.2138%, 93.2203% 73.75%, 94.9153% 75.3821%, 96.6102% 77.0922%, 98.3051% 78.8616%, 100% 80.6708%, 100% 0%);
}

.arrow-down {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), 50% 100%, 0 calc(100% - 50px));
}

/* Custom Classes */
.demo-card img {
    padding: 40px 150px;
}

#content>.row {
    margin-top: 70px;
    margin-bottom: 70px;
}


/* Socials */
.social-container ul {
    display: flex;
    list-style-type: none !important;
    gap: 15px;
    padding: 0 !important;
}

.social-container ul li {
    width: max-content;
}

.social-container.vertical ul {
    flex-direction: column;
}

.social-container.horizontal ul {
    flex-direction: row;
}

.social-icon {
    max-height: 64px;
    transition: all 0.1s ease;
}

.social-icon img {
    height: 30px;
    width: auto;

}

.social-container ul li a {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* .social-container ul li:hover .social-icon {
    transform: rotate(25deg);
} */


/* modal */
.modal-content {
    overflow: hidden;
}


/* gallery */
.gallery-container {
    --gap: 10px;
    --gallery-rows: 3;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}

.gallery-container a {
    flex-basis: max(200px, calc(100% / var(--gallery-rows) - var(--gap) / 2 - (var(--gallery-rows) - 1) * 1px));
}


/*Text & Bilder */
.text-bilder-container.gallery-top {
    --flex-direction-gallery: column-reverse;
    --flex-basis-size: 100%;
    --flex-padding: 0 0 0 0;
    --max-width-flex: 100%;
}

.text-bilder-container.gallery-bottom {
    --flex-direction-gallery: column;
    --flex-basis-size: 100%;
    --flex-padding: 0 0 0 0;
    --max-width-flex: 100%;
}

.text-bilder-container.gallery-left {
    --flex-direction-gallery: row-reverse;
    --flex-basis-size: 50%;
    --flex-padding: 0 0 0 20px;
    --max-width-flex: 50%;
}

.text-bilder-container.gallery-right {
    --flex-direction-gallery: row;
    --flex-basis-size: 50%;
    --flex-padding: 0 20px 0 0;
    --max-width-flex: 50%;
}

/* Text Bilder Position */
#content>.text-bilder-container {
    padding: 100px 0;
}

.text-bilder-container {
    /* max-width: 800px; */
    background-color: var(--bg-color-section);
    color: var(--font-color-section);
    clip-path: inset(0 -100vmax);
    box-shadow: 0 0 0 100vmax var(--bg-color-section);
    display: flex;
    flex-direction: var(--flex-direction-gallery);

}

.text-bilder-container.start {
    margin-left: 0;
    align-self: start;
}

.text-bilder-container.end {
    margin-left: auto;
    align-self: end;
}

.text-bilder-container.center {
    margin-left: auto;
    margin-right: auto;
}

/*Text Bilder Alignement */
.text-bilder-container.text-left {
    text-align: left;
}

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

.text-bilder-container.text-center {
    text-align: center;
}

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

.text-bilder-container .text-bilder-gallery {
    flex-basis: calc(100% - var(--flex-basis-size));
    max-width: calc(0% + var(--max-width-flex));
}

.text-bilder-container .text-bilder-body {
    flex-basis: var(--flex-basis-size);
}

.text-bilder-container .text-bilder-body {
    padding: var(--flex-padding);
}

/* Image full width & height */
.text-bilder-container .text-bilder-gallery .gallery-container {
    height: 100%;
}




/* Footer
----------------------------------------------------------------- */
.footer-container {
    position: relative;
    bottom: 0;
    background-color: var(--primary-color-light);
    padding-top: 30px;
    padding-bottom: 30px;
    font-size: 0.8em;
    line-height: 1.2em;
}

#footer h1 {
    font-size: 1.5em;
}

/* #footer img {
    max-width: 120px;
    min-width: 35px;
    padding-bottom: 15px;
} */



/*  @media, media-queries
---------------------------------------------------------------------------------------------------------------------------------------- */

/*  @media: Breakpoint Large (lg)»
---------------------------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .slider-container .slide-image iframe {
        width: calc(100vh * (16 / 9));
        height: 100%;
    }
}

/* end @media - Breakpoint Large (lg)» */


/*  @media: Breakpoint «Medium (md)»
---------------------------------------------------------------------------------------------- */
@media (max-width: 991.98px) {

    .hero {
        flex-direction: column;
    }

    .hero .hero-body {
        max-width: 100%;
    }

    .hero .hero-body,
    .hero .hero-image {
        padding: 0 12px;
    }

    .masonry-grid-sizer,
    .masonry-grid-item,
    .masonry-grid-item-width2 {
        width: 49%;
    }

    .filterable-gallery {
        display: grid;
        grid-template-columns: repeat(2, 50%);
        gap: 15px;
    }

    .text-bilder-container {
        flex-direction: column;
    }

    .text-bilder-container .text-bilder-gallery {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* end @media - Breakpoint «Medium (md)» */


/*  @media: Breakpoint «Small (sm)»
---------------------------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .ce-gallery {
        display: block;
        width: 100%;
    }

    .ce-gallery figure {
        margin: 0 auto;
    }
}

/* end @media - Breakpoint «Small (sm)» */


/*  @media: Breakpoint «X-Small (xs)»
---------------------------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .filterable-gallery {
        display: grid;
        grid-template-columns: repeat(1, 100%);
        gap: 15px;
    }
}

/* end @media - Breakpoint «X-Small (xs)» */