body { overflow-x: hidden;  direction: rtl; font-family: "BYekan"; font-size: 13px; color: #333; margin: 0; }
section { width: 100%; height: 100%; position: absolute; top: 0; }
.login-box { width: 340px; margin: 0 auto; padding: 15px; box-sizing: border-box; background: #fff; box-shadow: 0 0 5px #ccc; position: relative; top: 120px; }
    .login-box .loginlogo { width: 80%; text-align: center;margin: 0 auto; }
        .login-box .loginlogo img { width: 50%; }
.input { position: relative; z-index: 1; display: inline-block; width: 100%; vertical-align: top; border: 1px solid #ccc; }
.input__field { position: relative; display: block; float: left; padding: 0.8em; width: 60%; border: none; border-radius: 0; background: #f0f0f0; color: #aaa; font-weight: 400; -webkit-appearance: none; font-family: "B Yekan"; box-sizing: border-box; /* for box shadows to show on iOS */ }
    .input__field:focus,.input__field:filled { outline: none; }
.input__label { display: inline-block; float: left; padding: 0 20px; width: 40%; color: #ccc; font-weight: bold; font-size: 70.25%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
.input__label-content { position: relative; display: block; padding: 1.6em 0; width: 100%; }
.graphic { position: absolute; top: 0; right: 0; fill: none; }
.icon { color: #ddd; font-size: 150%; }

.demo-info{overflow: hidden; color: #FFF; width: 340px; margin: 0px auto; padding: 15px; box-sizing: border-box; position: relative;}
.demo-spacer { height:20px;margin-top:90px}


.input--makiko { overflow: hidden; background: #fcfcfc; }
.input__field--makiko { width: 100%; background: transparent; color: #333; z-index: 10; font-weight: 500; }
.input__label--makiko { position: absolute; width: 100%; text-align: right; pointer-events: none; color: #ccc; font-size: 13px; }
    .input__label--makiko.user::before { content: ''; position: absolute; width: 16px; height: 16px; top: 25%; right: 10px; background:url('/_SiteCommon/Images/user.png') no-repeat center center; background-size: 100%; -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.7,0,0.3,1); transition: transform 0.4s cubic-bezier(0.7,0,0.3,1); }
    .input__label--makiko.pwd::before { content: ''; position: absolute; width: 16px; height: 16px; top: 25%; right: 10px; background: url('/_SiteCommon/Images/password.png') no-repeat center center; background-size: 100%; -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.7,0,0.3,1); transition: transform 0.4s cubic-bezier(0.7,0,0.3,1); }
    .input__label--makiko.captcha::before{content: ''; position: absolute; width: 16px; height: 16px; top: 25%; right: 10px; background: url('/_SiteCommon/Images/Security-Captcha-icon.png') no-repeat center center; background-size: 100%; -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.7,0,0.3,1); transition: transform 0.4s cubic-bezier(0.7,0,0.3,1); }
.input__label-content--makiko { display: block; padding: 2px .75em 0; -webkit-transition: -webkit-transform 0.4s cubic-bezier(0.7,0,0.3,1); transition: transform 0.4s cubic-bezier(0.7,0,0.3,1); }
.input__field--makiko:focus + .input__label--makiko::before,
.input--filled .input__label--makiko::before { -webkit-transform: scale3d(40, 40, 1); transform: scale3d(40, 40, 1); }
.clr { clear: both; }
.btn-back { border: none; padding: 6px 40px; text-align: center; background: #136191 !important; font-size: 13px; text-decoration: none; margin: 5px 0; color: #fff; float: right; transition: all .2s ease-in-out .2s; }
    .btn-back:hover { background: #0a3752; }
.pinfo { color: #333; text-align: center; width: 200px; margin: 0 auto; }
.login-title{margin: 0px auto;color: #F0F0F0;font-size: medium;position: relative;top: 110px;width: 416px;text-align: center;}
.login-box .welcome{padding: 30px 10px;text-align: center;float: left;width: 300px;background: none repeat scroll 0% 0% #F9F9F9;margin-top: 7px;border: 1px solid #eee;}
.login-box.isclub{width:680px}
 .login-box.isclub .loginlogo img{ width: 30%; }
.login-box .isclub-login{width:300px;float:right}
@media all and (max-width:650px) 
{
    .demo-spacer { margin-top:0px}
.login-box,.login-box.isclub{top:20px;width:75%}
.login-box.isclub .loginlogo img{ width: 50%}
.login-title{text-align:center;top:20px;width:100%}
.login-box .isclub-login,.login-box .welcome{float:none;margin:0 auto;box-sizing:border-box}
}
@media all and (max-width:440px) 
{
.login-box,.login-box.isclub{width:100%}
    }