html { font-family: "Open Sans", sans-serif; overflow: hidden; } body { margin: 0; background: #172a3a; } .playgroundIn { -webkit-animation: playgroundIn 0.5s ease-out forwards; animation: playgroundIn 0.5s ease-out forwards; } @-webkit-keyframes playgroundIn { from { opacity: 0; -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } to { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes playgroundIn { from { opacity: 0; -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } to { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .fadeOut { -webkit-animation: fadeOut 0.5s ease-out forwards; animation: fadeOut 0.5s ease-out forwards; } @-webkit-keyframes fadeIn { from { opacity: 0; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } to { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes fadeIn { from { opacity: 0; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } to { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes fadeOut { from { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } to { opacity: 0; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } } @keyframes fadeOut { from { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } to { opacity: 0; -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } } @-webkit-keyframes appearIn { from { opacity: 0; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } to { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @keyframes appearIn { from { opacity: 0; -webkit-transform: translateY(0px); -ms-transform: translateY(0px); transform: translateY(0px); } to { opacity: 1; -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes scaleIn { from { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @keyframes scaleIn { from { -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); } to { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } @-webkit-keyframes innerDrawIn { 0% { stroke-dashoffset: 70; } 50% { stroke-dashoffset: 140; } 100% { stroke-dashoffset: 210; } } @keyframes innerDrawIn { 0% { stroke-dashoffset: 70; } 50% { stroke-dashoffset: 140; } 100% { stroke-dashoffset: 210; } } @-webkit-keyframes outerDrawIn { 0% { stroke-dashoffset: 76; } 100% { stroke-dashoffset: 152; } } @keyframes outerDrawIn { 0% { stroke-dashoffset: 76; } 100% { stroke-dashoffset: 152; } } .hHWjkv { -webkit-transform-origin: 0px 0px; -ms-transform-origin: 0px 0px; transform-origin: 0px 0px; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation: scaleIn 0.25s linear forwards 0.2222222222222222s; animation: scaleIn 0.25s linear forwards 0.2222222222222222s; } .gCDOzd { -webkit-transform-origin: 0px 0px; -ms-transform-origin: 0px 0px; transform-origin: 0px 0px; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation: scaleIn 0.25s linear forwards 0.4222222222222222s; animation: scaleIn 0.25s linear forwards 0.4222222222222222s; } .hmCcxi { -webkit-transform-origin: 0px 0px; -ms-transform-origin: 0px 0px; transform-origin: 0px 0px; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation: scaleIn 0.25s linear forwards 0.6222222222222222s; animation: scaleIn 0.25s linear forwards 0.6222222222222222s; } .eHamQi { -webkit-transform-origin: 0px 0px; -ms-transform-origin: 0px 0px; transform-origin: 0px 0px; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation: scaleIn 0.25s linear forwards 0.8222222222222223s; animation: scaleIn 0.25s linear forwards 0.8222222222222223s; } .byhgGu { -webkit-transform-origin: 0px 0px; -ms-transform-origin: 0px 0px; transform-origin: 0px 0px; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation: scaleIn 0.25s linear forwards 1.0222222222222221s; animation: scaleIn 0.25s linear forwards 1.0222222222222221s; } .llAKP { -webkit-transform-origin: 0px 0px; -ms-transform-origin: 0px 0px; transform-origin: 0px 0px; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation: scaleIn 0.25s linear forwards 1.2222222222222223s; animation: scaleIn 0.25s linear forwards 1.2222222222222223s; } .bglIGM { -webkit-transform-origin: 64px 28px; -ms-transform-origin: 64px 28px; transform-origin: 64px 28px; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation: scaleIn 0.25s linear forwards 0.2222222222222222s; animation: scaleIn 0.25s linear forwards 0.2222222222222222s; } .ksxRII { -webkit-transform-origin: 95.98500061035156px 46.510000228881836px; -ms-transform-origin: 95.98500061035156px 46.510000228881836px; transform-origin: 95.98500061035156px 46.510000228881836px; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation: scaleIn 0.25s linear forwards 0.4222222222222222s; animation: scaleIn 0.25s linear forwards 0.4222222222222222s; } .cWrBmb { -webkit-transform-origin: 95.97162628173828px 83.4900016784668px; -ms-transform-origin: 95.97162628173828px 83.4900016784668px; transform-origin: 95.97162628173828px 83.4900016784668px; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation: scaleIn 0.25s linear forwards 0.6222222222222222s; animation: scaleIn 0.25s linear forwards 0.6222222222222222s; } .Wnusb { -webkit-transform-origin: 64px 101.97999572753906px; -ms-transform-origin: 64px 101.97999572753906px; transform-origin: 64px 101.97999572753906px; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation: scaleIn 0.25s linear forwards 0.8222222222222223s; animation: scaleIn 0.25s linear forwards 0.8222222222222223s; } .bfPqf { -webkit-transform-origin: 32.03982162475586px 83.4900016784668px; -ms-transform-origin: 32.03982162475586px 83.4900016784668px; transform-origin: 32.03982162475586px 83.4900016784668px; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation: scaleIn 0.25s linear forwards 1.0222222222222221s; animation: scaleIn 0.25s linear forwards 1.0222222222222221s; } .edRCTN { -webkit-transform-origin: 32.033552169799805px 46.510000228881836px; -ms-transform-origin: 32.033552169799805px 46.510000228881836px; transform-origin: 32.033552169799805px 46.510000228881836px; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-animation: scaleIn 0.25s linear forwards 1.2222222222222223s; animation: scaleIn 0.25s linear forwards 1.2222222222222223s; } .iEGVWn { opacity: 0; stroke-dasharray: 76; -webkit-animation: outerDrawIn 0.5s ease-out forwards 0.3333333333333333s, appearIn 0.1s ease-out forwards 0.3333333333333333s; animation: outerDrawIn 0.5s ease-out forwards 0.3333333333333333s, appearIn 0.1s ease-out forwards 0.3333333333333333s; -webkit-animation-iteration-count: 1, 1; animation-iteration-count: 1, 1; } .bsocdx { opacity: 0; stroke-dasharray: 76; -webkit-animation: outerDrawIn 0.5s ease-out forwards 0.5333333333333333s, appearIn 0.1s ease-out forwards 0.5333333333333333s; animation: outerDrawIn 0.5s ease-out forwards 0.5333333333333333s, appearIn 0.1s ease-out forwards 0.5333333333333333s; -webkit-animation-iteration-count: 1, 1; animation-iteration-count: 1, 1; } .jAZXmP { opacity: 0; stroke-dasharray: 76; -webkit-animation: outerDrawIn 0.5s ease-out forwards 0.7333333333333334s, appearIn 0.1s ease-out forwards 0.7333333333333334s; animation: outerDrawIn 0.5s ease-out forwards 0.7333333333333334s, appearIn 0.1s ease-out forwards 0.7333333333333334s; -webkit-animation-iteration-count: 1, 1; animation-iteration-count: 1, 1; } .hSeArx { opacity: 0; stroke-dasharray: 76; -webkit-animation: outerDrawIn 0.5s ease-out forwards 0.9333333333333333s, appearIn 0.1s ease-out forwards 0.9333333333333333s; animation: outerDrawIn 0.5s ease-out forwards 0.9333333333333333s, appearIn 0.1s ease-out forwards 0.9333333333333333s; -webkit-animation-iteration-count: 1, 1; animation-iteration-count: 1, 1; } .bVgqGk { opacity: 0; stroke-dasharray: 76; -webkit-animation: outerDrawIn 0.5s ease-out forwards 1.1333333333333333s, appearIn 0.1s ease-out forwards 1.1333333333333333s; animation: outerDrawIn 0.5s ease-out forwards 1.1333333333333333s, appearIn 0.1s ease-out forwards 1.1333333333333333s; -webkit-animation-iteration-count: 1, 1; animation-iteration-count: 1, 1; } .hEFqBt { opacity: 0; stroke-dasharray: 76; -webkit-animation: outerDrawIn 0.5s ease-out forwards 1.3333333333333333s, appearIn 0.1s ease-out forwards 1.3333333333333333s; animation: outerDrawIn 0.5s ease-out forwards 1.3333333333333333s, appearIn 0.1s ease-out forwards 1.3333333333333333s; -webkit-animation-iteration-count: 1, 1; animation-iteration-count: 1, 1; } .dzEKCM { opacity: 0; stroke-dasharray: 70; -webkit-animation: innerDrawIn 1s ease-in-out forwards 1.3666666666666667s, appearIn 0.1s linear forwards 1.3666666666666667s; animation: innerDrawIn 1s ease-in-out forwards 1.3666666666666667s, appearIn 0.1s linear forwards 1.3666666666666667s; -webkit-animation-iteration-count: infinite, 1; animation-iteration-count: infinite, 1; } .DYnPx { opacity: 0; stroke-dasharray: 70; -webkit-animation: innerDrawIn 1s ease-in-out forwards 1.5333333333333332s, appearIn 0.1s linear forwards 1.5333333333333332s; animation: innerDrawIn 1s ease-in-out forwards 1.5333333333333332s, appearIn 0.1s linear forwards 1.5333333333333332s; -webkit-animation-iteration-count: infinite, 1; animation-iteration-count: infinite, 1; } .hjPEAQ { opacity: 0; stroke-dasharray: 70; -webkit-animation: innerDrawIn 1s ease-in-out forwards 1.7000000000000002s, appearIn 0.1s linear forwards 1.7000000000000002s; animation: innerDrawIn 1s ease-in-out forwards 1.7000000000000002s, appearIn 0.1s linear forwards 1.7000000000000002s; -webkit-animation-iteration-count: infinite, 1; animation-iteration-count: infinite, 1; } .transform-translate-100x100 { transform: translate(100px, 100px); } #loading-wrapper { position: absolute; width: 100vw; height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-align-items: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .logo { width: 75px; height: 75px; margin-bottom: 20px; opacity: 0; -webkit-animation: fadeIn 0.5s ease-out forwards; animation: fadeIn 0.5s ease-out forwards; } .text { font-size: 32px; font-weight: 200; text-align: center; color: rgba(255, 255, 255, 0.6); opacity: 0; -webkit-animation: fadeIn 0.5s ease-out forwards; animation: fadeIn 0.5s ease-out forwards; } .dGfHfc { font-weight: 400; }