@font-face {
    font-family: 'fa-webfont';
    src: url('/fonts/fontawesome-webfont.ttf') format('truetype');
}
body {
    background: rgb(31, 31, 31);
    position: relative;
    overflow: hidden;
    text-align: center;
    font-family: Arimo,sans-serif;
    font-weight: normal;
    transition: all 250ms ease-in;
    overflow-y:hidden;
}
.hidden {
    display:none;
}
.main-body {
    width: 1920px;
    height: 1080px;
    overflow: hidden;
    justify-content: center;
    margin-left: calc((100vw - 1920px) / 2);
    margin-right: calc((100vw - 1920px) / 2);
    position: relative;
    --border: solid 1px rgb(128, 128, 128, 0.2);
}
@media screen and (orientation:portrait) {
    .main-body {
        width: 1080px;
        height: 1920px;
        overflow: hidden;
        justify-content: center;
        margin-left: calc((100vw - 1080px) / 2);
        margin-right: calc((100vw - 1080px) / 2);
        --border: solid 1px white;
        position: relative;
    }
}

    .background {
        display: flex;
        flex-direction: row;
        justify-content: center;
        position: relative;
        height: 100%;
        width: 100%;
        background-color: transparent;
        z-index: 0;
    }

    .prevent-select {
        -webkit-user-select: none; /* Safari */
        -ms-user-select: none; /* IE 10 and IE 11 */
        user-select: none; /* Standard syntax */
    }

    .overlay {
        display: flex;
        margin: 0px;
        flex-direction: row;
        justify-content: center;
        height: 100%;
        width: 100%;
    }

    .background-div {
        overflow: hidden;
        width: 100%;
        justify-content: center;
    }

    .background-img {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        background-color: transparent;
        background-image: url("../images/Ellipse-darkblue.png");
        background-repeat: no-repeat;
        background-position: center top;
        background-size: 100% 100%;
        opacity: 1;
    }

    .background-img-left {
        background-image: url("../images/Ellipse-darkblue-left.png");
    }

    .background-img-bottom {
        top: 50%;
        height: 80%;
    }

    .background-lower {
        position: absolute;
        top: 43%;
        left: 0px;
        width: 100%;
        height: 57%;
        background-color: #2B2B32;
    }

    .try-out-your-ai-voice {
        height: 45%;
        top: 20px;
    }

    .overlap-buttons {
        position: absolute;
        width: 100%;
        height: 19.8%;
        top: 80%;
        left: 0;
        justify-content: center;
        text-align: center;
        z-index: 999;
        opacity: 1;
    }

    .left-button-overlap {
        position: absolute;
        top: 0px;
        left: 50px;
        padding: 0px;
        text-align: left;
        align-content: flex-start;
        padding-left: 2%;
        padding-right: 2%
    }

    .middle-button-overlap {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        padding: 0px;
        text-align: center;
        align-content: center;
        padding-left: 2%;
        padding-right: 2%;
    }

    .right-button-overlap {
        position: absolute;
        top: 0px;
        right: 50px;
        padding: 0px;
        text-align: left;
        align-content: flex-end;
        padding-left: 2%;
        padding-right: 2%
    }

    @media screen and (orientation:portrait) {
        .overlap-buttons {
            top: 82%;
        }

        .background-img {
            top: 5%;
            height: 80%;
        }

        .background-lower {
            top: 55%;
            height: 45%;
        }

        .background-img-bottom {
            top: 40%;
            height: 60%;
        }

        .try-out-your-ai-voice {
            height: 45%;
            top: 200px;
        }
    }

    @media screen and (orientation:landscape) {
        .overlap-buttons {
            top: 80%;
        }

        .background-img {
            opacity: 0.7;
        }
    }



    /*---------------------------------------------------------------------------------*/
.overlap-bottombuttons {
    display:none;
}
.overlap-toplogos {
    z-index: 1;
    height: 120px;
    overflow: hidden;
}

    .toplogo2 {
        position: absolute;
        right: 2%;
        width: 20%;
        pointer-events: none;
    }

    .toplogo1 {
        position: absolute;
        left: 2%;
        width: 35%;
        pointer-events: none;
    }
    /*---------------------------------------------------------------------------------*/
    @media screen and (orientation:portrait) {
        .overlap-toplogos {
            top: 0;
            width: 100%;
        }

        .toplogo2 {
            right: 3vw;
            width: 300px;
        }

        .toplogo1 {
            left: 3vw;
            width: 300px;
        }
    }

    @media screen and (orientation:landscape) {

        .overlap-toplogos {
            top: 0%;
            width: 100%;
        }

        .toplogo2 {
            right: 3%;
            width: 250px;
        }

        .toplogo1 {
            left: 3%;
            width: 250px;
        }
    }

    .message {
        color: white;
        font-size: 34px;
        letter-spacing: 2px;
        text-align: center;
        vertical-align: middle;
        padding: 50px;
    }

    /*---------------------------------------------------------------------------------*/

    .big-message-container {
        position: absolute;
        width: 900px;
        left: calc(50% - 900px / 2);
        top: 122px;
        height: 40%; 
    }

    @media screen and (orientation:landscape) {
        .big-message-container {
            top: 80px;
            height: calc(100% - 82px - 200px);
            width: 1300px;
            left: calc(50% - 1300px / 2);
        }
    }

    .big-message-container .text {
        color: white;
        font-size: 64px;
        letter-spacing: 2px;
        text-align: center;
        vertical-align: middle;
    }

.big-message-container .declaration-text {
    color: white;
    font-size: 40px;
    font-weight: 500;
    letter-spacing: 2px;
    text-align: center;
    vertical-align: middle;
    max-width: 70%;
    margin-left: 15%;
    margin-right: 15%;
}

    .big-message-container .try-out-your-ai-voice-text {
        font-size: 40px;
        font-weight: 700;
        top: 100px;
        position: absolute;
        width: 100%;
        left: 0px;
        padding-top: 3%;
        padding-left: 20%;
        padding-right: 20%;
    }

    .big-message-container .try-out-your-ai-voice-langs {
        position: relative;
        display: inline-block;
        z-index: 99999;
    }

    .box-message-container {
        position: absolute;
        width: 810px;
        left: calc(50% - 405px);
        top: 50%;
        background-color: black;
        background: linear-gradient(to left, #2b2b2b9f 20%, rgba(255,255,255,0.05) 90%);
        border: solid 3px #ffffff20;
        border-radius: 55px;
        -moz-box-shadow: rgba(0,0,0,0.1) 0 0 15px 15px;
        -webkit-box-shadow: rgba(0,0,0,0.1) 0 0 15px 15px;
        box-shadow: rgba(0,0,0,0.1) 0 0 15px 15px;
        padding: 10px;
    }

        .box-message-container .text {
            color: white;
            font-size: 42px;
            letter-spacing: 1px;
            text-align: center;
            vertical-align: middle;
            padding: 30px;
            margin-bottom: 30px;
        }

        .box-message-container .title {
            color: white;
            font-size: 28px;
            letter-spacing: 1px;
            text-align: center;
            vertical-align: middle;
            padding: 20px;
        }

    /*---------------------------------------------------------------------------------*/

    .box-note-container {
        position: absolute;
        width: 70%;
        margin-left: 15%;
        margin-right: 15%;
        top: 49%;
        height: 18%;
        background-color: black;
        background: linear-gradient(to left, #2b2b2b9f 20%, rgba(255,255,255,0.05) 90%);
        border: solid 3px #ffffff20;
        border-radius: 55px;
        -moz-box-shadow: rgba(0,0,0,0.1) 0 0 15px 15px;
        -webkit-box-shadow: rgba(0,0,0,0.1) 0 0 15px 15px;
        box-shadow: rgba(0,0,0,0.1) 0 0 15px 15px;
        padding: 5px;
    }

        .box-note-container .text {
            color: white;
            font-size: 32px;
            letter-spacing: 1px;
            text-align: center;
            vertical-align: middle;
            padding: 5px;
        }

        .box-note-container .title {
            color: white;
            font-size: 24px;
            letter-spacing: 1px;
            text-align: center;
            vertical-align: middle;
            padding: 5px;
        }

    .sentense-1 {
        top: 20%;
    }

    .sentense-2 {
        top: 40%;
    }

    .sentense-3 {
        top: 60%;
    }

    .sample-text {
        font-size: 23px;
        font-weight: 300;
        text-align: left;
    }

    @media screen and (orientation:portrait) {
        .box-note-container {
            top: 60%;
            height:14%;
            width:90%;
            margin-left:5%;
        }

        .finish-button-div, .start-button-div {
            top: 80%;
        }

        .sentense-1 {
            top: 30%;
        }

        .sentense-2 {
            top: 45%;
        }

        .sentense-3 {
            top: 60%;
        }
    }

    @media screen and (orientation:landscape) {
        .box-message-container {
            top: 30%;
        }

        .big-message-container .try-out-your-ai-voice-text {
            font-size: 40px;
            font-weight: 700;
            position: absolute;
            width: 100%;
            left: 0px;
            top: 2%;
            padding-top: 2%;
            padding-left: 2%;
            padding-right: 2%;
        }
    }

    /*---------------------------------------------------------------------------------*/
    .play-button {
        background-image: url(/images/Play.png);
    }

    .record-button {
        background-image: url(/images/Microphone.png);
    }

    .media-button {
        position: absolute;
        width: 300px;
        height: 300px;
        left: calc(50% - 150px);
        top: -50px;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: 100%;
        cursor: pointer;
    }

        .media-button:hover {
            -webkit-transform: scale(1.05);
            transition: all 500ms ease-in;
        }

    .media-button-pressed {
    }

        .media-button-pressed:hover {
            -webkit-transform: scale(1.0);
        }

    .media-button-start {
        -webkit-animation: button_filter_clicked_blue;
        -webkit-animation-duration: 500ms;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: 1;
    }

    .media-button-stop {
        -webkit-animation: button_filter_clicked_red;
        -webkit-animation-duration: 1s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: 1;
    }

    .media-button-processing {
        background-image: url(/images/Pause.png) !important;
        -webkit-animation: button_filter_breathing_red;
        -webkit-animation-duration: 4s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
    }

    .media-button-countdown3 {
        background-image: url(/images/CountDown3.png) !important;
        -webkit-animation: button_filter_breathing_red;
        -webkit-animation-duration: 4s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
    }

    .media-button-countdown2 {
        background-image: url(/images/CountDown2.png) !important;
        -webkit-animation: button_filter_breathing_red;
        -webkit-animation-duration: 4s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
    }

.media-button-countdown1 {
    background-image: url(/images/Microphone.png) !important;
    -webkit-animation: button_filter_breathing_red;
    -webkit-animation-duration: 4s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

    .media-button-processing:hover {
        -webkit-transform: scale(1.0);
    }
    /*---------------------------------------------------------------------------------*/



    @-webkit-keyframes button_transform_scale {
        0% {
            -webkit-transform: scale(1.0);
        }

        80% {
            -webkit-transform: scale(1.2);
        }

        100% {
            -webkit-transform: scale(1.1);
        }
    }

    @-webkit-keyframes button_filter_turnred {
        0% {
            -webkit-filter: drop-shadow(0 0 10px #000000);
        }

        100% {
            -webkit-filter: drop-shadow(0 0 30px #ff0000);
        }
    }

    @-webkit-keyframes button_filter_clicked_blue {

        0% {
            -webkit-filter: drop-shadow(0 0 2px #00ffd6);
        }

        50% {
            -webkit-filter: drop-shadow(0 0 30px #00ffd6);
        }

        70% {
            -webkit-filter: drop-shadow(0 0 10px #00ffd6);
        }

        100% {
            -webkit-filter: drop-shadow(0 0 20px #ff0000);
        }
    }

    @-webkit-keyframes button_filter_clicked_red {

        0% {
            -webkit-filter: drop-shadow(0 0 10px #ff0000);
        }

        50% {
            -webkit-filter: drop-shadow(0 0 30px #ff0000);
        }

        70% {
            -webkit-filter: drop-shadow(0 0 10px #ff0000);
        }

        100% {
            -webkit-filter: drop-shadow(0 0 10px #ff0000);
        }
    }

    @-webkit-keyframes button_filter_turnblue {
        0% {
            -webkit-filter: drop-shadow(0 0 10px #000000);
        }

        100% {
            -webkit-filter: drop-shadow(0 0 30px #00ffd6);
        }
    }

    @-webkit-keyframes button_filter_breathing_red {
        0% {
            -webkit-filter: drop-shadow(0 0 10px #ff0000);
        }

        20% {
            -webkit-filter: drop-shadow(0 0 20px #ff0000);
        }

        40% {
            -webkit-filter: drop-shadow(0 0 40px #ff0000);
        }

        60% {
            -webkit-filter: drop-shadow(0 0 10px #ff0000);
        }

        80% {
            -webkit-filter: drop-shadow(0 0 20px #ff0000);
        }

        100% {
            -webkit-filter: drop-shadow(0 0 10px #ff0000);
        }
    }

    /*---------------------------------------------------------------------------------*/
    .key-button {
        display: inline-block;
        width: 100px;
        height: 100px;
        margin: 0px;
    }

        .key-button:hover {
            -webkit-animation: none;
        }

            .key-button:hover .button-text {
                color: white !important;
                text-fill-color: white !important;
                -webkit-text-fill-color: white;
                background-clip: unset;
                -webkit-background-clip: unset;
            }

        .key-button .button-body {
            border-radius: 10px;
            width: 80px;
            height: 80px;
            padding: 5px;
            padding-top: 20px;
        }


    .keybroad {
        border: solid 2px rgba(0,0,0,0.1);
        border-radius: 10px;
        padding: 20px;
    }

    .keybroad-line {
        white-space: nowrap;
        padding: 4px;
        height: 100px;
        overflow: hidden;
    }

    .keybroad-key .button-text {
        color: white !important;
        text-fill-color: white !important;
        -webkit-text-fill-color: white;
        background-clip: unset;
        -webkit-background-clip: unset;
    }

    @media screen and (orientation:portrait) {
        .keybroad {
            padding-top: 5px;
            z-index: 99;
        }

        .keybroad-line {
            height: 96px;
        }

        .overlap-buttons .buttons {
            position: absolute;
            top: 30%;
            width: 100%;
            z-index: 0;
        }

        .overlap-buttons .message {
            padding-top: 0px;
        }

        .overlap-buttons .buttons .td-center {
            width: 30%;
            pointer-events: none;
            visibility: hidden;
        }
    }

    @media screen and (orientation:landscape) {
        .keybroad {
            padding-top: 5px;
            z-index: 99;
        }

        .keybroad-line {
            height: 96px;
        }

        .overlap-buttons .buttons {
            position: absolute;
            top: 30%;
            width: 100%;
            z-index: 0;
        }

        .overlap-buttons .message {
            padding-top: 0px;
        }

        .overlap-buttons .buttons .td-center {
            width: 60%;
            pointer-events: none;
            visibility: hidden;
        }
    }

    .name-input {
        background-color: transparent;
        border: none;
        outline: none;
    }

    .system-error-message {
        color: white;
        font-size: 42px;
        position: absolute;
        left: 0px;
        width: 100%;
        top: 30%;
        padding-left: 15%;
        padding-right: 15%; 
    }

    .system-error-message-details {
        font-size: 28px;
    }

    .debug-text {
        color: lightcyan;
        position: fixed;
        top: 10%;
        left: 0px;
        width: 50%;
        left: 25%;
    }

    .timeout-remaining {
        position: absolute;
        bottom: 0px;
        left: 0px;
        color: rgba(255,255,255,0.6);
        z-index: 9999999;
        width: 100%;
        background-color: transparent;
        font-size: 30px;
        display: none;
    }

        .timeout-remaining .time {
            display: inline-block;
            color: white;
        }

    .debug-button {
        position: fixed;
        left: 0px;
        top: calc(100% - 5vh);
        width: 5vw;
        height: 5vh;
        background-color: gray;
        opacity: 0;
        z-index: 99999;
    } 

    /*------------------------------------------------------------------------------*/
    .PageTitle {
        position:absolute;
        color: white;
        font-size: 80px;
        font-weight: bold;
        position: absolute;
        top: 10%;
        width: 100%;
        text-align: center;
    }

    .LoginPicture {
        position: absolute;
        left: 0px;
        width: 100%;
        top: 5%;
    }

    .overlap-login {
        padding-top: 0px;
        position: absolute;
        width: 100%;
        padding-left: auto;
        padding-right: auto;
        top: 50%;
        text-align: center;
        align-items: center;
        transform: scale(2);
    }

        .overlap-login .label {
            color: white;
            width: 300px;
            margin-top: 20px;
            margin-left: auto;
            margin-right: auto;
            text-align: left;
        }

        .overlap-login .input-text {
            color: black;
            width: 300px;
        }

        .overlap-login .result-text {
            margin-top: 20px;
            color: red;
        }

    @media screen and (orientation:portrait) {
        .PageTitle {
            top: 30%;
        }

        .LoginPicture {
            top: 40%;
        }

        .overlap-login {
            top: 60%;
        }
    }

    .finish-overlap {
        position: absolute;
        right: 50px;
        top: 50px;
    }

    @media screen and (orientation:portrait) {
        .finish-overlap {
            position: absolute;
            right: 50px;
            top: 200px;
            left: 0px;
            width: 100%;
        }
    }
    /*------------------------------------------------------------------------------*/
    .debug-button:hover {
        opacity: 0.3;
    }

microphone {
    background-image: url(/images/Microphone.png);
    display: inline-block;
    width: 40px;
    height: 40px;
    background-position: center center;
    background-size: 170% 170%;
    background-repeat: no-repeat;
}
stop {
    background-image: url(/images/Pause.png);
    display: inline-block;
    width: 40px;
    height: 40px;
    background-position: center center;
    background-size: 170% 170%;
    background-repeat: no-repeat;
}

.big-note-container .declaration-text {
    display:none;
}

.loadingicon {
    background-image: url('/images/white loading.gif');
    background-position: center center;
    background-size: 150%;
    position: absolute;
    left: 0px;
    width: 100%;
    height: 100%;
    margin: 0%;
    opacity: 0.9;
}