@media (min-width:200px) and (max-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;
    }

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

    #canvas0,
    #canvas1,
    #canvas2,
    #canvas3,
    #canvas5 {
        width: 100vw;
        height: auto;
        top: 50%;
        position: absolute;
        transform: translate(0,-50%);
        display: block;
    }

    #canvas4{
        width: 130vw;
        height: auto;
        top: 50%;
        position: absolute;
        transform: translate(-15%,-50%);
        display: block;
    }

    .talkcanvas {
        overflow: hidden;
        position: fixed;
        z-index: 20;
        left: 50%;
        top: 38%;
        transform: translate(-50%,-50%);
        width: 100vw;
        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: auto;
        height: 100%;
        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: 6vh;
        height: auto;
        pointer-events: all;
    }

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

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

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

    #savetheair {
        position: absolute;
        left: 50%;
        bottom: 6vh;
        transform: translate(-50%,0%);
        pointer-events: all;
        width: 50%;
        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: 4vw;
        text-decoration: none;
        letter-spacing: 1.3vw;
        border-width: 0px;
        padding-bottom: 2vw;
    }

    #savetheair svg {
    }

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

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

    #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;
        display: inline-block;
        cursor: pointer;
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic";
        font-size: 5vw;
        text-decoration: none;
        letter-spacing: 0.6vw;
        text-align: center;
        padding: 3.0vw 13vw 2.3vw;
    }

    #writeMessageButton {
        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

    .sendLuftButton .arrowLeft {
        transform: translateY(-50%);
        padding-right: 5.8vw;
        height: 2.2vw;
        width: auto;
        position: absolute;
        top: 50%;
        left: 4vw;
    }

    .sendLuftButton .arrowRight {
        transform: translate(0, -50%);
        height: 2.2vw;
        width: auto;
        align-content: center;
        position: absolute;
        top: 50%;
        right: 5vw;
    }

    .sendLuftButton .arrowRightRight {
        transform: translate(0, -50%);
        padding-left: 4.8vw;
        height: 2.2vw;
        right: 3vw;
        width: auto;
        align-content: center;
        position: absolute;
        top: 50%;
    }

    .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: 5vw;
        color: #ff4646;
    }

    .selectedmood {
        position: absolute;
        display: inline-block;
        bottom: 10vw;
        left: 50vw;
        transform: translate(-50%, 60%);
        text-align: center;
        letter-spacing: 0.62vw;
    }

    .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: 4vw;
        color: #ff4646;
        letter-spacing: 0.62vw;
        width: 100%;
        text-align: center;
        opacity: 0.5;
        line-height: 7.5vw;
    }

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

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


    .introMain {
    }

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

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

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

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

    #talkcanvassphere{
        opacity: 0;
    }

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

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

    #backButtonWrite {
        margin-right: 3.3vw;
        width: 40%;
        text-align: center !important;
    }

    .backButton .arrowLeft {
        transform: translate(0, -50%);
        height: 2vw;
        width: auto;
        position: absolute;
        left: 11vw;
        top: 50%;
    }

    .backButton .arrowLeftLeft {
        transform: translate(0, -50%);
        height: 2vw;
        width: auto;
        position: absolute;
        left: 4vw;
        top: 50%;
    }

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

    .adamButton {
        border-radius: 10px;
        display: inline-block;
        cursor: pointer;
        padding-right: 0;
        border-width: 0px;
        margin-bottom: 1vh;
        width: 80%;
        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: 4vw;
        padding: 3vw 3vw;
        text-decoration: none;
        letter-spacing: 0.62vw;

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

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

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

    #facebookButton {
        background-color: #1787FB;
    }

    #emailButton {
        background-color: #ff4646;
    }

    #DesktopEmailButton{
        background-color: #ff4646;
    }

    #DesktopCopy{
        background-color: #a0c0ef;
    }

    #backButtonDesktop {
        background-color: rgba(255, 255, 255, 0);
        border-color: #ff4646;
        border-width: 1px;
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic" !important;
        width: 38% !important;
        margin-top: 0vh;
    }

    #backButtonDesktop span {
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic" !important;
        font-size: 4vw !important;
        letter-spacing: 0.62vw;
        text-align: center;
        padding-top: 2vw;
        padding-bottom: 1vw;

    }

    #backButtonDesktop img {
        position: absolute;
        left: 0%;
        top: 50%;
        transform: translate(0, -50%);
        z-index: 17;
        padding-left: 3vw;
        height: 2.2vw;
    }


    #backButton {
        background-color: rgba(255, 255, 255, 0);
        border-color: #ff4646;
        border-width: 1px;
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic" !important;
        width: 38% !important;
        margin-top: 0vh;
    }

    #backButton span {
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic" !important;
        font-size: 4vw !important;
        letter-spacing: 0.62vw;
        text-align: center;
        padding-top: 2vw;
        padding-bottom: 1vw;
    }

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

    .goButton {
        background-color: #ff4646;
        border-radius: 10px;
        border: 1px solid #ff4646;
        display: inline-block;
        cursor: pointer;
        color: #ffff;
        font-family: "WeissenhofGrotesk-Italic";
        font-size: 4vw;
        padding: 1.5vw 3vw;
        text-decoration: none;
        letter-spacing: 0.62vw;
        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: 4vw;
        padding: 2vw 3vw 1.5vw;
        text-decoration: none;
        letter-spacing: 0.62vw;
        text-align: center;
    }

    #goButtonWrite {
        width: 40%;
    }

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

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

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

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

    #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: 5vw;
        padding: 1.5vw 9vw;
        text-decoration: none;
        letter-spacing: 0.62vw;
        height: 25vw;
        line-height: 10vw;
        width: calc(100% - 16vw);
        box-shadow: none !important;
        -webkit-appearance: none;
    }

    .previewText {
        position: absolute;
        display: inline-block;
        transform: translate(-50%, -50%);
        bottom: 40%;
        left: 50%;
        width: 80%;
        text-align: center;
        background-color: transparent;
        display: inline-block;
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic";
        font-size: 5vw;
        padding: 1.5vw 3vw;
        text-decoration: none;
        letter-spacing: 0.62vw;
        height: 25vw;
        line-height: 10vw;
    }

    .previewReceivedMain {
        position: fixed;
        display: inline-block;
        transform: translate(-50%, 0);
        bottom: 30%;
        left: 50%;
        width: 80%;
        text-align: center;
        background-color: transparent;
        display: inline-block;
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic";
        font-size: 5vw;
        padding: 1.5vw 3vw;
        text-decoration: none;
        letter-spacing: 0.62vw;
        padding-left: 10vw;
        height: 25vw;
        line-height: 10vw;
    }

    #previewSendButton {
        top: 50% !important;
        left: 50%;
        transform: translate(-50%, -50%);
    }

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

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

    #backButtonPreview {
        margin-right: 3vw;
        width: 45%;
        text-align: center;
    }

    #goButtonPreview {
        position: relative;
        text-align: right;
        width: 38vw;
    }

    #goButtonPreview img {
        width: 6vw;
        height: auto;
        vertical-align: middle;
        position: absolute;
        top: 1vw;
        left: 3vw;
    }

    .mainMenu {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 21;
    }

    .menuList {
        position: absolute;
        width: 70%;
        height: 70%;
        left: 50%;
        top: calc(50% + 10vw);
        transform: translate(-50%, -50%);
        z-index: 25;
    }

    .menuGrid {
        display: grid;
        grid-gap: 10px;
        grid-auto-rows: auto;
        z-index: 25;
        height: 100%;
        width: 100%;
        justify-items: center;
    }

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

    #item_0,
    #item_1,
    #item_2,
    #item_3,
    #item_4 {
        z-index: 26 !important;
        pointer-events: auto !important;
        display: block;
    }

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

    .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: 39%;
        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;
    }

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

    #losgehtsbutton {
        left: 50%;
        top: calc(51% + 16vw);
        position: absolute;
        transform: translate(-50%, -50%);
        padding: 2vw 6vw 1.5vw 6vw !important;
        z-index: 30;
        pointer-events: auto !important;
    }

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

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

    .subtitleMovie {
        font-family: "WeissenhofGrotesk-Italic";
        font-size: 5vw;
        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.75vw;
        line-height: 10vw;
    }

    .form-control {
        border: 2 solid;
    }

    .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: 3vw !important; */
        position: relative;
        width: 38vw;
        text-align: right;
    }

    #goButtonReceiveAgain img {
        /* width: 4vw;
        padding-right: 3vw !important;
        top: 0px;
        height: auto;
        vertical-align: middle; */
        width: 6vw;
        height: auto;
        vertical-align: middle;
        position: absolute;
        top: 1vw;
        left: 3vw;
    }

    #goCreateNew {

    }



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

    #skipbutton {
        top: 6vh;
        position: absolute;
        right: 8vw;
        width: 10vw;
        opacity: 0;
    }

    #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,  1px);
        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, 3px);
        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,  1px);
        background: #ff4646;
    }

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

    .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,  1px);
        }
    }

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

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

    #jumparrow {
        width: 2vw;
        top: 49%;
        left: 50%;
        position: absolute;
        transform: translate(-50%,-50%);
        z-index: 2;
    }

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

    #buchstabenCount{
        position: absolute;
        right: 10vw;
        bottom: 0vw;
        text-align: right;
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic" !important;
        font-size: 4vw !important;
        letter-spacing: 0.62vw;
        opacity: 0.5;
    }

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

@media screen and (orientation:landscape) {
    .landscapeMode{
        position: absolute;
        z-index: 100;
    }

    .landscapeBG{
        position: fixed;
        top:50%;
        left:50%;
        width: 100%;
        height:100%;
        background-color:white ;
        transform: translate(-50%,-50%);
        z-index: 100;
    }

    .landscapeMode span{
        z-index: 101;
        position: fixed;
        left: 50%;
        top: 17vh;
        width: 100%;
        text-align: center;
        transform: translate(-50%,-50%);
        color: #ff4646;
        font-family: "WeissenhofGrotesk-Italic" !important;
        font-size: 4vh !important;
        letter-spacing: 0.52vh;
        opacity: 0.5;
    }

    .landscapeMode img{
        z-index: 101;
        position: fixed;
        top:50%;
        left:50%;
        transform: translate(-50%,-50%);
        height:50%;
    }

}