@font-face {
    font-family: 'regular-font';
    src: url('../fonts/lineto-brown-regular.ttf') format('truetype')
}
@font-face {
    font-family: 'bold-font';
    src: url('../fonts/lineto-brown-bold.ttf') format('truetype')
}
@font-face {
    font-family: 'light-font';
    src: url('../fonts/lineto-brown-light.ttf') format('truetype')
}

html, body {
    padding: 0;
    margin: 0;
}
body {
    width: 1920px;
    height: 1080px;
    background: #f4f4f4;

}


.content{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}

.text-center{
    text-align: center;
}




.container {
    position: relative;
    width: 100%;
    height: 100%;
    font-family: "regular-font", sans-serif;
    color: #000;
    opacity: 0;
    overflow: hidden;
}
.svg-defs {
    width: 0;
    height: 0;
}
h3 {
    font-family: "bold-font", sans-serif;
    font-weight: normal;
    font-size: 50px;
    margin-bottom: 40px;
}
h3.font-light {
    font-family: "light-font", sans-serif;
}
h3 span.font-bold {
    font-family: "bold-font", sans-serif;
}
.btn {
    transition: opacity 0.4s;
}
.btn-box {
    position: relative;
    width: 360px;
    height: 185px;
    border-radius: 36px;
    background-color: #fff;
    color: #00E2D5;
    text-align: center;
    margin: 0 auto;
    transition: all 0.3s;
}
.btn-box.inactive {
    background-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}
.btn-box span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 47px;
    width: 69%;
}
.error-msg {
    color: #FC9F86;
}



.full-screen {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.screen {
    display: none;
}
.start-screen {
/*.end-screen {*/
    display: block;
}


.city-shadow {
    opacity: 0.8;
}

.car {
    position: absolute;
    top: 0;
    left: 0;
}
.logo {
    position: absolute;
    top: 300px;
    left: 50%;
    transform: translate(-50%);
    width: 72%;
}
.start-btn,
.end-btn {
    /*position: absolute;*/
    /*left: 50%;*/
    /*transform: translate(-50%, 0);*/
    margin-top: 150px;
    text-align: center;
    color: black;
    font-size: 32px;
}
.start-btn.active,
.end-btn.active {
    opacity: 1;
}
.start-btn:nth-child(1),
.end-btn:nth-child(1) {
    /*top: 1300px;*/
}
.start-btn:nth-child(2),
.end-btn:nth-child(2) {
    /*top: 1450px;*/
}














.lang-selector,
.back-btn-container {
    position: absolute;
    top: 35px;
    font-size: 40px;
    opacity: 0;
    z-index: 11;
}
.lang-selector {
    right: 50px;
}
.back-btn-container {
    left: 50px;
}
.lang-selector img,
.lang-selector span,
.back-btn-container img,
.back-btn-container span {
    height: 52px;
    line-height: 52px;
    display: inline-block;
    float: left;
}
.back-btn-container img {
    padding-right: 20px;
}

.lang-selector img {
    height: 39px;
    padding: 10px 20px 3px 0;
}










.action-screen .title-container {
    position: absolute;
    top: 170px;
    left: 0;
    width: 100%;
    text-align: center;
    opacity: 0;
}
.action-screen h2 {
    color: rgba(156, 255, 252, 1);
    font-family: "bold-font", sans-serif;
    font-size: 115px;
    text-shadow: 0 0 30px rgba(156, 255, 252, 0.8);
    margin-bottom: 45px;
}
.action-screen h3 {
    margin: 0 270px;
}

.store-btns-container--tray-size,
.action-screen .btns-container {
    position: absolute;
    left: 0;
    width: 100%;
}

.action-screen .btn,
.store-screen .store-btns-container--tray-size .btn {
    position: absolute;
    top: 0;
    left: 50%;
    width: 400px;
    height: 240px;
}
.action-screen .btn {
    width: 380px;
}
.action-screen .btns-container {
    bottom: 500px;
}
.store-screen .store-btns-container--tray-size .btn:nth-child(1),
.action-screen .btn:nth-child(1) {
    transform: translate(-100%, 0);
}





.label-error {
    opacity: 0;
    margin-top: -110px;
}
.keyboard-screen .pin-input,
.barcode-input {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center;
    z-index: 6;
}
.keyboard-screen .pin-input {
    top: 0px;
}
.barcode-input {
    bottom: 90px;
}
.barcode-cube {
    width: 180px;
    padding-top: 40px;
}

.keyboard-screen .pin-code {
    width: 100%;
    height: 70px;
}
.keyboard-screen .pin-code-wrapper {
    padding-left: 80px;
    width: 330px;
    height: 100%;
    margin: 0 auto;

    background: white;
    border-radius: 20px;
    box-shadow: 4px 4px 5px inset rgb(0 0 0 / 30%);
}
.keyboard-screen .pin-code-number,
.keyboard-screen .pin-reset {
    display: inline-block;
    float: left;
}
.keyboard-screen .pin-code-number {
    font-size: 45px;
    padding: 4px 12px 6px 12px;
    margin: 8px;
    width: 25px;
    height: 50px;
    color: #000 !important;
    /*border-bottom-width: 5px;
    border-bottom-style: solid;
    border-bottom-color: #000 !important;*/
}
.keyboard-screen .pin-reset {
    width: 58px;
    height: 105px;
    opacity: 0.1;
}


.account-screen .title-container,
.account-screen .cube,
.pickup-screen .title-container,
.store-screen .title-container,
.store-screen .store-tray-container,
.store-screen .store-btns-container--main,
.pickup-screen .pickup-user-message-container,
.pickup-screen .pickup-animation,
.pickup-screen .pickup-parcel-cnt,
.pickup-screen .btns-container {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    width: 45%;
    text-align: center;
}

.account-screen .title-container,
.store-screen .title-container,

.pickup-screen .title-container {
    top: 50px;
}
.pickup-screen .title-container .pickup-screen-pick-title {
    margin-top: -170px;
    opacity: 0;
}
.pickup-screen .pickup-user-message-container {
    top: 250px;
    font-size: 40px;
}
.pickup-screen .pickup-animation {
    top: 480px;
    width: 53%;
}
.pickup-screen .pickup-user-message-container .pickup-user-message--error {
    padding: 0 70px;
    opacity: 0;
    display: none;
}
.pickup-screen .pickup-parcel-cnt {
    top: 340px;
}
.pickup-screen .btns-container {
    bottom: 400px;
    opacity: 0;
    display: none;
}





.store-screen .tray-size {
    text-transform: uppercase;
}
.store-screen .store-btns-container--main {
    top: 560px;
}

.action-screen .btn-box,
.pickup-screen .next-parcel-btn .btn-box,
.store-screen .store-btn .btn-box {
    width: 300px;
    height: 160px;
}
.action-screen .btn-box span,
.store-screen .store-btn .btn-box span {
    font-size: 40px;
}
.store-screen .store-btn.store-btn {
    padding-bottom: 40px;
}

.store-screen .store-btns-container--main .btn.store-btn {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
}
.store-screen .store-btns-container--main .btn.store-btn.next-parcel-btn {
    top: 0;
}
.store-screen .store-btns-container--main .btn.store-btn.fetching-tray-btn {
    top: 0;
    opacity: 0;
    display: none;
}
.store-screen .store-btns-container--main .btn-box.fetching-tray-btn {
    background-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}
.store-screen .btn.store-btn.stop-btn {
    transform: translate(-50%, 100%);
}

.store-screen .store-tray-container {
    bottom: 700px;
    width: 100%;
}
.store-screen .store-btns-container--tray-size {
    bottom: 450px;
}
.store-screen .store-btns-container--tray-size span {
    width: 100%;
}
.store-screen span.tray-size--invert {
    position: static;
    text-transform: uppercase;
}


.account-screen .cube {
    top: 720px;
    width: 55%;
}

.end-screen .end-btns-container {
    opacity: 0;
}


.keyboard-graphics {
    position: absolute;
    bottom: 600px;
    left: 50%;
    transform: translate(-50%);
    width: 50%;
    z-index: 0;
    display: none;
}