.loginRegist .containers {position: relative;max-width: 100%;min-height: 100vh;background-color: var(--bg-color);overflow: hidden;background-repeat: no-repeat;background-image: url('../images/register.jpg');background-size: cover }.loginRegist .containers:before {content: "";position: absolute;width: 2000px;height: 2000px;border-radius: 50%;background: linear-gradient(-45deg,var(--bg-round-a),var(--bg-round-b));top: -10%;right: 48%;transform: translateY(-50%);z-index: 6;transition: 1.8s ease-in-out;background: var(--wim-black,#3c3531) }.loginRegist .forms-containers {position: absolute;width: 100%;height: 100%;top: 0;left: 0 }.loginRegist .signin-signup {position: absolute;top: 50%;left: 75%;transform: translate(-50%,-50%);width: 50%;display: grid;grid-template-columns: 1fr;z-index: 5;transition: 1s ease-in-out .7s }.loginRegist #popUpBox, .loginRegist .btn-modal {background: pink;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%) }.loginRegist form {display: flex;align-items: center;justify-content: center;flex-direction: column;padding: 0 5rem;overflow: hidden;grid-column: 1/2;grid-row: 1/2;transition: .2s ease-in-out .7s }.loginRegist form.sign-in-form {z-index: 2 }.loginRegist .containers.sign-up-mode form.sign-in-form, .loginRegist form.sign-up-form {z-index: 1;opacity: 0 }.loginRegist .btn-modal {font-size: 20px;color: #fff;padding: 10px 30px;cursor: pointer }.loginRegist #popUpBox {width: 500px;overflow: hidden;box-shadow: 0 0 10px #000;border-radius: 10px;z-index: 9999;padding: 10px;text-align: center;display: none }.loginRegist .title {font-size: 2.2rem;color: var(--wim-black,#a47c68);margin-bottom: 10px;font-weight: 600 }.loginRegist .input-field {width: 85%;height: 55px;margin: 10px 0;border-radius: 55px;display: grid;grid-template-columns: 15% 70% 15%;padding: 0 .4rem;background: #fdfbfe;box-shadow: rgb(0 0 0 / 16%) 0 1px 4px;background: #ffffff26 }.loginRegist .input-field i {text-align: center;line-height: 55px;color: var(--wim-black,#a47c68);font-size: 1.1rem }.loginRegist .key {color: var(--key-color);text-decoration: none }.loginRegist .key:hover, .loginRegist .pass:hover {color: #3b3b3b;}.loginRegist .pass {margin: 12px 0;color: #000000;}.loginRegist #togglePassword, .loginRegist #toggleReg {text-align: center;color: var(--wim-black,#a47c68);}.loginRegist .input-field input {background: 0 0;outline: 0;border: none;line-height: 1;font-weight: 600;font-size: 1.1rem;color: var(--wim-black,#a47c68) }.loginRegist .input-field input::placeholder {color: var(--input-hover);font-weight: 500 }.loginRegist .btn {width: 150px;height: 49px;border: none;outline: 0;border-radius: 49px;cursor: pointer;color: var(--btn-text);text-transform: uppercase;font-weight: 600;margin: 10px 0;transition: .5s;background-color: var(--wim-base,#a47c68);color: #fff;box-shadow: none !important;font-size: 13px }.loginRegist .btn:hover {background-color: var(--warning,#a47c68) }.loginRegist .check {display: block;position: relative;margin: 12px 0;cursor: pointer;font-size: 16px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none }.loginRegist .checkmark {color: var(--check-text) }.loginRegist .checkmark a {color: var(--check-link);text-decoration: underline }.loginRegist .checkmark a:hover {color: var(--check-hover) }.loginRegist .social-text {padding: .7rem 0;font-size: 1rem;color: var(--social-text) }.loginRegist .icon-mode, .loginRegist .social-icon {display: flex;text-decoration: none;color: var(--icon-color);transition: .3s }.loginRegist .social-media {display: flex;justify-content: center }.loginRegist .social-icon {height: 46px;width: 46px;border: 1px solid var(--icon-color);margin: 0 .45rem;justify-content: center;align-items: center;font-size: 1.1rem;border-radius: 50% }.loginRegist .icon-mode:hover, .loginRegist .social-icon:hover {color: var(--social-icon);border-color: var(--social-icon) }.loginRegist .icon-mode {height: 32px;width: 32px;border: 1px solid var(--icon-color);margin: 40px 5px 0;justify-content: center;align-items: center;font-size: 1rem;border-radius: 50% }.loginRegist .text-mode {padding: .5rem 0;font-size: .8rem;font-style: italic;color: var(--social-text) }.loginRegist .panels-containers {position: absolute;width: 100%;height: 100%;top: 0;left: 0;display: grid;grid-template-columns: repeat(2,1fr) }.loginRegist .panel {display: flex;flex-direction: column;align-items: flex-end;justify-content: space-around;text-align: center;z-index: 7 }.loginRegist .left-panel {pointer-events: all;padding: 17% 17% 7rem 12%;}.loginRegist .right-panel {pointer-events: none;padding: 0% 12% 12% 16%;}.loginRegist .panel .content {transition: .9s ease-in-out .6s;color: #fff;text-align: center }.loginRegist .panel h3 {font-weight: 600;line-height: 2;font-size: 1.5rem;color: #fff }.loginRegist .panel p {font-size: .95rem;padding: .7rem 0 }.loginRegist .btn.transparent {margin: 0;background: 0 0;border: 2px solid #fff;width: 150px;height: 41px;font-weight: 600;font-size: .8rem }.loginRegist .image {width: 90%;margin-top: 10px;transition: 1.1s ease-in-out .4s }.loginRegist .right-panel .content, .loginRegist .right-panel .image {transform: translateX(1200px);}.loginRegist .containers.sign-up-mode:before {transform: translate(100%,-50%);right: 52% }.loginRegist .containers.sign-up-mode .left-panel .content, .loginRegist .containers.sign-up-mode .left-panel .image {transform: translateX(-800px) }.loginRegist .containers.sign-up-mode .right-panel .content, .loginRegist .containers.sign-up-mode .right-panel .image {transform: translateX(0) }.loginRegist .containers.sign-up-mode .left-panel {pointer-events: none }.loginRegist .containers.sign-up-mode .right-panel {pointer-events: all }.loginRegist .containers.sign-up-mode .signin-signup {left: 25% }.loginRegist .containers.sign-up-mode form.sign-up-form {z-index: 2;opacity: 1 }.keyboard {position: fixed;left: 0;bottom: 0;width: 100%;padding: 5px 0;background: var(--keyboard-color);box-shadow: 0 0 50px rgba(0,0,0,.5);user-select: none;transition: bottom .4s;z-index: 999 }.keyboard--hidden {bottom: -100% }.keyboard__keys {text-align: center }.keyboard__key {height: 45px;width: 6%;max-width: 90px;margin: 3px;border-radius: 4px;border: none;background: rgba(255,255,255,.2);color: var(--key-letter);font-size: 1.05rem;outline: 0;cursor: pointer;display: inline-flex;align-items: center;justify-content: center;vertical-align: top;padding: 0;-webkit-tap-highlight-color: transparent;position: relative }.keyboard__key:active {background: rgba(255,255,255,.12) }.keyboard__key--wide {width: 12% }.keyboard__key--extra-wide {width: 36%;max-width: 500px }.keyboard__key--activatable::after {content: "";top: 10px;right: 10px;position: absolute;width: 8px;height: 8px;background: rgba(0,0,0,.4);border-radius: 50% }.keyboard__key--active::after {background: #08ff00 }.keyboard__key--dark {background: rgba(0,0,0,.25) }@media (max-width: 870px) {.loginRegist .containers {min-height: 800px;height: 100vh }.loginRegist .containers::before {width: 1500px;height: 1500px;left: 30%;bottom: 68%;transform: translateX(-50%);right: initial;top: initial;transition: 2s ease-in-out }.loginRegist .signin-signup {width: 100%;left: 50%;top: 95%;transform: translate(-50%,-100%);transition: 1s ease-in-out .8s }.loginRegist .panels-containers {grid-template-columns: 1fr;grid-template-rows: 1fr 2fr 1fr }.loginRegist .panel {flex-direction: row;justify-content: space-around;align-items: center;padding: 2.5rem 8% }.loginRegist .panel .content {padding-right: 15%;transition: .9s ease-in-out .8s }.loginRegist .panel h3 {font-size: 1.2rem }.loginRegist .panel p {font-size: .7rem;padding: .5rem 0 }.loginRegist .btn.transparent {width: 135px;height: 35px;font-size: .7rem }.loginRegist .image {display: none }.loginRegist .left-panel {grid-row: 1/2 }.loginRegist .right-panel {grid-row: 3/4 }.loginRegist .right-panel .content, .loginRegist .right-panel .image {transform: translateY(300px) }.loginRegist .containers.sign-up-mode:before {transform: translate(-50%,100%);bottom: 32%;right: initial }.loginRegist .containers.sign-up-mode .left-panel .content, .loginRegist .containers.sign-up-mode .left-panel .image {transform: translateY(-300px) }.loginRegist .containers.sign-up-mode .signin-signup {top: 5%;transform: translate(-50%,0);left: 50% }.loginRegist .key, .loginRegist .keyboard {opacity: 0;visibility: hidden;font-size: .1px }}@media (max-width: 570px) {.loginRegist form {padding: 0 1.5rem }.loginRegist .image, .loginRegist .panel p {display: none }.loginRegist .panel .content {padding: .5rem 1rem }.loginRegist .containers:before {bottom: 75%;left: 50% }.loginRegist .containers.sign-up-mode:before {bottom: 24%;left: 50% }.loginRegist .field-icon {float: right;margin-left: 300px;margin-top: -55px;position: relative;z-index: 1 }}@media (max-width: 385px) {.loginRegist .field-icon {float: right;margin-left: 260px;margin-top: -55px;position: relative;z-index: 1 }}@media (max-width: 350px) {.loginRegist .field-icon {float: right;margin-left: 200px;margin-top: -55px;position: relative;z-index: 1 }}