@font-face {
    font-family: din-pro-bold;
    src: url(/fonts/din-pro-bold.otf);
    font-weight: 700
}

@font-face {
    font-family: din-pro-medium;
    src: url(/fonts/din-pro-medium.otf);
    font-weight: 400
}

* {
    box-sizing: border-box
}

body,
html {
    margin: 0;
    padding: 0;
    overflow: hidden;
    font-family: din-pro-medium, sans-serif
}

#enter-vr {
    position: fixed;
    bottom: 20px;
    right: 20px;
    border: 0;
    outline: none!important;
    box-shadow: none!important;
    background: transparent
}

#enter-vr img {
    width: 40px
}

#enter-vr.isActive {
    left: 50%;
    right: auto;
    transform: translateX(-50%)
}

#enter-vr.isActive img {
    display: none
}

#enter-vr.isActive:after {
    content: "\00d7";
    color: #fff;
    font-size: 70px;
    font-weight: 700
}

#vr-crosshair {
    display: none
}

#vr-crosshair.isActive {
    display: block
}

#vr-crosshair.animate-focus .crosshair {
    animation: b 2s linear
}

#vr-crosshair .crosshair {
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 8px;
    height: 8px;
    border: 1px solid #fff;
    background-color: rgba(0, 0, 0, .3);
    display: inline-block
}

#vr-crosshair .crosshair-left {
    left: 25%
}

#vr-crosshair .crosshair-right {
    left: 75%
}

#buffer {
    display: none
}

#buffer.isActive {
    display: block
}

#buffer.vr .buffer-left {
    left: 25%
}

#buffer.vr .buffer-right {
    left: 75%;
    display: block
}

#buffer .buffer {
    position: fixed;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    border: 5px solid #fff;
    border-color: #fff #fff #fff rgba(0, 0, 0, .4);
    background-color: transparent;
    z-index: 4;
    animation: a 1s infinite linear
}

#buffer .buffer-right {
    display: none
}

#buffer .buffer-left {
    left: 50%
}

#ss-logo {
    position: fixed;
    top: 10px
}

#ss-logo.isActive .ss-logo-left {
    display: block
}

.ss-logo {
    width: 100px;
    position: fixed;
    top: 10px;
    right: 10px
}

.ss-logo-left {
    right: 50%;
    transform: translateX(-10px);
    display: none
}

@keyframes a {
    0% {
        transform: translate(-50%, -50%) rotate(0deg)
    }
    to {
        transform: translate(-50%, -50%) rotate(1turn)
    }
}

@keyframes b {
    0% {
        border-width: 1px;
        width: 8px;
        height: 8px
    }
    to {
        border-width: 4px
    }
}

.angle,
.time-overlay {
    position: fixed;
    padding: 10px;
    background-color: rgba(0, 0, 0, .7);
    color: #fff;
    font-family: sans-serif;
    font-size: 20px;
    z-index: 5
}

.angle {
    top: 50px;
    left: 0
}

.form {
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-family: sans-serif;
    overflow: auto;
    padding: 0 0 30px
}

.form,
.form-overlay {
    width: 100%;
    height: 100%
}

.form-overlay {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    padding: 20px;
    display: none
}

.form-overlay.isActive {
    display: block
}

.form-header {
    padding: 20px;
    display: flex;
    width: 100%;
    max-width: 900px;
    margin: 0 auto
}

.form-header-item {
    flex: 1 1 100%
}

.form-header-item:last-child {
    flex: 1 1 200px
}

.form-header-description {
    font-size: 35px;
    font-family: din-pro-medium, sans-serif;
    font-weight: 400
}

.form-header-value {
    font-size: 65px;
    font-family: din-pro-bold, sans-serif;
    font-weight: 700
}

.form-inputs {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-width: 900px;
    margin: 0 auto
}

.form-input {
    flex: 0 1 50%;
    padding: 10px 20px
}

.form-input label {
    padding-bottom: 20px
}

.form-input input,
.form-input label {
    display: block;
    font-size: 30px;
    font-family: din-pro-medium, sans-serif;
    font-weight: 400
}

.form-input input {
    padding: 15px;
    color: #000;
    width: 100%;
    border: 1px solid #fff
}

.form-input input.hasError {
    border: 1px solid red
}

.form-input--checkbox {
    flex: 1 1 100%;
    font-family: din-pro-medium, sans-serif;
    font-weight: 400
}

.form-real-checkbox {
    display: none!important
}

.form-real-checkbox:checked ~ .form-fake-checkbox:after {
    display: inline-block
}

.form-real-checkbox.hasError ~ .form-fake-checkbox {
    border: 1px solid red
}

.form-fake-checkbox {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 1px solid #fff;
    position: relative;
    font-family: din-pro-medium, sans-serif;
    font-weight: 400
}

.form-fake-checkbox:after {
    content: "\2713";
    font-size: 24px;
    display: none;
    position: absolute;
    top: -9px
}

.form-button-wrapper {
    text-align: center
}

.form-button {
    padding: 20px;
    border: 2px solid #fff;
    background-color: transparent;
    color: #fff;
    font-family: sans-serif;
    font-size: 24px;
    text-transform: uppercase
}

.form-button:active,
.form-button:focus,
.form-button:hover {
    color: #000;
    background-color: #fff
}

.form-button.isHidden {
    display: none
}

@media (max-width:767px) {
    .form-header {
        flex-wrap: wrap
    }
    .form-header-item {
        flex: 1 1 100%;
        text-align: center;
        margin-bottom: 30px
    }
    .form-input {
        flex: 1 1 100%;
        margin-bottom: 20px
    }
}

.loading-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background-color: #fff;
    background-image: url(/loading/loading_screen.png);
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    transition: all .4s ease
}

.loading-screen.isHidden {
    visibility: hidden;
    opacity: 0
}

.loading-screen-element-wrapper {
    padding-top: 250px
}

.loading-screen-element {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 177px
}

.loading-screen-headline {
    font-size: 70px;
    color: #fff;
    display: block;
    text-align: center;
    padding: 20px;
    margin-top: 70px;
    font-family: din-pro-bold, sans-serif;
    font-weight: 700
}

@media (max-height:830px) {
    .loading-screen-headline {
        font-size: 40px
    }
    .loading-screen-element-wrapper {
        padding-top: 50px
    }
}

@media (max-width:600px) {
    .loading-screen-loader-wrapper {
        left: 15px;
        width: calc(100% - 30px);
        transform: none
    }
    .loading-screen-element-wrapper {
        padding-top: 70px
    }
    .loading-screen-element {
        width: 280px;
        height: 99px
    }
    .loading-screen-headline {
        margin-top: 50px;
        font-size: 33px
    }
}

.end-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url(/loading/end_screen.png);
    background-size: cover;
    z-index: 1;
    text-align: center;
    padding-top: 250px;
    transition: all .4s ease
}

.end-screen.isHidden,
.end-screen.logoHeadlineHidden .end-screen-headline,
.end-screen.logoHeadlineHidden .end-screen-logo {
    visibility: hidden;
    opacity: 0
}

.end-screen-logo {
    width: 500px;
    transition: all .4s ease
}

.end-screen-headline {
    font-size: 70px;
    color: #fff;
    display: block;
    text-align: center;
    padding: 20px;
    margin-top: 70px;
    transition: all .4s ease;
    font-family: din-pro-bold, sans-serif;
    font-weight: 700
}

@media (max-width:600px) {
    .end-screen {
        padding-top: 120px
    }
    .end-screen-logo {
        width: 280px
    }
    .end-screen-headline {
        margin-top: 50px;
        font-size: 40px
    }
}

figure{
    overflow: hidden;
}