/* Raleway-500 - latin */
@font-face {
    font-family: 'Raleway';
    src: url('../Fonts/Raleway-Medium.eot');
    src: url('../Fonts/Raleway-Medium.eot?#iefix') format('embedded-opentype'),
        url('../Fonts/Raleway-Medium.woff2') format('woff2'),
        url('../Fonts/Raleway-Medium.woff') format('woff'),
        url('../Fonts/Raleway-Medium.ttf') format('truetype'),
        url('../Fonts/Raleway-Medium.svg#Raleway-Medium') format('svg');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Raleway';
    src: url('../Fonts/Raleway-Bold.eot');
    src: url('../Fonts/Raleway-Bold.eot?#iefix') format('embedded-opentype'),
        url('../Fonts/Raleway-Bold.woff2') format('woff2'),
        url('../Fonts/Raleway-Bold.woff') format('woff'),
        url('../Fonts/Raleway-Bold.ttf') format('truetype'),
        url('../Fonts/Raleway-Bold.svg#Raleway-Bold') format('svg');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}


  
html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    margin: 0;
    outline: 0 none;
    padding: 0;
    vertical-align: baseline;
    font-family: 'Raleway', sans-serif;
    font-weight: 500;
}

h1,
h2,
h3,
h4,
h5,
h6
{
    font-size: initial;
}


body {
    background-color: #FCF4E9;
    font-family: 'Nunito', sans-serif;
    height: 100%;
	width: 100%;
	float: left;
	min-height:100vh;
	margin: 0;
	padding: 0;
    -webkit-text-size-adjust:none;
    -moz-text-size-adjust:none;
    -ms-text-size-adjust:none;
    -webkit-text-size-adjust:100%;
    -moz-text-size-adjust:100%;
    -ms-text-size-adjust:100%;
    hyphens: auto;
}

a
{
    text-decoration: none;
    color: #0D0D0D;
}

table{
    width: 100%!important;
}

.full-width
{
    width: 100%;
}

.max-width,
.frame-type-header,
.frame-type-uploads,
.frame-type-text,
.frame-type-textpic
{
    max-width: 1440px;
    margin: 0 auto;
    padding-left: 5em;
    padding-right: 5em;
}

.frame-type-header,
.frame-type-uploads,
.frame-type-text,
.frame-type-textpic
{
    margin-bottom: 4rem;
}

#main-bottom-container .max-width,
#main-bottom-container .frame-type-header,
#main-bottom-container .frame-type-uploads,
#main-bottom-container .frame-type-text,
#main-bottom-container .frame-type-form_formframework,
#main-bottom-container .news-related-files,
#main-main-content-container .max-width,
#main-main-content-container .frame-type-header,
#main-main-content-container .frame-type-uploads,
#main-main-content-container .frame-type-text,
#main-main-content-container .frame-type-textpic,
#main-main-content-container .frame-type-form_formframework,
#main-main-content-container .news-related-files,
#main-main-2-content-container .max-width,
#main-main-2-content-container .frame-type-header,
#main-main-2-content-container .frame-type-uploads,
#main-main-2-content-container .frame-type-text,
#main-main-2-content-container .frame-type-form_formframework,
#main-main-2-content-container .news-related-files,
#main-header-content .news-related-files
{
    padding-left: 0;
    padding-right: 0;
}

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

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

.hidden
{
    display: none;
}


/* ############################################              Navigation          ############################################## */

/* ############################################              Main-Navigation          ############################################## */

#main-navigation
{

}
#main-navigation-container
{

}
#main-navigation-content
{
}
#main-navigation-content-list
{

}
.main-navigation-content-list
{
    list-style: none;
}
.main-navigation-item
{
    text-decoration: none;
    display: inline-block;
    margin: 0.5em 2em 0 0;
    font-weight: 600;
    color: rgb(31,41,55);
}
.main-navigation-item.active
{
    color: rgb(221,11,47);    
}


/* ############################################              Main-Navigation End          ############################################## */



/* ############################################              Mobile-Navigation          ############################################## */

.menu-closed
{
    /* display: none; */
}

#mobile-navigation
{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    max-width: 30rem;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    transition: all .3s;
    margin: 0;
    padding: 0;
    border-left: 2.5px solid black;
}

#mobile-navigation.menu-open
{
    background-color: #FCF4E9;
    transition: all .3s;
}

#mobile-navigation.menu-closed
{
    opacity: 0;
    left: 100%;
}

#mobile-navigation-container
{
    position: relative;
    width: 100%;
    height: 100%;
}

#mobile-navigation-content
{
    display: grid;
	justify-content: center;
	justify-items: center;
	align-items: start;
	grid-template-columns: 1fr;
    grid-template-rows: 9em auto;
	column-gap: 1em;
    width: 100%;
    height: 100%;
    row-gap: 1rem;
}

#mobile-navigation-content-top
{
    display: grid;
    justify-content: center;
    justify-items: stretch;
    align-items: center;
    grid-template-columns: 6fr 1fr;
    column-gap: 1em;
    height: 9em;
    width: 85%;
}

#mobile-navigation-content-bottom
{
    height: auto;
    width: 85%;
    padding-bottom: 0.5rem;
}


#mobile-navigation-close-button-container
{
    position: absolute;
    right: 0;
    top: 0;
    margin: 2em 5rem 0 0;
}

#mobile-navigation-close-button-content
{
    float: lefr;
    background-image: url("../Images/x-solid.svg");
    height: 2em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}


#top-logo-mobile
{
    justify-self: center;
}
#top-logo-mobile-container
{

}
#top-logo-mobile-content
{
    float: left;
    width: 6em;
    background-image: url("../Images/logo-maximator-hydrogen-color-V01.svg");
    height: 4em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0.1em;
}
#top-logo-mobile-content-link
{

}


.mobile-navigation-content-list
{
    display: grid;
	justify-content: center;
	justify-items: start;
	align-items: center;
	grid-template-columns: 1fr;
	column-gap: 1em;
    width: 100%;
    height: 100%;
    list-style: none;
    width: 100%;
    row-gap: 0.5rem;
}

.mobile-nav-item-top
{
    width: 83.999%;
    border-radius: 2rem;
    padding: 8%;
    height: auto;
    overflow: hidden;
}

.mobile-nav-item-top.accordion-closed
{
    animation: mobile-menu-acordion-close 0.3s ease-in-out;
    max-height: 2rem;
}
.mobile-nav-item-top.accordion-open
{
    animation: mobile-menu-acordion-open 0.3s ease-in-out;
    max-height: 100rem;
}

@keyframes mobile-menu-acordion-open {
    0%
    {
        max-height: 2rem;
    }
    10%
    {
        max-height: 5rem;
    }
    90%
    {
        max-height: 15rem;
    }
    100%
    {
        max-height: 100rem;
    }
}
@keyframes mobile-menu-acordion-close {
    0%
    {
        max-height: 100rem;
    }
    10%
    {
        max-height: 15rem;
    }
    90%
    {
        max-height: 5rem;
    }
    100%
    {
        max-height: 2rem;
    }
}

.mobile-nav-item-top-style-title-wie
{
    background-color: #C9ECC6;    
}
.mobile-nav-item-top-style-title-wir
{
    background-color: #FACCD1;
    
}
.mobile-nav-item-top-style-title-das
{
    background-color: #FFFFB4;
    
}
.mobile-nav-item-top-style-title-machen
{
    background-color: #FF8080;
    
}

.mobile-nav-link-top
{
    font-weight: 700;
    font-size: 2rem;
    text-transform: uppercase;
    margin: 0 0 3rem 0;
    display: block;
}

.mobile-nav-link-top::after
{
    content: "+";
    display: inline;
    position: relative;
    width: 1rem;
    height: 1rem;
    margin: 0rem 0.5rem 0 0;
    float: right;
}

.mobile-nav-item-top.accordion-closed .mobile-nav-link-top::after
{
    content: url(../Icons/acordeon_plus.svg);
}
.mobile-nav-item-top.accordion-open .mobile-nav-link-top::after
{
    content: url(../Icons/acordeon_minus.svg);
}


.mobile-navigation-content-list-sub
{
    list-style-type: none;    
}

.mobile-nav-item-sub
{
    margin: 1.5rem 0;
    display: block;
    font-size: 1.5rem;
}

.mobile-nav-link-sub.current
{
    text-decoration: underline;
}

#login-link-language-menu-mobile
{
    display: grid;
    justify-content: start;
    justify-items: stretch;
    align-items: center;
    grid-template-columns: auto auto;
    column-gap: 1em;
    height: 9em;
    width: 100%;
}
#contact-link-mobile-container
{

}
#contact-link-mobile-content-link
{

}
#contact-link-mobile-content
{
    border: #000 2px solid;
    padding: 0.3em 0.5em;
    border-radius: 10em;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
}

#nav-button
{
    display: block;
}

#nav-button-container
{
    width: 100%;
    display: grid;
    justify-content: center;
    justify-items: end;
    align-items: center;
    grid-template-columns: 1fr;    
}

#nav-button-logo
{
    width: 100%;
    display: grid;
    justify-content: center;
    justify-items: center;
    align-items: center;
    grid-template-columns: 1fr;
    row-gap: 0.8rem;
    width: 3rem;
    margin: 1rem 0 0 0;
}

#nav-button-close-logo
{
    width: 100%;
    display: grid;
    justify-content: center;
    justify-items: center;
    align-items: center;
    grid-template-columns: 1fr;
    row-gap: 0.8rem;
    width: 3rem;
    margin: 2rem 0 0 0;
}

#nav-button-bar
{
    width: 100%;
    height: 0.2rem;
    background-color: black;
}

.top-close-bar,
.bottom-close-bar
{
    width: 100%;
    height: 0.2rem;
    background-color: black;
}

.top-close-bar
{
    transform-origin: center;
    transform: rotateZ(45deg) translate(0.5rem, 0.5rem);
}
.bottom-close-bar
{
    transform-origin: center;
    transform: rotateZ(-45deg) translate(0.2rem, -0.2rem);
}


.top-bar
{

}
.middle-bar
{

}
.bottom-bar
{

}


#nav-button-text
{
    display: none;
}

#language-navigation-container
{
    position: relative;
    display: grid;
    justify-content: center;
    justify-items: center;
    align-items: center;
    grid-template-columns: 1fr;
}
#language-navigation-button-background
{
    padding: 0 0 0 2.5rem;
}

#language-navigation-button-background::before
{
    content: "";
    width: 2em;
    height: 1.9em;
    background-image: url("../Images/language-navigation-button.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    position: absolute;
    left: 0;
}

.language-navigation-link-content
{
    font-size: 1.5rem;
    font-weight: 700;
}

#login-link-language-menu-mobile
{

}
#language-navigation-button
{
    text-decoration: underline;
    padding: 0.3em 0.5em;
    border-radius: 10em;
    font-size: 1.5rem;
    font-weight: 700;
    text-align: center;
}


/* ############################################              Mobile-Navigation End          ############################################## */




/* ############################################              Breadcrumb-Navigation           ############################################## */

#breadcrumb-container
{
    margin: 9em 0 0;
    width: 100%;
    position: fixed;
    z-index: 1;
}

#breadcrumb-content > nav {
    padding: 0.5em;
}

.breadcrumb-item
{
    text-decoration: none;
    display: inline-block;
    margin: 0 0.1em 0 0;
    font-weight: 400;
    padding: 0.5rem 0.2rem;
}
.breadcrumb-link::before
{
    color: #000;
}
.breadcrumb-link.active
{
    color: #000;
    font-size: 3rem;
    font-weight: 600;
}

/* ############################################              Breadcrumb-Navigation End          ############################################## */




/* ############################################              Footer Main-Navigation          ############################################## */

#footer-main-navigation-container
{
    width: 100%;
}
#footer-main-navigation-content
{
    width: 100%;
}
.footer-main-navigation-content-list
{
    display: grid;
    justify-content: center;
    justify-items: center;
    align-items: start;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    list-style: none;
    column-gap: 1.1rem;
}
.footer-main-navigation-item
{
    width: 100%;
    text-decoration: none;
    display: inline-block;
    margin: 0;
    font-weight: 600;
    color: rgb(31,41,55);
}
.footer-main-navigation-link
{
    margin: 0 0 1.1rem 0;
    padding: 0 0 0.7rem 0;
    display: block;
    border-bottom: 4px solid bisque;
    font-size: 1.5rem;
    text-transform: uppercase;
}
.footer-main-navigation-content-sub-list
{
    list-style: none;
}
.footer-main-navigation-sub-item 
{
    margin: 0 0 1.4rem 0;
}
.item-style-title-wie
{
    border-color: #C9ECC6;
}
.item-style-title-wie-active
{
    color: #C9ECC6;
}
.item-style-title-wir
{
    border-color: #FACCD1;    
}
.item-style-title-wir-active
{
    color: #FACCD1;
}
.item-style-title-das
{
    border-color: #FFFFB4;    
}
.item-style-title-das-active
{
    color: #FFFFB4;
}
.item-style-title-machen
{
    border-color: #FF8080;    
}
.item-style-title-machen-active
{
    color: #FF8080;
}

/* ############################################          Footer Main-Navigation END     ############################################## */


/* ############################################              Footer-Navigation          ############################################## */


#footer-navigation
{
    justify-self: start;
}
#footer-navigation-container
{
    width: 100%;
}
#footer-navigation-content
{
    width: 100%;
    display: grid;
    justify-content: center;
    justify-items: center;
    align-items: center;
    grid-template-columns: 1fr;
}
.footer-navigation-content-list
{
    list-style: none;
}
.footer-navigation-item
{
    text-decoration: none;
    display: inline-block;
    margin: 0 1em 0 0;
}

.footer-navigation-link
{
    color: #0D0D0D;
    text-decoration: underline;
}


/* ############################################              Footer-Navigation End          ############################################## */

.hover-navigation-link
{
    transition-property: color;
    transition-duration: .4s;
}
.hover-navigation-link:hover
{
    color: rgb(87, 87, 87);
    transition-property: color;
    transition-duration: .4s;
}
.hover-navigation-link:hover::after,
.language-navigation-link-container:hover .hover-navigation-link::after
{
    width: 100%;
    transition: width .3s;
}
#contact-link-mobile-content.hover
{
    transition-property: color,background;
    transition-duration: .4s;
}
#contact-link-mobile-content.hover:hover
{
    transition-property: color,background;
    transition-duration: .4s;
    color: #fff;
    background-color: #000;
}

/* ############################################              Navigation End          ############################################## */


/* ############################################              Header          ############################################## */

#header
{
    position: fixed;
    width: 100%;
    z-index: 10;
    hyphens: none;
    background-color: #FCF4E9;
}

.header-visible
{

}

#header-container
{
    margin: 0 auto;
}
#header-content
{
    display: grid;
	justify-content: center;
	justify-items: stretch;
	align-items: center;
	grid-template-columns: 1fr 1fr 1fr;
	column-gap: 2em;
    height: 9em;
}
#header-opening-hours-container
{
    width: 100%;
    white-space: nowrap;
}
#header-opening-hours-content
{
    font-size: 1.5rem;
}
#opening-hours-text
{

}
#opening-hours-indicator
{
    margin: 0.5rem 0 0 0;
}
#opening-hours-indicator p
{
    font-weight: 700;
    display: inline;
}
#opening-hours-indicator p::after
{
    content: "";
    position: absolute;
    height: 1rem;
    width: 1rem;
    margin: 0.42rem 0.8rem;
    border-radius: 2rem;
}
#opening-hours-indicator p.opening-open::after
{
    background-color: #89D383;
}
#opening-hours-indicator p.opening-soon::after
{
    background-color: #FFCF8E;
}
#opening-hours-indicator p.opening-closed::after
{
    background-color: #FF5241;
}

#top-logo
{
    width: 100%;
}
#top-logo-container
{
    width: 100%;
    display: grid;
	justify-content: center;
	justify-items: center;
	align-items: center;
	grid-template-columns: 1fr;
}
#top-logo-content
{
    background-image: url("../Images/supercoop_logo_org.svg");
    width: 22em;
    height: 4em;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

/* ############################################              Header END          ############################################## */


/* ############################################              Main          ############################################## */

main {
    min-height: 50vh;
    position: relative;
    overflow: hidden;
    margin: 6em 0 0;
}

#breadcrumb-container:has(nav) + main {
  margin: 16em 0 0;
}

.frame-layout-0.frame-type-header h2
{
    font-size: 3em;
    margin-bottom: 1.5rem;
    font-weight: 700;
}
.frame-layout-1.frame-type-header h2
{
    font-size: 2em;
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-align: center;
}
#main-header-content .frame-layout-1
{
    background-color: #efefef;
    padding: 4em 0;
}

.frame-layout-1 header{
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 5em;
}
.frame-layout-1 h2
{
    font-size: 2em;
    margin-bottom: 3.5rem;
    font-weight: 700;
    text-align: center;
    color: #000;
}

.frame-layout-3.frame-type-header
{
    padding: 1em;
    text-align: center;
    background: rgb(30,74,154);
    background: linear-gradient(90deg, rgba(30,44,92,1) 0%, rgba(30,44,92,1) 24%, rgba(50,74,154,1) 100%);
}

#main-header-container .frame-layout-3.frame-type-header
{
    max-width: none;
}

.frame-layout-3.frame-type-header h2
{
    font-weight: 400;
    color: #fff;
}

.frame-type-div
{
    clear: both;
}

.frame-type-div hr
{
    display: none;
}

.frame-type-div.frame-layout-0
{
    box-shadow: 0 -6px 5px 0 rgb(242, 242, 242);
    background-color: rgb(255,255,255);
    display: block;
    height: 4em;
    position: relative;
    width: 100%;
    transform: translateX(0) translateY(0) translateZ(0) rotate(0) rotateX(0) rotateY(0) rotate(0) skewX(0) skewY(-3deg) scaleX(1) scaleY(1) scaleZ(1);
    margin: 2em 0;
}

.frame-type-div.frame-layout-2
{
    box-shadow: 0 -6px 5px 0 rgb(242, 242, 242);
    background-color: rgb(255,255,255);
    display: block;
    height: 4em;
    position: relative;
    width: 100%;
    transform: translateX(0) translateY(0) translateZ(0) rotate(0) rotateX(0) rotateY(0) rotate(0) skewX(0) skewY(3deg) scaleX(1) scaleY(1) scaleZ(1);
    margin: 2em 0;
}

.frame-type-list
{

}

.frame-type-list header
{
    margin-bottom: 3em;
}

.frame-type-list.frame-layout-0 h2
{
    font-size: 2em;
    margin-bottom: .5em;
    font-weight: 700;
    color: #000;
    text-align: left;
}

.frame-type-list h3
{
    font-weight: 500;
    font-size: 1.1em;
}


/* ############################################              Content Element: TEXT          ############################################## */

.frame-type-text
{

}

.frame-type-text header
{
}

.frame-type-text header h2
{
    margin-bottom: 3rem;
    color: #000;
    font-size: 3rem;
    font-weight: 600;
}

.frame-type-text p
{
    font-size: 2rem;
    line-height: 2.8rem;
    margin: 0 0 1.25em 0;
}

.frame-type-text h1
{
    font-weight: 700;
    line-height: 1.3em;
    font-size: 2.2em;
    margin-bottom: 2rem;
}

.frame-type-text h2
{
    margin-bottom: 1.5em;
    color:#000;
    font-size: 3em;
    font-weight: 700;
}
.frame-type-text h2 span
{
    font-weight: 700;
}

.frame-type-text h3
{
    font-size: 1.5em;
    margin: .5em 0;
    font-weight: 600;
    line-height: 1.25;
    color: #333;
}

.frame-type-text h4
{
    margin: .5em 0;
}

.frame-type-text.frame-layout-0
{

}


/* ############################################              Content Element: TEXT END          ############################################## */



/* ############################################              Content Element: TEXTPIC           ############################################## */


.frame-type-textpic header h2
{
    margin-bottom: 3rem;
    color: #000;
    font-size: 3rem;
    font-weight: 600;
}

.frame-type-textpic p
{
    font-size: 2rem;
    line-height: 2.8rem;
    margin: 0 0 1.25em 0;
}

.frame-type-textpic figure
{
    width: 100%;
    margin: 0;
    padding: 0;
}
.frame-type-textpic img
{
    width: 100%;
    height: auto;
}
figcaption
{
    margin: 0 0 2rem 0;
}

/* ############################################              Content Element: TEXTPIC END       ############################################## */

/* ############################################              Content Element: FAQ Tile         ############################################## */

.tile_category-0
{
    background-color: #C9ECC6;
}
.tile_category-1
{
    background-color: #FACCD1;
}
.tile_category-2
{
    background-color: #FFFFB4;
}
.tile_category-3
{
    background-color: #FF8080;
}

.supercoop_faq_plugin_container
{
    width: 100%;
    margin: 3rem 0;
}
.supercoop_faq_plugin_content
{
    width: 100%;
}
.supercoop_faq_plugin_content_tiles_container
{
    width: 100%;
}
.supercoop_faq_plugin_content_tiles_content
{
    width: 100%;
    display: grid;
	justify-content: center;
	justify-items: center;
	align-items: center;
    grid-template-columns: 1fr;
    row-gap: 1rem;
    height: auto;
}

.supercoop_faq_plugin_content_tile_container
{
    width: 100%;
    border-radius: 2.5rem;
    position: relative;
    height: auto;
}

.supercoop_faq_plugin_content_tile_content
{
    padding: 2.5rem;
    display: grid;
	justify-content: center;
	justify-items: start;
	align-items: center;
    grid-template-columns: 1fr;
    height: auto;
    overflow: hidden;
}

.supercoop_faq_plugin_content_tile_content.accordion-closed
{
    animation: mobile-menu-acordion-close 0.3s ease-in-out;
    max-height: auto;
}
.supercoop_faq_plugin_content_tile_content.accordion-open
{
    animation: mobile-menu-acordion-open 0.3s ease-in-out;
    max-height: 100rem;
}

.tile_type-faq
{

}
.supercoop_faq_plugin_content_tile_content_faq_question
{
    font-size: 1.5rem;
    font-weight: 700;
    width: 95%;
}
.supercoop_faq_plugin_content_tile_content.accordion-closed .supercoop_faq_plugin_content_tile_content_faq_question::after
{
    content: url(../Icons/acordeon_plus.svg);
}
.supercoop_faq_plugin_content_tile_content.accordion-open .supercoop_faq_plugin_content_tile_content_faq_question::after
{
    content: url(../Icons/acordeon_minus.svg);
}
.supercoop_faq_plugin_content_tile_content_faq_question::after
{
    content: "";
    display: inline;
    position: absolute;
    width: 1rem;
    height: 1rem;
    margin: 0rem 0.5rem 0 0;
    float: right;
    right: 2.5rem;
    top: 2.5rem;
}
.supercoop_faq_plugin_content_tile_content_faq_answer
{
    padding-top: 1.5rem;
}
.accordion-closed .supercoop_faq_plugin_content_tile_content_faq_answer
{
    opacity: 0;
    animation: faq-acordion-close 0.3s ease-in-out;
    display: none;
}
.accordion-open .supercoop_faq_plugin_content_tile_content_faq_answer
{
    opacity: 1;
    animation: faq-acordion-open 0.3s ease-in-out;
}

@keyframes faq-acordion-open {
    0%
    {
        opacity: 0;
    }
    10%
    {
        opacity: 0;
    }
    90%
    {
        opacity: 0.9;
        display: none;
    }
    100%
    {
        opacity: 1;
        display: block;
    }
}
@keyframes faq-acordion-close {
    0%
    {
        opacity: 1;
        display: block;
    }
    10%
    {
        opacity: 0.9;
        display: none;
    }
    90%
    {
        opacity: 0;
    }
    100%
    {
        opacity: 0;
    }
}
.supercoop_faq_plugin_content_tile_content_faq_category
{

}
/* ############################################              Content Element: FAQ Tile END     ############################################## */

/* ############################################               PAGE TEMPLATES           ############################################## */

#main-container
{

}

#main-content
{

}

#main-header-container
{

}

#main-header-content
{

}
#main-center-section-container,
#main-center-section-container-2
{

}

#main-center-section-content,
#main-center-section-content-2
{
    width: 100%;
    display: grid;
	justify-content: center;
	justify-items: center;
	align-items: center;
    grid-template-columns: 1fr;
    column-gap: 3em;
}

#main-main-content-container,
#main-main-2-content-container
{
    width: 100%;
    max-width: 60rem;
}

#main-main-content-content,
#main-main-2-content-content
{
    width: 100%;
}

#main-right-sidebar-container,
#main-right-2-sidebar-container
{
    align-self: baseline;
    justify-self: center;
    max-width: 340px;
    font-size: .9em;
}

#main-right-sidebar-content
{

}

#main-bottom-container
{

}

#main-bottom-content
{

}


/* ############################################               PAGE TEMPLATES END         ############################################## */

/* ############################################              CONTENT ELEMENTS           ############################################## */




/* ############################################              CONTENT ELEMENTS END           ############################################## */


/* ############################################              Main END          ############################################## */


/* ############################################              Footer          ############################################## */

#footer
{
    background: none;
    position: absolute;
    bottom: 0;
    color: #fff;
    padding-top: 3.5em;
    font-size: 1em;
    position: relative;
    clear: both;
}
#footer-container
{
    margin: 0 auto 3rem auto;
}
#footer-content
{
    width: 100%;
    display: grid;
	justify-content: center;
	justify-items: center;
	align-items: start;
	grid-template-columns: 1fr;
	column-gap: 4%;
}
#footer-social-container{
    display: grid;
	justify-content: center;
	justify-items: center;
	align-items: center;
	grid-template-columns: 1fr;
}
#footer-social-content
{
    width: auto;
}
#footer-social-container h3,
#footer-social-container h4
{
    color: #0D0D0D;
}
#footer-social-container h3
{
    font-size: 1.6em;
    margin: 1.3em 0 0.9em;
}
#footer-social-container h4
{
    font-size: 1.1em;
    margin: 1.1em 0 1.5em;
}
.footer-social-icon{
    margin: 0 1.3em 0 0;
}
.footer-social-icon svg{
    height: 2.6rem;
    width: 2.6rem;
}
#footer-main-navigation
{
    width: 100%;
    margin: 4.2rem 0 0 0;
}
#footer-navigation
{
    width: 100%;
    margin: 4rem 0 0 0;
}

#footer-copyright-container
{
    color: #0D0D0D;
    margin: 3rem 0 0 0;
}
#footer-copyright-content
{
    font-weight: 700;
    font-size: 0.88rem;
}

/* ############################################              Footer END         ############################################## */




/* ############################################              Content EXEPTIONS          ############################################## */

#c296
{
    display: none;    
}

#c178,
#c179
{
    overflow-wrap: anywhere;
}


/* ############################################              Content EXEPTIONS END      ############################################## */









/********************************************************************************/
/********************************************************************************/
/**************  				hover: hover				*********************/
/**************  											*********************/
/********************************************************************************/
/********************************************************************************/

@media (hover: hover) {

}

/********************************************************************************/
/********************************************************************************/
/**************  				hover: hover				*********************/
/**************  					END						*********************/
/********************************************************************************/
/********************************************************************************/



/********************************************************************************/
/********************************************************************************/
/**************  				Mobile Phone				*********************/
/**************  					< 600					*********************/
/********************************************************************************/
/********************************************************************************/


@media screen and (max-width:600px) {

    main {
        margin: 2em 0 0 !important;
    }

    header
    {
        font-size: .6em;
    }

    .max-width
    {
        padding: 0 1em;
    }

    .max-width,
    .frame-type-header,
    .frame-type-uploads,
    .frame-type-text,
    .frame-type-form_formframework,
    .news-related-files
    {
        padding-left: 1em;
        padding-right: 1em;
    }
  
    #header-container
    {
        grid-template-columns: 1fr auto 0fr 0fr;
        padding-right: 2em;
    }

    #header-content {
        display: flex;
        grid-template-columns: none;
    }

    #header-opening-hours-container {
        display: none;
    }

    #top-logo-content-link,
    #top-logo-content:not(#top-logo-content-link > #top-logo-content) {
        max-width: 22em;
        aspect-ratio: 22 / 4;
        width: 100%;
        height: auto;
    }

    #top-logo-content-link > #top-logo-content {
        max-width: auto;
        aspect-ratio: none;
        width: 100%;
        height: 100%;
    }

    #main-navigation
    {
        display: none;
    }
    #mobile-navigation.menu-open
    {
        display: block;
    }

    #mobile-navigation-close-button-container {
        margin: 2em 1.7em 0 0;
    }

    #breadcrumb-container
    {
        margin: 9em 0 0;
        width: auto;
        position: relative;
        z-index: auto;
    }

    .breadcrumb-link.active
    {
        font-size: 2.4rem;
    }

    .input input,
    .input textarea
    {
        padding: 0.5em 4.99%;
        font-size: 1em;
        margin: 1em 0;
        border-radius: 0.3em;
        border: 1px solid rgb(221,225,227);
        width: 90%;
    }
    
    .frame-type-form_formframework h2 {
        font-size: 1.6em;
    }

    .frame-type-maximator_hydrogen_package_content_element_text_bubble_right {
        background-position: 48% center;
        background-size: cover;
    }

    .frame-type-maximator_hydrogen_package_content_element_text_bubble_left {
        background-position: 49% center;
        background-size: cover;
    }

    .text-bubble-right-content,
    .text-bubble-left-content
    {
        grid-template-columns: 1fr;
        column-gap: 8%;
        row-gap: 4em;
    }

    .text-bubble-right-content div:nth-child(1)
    {
        order: 2;
    }
    .text-bubble-right-content div:nth-child(2)
    {
        order: 1;
    }

    .text-bubble-right-image-masked,
    .text-bubble-left-image-masked
    {
        width: 100%;
    }

    .one-liner-with-m-text-area-content .ce-bodytext {
        width: 100%;
    }

    .frame-layout-2 .one-liner-with-m-header-content header {
        margin-bottom: 4em;
    }

    .one-liner-with-m-header-content::after {
        top: -1.6em;
        height: 4.25em;
    }

    .one-liner-with-m-image-area-content {
        width: 50%;
    }

    .one-liner-with-m-image-area-content {
        grid-template-columns: 1fr;
        row-gap: 4em;
    }

    .frame-type-maximator_hydrogen_package_content_element_1_3_teaser
    {
        width: 94%;
    }

    .bottom-teaser-text-area-content {
        padding-top: 75%;
    }

    #main-center-section-content,
    #main-center-section-content-2
    {
        grid-template-columns: 1fr;
    }

    #main-right-sidebar-container .frame-type-maximator_hydrogen_package_content_element_1_2_teaser,
    #main-right-2-sidebar-container .frame-type-maximator_hydrogen_package_content_element_1_2_teaser {
        width: 96%;
    }

    #main-center-section-content,
    #main-center-section-content-2
    {
        grid-template-columns: 1fr;
    }

    .listed-newsroom-article-container
    {
        width: 100%;
    }

    .listed-newsroom-article-content
    {
        grid-template-columns: 1fr;
    }

    .listed-newsroom-article-image-content
    {
        height: 0;
        padding-top: 100%;
    }

    .listed-newsroom-article-image-content-background-element
    {
        position: absolute;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        top: 0;
        left: 0;
    }

    .newsroom-article-header-content
    {
        grid-template-columns: 1fr;
        row-gap: 2em;
    }

    .newsroom-article-header-image-area-container
    {
        width: 100%;
    }

    .newsroom-article-body-header-content h1 {
        font-size: 2em;
    }

    .newsroom-article-body-content .news-text-wrap {
        font-size: 1.125em;
        line-height: 1.5;
    }

    .ce-uploads-content,
    .news-related-files ul
    {
        grid-template-columns: 1fr;
    }

    .frame-type-form_formframework form
    {
        width: 90%;
        font-size: .9em;
    }

    .frame-type-maximator_hydrogen_package_content_element_1_2_teaser
    {
        width: 96%;
    }

    .one-liner-with-m-image-area-content
    {
        width: 50%;
    }

    .newsroom-article-body-header-content
    {
        font-size: .8em;
    }

    .medium-teaser-content
    {
        grid-template-columns: 1fr;
    }

    .medium-teaser-image-area-content {
        height: 0;
        padding-top: 60%;
    }

    .medium-teaser-image-element {
        position: absolute;
        top: 0;
        left: 0;
    }

    .frame-type-maximator_hydrogen_package_content_element_accordion
    {
        margin: 1em 0.3em 0;
    }

    .accordion-header-container {
        padding: 1.5em 2em 1em;
    }

    .accordion-body-container {
        padding: 1.25em 2em;
    }

    #vacancy-header-image-content-text-content {
        margin: 0.5em;
    }

    #vacancy-work-with-maximator-hydrogen-content div.ce-textpic.ce-right.ce-below {
        grid-template-columns: 1fr;
    }

    .news-related-files {
        grid-template-columns: 1fr;
        column-gap: 0;
    }
    
    #vacancy-partner-content {
        grid-template-columns: 1fr;
    }

    #vacancy-partner-header-container {
        justify-self: center;
        margin: 0 1.1em;
    }

    #vacancy-partner-maximator-contact-container {
        justify-self: center;
        align-self: center;
    }

    #vacancy-partner-email-container,
    #vacancy-partner-phone-container,
    #vacancy-partner-whatsapp-container
    {
        font-size: .9em;
    }

    .frame-type-text h1 {
        font-size: 1.8em;
    }

    .frame-type-list header {
        font-size: .9em;
    }

    .medium-teaser-text-area-content-inner header
    {
        font-size: 0.8em;
    }



    #footer-content
    {
        grid-template-columns: 1fr;
    }

    #footer-logo-main
    {
        justify-self: center;
    }

    #footer-logo-main
    {
        max-width: 8em;
    }

    #footer-logo-second-container
    {
        display: grid;
        justify-content: center;
        justify-items: center;
        align-items: center;
        grid-template-columns: 1fr;
    }

    #footer-award-element-one
    {
        background-position: center;
        height: 4em;
        margin-top: 2em;
    }

    #footer-adress-social-container
    {
        justify-self: center;
        width: 100%;
        text-align: center;
        margin: 4em 0 0;
    }

    .footer-social-icon
    {
        margin: 0 1em;
    }

    #footer-navigation
    {
        justify-self: center;
    }

    .footer-navigation-content-list
    {
        display: grid;
        justify-content: center;
        justify-items: center;
        align-items: center;
        grid-template-columns: 1fr;
    }

    .footer-navigation-item 
    {
        margin: 0 0 1em 0;
    }


    #footer-bottom
    {
        grid-template-columns: 1fr;
        height: auto;
    }

    #footer-copyright-container
    {
        justify-self: center;
        margin: 1em 0 0;
    }

    #footer-adress-social-container
    {
        min-width: 0;
    }

    #main-container .slickcontentelement.outerwrap .slickcontentelement.outerwrap
    {
        grid-template-columns: 1fr;
    }
        
    #main-container .slickcontentelement .contentwrap
    {
        justify-items: center;
        margin: .8em 0 0;
    }


    .slickcontentelement .slick-text
    {
        min-height: 100%;
    }

    #main-container .slick-dots
    {
        display: none!important;
    }

    .medium-teaser-statement-content
    {
        padding: 6em 2em 2em 2em;
    }

    .link-teaser-content
    {
        grid-template-columns: 1fr!important;
        row-gap: .5em;
    }

    .frame-mapboxframe
    {
        width: 90%;
        height: 200vw;
        max-height: 78vh;
    }


    
    .company_overview-content-area-content {
        grid-template-columns: 1fr;
    }

    .company_overview-dna-container {
        width: 100%;
    }
    .company_overview-content-element-content {
        justify-content: center;
    }
    .company_overview-side-container {
        max-width: 100%;
    }
    .company_overview-worldwide-media-container
    {
        width: 100%;
    }
    .company_overview-content-element-text-container {
        width: 90%;
        text-align: center;
        margin-top: 2rem;
        min-height: auto;
    }
    .company_overview-worldwide-container
    {
        order: 0;
    }
    .company_overview-dna-container
    {
        order: -1;
    }
    .company_overview-dna-text-container
    {
        order: 1;
    }
    .company_overview-dna-link-container
    {
        order: 2;
    }
    .company_overview_line
    {
        display: none;
    }
    .company_overview-content-area-content {
        row-gap: 0rem;
    }
}


/********************************************************************************/
/********************************************************************************/
/**************  	END ///		Mobile Phone	/// END		*********************/
/**************  					< 600					*********************/
/********************************************************************************/
/********************************************************************************/



/********************************************************************************/
/********************************************************************************/
/**************  				Tablet Portrait				*********************/
/**************  			600 <	    x 	<= 812			*********************/
/********************************************************************************/
/********************************************************************************/


@media screen and (min-width:600px) and (max-width:812px) {




    /*********** TEXT STYLES *****************************/

    .frame-type-textpic p,
    .frame-type-text p
    {
        font-size: 1.5rem;
        line-height: 2.2rem;
        margin: 0 0 1.25em 0;
    }





    /*********** TEXT STYLES END *************************/

    header
    {
        font-size: .8em;
    }

    .max-width
    {
        padding: 0 2em;
    }

    .max-width,
    .frame-type-header,
    .frame-type-uploads,
    .frame-type-text,
    .frame-type-form_formframework,
    .news-related-files
    {
        padding-left: 2em;
        padding-right: 2em;
    }
  
    #header-container
    {
        grid-template-columns: 1fr auto 0fr 0fr;
        padding-right: 2em;
        padding-bottom: 1em;
    }

    #breadcrumb-container
    {
        margin-top: 6em;
    }

    #main-navigation
    {
        display: none;
    }

    #mobile-navigation.menu-open
    {
        display: block;
    }

    #header-content
    {
        height: 5em;
    }

    #header-opening-hours-content
    {
        font-size: 0.8rem;
    }

    #opening-hours-indicator p::after
    {
        margin: 0 0.5rem;
    }

    .breadcrumb-link.active
    {
        font-size: 2.4rem;
    }

    #top-logo-content
    {
        width: 17em;
    }

    #nav-button-logo
    {
        row-gap: 0.5rem;
        width: 2.5rem;
        margin: 0.5rem 0 0 0;
    }

    main {
        margin: 3em 0 0;
    }
    #main-center-section-container.max-width
    {
        padding: 0 10rem;
    }
    #breadcrumb-container:has(nav) + main {
        margin: 12em 0 0;
    }
}


/********************************************************************************/
/********************************************************************************/
/**************  	END ///	Tablet Portrait		/// END		*********************/
/**************  			600 <	    x 	<= 812			*********************/
/********************************************************************************/
/********************************************************************************/



/********************************************************************************/
/********************************************************************************/
/**************  				Tablet Widescreen			*********************/
/**************  			813 <=    x 	< 1068			*********************/
/********************************************************************************/
/********************************************************************************/


@media screen and (min-width:813px) and (max-width:1067px) {

    /* Media queries until here OK */

    #header-container
    {
        /* background-color: rgba(107, 158, 158,.1); */
    }

    .max-width
    {
        padding: 0 2em;
    }

    #header-container
    {
        grid-template-columns: 1fr auto 0fr 0fr;
    }

    #main-navigation
    {
        display: none;
    }

    #mobile-navigation.menu-open
    {
        display: block;
    }

    #mobile-navigation-close-button-container {
        margin: 2em 1.7em 0 0;
    }

    #main-center-section-content,
    #main-center-section-content-2
    {
        grid-template-columns: 1fr;
    }

    .ce-uploads-content,
    .news-related-files ul
    {
        grid-template-columns: 1fr;
    }

    .one-liner-with-m-text-area-content .ce-bodytext {
        width: 95%;
    }
    .one-liner-with-m-image-area-content {
        width: 80%;
        margin: 8em auto;
    }

    .frame-type-maximator_hydrogen_package_content_element_1_2_teaser {
        width: 85%;
        float: none;
        margin: 0 auto 6em;
    }

    .frame-type-form_formframework form {
        width: 89.9%;
    }

    .bottom-teaser-text-area-content {
        padding-top: 110%;
    }

    .bottom-teaser-text-area-content-inner h3 {
        font-size: 1em;
    }


    #footer-bottom
    {
        grid-template-columns: 1fr 0.6fr;
    }

    #main-container .slick-dots li {
        width: 6em;
        height: 6em;
    }

    #main-container .slick-dots li {
        margin: 0 -4px;
        border: 8px solid gray;
    }

    #main-container .slick-dots li button {
        width: 7.5em;
        height: 7.5em;
        font-size: .8em;
    }
    .company_overview-content-element-text-container
    {
        width: 90%;
        text-align: center;
        margin-top: 2rem;
        min-height: 25rem;
    }
     
    .company_overview-content-element-text-container.company_overview-worldwide-text-container,
    .company_overview-content-element-text-container.company_overview-team-text-container
    {
        min-height: 5rem;
    }

    .frame-type-maximator_hydrogen_package_content_element_company_overview p {
        font-size: 1.0em;
    }
}


/********************************************************************************/
/********************************************************************************/
/**************  	END ///	Tablet Widescreen	/// END		*********************/
/**************  			813 <=    x 	< 1068			*********************/
/********************************************************************************/
/********************************************************************************/



/********************************************************************************/
/********************************************************************************/
/**************  				STD Laptop					*********************/
/**************  			1068 <=    x 	<= 1440			*********************/
/********************************************************************************/
/********************************************************************************/


@media screen and (min-width:1068px) and (max-width:1440px) {


    .text-bubble-right-image-masked,
    .text-bubble-left-image-masked
    {
        width: 110%;
    }

    .max-width
    {
        padding: 0 3em;
    }

    #header-container
    {
        grid-template-columns: 1fr auto 0.1fr 0.5fr;
    }
    .main-navigation-item
    {
        font-size: 0.95rem;
        margin: 0.5em 0.9em 0 0;
    }

    .one-liner-with-m-text-area-content .ce-bodytext {
        width: 85%;
    }

    .one-liner-with-m-image-area-content {
        width: 70%;
        margin: 8em auto;
    }

    .bottom-teaser-text-area-content {
        padding-top: 90%;
    }

    #footer-logo-main {
        max-width: 12em;
    }

    #main-container .slick-dots li {
        width: 9em;
        height: 9em;
    }

    #main-container .slick-dots li {
        margin: 0 -4px;
        border: 8px solid gray;
    }

    #main-container .slick-dots li button {
        width: 9em;
        height: 9em;
    }

    #main-right-sidebar-container,
    #main-right-2-sidebar-container
    {
        max-width: 320px;
        font-size: .8em;
    }

    .company_overview-content-element-text-container
    {
        width: 90%;
        text-align: center;
        margin-top: 1rem;
        min-height: 28rem;
    }
     
    .company_overview-content-element-text-container.company_overview-worldwide-text-container,
    .company_overview-content-element-text-container.company_overview-team-text-container
    {
        min-height: 5rem;
    } 

    .one-liner-with-m-fullscreen-image-area-content
    {
        width: 85%;
    }


}

/********************************************************************************/
/**************  	END ///		STD Laptop		/// END		*********************/
/**************  			1068 <=    x 	<= 1440			*********************/
/********************************************************************************/
/********************************************************************************/



/********************************************************************************/
/********************************************************************************/
/**************  				STD Office Screen			*********************/
/**************  			1440 <    x 	<= 1680			*********************/
/********************************************************************************/
/********************************************************************************/


@media screen and (min-width:1441px) and (max-width:1680px) {

    .one-liner-with-m-fullscreen-image-area-content
    {
        width: 75%;
    }

}

/********************************************************************************/
/********************************************************************************/
/**************  	END ///		STD Office Screen		/// END		*************/
/**************  			1440 <    x 	<= 1680			*********************/
/********************************************************************************/
/********************************************************************************/




/********************************************************************************/
/********************************************************************************/
/**************  				BIG Office Screen			*********************/
/**************  			 	< 1680						*********************/
/********************************************************************************/
/********************************************************************************/


@media screen and (min-width:1681px) {

    .one-liner-with-m-fullscreen-image-area-content
    {
        width: 75%;
    }

}

/********************************************************************************/
/********************************************************************************/
/**************  	END ///		BIG Office Screen		/// END		*************/
/**************  			 	< 1680						*********************/
/********************************************************************************/
/********************************************************************************/



/********************************************************************************/
/********************************************************************************/
/**************  				mean Screen			*********************/
/**************  			 	< 1680						*********************/
/********************************************************************************/
/********************************************************************************/


@media screen and (max-height:801px) {
}


/********************************************************************************/
/********************************************************************************/
/**************  	END ///		mean Screen		/// END		*************/
/**************  			 	< 1680						*********************/
/********************************************************************************/