@import url(https://fonts.googleapis.com/css?family=Roboto+Slab:400,700);

body {background: #000; font-family: 'roboto slab', serif; }

.wrapper {width: 427px; height: 320px; position: relative; margin: 0 auto;}

.card {width: 427px; height: 320px; position: absolute; top: 0; left: 0;}

.front {background: #333; color: #fafafa; text-transform: uppercase; z-index: 1; }

.front .inner-wrap {width: 85%; margin: 120px auto;}

.front .orbit {position: relative; top: -20px; float: left; height: 100px; width: 27%; }

.front .sun {position: absolute; top: 50%; left: 50%; height: 30px; width: 30px; margin-top: -15px; margin-left: -15px; background: #d35400; border-radius: 50%; border: 2px solid #242424;}

.front .p1 {position: absolute; top: 0;

left: 50%; height: 10px; width: 10px; margin-left: -5px; margin-top: -5px;

border-radius: 50%; background: #ecf0f1;

border: 2px solid #242424; }

.front .p1-orbit {position: absolute; top: 50%; left: 50%; width: 60px; height: 60px; margin-top: -30px; margin-left: -30px; border-radius: 50%; border: 1px dotted #bdc3c7; -webkit-animation: spin-left 3.5s linear infinite; -moz-animation: spin-left 3.5s linear infinite; -ms-animation: spin-left 3.5s linear infinite; -o-animation: spin-left 3.5s linear infinite; animation: spin-left 3.5s linear infinite; }

.front .p2 {position: absolute; top: 0;

left: 50%; height: 20px; width: 20px; margin-left: -10px; margin-top: -10px;

border-radius: 50%; background: #d35400;

border: 2px solid #242424; }

.front .p2-orbit {position: absolute;

top: 50%; left: 50%; width: 80px; height: 80px; margin-top: -40px; margin-left: -40px; border-radius: 50%; border: 1px dotted #bdc3c7; -webkit-animation: spin-left 3s linear infinite; -moz-animation: spin-left 3s linear infinite;

-ms-animation: spin-left 3s linear infinite; -o-animation: spin-left 3s linear infinite; animation: spin-left 3s linear infinite; }

.front .p3 {position: absolute; top: 0;

left: 50%; height: 12px; width: 12px;

margin-left: -6px; margin-top: -6px;

border-radius: 50%; background: #ecf0f1; border: 2px solid #242424; }

.front .p3-orbit {position: absolute;

top: 50%; left: 50%; width: 100px; height: 100px; margin-top: -50px;