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

.innerWrap {
    position: relative;
    width: 100%;
    max-width: 1440px;
    padding: 0 30px;
    margin: 0 auto;
    z-index: 10;
}
@media (max-width: 767px) {
    .innerWrap {
        padding: 0 20px;
    }
}

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

/*///////////////////////////////////////////////////////
// Navigation
//////////////////////////////////////////////////////*/
#mainmenu {
    display: flex;
    justify-content: center;
    font-family: "DINWeb-CondBold", Arial, Helvetica, sans-serif;
    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;
    }
}

/*///////////////////////////////////////////////////////
// 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;
}
.footerMenu ul {
    margin: 0 !important;
}
@media (min-width: 1025px) {
    #footer ul li a {
        font-size: 1.125rem;
    }
}
.footerMenu {
    float: left;
    width: 100%;
    font-family: 'DINWeb-CondBold', Arial, Helvetica, sans-serif;
}

.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;
    }
}