@font-face {
	font-family: 'Canadienne';
	src: url("Pomme-Regular.otf") format("opentype");
}


/* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */

@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:5; transform: rotateY(270); }
  49% { z-index:5; }
  50% { z-index:-5; }
  99% { z-index:-5; }
  100%   { z-index:5; 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); }
}

/* scene wrapper */
.wrapper {
  position:relative;
  margin: 0 auto;
  display:block;
  margin-top: 200px;
  perspective: 1000px;
	perspective-origin: 60% 50%;
  transform: rotate(-10deg);
  
}
.wrapper > div {
  position: relative;
  margin: 0 auto;
  transform-style: preserve-3d;
  height: 0px;
}
.sun {
  width: 100px;
  position: absolute;
  top: 0px;
  z-index: 1;
  height: 125px !important;
}
.sun .star {
  width: 100px ;
  height: 100px;
  background: url() no-repeat;
  background-size: cover;

}
.planet {
  /*background-size: cover;*/
      background-size: 100% 100%;
  background-repeat: no-repeat;
  background-color: transparent;
  animation-iteration-count: infinite;
  overflow:hidden;
}

.mercury {
  position: absolute;
  width: 400px;
  z-index:2;
  animation: orbitmercury 12s infinite linear;
  top: -60.5px; /*half of planets height to keep orbits in line*/
}
.mercury .planet {
  width:70px;
  height:70px;
  background-image: url(//deappel.nl/wp-content/themes/deappel/css/svgs/singleapple-01.svg);
  animation: anti-spin 12s infinite linear;
}
.mercury .shadow {
  animation: shadow 12s infinite linear;
}
.venus {
  position: absolute;
  width: 200px;
  z-index:3;
  animation: orbitvenus 15s infinite linear;
  top: -19px;
}
.venus .planet {
  width:70px;
  height:70px;
  background-image: url(//deappel.nl/wp-content/themes/deappel/css/svgs/singleapple-02.svg);
  animation: anti-spin 15s infinite linear;
}
.venus .shadow {
  animation: shadow 15s infinite linear;
}
.earth {
  position: absolute;
  width: 410px;
  z-index:4;
  animation: orbitearth 20s infinite linear;
  top: -20px;
}
.earth .planet {
  width:70px;
  height:70px;
  background-image: url(//deappel.nl/wp-content/themes/deappel/css/svgs/singleapple-03.svg);
  animation: anti-spin 20s infinite linear;
}
.earth .shadow {
  animation: shadow 20s infinite linear;
}
.mars {
  position: absolute;
  width: 506px;
  z-index:5;
  animation: orbitmars 30s infinite linear;
  top: -11px;
}
.mars .planet {
  width:70px;
  height:70px;
  background-image: url(//deappel.nl/wp-content/themes/deappel/css/svgs/singleapple-04.svg);
  animation: anti-spin 30s infinite linear;
}
.mars .shadow {
  animation: shadow 30s infinite linear;
}
.jupiter {
  position: absolute;
  width: 600px;
  z-index:6;
  animation: orbitjupiter 50s infinite linear;
  top: -64px;
}
.jupiter .planet {
  width:70px;
  height:70px;
  background-image: url(//deappel.nl/wp-content/themes/deappel/css/svgs/singleapple-05.svg);
  animation: anti-spin 50s infinite linear;
}
.jupiter .shadow {
  animation: shadow 50s infinite linear;
}