.headingcontainer {
    background-color: #192437;
}

.bg-dark-blue {
    background-color: #192437;
}

.headingcontainer h2 {
    text-align: right;
    font-family: jaf-domus-titling-web, serif;
    font-weight: 500;
    font-size: 47px;
    color: white;
}

.headingcontainer h3, #outline-text {
    text-align: left;
    font-family: jaf-domus-titling-web, serif;
    font-weight: 500;
    font-size: 47px;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px white;
}

.image-fullwidth {
    width: 100vw;
    /*width: auto;
    min-height: 300px;*/
}


.headingcontainer h2, .headingcontainer h3{
    line-height: 2.5rem;
}

.headingcontainer h4 {
    padding: 0 !important;
    text-align: center;
    font-family: indie-flower, cursive;
    font-size: 35px;
    color: #0A6EE7;
    line-height: 1em;
}

.sub-headingcontainer {
    background-color: #192437;
    padding-left: 0;
    padding-right: 0;
}

.sub-headingcontainer .btn-white {
    padding: 0.5rem 2.5rem;
}

.btn-white:hover {
    color: white;
    background-color: #0a6ee7;
}

.sub-headingcontainer h2 {
    text-align: left;
    font-family: jaf-domus-titling-web, serif;
    font-weight: 300;
    font-size: 42px;
    color: white;
    line-height: 3rem;
}

#orange-outline-text {
    text-align: right;
    font-family: jaf-domus-titling-web, serif;
    font-weight: 500;
    font-size: 42px;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px #F2C14A;
}

.btn-white {
    color: #373737;
    background-color: white;
    border-color: transparent;
    opacity: 100;
    vertical-align: middle;
    border-radius: 38px;
    font-family: din-2014, serif;
    font-weight: 100 !important;
    font-size: 22px;
    padding: 0.5rem 4.5rem;
}

.btn-blue {
    color: #fff;
    background-color: #0a6ee7;
    border-color: transparent;
    opacity: 100;
    vertical-align: middle;
    border-radius: 38px;
    font-family: din-2014, serif;
    font-weight: 100 !important;
    font-size: 22px;
    padding: 0.5rem 4.5rem;
}

.btn-outline-white {
    color: white;
    background-color: transparent;
    border-color: white;
    opacity: 100;
    vertical-align: middle;
    border-radius: 38px;
    font-family: din-2014, serif;
    font-size: 22px;
    padding: 0.5rem 4.5rem;
}

.btn-outline-white:hover {
    color: white;
    background-color: #0a6ee7;
}

.btn-darkblue {
    color: white;
    background-color: #192437;
    border-color: transparent;
    opacity: 100;
    vertical-align: middle;
    border-radius: 38px;
    font-family: din-2014, serif;
    font-size: 22px;
    padding: 0.5rem 2.5rem;
}

.pink-background h4 {
    width: fit-content;
    text-align: center;
    padding: 5px 15px 5px 15px;
    color: white;
    background-color: #db026b;
    border-radius: 38px;
    font-family: din-2014, serif;
    font-size: 16px;
}

.pink-color h3 {
    color: #db026b !important;
}

.heptateam h2 {
    font-size: 30px;
    font-weight: 400;
}

p {
    margin-bottom: 0;
}

.superstars img, .superstars-2 img {
    width: 100vw;
}

.rotate-img h5 {
    text-align: center;
    font-family: indie-flower, cursive;
    font-size: 25px;
    color: #02d8fd;
    justify-self: end;
}

.rotate-img {
    margin-bottom: -91px;
    transform: rotate(5deg);
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 100%;
}

.butpurple h4 {
    background-color: #7d0da3;
}

.butblue h4 {
    background-color: #0a6ee7;
}

.butgrey {
    background-color: #192437;
    color: white;
    padding: 0.5rem 2rem;
    height: fit-content;
}

#grey-outline-text {
    text-align: left;
    font-family: jaf-domus-titling-web, serif;
    font-weight: 500;
    -webkit-text-fill-color: transparent;
    -webkit-text-stroke: 2px #373737;
    word-break: break-word;
}

#indie-flower {
    padding: 0 !important;
    text-align: left;
    font-family: indie-flower, cursive;
    font-size: 25px;
    color: #0A6EE7;
    line-height: 1em;
}

#small-h3 {
    color: #373737;
    font-family: din-2014, serif;
    font-size: 22px;
    font-weight: 600;
}

#sidenote {
    margin-top: 200px;
    transform: rotate(-5deg);
    text-align: center;
    font-family: indie-flower, cursive;
    font-size: 25px;
    color: #02d8fd;
    justify-self: end;
}

.butred h4 {
    background-color: #aa0d16;
    min-width: 260px;
}

.heptateam img {
    width: 100%;
}

.heptateam em {
    font-style: normal;
    font-weight: bold;
}

.github-profiles .carousel-indicators .active {
    background-color: #7D0DA3;
}

.align-items-center {
    margin: 0 auto;
}

.lg-show-flex {
    display: none;
}

.lg-show {
    display: none;
}

.card-dark-blue-bg .card-title {
    font-family: din-2014, serif;
    font-size: 29px;
    padding-bottom: 10px;
    color: white;
    font-weight: 100;
    line-height: 1.4em;
    text-align: center;
}

.card-dark-blue-bg .card {
    height: 432px;
    background-color: #192437;
    justify-content: center;
    align-content: center;
}

.card {
    border-radius: 5px;
}

.card-dark-blue-bg img {
    width: 15%;
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
}

.p-tag-white {
    color: white;
    text-align: left;
}

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

.cg-r2-c3 {
    display: grid;
    grid-template-rows: 50% 50%;
    grid-template-columns: 50% 50%;
}

.cg-r1-c3 {
    display: grid;
    grid-template-rows: 400px;
    grid-template-columns: 50% 50%;
}

.cg-col-1 {
    align-self: baseline;
    grid-column-start: 1;
    grid-column-end: 2;
}

.cg-col-2 {
    align-self: baseline;
    grid-column-start: 2;
    grid-column-end: 3;
}

.cg-col-3 {
    align-self: end;
    grid-row: 2/3;
    grid-column: 1/span2;
}

.spalte-1 {

}

.spalte-2 img {
    grid-column: 2/3;
    height: 100%;
    height: -moz-available; /* WebKit-based browsers will ignore this. */
    height: -webkit-fill-available; /* Mozilla-based browsers will ignore this. */
    height: fill-available;
}

.vw100 {
    width: 100vw;
}

.vw25 {
    width: 25vw;
}

.break-word {
    word-break: break-all;
}

.sidenote-margin {
    margin-top: 50px !important;
}

.position-cards {
    display: block;
    justify-content: space-between;
    max-width: 820px;
    margin-top: -60px;
}

.btn-square {
    -webkit-box-shadow: 0px 0px 18px -9px rgba(0, 0, 0, 0.83);
    box-shadow: 0px 0px 18px -9px rgba(0, 0, 0, 0.83);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 240px;
    height: 240px;
    vertical-align: middle;
    border-radius: 10px;
}

.shaddow {
    -webkit-box-shadow: 0px 0px 18px -9px rgba(0, 0, 0, 0.83);
    box-shadow: 0px 0px 18px -9px rgba(0, 0, 0, 0.83);
}

.btn-square:hover {
    -webkit-box-shadow: 0px 0px 18px -2px rgba(0, 0, 0, 0.83);
    box-shadow: 0px 0px 18px -2px rgba(0, 0, 0, 0.83);
}

.no-shadow:hover {
    -webkit-box-shadow: 0px 0px 18px -2px rgba(0, 0, 0, 0.42);
    box-shadow: 0px 0px 18px -2px rgba(0, 0, 0, 0.42);
}

.btn-square h5 {
    color: white;
    font-size: 21px;
    font-family: jaf-domus-titling-web, serif;
    font-weight: 500;
}

.btn-square p {
    color: white;
    font-size: 17px;
    font-family: din-2014, serif;
    font-weight: 100;
}

.sq-blue {
    color: white;
    background-color: #0a6ee7;
}

.sq-white {
    color: #373737;
    background-color: white;
}

.sq-white h5 {
    color: #373737;
}

.sq-white p {
    color: #373737;
}

.btn-square img {
    width: 35%;
}

.heigh-blue-bg {
    height: 350px;
}

.sq-btn-grid {
    grid-template-columns: 0.8fr 1fr;
    max-width: 900px;
}


.challenge-accepted {
    height: auto;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.challenge-accepted img{
    width: 140px;
}

.lvl h4 {
    font-size: 30px;
    line-height: 1.0;
}

.lvl li {
    list-style-type: decimal;
}

.ready-sizing {
    transform: rotate(5deg);
    display: grid;
    grid-template-rows: 100%;
    grid-template-columns: 100%;
}

.ready-sizing h5 {
    font-size: 25px;
    text-align: center;
    font-family: indie-flower, cursive;
    color: #02d8fd;
    justify-self: end;
}

.no-border {
    border: none;
    border-bottom: 2px solid;
    border-radius: 0;
    background-color: transparent;
}

.shaddow-box {
    font-family: din-2014, serif;
    background-color: white;
    border: 1px solid white;
    border-radius: 10px;
    -webkit-box-shadow: 0px 0px 11px 4px rgba(0, 0, 0, 0.05);
    box-shadow: 0px 0px 11px 4px rgba(0, 0, 0, 0.05);
    grid-template-columns: 1fr 0.6fr;
    max-width: 1130px;
    grid-gap: 15em;
}

.your-challenge {
    margin-top: 150px;
}

.shadow-softer {
    -webkit-box-shadow: 0px 0px 16px 6px rgba(227,227,227,0.58);
    box-shadow: 0px 0px 16px 6px rgba(227,227,227,0.58);
    border: none;
}

.form-shadow-box {
    font-family: din-2014, serif;
}

.ac-end {
    align-content: end;
}

.form-check a, .stroked-box a {
    color: #373737;
    font-weight: 100;
    text-decoration: underline;
}

.stroked-box {
    border: 1px dashed #373737;
    border-radius: 10px;
    width: 280px;
    height: 172px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.stroked-box p {
    font-size: 21px;
    font-weight: 100;
    text-align: center;
}

.space-even {
    justify-content: space-evenly !important;
}

.grid-center-sm {
    display: grid;
    justify-content: center;
    align-items: center;
}

.fixed-width-190 {
    width: 190px;
}

.flex-sm-check {
    display: flex;
}

.flex-sm-check em {
    font-style: normal;
    font-weight: 600;
}

.flex-sm-check img {
    width: 20px;
    align-items: flex-start;
}

.flex-sm-check p {
    padding: 0;
}

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

    .heigh-blue-bg {
        height: 450px;
        padding-top: 40px;
    }

    .d-grid-md {
        display: grid;
    }

    .lg-show-flex {
        display: flex;
    }

    .lg-show {
        display: block;
    }

    .sm-show {
        display: none;
    }

    .headingcontainer h3, .headingcontainer h1, .headingcontainer h2 {
        text-align: center;
    }

    .rotate-img h5 {
        font-size: 35px;
    }

    .team-cards h5 {
        font-weight: 300;
    }

    .team-cards p {
        font-size: 17px;
        font-weight: 100;
    }

    .name {
        line-height: 0em;
    }

    .cg-r2-c3-md {
        grid-template-columns: 40% 50%;
    }

    .p-tag-white {
        text-align: center;
    }

    .sub-headingcontainer h2 {
        text-align: center;
    }

    .image-fullwidth {
        width: 100vw;
    }

}

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

    .heigh-blue-bg {
        height: 350px;
        padding-top: 40px;
    }

    .position-cards {
        display: block;
        justify-content: space-between;
        max-width: 820px;
        margin-top: -120px;
    }

    .d-grid-lg
        .d-sm-none-lg {
            display: none;
    }

    .d-grid-lg {
        display: grid;
    }

    .gt-row-2-lg {
        grid-template-rows: 1fr;
    }

    .gt-col-1-lg {
        grid-template-columns: 1.5fr 2.5fr 0.5fr;
    }

    .gt-col-2-lg {
        grid-template-columns: 1fr 36% 1fr;
    }

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

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

    .rotate-img {
        margin-bottom: -30px;
    }

    .superstars {
        grid-column-start: 3;
    }

    .superstars img {
        width: 50vw;
    }

    .heptateam-grid {
        grid-row-start: 1;
        grid-column-start: 2;
        align-self: center;
    }

    .team-cards {
        grid-template-rows: 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .col-row {
        grid-template-columns: 13% 25% 1fr;
    }


    .col-start-1 {
        grid-column-start: 1;
    }

    .col-start-2 {
        grid-column-start: 2;
    }

    .col-start-3 {
        grid-column-start: 3;
    }

    .bg-img-ausbilder {
        background-image: url("../../../img/karriere/ausbilder.jpg");
        background-repeat: no-repeat;
    }

    .bg-img-code {
        background-image: url("../../../img/karriere/code-hard-work-hard.jpg");
        background-repeat: no-repeat;
    }

    .image-fullwidth {
        width: auto;
    }

    .sub-headingcontainer h2 {
        text-align: left;
    }

    .p-tag-white {
        text-align: left;
    }

    .we-offer {
        grid-template-columns: 0.5fr 1fr;
    }

    #grey-outline-text {
        text-align: left;
        font-family: jaf-domus-titling-web, serif;
        font-weight: 500;
        font-size: 47px;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 2px #373737;
    }

    .just-self-end {
        justify-self: end;
    }

    .position-cards {
        display: flex;
        justify-content: space-between;
        max-width: 820px;
        margin-top: -120px;
    }

}

.teaserbild {
    min-height: 150px;
    background-color: #fff;
}

.popup-ausbildung {
    position: absolute;
    top: 10%;
    right: 10%;
    font-family: 'jaf-domus-titling-web';
    font-weight: 600;
    font-size: 20px;
    line-height: 22px;
    color: #fff;
    background-color: #7d0da3;
    padding: 10px 10px 15px 10px;
    border-radius: 15px;
    z-index: 99;
}

@media (min-width: 700px) {

    .popup-ausbildung {
        top: 18%;
        right: 15%;
        font-size: 30px;
        line-height: 32px;
        padding: 20px 20px 25px 20px;
        border-radius: 25px;
    }
}

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

    .place-in-grid {
        grid-column: 1;
        grid-row: 2;
    }

    .gap-col-grid-3 {
        grid-row-gap: 3rem;
    }

}