*:focus {
    outline: none !important;
}

#mainNav{
    background: none !important;
    border-style: none !important;
    z-index: 9999;
}

.fa-bars{
    color: #6d6e7a;
  
}

.navbar-toggler
{
    background-color: white !important;
    opacity: 0.9;
}

#startButton {
    /* transform: rotateX(-12deg) rotateY(0deg) rotate(0deg);
    transform-style: preserve-3d; */
    background-color: rgb(255, 255, 255);
    color: #6d6e7a;
    border-color: #6d6e7a;
    border-width: 3px;
    background-size: 90% 90%;
    cursor: pointer;
    min-width: 58px;
    min-height: 28px;
    height: 34px;
    padding: 2px 6px 2px 6px;
    position: absolute;
    /* left: 86px; */
    left: calc(50% - 23px);
    bottom: 50px;
    z-index: 9999;
    text-decoration-color: none;
    border-radius: 8px;
    touch-action: manipulation;
    font-family: Cabin,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-weight: bolder !important;
}

#nextButton {
    /* transform: rotateX(-12deg) rotateY(0deg) rotate(0deg);
    transform-style: preserve-3d; */
    background-color: rgb(255, 255, 255);
    color: #6d6e7a;
    border-color: #6d6e7a;
    border-width: 3px;
    background-size: 90% 90%;
    cursor: pointer;
    min-width: 58px;
    min-height: 28px;
    height: 34px;
    padding: 2px 6px 2px 6px;
    position: absolute;
    /* left: 158px; */
    left: calc(50% + 48px);
    bottom: 50px;
    z-index: 9999;
    text-decoration-color: none;
    border-radius: 8px;
    touch-action: manipulation;
    font-family: Cabin,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-weight: bolder !important;
}

#previousButton {
    /* transform: rotateX(-12deg) rotateY(0deg) rotate(0deg);
    transform-style: preserve-3d; */
    background-color: rgb(255, 255, 255);
    color: #6d6e7a;
    border-color: #6d6e7a;
    border-width: 3px;
    background-size: 90% 90%;
    cursor: pointer;
    min-width: 58px;
    min-height: 28px;
    height: 34px;
    padding: 2px 6px 2px 6px;
    position: absolute;
    /*left: 20px;*/
    left: calc(50% - 88px);
    bottom: 50px;
    z-index: 9999;
    text-decoration-color: none;
    border-radius: 8px;
    touch-action: manipulation;
    font-family: Cabin,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-weight: bolder !important;
}


#upButton {
    /* transform: rotateX(-12deg) rotateY(0deg) rotate(0deg);
    transform-style: preserve-3d; */
    background-color: rgb(255, 255, 255);
    color: #6d6e7a;
    border-color: #6d6e7a;
    border-width: 3px;
    background-size: 90% 90%;
    cursor: pointer;
    min-width: 58px;
    min-height: 28px;
    height: 34px;
    padding: 2px 6px 2px 6px;
    position: absolute;
    /* left: 158px; */
    left: calc(50% - 20px);
    bottom: 90px;
    z-index: 9999;
    text-decoration-color: none;
    border-radius: 8px;
    touch-action: manipulation;
    font-family: Cabin,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-weight: bolder !important;
}

#downButton {
    /* transform: rotateX(-12deg) rotateY(0deg) rotate(0deg);
    transform-style: preserve-3d; */
    background-color: rgb(255, 255, 255);
    color: #6d6e7a;
    border-color: #6d6e7a;
    border-width: 3px;
    background-size: 90% 90%;
    cursor: pointer;
    min-width: 58px;
    min-height: 28px;
    height: 34px;
    padding: 2px 6px 2px 6px;
    position: absolute;
    /*left: 20px;*/
    left: calc(50% - 20px);
    bottom: 10px;
    z-index: 9999;
    text-decoration-color: none;
    border-radius: 8px;
    touch-action: manipulation;
    font-family: Cabin,Helvetica Neue,Helvetica,Arial,sans-serif;
    font-size: 16px;
    font-weight: bolder !important;
}

/*
@media (max-width: 375px) {
    #previousButton {
        left: calc(50% - 150px);
    }
}


@media (max-width: 375px) {
    #startButton {
        left: calc(50% - 86px);
    }
}


@media (max-width: 375px) {
    #nextButton {
        left: calc(50% - 16px);
    }
}

@media (max-width: 375px) {
    #upButton {
        left: calc(50% - 83px);
    }
}

@media (max-width: 375px) {
    #downButton {
        left: calc(50% - 83px);
    }
}
*/

.startButton:focus {
    outline: none !important;
    box-shadow: none !important;
}

.active {
    border-radius: 4px;
    background-color: rgba(198, 204, 238, 0.2) !important;
}

.navbar-brand {
    /* color: rgb(109, 110, 122) !important;*/
    color: rgb(234, 244, 247) !important;
    font-family: Cabin,Helvetica Neue,Helvetica,Arial,sans-serif !important;
    font-weight: 700;
    padding-top: 13px;
}

.nav-link {
    padding-left: 10px !important;
    padding-right: 10px !important;
    /* color: rgb(109, 110, 122) !important;*/
    color: rgb(234, 244, 247) !important;
}

#vpaLogo {
    margin-top: -20px;
    width: 110px;
    height: 64px;
    margin-right: 10px;
}

/* Anpassungen fuer kleinere Displays */
@media (max-width: 375px) {
    #vpaLogo{
        width: 88px;
        height: 48px;
        margin-top: -4px !important;
        margin-left: -10px !important;
        margin-right: -10px !important;
    };
}

@media (max-width: 320px) {
    #vpaLogo{
        width: 66px;
        height: 36px;
        margin-top: -4px !important;
        margin-left: -6px !important;
        margin-right: -6px !important;
    }
}

@media (max-width: 375px) {
    .a-enter-vr-button {
        top: -24px;
    }
}



/* Pointer hint only for bigger Displays */
@media (max-width: 992px) {
    #buttonContainer0 {
        display: none;
    }
}

/* Joystick only for bigger Displays, otherwise problems with navigation buttons on mobliles and tablets */
@media (max-width: 1440px) {
    #joystick {
        display: none !important;
    }
}



/* VR Dialog soll nicht am Anfang angezeigt werden */
.a-modal {
    display: none !important;
}


.a-dialog-text {
    color: rgb(108, 109, 122) !important;
}

.a-enter-vr-button {
    background-size: 100% 100% !important;
    color: #6d6e7a !important;
    border: solid !important;
    border-color: #6d6e7a !important;
    border-width: 2px !important;
    min-width: 58px;
    min-height: 28px;
    height: 34px;
    padding: 2px 6px 2px 6px;
}


/* Modal contact Dialog */
.modal-body{
    font-family: Cabin,Helvetica Neue,Helvetica,Arial,sans-serif !important;
    font-size: 22px !important;
    font-style: normal !important;
    padding: 30px;
}

#contactText{
    font-family: Cabin,Helvetica Neue,Helvetica,Arial,sans-serif !important;
    font-size: 18px !important;
    font-style: normal !important;
}

#contactData{
    font-family: Cabin,Helvetica Neue,Helvetica,Arial,sans-serif !important;
    font-size: 18px !important;
    font-style: normal !important;
}
@media (max-width: 375px) {
    #modalContact{
        margin-top: -40px !important;
    }
}

@media (max-width: 375px) {
    #contactTitel{
        font-size: 20px !important;
        margin-bottom: 10px !important;
    }
}

@media (max-width: 375px) {
    #contactText{
        font-size: 16px !important;
        padding-bottom: 10px !important;
    }
}

@media (max-width: 375px) {
    #contactData{
        font-size: 16px !important;
        padding-bottom: 0px !important;
    }
}

@media (max-width: 375px) {
    #contactBody{
        padding-bottom: 0px !important;
    }
}