/* Eclipses */

html {
	background-size: cover;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	overflow: hidden;
	background-color: #35D5B0;
	background-image: -ms-linear-gradient(top, #35D5B0 0%, #ACBF95 50%, #44736E 100%);
	background-image: -moz-linear-gradient(top, #35D5B0 0%, #ACBF95 50%, #44736E 100%);
	background-image: -o-linear-gradient(top, #35D5B0 0%, #ACBF95 50%, #44736E 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #35D5B0), color-stop(50, #ACBF95), color-stop(100, #44736E));
	background-image: -webkit-linear-gradient(top, #35D5B0 0%, #ACBF95 50%, #44736E 100%);
	background-image: linear-gradient(to bottom, #35D5B0 0%, #ACBF95 50%, #44736E 100%);
}

body {
	margin: 0;
	height: 100%;
}

.container {
	width: 100%;
	height: 100%;
	margin: 0 auto;
	position: absolute;
	overflow: hidden;
}


nav button {
	width: 50%;
}

.object {
	display: block;
	border-radius: 50%;
  	position: absolute;
  	margin: auto;
  	top: 0; bottom: 0; right: 0;
}

.moon {
  	left: 0;
  	height: 75px;
  	width: 75px;
  	-webkit-box-shadow: 0px 0px 0px 5px #e7e7ea;
  	-moz-box-shadow: 0px 0px 0px 5px #e7e7ea;
  	box-shadow: 0px 0px 0px 5px #e7e7ea;
	background-image: -ms-radial-gradient(right center, circle farthest-corner, #D59B8D 20%, #4F7367 100%);
	background-image: -moz-radial-gradient(right center, circle farthest-corner, #D59B8D 20%, #4F7367 100%);
	background-image: -o-radial-gradient(right center, circle farthest-corner, #D59B8D 20%, #4F7367 100%);
	background-image: -webkit-gradient(radial, right center, 0, right center, 530, color-stop(20, #D59B8D), color-stop(100, #4F7367));
	background-image: -webkit-radial-gradient(right center, circle farthest-corner, #D59B8D 20%, #4F7367 100%);
	background-image: radial-gradient(circle farthest-corner at right center, #D59B8D 20%, #4F7367 100%);
}

.moon_container {
	display: block;
	height: 75px;
	width: 75px;
	position: absolute;
  	margin: auto;
  	top: 0; bottom: 0; right: 0; left: 0;
  	-webkit-animation: rot2 2s ease-in-out;
  	animation: rot2 2s ease-in-out;
  	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.moon_container.revolve {
	-webkit-animation: rot1 2s ease-in-out;
	animation: rot1 2s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.planet {
	left: 0;
  	height: 200px;
  	width: 200px;
  	-webkit-box-shadow: 0px 0px 0px 5px #8cd4c7;
  	-moz-box-shadow: 0px 0px 0px 5px #8cd4c7;
  	box-shadow: 0px 0px 0px 5px #8cd4c7;
	background-image: -ms-radial-gradient(right center, circle farthest-corner, #BF374B 20%, #062438 100%);
	background-image: -moz-radial-gradient(right center, circle farthest-corner, #BF374B 20%, #062438 100%);
	background-image: -o-radial-gradient(right center, circle farthest-corner, #BF374B 20%, #062438 100%);
	background-image: -webkit-gradient(radial, right center, 0, right center, 530, color-stop(20, #BF374B), color-stop(100, #062438));
	background-image: -webkit-radial-gradient(right center, circle farthest-corner, #BF374B 20%, #062438 100%);
	background-image: radial-gradient(circle farthest-corner at right center, #BF374B 20%, #062438 100%);
	
}

.trav1 {
	display: block;
  	position: absolute;
  	margin: auto;
  	top: 0; bottom: 0; right: 0; left: 0;
	height: 10px;
	width: 10px;
	-webkit-animation: traverse1 2s ease-in-out;
	animation: traverse1 2s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.trav2 {
	-webkit-animation: traverse2 2s ease-in-out;
	animation: traverse2 2s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.here {
	width: 14px;
	height: 20px;
	display: inline-block;
	background-size: 14px 20px;
	background-image: url('img/u.svg');
  	position: absolute;
  	margin: auto;
  	top: 0; bottom: 15px; right: 0; left: 0;
  	-webkit-animation: throb 3s ease-in-out infinite;
	animation: throb 3s ease-in-out infinite;
}

.youarehere {
	display: block;
  	position: absolute;
  	margin: auto;
  	width: 80px;
    text-align: center;
  	top: 0px; bottom: 0; right: 0; left: -32px;
  	color: white;
  	font-family: 'Open Sans', sans-serif;
  	font-size: 10px;
  	letter-spacing: 1px;
  	animation: fade 2s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.star {
	left: 80%;
	height: 400px;
	width: 400px;
}


.shadow {
	height: 100%;
	width: 400%;
	background: linear-gradient(to right, rgba(43,43,43,0) 0%, rgba(0,0,0,1) 100%);
	position: absolute;
	right: 65%;
	z-index: -1 !important;
	opacity: .3;
}

.tilt1 {
	-ms-transform-origin: right;
	-webkit-transform-origin: right;
	transform-origin: right;
	-webkit-animation: tilt1 2s ease-in-out;
	animation: tilt1 2s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.tilt2 {
	-ms-transform-origin: right;
	-webkit-transform-origin: right;
	transform-origin: right;
	-webkit-animation: tilt1 2s ease-in-out;
	animation: tilt1 2s ease-in-out;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
}

.orbit {
	display: block;
	border-radius: 50%;
	-webkit-box-shadow:  0px 0px 0px .1px #ffffff;
	-moz-box-shadow:  0px 0px 0px .1px #ffffff;
	box-shadow: 0px 0px 0px .1px #ffffff;
	height: 100%;
	width: 100%;
	position: relative;
	z-index: -2;
}

.star_orbit {
	-ms-transform: scale(2.8,2.8);
	-webkit-transform: scale(2.8,2.8);
	transform: scale(2.8,2.8);
}

.planet_orbit {
	-ms-transform: scale(2.5,2.5);
	-webkit-transform: scale(2.5,2.5);
	transform: scale(2.5,2.5);
}


.question_container {
	background: #bf374b;
	background: -moz-linear-gradient(top, #bf374b 0%, #545c80 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, #bf374b), color-stop(100%, #545c80));
	background: -webkit-linear-gradient(top, #bf374b 0%, #545c80 100%);
	background: -o-linear-gradient(top, #bf374b 0%, #545c80 100%);
	background: -ms-linear-gradient(top, #bf374b 0%, #545c80 100%);
	background: linear-gradient(to bottom, #bf374b 0%, #545c80 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bf374b', endColorstr='#545c80', GradientType=0 );
}

.footer {
	position: absolute;
    bottom: 75px;
    left: 0;
    right: 0;
    top: 0;
    margin: 0 auto;
    color: white;
    font-family: 'Open Sans', sans-serif;
    font-size: 10px;
    letter-spacing: 1px;
    opacity: .4;
    text-align: center;
}

.footer a{
	text-decoration: underline;
	color: white;
}

.footer a:hover {
	text-decoration: none;
	opacity: .2;
	transition: opacity .5s;
}

/***** Animation *****/

@keyframes rot1 {
	from {
		transform: rotate(0deg)
		           translate(-250px)
		           rotate(0deg);
		z-index: -3;
	}
	to {
		transform: rotate(180deg)
		           translate(-250px) 
		           rotate(-180deg);
		z-index: 0;
	}
}

@keyframes rot2 {
	from {
		transform: rotate(0deg)
		           translate(250px)
		           rotate(0deg);
		z-index: 0;		           
	}
	to {
		transform: rotate(180deg)
		           translate(250px) 
		           rotate(-180deg);
		z-index: -3;
	}
}

@keyframes throb {
	0% {
		transform: scale(1,1);
	}
	50% {
    	transform: scale(1.2,1.2);	
	}
    100% {
    	transform: scale(1,1);
    }
}

@keyframes traverse1 {
	from {
		transform: translateX(105px);
	}
    to {
    	transform: translateX(-105px);
    }
}

@keyframes traverse2 {
	from {
		transform: translateX(-105px);
	}
    to {
    	transform: translateX(105px);
    }
}

@keyframes tilt2 {
	0% {
		transform: rotate(0deg);
	}
	73% {
		transform: rotate(18deg);
	}
    100% {
		transform: rotate(0deg);
    }
}

@keyframes tilt1 {
	0% {
		transform: rotate(0deg);
	}
	37% {
		transform: rotate(-18deg);
	}
    100% {
		transform: rotate(0deg);
    }
}
/*

@keyframes fade {
	0%{
		opacity: 0;
	}
	50%{
		opacity: 1;
	}
	0%{
		opacity: 0;
	}
}
*/

/***** Moz Animation *****/

@-moz-keyframes rot1 {
	from {
		-moz-transform: rotate(0deg)
		           translate(-250px)
		           rotate(0deg);
		z-index: -3;
	}
	to {
		-moz-transform: rotate(180deg)
		           translate(-250px) 
		           rotate(-180deg);
		z-index: 0;
	}
}

@-moz-keyframes rot2 {
	from {
		-moz-transform: rotate(0deg)
		           translate(250px)
		           rotate(0deg);
		z-index: 0;		           
	}
	to {
		-moz-transform: rotate(180deg)
		           translate(250px) 
		           rotate(-180deg);
		z-index: -3;
	}
}

@-moz-keyframes throb {
	0% {
		-moz-transform: scale(1,1);
	}
	50% {
    	-moz-transform: scale(1.2,1.2);	
	}
    100% {
    	-moz-transform: scale(1,1);
    }
}

@-moz-keyframes traverse1 {
	from {
		-moz-transform: translateX(105px);
	}
    to {
    	-moz-transform: translateX(-105px);
    }
}

@-moz-keyframes traverse2 {
	from {
		-moz-transform: translateX(-105px);
	}
    to {
    	-moz-transform: translateX(105px);
    }
}

@-moz-keyframes tilt2 {
	0% {
		-moz-transform: rotate(0deg);
	}
	73% {
		-moz-transform: rotate(18deg);
	}
    100% {
		-moz-transform: rotate(0deg);
    }
}

@-moz-keyframes tilt1 {
	0% {
		-moz-transform: rotate(0deg);
	}
	37% {
		-moz-transform: rotate(-18deg);
	}
    100% {
		-moz-transform: rotate(0deg);
    }
}


/***** MS Animation *****/

@-ms-keyframes rot1 {
	from {
		-ms-transform: rotate(0deg)
		           translate(-250px)
		           rotate(0deg);
		z-index: -3;
	}
	to {
		-ms-transform: rotate(180deg)
		           translate(-250px) 
		           rotate(-180deg);
		z-index: 0;
	}
}

@-ms-keyframes rot2 {
	from {
		-ms-transform: rotate(0deg)
		           translate(250px)
		           rotate(0deg);
		z-index: 0;		           
	}
	to {
		-ms-transform: rotate(180deg)
		           translate(250px) 
		           rotate(-180deg);
		z-index: -3;
	}
}


@-ms-keyframes throb {
	0% {
		-ms-transform: scale(1,1);
	}
	50% {
    	-ms-transform: scale(1.2,1.2);		
	}
    100% {
    	-ms-transform: scale(1,1);
    }
}

@-ms-keyframes traverse1 {
	from {
		-ms-transform: translateX(105px);
	}
    to {
    	-ms-transform: translateX(-105px);
    }
}

@-ms-keyframes traverse2 {
	from {
		-ms-transform: translateX(-105px);
	}
    to {
    	-ms-transform: translateX(105px);
    }
}

@-ms-keyframes tilt2 {
	0% {
		-ms-transform: rotate(0deg);
	}
	73% {
		-ms-transform: rotate(18deg);
	}
    100% {
		-ms-transform: rotate(0deg);
    }
}

@-ms-keyframes tilt1 {
	0% {
		-ms-transform: rotate(0deg);
	}
	37% {
		-ms-transform: rotate(-18deg);
	}
    100% {
		-ms-transform: rotate(0deg);
    }
}


/***** Webkit Animation *****/

@-webkit-keyframes rot1 {
	from {
		-webkit-transform: rotate(0deg)
		           translate(-250px)
		           rotate(0deg);
		z-index: -3;
	}
	to {
		-webkit-transform: rotate(180deg)
		           translate(-250px) 
		           rotate(-180deg);
		z-index: 0;
	}
}

@-webkit-keyframes rot2 {
	from {
		-webkit-transform: rotate(0deg)
		           translate(250px)
		           rotate(0deg);
		z-index: 0;		           
	}
	to {
		-webkit-transform: rotate(180deg)
		           translate(250px) 
		           rotate(-180deg);
		z-index: -3;
	}
}

@-webkit-keyframes throb {
	0% {
		-webkit-transform: scale(1,1);
	}
	50% {
    	-webkit-transform: scale(1.2,1.2);		
	}
    100% {
    	-webkit-transform: scale(1,1);
    }
}

@-webkit-keyframes traverse1 {
	from {
		-webkit-transform: translateX(105px);
	}
    to {
    	-webkit-transform: translateX(-105px);
    }
}

@-webkit-keyframes traverse2 {
	from {
		-webkit-transform: translateX(-105px);
	}
    to {
    	-webkit-transform: translateX(105px);
    }
}

@-webkit-keyframes tilt2 {
	0% {
		-webkit-transform: rotate(0deg);
	}
	73% {
		-webkit-transform: rotate(18deg);
	}
    100% {
		-webkit-transform: rotate(0deg);
    }
}

@-webkit-keyframes tilt1 {
	0% {
		-webkit-transform: rotate(0deg);
	}
	37% {
		-webkit-transform: rotate(-18deg);
	}
    100% {
		-webkit-transform: rotate(0deg);
    }
}


/***** Responzive Styles *****/

	/* Question Positioning */
	
	 @media only screen and (min-width : 420px) {
	}
	 
	 @media only screen and (min-width : 769px) {

	}


    /* Small Devices, Tablets */
    @media only screen and (max-width : 768px) {
		@keyframes rot1 {
		from {
			transform: rotate(0deg)
			           translate(-150px)
			           rotate(0deg);
		}
		to {
			transform: rotate(180deg)
			           translate(-150px) 
			           rotate(-180deg);
		}
	}
	
		@keyframes rot2 {
		from {
			transform: rotate(0deg)
			           translate(150px)
			           rotate(0deg);
		}
		to {
			transform: rotate(180deg)
			           translate(150px) 
			           rotate(-180deg);
		}
	}
		@-webkit-keyframes rot1 {
		from {
			-webkit-transform: rotate(0deg)
			           translate(-150px)
			           rotate(0deg);
		}
		to {
			-webkit-transform: rotate(180deg)
			           translate(-150px) 
			           rotate(-180deg);
		}
	}
	
		@-webkit-keyframes rot2 {
		from {
			-webkit-transform: rotate(0deg)
			           translate(150px)
			           rotate(0deg);
		}
		to {
			-webkit-transform: rotate(180deg)
			           translate(150px) 
			           rotate(-180deg);
		}
	}
		@-moz-keyframes rot1 {
		from {
			-moz-transform: rotate(0deg)
			           translate(-150px)
			           rotate(0deg);
		}
		to {
			-moz-transform: rotate(180deg)
			           translate(-150px) 
			           rotate(-180deg);
		}
	}
	
		@-moz-keyframes rot2 {
		from {
			-moz-transform: rotate(0deg)
			           translate(150px)
			           rotate(0deg);
		}
		to {
			-moz-transform: rotate(180deg)
			           translate(150px) 
			           rotate(-180deg);
		}
	}
		@-ms-keyframes rot1 {
		from {
			-ms-transform: rotate(0deg)
			           translate(-150px)
			           rotate(0deg);
		}
		to {
			-ms-transform: rotate(180deg)
			           translate(-150px) 
			           rotate(-180deg);
		}
	}
	
		@-ms-keyframes rot2 {
		from {
			-ms-transform: rotate(0deg)
			           translate(150px)
			           rotate(0deg);
		}
		to {
			-ms-transform: rotate(180deg)
			           translate(150px) 
			           rotate(-180deg);
		}
	}
		@keyframes traverse1 {
		from {
			transform: translateX(64px);
		}
	    to {
	    	transform: translateX(-64px);
	    }
	}
	
		@keyframes traverse2 {
		from {
			transform: translateX(-64px);
		}
	    to {
	    	transform: translateX(60px);
	    }
	}
		@-webkit-keyframes traverse1 {
		from {
			-webkit-transform: translateX(64px);
		}
	    to {
	    	-webkit-transform: translateX(-64px);
	    }
	}
	
		@-webkit-keyframes traverse2 {
		from {
			-webkit-transform: translateX(-64px);
		}
	    to {
	    	-webkit-transform: translateX(60px);
	    }
	}    
		@-moz-keyframes traverse1 {
		from {
			-moz-transform: translateX(64px);
		}
	    to {
	    	-moz-transform: translateX(-64px);
	    }
	}
	
		@-moz-keyframes traverse2 {
		from {
			-moz-transform: translateX(-64px);
		}
	    to {
	    	-moz-transform: translateX(60px);
	    }
	}    
		@-ms-keyframes traverse1 {
		from {
			-ms-transform: translateX(64px);
		}
	    to {
	    	-ms-transform: translateX(-64px);
	    }
	}
	
		@-ms-keyframes traverse2 {
		from {
			-ms-transform: translateX(-64px);
		}
	    to {
	    	-ms-transform: translateX(60px);
	    }
	}    
    
    
	.star {
		left: 85%;
		height: 300px;
		width: 300px;
	}
    .moon {
	  	left: 0;
	  	height: 45px;
	  	width: 45px;
	  	-webkit-box-shadow: 0px 0px 0px 3px #e7e7ea;
	  	-moz-box-shadow: 0px 0px 0px 3px #e7e7ea;
	  	box-shadow: 0px 0px 0px 3px #e7e7ea;
	}
	.moon_container {
		height: 45px;
		width: 45px;
	}
	.planet {
		left: 0;
	  	height: 120px;
	  	width: 120px;
	  	-webkit-box-shadow: 0px 0px 0px 3px #8cd4c7;
	  	-moz-box-shadow: 0px 0px 0px 3px #8cd4c7;
	  	box-shadow: 0px 0px 0px 3px #8cd4c7;
  	}
  	.here {
		width: 10px;
		height: 14px;
		background-size: 10px 14px;
	}
	.youarehere{
		top: -5px;
	} 

} /* close 768 */

    /* Extra Small Devices, Phones */ 
    @media only screen and (max-width : 480px) {
		@keyframes rot1 {
		from {
			transform: rotate(0deg)
			           translate(-80px)
			           rotate(0deg);
		}
		to {
			transform: rotate(180deg)
			           translate(-80px) 
			           rotate(-180deg);
		}
	}
	
		@keyframes rot2 {
		from {
			transform: rotate(0deg)
			           translate(80px)
			           rotate(0deg);
		}
		to {
			transform: rotate(180deg)
			           translate(80px) 
			           rotate(-180deg);
		}
	}
		@-webkit-keyframes rot1 {
		from {
			-webkit-transform: rotate(0deg)
			           translate(-80px)
			           rotate(0deg);
		}
		to {
			-webkit-transform: rotate(180deg)
			           translate(-80px) 
			           rotate(-180deg);
		}
	}
	
		@-webkit-keyframes rot2 {
		from {
			-webkit-transform: rotate(0deg)
			           translate(80px)
			           rotate(0deg);
		}
		to {
			-webkit-transform: rotate(180deg)
			           translate(80px) 
			           rotate(-180deg);
		}
	}
		@-moz-keyframes rot1 {
		from {
			-moz-transform: rotate(0deg)
			           translate(-80px)
			           rotate(0deg);
		}
		to {
			-moz-transform: rotate(180deg)
			           translate(-80px) 
			           rotate(-180deg);
		}
	}
	
		@-moz-keyframes rot2 {
		from {
			-moz-transform: rotate(0deg)
			           translate(80px)
			           rotate(0deg);
		}
		to {
			-moz-transform: rotate(180deg)
			           translate(80px) 
			           rotate(-180deg);
		}
	}
		@-ms-keyframes rot1 {
		from {
			-ms-transform: rotate(0deg)
			           translate(-80px)
			           rotate(0deg);
		}
		to {
			-ms-transform: rotate(180deg)
			           translate(-80px) 
			           rotate(-180deg);
		}
	}
	
		@-ms-keyframes rot2 {
		from {
			-ms-transform: rotate(0deg)
			           translate(80px)
			           rotate(0deg);
		}
		to {
			-ms-transform: rotate(180deg)
			           translate(80px) 
			           rotate(-180deg);
		}
	}
		@keyframes traverse1 {
		from {
			transform: translateX(32px);
		}
	    to {
	    	transform: translateX(-32px);
	    }
	}
	
		@keyframes traverse2 {
		from {
			transform: translateX(-32px);
		}
	    to {
	    	transform: translateX(30px);
	    }
	}
		@-webkit-keyframes traverse1 {
		from {
			-webkit-transform: translateX(32px);
		}
	    to {
	    	-webkit-transform: translateX(-32px);
	    }
	}
	
		@-webkit-keyframes traverse2 {
		from {
			-webkit-transform: translateX(-32px);
		}
	    to {
	    	-webkit-transform: translateX(30px);
	    }
	}    
		@-moz-keyframes traverse1 {
		from {
			-moz-transform: translateX(32px);
		}
	    to {
	    	-moz-transform: translateX(-32px);
	    }
	}
	
		@-moz-keyframes traverse2 {
		from {
			-moz-transform: translateX(-32px);
		}
	    to {
	    	-moz-transform: translateX(30px);
	    }
	}    
		@-ms-keyframes traverse1 {
		from {
			-ms-transform: translateX(32px);
		}
	    to {
	    	-ms-transform: translateX(-32px);
	    }
	}
	
		@-ms-keyframes traverse2 {
		from {
			-ms-transform: translateX(-32px);
		}
	    to {
	    	-ms-transform: translateX(30px);
	    }
	}    
    
	.star {
		left: 85%;
		height: 200px;
		width: 200px;
	}
    .moon {
	  	left: 0;
	  	height: 35px;
	  	width: 35px;
	  	-webkit-box-shadow: 0px 0px 0px 2px #e7e7ea;
	  	-moz-box-shadow: 0px 0px 0px 2px #e7e7ea;
	  	box-shadow: 0px 0px 0px 2px #e7e7ea;
	}
	.moon_container {
		height: 35px;
		width: 35px;
	}
	.planet {
		left: 0;
	  	height: 60px;
	  	width: 60px;
	  	-webkit-box-shadow: 0px 0px 0px 2px #8cd4c7;
	  	-moz-box-shadow: 0px 0px 0px 2px #8cd4c7;
	  	box-shadow: 0px 0px 0px 2px #8cd4c7;
  	}

} /* close 480px */

    /* Custom, iPhone Retina */ 
    @media only screen and (max-width : 320px) {

}