body {
    background-color: #E7E7E7;
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
}

::-webkit-scrollbar-track
{
    /* border: 1px solid black; */
    background-color: #E7E7E7;
}

::-webkit-scrollbar
{
    width: 10px;
    background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
    background-color: #000000;
}

h1 {
    padding: 0;
    margin: 0;
}

h1, h2, h3, h4, span, a, strong, li {
    font-family: 'Inter', sans-serif;
    margin: 0;

}

section {
    width: 100%;

}

#wrapper {
    width: inherit;

}

a {
    color: black;
    text-decoration: none;
}

#headline {

    display: flex;
    justify-content: space-between;
    height: 6.11vh;
    padding: 0 2.75vh 1.7vh 2.75vh;
    position: sticky;
    top: 0;
    z-index: 999;
    background-color: #E7E7E7;

}

#headline .left {
    display: flex;
    flex-direction: column;
    justify-content: end;
}

#headline .left h1, #wrapper #headline .left span {
    font-size: 1.63vh;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    line-height: 1vh;

}

#headline .right span {
    font-size: 1.63vh;
    line-height: 2.04vh;
}

#headline .right {
    display: flex;
    align-items: flex-end;
}

#headline .left:nth-child(2) {
    display: flex;
    align-items: flex-end;
}


#nav .nav-item {

    border-top: 1px solid black;
    height: 6.82vh;
    display: flex;
    align-items: center;
    padding: 0 2.75vh;
    transition: 0.3s ease;
    cursor: pointer;
}

/*#wrapper #nav .nav-item.first-child {*/
/*    border-top: 2px solid black;*/
/*}*/

#nav .nav-item:first-child {
    border-bottom: 0px solid black;
}

#nav .nav-item:last-child {
    border-bottom: 1px solid black;
}

#nav .nav-item span {
    font-weight: 900;
    font-size: 4.07vh;
    font-family: 'Inter', sans-serif;
}

.num {
    width: 15.58vh;
}

#nav .nav-item .num span {
    font-size: 3.05vh;
}

#nav .nav-item:hover {

    background-color: black;
    color: white;
}

.content {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    width: inherit;
}

.nav-item.active {
    background-color: black;
    color: white;
}

.secondary-headline-left, .secondary-headline-right {

    display: flex;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
    align-items: end;

}

.secondary-headline-left span, .secondary-headline-right span {

    cursor: pointer;
    font-family: 'Inter', sans-serif;
    font-weight: 400;
}

.secondary-headline-right {
    flex-direction: row;
}

#wrapper #headline.secondary > .left , #wrapper #headline.secondary > .right {
    display: none;
}

#headline.secondary > .secondary-headline-left, #headline.secondary > .secondary-headline-right {

    display: flex;
    align-items: flex-end;

}

.breadcrumbs-divider {
    content: "/";
    margin: 0 0.5vh;
}
.content-wrapper {

    padding: 2vh;
    height: 100%;
    width: inherit;
}

.content-wrapper .video-container {
    height: 80vh;
    display: flex;
    align-items: center;
}


video {

    object-fit: contain;
    height: 80%;
    width: 100%;

}

.content-wrapper .image-text-container {
    height: 98vh;
    width: inherit;
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
}

.content-wrapper .image-text-container .image-container {
    height: 80vh;
}

.content-wrapper .image-text-container .image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.content-wrapper .image-text-container .title-desc-wrapper {
    width: 45%;
    height: 73.93vh;
}

.content-wrapper .image-text-container .title-desc-wrapper .text-container {
    display: flex;
    flex-direction: column;

}

.content-wrapper .image-text-container .title-desc-wrapper .text-container .text-header h2 {

    font-size: 5.6vh;
    line-height: 5.3vh;
    padding: 0;
    font-weight: 250;

}

.content-wrapper .image-text-container .title-desc-wrapper .text-container .text-content {
    padding-left: 8vh;
    width: 70%;
}

.content-wrapper .image-text-container .title-desc-wrapper .text-container .text-content .title-maincontent {
    margin-bottom: 2vh;
    width: 80%;
}

.content-wrapper .image-text-container .title-desc-wrapper .text-container .text-content .title-maincontent h3 {
    margin: 0;
    line-height: 3vh;
    font-size: 2.55vh;
}

.content-wrapper .image-text-container .title-desc-wrapper .text-container .text-content .title-maincontent span {
    font-size: 1.83vh;
}

.content-wrapper .image-text-container .title-desc-wrapper .text-container .text-content .sub-title-text {

    margin-bottom: 2vh;
}

.content-wrapper .image-text-container .title-desc-wrapper .text-container .text-content .sub-title-text h4 {

    margin: 0;

}

.content-wrapper .image-text-container .title-desc-wrapper .text-container .text-content .sub-title-text ol {
    margin: 0;
    padding-left: 2vh;

}

.content-wrapper .img-container {
    height: 85vh;
    width: 100%;
    display: flex;
    align-items: center;
}

.content-wrapper .img-container img {
    height: 85%;
    width: 100%;
    object-fit: contain;
}

/*#kino .text-header h2 {*/
/*    color: #FF0083;*/
/*    margin-bottom: 5vh;*/
/*    font-weight: 200;*/
/*}*/

/*#mars .text-header h2 {*/
/*    color: #CE2E4A;*/
/*    margin-bottom: 5vh;*/
/*    font-weight: 200;*/
/*}*/

.app-icon-container {
    margin-top: 2.14vh;
    display: flex;
    align-items: end;

}

.app-icon-container .app-icon-logo {
    margin-right: 4.38vh;
}

.smoll-icon-container {
    display: flex;
    bottom: 5vh;
    right: 10vh;
    height: 3.16vh;
    width: 7.64vh;

}

#hs .text-header h2 {
    color: #005389;
    margin-bottom: 5vh;
    font-weight: 200;
}

.text-header h2 {
    font-weight: 200;
}



.content-wrapper .sketches {

    height: 85vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

}

.content-wrapper .sketches img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.big-img-container {
    height: 100%;
    width: 100%;
    margin: 1.5vh 0;
}

.big-img-container img {
    height: 100%;
    width: 100%;
    object-fit: contain;
}

.prototyp-icon-container {
    position: absolute;
    bottom: 4.89vh;
    right: 5.2vh;
    height: 14.05vh;
    width: 14.46vh;
    cursor: pointer;
}

.prototyp-icon-container img {
    height: 100%;
    width: 100%;
}


/* MOBILE */
@media (max-width: 1024px) {

    #headline {
        height: 18vw;
        padding: 0 3vw 3vw 3vw;
    }

    #headline .left h1, #headline .right span {
        font-size: 4vw;
        line-height: unset;
    }

    .secondary-headline-left, .secondary-headline-right {
        display: none;
    }

    #wrapper #nav .nav-item {
        padding: 0 3vw;
        height: 13vw;
        border-top: 1px solid black;
        border-bottom: none;
    }

    #wrapper #nav .nav-item:first-child {
        border-bottom: none;
        border-top: 1px solid black;
    }

    #wrapper #nav .nav-item:last-child {
        border-bottom: 1px solid black;
    }

    #wrapper #nav .nav-item .num {
        width: 21vw;
    }

    #wrapper #nav .nav-item span {
        font-size: 3.7vh;
    }

    #wrapper #nav .nav-item .num span {
        font-size: 2.78vh;
    }

    .content-wrapper {
        padding: 3vw;
    }

    .content-wrapper .video-container {
        height: 140vw;
    }

    .content-wrapper .video-container video {
        object-fit: cover;
        height: 85%;
    }

    .short-desc-container {
        color: #777777;
        margin-top: 3vw;
        font-size: 3.7vw;
    }

    .content-wrapper .image-text-container {
        flex-direction: column-reverse;
        height: unset;
        margin: unset;
    }

    .content-wrapper .image-text-container .text-container {
        width: 100%;
        margin-bottom: 5vw;
    }
    .content-wrapper .image-text-container .text-container .text-header h2 {
        font-size: 6vw;
        line-height: 6vw;
        margin-bottom: 7vw;
        margin-top: 7vw;
    }

    .content-wrapper .image-text-container .text-container .text-content {
        padding-left: 0;
        width: 100%;
    }

    .content-wrapper .image-text-container .text-container .text-content .title-maincontent {
        width: 100%;
        margin-bottom: 10vw;
    }
    .content-wrapper .image-text-container .text-container .text-content .title-maincontent h3 {
        font-size: 4vw;
    }

    .content-wrapper .image-text-container .text-container .text-content .title-maincontent span {
        line-height: 5.2vw;
        font-size: 3.8vw;
    }

    .app-icon {
        margin-top: 0;
        height: 20vw;
    }

    .app-icon img {
        height: 100%;
    }

    .content-wrapper .image-text-container .image-container {
        width: 100%;
    }

    .content-wrapper .image-text-container .image-container img {
        object-fit: cover;
    }

    .content-wrapper .img-container, .content-wrapper .sketches {
        height: 100%;
        margin-top: 5vw;
    }

    .content-wrapper .image-text-container .text-container .text-content .sub-title-text ol {
        padding-left: 6vw;
    }

    .content-wrapper .image-text-container .text-container .text-content .sub-title-text h4 {
        margin-bottom: 1vw;
    }

    li {
        line-height: 5.2vw;
    }

    /*.big-img-container {*/
    /*    height: 140vw;*/
    /*}*/

    /*.big-img-container img {*/
    /*    object-fit: cover;*/
    /*}*/

}