#landscape{
	position: absolute;
	bottom: 0;
	display: block;
	width: 100%;
	height: 500px;
	overflow: hidden;
	background: #193348;
	margin-top: 45px;
	z-index: -1;
}
#landscape .sky{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: transparent;
	z-index: 1;
	background: #0D47A1;
}
#landscape .layer{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	transition: all 2s linear;
}
#landscape .ground .layer{
	transition: all 3.5s linear;
}
.layer[hide]{
	opacity: 0;
}
#landscape .sky .dawn_start{
	background: linear-gradient(to bottom, #51b2ff 15%,rgb(255, 214, 93) 50%, #FF9800 100%);
}
#landscape .sky .dawn{
	background: linear-gradient(to bottom, #51b2ff 15%,rgb(255, 225, 133) 50%, #FF9800 100%);
}
#landscape .sky .morning{
	background: linear-gradient(to bottom, #51b2ff 15%,rgba(255, 246, 165, 1) 50%, #FF9800 100%);
}
#landscape .sky .noon_start{
	background: linear-gradient(to bottom, #51b2ff 15%,rgb(255, 253, 232) 50%, #FF9800 100%);
}
#landscape .sky .noon{
	background: linear-gradient(to bottom, #51b2ff 0%,rgb(255, 255, 255) 50%, #FF9800 100%);
}
#landscape .sky .eve_start{
	background: linear-gradient(to bottom, #51b2ff 0%,rgb(255, 208, 151) 50%, rgb(255, 255, 255) 100%);
}
#landscape .sky .eve{
	background: linear-gradient(to bottom, #3F51B5 0%,rgb(255, 173, 71) 50%, rgb(255, 255, 255) 100%);
}
#landscape .sky .night_start{
	background:linear-gradient(to bottom, #673AB7 0%,rgb(255, 120, 78) 50%, rgb(255, 255, 255) 100%);
}
#landscape .sky .night{
	background:linear-gradient(to bottom, #0a1c38 0%,#163058 50%, rgb(255, 207, 61) 100%);
}

#landscape .ground{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 4;
}
#landscape .ground .layer.noon{
	background: url('../img/footer/noon.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	opacity: 1 !important;
	z-index: 1;
}
#landscape .ground .layer.mid{
	background: url('../img/footer/mid.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 2;
}
#landscape .ground .layer.night{
	background: url('../img/footer/night.png');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 3;
}
#landscape .sun_mask{
	position: relative;
	top: 152px;
	left: 50%;
	margin-left: -20%;
	width: 50%;
	height: 300px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.21);
	box-shadow: 1px 1px 30px 80px rgba(255, 255, 255, 0.21);
	z-index: 2;
	display: none;
}
#landscape .hinge{
	position: absolute;
	left: 50%;
	margin-left: -4px;
	bottom: 0;
	width: 1px;
	background: transparent;
	min-height: 80%;
	animation-name: rotate;
	animation-duration: 60s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	z-index: 3;
}
@keyframes rotate {
		from{
			transform: rotate(360deg);
		}
		to{
			transform: rotate(0deg);
		}
}
#landscape .hinge .sun{
	position: absolute;
	top: 0;
	left: -30px;
	width: 65px;
	height: 65px;
	border-radius: 50%;
	background: radial-gradient(circle, rgb(255, 255, 255) 25%,rgb(255, 255, 255) 50%, rgb(255, 255, 255) 100%);
	box-shadow: 0px 0px 225px 70px rgba(255, 255, 255, 0);
}
#landscape .sun .glow{
	position: absolute;
	top: 0;
	left: 0;
	width: 65px;
	height: 65px;
	border-radius: 50%;
	background: 0;
	animation-name: glow;
	animation-duration: 5s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
	animation-direction: alternate-reverse;
	box-shadow:0px 0px 100px 30px #fff;
}
@keyframes glow {
	from{
		box-shadow:0px 0px 100px 30px #fff;
	}
	to{
		box-shadow:0px 0px 200px 70px #fff;
	}
}
#landscape .sun .sun_rays{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 1px;
  background: 0;
}
#landscape .sun_rays .ray{
  position: absolute;
  top: 0;
  left:-5px;
  background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%, rgba(255, 255, 255, 0) 100%);
  width: 1px;
  transform-origin: top;
}
#landscape .sun_rays .ray.small{
  height:80px;
  width: 8px;
}
#landscape .sun_rays .ray.med{
  width: 2px;
  height: 110px;
}
#landscape .sun_rays .large{
  width: 1px;
  height: 140px;
}
#landscape .hinge .moon{
	position: absolute;
	bottom: 0;
	left: 120px;
	width: 65px;
	height: 65px;
	border-radius: 50%;
	background: #000;
	transition: all 1s ease-out;
	opacity: 0;
}

/*stars*/
@keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-webkit-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-moz-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}
@-ms-keyframes move-twink-back {
    from {background-position:0 0;}
    to {background-position:-10000px 5000px;}
}

@keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-webkit-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-moz-keyframes move-clouds-back {
    from {background-position:0 0;}
    to {background-position:10000px 0;}
}
@-ms-keyframes move-clouds-back {
    from {background-position: 0;}
    to {background-position:10000px 0;}
}

.stars, .twinkling, .clouds {
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  width:100%;
  height:100%;
  display:block;
}
.stars {
  background: rgba(0, 0, 0, 0) url(https://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
  z-index:0;
	transform: rotate(90deg);
}
.night_wrap{
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	transition: all 0.5s ease-out;
	animation-name: rotate;
	animation-duration: 100s;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}
.night_wrap[hide]{
	opacity: 0;
}
.moon[hide]{
	opacity: 0;
}