.planet {
 position: absolute;
 display: flex;
 flex-direction: column;
 left:auto;
 width: 500px;
 height:150px;
 /* border-radius: 50%; */
}

.planet h2 {
 color: white;
 font-size: 4em;
 margin-bottom:40px;
 font-weight: 600;
}

.planet .earthcontainer {
 width:50%;
 display:flex;
 justify-content: center;
 align-items: center;
 flex-direction: column;
}

.planetEarth {
 position: relative;
 min-width: 200px;
 height: 500px;
 justify-content: center;
 align-items: center;
 /* background: #182357; */
}

.planetEarth .earthloader {
 position: relative;
 width:400px;
 height: 400px;
 border-radius: 50%;
 animation: animate 1.8s linear infinite;
 animation-delay: 3s;

}

@keyframes animate {
 0% {
   transform: rotate(0deg);
 }
 100% {
   transform: rotate(360deg);
 }
}

.planetEarth .earthloader:before {
 content: '';
 position: absolute;
 top:0;
 left:0;
 width:50%;
 height:100%;
 background:linear-gradient(to top, transparent, rgba(0,255,249,0.4));
 background-size:200px 360px;
 background-repeat: no-repeat;
 border-top-left-radius: 200px;
 border-bottom-left-radius: 200px;
}

.planetEarth .earthloader:after {
 content: '';
 position: absolute;
 top:0;
 left:50%;
 transform: translateX(-50%);
 width:10px;
 height:10px;
 background: #00fff9;
 border-radius: 50%;
 z-index: 10;
 box-shadow: 0 0 10px #182357,
   0 0 20px #182357,
   0 0 30px #182357,
   0 0 40px #182357,
   0 0 50px #182357,
   0 0 60px #182357,
   0 0 70px #182357,
   0 0 80px #182357,
   0 0 90px #182357,
   0 0 100px #182357;
}

.planetEarth .earthloader span {
 position: absolute;
 top:10px;
 left:10px;
 right:10px;
 bottom: 10px;
 background: #182357;
 border-radius: 50%;
}

.earth {
 position: absolute;
 width:379px;
 height:379px;
 background:url(earth.jpg);
 border-radius:50%;
 /* box-shadow: inset 0 0 20px #03a9f4, 0 0 120px #03a9f4; */
 animation: animateEarth 25s linear infinite;
}

@keyframes animateEarth {
 0% {
   background-position: 0;
 }
 100% {
   background-position: 162.5%;
 }
}







.w3-sidebar .w3-bar-item {
      position: relative;
      display: block;
      width: 100%;
     
      text-decoration: none;

      text-align: center;
     

}


.w3-sidebar {
      border-radius: 10px;
      width: 20%;

}

.w3-sidebar .w3-bar-item ion-icon {

     padding-right: 10px;
     font-size: 20px;

}
.w3-sidebar .cart  {
      margin-left: 15px;
      text-decoration: none;
}

.w3-sidebar a img {
      height: 30px;
      width: 30px;
      margin-left: 100px;
      margin-top:-23px;
      /* left: 10px; */

}