/* scene wrapper */
.hs_slider_cont_wrapper{
    position:absolute;
    left:0;
    right:0;
    margin: 0 auto;
    display:block;
    perspective: 1000px;
    perspective-origin: 60% 50%;
    transform: rotate(-10deg);
}
/* home-banner start*/

@keyframes para {
    100% {
    background-position: 
        -5000px 20%,
        -800px 95%,
        500px 0,
        1000px 100%,
        400px 0;
    }
}
@keyframes spinsun {
    0% { transform: rotate(0); }
    100%   { transform: rotate(-360deg); }
}
@keyframes shadow {
    0% { background-position: 130% 0%; }
    33%{ background-position: 50% 0%; }
    55% { background-position: 0% 0%; }
    80%{ background-position: -50% 0%; }
    100%{ background-position: -50% 0%; }
}
@keyframes orbitmercury {
    0% { z-index:2; transform: rotateY(0); }
    49% { z-index:2; }
    50% { z-index:-2; }
    99% { z-index:-2; }
    100%   { z-index:2; transform: rotateY(360deg); }
}
@keyframes orbitvenus {
    0% { z-index:3; transform: rotateY(0); }
    49% { z-index:3; }
    50% { z-index:-3; }
    99% { z-index:-3; }
    100%   { z-index:3; transform: rotateY(360deg); }
}
@keyframes orbitearth {
    0% { z-index:4; transform: rotateY(0); }
    49% {z-index:4;}
    50% {z-index:-4;}
    99% {z-index:-4;}
    100%   { z-index:4; transform: rotateY(360deg);}
}
@keyframes orbitmars {
    0% { z-index:5; transform: rotateY(0); }
    49% { z-index:5; }
    50% { z-index:-5; }
    99% { z-index:-5; }
    100%   { z-index:5; transform: rotateY(360deg); }
}
@keyframes orbitjupiter {
    0% { z-index:6; transform: rotateY(270); }
    49% { z-index:6; }
    50% { z-index:-6; }
    99% { z-index:-6; }
    100%   { z-index:6; transform: rotateY(360deg); }
}
@keyframes orbitsaturn {
    0% { z-index:7; transform: rotateY(270); }
    49% { z-index:7; }
    50% { z-index:-7; }
    99% { z-index:-7; }
    100%   { z-index:7; transform: rotateY(360deg); }
}
/* Keep planet image flat */
@keyframes anti-spin {
    from { transform: rotateY(0); }
    to   { transform: rotateY(-360deg); }
}
@keyframes anti-spin-rings {
    from { transform: rotateY(0) rotateX(73deg); }
    to   { transform: rotateY(-360deg) rotateX(73deg); }
}
.hs_slider_cont_wrapper > div {
    position: relative;
    margin: 0 auto;
    transform-style: preserve-3d;
    height: 0px;
}
.sun {
    width: 250px;
    position: absolute;
    top: 0px;
    z-index: 1;
    height: 125px !important;
}
.sun {
    width: 250px;
    height: 250px;
    background: url('../img/solar/sun.webp') no-repeat;
    background-size: cover;
    border-radius: 250px;
    margin: 0 auto;
}
.star {
    width: 250px;
    height: 250px;
    background: url('../img/solar/sun.webp') no-repeat;
    background-size: cover;
    border-radius: 250px;
    margin: 0 auto;
    animation: spinsun 40s infinite linear;
}
.star {
    width: 250px;
    height: 250px;
    background: url('../img/solar/sun.webp') no-repeat;
    background-size: cover;
    border-radius: 250px;
    margin: 0 auto;
    animation: spinsun 40s infinite linear;
}
.planet {
    background-size: cover;
    background-repeat: no-repeat;
    background-color: transparent;
    animation-iteration-count: infinite;
    overflow:hidden;
}
.shadow {
    position: absolute;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    background: transparent url('../img/solar/shadow.webp') 0% 0% no-repeat;
    background-size: cover;
    border-radius: 100%;
}
.mercury {
    position: absolute;
    width: 400px;
    z-index:2;
    animation: orbitmercury 12s infinite linear;
    top: -7.5px; /*half of planets height to keep orbits in line*/
}
.mercury .planet {
    width:15px;
    height:15px;
    background-image: url('../img/solar/mercury.webp');
    animation: anti-spin 12s infinite linear;
}
.mercury .shadow {
    animation: shadow 12s infinite linear;
}
.venus {
    position: absolute;
    width: 506px;
    z-index:3;
    animation: orbitvenus 15s infinite linear;
    top: -19px;
}
.venus .planet {
    width:38px;
    height:38px;
    background-image: url('../img/solar/venus.webp');
    animation: anti-spin 15s infinite linear;
}
.venus .shadow {
    animation: shadow 15s infinite linear;
}
.earth {
    position: absolute;
    width: 610px;
    z-index:4;
    animation: orbitearth 20s infinite linear;
    top: -20px;
}
.earth .planet {
    width:40px;
    height:40px;
    background-image: url('../img/solar/earth.webp');
    animation: anti-spin 20s infinite linear;
}
.earth .shadow {
    animation: shadow 20s infinite linear;
}
.mars {
    position: absolute;
    width: 706px;
    z-index:5;
    animation: orbitmars 30s infinite linear;
    top: -11px;
}
.mars .planet {
    width:22px;
    height:22px;
    background-image: url('../img/solar/mars.webp');
    animation: anti-spin 30s infinite linear;
}
.mars .shadow {
    animation: shadow 30s infinite linear;
}
.jupiter {
    position: absolute;
    width: 1100px;
    z-index:6;
    animation: orbitjupiter 50s infinite linear;
    top: -64px;
}
.jupiter .planet {
    width:128px;
    height:128px;
    background-image: url('../img/solar/jupiter.webp');
    animation: anti-spin 50s infinite linear;
}
.jupiter .shadow {
    animation: shadow 50s infinite linear;
}

.img_and_anim {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(to right, rgba(0,0,0,0.3) , rgba(0,0,0,0.7) , rgba(0,0,0,0.3)) , url(../img/animation/infos.gif);
    animation: animation 100s linear infinite;
    overflow:hidden;
}
@keyframes animation {
    100%{
        background-position:0px 3000px;
    }
}