/*///////////////////////////////////////////////////////
// Main
//////////////////////////////////////////////////////*/
*, *::after, *::before {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite,
code, del, dfn, em, 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, article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
html {
    padding-bottom: 0 !important;
}
body {
    position: relative;
    font-family: var(--fontfamily-ptsans);
    font-weight: 400;
    font-style: normal;
    font-size: 100%;
    color: var(--color-darkgray1);
}

/*///////////////////////////////////////////////////////
// Variables
//////////////////////////////////////////////////////*/
:root {
    --color-elvigray1: #525252;
    --color-elvigray2: #717372;
    --color-elvigray3: #D6D6D6;
    --color-elvigray4: #FBFBFB;

    --color-elvipurple: #7150E9;
    --color-elviblue: #2A82CC;
    --color-elvigreen: #066553;
    --color-elvigreen2: #94D979;
    --color-elvipink: #FF2779;
    --color-elvimint: #24C2C4;

    --color-elvi-pupils: var(--color-elvipurple);
    --color-elvi-companies: #40B8A1;
    --color-elvi-teachers: #3A97C9;
    --color-elvi-digital: #3075B7;

    --color-gradient-a1: var(--color-elvipurple);
    --color-gradient-a2: var(--color-elviblue);
    --color-gradient-a3: var(--color-elvigreen);
    --color-gradient-a4: var(--color-elvimint);
    --color-gradient-a5: var(--color-elvipink);
    --color-gradient-a6: var(--color-elvigreen2);

    --color-light: #ffffff;
    --color-darkgray1: #333333;
    --color-darkgray2: #484848;
    --color-lightgray1: #efefef;
    --color-lightgray2: #eaeaea;
    --color-lightgray3: #dbdbdb;
    --color-gray1: #b3b3b3;
    --color-gray2: #B5B4B4;
    --color-gray3: #9c9d9d;

    --color-navibg: #27252C;
    --color-navihover: #EBEBEB;

    --gradient-pupils: linear-gradient(135deg, rgba(91,103,187,1) 0%, rgba(195,61,141,1) 100%);
    --gradient-company: linear-gradient(135deg, rgba(5,164,185,1) 0%, rgba(148,217,121,1) 100%);
    --gradient-teacher: linear-gradient(135deg, rgba(42,130,204,1) 0%, rgba(36,194,196,1) 100%);

    --gradient-green: linear-gradient(to top right, #084952 0%, #94D979 100%);
    --gradient-blue: linear-gradient(to top right, #2a82cc 0%, #7150e9 100%);
    --gradient-mint: linear-gradient(to top right, #24c2c4 0%, #2a82cc 100%);
    --gradient-purple: linear-gradient(to top right, #7150e9 0%, #ff2779 100%);
    --gradient-pink: linear-gradient(to top right, #ff2779 0%, #f7b172 100%);

    --button-background: var(--color-elvipurple);
    --button-hovercolor: var(--color-elvipurple);

    --fontfamily-din: "DIN", Arial, Helvetica, sans-serif;
    --fontfamily-ptsans: 'PT Sans', Helvetica, Arial, sans-serif;
}


.elvigray-color {color: var(--color-elvigray1);}
.elvigray-bg {background-color: var(--color-elvigray1);}

.elvilightgray-color {color: var(--color-elvigray2);}
.elvilightgray-bg {background-color: var(--color-elvigray2);}

/* Schüler */
.pupils-color {color: var(--gradient-purple);}
.pupils-bg {background: var(--gradient-purple);}

/* Naturwissenschaftlich */
.elvigreen-color {color: var(--color-elvigreen);}
.elvigreen-bg {background-color: var(--color-elvigreen);}
.elvigreen-gradient {background: var(--gradient-green);}

/* Technisch */
.elviblue-color {color: var(--color-elviblue);}
.elviblue-bg {background-color: var(--color-elviblue);}
.elviblue-gradient {background: var(--gradient-blue);}

/* Kaufmännisch */
.elvipurple-color {color: var(--color-elvipurple);}
.elvipurple-bg {background-color: var(--color-elvipurple);}
.elvipurple-gradient {background: var(--gradient-purple);}

/* Informatik */
.elvimint-color {color: var(--color-elvimint);}
.elvimint-bg {background-color: var(--color-elvimint);}
.elvimint-gradient {background: var(--gradient-mint);}

/* Gastronomisch */
.elvipink-color {color: var(--color-elvipink);}
.elvipink-bg {background-color: var(--color-elvipink);}
.elvipink-gradient {background: var(--gradient-pink);}

/* body classes */
body.student{
    --button-background: var(--color-elvipurple);
    --button-hovercolor: var(--color-elvipurple);
}
body.company{
    --button-background: var(--color-elvigreen);
    --button-hovercolor: var(--color-elvigreen);
}
body.teacher{
    --button-background: var(--color-elviblue);
    --button-hovercolor: var(--color-elviblue);
}

/*///////////////////////////////////////////////////////
// Typo
//////////////////////////////////////////////////////*/

h1 {
    font-size: 60px;
    line-height: 65px;
    margin-bottom: 25px;
}
h2 {
    font-size: 48px;
    line-height: 48px;
    margin-bottom: 25px;
}
h3 {
    font-size: 36px;
    line-height: 40px;
}
h4 {
    font-size: 30px;
    line-height: 36px;
}
h5 {
    font-size: 22px;
    line-height: 24px;
}
h6 {
    font-size: 18px;
    line-height: 24px;
}
@media (max-width: 1023px) {
    h1 {
        font-size: 60px;
    }
    h2 {
        font-size: 42px;
    }
}
@media (max-width: 768px) {
    h1 {
        font-size: 55px;
    }
    h2 {
        font-size: 36px;
    }
    h3 {
        font-size: 24px;
    }
    h4 {
        font-size: 22px;
        line-height: 36px;
    }
    h5 {
        font-size: 18px;
        line-height: 24px;
    }
    h6 {
        font-size: 18px;
        line-height: 24px;
    }
}
@media (max-width: 767px) {
    h1 {
        font-size: 36px;
        line-height: 40px;
    }
    h2 {
        font-size: 30px;
        line-height: 36px;
    }
    h3 {
        font-size: 22px;
    }
}
h1, h2, h3, h4, h5, h6, .headline {
    font-family: var(--fontfamily-din);
    color: var(--color-elvigray1);
    font-size-adjust: inherit;
}
a, a:active {
    outline: none;
}
a:focus {
    outline: none;
}
b, strong {
    font-weight: 700;
}
i {
    font-style: italic;
}
h1 b, h2 b, h3 b, h4 b, h5 b, h6 b {
    font-weight: normal;
}
p, li {
    font-size: 18px;
    line-height: 1.4em;
}
section .innerWrap p {
    hyphens: auto;
    word-break: break-word;
}
small, p.small {
    font-size: 14px;
    line-height: 1.3em;
}
p:empty {
    display: none;
}
input, textarea, select, option {
    font-family: var(--fontfamily-ptsans);
}
.text-center {
    text-align: center;
}
.hidden {
    display: none;
}


/*///////////////////////////////////////////////////////
// Helper
//////////////////////////////////////////////////////*/
.padBottom50 {
    padding-bottom: 50px;
}
.padTop50 {
    padding-top: 50px;
}
.padBottom100 {
    padding-bottom: 100px;
}
.padTop100 {
    padding-top: 100px;
}
.centerX {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.innerWrap {
    position: relative;
    width: 100%;
    /*max-width: 1140px;*/
    max-width: 1440px;
    padding: 0 30px;
    margin: 0 auto;
    z-index: 10;
}
.noFlickr {
    -webkit-perspective: 1000px;
    -webkit-backface-visibility: hidden;
}
.showMobile {
    display: none;
}
.bgFull {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
}
.textContent h1, .textContent h2 {
    margin-bottom: 2rem;
}
.textContent h3, .textContent h4, .textContent h5, .textContent h6 {
    margin-bottom: 1.5rem;
}
.textContent p {
    margin-bottom: 2rem;
    line-height: 1.5em;
}
@media (max-width: 767px) {
    .innerWrap {
        padding: 0 20px;
    }
}

/*///////////////////////////////////////////////////////
// Buttons
//////////////////////////////////////////////////////*/
.btnWrap {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 25px 0;
}
.btnWrap.center {
    justify-content: center;
    text-align: center;
}
.btnWrap > * {
    margin-right: 20px;
}
.primaryButton{
    position: relative;
    display: inline-block;
    font-family: var(--fontfamily-din);
    font-size: 1.125rem;
    line-height: 1.25rem;
    text-decoration: none;
    color: var(--color-light);
    padding: 4px 20px;
    text-align: center;
    text-transform: uppercase;
    border: 1px solid transparent;
    background: var(--button-background);
    border-radius: 3px;
    transition: all 0.5s;
}
@media (min-width: 1025px) {
    .primaryButton{
        font-size: 1.3125rem;
        line-height: 1.5rem;
        padding: 14px 45px;
    }
}
.primaryButton:hover{
    color: var(--color-elvipurple);
    background: var(--color-light);
}
.primaryButton.active{
    color: var(--color-elvipurple);
    background: var(--color-light);
}
.primaryButton.inactive{
    color: var(--color-elvigray1);
    background: transparent;
    opacity: 0.5;
    pointer-events: none;
}

.primaryButton--light{
    color: var(--color-elvigray1);
    background: var(--color-light);
}
.primaryButton--light:hover{
    color: var(--color-light);
    background: var(--button-background);
}
.primaryButton--light.active{
    color: var(--color-light);
    background: var(--button-background);
}

.primaryButton--outline{
    color: var(--color-elvigray1);
    border-color: var(--color-lightgray3);
    background: transparent;
}
.primaryButton--outline:hover{
    color: var(--color-light);
    border-color: var(--color-elvipurple);
    background: var(--button-background);
}
.primaryButton--outline.active{
    color: var(--color-light);
    border-color: var(--color-elvipurple);
    background: var(--button-background);
}

.primaryButton--small{
    font-size: 1.125rem;
    padding: 2px 30px 2px 30px;
}

.secondaryButton{
    position: relative;
    display: inline-block;
    font-family: var(--fontfamily-din);
    font-size: 1.125rem;
    line-height: 1.25rem;
    text-decoration: none;
    color: var(--color-light);
    padding: 4px 20px;
    text-align: center;
    text-transform: uppercase;
    background: transparent;
    border: 1px solid var(--color-lightgray1);
    border-radius: 3px;
    transition: all 0.5s;
}
@media (min-width: 1025px) {
    .secondaryButton{
        font-size: 1.3125rem;
        line-height: 1.5rem;
        padding: 14px 45px;
    }
}
.secondaryButton:hover{
    color: var(--color-light);
    border-color: var(--button-hovercolor);
    background: var(--button-background);
}
.secondaryButton.active{
    color: var(--color-light);
    border-color: var(--button-hovercolor);
    background: var(--button-background);
}
.secondaryButton.inactive{
    color: var(--color-elvigray1);
    border-color: var(--color-elvigray1);
    background: transparent;
    opacity: 0.5;
    pointer-events: none;
}

/*///////////////////////////////////////////////////////
// Pagination Stlyes
//////////////////////////////////////////////////////*/
.f3-widget-paginator {
    display: flex;
    list-style-type: none;
    max-width: 100%;
    overflow-x: scroll;
    margin: 0;
    padding: 0;
    justify-content: center;
}
.f3-widget-paginator li {
    background-color: #ccc;
    border-right: 1px solid #e6e6e6;
}
.f3-widget-paginator li.current {
    background-color: var(--color-elvigray2);
    padding: 16px 24px;
    color: white;
    font-weight: bold;
    font-size: 1.4rem;
}
.f3-widget-paginator li a {
    display: block;
    position: relative;
    padding: 16px 24px;
    text-decoration: none;
    font-size: 1.4rem;
    color: white;
}
.f3-widget-paginator li a:hover {
    background-color: var(--color-elvigray2);
}
.f3-widget-paginator li.previous, .f3-widget-paginator li.next {
    position: relative;
    min-width: 40px;
}
.f3-widget-paginator li.previous a, .f3-widget-paginator li.next a {
    text-indent: -9999px;
    position: relative;
}
.f3-widget-paginator li.previous a:hover, .f3-widget-paginator li.next a:hover {
    background: none;
}
.f3-widget-paginator li.previous:before, .f3-widget-paginator li.next:before {
    content: ">";
    font-weight: bold;
    color: white;
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
}
.f3-widget-paginator li.previous:hover, .f3-widget-paginator li.next:hover {
    background-color: var(--color-elvigray2);
}
.f3-widget-paginator li.previous:before {
    content: "<";
}
.f3-widget-paginator li:first-child {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
.f3-widget-paginator li:last-child {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-right: none;
}
@media (min-width: 768px) {
    .f3-widget-paginator li.current, .f3-widget-paginator li a {
        padding: 10px 15px;
        font-size: 1.1rem;
    }
}
@media (min-width: 1024px) {
    .f3-widget-paginator li.current, .f3-widget-paginator li a {
        padding: 8px 12px;
        font-size: 1rem;
    }
}



/*///////////////////////////////////////////////////////
// Header
//////////////////////////////////////////////////////*/
#preloader {
    display: none;
    position: fixed;
    width: 100%;
    height: 100vh;
    background: url('../Images/bg_grey.jpg') no-repeat center center / cover;
    z-index: 600;
}
#preloader img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
/*#wrap {
    width: 1200px;
    position: relative;
    overflow: hidden;
    min-height: 100vh;
    background-color: var(--color-light);
    margin: 0 auto;
    max-width: 100%;
}*/
.bgWhiteWrapper {
    width: 100%;
    background-color: var(--color-light);
}
.bgGrayWrapper {
    width: 100%;
    background-color: #edeceb;
    position: relative;
    z-index: 10;
}
.bgGradientWrapper {
    width: 100%;
    background: url('../Images/gradient_big.png') no-repeat center center / cover;
}
.bgGrayBgWrapper {
    width: 100%;
    background: url('../Images/bg_pattern.jpg') repeat-y center center / cover;
    background-attachment: fixed;
}
.bodytext {
    margin: 0;
    padding: 0;
}
#header {
    max-width: 100%;
    display: flex;
    background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
    position: fixed;
    z-index: 100;
    width: 100%;
    height: 113px;
}

.headWrap {
    width: 100%;
    z-index: 2;
}
#logo {
    position: absolute;
    width: 133px;
    height: 55px;
    left: 60px;
    top: 40px;
    background-image: url('../Images/logo_nav.svg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    text-indent: -9999em;
    z-index: 2;
    /*transition: all 0.5s;*/

    /*&:after{
        content: "";
        position: absolute;
        width: 1px;
        height: 1px;
        opacity: 0;
        background-image: url('../Images/logo_nav_hover.svg');
    }*/
}
/*#logo:hover {
    background-image: url('../Images/logo_nav_hover.svg');
}*/

/*///////////////////////////////////////////////////////
// Navigation
//////////////////////////////////////////////////////*/
#mainmenu {
    display: flex;
    justify-content: center;
    font-family: var(--fontfamily-din);
    width: 100%;
    padding: 2.25rem 0 0 0;
}
#mainmenu ul li {
    float: left;
    list-style: none;
    color: var(--color-light);
}
#mainmenu ul li a:not(.secondaryButton) {
    position: relative;
    padding: 1.25rem;
    color: var(--color-light);
    text-transform: uppercase;
    display: block;
    text-decoration: none;
    margin-left: 1px;
    font-size: 1.125rem;
    line-height: 1.625rem;
    transition: all 0.5s;
}
#mainmenu ul li a:not(.secondaryButton) .navLink{
    position: relative;
}
#mainmenu ul li a:not(.secondaryButton) .navLink:after{
    content: "";
    position: absolute;
    left: 40%;
    bottom: -2px;
    width: 20%;
    height: 2px;
    background-color: var(--color-navihover);
    opacity: 0;
    transition: all 0.25s;
}
@media (min-width: 1620px) {
    #mainmenu ul li a:not(.secondaryButton) {
        padding: 1.25rem 50px;
    }
}
@media (min-width: 1620px) {
    #mainmenu ul li a:not(.secondaryButton) {
        padding: 1.25rem 50px;
    }
}
#mainmenu ul li a:not(.secondaryButton):hover {
    color: var(--color-navihover);
}
#mainmenu ul li a:not(.secondaryButton):hover .navLink:after{
    width: 100%;
    left: 0;
    opacity: 1;
}
#mainmenu ul li.current a:not(.secondaryButton){
    color: var(--color-light);
}
#mainmenu ul li.current a:not(.secondaryButton) .navLink:after{
    background-color: var(--color-light);
    opacity: 1;
    width: 100%;
    left: 0;
}
#mainmenu .navigation .socialMenu {
    display: none;
}

#mainmenu ul li a.secondaryButton{
    font-size: 1rem;
    padding-top: 4px;
    padding-bottom: 4px;
    border-color: rgba(255,255,255,0.2);
}

#siteSelect {
    position: absolute;
    right: 20px;
    top: 50px;
    width: 150px;
    text-align: center;
    z-index: 4;
}

.selectMenu {
    position: relative;
    font-family: var(--fontfamily-din);
    display: inline-block;
    cursor: pointer;
    width: 100%;
}
.selectMenu.onSelect {
    margin: 0;
}
.selectMenu.onSelect .selection {
    border-radius: 15px 15px 0 0;
    padding: 19px 30px 19px 18px;
    height: 56px;
    margin-top: -9px;
    background-color: var(--color-darkgray2);
}
.selectMenu.onSelect .selection .arrow{
    transform: rotate(180deg);
}
.selectMenu.onSelect .smOptions {
    border-radius: 0 0 15px 15px;
    border-top: 0;
}
.smIcon, .smIconHov {
    width: 13px;
    height: 45px;
    position: absolute;
    right: 20px;
    cursor: pointer;
    top: calc(50% - 1px);
    transform: translateY(-50%);
    transition: linear 0.2s;
}
.smIconHov {
    opacity: 0;
}
.selection {
    position: relative;
    display: block;
    padding: 0 30px 0 18px;
    border-radius: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2); 
    z-index: 1;
    width: 100%;
    height: 30px;
    font-size: 1rem;
    line-height: 1.875rem;
    text-align: left;
    user-select: none;
}
.selection a {
    text-decoration: none;
}
.selection .arrow {
    display: block;
    position: absolute;
    right: 18px;
    top: 50%;
    margin: -3px 0 0 0;
    width: 10px;
    height: 6px;
    background: url('../Icons/pfeil_auswahl.svg') no-repeat center center / contain;
    -webkit-transition-property: width, height;
    transition-property: width, height;
    -webkit-transition-duration: .1s;
    transition-duration: .1s;
    filter: brightness(100);
}
.selection:hover .arrow {
    height: 7px;
}
.selectMenu:hover .smIcon {
    opacity: 0;
}
.selectMenu:hover .smIconHov {
    opacity: 1;
}
.smOptions {
    position: absolute;
    top: 46px;
    overflow: hidden;
    color: var(--color-light);
    border: 1px solid rgba(255, 255, 255, 0.2); 
    background-color: var(--color-darkgray2);
    border-radius: 15px;
    display: none;
    max-height: 400px;
    overflow-y: auto;
    width: 100%;
    text-align: left;
}
.smOption {
    display: block;
    width: 100%;
    cursor: pointer;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2); 
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.smOption:last-child {
    border-bottom: 0;
}
.smOption a {
    display: block;
    width: 100%;
    padding: 19px 30px 19px 18px;
    text-decoration: none;
}
.selection, .selection a, .smOption a {
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--color-light);
}
.smOption a:hover {
    color: var(--color-navihover);
    text-decoration: underline;
}
.mobile, .epMobileImage, .burger-check, #mainmenu > label, .mobilemap, #selectCoords {
    display: none;
}
/*@media (max-width: 1024px) {*/
@media (max-width: 1300px) {
    #header {
        padding-left: 0;
        height: 64px;
        background: transparent;
    }
    #header:after {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 120%;
        background: linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%);
        opacity: 0;
        transition: opacity 0.5s;
    }
    #header.scrolled:after {
        opacity: 1;
    }
    #siteSelect {
        display: none;
    }
    #logo {
        position: absolute;
        left: 24px;
        top: 15px;
        width: 90px;
        height: 34px;
        background-image: url('../Images/logo_nav.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        text-indent: -9999em;
    }
    #mainmenu {
        position: absolute;
        top: 0;
        right: 0;
        height: 64px;
    }
    .mobile {
        display: inherit;
    }
    #mainmenu > label.burger {
        z-index: 2;
        position: absolute;
        right: 33px;
        top: 25px;
        display: inline-block;
        border: 0;
        border-radius: 0;
        background: none;
        outline: 0;
        padding: 0;
        height: auto;
        cursor: pointer;
        border-bottom: 2px solid #fff;
        width: 26px;
        transition: border-bottom 1s ease-in-out;
        -webkit-transition: border-bottom 1s ease-in-out;
        margin: 0;
    }
    #mainmenu > label.burger::-moz-focus-inner {
        border: 0;
        padding: 0;
    }
    #mainmenu > label.burger:before {
        content: "";
        display: block;
        border-bottom: 2px solid #fff;
        width: 100%;
        margin-bottom: 5px;
        transition: -webkit-transform 0.25s ease-in-out;
        transition: transform 0.25s ease-in-out;
        transition: transform 0.25s ease-in-out, -webkit-transform 0.5s ease-in-out;
        -webkit-transition: -webkit-transform 0.25s ease-in-out;
    }
    #mainmenu > label.burger:after {
        content: "";
        display: block;
        border-bottom: 2px solid #fff;
        width: 100%;
        margin-bottom: 5px;
        transition: -webkit-transform 0.25s ease-in-out;
        transition: transform 0.25s ease-in-out;
        transition: transform 0.25s ease-in-out, -webkit-transform 0.5s ease-in-out;
        -webkit-transition: -webkit-transform 0.5s ease-in-out;
    }
    #mainmenu input[type="checkbox"].burger-check {
        display: none;
    }
    #mainmenu input[type="checkbox"].burger-check:checked ~
    .burger {
        border-bottom: 4px solid transparent;
        transition: border-bottom 0.8s ease-in-out;
        -webkit-transition: border-bottom 0.25s ease-in-out;
    }
    #mainmenu input[type="checkbox"].burger-check:checked ~ .burger:before {
        transform: rotate(-45deg) translateY(1px) translateX(-3px);
        -webkit-transform: rotate(-45deg) translateY(1px) translateX(-3px);
        transition: -webkit-transform 0.5s ease-in-out;
        transition: transform 0.5s ease-in-out;
        transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
        -webkit-transition: -webkit-transform 0.25s ease-in-out;
        margin-bottom: 7px;
    }
    #mainmenu input[type="checkbox"].burger-check:checked ~ .burger:after {
        transform: rotate(45deg) translateY(-4px) translateX(-5px);
        -webkit-transform: rotate(45deg) translateY(-4px) translateX(-5px);
        transition: -webkit-transform 0.5s ease-in-out;
        transition: transform 0.5s ease-in-out;
        transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
        -webkit-transition: -webkit-transform 0.25s ease-in-out;
    }
    #mainmenu input[type="checkbox"].burger-check:checked ~ .burger + .navigation {
        transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out ;
        padding: 146px 3px 23px 3px;
    }
    
    
    #mainmenu .navigation {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 0 3px 0 3px;
        margin: 0;
        z-index: 0;
        background: var(--color-navibg);
        overflow: hidden;
        max-height: 0;
        -webkit-transition: max-height 0.5s ease-in-out;
        transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out ;
        clear: both;
    }
    #mainmenu ul {
        background: var(--color-navibg);
    }
    #mainmenu input[type="checkbox"].burger-check:checked ~ .navigation {
        max-height: 100vh;
        height: 100vh;
        -webkit-transition: max-height 0.5s ease-in-out;
        transition: max-height 0.5s ease-in-out;
        overflow: auto;
    }
    #mainmenu .navigation > li {
        display: list-item;
        float: inherit;
    }
    #mainmenu ul li a:not(.secondaryButton) {
        padding: 16px 20px;
        font-size: 1.625rem;
        line-height: 1.625rem;
        letter-spacing: 0.26px;
        text-align: left;
        text-transform: uppercase;
        margin: 0;
        color: var(--color-light);
    }
    #mainmenu ul li a:not(.secondaryButton):hover {
        color: var(--color-navihover);
        text-decoration: underline;
    }
    #mainmenu ul li a:not(.secondaryButton) .navLink:after{
        display: none;
    }
    
    #mainmenu .navigation > li:first-child a {
        padding: 16px 20px 16px 20px;
    }
    #mainmenu .navigation > li:last-of-type a {
        padding: 16px 20px 51px 20px;
    }
    #mainmenu ul.mobile li {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: auto;
        float: left !important;
    }
    #mainmenu ul.mobile li a:not(.secondaryButton) {
        text-align: left;
        padding-left: 40px;
    }
    #mainmenu ul li a.secondaryButton {
        border-radius: 15px;
        margin: 0 0 20px 20px;
    }

    #mainmenu ul.mobile li .mobNavIcon {
        display: inline-block;
        width: 35px;
        height: 25px;
        background-repeat: no-repeat;
        background-position: center center;
        -webkit-background-size: contain;
        background-size: contain;
        float: left;
        margin: 11px 10px 0 15px;
    }
    #mainmenu .navCompany {
        background-image: url('../Icons/unternehmen_white.svg');
    }
    #mainmenu .navTeacher {
        background-image: url('../Icons/lehrer_white.svg');
    }
    #mainmenu .navPupil {
        background-image: url('../Icons/schueler_white.svg');
    }

    #mainmenu .navigation .socialMenu {
        display: block;
        margin: 0 0 56px 20px;   
    }
    #mainmenu .navigation .socialMenu ul li a{
        padding: 0;
    }
}
@media (max-width: 680px) {
    #mainmenu {
        width: 100%;
    }
    #mainmenu .navigation {
        position: absolute;
        top: 0;
        left: 0;
        max-width: 100%;
        margin: 0;
        width: 100%;
        padding-bottom: 0;
    }
}
@media (max-width: 480px) {
    .headWrap {
        width: 100%;
    }
    #mainmenu .navigation {
        width: 100%;
        margin: 0;
    }
}

/*!*!//////////////////////////////////////////////////////
// Site Selection
/////////////////////////////////////////////////////!*!
#siteSelect {
    position: absolute;
    right: 0;
    top: 0;
    background-color: rgba(82,82,82, 1);
    width: 145px;
    text-align: center;
    height: 100%;
}

.selectMenu {
    font-family: var(--fontfamily-din);
    letter-spacing: 0.04em;
    position: relative;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    clear: both;
    color: var(--color-light);
    width: 100%;
}

.smIcon, .smIconHov {
    width: 13px;
    height: 45px;
    position: absolute;
    right: 20px;
    cursor: pointer;
    top: calc(50% - 1px);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: linear 0.2s;
    -moz-transition: linear 0.2s;
    -ms-transition: linear 0.2s;
    -o-transition: linear 0.2s;
    transition: linear 0.2s;
}

.smIconHov {
    opacity: 0;
}

.selection {
    position: relative;
    float: left;
    z-index: 1;
    width: 100%;
    line-height: 64px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.selection a {
    text-decoration: none;
}

.selection .arrow {
    display: inline-block;
    padding-left: 20px;
    margin-bottom: 2px;
    width: 10px;
    height: 6px;
    background: url('../Icons/pfeil_auswahl.svg') no-repeat center center / contain;
    -webkit-transition-property: width, height;
    transition-property: width, height;
    -webkit-transition-duration: .1s;
    transition-duration: .1s
}

.selection:hover .arrow {
    height: 7px;
}

.selectMenu:hover .smIcon {
    opacity: 0;
}

.selectMenu:hover .smIconHov {
    opacity: 1;
}

.smOptions {
    background: rgba(82,82,82, 0.9);
    position: absolute;
    top: 60px;
    overflow: hidden;
    color: var(--color-light);
    display: none;
    max-height: 400px;
    overflow-y: auto;
    width: 100%;
    text-align: left;
}

.smOption {
    display: block;
    width: 100%;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.smOption a {
    background: transparent url(../Icons/unternehmen_white.svg) no-repeat 10px center / 35px;
    display: block;
    width: 100%;
    padding: 19px 0px 19px 55px;
    text-decoration: none;
}
.smOption.teacher a {
    background-image:url(../Icons/lehrer_white.svg)
}
.smOption.pupils a {
    background-image:url(../Icons/schueler_white.svg)
}
.selection, .selection a, .smOption a {
    font-size: 15px;
    text-transform: uppercase;
    color: var(--color-light);
}

.smOption a:hover {
    background-color:#D5D5D5;
    color:var(--color-elvipurple);
    background-image: url(../Icons/unternehmen_purple.svg);
    !*	color: var(--color-darkgray1);*!
}
.smOption.teacher a:hover {
    background-image:url(../Icons/lehrer_purple.svg)
}
.smOption.pupils a:hover {
    background-image:url(../Icons/schueler_purple.svg)
}

@media (max-width: 1024px) {
    .mobile {
        display: inherit;
    }
    #mainmenu > label.burger {
        float: right;
        display: inline-block;
        border: 0;
        border-radius: 0;
        background: none;
        outline: 0;
        padding: 0;
        height: auto;
        cursor: pointer;
        border-bottom: 4px solid #fff;
        width: 28px;
        transition: border-bottom 1s ease-in-out;
        -webkit-transition: border-bottom 1s ease-in-out;
        margin: 20px 20px 0 0;
    }
    #mainmenu > label.burger::-moz-focus-inner {
        border: 0;
        padding: 0;
    }
    #mainmenu > label.burger:before {
        content: "";
        display: block;
        border-bottom: 4px solid #fff;
        width: 100%;
        margin-bottom: 5px;
        transition: -webkit-transform 0.5s ease-in-out;
        transition: transform 0.5s ease-in-out;
        transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
        -webkit-transition: -webkit-transform 0.5s ease-in-out;
    }
    #mainmenu > label.burger:after {
        content: "";
        display: block;
        border-bottom: 4px solid #fff;
        width: 100%;
        margin-bottom: 5px;
        transition: -webkit-transform 0.5s ease-in-out;
        transition: transform 0.5s ease-in-out;
        transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
        -webkit-transition: -webkit-transform 0.5s ease-in-out;
    }

    #mainmenu input[type="checkbox"].burger-check {
        display: none;
    }

    #mainmenu input[type="checkbox"].burger-check:checked ~
    .burger {
        border-bottom: 4px solid transparent;
        transition: border-bottom 0.8s ease-in-out;
        -webkit-transition: border-bottom 0.8s ease-in-out;
    }
    #mainmenu input[type="checkbox"].burger-check:checked ~
    .burger:before {
        transform: rotate(-405deg) translateY(1px) translateX(-3px);
        -webkit-transform: rotate(-405deg) translateY(1px) translateX(-3px);
        transition: -webkit-transform 0.5s ease-in-out;
        transition: transform 0.5s ease-in-out;
        transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
        -webkit-transition: -webkit-transform 0.5s ease-in-out;
    }
    #mainmenu input[type="checkbox"].burger-check:checked ~
    .burger:after {
        transform: rotate(405deg) translateY(-4px) translateX(-5px);
        -webkit-transform: rotate(405deg) translateY(-4px) translateX(-5px);
        transition: -webkit-transform 0.5s ease-in-out;
        transition: transform 0.5s ease-in-out;
        transition: transform 0.5s ease-in-out, -webkit-transform 0.5s ease-in-out;
        -webkit-transition: -webkit-transform 0.5s ease-in-out;
    }

    #mainmenu .navigation {
        background: var(--color-elvigray2);
        overflow: hidden;
        max-height: 0;
        -webkit-transition: max-height 0.5s ease-in-out;
        transition: max-height 0.5s ease-in-out;
        !* max-width: 35%; *!
        width: 330px;
        margin: 0 20px 0 auto;
        clear: both;
        top: 22px;
        position: relative;
        padding-bottom: 20px;
    }

    #mainmenu ul {
        background: var(--color-elvigray1);
    }

    #mainmenu input[type="checkbox"].burger-check:checked ~
    .navigation {
        max-height: 500px;
        -webkit-transition: max-height 0.5s ease-in-out;
        transition: max-height 0.5s ease-in-out;
    }

    #mainmenu .navigation ul > li {
        display: list-item;
        float: inherit;
        border-bottom: 1px solid #636463;
    }

    #mainmenu .navigation ul > li:last-child {
        border-bottom: 0;
    }

    #mainmenu ul li a {
        padding: 16px 20px;
        text-align: center;
        margin: 0;
    }

    #mainmenu .navigation > ul > li:first-child a {
        padding: 30px 20px 16px 20px;
    }
    #mainmenu .navigation > ul > li:last-of-type a {
        padding: 16px 20px 30px 20px;
    }

    #mainmenu ul.mobile li {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        width: 50%;
        float: left !important;
        background: #424242;
    }

    #mainmenu ul.mobile li {
        border-left: 1px solid #4a4a4a;
    }

    #mainmenu ul.mobile li a {
        text-align: left;
        padding-left: 40px;
    }

    #mainmenu ul.mobile li .mobNavIcon {
        display: inline-block;
        width: 35px;
        height: 25px;
        background-repeat: no-repeat;
        background-position: center center;
        -webkit-background-size: contain;
        background-size: contain;
        float: left;
        margin: 11px 10px 0 15px;

    }

    #mainmenu .navCompany {
        background-image: url('../Icons/unternehmen_white.svg');
    }
    #mainmenu .navTeacher {
        background-image: url('../Icons/lehrer_white.svg');
    }
    #mainmenu .navPupil {
        background-image: url('../Icons/schueler_white.svg');
    }
}

@media (max-width: 480px) {
    .headWrap {
        width: 100%;
    }
    #mainmenu .navigation {
        width: 100%;
        margin: 0;
    }
}*/

/*///////////////////////////////////////////////////////
// Button Styles
//////////////////////////////////////////////////////*/

@layer components.buttons {

}

.btnBase {
    font-family: var(--fontfamily-din);
    display: inline-block;
    position: relative;
    background-color: var(--color-elvigray2);
    color: var(--color-light);
    font-size: 18px;
    line-height: 13px;
    white-space: nowrap;
    padding: 8px 30px;
    text-decoration: none;
    cursor: pointer;
    border-radius: 5px;
    border: 0;
    transition: background-color 150ms ease, color 250ms ease;
    text-transform: uppercase;
}

.btn, .button-grau {
    font-family: var(--fontfamily-din);
    display: inline-block;
    position: relative;
    background: var(--color-light);
    font-size: 18px;
    padding: 15px 50px 12px 50px;
    text-decoration: none;
    cursor: pointer;
    border-radius: 5px;
    border: 0;
    transition: all 0.25s;
    text-transform: uppercase;
}


/* 2023 */

.btnSmall {
    background-color: var(--color-elvigray2);
    border: 1px solid var(--color-elvigray2);
    color: var(--color-light);
    border-radius: 3px;
    transition: background-color 150ms ease;
}
.btnSmallOutline {
    background-color: transparent;
    border: 1px solid var(--color-elvigray1);
    color: var(--color-elvigray1);
    border-radius: 3px;
}
@media (hover: hover) and (pointer: fine) {
    .btn:hover, .button-grau:hover {
        color: var(--color-light);
    }
    .btnSmall:hover, .btnSmall:focus, .btnSmallOutline:hover, .btnSmallOutline:focus {
        background: var(--button-background);
        border-color: var(--color-elvigray2);
        color: var(--color-light);
    }
    .btnSmallOutline:hover, .btnSmallOutline:focus {
        /*border-color: var(--color-elvigray1);*/
        border-color: transparent;
    }
}

/* Old */
a.button-grau {
    text-decoration: none;
    display: inline-block;
    margin: 15px 0px;
    color: var(--color-light) !important;
}
.btnOutline {
    font-family: var(--fontfamily-din);
    font-size: 18px;
    padding: 10px 60px;
    border: 2px solid #b9b9b9;
    color: #717171;
    display: inline-block;
    cursor: pointer;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0,0,0,0);
}
.btnOutline.small {
    padding: 5px 20px;
    background: #fff;
    color: #4e4e4e;
    font-size: 16px;
    border: 1px solid #d8d8d8;
}
.btnOutline:hover {
    background-color: rgba(210,210,210,0.5);
}
.btnHov {
    cursor: pointer;
    -webkit-transition: all 250ms;
    -moz-transition: all 250ms;
    -o-transition: all 250ms;
    transition: all 250ms;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
.headerBtn, .headerBtnBack {
    position: relative;
    z-index: 30;
}
.headerBtnBack {
    max-width: 960px;
}
.btnClose, .btnBack {
    position: absolute;
    display: block;
    background: var(--color-light);
    top: 30px;
    width: 40px;
    height: 40px;
    z-index: 30;
    border-radius: 50%;
    cursor: pointer;
}
.btnClose .icon, .btnBack .icon {
    display: inline-block;
    font-size: 22px;
    margin: 9px 0 0 9px;
}
.btnClose {
    right: 30px;
}
.contactForm .btnClose {
    right: 20px;
    top: 0;
}
.btnBack {
    background: url('../Icons/icon_back_arrow.svg') no-repeat center center / 25px 20px var(--color-light);
    left: 30px;
}
.mapsBtn {
    background-color: var(--color-elvigray2);
    color: var(--color-light) !important;
    transition: background-color 300ms;
    padding: 10px 30px 8px 30px;
}
.mapsBtn:hover {
    background-color: var(--button-hovercolor);
}
.download-link:after, .foto-link:after, .foto-link-lightbox:after, .video-link:after, .video-link-lightbox:after, .grafik-link:after, .grafik-link-lightbox:after, .link-360lightbox:after {
    position: relative;
    top: 1px;
    font-family: 'FontAwesome';
    text-decoration: none;
    display: inline-block;
    font-style: normal;
    font-variant: normal;
    -webkit-font-smoothing: antialiased;
    text-indent: 3px;
    font-size: 1em;
    padding-right: 6px;
}
.download-link:after {
    content: "\f019";
}
.foto-link:after, .foto-link-lightbox:after {
    content: "\f03e";
}
.video-link:after, .video-link-lightbox:after {
    content: "\f144";
    border: 2px solid;
    line-height: 1em;
    margin-left: 5px;
    font-size: 0.6em;
    padding: 0.1em 0.4em 0.1em 0;
    top: -1px;
    border-radius: 2px;
}
.grafik-link:after, .grafik-link-lightbox:after {
    content: "\f1fe";
}
.link-360lightbox:after {
    content: "";
    display: inline-block;
    background: url('../Icons/icon_360.svg') no-repeat center center / contain;
    width: 1.5em;
    height: 1em;
    margin-left: 7px;
    position: relative;
    top: 3px;
}

.btnText {
    text-decoration: none;
}
.btnExample {
    position: relative;
    font-family: var(--fontfamily-din);
    font-size: 24px;
    width: 100%;
    border: 10px solid var(--color-light);
    float: left;
    padding: 50px 45px;
}
.btnExample:hover {
    border: 10px solid var(--color-elvi-digital);
    background: var(--color-light);
}
.iconPlus {
    background: url('../Icons/icon_plus.svg') no-repeat center center / 20px 20px;
    width: 20px;
    height: 20px;
    float: left;
    margin: 4px 30px 0px 0px;
}
.gradientAnimated {
    -webkit-transition: all 2s;
    -moz-transition: all 2s;
    -ms-transition: all 2s;
    -o-transition: all 2s;
    transition: all 2s;
    -webkit-background-size: 300% 300% !important;
    background-size: 300% 300% !important;
    -webkit-animation: gradientAnimated 20s ease infinite;
    -moz-animation: gradientAnimated 20s ease infinite;
    -o-animation: gradientAnimated 20s ease infinite;
    animation: gradientAnimated 20s ease infinite;
}
@-webkit-keyframes gradientAnimated {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@-moz-keyframes gradientAnimated {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@-o-keyframes gradientAnimated {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
@keyframes gradientAnimated {
    0%{background-position:0% 51%}
    50%{background-position:100% 50%}
    100%{background-position:0% 51%}
}
.btn.animated {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
    -moz-animation: pulse 2s infinite;
    -webkit-animation: pulse 2s infinite;
    animation: pulse 2s infinite;
}
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(255,255,255,1);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(255,255,255,0);
    }
    100% {
        box-shadow: 0 0 0 50px rgba(255,255,255,0);
    }
}

@media (max-width: 560px) {
    a.btnClose, a.btnBack {
        top: 20px;
    }
    a.btnClose {
        right: 20px;
    }
    .btnClose {
        background: url('../Icons/icon_cancel.svg') no-repeat center center / 18px 18px var(--color-light);
        top: 20px;
        right: 20px;
    }
    .btnClose:hover {
        background: url('../Icons/icon_cancel_blue.svg') no-repeat center center / 18px 18px var(--color-light);
    }
    .tabSlidePrev, .tabSlideNext {
        width: 28px;
        height: 18px;
        -webkit-background-size: 28px 18px;
        background-size: 28px 18px;
        margin-top: -9px;
    }
}



/*///////////////////////////////////////////////////////
// Layout
//////////////////////////////////////////////////////*/
#main {
    width: 100%;
    min-height: 100vh;
    padding: 0;
    /* 
    min-height: calc(100vh - 54px);
    padding: 64px 0 0 0; 
    */
    overflow-x: hidden;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: -moz-flex;
    display: flex;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-flex-flow: column wrap;
    flex-flow: column wrap;
}
#main > div, #main > section {
    width: 100%;
}
.mainContent {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 73px);
}
.frame.frame-default.frame-type-header {
    display: none;
}
.modHeader {
    margin-bottom: 50px;
}
.modHeader h2 {
    margin: 0;
}
.moduleSec {
    padding: 0 30px;
}
.padTop50 {
    padding-top: 50px;
}
.padBottom50 {
    padding-bottom: 50px;
}
.padTop100 {
    padding-top: 100px;
}
.padBottom100 {
    padding-bottom: 100px;
}
.secHeader * {
    font-size: 32px;
    margin-bottom: 25px;
    line-height: 1.2em;
    text-transform: uppercase;
}
.align-center, .secHeader > *.align-center {
    text-align: center;
}

.bgGrey {
    background: url('../Icons/bg_grey.jpg') repeat center center;
    -webkit-backface-visibility: hidden;
}
.bgGrey.centerX, .bgWhite.centerX {
    -webkit-transform: translateX(-50%) translateZ(0px);
    transform: translateX(-50%)  translateZ(0px);
}
.bgWhite {
    background: var(--color-light);
}
.introText {
    width: 100%;
    position: relative;
}
.introText h1, .introText h2, .introText h3 {
    margin-bottom: 25px;
}
.introText p {
    font-size: 18px;
    line-height: 1.4em;
}

@media (min-width: 1025px) {
    .bgGrey {
        background-attachment: fixed;
    }
}
@media (max-width: 767px) {
    .moduleSec {
        padding: 0 20px;
    }
    .padTop50 {
        padding-top: 25px;
    }
    .padBottom50 {
        padding-bottom: 25px;
    }
    .padTop100 {
        padding-top: 50px;
    }
    .padBottom100 {
        padding-bottom: 50px;
    }
}


/*///////////////////////////////////////////////////////
// Form Styles
//////////////////////////////////////////////////////*/
input, textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    resize: none;
}
#main input[type="checkbox"] {
    position: absolute;
    z-index: 10;
    height: 32px;
    width: 32px;
    display: block;
    cursor: pointer;
    opacity: 0;
}
#main input[type="checkbox"] + label, #main input[type="checkbox"] + span {
    position: relative;
    display: block;
    background: transparent;
    height: auto;
    width: 100%;
    border-radius: 0;
    border: 0;
    cursor: inherit;
    padding-left: 45px;
}
#main input[type="checkbox"] + label:before, #main input[type="checkbox"] + span:before {
    position: absolute;
    content: "";
    display: block;
    left: 0;
    top: 0;
    width: 35px;
    height: 35px;
    background: #fff;
    border-radius: 3px;
    border: 1px solid #e5e5e5;
    cursor: pointer;
}
#main input[type="checkbox"].error + label:before, #main input[type="checkbox"].error + span {
    border: 1px solid #c0392b;
}
#main input[type="checkbox"]:checked + label, #main input[type="checkbox"]:checked + span {
    background: none;
}
#main input[type="checkbox"]:checked + label:before, #main input[type="checkbox"]:checked + span:before {
    background: url('../Icons/checkbox_bg.svg') no-repeat top left / 35px 35px;
}
#main input[type="checkbox"] + label span {
    position: relative;
    vertical-align: top;
    width: 100%;
    left: auto;
    top: 5px;
    padding: 0;
    line-height: 1.4em;
}


/* Radiobutton Styles */
input[type="radio"].radioLabel {
    display: none;
    cursor: pointer;
}
input[type="radio"].radioLabel:checked + label {
    position: relative;
}
input[type="radio"].radioLabel + label:before {
    content: "";
    display: flex;
    width: 24px;
    height: 24px;
    vertical-align: middle;
    margin: 2px 8px 0 0;
    background-color: var(--color-light);
    border: 1px solid #e5e5e5;
    border-radius: 15px;
    cursor: pointer;
}
input[type="radio"].radioLabel:checked + label:after {
    content: "";
    background-color: var(--color-elvi-companies);
    width: 12px;
    height: 12px;
    position: absolute;
    border-radius: 50%;
    left: 6px;
    top: 8px;
}
input[type="radio"].radioLabel + label.error:before, input[type="radio"].radioLabel.error + label:before {
    border: 1px solid #c0392b;
}


.radioGroup input[type="radio"] {
    position: absolute;
    opacity: 0;
}
.radioGroup input[type="radio"] + .radioLabel:before {
    content: "";
    background: var(--color-light);
    border-radius: 100%;
    border: 1px solid var(--color-elvigray2);
    display: flex;
    width: 22px;
    height: 22px;
    position: relative;
    margin-right: 12px;
    vertical-align: top;
    cursor: pointer;
    text-align: center;
    transition: all 250ms ease;
    box-sizing: content-box;
}
.radioGroup input[type="radio"]:checked + .radioLabel:before {
    background-color: var(--color-elvipurple);
    box-shadow: inset 0 0 0 5px var(--color-light);
}
.radioGroup input[type="radio"]:focus + .radioLabel:before {
    border: 1px solid var(--color-elvigray2);
}
.radioGroup input[type="radio"]:disabled + .radioLabel:before {
    box-shadow: inset 0 0 0 4px #f4f4f4;
    border: 1px solid var(--color-elvigray2);
    background: #b4b4b4;
}
.radioGroup input[type="radio"] + .radioLabel:empty:before {
    margin-right: 0;
}



input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: var(--color-elvigray1);
    opacity: 1;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: var(--color-elvigray1);
    opacity: 1;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: var(--color-elvigray1);
    opacity: 1;
}
input:-moz-placeholder, textarea:-moz-placeholder {
    color: var(--color-elvigray1);
    opacity: 1;
}

.formHead label {
    position: relative;
    float: left;
    margin-right: 20px;
}
.formHead label span {
    float: left;
}
.formHead.error input[type="radio"].radioLabel + label:before {
    border: 1px solid #c0392b;
}
.formLeft, .formRight {
    float: left;
    width: 49%;
}
.formLeft {
    margin-right: 2%;
}
.elviForms textarea, .elviForms input[type="text"], .elviForms input[type="email"], .formLeft input, .formRight input, .formRight textarea {
    width: 100%;
    padding: 12px 16px;
    color: var(--color-darkgray1);
    border: 1px solid #e5e5e5;
    background: #fff;
    margin: 0px 0px 12px -1px;
    float: left;
    font-size: 16px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 0;
    resize: none;
}
.formLeft input#conSameAddress,
.formLeft input#conSameAddress + label span {
    width:49%;
}
.formRight textarea {
    min-height: 230px;
}
@media (max-width: 767px) {
    .formLeft, .formRight {
        width: 100%;
    }
    .formRight.hidden {
        padding-top:2em;
    }
}


/*///////////////////////////////////////////////////////
// Mediabox
//////////////////////////////////////////////////////*/
.mediaBox {
    position: relative;
    background: url('../Icons/bg_grey.jpg') repeat top left;
    width: 100%;
    padding: 100px 0px;
}
.mediaBox a {
    color: var(--color-elvi-digital);
}
.mediaBox h3 {
    font-size: 32px;
    margin-bottom: 40px;
}
.mediaBox ol li {
    padding: 0px 0px 12px 0px;
}
.mediaBox .leftCol {
    width: 55%;
    margin-right: 3%;
}
.mediaBox .rightCol {
    text-align: center;
    width: 42%;
}
.mediaBox .rightCol img {
    width: 100%;
    height: auto;
    padding-right: 25px;
}
.mediaBox .teaserVideo {
    margin: 25px 0px;
}
.mediaBox .teaserVideo h3 {
    margin: 25px 0px;
}
.mbText {
    font-size: 17px;
    line-height: 1.5em;
    margin-bottom: 60px;
}
.mediaBox .btn {
    margin-right: 25px;
}
.mediaBox dt {
    background: url('../Images/plus_g.png') no-repeat top left;
    cursor:pointer;
    padding: 0 0 0 45px;
    min-height:32px;
}
.mediaBox dt:not(:first-child) {
    margin-top:15px;
}
.mediaBox dt.open {
    background: url('../Images/minus_g.png') no-repeat top left;
    color:#36a4a6;
}
.mediaBox dd {
    padding: 15px 0 25px 45px;
}
.mediaBox dd ul {
    margin:1em 0 0 1em;
}
.mediaBox dd ul li {
    padding:0 0 .5em 1em;
}
@media (max-width: 768px) {
    .mediaBox .rightCol img {
        width: 50%;
        float: left;
        padding-right: 0;
        margin: 0;
    }
    .teaserVideo {
        width: 50%;
        float: left;
    }
    .mediaBox {
        padding: 30px 0px;
    }
}

@media (max-width: 680px) {
    .mediaBox .rightCol img {
        width: 100%;
    }
    .teaserVideo {
        width: 100%;
    }
}

/*///////////////////////////////////////////////////////
// Footer
//////////////////////////////////////////////////////*/
#footer {
    background-color: var(--color-navibg);
    width: 100%;
    padding: 80px 30px 25px 30px;
    max-width: 100%;
    position: relative;
}
#footer-gradient {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #05A4B9 0%, #05A4B9 17%, #8ACBC1 34%, #2A82CC 50%, #8442F1 63% ,#FE2DD2 82%, #FFE86E 100%);
}

#footer .innerWrap{
    display: flex;
}
.footLeft, .footRight {
    position: relative;
    width: 50%;
}
.footRight {
    text-align: right;
}
#footer ul li {
    display: inline-block;
    list-style: none;
}
#footer ul li a {
    position: relative;
    color: var(--color-light);
    text-decoration: none;
    text-transform: uppercase;
}
#footer ul li a:after{
    content: "";
    position: absolute;
    left: 40%;
    bottom: -2px;
    width: 20%;
    height: 2px;
    background-color: var(--color-navihover);
    opacity: 0;
    transition: all 0.5s;
}
#footer ul li a:hover {
    color: var(--color-navihover);
}
#footer ul li a:hover:after{
    width: 100%;
    opacity: 1;
    left: 0;
}
@media (min-width: 1025px) {
    #footer ul li a {
        font-size: 1.125rem;
    }
}
.footerMenu {
    float: left;
    width: 100%;
    font-family: var(--fontfamily-din);
}

.socialMenu {
    position: relative;
    display: block;
    height: 18px;
}
.socialMenu ul {
    position: relative;
    display: block;
}
.socialMenu ul li {
    display: inline-block;
    float: none;
    margin-right: 30px;
}
.socialMenu ul li a:hover{
    opacity: 0.6;
}

.socialMenu ul li img {
    position: relative;
    display: block;
    width: auto;
    height: 18px;
}

.footerMenu ul li {
    margin-right: 20px;
}

#footer .socialMenu ul li {
    margin-right: 35px;
}
@media (min-width: 1025px) {
    #footer .socialMenu ul li {
        margin-right: 50px;
    }
}

#footer .socialMenu ul li img {
    width: auto;
    height: 26px;
}

#footer .footerText {
    position: relative;
    width: 100%;
    color: var(--color-light);
    margin: 120px auto 20px auto;
}

@media (max-width: 800px) {
    #footer {
        padding: 49px 15px 22px 15px;
    }
    #footer .innerWrap{
        flex-wrap: wrap;
    }
    #footer .footerText {
        text-align: center;
        margin: 40px auto 20px auto;
    }
}
@media (max-width: 640px) {
    .footLeft, .footRight {
        width: 100%;
    }
    .footLeft {
        margin: 15px 0 36px 0;
    }
    .footRight {
        margin-bottom: 15px;
    }
    .footerMenu ul, .socialMenu ul {
        display: block;
        width: 100%;
        text-align: center;
    }
    #footer ul li {
        display: inline-block;
        float: none;
    }
    #footer ul li:last-child {
        margin-right: 0;
    }
}

/*///////////////////////////////////////////////////////
// Plugins
//////////////////////////////////////////////////////*/

/*/// Slick ///*/
.slick-slider {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease;
    -webkit-transition: opacity 1s ease;
    transition-delay: 2s;
    /*max-height: 0;*/
    overflow: hidden;
}
.slick-slider.slick-initialized {
    visibility: visible;
    opacity: 1;
    max-height: 100%;
    overflow: visible;
}
ul.slick-dots li {
    display:inline-block;
}
#TB_window {
    top: 15%;
}
.slideNav {
    margin-top: 50px;
}
.slick-dotted + .slideNav {
    display: inline-block;
    width: 100%;
    text-align: center;
}
.slideDots {
    position: relative;
    top: -8px;
    display: inline-block;
    margin: 0 25px;
    max-width: 210px;
}
.slick-dots li {
    margin: 0 5px;
}
.slick-dots li button {
    background: var(--color-elvigray3);
    border-radius: 50%;
    border: 0;
    font-size: 0px;
    width: 11px;
    height: 11px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -ms-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}
.slick-dots li button::before {
    display: none;
}
.slidePrev, .slideNext {
    position: relative;
    display: inline-block !important;
    width: 11px;
    height: 18px;
    cursor: pointer;
}
.slidePrev svg, .slideNext svg {
    width: 100%;
    height: auto;
    -webkit-transition: all 500ms;
    -moz-transition: all 500ms;
    -ms-transition: all 500ms;
    -o-transition: all 500ms;
    transition: all 500ms;
}
.slick-hidden {
    display: none !important;
}
.slick-disabled {
    opacity: 0.3;
    cursor: default;
    color: var(--color-darkgray1) !important;
}



/*/// Lightgallery ///*/
.lg-backdrop {
    background: rgba(0,0,0,0.75) !important;
}
.lg-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999999;
}
.lg-sub-html, .lg-toolbar {
    background: transparent;
}
.lg-toolbar .lg-icon {
    color: var(--color-light);
    right: 30px;
    position: relative;
    top: 20px;
    font-size: 36px;
}
#lg-counter {
    color: var(--color-light);
}
.ytp-watermark {
    display: none !important;
}
@media (max-width: 680px) {
    .lg-toolbar .lg-icon {
        right: 15px;
        top: 0px;
    }
    .lg-sub-html, .lg-toolbar {
        background: rgba(0,0,0,.45);
    }
}


/*///////////////////////////////////////////////////////
// Plugins
//////////////////////////////////////////////////////*/
/*
 * Container style
 */
.ps {
    overflow: hidden !important;
    -ms-overflow-style: none;
    touch-action: auto;
    -ms-touch-action: auto;
}

/*
 * Scrollbar rail styles
 */
.ps__rail-x {
    display: none;
    opacity: 0;
    transition: background-color .2s linear, opacity .2s linear;
    -webkit-transition: background-color .2s linear, opacity .2s linear;
    height: 15px;
    /* there must be 'bottom' or 'top' for ps__rail-x */
    bottom: 0;
    /* please don't change 'position' */
    position: absolute;
}

.ps__rail-y {
    display: none;
    opacity: 0;
    transition: background-color .2s linear, opacity .2s linear;
    -webkit-transition: background-color .2s linear, opacity .2s linear;
    width: 15px;
    /* there must be 'right' or 'left' for ps__rail-y */
    right: 0;
    /* please don't change 'position' */
    position: absolute;
}

.ps--active-x > .ps__rail-x,
.ps--active-y > .ps__rail-y {
    display: block;
    background-color: transparent;
}

.ps:hover > .ps__rail-x,
.ps:hover > .ps__rail-y,
.ps--focus > .ps__rail-x,
.ps--focus > .ps__rail-y,
.ps--scrolling-x > .ps__rail-x,
.ps--scrolling-y > .ps__rail-y {
    opacity: 0.6;
}

.ps .ps__rail-x:hover,
.ps .ps__rail-y:hover,
.ps .ps__rail-x:focus,
.ps .ps__rail-y:focus,
.ps .ps__rail-x.ps--clicking,
.ps .ps__rail-y.ps--clicking {
    background-color: #eee;
    opacity: 0.9;
}

/*
 * Scrollbar thumb styles
 */
.ps__thumb-x {
    background-color: #aaa;
    border-radius: 6px;
    transition: background-color .2s linear, height .2s ease-in-out;
    -webkit-transition: background-color .2s linear, height .2s ease-in-out;
    height: 6px;
    /* there must be 'bottom' for ps__thumb-x */
    bottom: 2px;
    /* please don't change 'position' */
    position: absolute;
}

.ps__thumb-y {
    background-color: #aaa;
    border-radius: 6px;
    transition: background-color .2s linear, width .2s ease-in-out;
    -webkit-transition: background-color .2s linear, width .2s ease-in-out;
    width: 6px;
    /* there must be 'right' for ps__thumb-y */
    right: 2px;
    /* please don't change 'position' */
    position: absolute;
}

.ps__rail-x:hover > .ps__thumb-x,
.ps__rail-x:focus > .ps__thumb-x,
.ps__rail-x.ps--clicking .ps__thumb-x {
    background-color: #999;
    height: 11px;
}

.ps__rail-y:hover > .ps__thumb-y,
.ps__rail-y:focus > .ps__thumb-y,
.ps__rail-y.ps--clicking .ps__thumb-y {
    background-color: #999;
    width: 11px;
}

/* MS supports */
@supports (-ms-overflow-style: none) {
    .ps {
        overflow: auto !important;
    }
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
    .ps {
        overflow: auto !important;
    }
}

.ps__rail-x {
    display: none !important;
}

/*///////////////////////////////////////////////////////
// Overlay
//////////////////////////////////////////////////////*/
.overlay, .navOverlay {
    position: fixed;
    max-width: 0%;
    max-height: 0%;
    opacity: 0;
    overflow: auto;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 500;
    background: rgba(0,0,0,0.35);
    transition: opacity 500ms;
}
.overlay.dark {
    z-index: 1000;
    background: rgba(0,0,0,0.85);
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    flex-flow: column wrap;
    justify-content: center;
}
.overlay.active, .navOverlay.active {
    max-width: 100%;
    max-height: 100%;
    opacity: 1;
}
.overlay .overlayInner {
    position: absolute;
    width: 100%;
    min-width: 320px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding-bottom: 40px;
}
.overlay .overlayInnerClose {
    position: absolute;
    right: 30px;
    z-index: 30;
    top: 30px;
    cursor: pointer;
}
.overlay .icon-close {
    font-size: 24px;
}
.overlay .icon-close:before {
    color: #FFFFFF;
}
.overlay .overlayInner img {
    width: 100%;
    height: auto;
}
.overlay .overlayContent {
    text-align: center;
}
@media (max-width: 960px) {
    .overlay .overlayInner {
        padding: 0 30px 40px 30px;
    }
    .overlayInnerClose {
        top: -21px;
        right: 8px;
    }
}
@media only screen and (max-height: 500px) and (orientation: landscape) {
    .overlay .overlayInner {
        top: 20px;
    }
}
@media (max-width: 767px) {
    .overlay .overlayInner {
        padding: 0 15px;
        top: 30px;
        -ms-transform: translate(-50%, 0);
        transform: translate(-50%, 0);
    }
}
/*@media (max-height: 560px) {
    .overlay .overlayInner {
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
    }
}*/


/*///////////////////////////////////////////////////////
// Overlay Styles
//////////////////////////////////////////////////////*/
.overlayContent > div {
    display: none;
}
.wonderChat {
    display: none;
    position: relative;
    width: 100%;
    height: 600px;
    overflow: hidden;
    margin: 0 0 48px 0;
}
.wonderChat iframe {
    height: 600px;
}


/*///////////////////////////////////////////////////////
// Misc
//////////////////////////////////////////////////////*/

/* Lity Lightbox Custom Styles */
.lity-image img {
    max-width: 1200px;
    width: 100%;
    padding: 50px 0;
}
@media (max-width: 1280px) {
    .lity-image img {
        padding: 30px;
    }
}
@media (max-width: 768px) {
    .lity-image img {
        padding: 30px 10px;
    }
}