@media (min-width:600px)  {
    @font-face {
        font-family: 'WeissenhofGrotesk-Bold';
        src: url('webfonts/350C51_0_0.eot');
        src: url('webfonts/350C51_0_0.eot?#iefix') format('embedded-opentype'),url('webfonts/350C51_0_0.woff2') format('woff2'),url('webfonts/350C51_0_0.woff') format('woff'),url('webfonts/350C51_0_0.ttf') format('truetype');
    }

    @font-face {
        font-family: 'WeissenhofGrotesk-BoldItalic';
        src: url('webfonts/350C51_1_0.eot');
        src: url('webfonts/350C51_1_0.eot?#iefix') format('embedded-opentype'),url('webfonts/350C51_1_0.woff2') format('woff2'),url('webfonts/350C51_1_0.woff') format('woff'),url('webfonts/350C51_1_0.ttf') format('truetype');
    }

    @font-face {
        font-family: 'WeissenhofGrotesk-LightItalic';
        src: url('webfonts/350C51_2_0.eot');
        src: url('webfonts/350C51_2_0.eot?#iefix') format('embedded-opentype'),url('webfonts/350C51_2_0.woff2') format('woff2'),url('webfonts/350C51_2_0.woff') format('woff'),url('webfonts/350C51_2_0.ttf') format('truetype');
    }

    @font-face {
        font-family: 'WeissenhofGrotesk-Italic';
        src: url('webfonts/350C51_3_0.eot');
        src: url('webfonts/350C51_3_0.eot?#iefix') format('embedded-opentype'),url('webfonts/350C51_3_0.woff2') format('woff2'),url('webfonts/350C51_3_0.woff') format('woff'),url('webfonts/350C51_3_0.ttf') format('truetype');
    }

    @font-face {
        font-family: 'WeissenhofGrotesk-Light';
        src: url('webfonts/350C51_4_0.eot');
        src: url('webfonts/350C51_4_0.eot?#iefix') format('embedded-opentype'),url('webfonts/350C51_4_0.woff2') format('woff2'),url('webfonts/350C51_4_0.woff') format('woff'),url('webfonts/350C51_4_0.ttf') format('truetype');
    }

    @font-face {
        font-family: 'WeissenhofGrotesk-Medium';
        src: url('webfonts/350C51_5_0.eot');
        src: url('webfonts/350C51_5_0.eot?#iefix') format('embedded-opentype'),url('webfonts/350C51_5_0.woff2') format('woff2'),url('webfonts/350C51_5_0.woff') format('woff'),url('webfonts/350C51_5_0.ttf') format('truetype');
    }

    @font-face {
        font-family: 'WeissenhofGrotesk-MediumItalic';
        src: url('webfonts/350C51_6_0.eot');
        src: url('webfonts/350C51_6_0.eot?#iefix') format('embedded-opentype'),url('webfonts/350C51_6_0.woff2') format('woff2'),url('webfonts/350C51_6_0.woff') format('woff'),url('webfonts/350C51_6_0.ttf') format('truetype');
    }

    @font-face {
        font-family: 'WeissenhofGrotesk-Regular';
        src: url('webfonts/350C51_7_0.eot');
        src: url('webfonts/350C51_7_0.eot?#iefix') format('embedded-opentype'),url('webfonts/350C51_7_0.woff2') format('woff2'),url('webfonts/350C51_7_0.woff') format('woff'),url('webfonts/350C51_7_0.ttf') format('truetype');
    }

    :focus {
        outline: 0;
    }

    .welcomeScreen {
        color: white;
        width: 80%;
        position: absolute;
        z-index: 12;
        height: 80%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .welcomeScreen span {
        position: absolute;
        top: 25%;
        text-align: center;
        width: 100%;
        font-size: 4vh;
    }

    
    /* --------- ADAM LUFT Website --------- */

    .noScroll {
        position: fixed;
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        overflow: hidden;
    }

    .BG {
        position: fixed;
        pointer-events: none;
        width: 100%;
        height: 100%;
        z-index: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: transparent linear-gradient(180deg, #FFFFB900 0%,#FFFFB900 60%, #96FFFF4D 80%, #C8C8FFA6 100%) 0% 0% no-repeat padding-box;
        opacity: 1;
    }

    .BGSecond {
        position: fixed;
        pointer-events: none;
        width: 100%;
        height: 120%;
        z-index: 0;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background: transparent radial-gradient(closest-side at 50% 50%, #FFFFFF00 0%, #FFFFB940 51%, #B7FFFF80 100%) 0% 0% no-repeat padding-box;
        opacity: 1;
    }
    #whiteGradient {
        position: fixed;
        pointer-events: none;
        width: 100%;
        height:100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 1;
        z-index: 1;
    }

    #sphere {
        width: 50%;
        overflow: hidden;
        position: fixed;
        z-index: 20;
        left: 50%;
        top: 38%;
        transform: translate(-50%,-50%);
        pointer-events: none;
    }

    #canvas0,
    #canvas1,
    #canvas2,
    #canvas3,
    #canvas5 {
        width: 50vh;
        height: auto;
        top: 50%;
        position: absolute;
        transform: translate(-50%,-50%);
        display: block;
        left: 50%;
        margin-left: auto;
        margin-right: auto;
    }

    #canvas4{
        width: 63.5vh;
        height: auto;
        top: 50%;
        position: absolute;
        transform: translate(-50%,-50%);
        display: block;
        left: 50%;
        margin-left: auto;
        margin-right: auto;
    }

    .talkcanvas {
        overflow: hidden;
        position: fixed;
        z-index: 20;
        left: 50%;
        top: 38%;
        transform: translate(-50%,-50%);
        width: 50vh;
        height: auto;
        display: block;
        pointer-events: none;
    }

    #loadingCanvas {
        overflow: hidden;
        position: absolute;
        z-index: 20;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        position: fixed;
        width: 100%;
        height: auto;
        display: block;
    }

    #inputField {
        top: 2vh;
        position: absolute;
        z-index: 16;
        border-color: black;
        border: midnightblue;
        border-style: solid;
        border-width: 1px;
    }

    .layoutGrid {
        height: 100vh;
        width: 100vw;
        display: grid;
        grid-auto-rows: 0.14fr 0.45fr 0.33fr 0.135fr;
    }

    .elementGrid {
        width: 100vw;
        background-color: green;
    }

    .elementGridMiddle {
        width: 100vw;
        background-color: blue;
    }

    .elementGridMiddleTwo {
        width: 100vw;
        background-color: blueviolet;
    }

    #menubutton {
        position: absolute;
        left: 8vw;
        bottom: 3vh;
        height: auto;
        pointer-events: all;
        display: none;
        cursor: pointer;
    }

    #menubutton img {
        width: 5vh;
        height: 5vh;
    }

    #soundonoff {
        position: absolute;
        right: 8vh;
        top: 6vh;
        text-align: right;
        pointer-events: all;
        cursor: pointer;
    }

    #soundonoff img {
        width: 4vh;
        height: 4vh;
    }

    #savetheair {
        position: absolute;
        left: 50%;
        bottom: 2vh;
        transform: translate(-50%, 0);
        pointer-events: auto;
        width: 20vh;
        z-index: 60 !important;
        text-align: center;
    }

    #savetheair img {
        width: 30vh;
        transform: translate(-50%, 0);
        left: 50%;
        position: relative;
    }

    #savetheair span{
        display: inline-block;
        cursor: pointer;
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic";
        font-size: 1.5vh;
        text-decoration: none;
        letter-spacing: 0.6vh;
        border-width: 0px;
        padding-bottom: 1vh;
        
    }

    #savetheair svg{

    }

    .mainUI {
        position: fixed;
        z-index: 50;
        width: 100%;
        height: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    #adammainbutton {
        position: absolute;
        left: 8vh;
        top: 6vh;
        height: auto;
        cursor: pointer;
    }

    #adammainbutton img {
        width: 5vh;
        height: 5vh;
        pointer-events: auto;
    }

    .moodSelect {
        pointer-events: auto;
        position: fixed;
        z-index: 16;
        width: 100%;
        height: 100%;
    }

    .sendLuftButton {
        position: relative;
        background-color: transparent;
        border-radius: 10px;
        border: 1px solid #ff4646;
        cursor: pointer;
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic";
        font-size: 1.861vh;
        padding: 1vh 2vh;
        letter-spacing: 0.2769vh;
        text-align: center;
        vertical-align: middle;
        align-items: center;
    }

    #writeMessageButton {
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 36vh;
        text-align: center;
        position: absolute;
    }

    .sendLuftButton .arrowLeft {
        transform: translate(0, -50%);
        height: 1vh;
        width: auto;
        position: absolute;
        /* left: 11vw; */
        left: 1.5vh;
        top: 50%;
    }

    .sendLuftButton .arrowRight {
        transform: translate(0, -50%);
        padding-left: 3.8vh;
        height: 1vh;
        width: auto;
        align-content: center;
        position: absolute;
        top: 50%;
        right: 1.5vh;
    }

    .sendLuftButton .arrowRightRight {
        transform: translate(0, -50%);
        /* padding-left: 1.0vh; */
        height: 1vh;
        width: auto;
        align-content: center;
        position: absolute;
        top: 50%;
        right: 1.0vh;
    }

    .sendLuftButton:hover {
        background-color: #ff4646;
        color: #ffff;
        cursor: pointer;
    }

    #moodslider {
        width: 72%;
    }

    .slider {
        position: relative;
        left: 50%;
        top: 18%;
        transform: translate(-50%, -50%);
        -webkit-appearance: none;
        width: 100%;
        height: 1.1vw;
        border-radius: 5px;

        /* background: #ff4646; */
        outline: none;
        opacity: 1;
        -webkit-transition: .2s;
        transition: opacity .2s;
        background-image: url("../img/dotline.svg");
        background-repeat: no-repeat;
        background-size: cover;
        background-position: center;
    }

    .slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 5vw;
        height: 5vw;
        border-radius: 50%;
        background: #ff4646;
        cursor: pointer;
    }

    .slider::-moz-range-thumb {
        width: 5vw;
        height: 5vw;
        border-radius: 50%;
        background: #ff4646;
        cursor: pointer;
    }

    .selectedText {
        font-family: "WeissenhofGrotesk-Italic";
        font-size: 1.8461vh;
        color: #ff4646;
    }

    .selectedmood {
        position: absolute;
       
        left: 50%;
        bottom: 10%;
        transform: translateX(-50%);
        text-align: center;
        letter-spacing: 0.2769vh;
    }

    .stepprogress {
        pointer-events: none;
        position: fixed;
        z-index: 15;
        width: 100%;
        height: 100%;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    #progresstext {
        position: absolute;
        display: inline-block;
        top: 8.7%;
        left: 50%;
        text-align: center;
        transform: translate(-50%, -50%);
        font-family: "WeissenhofGrotesk-Italic";
        font-size: 1.8461vh;
        color: #ff4646;
        letter-spacing: 0.2571vh;
        line-height: 3.46143vh;
        width: 50%;
        opacity: 0.5;
    }

    .progressdots {
        position: absolute;
        display: inline-block;
        transform: translate(-50%, -50%);
        top: 8%;
        left: 50%;
    }

    .progressdot {
        position: relative;
        display: inline-block;
        padding-right: 0.8vw;
        padding-left: 0.8vw;
    }

    #progressdot1 {
        opacity: 1;
    }

    #progressdot2 {
        opacity: 0.5;
    }

    #progressdot3 {
        opacity: 0.5;
    }

    #progressdot4 {
        opacity: 0.5;
    }

    .welcomeMain {
    }

    .loadingMain {
        position: fixed;
        z-index: -10;
    }

    .introMain {
    }

    .writeMain {
        pointer-events: auto;
        position: fixed;
        z-index: 16;
        width: 100%;
        height: 40vh;
        top: 50%;
    }

    .previewMain {
        pointer-events: auto;
        position: fixed;
        z-index: 16;
        width: 100%;
        height: 31%;
        top: 65%;
    }

    .previewFinishedMain {
        pointer-events: auto;
        position: fixed;
        z-index: 16;
        width: 100%;
        height: 40vh;
        top: 55%;
    }

    .shareMain {
        pointer-events: auto;
        position: fixed;
        z-index: 16;
        width: 100%;
        height: 30%;
        top: 74%;
    }

    .backButton {
        background-color: #ff4646;
        border-radius: 10px;
        border: 1px solid #ff4646;
        display: inline-block;
        cursor: pointer;
        color: #ffff;
        font-family: "WeissenhofGrotesk-Italic";
        font-size: 1.5vh;
        padding: 0.8vh 2vh;
        text-decoration: none;
        letter-spacing: 0.2571vh;
    }

    #backButtonWrite {
        position: relative;
        margin-right: 3.3vh;
        width: 20vh;
        text-align: center !important;
    }

    .backButton .arrowLeft {
        transform: translate(0, -50%);
        height: 1vh;
        width: auto;
        position: absolute;
        left: 1.5vh;
        top: 50%;
    }

    .backButton .arrowLeftLeft {
        transform: translate(0, -50%);
        height: 1vh;
        width: auto;
        position: absolute;
        left: 5vh;
        top: 50%;
    }
    .backButton:hover {
        background-color: transparent;
        color: #ff4646;
        cursor: pointer;
    }

    .adamButton {
        border-radius: 10px;
        display: inline-block;
        cursor: pointer;
        padding-right: 0vw;
        border-width: 0px;
        margin-bottom: 1vh;
        width: 25vh;
        position: relative;
        left: 50%;
        transform: translate(-50%, -50%);
        align-items: center;
        border-style: solid;
    }

    .adamButton span {
        border-radius: 10px;
        display: inline-block;
        cursor: pointer;
        color: #ffff;
        font-family: "WeissenhofGrotesk-Italic";
        font-size: 1.8461vh;
        padding: 1vh 1vh;
        text-decoration: none;
        letter-spacing: 0.2769vh;

        /* padding-right: 9vw; */
        border-width: 0px;
    }

    .adamButton img {
        text-align: right;
        position: absolute;
        right: 0%;
        top: 50%;
        padding-right: 1.5vh;
        padding-left: auto;
        transform: translate(0, -50%);
        height: 1.0vh;
    }

    #whatsappButton {
        background-color: #25D366;
    }

    #facebookButton {
        background-color: #a0c0ef;
    }

    #DesktopEmailButton{
        background-color: #ff4646;
    }

    #DesktopCopy{
        background-color: #a0c0ef;
    }

    #emailButton {
        background-color: #ff4646;
    }

    #backButton {
        background-color: rgba(255, 255, 255, 0);
        border-color: #ff4646;
        border-width: 1px;
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic" !important;
        width: 19vh !important;
        padding-right: 0vw;
        padding: 0vh 0vh !important;
    }

    #backButton span {
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic" !important;
        font-size: 1.5vh !important;
        letter-spacing: 0.2571vh;
        text-align: center;
        padding-bottom: 1vh;
        padding: 0.7vh 1vh!important;

    }

    #backButton img {
        position: absolute;
        left: 0%;
        top: 50%;
        transform: translate(0, -50%);
        z-index: 17;
        padding-left: 1.5vh;
        height:1.0vh;
    }

    #backButtonDesktop {
        background-color: rgba(255, 255, 255, 0);
        border-color: #ff4646;
        border-width: 1px;
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic" !important;
        width: 19vh !important;
        padding-right: 0vw;
        padding: 0vh 0vh !important;
    }

    #backButtonDesktop span {
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic" !important;
        font-size: 1.5vh !important;
        letter-spacing: 0.2571vh;
        text-align: center;
        padding-bottom: 1vh;
        padding: 0.7vh 1vh!important;

    }

    #backButtonDesktop img {
        position: absolute;
        left: 0%;
        top: 50%;
        transform: translate(0, -50%);
        z-index: 17;
        padding-left: 1.5vh;
        height:1.0vh;
    }
/* 
    .goButton {
        background-color: #ff4646;
        border-radius: 10px;
        border: 1px solid #ff4646;
        display: inline-block;
        cursor: pointer;
        color: #ffff;
        font-family: "WeissenhofGrotesk-Italic";
        font-size: 1.8461vh;
        padding: 1.0vh 2vh;
        text-decoration: none;
        letter-spacing: 0.2769vh;
        padding-left: 10vw;
    } */

    .abspielButton {
        background-color: #ff4646;
        border-radius: 10px;
        border: 1px solid #ff4646;
        display: inline-block;
        cursor: pointer;
        color: #ffff;
        font-family: "WeissenhofGrotesk-Italic";
        font-size: 1.5vh;
        padding: 0.8vh 2vh;
        text-decoration: none;
        letter-spacing: 0.2571vh;
        padding-left: 10vh;
    }

    #goButtonWrite {
        position: relative;
        width: 20vh;
    }

    .goButton .arrowLeft {
        transform: translate(0, -50%);
        padding-left: 4vw;
        right: 1.5vh;
        height: 1vh;
        width: auto;
        position: absolute;
        top: 50%;
    }

    .goButton:hover {
        background-color: transparent;
        color: #ff4646;
        cursor: pointer;
    }

    .writebuttons {
        position: absolute;
        display: inline-block;
        transform: translate(-50%, -50%);
        bottom: 15%;
        left: 50%;
        width: 100%;
        text-align: center;
    }

    .writeTextField {
        position: absolute;
        display: inline-block;
        transform: translate(-50%, -50%);
        bottom: 10%;
        left: 50%;
        width: 100%;
        text-align: center;
        height: 40%;
    }

    #TextToSpeak {
        text-align: center;
        background-color: transparent;
        border-radius: 10px;
        border: 1px solid #ff4646;
        display: inline-block;
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic";
        font-size: 1.8461vh;
        padding: 1.5vh 2vh;
        text-decoration: none;
        letter-spacing: 0.2769vh;
        height: 90%;
        line-height: 3vh;
        width: 50vh;
    }

    .previewText {
        position: absolute;
        display: inline-block;
        transform: translate(-50%, 0%);
        bottom: 0%;
        left: 50%;
        width: 40%;
        text-align: center;
        background-color: transparent;
        display: inline-block;
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic";
        font-size: 1.8461vh;
        padding: 1.0vh 2vh;
        text-decoration: none;
        letter-spacing: 0.2769vh;
        height: 90%;
        line-height: 3.692vh;
    }

    .previewReceivedMain {
        position: fixed;
        display: inline-block;
        transform: translate(-50%, 0);
        bottom: 20%;
        left: 50%;
        width: 60%;
        text-align: center;
        background-color: transparent;
        display: inline-block;
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic";
        font-size: 1.8461vh;
        padding: 1.0vh 2vh;
        text-decoration: none;
        letter-spacing: 0.2769vh;
        /* padding-left: 10vh; */
        height: 25vh;
        line-height: 3.692vh;
    }

    #previewSendButton {
        top: 50% !important;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 34vh;
    }

    #previewFiniSendButton {
        top: 50% !important;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 34vh;
    }

    .buttonGroupPreFinish {
        position: absolute;
        left: 50%;
        bottom: 60%;
        transform: translate(-50%, -50%);
        width: 41vh;
        text-align: center;
    }

    #backButtonPreview {
        margin-right: 1.5vh;
        width: 15vh;
    }

    #goButtonPreview {
        padding-left: 2.6vh !important;
        position: relative;
        width: 16vh;
        text-align: right;
    }

    #goButtonPreview img {
        width: 2.3vh;
        height: auto;
        vertical-align: middle;
        position: absolute;
        top: 0.5vh;
        left: 1.0vh;
    }

    .mainMenu {
        position: fixed;
        width: 100%;
        height: 5vh;
        z-index: 50;
        display: block !important;
        top: calc(100% - 4vh);
        transform: translateY(-50%);
        opacity: 1;
    }

    .menuList {
        position: fixed;
        z-index: 50;
        bottom: -5%;
        width: 97%;
    }

    .menuGrid {
        display: grid;
        grid-gap: 10px;
        z-index: 25;
        height: 100%;
        width: 100%;
        justify-items: center;
        grid-auto-flow: column;
        grid-template-columns: 2fr 4fr 1fr 1fr 1fr 1fr;
        align-content: space-around;
        margin-bottom: 3.9vh;
        padding-right: 2vh;
        padding-left: 2vh;
        left: 50%;
        transform: translate(0%,100%);
    }
    

    .menuGrid span {
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic" !important;
        font-size: 1.5vh !important;
        letter-spacing: 0.2571vh;
        pointer-events: auto !important;
    }

    #item_0 {
        z-index: 26 !important;
        pointer-events: auto !important;
        display: block;
        grid-column: 1;
        cursor: pointer;
    }

    #item_1 {
        z-index: 26 !important;
        pointer-events: auto !important;
        display: block;
        grid-column: 3;
        cursor: pointer;
    }

    #item_2 {
        z-index: 26 !important;
        pointer-events: auto !important;
        display: block;
        grid-column: 4;
        cursor: pointer;
    }

    #item_3 {
        z-index: 26 !important;
        pointer-events: auto !important;
        display: block;
        grid-column: 5;
        cursor: pointer;
    }

    #item_4 {
        z-index: 26 !important;
        pointer-events: auto !important;
        display: block;
        grid-column: 6;
        cursor: pointer;
    }

    .menuBG {
        z-index: 21 !important;
        pointer-events: none;
        background-color: white ;
        position: absolute;
        width: 95%;
        height: 95%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 10px;
        display: none;
    }

    .Loading {
        position: fixed;
    }

    .mainLogo {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
        height: 70%;
        pointer-events: none;
        z-index: 1;
    }

    .mainLogo img {
        position: relative;
        left: 50%;
        top: 30%;
        width: 32.5vh;
        height: auto;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    .spinner {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 0px !important;
        width: 6vh;
        height: 6vh;
    }

    .spinner img {
        position: absolute;
        border-width: 0em;
        width: 6vh;
        border: none !important;
        border-color: transparent;
        animation: spin 2s linear infinite;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }

        to {
            transform: rotate(359deg);
        }
    }

    #introVideo {
        width: 150%;
        height: auto;
    }

    .seeThru-display {
        position: absolute;
        top: 40%;
        left: 50%;
        transform: translate(-50%, -50%);
        border: 0px !important;
        width: 170%;
        z-index: 10;
        height: auto;
    }

    #talkcanvassphere{
        opacity: 0;
    }

    .goButton {
        background-color: #ff4646;
        border-radius: 10px;
        border: 1px solid #ff4646;
        display: inline-block;
        cursor: pointer;
        color: #ffff;
        font-family: "WeissenhofGrotesk-Italic";
        font-size: 1.5vh;
        padding: 0.8vh 2vh;
        text-decoration: none;
        letter-spacing: 0.2571vh;
        margin-left: auto;
    }

    #losgehtsbutton {
        left: 50%;
        top: 55%;
        width: 16vh;
        position: absolute;
        transform: translate(-50%,-50%);
        z-index: 30;
        pointer-events: auto !important;
    }

    .subtitleMovie {
        font-family: "WeissenhofGrotesk-Italic";
        font-size: 1.8461vh;
        color: #ff4646;
        left: 50%;
        top: 70%;
        position: absolute;
        transform: translate(-50%,-50%);
        width: calc(100% - 15px);
        z-index: 30;
        text-align: center;
        letter-spacing: 0.2769vh;
        line-height: 3.692vh;
    }

    .form-control {
        border: 2 solid;
    }


    #xButton{
        position: absolute;
        right: calc(5% + 2vw);
        top: calc(5% + 1vh);
        z-index: 50;
    }

    #xButton img{
        width:10vw;
        height:10vw;
        display: none;
    }


    .soundModify {
        background-color: #e2e2e2;
        height: 80%;
        width: 100%;
        position: absolute;
        z-index: 50;
    }

    .previewReceivedFinished {
        pointer-events: auto;
        position: fixed;
        z-index: 16;
        width: 100%;
        height: 40vh;
        top: 60%;
        text-align: center;
    }

    #goButtonReceiveAgain {
        padding-left: 3vh !important;
        position: fixed;
        width: 15vh;
        left: 50%;
        text-align: center;
        padding: 0.8vh 0vh;
        transform: translate(-50%, -1vh);
        margin-bottom: 1.5vh;
    }

    #goButtonReceiveAgain img {
        width: 2.5vh;
        padding-right: 3vh !important;
        top: 0px;
        height: auto;
        position: fixed;
        top: 0.4vh;
        left: 1vh;
        vertical-align: middle;
    }

    #goCreateNew {
        position: absolute;
        left: 50%;
        transform: translate(-50%,0);
        width: 25vh;
    }

    .introCanvasAnim {
        overflow: hidden;
        position: absolute;
        z-index: 50;
        left: 50%;
        top: 38%;
        transform: translate(-51.5%,-50%);
        width: 83vh;
        height: auto;
        display: block;
        pointer-events: none;
    }

    #skipbutton {
        top: 6vh;
        position: absolute;
        right: 16vh;
        width: 4vh;
        opacity: 0;
        cursor: pointer;
    }

    #particle-container {
        position: fixed;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        z-index: 5;
        pointer-events: none;
        opacity: 0.5;
    }

    .particle {
        position: absolute;
        border-radius: 50%;
        z-index: 5;
        pointer-events: none;
    }

    @keyframes particle-animation-1 {
        100% {
            transform: translate3d(23vw, 90vh, 77px);
        }
    }

    .particle:nth-child(1) {
        animation: particle-animation-1 60s infinite;
        opacity: 0.05;
        height: 2px;
        width: 2px;
        animation-delay: -0.2s;
        transform: translate3d(79vw, 44vh, 70px);
        background: #ff4646;
    }

    @keyframes particle-animation-2 {
        100% {
            transform: translate3d(58vw, 49vh, 98px);
        }
    }

    .particle:nth-child(2) {
        animation: particle-animation-2 60s infinite;
        opacity: 0.59;
        height: 2px;
        width: 2px;
        animation-delay: -0.4s;
        transform: translate3d(43vw, 32vh, 51px);
        background: #ff4646;
    }

    @keyframes particle-animation-3 {
        100% {
            transform: translate3d(34vw, 21vh, 40px);
        }
    }

    .particle:nth-child(3) {
        animation: particle-animation-3 60s infinite;
        opacity: 0.12;
        height: 2px;
        width: 2px;
        animation-delay: -0.6s;
        transform: translate3d(51vw, 84vh, 86px);
        background: #ff4646;
    }

    @keyframes particle-animation-4 {
        100% {
            transform: translate3d(58vw, 4vh, 64px);
        }
    }

    .particle:nth-child(4) {
        animation: particle-animation-4 60s infinite;
        opacity: 0.83;
        height: 2px;
        width: 2px;
        animation-delay: -0.8s;
        transform: translate3d(58vw, 87vh, 1px);
        background: #ff4646;
    }

    @keyframes particle-animation-5 {
        100% {
            transform: translate3d(14vw, 19vh, 84px);
        }
    }

    .particle:nth-child(5) {
        animation: particle-animation-5 60s infinite;
        opacity: 0.79;
        height: 2px;
        width: 2px;
        animation-delay: -1s;
        transform: translate3d(54vw, 18vh, 12px);
        background: #ff4646;
    }

    @keyframes particle-animation-6 {
        100% {
            transform: translate3d(43vw, 79vh, 39px);
        }
    }

    .particle:nth-child(6) {
        animation: particle-animation-6 60s infinite;
        opacity: 0.46;
        height: 2px;
        width: 2px;
        animation-delay: -1.2s;
        transform: translate3d(82vw, 3vh, 98px);
        background: #ff4646;
    }

    @keyframes particle-animation-7 {
        100% {
            transform: translate3d(59vw, 19vh, 18px);
        }
    }

    .particle:nth-child(7) {
        animation: particle-animation-7 60s infinite;
        opacity: 0.26;
        height: 2px;
        width: 2px;
        animation-delay: -1.4s;
        transform: translate3d(34vw, 50vh, 100px);
        background: #ff4646;
    }

    @keyframes particle-animation-8 {
        100% {
            transform: translate3d(64vw, 54vh, 59px);
        }
    }

    .particle:nth-child(8) {
        animation: particle-animation-8 60s infinite;
        opacity: 0.82;
        height: 2px;
        width: 2px;
        animation-delay: -1.6s;
        transform: translate3d(58vw, 48vh, 100px);
        background: #ff4646;
    }

    @keyframes particle-animation-9 {
        100% {
            transform: translate3d(90vw, 32vh, 45px);
        }
    }

    .particle:nth-child(9) {
        animation: particle-animation-9 60s infinite;
        opacity: 0.08;
        height: 2px;
        width: 2px;
        animation-delay: -1.8s;
        transform: translate3d(8vw, 10vh, 34px);
        background: #ff4646;
    }

    @keyframes particle-animation-10 {
        100% {
            transform: translate3d(61vw, 59vh, 60px);
        }
    }

    .particle:nth-child(10) {
        animation: particle-animation-10 60s infinite;
        opacity: 0.68;
        height: 2px;
        width: 2px;
        animation-delay: -2s;
        transform: translate3d(85vw, 15vh, 26px);
        background: #ff4646;
    }

    @keyframes particle-animation-11 {
        100% {
            transform: translate3d(44vw, 42vh, 29px);
        }
    }

    .particle:nth-child(11) {
        animation: particle-animation-11 60s infinite;
        opacity: 0.71;
        height: 2px;
        width: 2px;
        animation-delay: -2.2s;
        transform: translate3d(33vw, 75vh, 97px);
        background: #ff4646;
    }

    @keyframes particle-animation-12 {
        100% {
            transform: translate3d(64vw, 47vh, 65px);
        }
    }

    .particle:nth-child(12) {
        animation: particle-animation-12 60s infinite;
        opacity: 0.71;
        height: 2px;
        width: 2px;
        animation-delay: -2.4s;
        transform: translate3d(67vw, 54vh, 1px);
        background: #ff4646;
    }

    @keyframes particle-animation-13 {
        100% {
            transform: translate3d(8vw, 53vh, 55px);
        }
    }

    .particle:nth-child(13) {
        animation: particle-animation-13 60s infinite;
        opacity: 0.92;
        height: 2px;
        width: 2px;
        animation-delay: -2.6s;
        transform: translate3d(50vw, 23vh, 38px);
        background: #ff4646;
    }

    @keyframes particle-animation-14 {
        100% {
            transform: translate3d(77vw, 85vh, 1px);
        }
    }

    .particle:nth-child(14) {
        animation: particle-animation-14 60s infinite;
        opacity: 0.13;
        height: 2px;
        width: 2px;
        animation-delay: -2.8s;
        transform: translate3d(60vw, 31vh, 50px);
        background: #ff4646;
    }

    @keyframes particle-animation-15 {
        100% {
            transform: translate3d(31vw, 83vh, 78px);
        }
    }

    .particle:nth-child(15) {
        animation: particle-animation-15 60s infinite;
        opacity: 0.69;
        height: 2px;
        width: 2px;
        animation-delay: -3s;
        transform: translate3d(72vw, 4vh, 2px);
        background: #ff4646;
    }

    @keyframes particle-animation-16 {
        100% {
            transform: translate3d(48vw, 9vh, 18px);
        }
    }

    .particle:nth-child(16) {
        animation: particle-animation-16 60s infinite;
        opacity: 0.9;
        height: 2px;
        width: 2px;
        animation-delay: -3.2s;
        transform: translate3d(75vw, 46vh, 91px);
        background: #ff4646;
    }

    @keyframes particle-animation-17 {
        100% {
            transform: translate3d(17vw, 42vh, 31px);
        }
    }

    .particle:nth-child(17) {
        animation: particle-animation-17 60s infinite;
        opacity: 0.45;
        height: 2px;
        width: 2px;
        animation-delay: -3.4s;
        transform: translate3d(35vw, 38vh, 47px);
        background: #ff4646;
    }

    @keyframes particle-animation-18 {
        100% {
            transform: translate3d(59vw, 6vh, 32px);
        }
    }

    .particle:nth-child(18) {
        animation: particle-animation-18 60s infinite;
        opacity: 0.73;
        height: 2px;
        width: 2px;
        animation-delay: -3.6s;
        transform: translate3d(63vw, 15vh, 1px);
        background: #ff4646;
    }

    @keyframes particle-animation-19 {
        100% {
            transform: translate3d(64vw, 77vh, 12px);
        }
    }

    .particle:nth-child(19) {
        animation: particle-animation-19 60s infinite;
        opacity: 0.27;
        height: 2px;
        width: 2px;
        animation-delay: -3.8s;
        transform: translate3d(12vw, 28vh, 38px);
        background: #ff4646;
    }

    @keyframes particle-animation-20 {
        100% {
            transform: translate3d(5vw, 65vh, 21px);
        }
    }

    .particle:nth-child(20) {
        animation: particle-animation-20 60s infinite;
        opacity: 0.44;
        height: 2px;
        width: 2px;
        animation-delay: -4s;
        transform: translate3d(12vw, 48vh, 92px);
        background: #ff4646;
    }

    @keyframes particle-animation-21 {
        100% {
            transform: translate3d(29vw, 52vh, 81px);
        }
    }

    .particle:nth-child(21) {
        animation: particle-animation-21 60s infinite;
        opacity: 0.92;
        height: 2px;
        width: 2px;
        animation-delay: -4.2s;
        transform: translate3d(42vw, 83vh, 84px);
        background: #ff4646;
    }

    @keyframes particle-animation-22 {
        100% {
            transform: translate3d(20vw, 33vh, 21px);
        }
    }

    .particle:nth-child(22) {
        animation: particle-animation-22 60s infinite;
        opacity: 0.26;
        height: 2px;
        width: 2px;
        animation-delay: -4.4s;
        transform: translate3d(57vw, 11vh, 92px);
        background: #ff4646;
    }

    @keyframes particle-animation-23 {
        100% {
            transform: translate3d(62vw, 36vh, 95px);
        }
    }

    .particle:nth-child(23) {
        animation: particle-animation-23 60s infinite;
        opacity: 0.73;
        height: 2px;
        width: 2px;
        animation-delay: -4.6s;
        transform: translate3d(18vw, 28vh, 94px);
        background: #ff4646;
    }

    @keyframes particle-animation-24 {
        100% {
            transform: translate3d(51vw, 60vh, 77px);
        }
    }

    .particle:nth-child(24) {
        animation: particle-animation-24 60s infinite;
        opacity: 0.34;
        height: 2px;
        width: 2px;
        animation-delay: -4.8s;
        transform: translate3d(22vw, 52vh, 68px);
        background: #ff4646;
    }

    @keyframes particle-animation-25 {
        100% {
            transform: translate3d(53vw, 68vh, 75px);
        }
    }

    .particle:nth-child(25) {
        animation: particle-animation-25 60s infinite;
        opacity: 0.83;
        height: 2px;
        width: 2px;
        animation-delay: -5s;
        transform: translate3d(3vw, 55vh, 45px);
        background: #ff4646;
    }

    @keyframes particle-animation-26 {
        100% {
            transform: translate3d(62vw, 34vh, 99px);
        }
    }

    .particle:nth-child(26) {
        animation: particle-animation-26 60s infinite;
        opacity: 0.17;
        height: 2px;
        width: 2px;
        animation-delay: -5.2s;
        transform: translate3d(34vw, 53vh, 31px);
        background: #ff4646;
    }

    @keyframes particle-animation-27 {
        100% {
            transform: translate3d(33vw, 2vh, 4px);
        }
    }

    .particle:nth-child(27) {
        animation: particle-animation-27 60s infinite;
        opacity: 0.12;
        height: 2px;
        width: 2px;
        animation-delay: -5.4s;
        transform: translate3d(30vw, 12vh, 38px);
        background: #ff4646;
    }

    @keyframes particle-animation-28 {
        100% {
            transform: translate3d(85vw, 42vh, 70px);
        }
    }

    .particle:nth-child(28) {
        animation: particle-animation-28 60s infinite;
        opacity: 0.85;
        height: 2px;
        width: 2px;
        animation-delay: -5.6s;
        transform: translate3d(59vw, 3vh, 1px);
        background: #ff4646;
    }

    @keyframes particle-animation-29 {
        100% {
            transform: translate3d(20vw, 30vh, 12px);
        }
    }

    .particle:nth-child(29) {
        animation: particle-animation-29 60s infinite;
        opacity: 0.97;
        height: 2px;
        width: 2px;
        animation-delay: -5.8s;
        transform: translate3d(27vw, 85vh, 100px);
        background: #ff4646;
    }

    @keyframes particle-animation-30 {
        100% {
            transform: translate3d(27vw, 26vh, 49px);
        }
    }

    .particle:nth-child(30) {
        animation: particle-animation-30 60s infinite;
        opacity: 0.05;
        height: 2px;
        width: 2px;
        animation-delay: -6s;
        transform: translate3d(22vw, 49vh, 38px);
        background: #ff4646;
    }

    textarea::placeholder {
        color: #ff46468a;
    }

    textarea {
        border: none;
        overflow: auto;
        outline: none;
    
        -webkit-box-shadow: none;
        -moz-box-shadow: none;
        box-shadow: none;
    
        resize: none; /*remove the resize handle on the bottom right*/
    }


    .hinweisDaten{
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic" !important;
        font-size: 1.8461vh !important;
        letter-spacing: 0.2769vh;
        text-align: center;
        padding-top: 1vw;
        padding-bottom: 1vw;
        top: -9vh;
        position: absolute;
        left:50%;
        width:80%;
        left: 50%;
        width: 80%;
        transform: translate(-50%,0);
        opacity: 0.5;
        z-index: 30;
        cursor: pointer;
    }
    #jumparrow {
        width: 1.2vh;
        top: 45%;
        left: 50%;
        position: absolute;
        transform: translate(-50%,-50%);
        z-index:2;
    }

    #soundan {
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic" !important;
        font-size:  1.5vh !important;
        letter-spacing: 0.2571vh;
        text-align: center;
        padding-top: 1vh;
        padding-bottom: 1vh;
        top: 48%;
        position: absolute;
        left: 50%;
        width: 80%;
        transform: translate(-50%,0);
        opacity: 0.5;
        z-index: 2;
    }

    #buchstabenCount{
        position: absolute;
        bottom: 0vw;
        transform: translate(-120%,-120%);
        text-align: right;
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic" !important;
        font-size: 1.8461vh !important;
        letter-spacing: 0.2769vh;
        opacity: 0.5;
    }

    .moodCanvasSize{
        width: 60vh;
        height: 64vh;
        left:50%;
        top:50%;
    }

    @media (max-aspect-ratio: 1/1) {
        #savetheair {
            position: absolute;
            left: 50%;
            bottom: 7vh !important;
            transform: translate(-50%, 0);
            pointer-events: auto;
            width:  20vh;
            z-index: 60 !important;
            text-align: center;
        }

        .menuGrid {
            display: grid;
            grid-gap: 10px;
            z-index: 25;
            height: 100%;
            width: 100%;
            justify-items: center;
            grid-auto-flow: column;
            grid-template-columns: 1.5fr 0.5fr 1fr 1fr 1fr 1fr;
            align-content: space-around;
            margin-bottom: 3.9vh;
            padding-right: 2vh;
            padding-left: 2vh;
            left: 50%;
            transform: translate(0%,100%);
        }

        .shareMain {
            pointer-events: auto;
            position: fixed;
            z-index: 16;
            width: 100%;
            height: 30%;
            top: 60%;
        }

        #sphere {
            width: 100%;
            overflow: hidden;
            position: fixed;
            z-index: 20;
            left: 50%;
            top: 38%;
            transform: translate(-50%,-50%);
            pointer-events: none;
        }
    }
}