@import url(map.scss);
/* Map */
.system {
    position: fixed;
    width: 64%;
    height: 0%;
    -webkit-transform: scale(0.40);
    transform: scale(0.40);
	top: 0;
  }
  
.sun {
    width: 160px;
    height: 160px;
    border-radius: 72px;
    position: absolute;
    top: 1066.66667px;
    left: 50%;
    margin: -80px;
    background-image: url("../storage/system/music-art-magazine-logo-map-system.png");
    background-size: 160px;
    background-repeat: no-repeat;
  }
  
  @-webkit-keyframes rot-mer {
    from {
      -webkit-transform: rotate(0deg) translatey(-84px) rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg) translatey(-84px) rotate(-360deg);
    }
  }
  @-keyframes rot-mer {
    from {
      -webkit-transform: rotate(0deg) translatey(-84px) rotate(0deg);
              transform: rotate(0deg) translatey(-84px) rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(360deg) translatey(-84px) rotate(-360deg);
              transform: rotate(360deg) translatey(-84px) rotate(-360deg);
    }
  }
  .mer {
    width: 3.5px;
    height: 3.5px;
    border-radius: 50%;
    background-color: #888;
    position: absolute;
    top: 1066.66667px;
    left: 50%;
    margin: -1.75px;
    -webkit-animation: rot-mer 0.88s infinite linear;
    animation: rot-mer 0.88s infinite linear;
    z-index: 200;
  }
  
  .mer-path {
    width: 168px;
    height: 168px;
    border-radius: 50%;
    z-index: 100;
    position: absolute;
    top: 1066.66667px;
    left: 50%;
    margin: -84px;
    border: solid 1px #444;
  }
  
  @-webkit-keyframes rot-ven {
    from {
      -webkit-transform: rotate(0deg) translatey(-90px) rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg) translatey(-90px) rotate(-360deg);
    }
  }
  @-keyframes rot-ven {
    from {
      -webkit-transform: rotate(0deg) translatey(-90px) rotate(0deg);
              transform: rotate(0deg) translatey(-90px) rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(360deg) translatey(-90px) rotate(-360deg);
              transform: rotate(360deg) translatey(-90px) rotate(-360deg);
    }
  }
  .ven {
    width: 5.5px;
    height: 5.5px;
    border-radius: 50%;
    background-color: #f5f9be;
    position: absolute;
    top: 1066.66667px;
    left: 50%;
    margin: -2.75px;
    -webkit-animation: rot-ven 2.25s infinite linear;
    animation: rot-ven 2.25s infinite linear;
    z-index: 200;
  }
  
  .ven-path {
    width: 220px;
    height: 220px;
    border-radius: 50%;
    z-index: 100;
    position: absolute;
    top: 1066.66667px;
    left: 50%;
    margin: -110px;
    border: solid 8px #2c3e50;
    animation: flickerAnimationVen 1s infinite;
}

@keyframes flickerAnimationVen {
    0%   { opacity:0.1; transition-delay: 1s; }
    50%  { opacity:1; transition-delay: 1s; }
    100% { opacity:0.1; transition-delay: 1s; }
  }
  @-o-keyframes flickerAnimationVen{
    0%   { opacity:0.1; transition-delay: 1s; }
    50%  { opacity:1; transition-delay: 1s; }
    100% { opacity:0.1; transition-delay: 1s; }
  }
  @-moz-keyframes flickerAnimationVen{
    0%   { opacity:0.1; transition-delay: 1s; }
    50%  { opacity:1; transition-delay: 1s; }
    100% { opacity:0.1; transition-delay: 1s; }
  }
  @-webkit-keyframes flickerAnimationVen{
    0%   { opacity:0.1; transition-delay: 1s; }
    50%  { opacity:1; transition-delay: 1s; }
    100% { opacity:0.1; transition-delay: 1s; }
  }
  
  @keyframes flickerAnimationMar {
    0%   { opacity:0.3; transition-delay: 1.5s; }
    50%  { opacity:1; transition-delay: 1.5s; }
    100% { opacity:0.3; transition-delay: 1.5s; }
    }
    @-o-keyframes flickerAnimationMar{
        0%   { opacity:0.3; transition-delay: 1.5s; }
        50%  { opacity:1; transition-delay: 1.5s; }
        100% { opacity:0.3; transition-delay: 1.5s; }
    }
    @-moz-keyframes flickerAnimationMar{
        0%   { opacity:0.3; transition-delay: 1.5s; }
        50%  { opacity:1; transition-delay: 1.5s; }
        100% { opacity:0.3; transition-delay: 1.5s; }
    }
    @-webkit-keyframes flickerAnimationMar{
        0%   { opacity:0.3; transition-delay: 1.5s; }
        50%  { opacity:1; transition-delay: 1.5s; }
        100% { opacity:0.3; transition-delay: 1.5s; }
    }
    
    @keyframes flickerAnimationEar {
        0%   { opacity:0.6; transition-delay: 2s; }
        50%  { opacity:1; transition-delay: 2s; }
        100% { opacity:0.6; transition-delay: 2s; }
      }
      @-o-keyframes flickerAnimationEar{
        0%   { opacity:0.6; transition-delay: 2s; }
        50%  { opacity:1; transition-delay: 2s; }
        100% { opacity:0.6; transition-delay: 2s; }
      }
      @-moz-keyframes flickerAnimationEar{
        0%   { opacity:0.6; transition-delay: 2s; }
        50%  { opacity:1; transition-delay: 2s; }
        100% { opacity:0.6; transition-delay: 2s; }
      }
      @-webkit-keyframes flickerAnimationEar{
        0%   { opacity:0.6; transition-delay: 2s; }
        50%  { opacity:1; transition-delay: 2s; }
        100% { opacity:0.6; transition-delay: 2s; }
      }

  
  @-webkit-keyframes rot-ear {
    from {
      -webkit-transform: rotate(0deg) translatey(-102px) rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg) translatey(-102px) rotate(-360deg);
    }
  }
  @-keyframes rot-ear {
    from {
      -webkit-transform: rotate(0deg) translatey(-102px) rotate(0deg);
              transform: rotate(0deg) translatey(-102px) rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(360deg) translatey(-102px) rotate(-360deg);
              transform: rotate(360deg) translatey(-102px) rotate(-360deg);
    }
  }
  .ear {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #4b94f9;
    position: absolute;
    top: 1066.66667px;
    left: 50%;
    margin: -3.5px;
    -webkit-animation: rot-ear 3.65s infinite linear;
    animation: rot-ear 3.65s infinite linear;
    z-index: 200;
  }
  
  .ear-path {
    width: 360px;
    height: 360px;
    border-radius: 50%;
    z-index: 100;
    position: absolute;
    top: 1066.66667px;
    left: 50%;
    margin: -180px;
    border: solid 4px #2c3e50;
    animation: flickerAnimationEar 1s infinite;
  }
  
  @-webkit-keyframes rot-mar {
    from {
      -webkit-transform: rotate(0deg) translatey(-118px) rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg) translatey(-118px) rotate(-360deg);
    }
  }
  @-keyframes rot-mar {
    from {
      -webkit-transform: rotate(0deg) translatey(-118px) rotate(0deg);
              transform: rotate(0deg) translatey(-118px) rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(360deg) translatey(-118px) rotate(-360deg);
              transform: rotate(360deg) translatey(-118px) rotate(-360deg);
    }
  }
  .mar {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #dd411a;
    position: absolute;
    top: 1066.66667px;
    left: 50%;
    margin: -3px;
    -webkit-animation: rot-mar 6.87s infinite linear;
    animation: rot-mar 6.87s infinite linear;
    z-index: 200;
  }
  
  .mar-path {
    width: 290px;
    height: 290px;
    border-radius: 50%;
    z-index: 100;
    position: absolute;
    top: 1066.66667px;
    left: 50%;
    margin: -144px;
    border: solid 6px #2c3e50;
    animation: flickerAnimationMar 1s infinite;
  }
  
  @-webkit-keyframes rot-jup {
    from {
      -webkit-transform: rotate(0deg) translatey(-228px) rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg) translatey(-228px) rotate(-360deg);
    }
  }
  @-keyframes rot-jup {
    from {
      -webkit-transform: rotate(0deg) translatey(-228px) rotate(0deg);
              transform: rotate(0deg) translatey(-228px) rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(360deg) translatey(-228px) rotate(-360deg);
              transform: rotate(360deg) translatey(-228px) rotate(-360deg);
    }
  }
  .jup {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background-color: #f3cf39;
    position: absolute;
    top: 1066.66667px;
    left: 50%;
    margin: -35px;
    -webkit-animation: rot-jup 43.32s infinite linear;
    animation: rot-jup 43.32s infinite linear;
    z-index: 500;
    background-image: none;
  }
  
  .jup-path {
    width: 456px;
    height: 456px;
    border-radius: 50%;
    z-index: 100;
    position: absolute;
    top: 1066.66667px;
    left: 50%;
    margin: -228px;
    border: solid 1px #444;
  }
  
  @-webkit-keyframes rot-sat {
    from {
      -webkit-transform: rotate(0deg) translatey(-362px) rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg) translatey(-362px) rotate(-360deg);
    }
  }
  @-keyframes rot-sat {
    from {
      -webkit-transform: rotate(0deg) translatey(-362px) rotate(0deg);
              transform: rotate(0deg) translatey(-362px) rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(360deg) translatey(-362px) rotate(-360deg);
              transform: rotate(360deg) translatey(-362px) rotate(-360deg);
    }
  }
  .sat {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background-color: #d15a2f;
    position: absolute;
    top: 1066.66667px;
    left: 50%;
    margin: -29px;
    -webkit-animation: rot-sat 107.59s infinite linear;
    animation: rot-sat 107.59s infinite linear;
    z-index: 500;
  }
  
  .sat-path {
    width: 724px;
    height: 724px;
    border-radius: 50%;
    z-index: 100;
    position: absolute;
    top: 1066.66667px;
    left: 50%;
    margin: -362px;
    border: solid 1px #444;
  }
  
  @-webkit-keyframes rot-ura {
    from {
      -webkit-transform: rotate(0deg) translatey(-512px) rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg) translatey(-512px) rotate(-360deg);
    }
  }
  @-keyframes rot-ura {
    from {
      -webkit-transform: rotate(0deg) translatey(-512px) rotate(0deg);
              transform: rotate(0deg) translatey(-512px) rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(360deg) translatey(-512px) rotate(-360deg);
              transform: rotate(360deg) translatey(-512px) rotate(-360deg);
    }
  }
  .ura {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background-color: #97c7bb;
    position: absolute;
    top: 1066.66667px;
    left: 50%;
    margin: -24px;
    -webkit-animation: rot-ura 226.87s infinite linear;
    animation: rot-ura 226.87s infinite linear;
    z-index: 200;
  }
  
  .ura-path {
    width: 1024px;
    height: 1024px;
    border-radius: 50%;
    z-index: 100;
    position: absolute;
    top: 1066.66667px;
    left: 50%;
    margin: -512px;
    border: solid 1px #444;
  }
  
  @-webkit-keyframes rot-nep {
    from {
      -webkit-transform: rotate(0deg) translatey(-972px) rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg) translatey(-972px) rotate(-360deg);
    }
  }
  @-keyframes rot-nep {
    from {
      -webkit-transform: rotate(0deg) translatey(-972px) rotate(0deg);
              transform: rotate(0deg) translatey(-972px) rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(360deg) translatey(-972px) rotate(-360deg);
              transform: rotate(360deg) translatey(-972px) rotate(-360deg);
    }
  }
  .nep {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: #363ed7;
    position: absolute;
    top: 1066.66667px;
    left: 50%;
    margin: -12px;
    -webkit-animation: rot-nep 601.9s infinite linear;
    animation: rot-nep 601.9s infinite linear;
    z-index: 200;
  }
  
  .nep-path {
    width: 1944px;
    height: 1944px;
    border-radius: 50%;
    z-index: 100;
    position: absolute;
    top: 1066.66667px;
    left: 50%;
    margin: -972px;
    border: solid 1px #444;
  }
  
  @-webkit-keyframes rot-plu {
    from {
      -webkit-transform: rotate(0deg) translatey(-1246px) rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg) translatey(-1246px) rotate(-360deg);
    }
  }
  @-keyframes rot-plu {
    from {
      -webkit-transform: rotate(0deg) translatey(-1246px) rotate(0deg);
              transform: rotate(0deg) translatey(-1246px) rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(360deg) translatey(-1246px) rotate(-360deg);
              transform: rotate(360deg) translatey(-1246px) rotate(-360deg);
    }
  }
  .plu {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: #963;
    position: absolute;
    top: 1066.66667px;
    left: 50%;
    margin: -1.5px;
    -webkit-animation: rot-plu 904.65s infinite linear;
    animation: rot-plu 904.65s infinite linear;
    z-index: 200;
  }
  
  .plu-path {
    width: 2492px;
    height: 2492px;
    border-radius: 50%;
    z-index: 100;
    position: absolute;
    top: 1066.66667px;
    left: 50%;
    margin: -1246px;
    border: solid 1px #444;
  }
  
  @-webkit-keyframes rot-lune {
    from {
      -webkit-transform: rotate(0deg) translatey(-7px) rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg) translatey(-7px) rotate(-360deg);
    }
  }
  @-keyframes rot-lune {
    from {
      -webkit-transform: rotate(0deg) translatey(-7px) rotate(0deg);
              transform: rotate(0deg) translatey(-7px) rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(360deg) translatey(-7px) rotate(-360deg);
              transform: rotate(360deg) translatey(-7px) rotate(-360deg);
    }
  }
  .lune {
    width: 2px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -1.5px;
    -webkit-animation: rot-lune 0.27s infinite linear;
    animation: rot-lune 0.27s infinite linear;
  }
  
  .mar {
    background-image: -webkit-repeating-linear-gradient(top, #fff, #fff 1px, transparent 1px, transparent 5px);
    background-image: repeating-linear-gradient(to bottom, #fff, #fff 1px, transparent 1px, transparent 5px);
  }
  
  @-webkit-keyframes rot-pho {
    from {
      -webkit-transform: rotate(0deg) translatey(-7px) rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg) translatey(-7px) rotate(-360deg);
    }
  }
  @-keyframes rot-pho {
    from {
      -webkit-transform: rotate(0deg) translatey(-7px) rotate(0deg);
              transform: rotate(0deg) translatey(-7px) rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(360deg) translatey(-7px) rotate(-360deg);
              transform: rotate(360deg) translatey(-7px) rotate(-360deg);
    }
  }
  @-webkit-keyframes rot-dem {
    from {
      -webkit-transform: rotate(0deg) translatey(-9px) rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg) translatey(-9px) rotate(-360deg);
    }
  }
  @-keyframes rot-dem {
    from {
      -webkit-transform: rotate(0deg) translatey(-9px) rotate(0deg);
              transform: rotate(0deg) translatey(-9px) rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(360deg) translatey(-9px) rotate(-360deg);
              transform: rotate(360deg) translatey(-9px) rotate(-360deg);
    }
  }
  .pho, .dem {
    width: 1px;
    height: 1px;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
  }
  
  .pho {
    margin: -1px;
    -webkit-animation: rot-pho 0.15s infinite linear;
    animation: rot-pho 0.15s infinite linear;
  }
  
  .dem {
    margin: -1px;
    -webkit-animation: rot-dem 0.2s infinite linear;
    animation: rot-dem 0.2s infinite linear;
  }
  
  .jove {
    width: 2px;
    height: 2px;
    background-color: #fff;
    position: absolute;
    top: 35px;
    left: 50%;
  }
  
  @-webkit-keyframes rot-io {
    from {
      -webkit-transform: rotate(0deg) translatey(-39px) rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg) translatey(-39px) rotate(-360deg);
    }
  }
  @-keyframes rot-io {
    from {
      -webkit-transform: rotate(0deg) translatey(-39px) rotate(0deg);
              transform: rotate(0deg) translatey(-39px) rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(360deg) translatey(-39px) rotate(-360deg);
              transform: rotate(360deg) translatey(-39px) rotate(-360deg);
    }
  }
  @-webkit-keyframes rot-eur {
    from {
      -webkit-transform: rotate(0deg) translatey(-41px) rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg) translatey(-41px) rotate(-360deg);
    }
  }
  @-keyframes rot-eur {
    from {
      -webkit-transform: rotate(0deg) translatey(-41px) rotate(0deg);
              transform: rotate(0deg) translatey(-41px) rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(360deg) translatey(-41px) rotate(-360deg);
              transform: rotate(360deg) translatey(-41px) rotate(-360deg);
    }
  }
  @-webkit-keyframes rot-gan {
    from {
      -webkit-transform: rotate(0deg) translatey(-45px) rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg) translatey(-45px) rotate(-360deg);
    }
  }
  @-keyframes rot-gan {
    from {
      -webkit-transform: rotate(0deg) translatey(-45px) rotate(0deg);
              transform: rotate(0deg) translatey(-45px) rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(360deg) translatey(-45px) rotate(-360deg);
              transform: rotate(360deg) translatey(-45px) rotate(-360deg);
    }
  }
  @-webkit-keyframes rot-cal {
    from {
      -webkit-transform: rotate(0deg) translatey(-53px) rotate(0deg);
    }
    to {
      -webkit-transform: rotate(360deg) translatey(-53px) rotate(-360deg);
    }
  }
  @-keyframes rot-cal {
    from {
      -webkit-transform: rotate(0deg) translatey(-53px) rotate(0deg);
              transform: rotate(0deg) translatey(-53px) rotate(0deg);
    }
  
    to {
      -webkit-transform: rotate(360deg) translatey(-53px) rotate(-360deg);
              transform: rotate(360deg) translatey(-53px) rotate(-360deg);
    }
  }
  .io {
    -webkit-animation: rot-io 0.2s infinite linear;
    animation: rot-io 0.2s infinite linear;
  }
  
  .eur {
    -webkit-animation: rot-eur 0.35s infinite linear;
    animation: rot-eur 0.35s infinite linear;
  }
  
  .gan {
    -webkit-animation: rot-gan 0.7s infinite linear;
    animation: rot-gan 0.7s infinite linear;
  }
  
  .cal {
    -webkit-animation: rot-cal 1.65s infinite linear;
    animation: rot-cal 1.65s infinite linear;
  }
  
  
  .spot {
    position: absolute;
    width: 16px;
    height: 12px;
    border-radius: 8px / 6px;
    top: 45px;
    left: 50%;
    background-color: #bc833b;
    box-shadow: 0px 0px 5px #e1dcde;
    border: solid 1px #e1dcde;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    z-index: 300;
  }
  .nep .spot {
    background-color: #29319d;
    border: 0;
    box-shadow: none;
    top: 50%;
    left: 45%;
    width: 10px;
    height: 6px;
    margin: -2px;
    border-radius: 5px / 3px;
    border-left: solid 1px #7ed6fe;
  }
  
  div[class$="-ring"] {
    border-radius: 50%;
    position: absolute;
    top: 75%;
    left: 65%;
    opacity: 0.1;
    -webkit-transform: rotatex(45deg);
    transform: rotatex(45deg);
  }
  
  .a-ring {
    border: solid 5px #96866f;
    width: 119px;
    height: 119px;
    margin: -64.5px;
  }
  
  .b-ring {
    border: solid 10px #554c3c;
    width: 104px;
    height: 104px;
    margin: -62px;
  }
  
  .c-ring {
    border: solid 9px #574f4a;
    width: 95px;
    height: 95px;
    margin: -56.5px;
  }
  
  .f-ring {
    border: solid 2px #908e8d;
    width: 133px;
    height: 133px;
    margin: -68.5px;
  }
  
  .e-ring {
    border: solid 7px #908e8d;
    width: 76px;
    height: 76px;
    margin: -45px;
    -webkit-transform: rotatex(0deg) rotatey(89deg) !important;
    transform: rotatex(0deg) rotatey(89deg) !important;
  }
  
  .plu, .plu-path {
    top: 1354.06667px;
  }
  
/* Map */