html {
	width: 100%;
	height: 100%;
}

body {
	margin: 0;
	height:100%;
}
.container-fluid {
	height: 100%;
}

.row {
	height: 50%;
}

.tile {
	height: 100%;
	cursor: pointer;
	overflow: hidden;
}

.tile:hover {
	opacity: .9;
}

.header {
	width: 280px;
	height: 280px;
	margin: 0 auto;
	display: block;
	border-radius: 50%;
	background-image: url("http://explain.space/img/header2.png");
	background-size: 280px 280px;
	background-image: no-repeat;
	position:fixed;
	left:0; right: 0; top: 35%;
	z-index: 100 !important;
	cursor: pointer;
}

.header p {
	text-align: center;
	color: white;
  	font-family: 'Open Sans', sans-serif;
  	font-weight: 800;
  	font-size: 25px;
  	letter-spacing: 1px;
  	line-height: 1;
	position: relative;
	top: 15%;
}

.title {
	text-align: center;
	color: white;
	font-family: 'Open Sans', sans-serif;
  	font-weight: 800;
  	font-size: 45px;
    position: absolute;
    margin: 0 auto;
    bottom: 30px;
    left: 0;
    right: 0;
}

/* Eclipse Styles */


.eclipses {
	background: #89bcbd;
	background: -moz-linear-gradient(top,  #89bcbd 0%, #d3b48f 50%, #b786a8 100%);
	background: -webkit-linear-gradient(top,  #89bcbd 0%,#d3b48f 50%,#b786a8 100%);
	background: linear-gradient(to bottom,  #89bcbd 0%,#d3b48f 50%,#b786a8 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89bcbd', endColorstr='#b786a8',GradientType=0 );

}

.object {
	background: #E8E8E8;
	display: block;
	border-radius: 50%;
  	position: absolute;
  	margin: auto;
  	top: 0; bottom: 0; right: 0;
  	z-index: 3;
}

.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%);
	z-index: 4;
}

.moon_container {
	display: block;
	height: 75px;
	width: 75px;
	position: absolute;
  	margin: auto;
  	top: 0; bottom: 0; right: 0; left: 370px;
}

.planet {
	left: 0;
  	height: 150px;
  	width: 150px;
  	-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%);
	z-index: 3;	
}

.planet_container {
	display: block;
	height: 150px;
	width: 150px;
	position: absolute;
  	margin: auto;
  	top: 0; bottom: 0; right: 0; left: 0;
}

.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: 2 !important;
	opacity: .3;
}


.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;
	opacity: .2;
}

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


/* Sunsets */

.sunsets {
	background: #9f5a40;
	background: -moz-linear-gradient(top, #9f5a40 0%, #a86334 14%, #896255 34%, #1a2c42 65%, #040605 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, #9f5a40), color-stop(14%, #a86334), color-stop(34%, #896255), color-stop(65%, #1a2c42), color-stop(100%, #040605));
	background: -webkit-linear-gradient(top, #9f5a40 0%, #a86334 14%, #896255 34%, #1a2c42 65%, #040605 100%);
	background: -o-linear-gradient(top, #9f5a40 0%, #a86334 14%, #896255 34%, #1a2c42 65%, #040605 100%);
	background: -ms-linear-gradient(top, #9f5a40 0%, #a86334 14%, #896255 34%, #1a2c42 65%, #040605 100%);
	background: linear-gradient(to bottom, #9f5a40 0%, #a86334 14%, #896255 34%, #1a2c42 65%, #040605 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#9f5a40', endColorstr='#040605', GradientType=0 );
}

.planet_container_sunset {
	width: 100%;
	height:100%;
	position: absolute;
    bottom: 50%;
    z-index: 3;
}

.atmo_container {
	width: 100%;
    position: absolute;
    bottom: 140px;
    z-index: 2;
}

.atmosphere {
	width: 280px;
	height: 280px;
	display: block;
	margin: 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	right:0;
	background: rgba(148,216,248,1);
	background: -moz-radial-gradient(center, ellipse cover, rgba(148,216,248,1) 0%, rgba(96,204,246,1) 52%, rgba(82,201,245,0) 71%);
	background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(148,216,248,1)), color-stop(52%, rgba(96,204,246,1)), color-stop(71%, rgba(82,201,245,0)));
	background: -webkit-radial-gradient(center, ellipse cover, rgba(148,216,248,1) 0%, rgba(96,204,246,1) 52%, rgba(82,201,245,0) 71%);
	background: -o-radial-gradient(center, ellipse cover, rgba(148,216,248,1) 0%, rgba(96,204,246,1) 52%, rgba(82,201,245,0) 71%);
	background: -ms-radial-gradient(center, ellipse cover, rgba(148,216,248,1) 0%, rgba(96,204,246,1) 52%, rgba(82,201,245,0) 71%);
	background: radial-gradient(ellipse at center, rgba(148,216,248,1) 0%, rgba(96,204,246,1) 52%, rgba(82,201,245,0) 71%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#94d8f8', endColorstr='#52c9f5', GradientType=1 );
	opacity: .6;
}

.orbit_sunset {
	width: 280px;
	height: 280px;
	margin: 0 auto;
	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;
    opacity: .2;
}

.earth_container{
	width: 100%;
    position: absolute;
    bottom: -140px;
    z-index: 5;
}

.earth {
	width: 200px;
	height: 200px;
	margin: 0 auto;
	display: block;
	border-radius: 50%;
	position: absolute;
	top: 40px;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: -ms-radial-gradient(top center, circle farthest-corner, #73afa9 50%, #383636 65%);
	background-image: -moz-radial-gradient(top center, circle farthest-corner, #73afa9 50%, #383636 65%);
	background-image: -o-radial-gradient(top center, circle farthest-corner, #73afa9 50%, #383636 65%); 
	background-image: -webkit-gradient(radial, top center, 0, top center, 530, color-stop(10, #73afa9), color-stop(40, #383636));
	background-image: -webkit-radial-gradient(top center, circle farthest-corner, #73afa9 50%, #383636 65%);
	background-image: radial-gradient(circle farthest-corner at top center, #73afa9 50%, #383636 65%);
}

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

.sun_container {
	width: 75px;
    height: 75px;
    margin: 0 auto;
    position: absolute;
    top: 25%;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    cursor: pointer;
}

.sun {
	width: 74px;
	height: 74px;
	display: block;
	border-radius: 50%;
	background: #FFFFEA;
	-webkit-box-shadow: 0px 0px 0px 3px #ffffff;
  	-moz-box-shadow: 0px 0px 0px 3px #ffffff;
  	box-shadow: 0px 0px 0px 3px #ffffff;
  	position: absolute;
  	margin: 0 auto;
	cursor: pointer;
}


/* Phases Styles */

.phases {
	background-image: -ms-linear-gradient(top, #C6FCFE 0%, #E1B283 100%);
	background-image: -moz-linear-gradient(top, #C6FCFE 0%, #E1B283 100%);
	background-image: -o-linear-gradient(top, #C6FCFE 0%, #E1B283 100%);
	background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #C6FCFE), color-stop(100, #E1B283));
	background-image: -webkit-linear-gradient(top, #C6FCFE 0%, #E1B283 100%);
	background-image: linear-gradient(to bottom, #C6FCFE 0%, #E1B283 100%);
}

.earth-container-p {
	width: 160px;
	height: 160px;
	display: block;
  	position: absolute;
  	margin: auto;
  	top: -15%; bottom: 0; right: 0; left: 0;
}

.earth-p {
	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;
}

.moon-top {
	width: 60px;
	height: 60px;
	background-color: #FFFFFF;
	display: block;
  	position: absolute;
  	margin: auto;
  	top: 300px; 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;
    z-index: 10;
}

.moon-top-shadow {
	width: 100%;
	height: 100%;
	background-color: #2f315b;
	transform: translateY(30px);
}


/* Responsive Styles */


@media (max-width: 1366px) {
  .header {
	  width: 180px;
	  height: 180px;
	  background-size: 180px 180px;
	  background-image: no-repeat;
  }
  .header p {
	  font-size: 20px;
	  top:10%;
  }
  .title {
	  font-size: 35px;
  }
  
  .planet_container_sunset {
      bottom: 45%;
  }
  .earth_container {
	  bottom: -30px;
  }
  .earth {
	  width: 120px;
	  height: 120px;
	  top: 15px;
  }
  .orbit_sunset, .atmosphere{
	  width: 160px;
	  height: 160px;
  }
  .sun_container {
	  top: 15%;
  }
  .planet, .planet_container{
	  width: 100px;
	  height: 100px;
  }
  .moon_container, .moon {
	  width: 40px;
	  height: 40px;
  }
  .planet_orbit {
	  -ms-transform: scale(1.5, 1.5);
	-webkit-transform: scale(1.5, 1.5);
	transform: scale(1.5, 1.5);
  }
  .earth-container-p, .earth-p {
	  width: 80px;
	  height: 80px;
  }
  .moon-top {
	  width: 30px;
	  height: 30px;
	  top: 160px;
  }
  .moon-top-shadow {
	  transform: translateY(15px);
  }
}



@media (max-width: 991px) {
  .header {
	width: 80px;
	height: 80px;
	background-image: url("http://explain.space/img/header.png");
	background-size: 80px 80px;
	background-image: no-repeat;
	top: 5%;
	right: 15%;
  }
  .header p {
  	top: -10%;
    left: 90px;
  }
  .row {
		height: 100%;
  }	
}

@media (max-width: 375px) {
	.header {
		right: 35%;
	}
	.moon_container {
		left: 250px;
		height: 40px;
		width: 40px;	
	}
	.moon {
		height: 40px;
		width: 40px;	
	}
	.planet_container {
		height: 100px;
		width: 100px;
	}
	.planet {
		height: 100px;
		width: 100px;
	}
	.planet_orbit {
		-ms-transform: scale(1.3,1.3);
		-webkit-transform: scale(1.3,1.3);
		transform: scale(1.3,1.3);
	}
	.title {
		font-size: 35px;
	}
}