.max-wrapper {
    max-width: 100% !important;
    min-height: 1080px;
    background-size: 100% 100%;
}

.container {
    max-width: 100%;
}
.button-container {
    margin: 25px 0;
    width: 100%;
    z-index: 2;
    position: absolute;
    bottom: 10%;
}
.content-area-outer {
    padding: 0 !important;
}

.site-logo img {
    width: 250px;
    max-width: unset;
}
.site-logo{
    text-align: right;
    padding: 20px 20px 0 20px !important;
}
.start-screen .site-logo{
     text-align: center !important;
}

.btn-image {
    max-width: 220px;
    max-height: unset !important;
}

.start-screen .site-logo img {
   width: 400px;
}
.screen-header{
    text-align: center;
    width: 100%;
    font-size: 36px;
    padding-top: 30px;
}

.page-loader img.loader {
    width: 165px;
}


.container-ratio-outer-1-1 {
    width: 1920px;
    height: 1080px;
    margin: 0 !important;
}
.start-screen .subtitle{
    font-size: 30px;
    padding:20px;
}

.site-logo {
    padding: 40px 0;
}

.live-screen .experience-container-outer {
    display: none !important;
}

.result-screen .experience-container-outer p {
    display: none !important;
}
.result-screen .button-container {
    position:relative !important;
    bottom:unset;
}
.result-screen .experience-container {
    max-width: 900px;
    flex-direction: column-reverse;
    text-align: left;
}

.checkbox-container .col-10 p {
    font-size: 36px;
}

.data-screen .experience-container-outer p {
    font-size: 30px;
}

.data-screen .bg-btn {
    font-size: 36px !important;
    border-radius: 10px !important;
    padding: 20px 30px !important;
    max-width: 390px !important;
}

.field-group {
    margin-bottom: 20px;
}

.data-screen .button-container {
    display: none !important;
}

.data-screen .experience-container-outer {
    width: 100%;
}

.checkbox-container {
    max-width: 900px;
}

.ldBar {
    width: 350px !important;
    height: 350px !important;
    padding: 25px;
}

.ldBar-label {
    font-size: 30px;
}

.last-screen .experience-container {
    max-width: 800px;
}


.last-screen .extra-container {
    display: none !important;
}

.live-screen .site-logo {
    display: none !important;
}

.custom-control-label:before {
    width: 3.2rem;
    height: 3.2rem;
}

.custom-control-label::after {
    width: 3.2rem;
    height: 3.2rem;
}

.mfp-close-btn-in .mfp-close {
    color: #333;
    font-size: 44px;
}

.landscape-keyword .checkbox label::before {
    top: 12px;
    width: 45px;
    height: 45px;
}

.landscape-keyword .checkbox input[type="checkbox"]:checked + label::before {
    background-size: 75px 75px;
}

.landscape-keyword .checkbox label {
    padding-left: 0px;
    font-size: 30px;
    margin-bottom: 40px;
    text-align: left;
}

.landscape-keyword {
    display: block;
}

.potrait-keyboard {
    display: none !important;
}

.keyboard-screen {
    max-width: 1500px;
    width: 100%;
    padding: 58px;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: auto;
    box-sizing: border-box;
    padding-bottom: 0;
}

.keyboard-row {
    display: flex;
    justify-content: left;
    gap: 10px;
    margin-bottom: 12px;
    width: 100%;
}

.key {
    width: 100px;
    height: 95px;
    background-color: transparent;
    color: #CE212E;
    font-size: 28px;
    border-radius: 10px;
    text-align: center;
    line-height: 100px;
    cursor: pointer;
    border: 1px solid #CE212E;
    user-select: none;
    box-sizing: border-box;
    flex-shrink: 0;
}

.key-bksp {
    width: 165px;
}

.key-send {
    width: 388px;
}

.key-space {
    width: 330px;
}

.key-com {
    width: 160px;
}

.email-suggestions {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    width: 100%;
    margin-top: 4px;
    margin-bottom: 20px;
    max-width: 1400px;
}

    .email-suggestions .key {
        flex: 1;
        height: 100px;
        line-height: 60px;
        border-radius: 8px;
        font-size: 36px !important;
    }

.input-fields {
    width: 100%;
    display: flex;
    flex-direction: row;
    gap: 22px;
    margin-top: 0px;
    max-width: 1500px;
    flex-wrap: wrap;
}

.input-field {
  font-size: 30px !important;
    padding: 18px 30px !important;
    flex: 1 1 calc(33.33% - 22px);
    min-width: 0;
    max-width: 33% !important;
    text-align: left;
    margin: 0;
}

.checkbox {
    display: flex;
    align-items: flex-start;
    margin-top: 20px;
    font-size: 18px;
    color: white;
    padding-left: 10px;
    max-width: 1400px;
    text-align: left;
    width: 100%;
}

    .checkbox input {
        margin-right: 32px;
        margin-top: 14px;
        transform: scale(2.4);
        margin-left: 4px;
    }

.result-screen .container-ratio-outer-1-1 {
    width: 900px;
    height: 600px;
    margin: auto !important;
    background: transparent;
}

.last-screen .container-ratio-outer-1-1 {
    width: 900px;
    height: 600px;
    margin: auto !important;
    background: transparent;
}

.qr-screen .content-area-outer {
    flex-direction: column !important;
    justify-content: center;
    align-items: center;
    display: flex;
    height: 75%;
}

.last-screen .content-area-outer {
    margin: auto;
    padding: 40px;
}

.result-screen .experience-container-outer, .last-screen .experience-container-outer {
    width: 30%;
}

.result-screen .content-area-outer, .last-screen .content-area-outer {
    margin: auto;
    gap: 10px;
    flex-direction: row !important;
    align-items: center;
        padding: 0 40px !important;
}

    .result-screen .content-area-outer .content-area, .last-screen .content-area-outer .content-area {
        width: 70%;
    }

.last-screen .last-text {
    font-size: 30px;
}

.last-screen .last-text-header {
    font-size: 60px;
}

.data-screen .content-area-outer {
    margin: auto;
}
.frame-screen .frame-screen-content {
    margin:100px 0 0 0 !important
}
.frame-screen .frame-screen-content .item img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.frame-screen .frame-screen-content .item {
    max-width: 400px;
    margin: 30px;
    display: inline-block;
    border: 2px solid #fff;
    height: 400px;
}

.container-ratio-outer{
     width: 1920px;
    height: 1080px;
    margin: 0 !important;
     background-color: transparent;
}
.result-screen .container-ratio-outer{
     width: 900px;
    height: 500px;
    margin: auto !important;
}
.container-ratio-outer .webcam{
    width: 100%;
}
.result-screen .container-ratio-outer video ,.last-screen .container-ratio-outer video {
 width: 100%;
 height: 100%;
 object-fit: cover;
}
.last-screen .container-ratio-outer{
     width: 900px;
    height: 500px;
    margin: auto !important;
    background-color: transparent;
}
.qr-screen .container-ratio-outer {
    width: 300px !important;
    height: auto !important;
    background-color: transparent;
    margin: 0 auto !important;
}
.last-screen .content-area-outer .content-area {
    width: 60% !important;
}