/**
 * Custom Login Layout
 * 
 * @title      Login
 * @desc       Login layout
 * @copyright  (c) 2021, Stephino
 * @author     Mark Jivko <stephino.team@gmail.com>
 * @package    stephino-rpg
 * @license    GPL v3+, https://gnu.org/licenses/gpl-3.0.txt
 */
/*Stephino RPG:Login*/@font-face {font-family: 'Oxanium';src: url("../../fonts/Oxanium-Bold.ttf") format('truetype');font-weight: 900;font-style: normal;}@font-face {font-family: 'Oxanium';src: url("../../fonts/Oxanium-Regular.ttf") format('truetype');font-weight: 400;font-style: normal}@font-face {font-family: 'Oxanium';src: url("../../fonts/Oxanium-Light.ttf") format('truetype');font-weight: 100;font-style: normal;}html, body { background-color: white; -ms-touch-action: none !important; touch-action: none !important; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}::-webkit-scrollbar { width: 6px;}::-webkit-scrollbar-track { border-radius: 6px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); box-shadow: inset 0 0 6px rgba(0,0,0,0.3)}::-webkit-scrollbar-thumb { border-radius: 6px; background: rgba(255,255,255,0.8);}::-webkit-scrollbar:horizontal { height: 6px;}html { overflow: hidden;}body { cursor: url("../../../themes/default/img/ui/cursor-default.cur"), default; position: relative; overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-family: 'Oxanium',arial,georgia,sans-serif;}body:before, body:after { content: ''; display: block; position: absolute; z-index: 1; width: 100%; height: 120%; top: 0; left: 0; background: url("../../../themes/default/img/ui/login/login-stripes.png") repeat 0 0 transparent; mix-blend-mode: overlay; opacity: 0.6; -webkit-animation: anim-body 2s linear infinite; animation: anim-body 2s linear infinite;}body:before { background: url("../../../themes/default/img/ui/login/login-bkg.jpg") repeat 0 0 #fff; background-size: cover; height: 100%; mix-blend-mode: normal; opacity: 1; -webkit-animation: none; animation: none; z-index: 0; -webkit-transition: -webkit-filter 2s linear; transition: -webkit-filter 2s linear; -o-transition: filter 2s linear; transition: filter 2s linear; transition: filter 2s linear, -webkit-filter 2s linear; -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s;}a, label, input[type="submit"], input[type="checkbox"], button, .button { cursor: url("../../../themes/default/img/ui/cursor-pointer.cur"), pointer !important;}#backtoblog, #login h1, .forgetmenot { display: none !important;}#login { position: relative; z-index: 5; left: 5%; margin: 0; padding: 0; -webkit-transform: translateX(-150%); -ms-transform: translateX(-150%); transform: translateX(-150%); -webkit-transition: -webkit-transform 1.5s cubic-bezier(0.49, -0.6, 0.395, 1.365); transition: -webkit-transform 1.5s cubic-bezier(0.49, -0.6, 0.395, 1.365); -o-transition: transform 1.5s cubic-bezier(0.49, -0.6, 0.395, 1.365); transition: transform 1.5s cubic-bezier(0.49, -0.6, 0.395, 1.365); transition: transform 1.5s cubic-bezier(0.49, -0.6, 0.395, 1.365), -webkit-transform 1.5s cubic-bezier(0.49, -0.6, 0.395, 1.365); -webkit-transition-delay: 0.25s; -o-transition-delay: 0.25s; transition-delay: 0.25s; border: none; -webkit-box-shadow: none; box-shadow: none; outline: none;}#login form { background: transparent; -webkit-box-shadow: none; box-shadow: none; padding: 0 8px; margin: 0; border: none;}body, #login .message, #login #login_error, label, input,[data-role="stephino-login-title"], button, a { color: #ffffff !important;}#login form label { font-size: 1.6em;}.wp-pwd button { margin: 5px 5px 0 0 !important; outline: none !important; -webkit-box-shadow: none !important; box-shadow: none !important; border: none !important;}#login form input[type="text"],#login form input[type="password"],#login form input[type="email"] { opacity: 0.8; border: none; text-indent: 10px; height: 50px; border-radius: 0; outline: none; -webkit-text-fill-color: #ffffff; -webkit-box-shadow: 0px 0px 0px 1000px #0c0c0c inset; box-shadow: 0px 0px 0px 1000px #0c0c0c inset; margin-bottom: 5px;}input:hover,input:focus,input:-webkit-autofill:hover, input:-webkit-autofill:focus,textarea:-webkit-autofill:hover,textarea:-webkit-autofill:focus,select:-webkit-autofill:hover,select:-webkit-autofill:focus { opacity: 1 !important;}#login form input[type="text"]:focus,#login form input[type="password"]:focus { -webkit-box-shadow: 0px 0px 0px 1000px #0c0c0c inset, -5px 0px 0px 0px #e87116; box-shadow: 0px 0px 0px 1000px #0c0c0c inset, -5px 0px 0px 0px #e87116;}[data-role="stephino-login-circle"] { width: 90vh; height: 90vh; position: absolute; z-index: 3; mix-blend-mode: overlay; bottom: 5vh; -webkit-animation: anim-circle 3s linear infinite; animation: anim-circle 3s linear infinite; right: 15%; -webkit-transition: -webkit-transform 4s cubic-bezier(0.49, -0.6, 0.395, 1.365); transition: -webkit-transform 4s cubic-bezier(0.49, -0.6, 0.395, 1.365); -o-transition: transform 4s cubic-bezier(0.49, -0.6, 0.395, 1.365); transition: transform 4s cubic-bezier(0.49, -0.6, 0.395, 1.365); transition: transform 4s cubic-bezier(0.49, -0.6, 0.395, 1.365), -webkit-transform 4s cubic-bezier(0.49, -0.6, 0.395, 1.365); -webkit-transition-delay: 2s; -o-transition-delay: 2s; transition-delay: 2s; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0);}[data-role="stephino-login-circle"]:before,[data-role="stephino-login-circle"]:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../../../themes/default/img/ui/login/login-circle.png") no-repeat 0 0 transparent; background-size: auto 100%; -webkit-animation: anim-circle-outer 32s linear infinite; animation: anim-circle-outer 32s linear infinite;}[data-role="stephino-login-circle"]:after { background-position: 100% 0%; -webkit-animation: anim-circle-inner 28s linear infinite; animation: anim-circle-inner 28s linear infinite;}[data-role="stephino-login-char"] { width: 100vh; height: 100vh; position: absolute; z-index: 4; right: 10%; bottom: -15vh; -webkit-transition: -webkit-transform 2.5s cubic-bezier(0.49, -0.6, 0.395, 1.365); transition: -webkit-transform 2.5s cubic-bezier(0.49, -0.6, 0.395, 1.365); -o-transition: transform 2.5s cubic-bezier(0.49, -0.6, 0.395, 1.365); transition: transform 2.5s cubic-bezier(0.49, -0.6, 0.395, 1.365); transition: transform 2.5s cubic-bezier(0.49, -0.6, 0.395, 1.365), -webkit-transform 2.5s cubic-bezier(0.49, -0.6, 0.395, 1.365); -webkit-transition-delay: 1.25s; -o-transition-delay: 1.25s; transition-delay: 1.25s; -webkit-transform: translate(100%, 40%) scale(0); -ms-transform: translate(100%, 40%) scale(0); transform: translate(100%, 40%) scale(0);}[data-role="stephino-login-char"]:before,[data-role="stephino-login-char"]:after { content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../../../themes/default/img/ui/login/login-char.png") no-repeat 0 0 transparent; background-size: auto 100%;}[data-role="stephino-login-char"]:after { background-position: 200% 0; -webkit-animation: anim-char-after 10s linear infinite; animation: anim-char-after 10s linear infinite;}[data-role="stephino-login-blob-separator"] { width: 100vh; z-index: 2; position: absolute; right: 0; overflow: hidden;}[data-role="stephino-login-title"] { font-weight: bold; position: absolute; z-index: 3; width: 60%; right: 5%; text-align: right; font-size: 20vh; line-height: 20vh; top: 10%; -webkit-transition: -webkit-transform 4s cubic-bezier(0.49, -0.6, 0.395, 1.365); transition: -webkit-transform 4s cubic-bezier(0.49, -0.6, 0.395, 1.365); -o-transition: transform 4s cubic-bezier(0.49, -0.6, 0.395, 1.365); transition: transform 4s cubic-bezier(0.49, -0.6, 0.395, 1.365); transition: transform 4s cubic-bezier(0.49, -0.6, 0.395, 1.365), -webkit-transform 4s cubic-bezier(0.49, -0.6, 0.395, 1.365); -webkit-transition-delay: 0.75s; -o-transition-delay: 0.75s; transition-delay: 0.75s; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%);}[data-role="stephino-login-title"] > span { display: inline-block; font-size: 0.2em; clear: both; float: right; width: 75%; margin-left: 40%; max-height: 0vh; overflow: hidden; -o-text-overflow: ellipsis; text-overflow: ellipsis; -webkit-transition: max-height 3s linear; -o-transition: max-height 3s linear; transition: max-height 3s linear; -webkit-transition-delay: 1.5s; -o-transition-delay: 1.5s; transition-delay: 1.5s; line-height: 6vh; position: static;}[data-role="stephino-login-title"] > span:after { content: '...'; display: inline-block; position: absolute; right: 0; bottom: 0; -webkit-transform: translateX(100%); -ms-transform: translateX(100%); transform: translateX(100%); line-height: 1.2em;}body.ready [data-role="stephino-login-title"] > span { max-height: 29vh;}[data-role="stephino-login-blob-separator"] > svg { position: relative; -webkit-transition: -webkit-transform 1.5s linear; transition: -webkit-transform 1.5s linear; -o-transition: transform 1.5s linear; transition: transform 1.5s linear; transition: transform 1.5s linear, -webkit-transform 1.5s linear; -webkit-transition-delay: 0.5s; -o-transition-delay: 0.5s; transition-delay: 0.5s; -webkit-transform: translate(200%, 100%) scale(1) rotate(90deg); -ms-transform: translate(200%, 100%) scale(1) rotate(90deg); transform: translate(200%, 100%) scale(1) rotate(90deg);}[data-role="stephino-login-blob-separator"] > svg > path { fill: #e87116;}body.ready [data-role="stephino-login-blob-separator"] > svg { -webkit-transform: translate(35%, 0%) scale(2) rotate(0deg); -ms-transform: translate(35%, 0%) scale(2) rotate(0deg); transform: translate(35%, 0%) scale(2) rotate(0deg);}body.ready [data-role="stephino-login-title"] { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%);}body.ready [data-role="stephino-login-char"] { -webkit-transform: translate(0, 0) scale(1); -ms-transform: translate(0, 0) scale(1); transform: translate(0, 0) scale(1);}body.ready [data-role="stephino-login-circle"] { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1);}[data-role="stephino-login-fullscreen"] { display: inline-block; width: 8vh; height: 8vh; position: absolute; top: 5vh; left: 5%; z-index: 10;}[data-role="stephino-login-fullscreen"]:before,[data-role="stephino-login-fullscreen"]:after { content: '\25e3'; display: block; width: 5vh; height: 5vh; font-size: 1.2em; line-height: 5vh; text-align: center; font-weight: normal; font-family: monospace; position: absolute; left: 1vh; bottom: 1vh; -webkit-transform-origin: top right; -ms-transform-origin: top right; transform-origin: top right;}[data-role="stephino-login-fullscreen"]:hover:before,[data-role="stephino-login-fullscreen"]:hover:after { -webkit-animation: anim-fullscreen 1s infinite linear; animation: anim-fullscreen 1s infinite linear;}[data-role="stephino-login-fullscreen"]:after { content: '\25e5'; left: auto; bottom: auto; right: 1vh; top: 1vh; -webkit-transform-origin: bottom left; -ms-transform-origin: bottom left; transform-origin: bottom left;}:-webkit-full-screen [data-role="stephino-login-fullscreen"] { display: none !important;}:-ms-fullscreen [data-role="stephino-login-fullscreen"] { display: none !important;}:-moz-full-screen [data-role="stephino-login-fullscreen"] { display: none !important;}:fullscreen [data-role="stephino-login-fullscreen"] { display: none !important;}@-webkit-keyframes anim-fullscreen { 0% {-webkit-transform: scale(0.2);transform: scale(0.2);} 50% {-webkit-transform: scale(1);transform: scale(1);} 99.9% {-webkit-transform: scale(1);transform: scale(1);} 100% {-webkit-transform: scale(0.2);transform: scale(0.2);}}@keyframes anim-fullscreen { 0% {-webkit-transform: scale(0.2);transform: scale(0.2);} 50% {-webkit-transform: scale(1);transform: scale(1);} 99.9% {-webkit-transform: scale(1);transform: scale(1);} 100% {-webkit-transform: scale(0.2);transform: scale(0.2);}}body.ready #login { -webkit-transform: translateX(0%); -ms-transform: translateX(0%); transform: translateX(0%); -webkit-transform-origin: left; -ms-transform-origin: left; transform-origin: left;}body.ready:before { -webkit-filter: brightness(0.5); filter: brightness(0.5);}.st-btn { display: inline-block; border: none; height: 50px; padding: 0px 20px; width: 100%; position: relative; margin: 10px 0; background: transparent; font-weight: bold; text-transform: uppercase; font-size: 1.1em; margin-top: 15px;}.st-btn.st-btn-half { width: -webkit-calc(50% - 10px); width: calc(50% - 10px); float: left;}.st-btn.st-btn-half:first-child { margin-right: 20px;}.st-btn:before, .st-btn:after { content: ''; display: block; position: absolute; width: -webkit-calc(100% + 12px); width: calc(100% + 12px); height: 50%; top: -7px; left: -7px; z-index: 0; border: 1px solid rgba(255,255,255,0.5);}.st-btn:before { border-bottom: 0;}.st-btn:after { top: auto; bottom: -7px; border-top: 0;}.st-btn > div, .st-btn > div > span { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; width: 100%; height: 100%; left: 0; top: 0; text-align: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; line-height: 1.3em;}.st-btn > div { overflow: hidden;}.st-btn > div > span:first-child { background: #111111; height: 100%; top: 0; left: -10%; width: 120%; -webkit-transform: translateX(-100%) skew(-10deg); -ms-transform: translateX(-100%) skew(-10deg); transform: translateX(-100%) skew(-10deg); -webkit-transition: -webkit-transform 0.2s linear; transition: -webkit-transform 0.2s linear; -o-transition: transform 0.2s linear; transition: transform 0.2s linear; transition: transform 0.2s linear, -webkit-transform 0.2s linear; z-index: 1;}.st-btn:hover > div > span:first-child { -webkit-transform: translateX(0%) skew(-10deg); -ms-transform: translateX(0%) skew(-10deg); transform: translateX(0%) skew(-10deg);}.st-btn > div > span:nth-child(2) { position: absolute; height: -webkit-calc(100% - 5px); height: calc(100% - 5px); top: 5px; left: 0; background: #e87116; z-index: 0;}.st-btn > div > span:nth-child(2):before { content: ''; width: -webkit-calc(100% - 5px); width: calc(100% - 5px); height: 6px; background: #e87116; right: 0; top: -5px; position: absolute; z-index: 2;}.st-btn > div > span:nth-child(2):after { display: block; content: ''; width: 5px; height: 5px; background: #000; bottom: 0; right: 0; position: absolute;}.st-btn .st-btn-txt { position: relative; z-index: 3;}a { font-weight: bold; font-size: 1.2em; padding: 5px !important; text-align: right; width: 100%; display: inline-block;}[data-role="stephino-version"] { position: absolute; z-index: 5; right: 6%; bottom: 4%; font-size: 2vh; -webkit-transform: translateX(200%); -ms-transform: translateX(200%); transform: translateX(200%); -webkit-transition: -webkit-transform 2.5s cubic-bezier(0.2, -0.9, 0.395, 1.365); transition: -webkit-transform 2.5s cubic-bezier(0.2, -0.9, 0.395, 1.365); -o-transition: transform 2.5s cubic-bezier(0.2, -0.9, 0.395, 1.365); transition: transform 2.5s cubic-bezier(0.2, -0.9, 0.395, 1.365); transition: transform 2.5s cubic-bezier(0.2, -0.9, 0.395, 1.365), -webkit-transform 2.5s cubic-bezier(0.2, -0.9, 0.395, 1.365); -webkit-transition-delay: 2.5s; -o-transition-delay: 2.5s; transition-delay: 2.5s;}[data-role="stephino-version"] a { text-decoration: none;}body.ready [data-role="stephino-version"] { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0);}[data-role="stephino-message-holder"] { position: absolute; width: 100%; bottom: 0px; z-index: 6; text-align: center;}[data-role="stephino-message-holder"] .message, [data-role="stephino-message-holder"] #login_error { background: rgba(0,0,0,0.6); margin-bottom: 10px; border: none; border-bottom: 4px solid #e87116; position: relative;}[data-role="stephino-message-holder"] .message a, [data-role="stephino-message-holder"] #login_error a { width: auto;}[data-role="stephino-message-holder"] #login_error { border-bottom: 4px solid red;}[data-role="stephino-message-holder"] #login_error:before { content: 'x'; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: absolute; width: 50px; height: 100%; right: 0; top: 0; background: rgba(0,0,0,0.4); vertical-align: middle; font-weight: 400; font-size: 25px; font-family: monospace; color: #ffffff; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}[data-role="stephino-message-holder"] #login_error:hover:before { color: #ff0000; background: rgba(0,0,0,0.8);}body.ready #login .message, body.ready #login #login_error { right: -50px;}.login #nav { padding: 0 5px !important; text-align: right; margin: 20px 0 0;}.login #nav a { margin: 0; display: inline-block; width: auto; outline: none; border: none; -webkit-box-shadow: none; box-shadow: none;}@-webkit-keyframes anim-body { 0% {-webkit-transform: translateY(0px);transform: translateY(0px);} 100% {-webkit-transform: translateY(-20px);transform: translateY(-20px);}}@keyframes anim-body { 0% {-webkit-transform: translateY(0px);transform: translateY(0px);} 100% {-webkit-transform: translateY(-20px);transform: translateY(-20px);}}@-webkit-keyframes anim-circle { 0%, 100% {opacity: 0.5;} 50% {opacity: 0.2}}@keyframes anim-circle { 0%, 100% {opacity: 0.5;} 50% {opacity: 0.2}}@-webkit-keyframes anim-circle-inner { 0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 100% {-webkit-transform: rotate(-360deg);transform: rotate(-360deg);}}@keyframes anim-circle-inner { 0% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 100% {-webkit-transform: rotate(-360deg);transform: rotate(-360deg);}}@-webkit-keyframes anim-circle-outer { 0%, 30%, 50%, 70%, 100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 20%, 40%, 60%, 90%{-webkit-transform: rotate(240deg);transform: rotate(240deg);}}@keyframes anim-circle-outer { 0%, 30%, 50%, 70%, 100% {-webkit-transform: rotate(0deg);transform: rotate(0deg);} 20%, 40%, 60%, 90%{-webkit-transform: rotate(240deg);transform: rotate(240deg);}}@-webkit-keyframes anim-char-after { 0%, 100% {-webkit-transform: translate(0, 0) rotate(0deg) scale(1);transform: translate(0, 0) rotate(0deg) scale(1);} 25%, 75% {-webkit-transform: translate(-20px, 0) rotate(10deg) scale(1.1);transform: translate(-20px, 0) rotate(10deg) scale(1.1);} 50% {-webkit-transform: translate(0, 10px) rotate(-5deg) scale(0.9);transform: translate(0, 10px) rotate(-5deg) scale(0.9);}}@keyframes anim-char-after { 0%, 100% {-webkit-transform: translate(0, 0) rotate(0deg) scale(1);transform: translate(0, 0) rotate(0deg) scale(1);} 25%, 75% {-webkit-transform: translate(-20px, 0) rotate(10deg) scale(1.1);transform: translate(-20px, 0) rotate(10deg) scale(1.1);} 50% {-webkit-transform: translate(0, 10px) rotate(-5deg) scale(0.9);transform: translate(0, 10px) rotate(-5deg) scale(0.9);}}@media (max-width: 1140px) { body.ready #login { -webkit-transform: translateX(0%) scale(0.9); -ms-transform: translateX(0%) scale(0.9); transform: translateX(0%) scale(0.9); }}@media (max-width: 960px) { body.ready #login { -webkit-transform: translateX(0%) scale(0.7); -ms-transform: translateX(0%) scale(0.7); transform: translateX(0%) scale(0.7); }}@media (max-width: 720px) { body.ready #login { -webkit-transform: translateX(0%) scale(0.6); -ms-transform: translateX(0%) scale(0.6); transform: translateX(0%) scale(0.6); }}@media (max-width: 540px) { body.ready #login { -webkit-transform: translateX(0%) scale(0.4); -ms-transform: translateX(0%) scale(0.4); transform: translateX(0%) scale(0.4); }}#nsl-custom-login-form-main .nsl-container { padding: 0 !important;}div.nsl-container-block .nsl-container-buttons a { max-width: none !important; margin: 0 !important; width: 50% !important; display: inline-block !important; overflow: hidden; padding: 0 2px !important;}div.nsl-container-block .nsl-container-buttons a .nsl-button { -webkit-transition: background 0.2s linear; -o-transition: background 0.2s linear; transition: background 0.2s linear; position: relative;}div.nsl-container-block .nsl-container-buttons a .nsl-button:before { content: ''; width: 5px; height: 5px; position: absolute; right: 0; bottom: 0; background: #000;}div.nsl-container-block .nsl-container-buttons a:hover .nsl-button { background: #000 !important;}div.nsl-container-block[data-align="left"] .nsl-container-buttons { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-flow: row; -ms-flex-flow: row; flex-flow: row; -webkit-box-align: center !important; -webkit-align-items: center !important; -ms-flex-align: center !important; align-items: center !important; }div.nsl-container .nsl-button-default div.nsl-button-label-container { margin: 0 5px !important;}div.nsl-container .nsl-button { border-radius: 0 !important;}[data-role="stephino-social-separator"] { text-align: center; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; position: relative; width: 100%; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center;}[data-role="stephino-social-separator"]:before,[data-role="stephino-social-separator"]:after { content: ''; display: block; width: 45%; height: 1px; background: #fff; top: 50%; left: 0; margin-top: -3px; position: absolute;}[data-role="stephino-social-separator"]:after { left: auto; right: 0;}.login .privacy-policy-page-link { margin: 0 !important; padding: 0 !important; text-align: right;}.login .privacy-policy-page-link a { margin-right: 10px; width: auto; font-size: 1.2em; text-decoration: none;}/*EOF*/