@font-face {
    font-family: "PoppinsLight";
    src:
      url("font/Poppins-Light.ttf");
  }

@font-face {
    font-family: "PoppinsThin";
    src:
        url("font/Poppins-Thin.ttf");
}

@font-face {
    font-family: "neon";
    src:
        url("font/srfm-neon.ttf");
}


html {
    font-family: 'PoppinsLight', sans-serif;
    font-size: 120%;
    text-align: center;
    color: rgb(255, 255, 255);
    background-color: rgb(0, 0, 0);
}
@media screen and (min-width: 1500px) {
    html {
        font-size: 180%;
    }
}


body {
    position: relative;
    margin: 0;
    padding: 0;
    border: 0;
}

a:link {text-decoration: none; color: inherit; fill: inherit; }
a:visited {text-decoration: none; color: inherit; fill: inherit; }
a:hover {text-decoration: underline; color: inherit; fill: inherit; }
a:active {text-decoration: none; color: inherit; fill: inherit; }


.background{
    background-color: #1D1D3C;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -100;
    overflow: hidden;
}

.bg-gradient{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent linear-gradient(-41.02deg, rgba(35, 34, 78, 0.76) 10.61%, rgba(45, 47, 131, 0.76)  98.37%) 0% 0% no-repeat padding-box;
}

.bg-ellipse-lightblue-1{
    position: absolute;
    top: 5%;
    left: 0;
    width: 5000px;
    height: 2431px;
    background: transparent radial-gradient(closest-side, rgba(82, 148, 207, 1) 0%, rgba(82, 148, 207, 0) 100%) 0% 0% no-repeat padding-box;  
    transform: translate(-70%, 0) rotate(-45deg);
}

.bg-ellipse-darkmagenta-1{
    position: absolute;
    top: 43%;
    left: 0;
    width: 3000px;
    height: 1500px;
    background: transparent radial-gradient(closest-side, rgba(156, 25, 129, 1) 0%, rgba(150, 32, 132, 0.61) 38.53%, rgba(132, 52, 139, 0.05) 95.27%, rgba(130, 54, 140, 0) 100%) 0% 0% no-repeat padding-box; 
    transform: translate(-70%, 0%) rotate(-20deg);
}

.bg-ellipse-lightblue-2{
    position: absolute;
    top: 19%;
    right: 0;
    width: 5000px;
    height: 1815px;
    background: transparent radial-gradient(closest-side, rgba(82, 148, 207, 1) 0%, rgba(82, 148, 207, 0) 100%) 0% 0% no-repeat padding-box;
    transform: translate(40%, 0) rotate(40deg);
    opacity: 0.3;
}

.bg-ellipse-darkmagenta-2{
    position: absolute;
    top: 0%;
    right: 0;
    width: 3000px;
    height: 1500px;
    background: transparent radial-gradient(closest-side, rgba(156, 25, 129, 1) 0%, rgba(150, 32, 132, 0.61) 38.53%, rgba(132, 52, 139, 0.05) 95.27%, rgba(130, 54, 140, 0) 100%) 0% 0% no-repeat padding-box;
    transform: translate(45%, -50%) rotate(-60deg);
    opacity: 0.75;
}
@media screen and (max-width: 985px) {
    .bg-ellipse-darkmagenta-2{
        transform: translate(55%, -50%) rotate(-60deg);
    }
}


.bg-element-blue-1{
    position: absolute;
    top: 2%;
    right: 0;
    width: 380px;
    height: 100px;
    background: rgba(82, 87, 163, 1);
    transform: translate(-10%, 0%) rotate(-30deg);
    opacity: 0.4;
    border-radius: 1000px; 
    box-shadow: 0px 0px 200px #000;
}

.bg-element-magenta-1{
    position: absolute;
    top: 9%;
    left: 0;
    width: 728px;
    height: 242px;
    background: transparent linear-gradient(45deg, rgb(104, 69, 149) 0%, rgb(178, 16, 94) 100%) 0% 0% no-repeat padding-box;
    transform: translate(0%, 0%) rotate(-30deg);
    opacity: 0.5;
    border-radius: 150px;
    box-shadow: 0px 0px 200px #000;
}

.bg-element-blue-2{
    position: absolute;
    top: 18%;
    right: 0;
    width: 2272px;
    height: 593px;
    background: rgba(82, 87, 163, 1);
    transform: translate(30%, 0%) rotate(-30deg);
    opacity: 0.25;
    border-radius: 726px; 
    box-shadow: 0px 0px 200px #000;
}

.bg-element-magenta-2{
    position: absolute;
    top: 26%;
    left: 20vw;
    width: 654px;
    height: 56px;
    background: transparent linear-gradient(45deg, rgb(104, 69, 149) 0%, rgb(178, 16, 94) 100%) 0% 0% no-repeat padding-box;
    transform: translate(0%, 0%) rotate(-30deg);
    opacity: 0.45;
    border-radius: 50px;
    box-shadow: 0px 0px 200px #000;
}

.bg-element-blue-3{
    position: absolute;
    top: 36%;
    right: 0;
    width: 781px;
    height: 100px;
    background: rgba(82, 87, 163, 1);
    transform: translate(40%, 0%) rotate(-30deg);
    opacity: 0.7;
    border-radius: 50px; 
    box-shadow: 0px 0px 200px #000;
}

.bg-element-magenta-3{
    position: absolute;
    top: 46%;
    left: 0;
    width: 638px;
    height: 100px;
    background: transparent linear-gradient(45deg, rgb(104, 69, 149) 0%, rgb(178, 16, 94) 100%) 0% 0% no-repeat padding-box;
    transform: translate(-20%, 0%) rotate(-30deg);
    opacity: 0.25;
    border-radius: 50px;
    box-shadow: 0px 0px 200px #000;
}

.bg-element-blue-4{
    position: absolute;
    top: 42%;
    left: 50vw;
    width: 339px;
    height: 42px;
    background: rgba(82, 87, 163, 1);
    transform: translate(-50%, 0%) rotate(-30deg);
    opacity: 0.7;
    border-radius: 50px; 
    box-shadow: 0px 0px 200px #000;
}

.bg-element-magenta-4{
    position: absolute;
    top: 2%;
    left: 250px;
    width: 380px;
    height: 100px;
    background: transparent linear-gradient(45deg, rgb(104, 69, 149) 0%, rgb(178, 16, 94) 100%) 0% 0% no-repeat padding-box;
    transform: translate(0%, 0%) rotate(-30deg);
    opacity: 0.25;
    border-radius: 50px;
    box-shadow: 0px 0px 200px #000;
}

.bg-element-kontur-1{
    position: absolute;
    top: 2%;
    left: 500px;
    width: 380px;
    height: 100px;
    background: transparent linear-gradient(60deg, rgb(178, 0, 92) 0%, rgb(161, 0, 255) 100%) 0% 0% no-repeat padding-box;
    mask-image: linear-gradient(-30deg, #000000b5 0%, #00000000 100%);
    -webkit-mask-image: linear-gradient(-30deg, #000000b5 0%, #00000000 100%);
    transform: translate(0%, 0%) rotate(-30deg);
    opacity: 1;
    border-radius: 50px;
}

.text-padding {
    padding: 0 calc(10px + 10vw);
}
@media screen and (max-width: 985px) {
    .text-padding {
        padding: 0 20px;
    }

    .only-desktop {
        display: none;
    }
}
@media screen and (min-width: 985px) {
    .only-mobile {
        display: none;
    }
}

.text {
    padding: 30px 0;
}

.header {
    position: relative;
    transform: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;    
}

.header-pic{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 60%;
    max-height: 40%;
}


.content {
    position: relative;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: 100% auto;
}
@media screen and (max-width: 985px) {
    .content {
        background-size: 160% auto;
    }
}

.footer-pic {
    position: absolute;
    bottom: 0;
    height: 60vw;
    width: 100%;
    z-index: -10;
}
@media screen and (max-width: 985px) {
    .footer-pic {
        height: 120vw;
    }
}

.footer-pic-bg-full {
    position: absolute;
    transform: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    mask-image: linear-gradient(0deg, #000000b5 0%, #00000000 100%);
    -webkit-mask-image: linear-gradient(0deg, #000000b5 0%, #00000000 100%);
}

.footer-pic-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    background: transparent linear-gradient(180deg, #000000 0%, #00000000 100%) 0% 0% no-repeat padding-box;
}

.description-block {
    position: relative;
    margin-bottom: 200px;
}


.countdown-block {
    position: relative;
    font-family: 'PoppinsThin', sans-serif;
    font-size: 126%;
}

.countdown {
    position: relative;
    height: 18vw;
    margin-top: 24px;
}

.countdown-segment-1 {
    position: absolute;
    top: 0;
    left: 9vw;
    height: 18vw;
    width: 18vw;
}

.countdown-segment-2 {
    position: absolute;
    top: 0;
    left: 29.5vw;
    height: 18vw;
    width: 18vw;
}

.countdown-segment-3 {
    position: absolute;
    top: 0;
    left: 50vw;
    height: 18vw;
    width: 18vw;
}

.countdown-segment-4 {
    position: absolute;
    top: 0;
    left: 71vw;
    height: 18vw;
    width: 18vw;
}

.Countdown-value {
    position: absolute;
    font-family: 'neon', sans-serif;
    top: -2.6vw;
    width: 100%;
    text-align: center;
    font-size: 10vw;
    letter-spacing: 7.5px;
    padding-left: 3.8px;
    color: #CF0046;
    text-shadow: 0px 0px 1vw #FF0056;
}

.Countdown-unit {
    position: absolute;
    top: 11.5vw;
    width: 100%;
    text-align: center;
    font-size: 2.7vw;
}

@media screen and (max-width: 985px) {
    .countdown {
        position: relative;
        height: 88vw;
        margin-top: 100px;
    }
    
    .countdown-segment-1 {
        position: absolute;
        top: 0;
        left: 33vw;
        height: 34vw;
        width: 34vw;
    }
    
    .countdown-segment-2 {
        position: absolute;
        top: 27vw;
        left: 7vw;
        height: 34vw;
        width: 34vw;
    }
    
    .countdown-segment-3 {
        position: absolute;
        top: 27vw;
        left: 59vw;
        height: 34vw;
        width: 34vw;
    }
    
    .countdown-segment-4 {
        position: absolute;
        top: 54vw;
        left: 33vw;
        height: 34vw;
        width: 34vw;
    }
    
    .Countdown-value {
        position: absolute;
        top: -12vw;
        width: 100%;
        text-align: center;
        font-size: 26vw;
        letter-spacing: 7.5px;
        padding-left: 3.8px;
        color: #CF0046;
        text-shadow: 0px 0px 2.6vw #FF0056;
    }

    .Countdown-unit {
        position: absolute;
        top: 26vw;
        width: 100%;
        text-align: center;
        font-size: 4.5vw;
    }
}

.next-dl-block {
    position: relative;
    text-align: center;
    margin-top: 50px;
}

.next-dl-icons {
    margin-top: 60px;
    margin-bottom: 60px;
}
@media screen and (min-width: 985px) {
    .next-dl-icons {
        display: flex; 
        justify-content: center;   
    }
}

.next-dl-icons-segment {
    margin: 40px 20px;
    min-width: 24vw;
}

.next-dl-icons-segment-icon {
    height: 60px;
    text-align: center;
}

.next-dl-icons-segment-test {
    margin-top: 10px;
    text-align: center;
}


.dl-trailer-block iframe {
    height: 80vh;
    width: 45vh;
}

.motiv-block {
    margin-top: 100px;
    text-align: center;
}

.headline {
    text-align: center;
    font-family: 'neon', sans-serif;
    color: #CF0046;
    font-size: 30px;
    text-shadow: 0px 0px 12px #FF0056;
    font-size: 120px;
    margin-bottom: 40px;
}
@media screen and (max-width: 1500px) {
    .headline {
        text-shadow: 0px 0px 7px #FF0056;
        font-size: 70px
    }
}
@media screen and (max-width: 985px) {
    .headline {
        text-shadow: 0px 0px 4px #FF0056;
        font-size: 40px
    }
}

.pictures-block {
    position: relative;
    height: 60vw;
    margin-top: 150px;
}

.pictures-block-pic-1 {
    position: absolute;
    transform: none;
    top: 0vw;
    left: 0vw;
    height: 20vw;
    width: 20vw;
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
    object-fit: cover;
}

.pictures-block-pic-2 {
    position: absolute;
    transform: none;
    top: 20vw;
    left: 0vw;
    height: 20vw;
    width: 20vw;
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
    object-fit: cover;
}

.pictures-block-pic-3 {
    position: absolute;
    transform: none;
    top: 40vw;
    left: 0vw;
    height: 20vw;
    width: 20vw;
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
    object-fit: cover;
}

.pictures-block-pic-4 {
    position: absolute;
    transform: none;
    top: 0vw;
    left: 20vw;
    height: 40vw;
    width: 40vw;
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
    object-fit: cover;
}

.pictures-block-pic-5 {
    position: absolute;
    transform: none;
    top: 40vw;
    left: 20vw;
    height: 20vw;
    width: 20vw;
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
    object-fit: cover;
}

.pictures-block-pic-6 {
    position: absolute;
    transform: none;
    top: 40vw;
    left: 40vw;
    height: 20vw;
    width: 20vw;
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
    object-fit: cover;
}

.pictures-block-pic-7 {
    position: absolute;
    transform: none;
    top: 0vw;
    left: 60vw;
    height: 20vw;
    width: 20vw;
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
    object-fit: cover;
}

.pictures-block-pic-8 {
    position: absolute;
    transform: none;
    top: 0vw;
    left: 80vw;
    height: 20vw;
    width: 20vw;
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
    object-fit: cover;
}

.pictures-block-pic-9 {
    position: absolute;
    transform: none;
    top: 20vw;
    left: 60vw;
    height: 40vw;
    width: 40vw;
    border-width: 2px;
    border-style: solid;
    box-sizing: border-box;
    object-fit: cover;
}

@media screen and (max-width: 985px) {
    .pictures-block {
        display: none;
    }
}

.mission-block {
    margin-top: 150px;
    text-align: center;
}

.mission-block-headline {
    text-align: center;
    font-weight: 700;
    color: #fc0056;
    text-shadow: 0px 0px 15px #FF00AA99;
    font-size: 50px
}
@media screen and (max-width: 985px) {
    .mission-block-headline {
        font-size: 40px
    }
}

.footer {
    height: 50vw;
}

.footer-impressum {
    position: absolute;
    bottom: 10px;
    width: 100%;
    text-align: center;
}

.socialmedia-link-1 {
    position: absolute;
    bottom: 10px;
    left: 40px;
}
.socialmedia-link-2 {
    position: absolute;
    bottom: 10px;
    left: 115px;
}
.socialmedia-link-3 {
    position: absolute;
    bottom: 10px;
    right: 100px;
}
.socialmedia-link-4 {
    position: absolute;
    bottom: 10px;
    right: 40px;
}

.socialmedia-icon {
    height: 50px;
}

@media screen and (max-width: 985px) {
    .footer-impressum {
        position: absolute;
        bottom: 10px;
        width: 100%;
        text-align: center;
    }
    
    .socialmedia-link-1 {
        position: absolute;
        bottom: 10px;
        left: 10px;
    }
    .socialmedia-link-2 {
        position: absolute;
        bottom: 10px;
        left: 60px;
    }
    .socialmedia-link-3 {
        position: absolute;
        bottom: 10px;
        right: 50px;
    }
    .socialmedia-link-4 {
        position: absolute;
        bottom: 10px;
        right: 10px;
    }
    
    .socialmedia-icon {
        height: 40px;
    }
}