/* Moon Phases */
html {
width: 100%;
height: 100%;
}
body {
width: 100%;
height: 100%;
margin: 0;
}
.container {
width: 100%;
height: 140%;
position: absolute;
overflow: hidden;
}
nav button {
width: 25%;
}
.day {
background: #c5fcff;
background-image: -ms-linear-gradient(top, #C5FCFF 0%, #cc6a1f 65%);
background-image: -moz-linear-gradient(top, #C5FCFF 0%, #cc6a1f 65%);
background-image: -o-linear-gradient(top, #C5FCFF 0%, #cc6a1f 65%);
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #C5FCFF), color-stop(65, #cc6a1f));
background-image: -webkit-linear-gradient(top, #C5FCFF 0%, #cc6a1f 65%);
background-image: linear-gradient(to bottom, #C5FCFF 0%, #cc6a1f 65%);
}
.sun-container {
width: 500px;
height: 500px;
margin: 0 auto;
position: absolute;
top: -400px;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
}
.sun {
width: 500px;
height: 500px;
}
.earth-container {
width: 160px;
height: 160px;
display: block;
position: absolute;
margin: auto;
top: -47%; bottom: 0; right: 0; left: 0;
}
.earth {
width: 160px;
height: 160px;
background: #6ab9c6;
background-image: -ms-radial-gradient(center top, circle farthest-corner, #6ABAC6 0%, #2A7481 100%);
background-image: -moz-radial-gradient(center top, circle farthest-corner, #6ABAC6 0%, #2A7481 100%);
background-image: -o-radial-gradient(center top, circle farthest-corner, #6ABAC6 0%, #2A7481 100%);
background-image: -webkit-gradient(radial, center top, 0, center top, 359, color-stop(0, #6ABAC6), color-stop(100, #2A7481));
background-image: -webkit-radial-gradient(center top, circle farthest-corner, #6ABAC6 0%, #2A7481 100%);
background-image: radial-gradient(circle farthest-corner at center top, #6ABAC6 0%, #2A7481 100%);
box-shadow: 0px 0px 0px 10px #D3D7C1;
-webkit-box-shadow: 0px 0px 0px 10px #D3D7C1;
-moz-box-shadow: 0px 0px 0px 10px #D3D7C1;
}
.top {
position: absolute;
top: 31%;
bottom: 0;
left: 0;
right: 0;
}
.you-container {
width: 17px;
height: 17px;
display: block;
position: absolute;
margin: auto;
top: 0; bottom: 0; right: 0; left: 0;
}
.dot {
width: 15px;
height: 15px;
display: block;
background: #EB9757;
box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2);
-webkit-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2);
-moz-box-shadow: 1px 1px 1px 0px rgba(0,0,0,0.2);
}
.you {
position: absolute;
top: 17px;
left: -4px;
}
.q {
position: relative;
top: 4px;
}
.eye {
top: 0;
left: 0;
right: 0;
margin: 0 auto;
}
.info_container {
bottom: 40%;
}
.bg {
margin: 0 auto;
width: 100%;
height: 35%;
position: fixed;
bottom: 0;
-webkit-clip-path: polygon(0 13%, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 13%, 100% 0, 100% 100%, 0% 100%);
z-index: 3;
}
.bg-solid {
margin: 0 auto;
width: 100%;
height: 35%;
position: fixed;
bottom: 0;
-webkit-clip-path: polygon(0 13%, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 13%, 100% 0, 100% 100%, 0% 100%);
background: #55578f;
background: -moz-linear-gradient(top, #55578f 0%, #353544 100%);
background: -webkit-linear-gradient(top, #55578f 0%,#353544 100%);
background: linear-gradient(to bottom, #55578f 0%,#353544 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#55578f', endColorstr='#353544',GradientType=0 );
z-index: 3;
}
.bg-shadow {
position: fixed;
bottom: 10%;
left: -10px;
width: 105%;
height: 50%;
transform: rotateZ(-2deg);
opacity: .7;
background-color: #000;
-webkit-clip-path: polygon(0 13%, 100% 0, 100% 100%, 0% 100%);
clip-path: polygon(0 13%, 100% 0, 100% 100%, 0% 100%);
background: -moz-linear-gradient(top, rgba(127,127,127,0) 38%, rgba(125,125,125,0) 39%, rgba(56,56,56,1) 73%);
background: -webkit-linear-gradient(top, rgba(127,127,127,0) 38%,rgba(125,125,125,0) 39%,rgba(56,56,56,1) 73%);
background: linear-gradient(to bottom, rgba(127,127,127,0) 38%,rgba(125,125,125,0) 39%,rgba(56,56,56,1) 73%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#007f7f7f', endColorstr='#383838',GradientType=0 );
}
.whatyousee {
position: absolute;
left: 0;
bottom: 100px;
right: 0;
}
.moon-container {
display: block;
position: absolute;
margin: auto;
top: -23%; bottom: 0; right: 0; left: 0;
}
.moon-top {
width: 60px;
height: 60px;
background-color: #FFFFFF;
display: block;
position: absolute;
margin: auto;
top: 0; bottom: 0; right: 0; left: 0;
}
.shadow-trim {
width: 100%;
height: 100%;
display: block;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: hidden;
}
.moon-top-shadow {
width: 100%;
height: 100%;
background-color: #2f315b;
transform: translateY(30px);
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
}
.question_container {
background: #ffcfaa;
background: -moz-linear-gradient(top, #ffcfaa 0%, #4fcccc 100%);
background: -webkit-linear-gradient(top, #ffcfaa 0%,#4fcccc 100%);
background: linear-gradient(to bottom, #ffcfaa 0%,#4fcccc 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffcfaa', endColorstr='#4fcccc',GradientType=0 );
}
.rot1{
animation: rot1 1s ease-in-out;
animation-fill-mode: forwards;
-webkit-animation: rot1 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
}
.rot2{
animation: rot2 1s ease-in-out;
animation-fill-mode: forwards;
-webkit-animation: rot2 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
}
.rot3{
animation: rot3 1s ease-in-out;
animation-fill-mode: forwards;
-webkit-animation: rot3 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
}
.rot4{
animation: rot4 1s ease-in-out;
animation-fill-mode: forwards;
-webkit-animation: rot4 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
}
.rot1u{
animation: rot1u 1s ease-in-out;
animation-fill-mode: forwards;
-webkit-animation: rot1u 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
}
.rot2u{
animation: rot2u 1s ease-in-out;
animation-fill-mode: forwards;
-webkit-animation: rot2u 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
}
.rot3u{
animation: rot3u 1s ease-in-out;
animation-fill-mode: forwards;
-webkit-animation: rot3u 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
}
.rot4u{
animation: rot4u 1s ease-in-out;
animation-fill-mode: forwards;
-webkit-animation: rot4u 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
}
.scale {
width: 120px;
height: 120px;
}
.ab-in-block {
position: absolute;
display: inline-block;
}
.disc {
overflow: hidden;
}
.shadows {
overflow: hidden;
perspective: 1000px;
box-shadow: 0px 0px 0px 10px #494A72;
-webkit-box-shadow: 0px 0px 0px 10px #494A72;
-moz-box-shadow: 0px 0px 0px 10px #494A72;
}
.left {
transform: translateX(-60px);
-ms-transform: translateX(-60px);
-webkit-transform: translateX(-60px);
background-color: white;
}
.right {
transform: translateX(60px);
-ms-transform: translateX(60px);
-webkit-transform: translateX(60px);
background-color: #2f315b;
}
.new2quart {
animation: new2quart 1s ease-in-out;
animation-fill-mode: forwards;
-webkit-animation: new2quart 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
}
.quart2full {
animation: quart2full 1s ease-in-out;
animation-fill-mode: forwards;
-webkit-animation: quart2full 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
}
.full2three {
animation: full2three 1s ease-in-out;
animation-fill-mode: forwards;
-webkit-animation: full2three 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
}
.three2new {
animation: three2new 1s ease-in-out;
animation-fill-mode: forwards;
-webkit-animation: three2new 1s ease-in-out;
-webkit-animation-fill-mode: forwards;
}
/*** ANIMATION KEYFRAMES ***/
/*** Maximum Sizing ***/
@keyframes new2quart {
0% {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
background-color: #2f315b;
}
100% {
transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
background-color: #2f315b;
}
}
@keyframes quart2full {
0% {
transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
background-color: #FFFFFF;
}
100% {
transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
background-color: #FFFFFF;
}
}
@keyframes full2three {
0% {
transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
background-color: #FFFFFF;
}
100% {
transform: rotateY(270deg);
-ms-transform: rotateY(270deg);
-webkit-transform: rotateY(270deg);
background-color: #FFFFFF;
}
}
@keyframes three2new{
0% {
transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
background-color: #2f315b;
}
100% {
transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
background-color: #2f315b;
}
}
@keyframes rot1 {
from {
transform: rotate(0deg)
translateX(250px)
rotate(0deg);
transform: rotate(0deg)
translateX(250px)
rotate(0deg);
transform: rotate(0deg)
translateX(250px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(250px)
rotate(90deg);
transform: rotate(-90deg)
translateX(250px)
rotate(90deg);
transform: rotate(-90deg)
translateX(250px)
rotate(90deg);
}
}
@keyframes rot2 {
from {
transform: rotate(0deg)
translateY(-250px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-250px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-250px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-250px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-250px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-250px)
rotate(90deg);
}
}
@keyframes rot3 {
from {
transform: rotate(0deg)
translateX(-250px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-250px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-250px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-250px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-250px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-250px)
rotate(90deg);
}
}
@keyframes rot4 {
from {
transform: rotate(0deg)
translateY(250px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(250px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(250px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(250px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(250px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(250px)
rotate(90deg);
}
}
@keyframes rot1u {
from {
transform: rotate(0deg)
translateX(80px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(80px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(80px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(80px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(80px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(80px)
rotate(90deg);
}
}
@keyframes rot2u {
from {
transform: rotate(0deg)
translateY(-80px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-80px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-80px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-80px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-80px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-80px)
rotate(90deg);
}
}
@keyframes rot3u {
from {
transform: rotate(0deg)
translateX(-80px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-80px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-80px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-80px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-80px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-80px)
rotate(90deg);
}
}
@keyframes rot4u {
from {
transform: rotate(0deg)
translateY(80px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(80px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(80px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(80px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(80px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(80px)
rotate(90deg);
}
}
@-webkit-keyframes new2quart {
0% {
transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
background-color: #2f315b;
}
100% {
transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
background-color: #2f315b;
}
}
@-webkit-keyframes quart2full {
0% {
transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
background-color: #FFFFFF;
}
100% {
transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
background-color: #FFFFFF;
}
}
@-webkit-keyframes full2three {
0% {
transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
background-color: #FFFFFF;
}
100% {
transform: rotateY(270deg);
-ms-transform: rotateY(270deg);
-webkit-transform: rotateY(270deg);
background-color: #FFFFFF;
}
}
@-webkit-keyframes three2new{
0% {
transform: rotateY(90deg);
-ms-transform: rotateY(90deg);
-webkit-transform: rotateY(90deg);
background-color: #2f315b;
}
100% {
transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
-webkit-transform: rotateY(0deg);
background-color: #2f315b;
}
}
@-webkit-keyframes rot1 {
from {
transform: rotate(0deg)
translateX(250px)
rotate(0deg);
transform: rotate(0deg)
translateX(250px)
rotate(0deg);
transform: rotate(0deg)
translateX(250px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(250px)
rotate(90deg);
transform: rotate(-90deg)
translateX(250px)
rotate(90deg);
transform: rotate(-90deg)
translateX(250px)
rotate(90deg);
}
}
@-webkit-keyframes rot2 {
from {
transform: rotate(0deg)
translateY(-250px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-250px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-250px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-250px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-250px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-250px)
rotate(90deg);
}
}
@-webkit-keyframes rot3 {
from {
transform: rotate(0deg)
translateX(-250px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-250px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-250px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-250px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-250px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-250px)
rotate(90deg);
}
}
@-webkit-keyframes rot4 {
from {
transform: rotate(0deg)
translateY(250px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(250px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(250px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(250px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(250px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(250px)
rotate(90deg);
}
}
@-webkit-keyframes rot1u {
from {
transform: rotate(0deg)
translateX(80px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(80px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(80px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(80px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(80px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(80px)
rotate(90deg);
}
}
@-webkit-keyframes rot2u {
from {
transform: rotate(0deg)
translateY(-80px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-80px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-80px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-80px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-80px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-80px)
rotate(90deg);
}
}
@-webkit-keyframes rot3u {
from {
transform: rotate(0deg)
translateX(-80px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-80px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-80px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-80px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-80px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-80px)
rotate(90deg);
}
}
@-webkit-keyframes rot4u {
from {
transform: rotate(0deg)
translateY(80px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(80px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(80px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(80px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(80px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(80px)
rotate(90deg);
}
}
/*** 1920px Wide ***/
@media only screen and (max-width : 1920px) {
.earth, .earth-container {
width:130px;
height:130px;
}
.sun-container {
top: -450px;
}
.scale {
width:100px;
height:100px;
}
.left {
transform: translateX(-50px);
-webkit-transform: translateX(-50px);
-ms-transform: translateX(-50px);
}
.right {
transform: translateX(50px);
-webkit-transform: translateX(50px);
-ms-transform: translateX(50px);
}
.moon-top {
width:50px;
height:50px;
}
.moon-top-shadow {
transform: translateY(25px);
-webkit-transform: translateY(25px);
-ms-transform: translateY(25px);
}
@keyframes rot1 {
from {
transform: rotate(0deg)
translateX(220px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(220px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(220px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(220px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(220px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(220px)
rotate(90deg);
}
}
@keyframes rot2 {
from {
transform: rotate(0deg)
translateY(-220px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-220px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-220px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-220px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-220px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-220px)
rotate(90deg);
}
}
@keyframes rot3 {
from {
transform: rotate(0deg)
translateX(-220px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-220px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-220px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-220px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-220px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-220px)
rotate(90deg);
}
}
@keyframes rot4 {
from {
transform: rotate(0deg)
translateY(220px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(220px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(220px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(220px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(220px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(220px)
rotate(90deg);
}
}
@keyframes rot1u {
from {
transform: rotate(0deg)
translateX(65px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(65px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(65px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(65px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(65px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(65px)
rotate(90deg);
}
}
@keyframes rot2u {
from {
transform: rotate(0deg)
translateY(-65px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-65px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-65px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-65px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-65px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-65px)
rotate(90deg);
}
}
@keyframes rot3u {
from {
transform: rotate(0deg)
translateX(-65px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-65px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-65px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-65px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-65px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-65px)
rotate(90deg);
}
}
@keyframes rot4u {
from {
transform: rotate(0deg)
translateY(65px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(65px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(65px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(65px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(65px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(65px)
rotate(90deg);
}
}
@-webkit-keyframes rot1 {
from {
transform: rotate(0deg)
translateX(220px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(220px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(220px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(220px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(220px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(220px)
rotate(90deg);
}
}
@-webkit-keyframes rot2 {
from {
transform: rotate(0deg)
translateY(-220px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-220px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-220px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-220px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-220px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-220px)
rotate(90deg);
}
}
@-webkit-keyframes rot3 {
from {
transform: rotate(0deg)
translateX(-220px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-220px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-220px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-220px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-220px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-220px)
rotate(90deg);
}
}
@-webkit-keyframes rot4 {
from {
transform: rotate(0deg)
translateY(220px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(220px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(220px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(220px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(220px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(220px)
rotate(90deg);
}
}
@-webkit-keyframes rot1u {
from {
transform: rotate(0deg)
translateX(65px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(65px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(65px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(65px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(65px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(65px)
rotate(90deg);
}
}
@-webkit-keyframes rot2u {
from {
transform: rotate(0deg)
translateY(-65px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-65px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-65px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-65px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-65px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-65px)
rotate(90deg);
}
}
@-webkit-keyframes rot3u {
from {
transform: rotate(0deg)
translateX(-65px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-65px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-65px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-65px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-65px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-65px)
rotate(90deg);
}
}
@-webkit-keyframes rot4u {
from {
transform: rotate(0deg)
translateY(65px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(65px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(65px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(65px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(65px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(65px)
rotate(90deg);
}
}
}
/*** 1366px Width ***/
@media only screen and (max-width : 1366px) {
.earth, .earth-container {
width:110px;
height:110px;
}
.sun-container {
top: -450px;
}
.scale {
width:80px;
height:80px;
}
.left {
transform: translateX(-40px);
-webkit-transform: translateX(-40px);
-ms-transform: translateX(-40px);
}
.right {
transform: translateX(40px);
-webkit-transform: translateX(40px);
-ms-transform: translateX(40px);
}
.moon-top {
width:50px;
height:50px;
}
.moon-top-shadow {
transform: translateY(25px);
-webkit-transform: translateY(25px);
-ms-transform: translateY(25px);
}
.whatyousee {
bottom: 80px;
}
@keyframes rot1 {
from {
transform: rotate(0deg)
translateX(150px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(150px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(150px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(150px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(150px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(150px)
rotate(90deg);
}
}
@keyframes rot2 {
from {
transform: rotate(0deg)
translateY(-150px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-150px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-150px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-150px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-150px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-150px)
rotate(90deg);
}
}
@keyframes rot3 {
from {
transform: rotate(0deg)
translateX(-150px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-150px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-150px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-150px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-150px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-150px)
rotate(90deg);
}
}
@keyframes rot4 {
from {
transform: rotate(0deg)
translateY(150px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(150px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(150px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(150px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(150px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(150px)
rotate(90deg);
}
}
@keyframes rot1u {
from {
transform: rotate(0deg)
translateX(55px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(55px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(55px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(55px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(55px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(55px)
rotate(90deg);
}
}
@keyframes rot2u {
from {
transform: rotate(0deg)
translateY(-55px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-55px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-55px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-55px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-55px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-55px)
rotate(90deg);
}
}
@keyframes rot3u {
from {
transform: rotate(0deg)
translateX(-55px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-55px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-55px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-55px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-55px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-55px)
rotate(90deg);
}
}
@keyframes rot4u {
from {
transform: rotate(0deg)
translateY(55px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(55px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(55px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(55px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(55px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(55px)
rotate(90deg);
}
}
@-webkit-keyframes rot1 {
from {
transform: rotate(0deg)
translateX(150px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(150px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(150px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(150px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(150px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(150px)
rotate(90deg);
}
}
@-webkit-keyframes rot2 {
from {
transform: rotate(0deg)
translateY(-150px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-150px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-150px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-150px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-150px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-150px)
rotate(90deg);
}
}
@-webkit-keyframes rot3 {
from {
transform: rotate(0deg)
translateX(-150px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-150px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-150px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-150px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-150px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-150px)
rotate(90deg);
}
}
@-webkit-keyframes rot4 {
from {
transform: rotate(0deg)
translateY(150px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(150px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(150px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(150px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(150px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(150px)
rotate(90deg);
}
}
@-webkit-keyframes rot1u {
from {
transform: rotate(0deg)
translateX(55px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(55px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(55px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(55px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(55px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(55px)
rotate(90deg);
}
}
@-webkit-keyframes rot2u {
from {
transform: rotate(0deg)
translateY(-55px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-55px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-55px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-55px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-55px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-55px)
rotate(90deg);
}
}
@-webkit-keyframes rot3u {
from {
transform: rotate(0deg)
translateX(-55px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-55px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-55px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-55px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-55px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-55px)
rotate(90deg);
}
}
@-webkit-keyframes rot4u {
from {
transform: rotate(0deg)
translateY(55px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(55px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(55px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(55px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(55px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(55px)
rotate(90deg);
}
}
}
/*** 1280px Width ***/
@media only screen and (max-width : 1280px) {
.whatyousee {
bottom: 60px;
}
}
/*** 1024px Width ***/
@media only screen and (max-width : 1024px) {
.earth, .earth-container {
width: 96px;
height: 96px;
}
.sun-container {
top: -465px;
}
.scale {
width:50px;
height:50px;
}
.left {
transform: translateX(-25px);
-webkit-transform: translateX(-25px);
-ms-transform: translateX(-25px);
}
.right {
transform: translateX(25px);
-webkit-transform: translateX(25px);
-ms-transform: translateX(25px);
}
.moon-top {
width:50px;
height:50px;
}
.moon-top-shadow {
transform: translateY(25px);
-webkit-transform: translateY(25px);
-ms-transform: translateY(25px);
}
.whatyousee {
bottom: 70px;
}
.info_container {
bottom: 32%;
}
@keyframes rot1 {
from {
transform: rotate(0deg)
translateX(125px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(125px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(125px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(125px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(125px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(125px)
rotate(90deg);
}
}
@keyframes rot2 {
from {
transform: rotate(0deg)
translateY(-125px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-125px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-125px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-125px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-125px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-125px)
rotate(90deg);
}
}
@keyframes rot3 {
from {
transform: rotate(0deg)
translateX(-125px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-125px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-125px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-125px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-125px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-125px)
rotate(90deg);
}
}
@keyframes rot4 {
from {
transform: rotate(0deg)
translateY(125px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(125px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(125px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(125px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(125px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(125px)
rotate(90deg);
}
}
@keyframes rot1u {
from {
transform: rotate(0deg)
translateX(48px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(48px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(48px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(48px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(48px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(48px)
rotate(90deg);
}
}
@keyframes rot2u {
from {
transform: rotate(0deg)
translateY(-48px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-48px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-48px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-48px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-48px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-48px)
rotate(90deg);
}
}
@keyframes rot3u {
from {
transform: rotate(0deg)
translateX(-48px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-48px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-48px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-48px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-48px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-48px)
rotate(90deg);
}
}
@keyframes rot4u {
from {
transform: rotate(0deg)
translateY(48px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(48px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(48px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(48px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(48px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(48px)
rotate(90deg);
}
}
@keyframes rot1 {
from {
transform: rotate(0deg)
translateX(125px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(125px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(125px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(125px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(125px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(125px)
rotate(90deg);
}
}
@keyframes rot2 {
from {
transform: rotate(0deg)
translateY(-125px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-125px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-125px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-125px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-125px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-125px)
rotate(90deg);
}
}
@keyframes rot3 {
from {
transform: rotate(0deg)
translateX(-125px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-125px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-125px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-125px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-125px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-125px)
rotate(90deg);
}
}
@keyframes rot4 {
from {
transform: rotate(0deg)
translateY(125px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(125px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(125px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(125px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(125px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(125px)
rotate(90deg);
}
}
@keyframes rot1u {
from {
transform: rotate(0deg)
translateX(48px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(48px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(48px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(48px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(48px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(48px)
rotate(90deg);
}
}
@keyframes rot2u {
from {
transform: rotate(0deg)
translateY(-48px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-48px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-48px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-48px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-48px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-48px)
rotate(90deg);
}
}
@keyframes rot3u {
from {
transform: rotate(0deg)
translateX(-48px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-48px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-48px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-48px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-48px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-48px)
rotate(90deg);
}
}
@keyframes rot4u {
from {
transform: rotate(0deg)
translateY(48px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(48px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(48px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(48px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(48px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(48px)
rotate(90deg);
}
}
}
/*** 786px Width ***/
@media only screen and (max-width : 768px) {
.earth, .earth-container {
width: 120px;
height: 120px;
}
.sun-container {
top: -465px;
}
.scale {
width:76px;
height:76px;
}
.left {
transform: translateX(-38px);
-webkit-transform: translateX(-38px);
-ms-transform: translateX(-38px);
}
.right {
transform: translateX(38px);
-webkit-transform: translateX(38px);
-ms-transform: translateX(38px);
}
.moon-top {
width:50px;
height:50px;
}
.moon-top-shadow {
transform: translateY(25px);
-webkit-transform: translateY(25px);
-ms-transform: translateY(25px);
}
.whatyousee {
bottom: 70px;
}
.info_container {
bottom: 32%;
}
@keyframes rot1 {
from {
transform: rotate(0deg)
translateX(200px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(200px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(200px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(200px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(200px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(200px)
rotate(90deg);
}
}
@keyframes rot2 {
from {
transform: rotate(0deg)
translateY(-200px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-200px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-200px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-200px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-200px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-200px)
rotate(90deg);
}
}
@keyframes rot3 {
from {
transform: rotate(0deg)
translateX(-200px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-200px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-200px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-200px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-200px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-200px)
rotate(90deg);
}
}
@keyframes rot4 {
from {
transform: rotate(0deg)
translateY(200px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(200px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(200px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(200px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(200px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(200px)
rotate(90deg);
}
}
@keyframes rot1u {
from {
transform: rotate(0deg)
translateX(60px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(60px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(60px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(60px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(60px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(60px)
rotate(90deg);
}
}
@keyframes rot2u {
from {
transform: rotate(0deg)
translateY(-60px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-60px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-60px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-60px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-60px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-60px)
rotate(90deg);
}
}
@keyframes rot3u {
from {
transform: rotate(0deg)
translateX(-60px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-60px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-60px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-60px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-60px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-60px)
rotate(90deg);
}
}
@keyframes rot4u {
from {
transform: rotate(0deg)
translateY(60px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(60px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(60px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(60px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(60px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(60px)
rotate(90deg);
}
}
@-webkit-keyframes rot1 {
from {
transform: rotate(0deg)
translateX(200px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(200px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(200px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(200px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(200px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(200px)
rotate(90deg);
}
}
@-webkit-keyframes rot2 {
from {
transform: rotate(0deg)
translateY(-200px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-200px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-200px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-200px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-200px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-200px)
rotate(90deg);
}
}
@-webkit-keyframes rot3 {
from {
transform: rotate(0deg)
translateX(-200px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-200px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-200px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-200px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-200px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-200px)
rotate(90deg);
}
}
@-webkit-keyframes rot4 {
from {
transform: rotate(0deg)
translateY(200px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(200px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(200px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(200px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(200px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(200px)
rotate(90deg);
}
}
@-webkit-keyframes rot1u {
from {
transform: rotate(0deg)
translateX(60px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(60px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(60px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(60px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(60px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(60px)
rotate(90deg);
}
}
@-webkit-keyframes rot2u {
from {
transform: rotate(0deg)
translateY(-60px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-60px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-60px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-60px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-60px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-60px)
rotate(90deg);
}
}
@-webkit-keyframes rot3u {
from {
transform: rotate(0deg)
translateX(-60px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-60px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-60px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-60px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-60px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-60px)
rotate(90deg);
}
}
@-webkit-keyframes rot4u {
from {
transform: rotate(0deg)
translateY(60px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(60px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(60px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(60px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(60px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(60px)
rotate(90deg);
}
}
}
/*** 375px Width ***/
@media only screen and (max-width : 375px) {
.earth, .earth-container {
width: 96px;
height: 96px;
}
.sun-container {
top: -270px;
width: 300px;
height: 300px;
}
.sun {
width: 300px;
height: 300px;
}
.scale {
width:50px;
height:50px;
}
.left {
transform: translateX(-25px);
-webkit-transform: translateX(-25px);
-ms-transform: translateX(-25px);
}
.right {
transform: translateX(25px);
-webkit-transform: translateX(25px);
-ms-transform: translateX(25px);
}
.moon-top {
width:50px;
height:50px;
}
.moon-top-shadow {
transform: translateY(25px);
-webkit-transform: translateY(25px);
-ms-transform: translateY(25px);
}
.moon-container {
top: -40%;
}
.whatyousee {
bottom: 70px;
}
.shadows {
box-shadow: 0px 0px 0px 5px #494A72;
-webkit-box-shadow: 0px 0px 0px 5px #494A72;
-moz-box-shadow: 0px 0px 0px 5px #494A72;
}
.top {
font-size: 8px !important;
}
@keyframes rot1 {
from {
transform: rotate(0deg)
translateX(125px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(125px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(125px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(125px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(125px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(125px)
rotate(90deg);
}
}
@keyframes rot2 {
from {
transform: rotate(0deg)
translateY(-125px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-125px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-125px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-125px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-125px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-125px)
rotate(90deg);
}
}
@keyframes rot3 {
from {
transform: rotate(0deg)
translateX(-125px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-125px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-125px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-125px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-125px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-125px)
rotate(90deg);
}
}
@keyframes rot4 {
from {
transform: rotate(0deg)
translateY(125px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(125px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(125px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(125px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(125px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(125px)
rotate(90deg);
}
}
@keyframes rot1u {
from {
transform: rotate(0deg)
translateX(48px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(48px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(48px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(48px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(48px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(48px)
rotate(90deg);
}
}
@keyframes rot2u {
from {
transform: rotate(0deg)
translateY(-48px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-48px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-48px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-48px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-48px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-48px)
rotate(90deg);
}
}
@keyframes rot3u {
from {
transform: rotate(0deg)
translateX(-48px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-48px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-48px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-48px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-48px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-48px)
rotate(90deg);
}
}
@keyframes rot4u {
from {
transform: rotate(0deg)
translateY(48px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(48px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(48px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(48px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(48px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(48px)
rotate(90deg);
}
}
@-webkit-keyframes rot1 {
from {
transform: rotate(0deg)
translateX(125px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(125px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(125px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(125px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(125px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(125px)
rotate(90deg);
}
}
@-webkit-keyframes rot2 {
from {
transform: rotate(0deg)
translateY(-125px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-125px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-125px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-125px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-125px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-125px)
rotate(90deg);
}
}
@-webkit-keyframes rot3 {
from {
transform: rotate(0deg)
translateX(-125px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-125px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-125px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-125px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-125px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-125px)
rotate(90deg);
}
}
@-webkit-keyframes rot4 {
from {
transform: rotate(0deg)
translateY(125px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(125px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(125px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(125px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(125px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(125px)
rotate(90deg);
}
}
@-webkit-keyframes rot1u {
from {
transform: rotate(0deg)
translateX(48px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(48px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(48px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(48px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(48px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(48px)
rotate(90deg);
}
}
@-webkit-keyframes rot2u {
from {
transform: rotate(0deg)
translateY(-48px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-48px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-48px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-48px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-48px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-48px)
rotate(90deg);
}
}
@-webkit-keyframes rot3u {
from {
transform: rotate(0deg)
translateX(-48px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-48px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-48px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-48px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-48px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-48px)
rotate(90deg);
}
}
@-webkit-keyframes rot4u {
from {
transform: rotate(0deg)
translateY(48px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(48px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(48px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(48px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(48px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(48px)
rotate(90deg);
}
}
}
/*** 320px Width ***/
@media only screen and (max-width : 320px) {
.earth, .earth-container {
width: 84px;
height: 84px;
}
.sun-container {
top: -270px;
width: 300px;
height: 300px;
}
.sun {
width: 300px;
height: 300px;
}
.scale {
width:34px;
height:34px;
}
.left {
transform: translateX(-17px);
-webkit-transform: translateX(-17px);
-ms-transform: translateX(-17px);
}
.right {
transform: translateX(17px);
-webkit-transform: translateX(17px);
-ms-transform: translateX(17px);
}
.moon-top {
width:34px;
height:34px;
}
.moon-top-shadow {
transform: translateY(17px);
-webkit-transform: translateY(17px);
-ms-transform: translateY(17px);
}
.moon-container {
top: -47%;
}
.whatyousee {
bottom: 70px;
}
.shadows {
box-shadow: 0px 0px 0px 5px #494A72;
-webkit-box-shadow: 0px 0px 0px 5px #494A72;
-moz-box-shadow: 0px 0px 0px 5px #494A72;
}
.info_container {
bottom: 25%;
}
@keyframes rot1 {
from {
transform: rotate(0deg)
translateX(100px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(100px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(100px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(100px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(100px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(100px)
rotate(90deg);
}
}
@keyframes rot2 {
from {
transform: rotate(0deg)
translateY(-100px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-100px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-100px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-100px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-100px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-100px)
rotate(90deg);
}
}
@keyframes rot3 {
from {
transform: rotate(0deg)
translateX(-100px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-100px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-100px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-100px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-100px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-100px)
rotate(90deg);
}
}
@keyframes rot4 {
from {
transform: rotate(0deg)
translateY(100px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(100px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(100px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(100px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(100px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(100px)
rotate(90deg);
}
}
@keyframes rot1u {
from {
transform: rotate(0deg)
translateX(42px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(42px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(42px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(42px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(42px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(42px)
rotate(90deg);
}
}
@keyframes rot2u {
from {
transform: rotate(0deg)
translateY(-42px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-42px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-42px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-42px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-42px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-42px)
rotate(90deg);
}
}
@keyframes rot3u {
from {
transform: rotate(0deg)
translateX(-42px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-42px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-42px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-42px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-42px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-42px)
rotate(90deg);
}
}
@keyframes rot4u {
from {
transform: rotate(0deg)
translateY(42px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(42px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(42px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(42px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(42px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(42px)
rotate(90deg);
}
}
@-webkit-keyframes rot1 {
from {
transform: rotate(0deg)
translateX(100px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(100px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(100px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(100px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(100px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(100px)
rotate(90deg);
}
}
@-webkit-keyframes rot2 {
from {
transform: rotate(0deg)
translateY(-100px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-100px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-100px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-100px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-100px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-100px)
rotate(90deg);
}
}
@-webkit-keyframes rot3 {
from {
transform: rotate(0deg)
translateX(-100px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-100px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-100px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-100px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-100px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-100px)
rotate(90deg);
}
}
@-webkit-keyframes rot4 {
from {
transform: rotate(0deg)
translateY(100px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(100px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(100px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(100px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(100px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(100px)
rotate(90deg);
}
}
@-webkit-keyframes rot1u {
from {
transform: rotate(0deg)
translateX(42px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(42px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(42px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(42px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(42px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(42px)
rotate(90deg);
}
}
@-webkit-keyframes rot2u {
from {
transform: rotate(0deg)
translateY(-42px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(-42px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(-42px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(-42px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(-42px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(-42px)
rotate(90deg);
}
}
@-webkit-keyframes rot3u {
from {
transform: rotate(0deg)
translateX(-42px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateX(-42px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateX(-42px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateX(-42px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateX(-42px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateX(-42px)
rotate(90deg);
}
}
@-webkit-keyframes rot4u {
from {
transform: rotate(0deg)
translateY(42px)
rotate(0deg);
-webkit-transform: rotate(0deg)
translateY(42px)
rotate(0deg);
-ms-transform: rotate(0deg)
translateY(42px)
rotate(0deg);
}
to {
transform: rotate(-90deg)
translateY(42px)
rotate(90deg);
-webkit-transform: rotate(-90deg)
translateY(42px)
rotate(90deg);
-ms-transform: rotate(-90deg)
translateY(42px)
rotate(90deg);
}
}
}