/* ========= INFORMATION ============================
	- document:  WP Coder!
	- author:    Dmytro Lobov 
	- url:       https://wow-estore.com/
==================================================== */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300);
.conts {
    min-height: 400px;
    font-size: 10px;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
}

#universe {
    z-index: 1;
    position: absolute;
    overflow: hidden;
    width: 100%;
    height: 100%;
    background-position: center 40%;
    background-repeat: no-repeat;
    background-size: cover;
}

#galaxy {
    position: relative;
    width: 100%;
    height: 100%;
    /*perspective: 4000;*/
}

#solar-system {
    position: absolute;
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
}

.orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    transform-style: preserve-3d;
    animation-name: orbit;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.orbit .orbit {
    animation-name: suborbit;
}

.pos {
    position: absolute;
    top: 50%;
    width: 2em;
    height: 2em;
    margin-top: -1em;
    margin-left: -1em;
    transform-style: preserve-3d;
    animation-name: invert;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

#sun,
.planet,
#earth .moon {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 2.5em;
    height: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
    transform-style: preserve-3d;
}

#sun {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
    transform-style: preserve-3d;
}

#sun {
    background-repeat: no-repeat;
    background-size: cover;
}

.planet {
    background-repeat: no-repeat;
    background-size: cover;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

.ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
}


/* --------------------------------------------------------------------------- planets index */

#mercury {
    z-index: 11;
}

#venus {
    z-index: 10;
}

#earth {
    z-index: 9;
}

#moon {
    z-index: 8;
}

#mars {
    z-index: 7;
}

#jupiter {
    z-index: 6;
}

#saturn {
    z-index: 5;
}

#uranus {
    z-index: 4;
}

#bant {
    z-index: 3;
}

#firstbank {
    z-index: 3;
}

#clarnet {
    z-index: 3;
}

#neptune {
    z-index: 2;
}

#sun {
    z-index: 1;
}


/* --------------------------------------------------------------------------- animations */

@keyframes orbit {
    0% {
        transform: rotateZ(0deg);
    }
    100% {
        transform: rotateZ(-360deg);
    }
}

@keyframes suborbit {
    0% {
        transform: rotateX(90deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(90deg) rotateZ(-360deg);
    }
}

@keyframes invert {
    0% {
        transform: rotateX(-90deg) rotateY(360deg) rotateZ(0deg);
    }
    100% {
        transform: rotateX(-90deg) rotateY(0deg) rotateZ(0deg);
    }
}


/* --------------------------------------------------------------------------- opening */

.view-3D .opening #sun,
.view-3D .opening .orbit,
.view-3D .opening .pos,
.view-3D .opening .planet,
.view-3D .opening .satelite,
.view-3D .opening .ring {
    transition-duration: 4s;
}

#universe.opening #sun {
    box-shadow: 0 0 0 rgba(255, 160, 60, 0);
}


/* --------------------------------------------------------------------------- 3D view */

.view-3D.zoom-large #sun {
    transform-style: preserve-3d;
}

.view-3D.zoom-large .orbit {
    transform-style: preserve-3d;
}

.view-3D #solar-system {
    transform: rotateX(75deg);
}

.view-3D #sun {
    transform: rotateX(-90deg);
}

.view-3D .ring {
    transform: rotateX(90deg);
}

.view-3D .planet,
.view-3D .moon {
    transform: rotateX(0deg);
}


/* --------------------------------------------------------------------------- large zoom */

.zoom-large #solar-system {
    width: 100%;
}

.zoom-large.view-3D .scale-stretched #solar-system {
    font-size: 62%;
}

.zoom-large.view-3D .scale-d #solar-system {
    font-size: 48%;
}

.zoom-large.view-3D .scale-s #solar-system {
    font-size: 14%;
}


/* --------------------------------------------------------------------------- close zoom */

.zoom-close #solar-system {
    width: 200%;
    font-size: 100%;
}

.zoom-close .scale-stretched #solar-system {
    margin-left: -100%;
}

.zoom-close .scale-d #solar-system {
    margin-left: -106%;
}

.zoom-close.view-3D .scale-d #solar-system {
    font-size: 84%;
}

.zoom-close .scale-s #solar-system {
    margin-left: -145%;
}

.zoom-close.view-3D .scale-s #solar-system {
    font-size: 40%;
}

.zoom-close .orbit,
.zoom-close .pos,
.zoom-close .planet,
.zoom-close .satelite,
.zoom-close .ring {
    animation-play-state: paused!important;
    animation-duration: 0s!important;
    animation: none!important;
}

.zoom-close.view-2D .moon {
    transform: rotateX(0deg);
}

.zoom-close.view-3D .planet {
    transform: rotateX(-90deg);
}

.zoom-close.view-3D .moon {
    transform: rotateX(90deg);
}

.zoom-close .pos {
    left: 100%!important;
    top: 50%!important;
}


/* --------------------------------------------------------------------------- data */


/* --------------------------------------------------------------------------- speed */


/* sideral years */

#mercury .pos,
#mercury .planet,
#mercury.orbit {
    animation-duration: 12.70021s;
}

#venus .pos,
#venus .planet,
#venus.orbit {
    animation-duration: 12.00021s;
}

#earth .pos,
#earth .planet,
#earth.orbit {
    animation-duration: 12.70021s;
}

#earth .orbit .pos,
#earth .orbit {
    animation-duration: 12.70021s;
}

#mars .pos,
#mars .planet,
#mars.orbit {
    animation-duration: 12.70021s;
}

#jupiter .pos,
#jupiter .planet,
#jupiter.orbit {
    animation-duration: 12.70021s;
}

#saturn .pos,
#saturn .planet,
#saturn.orbit,
#saturn .ring {
    animation-duration: 12.70021s;
}

#uranus .pos,
#uranus .planet,
#uranus.orbit {
    animation-duration: 12.70021s;
}

#neptune .pos,
#neptune .planet,
#neptune.orbit {
    animation-duration: 12.70021s;
}

#bant .pos,
#bant .planet,
#bant.orbit {
    animation-duration: 12.70021s;
}

#firstbank .pos,
#firstbank .planet,
#firstbank.orbit {
    animation-duration: 12.70021s;
}

#clarnet .pos,
#clarnet .planet,
#clarnet.orbit {
    animation-duration: 12.70021s;
}


/* --------------------------------------------------------------------------- planets sizes */


/* --------------------------------------------------------------------------- stretched sizes */

.scale-stretched #sun {
    font-size: 24em;
}

.scale-stretched #mercury .planet {
    font-size: 7em;
}

.scale-stretched #venus .planet {
    font-size: 4em;
}

.scale-stretched #earth .planet {
    font-size: 5.92em;
}

.scale-stretched #earth .moon {
    font-size: 1.2em;
}

.scale-stretched #mars .planet {
    font-size: 12em;
}

.scale-stretched #jupiter .planet {
    font-size: 12em;
}

.scale-stretched #saturn .planet {
    font-size: 8.1em;
}

.scale-stretched #uranus .planet {
    font-size: 7em;
}

.scale-stretched #neptune .planet {
    font-size: 5.2em;
}

.scale-stretched #bant .planet {
    font-size: 8.2em;
}

.scale-stretched #firstbank .planet {
    font-size: 8.2em;
}

.scale-stretched #clarnet .planet {
    font-size: 8.2em;
}


/* --------------------------------------------------------------------------- scaled sizes */


/*
(planets radius * 2) * ratio
*/


/*$distanceScaleRatio:   0.000075em;*/


/* --------------------------------------------------------------------------- planets distance scale sizes */

.scale-d #sun {
    font-size: 41.73048em;
}

.scale-d #mercury .planet {
    font-size: 0.14634em;
}

.scale-d #venus .planet {
    font-size: 0.36306em;
}

.scale-d #earth .planet {
    font-size: 1.16em;
}

.scale-d #earth .moon {
    font-size: 0.08226em;
}

.scale-d #mars .planet {
    font-size: 1.20334em;
}

.scale-d #jupiter .planet {
    font-size: 4.19466em;
}

.scale-d #saturn .planet {
    font-size: 3.49392em;
}

.scale-d #uranus .planet {
    font-size: 4.52172em;
}

.scale-d #neptune .planet {
    font-size: 1.47732em;
}

.scale-d #bant .planet {
    font-size: 1.47732em;
}

.scale-d #firstbank .planet {
    font-size: 1.47732em;
}

.scale-d #clarnet .planet {
    font-size: 1.47732em;
}


/* --------------------------------------------------------------------------- planet size scale sizes */

.scale-s #sun {
    font-size: 417.3048em;
}

.scale-s #mercury .planet {
    font-size: 1.4634em;
}

.scale-s #venus .planet {
    font-size: 3.6306em;
}

.scale-s #earth .planet {
    font-size: 3.8226em;
}

.scale-s #earth .moon {
    font-size: 0.8226em;
}

.scale-s #mars .planet {
    font-size: 2.0334em;
}

.scale-s #jupiter .planet {
    font-size: 41.9466em;
}

.scale-s #saturn .planet {
    font-size: 34.9392em;
}

.scale-s #uranus .planet {
    font-size: 20.2172em;
}

.scale-s #neptune .planet {
    font-size: 10.7732em;
}

.scale-s #bant .planet {
    font-size: 10.7732em;
}

.scale-s #firstbank .planet {
    font-size: 10.7732em;
}

.scale-s #clarnet .planet {
    font-size: 10.7732em;
}


/* --------------------------------------------------------------------------- stretched orbits */

.scale-stretched #mercury.orbit {
    width: 60em;
    height: 60em;
    margin-top: -30em;
    margin-left: -30em;
}

.scale-stretched #venus.orbit {
    width: 40em;
    height: 40em;
    margin-top: -20em;
    margin-left: -20em;
}

.scale-stretched #earth.orbit {
    width: 56em;
    height: 56em;
    margin-top: -28em;
    margin-left: -28em;
}

.scale-stretched #earth .orbit {
    width: 9em;
    height: 9em;
    margin-top: -3em;
    margin-left: -3em;
}

.scale-stretched #mars.orbit {
    width: 90em;
    height: 90em;
    margin-top: -45em;
    margin-left: -45em;
}

.scale-stretched #jupiter.orbit {
    width: 100em;
    height: 100em;
    margin-top: -50em;
    margin-left: -50em;
}

.scale-stretched #saturn.orbit {
    width: 70em;
    height: 100em;
    margin-top: -50em;
    margin-left: -35em;
}

.scale-stretched #uranus.orbit {
    width: 85em;
    height: 85em;
    margin-top: -42.5em;
    margin-left: -42.5em;
}

.scale-stretched #neptune.orbit {
    width: 100em;
    height: 100em;
    margin-top: -50em;
    margin-left: -50em;
}

.scale-stretched #bant.orbit {
    width: 100em;
    height: 100em;
    margin-top: -50em;
    margin-left: -50em;
}

.scale-stretched #firstbank.orbit {
    width: 100em;
    height: 100em;
    margin-top: -50em;
    margin-left: -50em;
}

.scale-stretched #clarnet.orbit {
    width: 100em;
    height: 100em;
    margin-top: -50em;
    margin-left: -50em;
}


/* --------------------------------------------------------------------------- scaled orbits */


/* --------------------------------------------------------------------------- distance scale orbits */

.scale-d #mercury.orbit {
    width: 44.74176em;
    height: 44.74176em;
    margin-top: -22.37088em;
    margin-left: -22.37088em;
}

.scale-d #venus.orbit {
    width: 47.35737em;
    height: 47.35737em;
    margin-top: -23.67869em;
    margin-left: -23.67869em;
}

.scale-d #earth.orbit {
    width: 49.50959em;
    height: 49.50959em;
    margin-top: -24.75479em;
    margin-left: -24.75479em;
}

.scale-d #mars.orbit {
    width: 53.58356em;
    height: 53.58356em;
    margin-top: -26.79178em;
    margin-left: -26.79178em;
}

.scale-d #jupiter.orbit {
    width: 82.2042em;
    height: 82.2042em;
    margin-top: -41.1021em;
    margin-left: -41.1021em;
}

.scale-d #saturn.orbit {
    width: 115.91713em;
    height: 115.91713em;
    margin-top: -57.95857em;
    margin-left: -57.95857em;
}

.scale-d #uranus.orbit {
    width: 191.00471em;
    height: 191.00471em;
    margin-top: -95.50235em;
    margin-left: -95.50235em;
}

.scale-d #neptune.orbit {
    width: 275.64709em;
    height: 275.64709em;
    margin-top: -137.82355em;
    margin-left: -137.82355em;
}

.scale-d #bant.orbit {
    width: 275.64709em;
    height: 275.64709em;
    margin-top: -137.82355em;
    margin-left: -137.82355em;
}

.scale-d #firstbank.orbit {
    width: 275.64709em;
    height: 275.64709em;
    margin-top: -137.82355em;
    margin-left: -137.82355em;
}

.scale-d #clarnet.orbit {
    width: 275.64709em;
    height: 275.64709em;
    margin-top: -137.82355em;
    margin-left: -137.82355em;
}


/* Moon */

.scale-d #earth .orbit {
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
}


/* --------------------------------------------------------------------------- size scale orbits */

.scale-s #mercury.orbit {
    width: 441.3048em;
    height: 441.3048em;
    margin-top: -220.6524em;
    margin-left: -220.6524em;
}

.scale-s #venus.orbit {
    width: 457.3048em;
    height: 457.3048em;
    margin-top: -228.6524em;
    margin-left: -228.6524em;
}

.scale-s #earth.orbit {
    width: 473.3048em;
    height: 473.3048em;
    margin-top: -236.6524em;
    margin-left: -236.6524em;
}

.scale-s #mars.orbit {
    width: 489.3048em;
    height: 489.3048em;
    margin-top: -244.6524em;
    margin-left: -244.6524em;
}

.scale-s #jupiter.orbit {
    width: 561.3048em;
    height: 561.3048em;
    margin-top: -280.6524em;
    margin-left: -280.6524em;
}

.scale-s #saturn.orbit {
    width: 705.3048em;
    height: 705.3048em;
    margin-top: -352.6524em;
    margin-left: -352.6524em;
}

.scale-s #uranus.orbit {
    width: 817.3048em;
    height: 817.3048em;
    margin-top: -408.6524em;
    margin-left: -408.6524em;
}

.scale-s #neptune.orbit {
    width: 881.3048em;
    height: 881.3048em;
    margin-top: -440.6524em;
    margin-left: -440.6524em;
}

.scale-s #bant.orbit {
    width: 881.3048em;
    height: 881.3048em;
    margin-top: -440.6524em;
    margin-left: -440.6524em;
}

.scale-s #firstbank.orbit {
    width: 881.3048em;
    height: 881.3048em;
    margin-top: -440.6524em;
    margin-left: -440.6524em;
}

.scale-s #clarnet.orbit {
    width: 881.3048em;
    height: 881.3048em;
    margin-top: -440.6524em;
    margin-left: -440.6524em;
}


/* Moon */

.scale-s #earth .orbit {
    width: 1em;
    height: 1em;
    margin-top: -0.5em;
    margin-left: -0.5em;
}


/* --------------------------------------------------------------------------- mercury ; pos: Top */

#mercury .pos {
    left: 50%;
    top: -1%;
}


/* --------------------------------------------------------------------------- venus ; pos: Left */

#venus .pos {
    left: 0;
    top: 50%;
}


/* --------------------------------------------------------------------------- earth ; pos: Right */

#earth .pos {
    left: 100%;
    top: 50%;
}


/* --------------------------------------------------------------------------- moon */

#earth .orbit .pos {
    left: 100%;
    top: 50%;
}


/* --------------------------------------------------------------------------- mars ; pos: Bottom */

#mars .pos {
    left: 50%;
    top: 100%;
}


/* --------------------------------------------------------------------------- jupiter ; pos: Right */

#jupiter .pos {
    left: 100%;
    top: 30%;
}


/* --------------------------------------------------------------------------- saturn ; pos: Left */

#saturn .pos {
    left: 10%;
    top: 3%;
}


/* --------------------------------------------------------------------------- uranus ; pos: Left */

#uranus .pos {
    left: -20%;
    top: 50%;
}


/* --------------------------------------------------------------------------- neptune ; pos: Top */

#neptune .pos {
    left: 50%;
    top: 0;
}

#bant .pos {
    left: 0%;
    top: 20%;
}

#firstbank .pos {
    left: -20%;
    top: 20%;
}

#clarnet .pos {
    left: 0%;
    top: 110%;
}


/* --------------------------------------------------------------------------- DEBUG 
.pos, 
.planet, 
.orbit,
.ring { animation-duration: 20s!important; }

/* */


/* --------------------------------------------------------------------------- transitions */

.pos {
    transition-property: top, left;
}

#solar-system,
.orbit,
.planet,
.satelite,
.ring {
    transition-property: width, height, top, left, margin-left, margin-top, webkit-transform;
}

#sun,
.icon {
    transition-property: width, height, webkit-transform;
}

#solar-system,
#sun,
.orbit,
.pos,
.planet,
.satelite,
.ring,
.infos,
.icon {
    transition-duration: .8s;
    transition-timing-function: ease-in-out;
}

#solar-system,
#sun,
.planet,
.satelite,
.ring {
    transition-delay: 0s;
}

.pos {
    transition-delay: 1s;
}

.opening #solar-system,
.opening #sun,
.opening .orbit,
.opening .pos,
.opening .planet,
.opening .satelite,
.opening .ring {
    transition-duration: 0s;
    transition-delay: 0s;
}

.opening .pos {
    transition-delay: 0s;
}

h1,
#data,
#controls {
    transition-property: opacity, margin;
    transition-duration: .8s;
    transition-timing-function: ease-in-out;
}

h1 {
    transition-delay: .35s;
}


/* --------------------------------------------------------------------------- images */

#sun {
    background-image: url(https://globalxpert.ro/wp-content/uploads/2021/02/400x400.png);
}

#mercury .planet {
    background-image: url(https://globalxpert.ro/wp-content/uploads/2021/05/sai.png);
}

#venus .planet {
    background-image: url(https://globalxpert.ro/wp-content/uploads/2021/03/BCR2.png);
}

#earth .planet {
    background-image: url(https://globalxpert.ro/wp-content/uploads/2021/03/BRD2.png);
}

#mars .planet {
    background-image: url(https://globalxpert.ro/wp-content/uploads/2021/02/alphabank.png );
}

#jupiter .planet {
    background-image: url(https://globalxpert.ro/wp-content/uploads/2021/02/libra-internet-bank.png);
}

#saturn .planet {
    background-image: url(https://globalxpert.ro/wp-content/uploads/2021/03/logo-adv-84px-1.png);
}

#uranus .planet {
    background-image: url(https://globalxpert.ro/wp-content/uploads/2021/02/UniCredit-Bank-Logo-e1614364905553.png);
}

#neptune .planet {
    background-image: url(https://globalxpert.ro/wp-content/uploads/2021/05/westfield2.png);
}

#bant .planet {
    background-image: url(https://globalxpert.ro/wp-content/uploads/2021/06/bt5.png);
}

#firstbank .planet {
    background-image: url(https://globalxpert.ro/wp-content/uploads/2022/02/firstbank.png);
}

#clarnet .planet {
    background-image: url(https://globalxpert.ro/wp-content/uploads/2022/02/clarnet.png);
}


/* --------------------------------------------------------------------------- responsive styles */

@media screen and (max-width: 299px) {
    #universe {
        font-size: 40%;
    }
}

@media screen and (min-width: 300px) {
    #universe {
        font-size: 45%;
    }
}

@media screen and (min-width: 500px) {
    #universe {
        font-size: 48%;
    }
}

@media screen and (min-width: 600px) {
    #universe {
        font-size: 44%;
    }
}

@media screen and (min-width: 760px) {
    #universe {
        font-size: 60%;
    }
}

@media screen and (min-width: 1000px) {
    #universe {
        font-size: 60%;
    }
    #navbar a {
        display: none;
    }
    h1 {
        font-size: 22px;
        margin-top: 8px;
    }
    @media screen and (min-width: 1300px) {
        #universe {
            font-size: 100%;
        }
    }
    @media screen and (min-width: 1600px) {
        .zoom-close .scale-d #solar-system {
            margin-left: -120%;
        }
    }
}