@import url("https://fonts.googleapis.com/css?family=Lato:300,400|Poppins:300,400,800&display=swap");.preloader-container{width:100%;height:100vh;background:#232323;display:flex;justify-content:center;align-items:center;position:fixed;top:0;left:0;z-index:9999;transition:opacity .8s ease-out,visibility .8s ease-out}.preloader-container.hidden{opacity:0;visibility:hidden}.preloader-container *{margin:0;padding:0}.preloader-container .box{width:285px;height:350px;position:relative;display:flex;justify-content:center;flex-direction:column}.preloader-container .title{width:100%;position:relative;display:flex;align-items:center;height:80px}.preloader-container .title .block{width:0;height:inherit;background:#1020ff;position:absolute;animation:mainBlock 2s cubic-bezier(.74,.06,.4,.92) forwards;display:flex}.preloader-container .title h1{font-family:Poppins;color:#fff;font-size:48px;animation:mainFadeIn 2s forwards;animation-delay:1.6s;opacity:0;display:flex;align-items:baseline;position:relative}.preloader-container .title h1 span{width:0;height:0;border-radius:50%;background:#360dec;animation:popIn .8s cubic-bezier(.74,.06,.4,.92) forwards;animation-delay:2s;margin-left:5px;margin-top:-10px;position:absolute;bottom:13px;right:-12px}.preloader-container .role{width:100%;position:relative;display:flex;align-items:center;height:30px;margin-top:10px}.preloader-container .role .block{width:0;height:inherit;background:#fbad12;position:absolute;animation:secBlock 2s cubic-bezier(.74,.06,.4,.92) forwards;animation-delay:2s;display:flex}.preloader-container .role p{animation:secFadeIn 2s forwards;animation-delay:3.2s;opacity:0;font-weight:400;font-family:Lato;color:#f99418;font-size:25px;text-transform:uppercase;letter-spacing:5px}@keyframes mainBlock{0%{width:0;left:0}50%{width:100%;left:0}to{width:0;left:100%}}@keyframes secBlock{0%{width:0;left:0}50%{width:100%;left:0}to{width:0;left:100%}}@keyframes mainFadeIn{0%{opacity:0}to{opacity:1}}@keyframes popIn{0%{width:0;height:0;background:#1212e7;border:0 solid #ddd;opacity:0}50%{width:10px;height:10px;background:#1212e7;opacity:1;bottom:45px}65%{width:7px;height:7px;bottom:0;width:15px}80%{width:10px;height:10px;bottom:20px}to{width:7px;height:7px;background:#1212e7;border:0 solid #222;bottom:13px}}@keyframes secFadeIn{0%{opacity:0}to{opacity:.5}}@keyframes top{0%{opacity:0;bottom:-80px}to{opacity:1;bottom:0}}@keyframes icon{0%{opacity:0;transform:scale(0)}50%{opacity:1;transform:scale(1.3) rotate(-2deg)}to{opacity:1;bottom:0}}