body{ margin:0; /*color:#6a6f8c; background: url(../img/bg4.jpg) no-repeat fixed center;*/ background-size: cover; font:600 16px/18px 'Open Sans',sans-serif; } *,:after,:before{box-sizing:border-box} .clearfix:after,.clearfix:before{content:'';display:table} .clearfix:after{clear:both;display:block} a{color:inherit;text-decoration:none;} input, button { outline: none; border: none; } .login-wrap{ width:100%; margin:auto; max-width:525px; min-height:670px; position:relative; border-radius: 20px; background:url(../img/bg2.jpg) no-repeat center; box-shadow:0 12px 15px 0 rgba(0,0,0,.24),0 17px 50px 0 rgba(0,0,0,.19); } .login-html{ width:100%; height:100%; position:absolute; padding:90px 70px 50px 70px; border-radius: 20px; background:rgba(192,192,192,0.65); } .in-center{ position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .login-html .sign-in-htm, .login-html .sign-up-htm{ top:0; left:0; right:0; bottom:0; position:absolute; -webkit-transform:rotateY(180deg); transform:rotateY(180deg); -webkit-backface-visibility:hidden; backface-visibility:hidden; -webkit-transition:all .4s linear; transition:all .4s linear; } .login-html .sign-in, .login-html .sign-up, .login-form .group .check{ display:none; } .login-html .tab, .login-form .group .label, .login-form .group .button{ text-transform:uppercase; } .login-html .tab{ font-size:22px; margin-right:15px; padding-bottom:5px; margin:0 15px 10px 0; display:inline-block; border-bottom:2px solid transparent; } .login-html .sign-in:checked + .tab{ color: #469c7e; border-color: #469c7e; } .login-html .sign-up:checked + .tab{ color: #d76466; border-color: #d76466; } .login-form{ min-height:345px; position:relative; -webkit-perspective:1000px; perspective:1000px; -webkit-transform-style:preserve-3d; transform-style:preserve-3d; } .login-form .group{ margin-bottom:15px; } .login-form .group .label{ width:100%; color: #012957; display:block; font-size:13px; } .login-form .group .input{ width:100%; color:black; display:block; } .login-form .group .button, .login-form .group .reg_button{ width:100%; color:#fff; display:block; } .login-form .group .input, .login-form .group .button, .login-form .group .reg_button{ border:none; padding:15px 20px; border-radius:25px; background:rgba(255,255,255,.1); } .login-form .group input[data-type="password"]{ text-security:circle; -webkit-text-security:circle; } .login-form .group .reg_button{ background: #d76466; } .login-form .group .button{ background: #469c7e; } .login-form .group label .icon{ width:15px; height:15px; border-radius:2px; position:relative; display:inline-block; background:rgba(255,255,255,.1); } .login-form .group label .icon:before, .login-form .group label .icon:after{ content:''; width:10px; height:2px; background:#fff; position:absolute; -webkit-transition:all .2s ease-in-out 0s; transition:all .2s ease-in-out 0s; } .login-form .group label .icon:before{ left:3px; width:5px; bottom:6px; -webkit-transform:scale(0) rotate(0); -ms-transform:scale(0) rotate(0); transform:scale(0) rotate(0); } .login-form .group label .icon:after{ top:6px; right:0; -webkit-transform:scale(0) rotate(0); -ms-transform:scale(0) rotate(0); transform:scale(0) rotate(0); } .login-form .group .check:checked + label{ color:#fff; } .login-form .group .check:checked + label .icon{ background:#1161ee; } .login-form .group .check:checked + label .icon:before{ -webkit-transform:scale(1) rotate(45deg); -ms-transform:scale(1) rotate(45deg); transform:scale(1) rotate(45deg); } .login-form .group .check:checked + label .icon:after{ -webkit-transform:scale(1) rotate(-45deg); -ms-transform:scale(1) rotate(-45deg); transform:scale(1) rotate(-45deg); } .login-html .sign-in:checked + .tab + .sign-up + .tab + .login-form .sign-in-htm{ -webkit-transform:rotate(0); -ms-transform:rotate(0); transform:rotate(0); } .login-html .sign-up:checked + .tab + .login-form .sign-up-htm{ -webkit-transform:rotate(0); -ms-transform:rotate(0); transform:rotate(0); } .reg-hr{ height:2px; margin:60px 0 50px 0; /*background:rgba(0,0,0,0.5);*/ background: #cfb8b5; } .hr{ height:2px; margin:60px 0 50px 0; /*background:rgba(0,0,0,0.5);*/ background: #8dc4b2; } .foot-lnk{ text-align:center; } .select{ border-radius:30px; } .login-form .sign-up-htm .radio .radio1:checked + .stu-radio, .login-form .sign-up-htm .radio .radio2:checked + .tch-radio{ color: #d76466; font-size:20px; }