/* PRELOADER */
.pace{-webkit-pointer-events:none;pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;z-index:99999;position:fixed;margin:auto;top:20vh;left:0;right:0;bottom:0;height:1.5vh;width:8vh;background:transparent;border:1px solid var(--themecolor);border-radius:1vh;overflow:hidden;}
.pace .pace-progress{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;-o-box-sizing:border-box;box-sizing:border-box;-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);max-width:200px;position:fixed;z-index:99999;display:block;position:absolute;top:0;border-radius:0px;right:100%;height:100%;width:100%;background:var(--themecolor);}
.pace.pace-inactive{display:none;}
#preloader{width:100vw;height: 100vh;background: linear-gradient(0deg, rgb(8 6 18) 0%, rgba(11,6,46,1) 100%);overflow:hidden;position:fixed;z-index:99998;transition: all 0.5s;}
.flying{height:100vh;width:20vw;margin-left:auto!important;margin-right:auto!important;transition:all 0.7s;}
.rocket-wrap{transition: all 0.5s ease-in;}
.blackhole-wrap{transition: all 0.5s ease-in;}
.rocket{position:absolute;top:43vh;animation:speeder .2s linear infinite;}
.blackhole-wrap {position:relative;top:40vh;width:12vh;height:12vh;margin-left:auto;margin-right:0;}
.blackhole {height:100%;width:100%;position:absolute;animation:blackhole 4s linear infinite;}
.blackhole-stars1 {animation-name: timelineblackholestars1;animation-delay: -1s;animation-duration: 4s;animation-iteration-count: infinite;animation-timing-function: linear;transform-origin:50% 50%;position:absolute;opacity: 1;width: 150%;height: 150%;margin-top: -25%;margin-left: -25%;z-index:98;}
.blackhole-stars2 {animation-name: timelineblackholestars2;animation-delay: -3s;animation-duration: 4s;animation-iteration-count: infinite;animation-timing-function: linear;transform-origin:50% 50%;position:absolute;opacity: 1;width: 170%;height: 170%;margin-top: -35%;margin-left: -35%;z-index:98;}
@keyframes timelineblackholestars1 {
0%{transform: rotate(0deg) scale(1.3);opacity:0;}
50%{opacity:1;}
100%{transform: rotate(240deg) scale(0.6);opacity:0;}
}
@keyframes timelineblackholestars2 {
0%{transform: rotate(0deg) scale(1.3);opacity:0;}
70%{opacity:1;}
100%{transform: rotate(90deg) scale(0.6);opacity:0;}
}
.rocket > span{height:5vh;width:9vh;position:absolute;top:0;left:0;}
.rocketsvg{margin-top:-0.9vh;}
.rocket > span > span:nth-child(1),.rocket > span > span:nth-child(2),.rocket > span > span:nth-child(3),.rocket > span > span:nth-child(4){top:1vh;width:40px;height:2px;left:-5px;background:#fff1b3;position:absolute;opacity: 0.7;animation:fazer1 .2s linear infinite;}
.rocket > span > span:nth-child(2){top:3vh;animation:fazer2 .2s linear infinite;}
.rocket > span > span:nth-child(3){top:2vh;animation:fazer3 .3s linear infinite;animation-delay:-1s;}
.rocket > span > span:nth-child(4){top:2.5vh;animation:fazer4 1s linear infinite;animation-delay:-1s;}
@keyframes fazer1 {
0%{transform: translateX(0);}
100%{transform: translateX(-80px);opacity:0;}
}
@keyframes fazer2 {
0%{transform: translateX(0);}
100%{transform: translateX(-100px);opacity:0;}
}
@keyframes fazer3 {
0%{transform: translateX(0);}
100%{transform: translateX(-50px);opacity:0;}
}
@keyframes fazer4 {
0%{transform: translateX(0);}
100%{transform: translateX(-150px);opacity:0;}
}
@keyframes speeder {
0%{transform:translate(-1px,3px);}
20%{transform:translate(-1px,-3px);}
40%{transform:translate(-2px,0px);}
60%{transform:translate(1px,2px);}
80%{transform:translate(1px,-1px);}
100%{transform:translate(-1px,3px);}
}
@keyframes blackhole {
0%{transform: rotate(0deg);}
100%{transform: rotate(360deg);}
}
.longfazers{position:absolute;width:100%;height:100%;}
.longfazers span{position:absolute;height: 0.3vh;width: 11%;background:#fff1b3;border-radius: 50px; left:100%;}
.longfazers span:nth-child(1){top: 15%;animation:lf 0.6s linear infinite;animation-delay:-5s;}
.longfazers span:nth-child(2){top: 30%;animation:lf2 0.8s linear infinite;animation-delay: -0.7s;}
.longfazers span:nth-child(3){top: 65%;animation:lf3 0.6s linear infinite;}
.longfazers span:nth-child(4){top: 85%;animation:lf4 0.5s linear infinite;animation-delay:-3s;}
@keyframes lf {
0%{transform: translateX(0);}
100%{transform: translateX(-400vw);opacity:0;}
}
@keyframes lf2 {
0%{transform: translateX(0);}
100%{transform: translateX(-400vw);opacity:0;}
}
@keyframes lf3 {
0%{transform: translateX(0);}
100%{transform: translateX(-200vw);opacity:0;}
}
@keyframes lf4 {
0%{transform: translateX(0);}
100%{transform: translateX(-200vw);opacity:0;}
}

/* -----------------------PORTRAIT-------------------------*/
@media screen and (min-aspect-ratio: 9/30) {
.flying{width:60vw;}
}
@media screen and (min-aspect-ratio: 9/16) {
.flying{width:60vw;}
}
@media screen and (min-aspect-ratio: 10/16) {
.flying{width:40vw;}
}
@media screen and (min-aspect-ratio: 2/3) {
.flying{width:40vw;}
}
@media screen and (min-aspect-ratio: 3/4) {
}
@media screen and (min-aspect-ratio: 4/5) {
.flying{width:30vw;}
}

/* -------------------------SQUARE-------------------------*/
@media screen and (min-aspect-ratio: 4/4) {
.flying{width:25vw;}
}

/* -----------------------LANDSCAPE------------------------*/
@media screen and (min-aspect-ratio: 5/4) {
.flying{width:25vw;}
}
@media screen and (min-aspect-ratio: 4/3) {

}
@media screen and (min-aspect-ratio: 3/2) {

}
@media screen and (min-aspect-ratio: 16/10) {
.flying{width:15vw;}
}
@media screen and (min-aspect-ratio: 16/9) {
.flying{width:15vw;}
}
@media screen and (min-aspect-ratio: 21/9) {
}

.preloadsvg{opacity:0;position:absolute;top:-9999px;left:-9999px;}

/* PRELOADER */
#preloading{position:fixed;left:0;top:0;right:0;bottom:0;z-index:9999;width:100%;height:100%;overflow:visible;background:#1C1835;}
@media screen and (max-aspect-ratio: 3/2) {
div #preloadingicon{width:7%;}
}
@media screen and (max-aspect-ratio: 4/3) {
div #preloadingicon{width:7%;}
}
@media screen and (max-aspect-ratio: 5/4) {
div #preloadingicon{width:8%;}
}
@media screen and (max-aspect-ratio: 4/4) {
div #preloadingicon{width:10%;}
}
@media screen and (max-aspect-ratio: 2/3) {
div #preloadingicon{width:15%;}
}
.rocket-load-done {transform: translateX(70vw);}
.rocket-load-done > span > span:nth-child(1),
.rocket-load-done > span > span:nth-child(2),
.rocket-load-done > span > span:nth-child(3),
.rocket-load-done > span > span:nth-child(4),
.rocket-load-done .rocket {animation-play-state: paused;}