@import 'https://fonts.googleapis.com/css?family=Roboto';body{all:initial;font-family:roboto,sans-serif;letter-spacing:.02em}*{box-sizing:border-box}main{position:fixed;top:0;left:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background:#3f2766}.form{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;position:relative;width:400px;height:400px;-ms-flex-negative:0;flex-shrink:0;padding:20px;border-radius:5px}.form__loader{display:-webkit-box;display:-ms-flexbox;display:flex;position:absolute;left:0;top:0;height:100%;width:100%;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:-4;-webkit-transition:all .5s ease;transition:all .5s ease}.form__content{text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:relative;opacity:0;-webkit-transform:translateY(10px);transform:translateY(10px);-webkit-transition:all .5s ease .7s;transition:all .5s ease .7s}.form__cover{position:absolute;left:0;top:0;height:100%;width:100%;z-index:-4;border-radius:7px;overflow:hidden;-webkit-transition:all .3s ease .8s;transition:all .3s ease .8s;box-shadow:0 0 0 0 transparent}.form__cover:after{content:'';position:absolute;left:0;top:0;height:100%;width:100%;background:#4d317a;z-index:-4;border-radius:50%;-webkit-transition:all 1.5s ease .3s;transition:all 1.5s ease .3s;-webkit-transform:scale(0);transform:scale(0)}.form__cover:before{content:'';position:absolute;left:0;top:0;height:100%;width:100%;background:#fff;z-index:-5;border-radius:50%;-webkit-transition:all .5s ease;transition:all .5s ease;-webkit-transform:scale(0);transform:scale(0)}body.on-start .form__cover:before{-webkit-transform:scale(.15);transform:scale(.15)}body.document-loaded .form__loader{-webkit-transform:scale(0);transform:scale(0);opacity:0;visibility:hidden}body.document-loaded .form__content{opacity:1;-webkit-transform:none;transform:none}body.document-loaded .form__cover{box-shadow:0 20px 50px rgba(0,0,0,.3)}body.document-loaded .form__cover:after{-webkit-transform:scale(2);transform:scale(2)}body.document-loaded .form__cover:before{-webkit-transition:opacity .3s ease .8s,-webkit-transform 2s ease;transition:opacity .3s ease .8s,-webkit-transform 2s ease;transition:transform 2s ease,opacity .3s ease .8s;transition:transform 2s ease,opacity .3s ease .8s,-webkit-transform 2s ease;-webkit-transform:scale(2);transform:scale(2);opacity:0}h1{font-size:40px;margin:15px 0 20px;letter-spacing:.05em;color:#714cab;font-weight:700}.styled-button{-webkit-appearance:none;-webkit-user-select:none;cursor:pointer;font-size:14px;width:100%;padding:20px;outline:none;background:0 0;position:relative;color:#492e72;border-radius:3px;margin-bottom:25px;border:none;text-transform:uppercase;font-weight:700;letter-spacing:.1em;background:#714cac;-webkit-transition:all .3s ease;transition:all .3s ease;overflow:hidden}.styled-button__real-text-holder{position:relative}.styled-button__real-text{color:transparent;display:inline-block}.styled-button__text-holder{position:absolute;left:0;top:0;height:100%;width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-transition:all .3s ease;transition:all .3s ease}.styled-button__moving-block{-webkit-transition:all .3s ease;transition:all .3s ease;position:absolute;left:0;top:0;height:100%;width:100%;overflow:hidden}.styled-button__moving-block.back{color:#fff;-webkit-transform:translateX(-100%);transform:translateX(-100%)}.styled-button__moving-block.back .styled-button__text-holder{-webkit-transform:translateX(100%);transform:translateX(100%)}.styled-button:hover,.styled-button:active{box-shadow:0 8px 20px rgba(0,0,0,.3);background:#7a51bb}.styled-button:hover .face,.styled-button:active .face{-webkit-transform:translateX(100%);transform:translateX(100%)}.styled-button:hover .face .styled-button__text-holder,.styled-button:active .face .styled-button__text-holder{-webkit-transform:translateX(-100%);transform:translateX(-100%)}.styled-button:hover .back,.styled-button:active .back{-webkit-transform:translateX(0);transform:translateX(0)}.styled-button:hover .back .styled-button__text-holder,.styled-button:active .back .styled-button__text-holder{-webkit-transform:translateX(0);transform:translateX(0)}.styled-button:active{box-shadow:0 0 5px rgba(0,0,0,.3)}.styled-input{width:100%;position:relative;margin-bottom:25px;border:1px solid rgba(255,255,255,.2);border-radius:3px;-webkit-transition:all .3s ease;transition:all .3s ease}.styled-input__circle{position:absolute;left:0;top:0;width:100%;height:100%;z-index:-2;overflow:hidden;border-radius:3px}.styled-input__circle:after{content:'';position:absolute;left:16.5px;top:19px;height:14px;width:14px;z-index:-2;border-radius:50%;background:rgba(255,255,255,.15);box-shadow:0 0 10px transparent;-webkit-transition:opacity 1s ease,-webkit-transform .6s ease;transition:opacity 1s ease,-webkit-transform .6s ease;transition:transform .6s ease,opacity 1s ease;transition:transform .6s ease,opacity 1s ease,-webkit-transform .6s ease}.styled-input__input{width:100%;-webkit-appearance:none;font-size:14px;outline:none;background:0 0;padding:18px 15px;color:#ceafff;border:none;font-weight:600;letter-spacing:.035em}.styled-input__placeholder{position:absolute;left:0;top:0;width:100%;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;z-index:-1;padding-left:45px;color:#fff}.styled-input__placeholder-text{-webkit-perspective:500px;perspective:500px;display:inline-block}.styled-input__placeholder-text .letter{display:inline-block;vertical-align:middle;position:relative;-webkit-animation:letterAnimOut .25s ease forwards;animation:letterAnimOut .25s ease forwards;text-shadow:0 0 5px}.styled-input__placeholder-text .letter.active{-webkit-animation:letterAnimIn .25s ease forwards;animation:letterAnimIn .25s ease forwards}.styled-input:hover{border-color:rgba(255,255,255,.4)}.styled-input.filled{border-color:rgba(255,255,255,.2)}.styled-input.filled .styled-input__circle:after{-webkit-transform:scale(37);transform:scale(37);opacity:0}@-webkit-keyframes letterAnimIn{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}25%{-webkit-transform:translate(0,10px);transform:translate(0,10px);color:red}45%{-webkit-transform:translate(0,10px);transform:translate(0,10px);opacity:0;color:red}55%{-webkit-transform:translate(0,10px);transform:translate(0,10px);opacity:0}56%{-webkit-transform:translate(-30px,-27px);transform:translate(-30px,-27px);opacity:0;color:#00ff6b}76%{color:#00ff6b;opacity:1;-webkit-transform:translate(-30px,-27px);transform:translate(-30px,-27px)}100%{-webkit-transform:translate(-30px,-27px);transform:translate(-30px,-27px);opacity:1}}@keyframes letterAnimIn{0%{-webkit-transform:translate(0,0);transform:translate(0,0)}25%{-webkit-transform:translate(0,10px);transform:translate(0,10px);color:red}45%{-webkit-transform:translate(0,10px);transform:translate(0,10px);opacity:0;color:red}55%{-webkit-transform:translate(0,10px);transform:translate(0,10px);opacity:0}56%{-webkit-transform:translate(-30px,-27px);transform:translate(-30px,-27px);opacity:0;color:#00ff6b}76%{color:#00ff6b;opacity:1;-webkit-transform:translate(-30px,-27px);transform:translate(-30px,-27px)}100%{-webkit-transform:translate(-30px,-27px);transform:translate(-30px,-27px);opacity:1}}@-webkit-keyframes letterAnimOut{0%{-webkit-transform:translate(-30px,-27px);transform:translate(-30px,-27px);opacity:1}25%{-webkit-transform:translate(-30px,-40px);transform:translate(-30px,-40px);opacity:0}45%{-webkit-transform:translate(0,10px);transform:translate(0,10px);opacity:0}55%{-webkit-transform:translate(0,10px);transform:translate(0,10px);opacity:0;color:red}56%{-webkit-transform:translate(0,10px);transform:translate(0,10px);color:red}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}@keyframes letterAnimOut{0%{-webkit-transform:translate(-30px,-27px);transform:translate(-30px,-27px);opacity:1}25%{-webkit-transform:translate(-30px,-40px);transform:translate(-30px,-40px);opacity:0}45%{-webkit-transform:translate(0,10px);transform:translate(0,10px);opacity:0}55%{-webkit-transform:translate(0,10px);transform:translate(0,10px);opacity:0;color:red}56%{-webkit-transform:translate(0,10px);transform:translate(0,10px);color:red}100%{-webkit-transform:translate(0,0);transform:translate(0,0)}}.spinner{position:relative;margin:auto;width:50px;height:50px;-webkit-transition:all .2s ease 0s;transition:all .2s ease 0s}.spinner__circular{-webkit-animation:rotate 1.5s linear infinite;animation:rotate 1.5s linear infinite;-webkit-animation-play-state:paused;animation-play-state:paused;-webkit-transform-origin:center center;transform-origin:center center;position:absolute;width:100%;height:100%;top:0;left:0;margin:auto}.spinner__path{stroke-dasharray:1,200;stroke-dashoffset:0;-webkit-animation:dash 1.3s ease forwards .5s;animation:dash 1.3s ease forwards .5s;opacity:0;stroke-linecap:round;stroke:#7b23ff;-webkit-animation-play-state:running;animation-play-state:running}@-webkit-keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0;opacity:0}50%{stroke-dasharray:40,200;opacity:1}100%{stroke-dasharray:125,200;opacity:1}}@keyframes dash{0%{stroke-dasharray:1,200;stroke-dashoffset:0;opacity:0}50%{stroke-dasharray:40,200;opacity:1}100%{stroke-dasharray:125,200;opacity:1}}