/*Theme Name: 404 Day and Night AnimationAuthor: HTMLBEANSAuthor URI:Version: 1Description: 404 ThemeLicense: GNU General Public License v2 or laterText Domain: baseTags: one-column, two-columnsTheme URI:*//*------------------------------------------------------------------1. Body2. Wrapper / #wrapper3. Blue Sky / #mt-bluesky4. Sun / #mt-sun5. Night Sun / #mt-sun26. Clouds / #mt-cloud7. Earth / #mt-base8. Night / #night9. Stars / #stars10. Moon / #moon11. Pahe Title / #title12. Hock / #hock13. Oh / #oh14. Text / .txt15. Responsive Start-------------------------------------------------------------------*/html{background: #8ab407;}/* html{background: #1c2401;} *//*------------------------------------------------------------------        1. Body-------------------------------------------------------------------*/body{margin: 0;}/*------------------------------------------------------------------        2. Wrapper / #wrapper-------------------------------------------------------------------*/#wrapper{	height: 969px;	overflow: hidden;	min-height: 969px;	position: relative;}#mt-cloud,#mt-bluesky,#night,#stars{	top:0px;	left:0px;	right:0px;	bottom:0px;	width:100%;	position:absolute;}/*------------------------------------------------------------------        3. Blue Sky / #mt-bluesky-------------------------------------------------------------------*/#mt-bluesky{	z-index:1;	background:#fff url(../image/sky.png) repeat-x top left;}/*------------------------------------------------------------------        4. Sun / #mt-sun-------------------------------------------------------------------*/#mt-sun{	top:50%;	left:45%;	z-index:2;	width:150px;	height:152px;	position:absolute;	background:transparent url(../image/sun.png) no-repeat center center;}/*------------------------------------------------------------------        5. Night Sun / #mt-sun2-------------------------------------------------------------------*/#mt-sun2{	top:50%;	left:45%;	z-index:2;	opacity:0;	width:150px;	height:152px;	position:absolute;	background:transparent url(../image/sun2.png) no-repeat center center;}/*------------------------------------------------------------------        6. Clouds / #mt-cloud-------------------------------------------------------------------*/#mt-cloud{	z-index:3;	background:transparent url(../image/clouds.png) repeat-x top left;}/*------------------------------------------------------------------        7. Earth / #mt-base-------------------------------------------------------------------*/#mt-base{	position:absolute;	left:0px;	right:0px;	bottom:0px;	width:100%;	height:232px;	background:transparent url(../image/ground.png) repeat-x bottom center;	z-index:3;}#base-overlay{	position:absolute;	left:0px;	right:0px;	bottom:0px;	width:100%;	height:232px;	opacity: 0;	background:transparent url(../image/night-glow.png) repeat-x bottom center;	z-index:7;}/*------------------------------------------------------------------        8. Night / #night-------------------------------------------------------------------*/#night{	z-index:4;	opacity:0;	background-color:#000;}/*------------------------------------------------------------------        9. Stars / #stars-------------------------------------------------------------------*/#stars{	z-index:5;	opacity:0;	bottom:200px;	background:transparent url(../image/stars.png) repeat-x bottom center;}#sstar{	top:10%;	left:40%;	z-index:5;	opacity:0;	width:126px;	height:80px;	position:absolute;	background:transparent url(../image/shootingstar.png) no-repeat 80px -200px;}/*------------------------------------------------------------------        10. Moon / #moon-------------------------------------------------------------------*/#moon{	top:60%;	left:45%;	z-index:6;	opacity:0;	width:292px;	height:292px;	position:absolute;	background:transparent url(../image/moon.png) no-repeat center center;}/*------------------------------------------------------------------        11. Pahe Title / #title-------------------------------------------------------------------*/#title{	top:80%;	z-index:6;	opacity:0;	left: 45%;	color: #fff;	width: 292px;	position:absolute;	letter-spacing: 23px;	font: 108px/120px 'Bangers', cursive;}#title span{	top: 0;	right: 64.8%;	position: absolute;	transform: rotate(-19deg);}#title span:after{	top: -8px;	left: 169px;	width: 17px;	content: "";	height: 43px;	position: absolute;	transform: rotate(19deg);	background: url('../image/img01.png') no-repeat;}/*------------------------------------------------------------------        12. Hock / #hock-------------------------------------------------------------------*/#hock{	top: 37.9%;	width: 2px;	z-index: 5;	opacity: 0;	left: 47.2%;	position: absolute;	background: url('../image/img03.png') repeat-y;}#hock:after{	left: 0;	width: 2px;	content: "";	bottom: 100%;	height: 153px;	position: absolute;	background: url('../image/img02.png') no-repeat;}/*------------------------------------------------------------------        13. Oh / #oh-------------------------------------------------------------------*/#oh{	opacity: 0;	z-index: 7;	left: 34.6%;	bottom: 42%;	color: #96bb06;	word-spacing: 2px;	position: absolute;	letter-spacing: 3px;	transform: rotate(-23deg);	font: 40px/50px 'Bangers', cursive;}/*------------------------------------------------------------------        14. Text / .txt-------------------------------------------------------------------*/.txt{	left: 50%;	opacity: 0;	z-index: 7;	color: #fff;	width: 380px;	bottom: 180px;	color: #f6f6f6;	position: absolute;	text-align: center;	margin: 0 0 0 -290px;	font: 300 16px/20px 'Poppins', sans-serif;}.txt p{	margin: 0 0 35px;	letter-spacing: 1px;}.btn{	color: #fff;	width: 170px;	padding: 10px;	border-radius: 5px;	vertical-align: top;	background: #96bb06;	display: inline-block;	text-decoration: none;	text-transform: uppercase;	font: 16px/20px 'Poppins', sans-serif;}/*------------------------------------------------------------------        15. Responsive Start-------------------------------------------------------------------*/@media only screen and (max-width: 1870px){	#hock{left: 47.25%;}	#title{top: 77%;}}@media only screen and (max-width: 1760px){	#hock{left: 47.35%;}}@media only screen and (max-width: 1680px){	#wrapper{min-height: 870px;height: 870px;}	#hock{left: 47.45%; top: 40.9%;}	#oh{left: 33.2%;}}@media only screen and (max-width: 1600px){	#hock{left: 47.6%;}}@media only screen and (max-width: 1570px){	#hock{left: 47.7%;}	#oh{left: 32.2%;}}@media only screen and (max-width: 1462px){	#hock{left: 47.85%;}}@media only screen and (max-width: 1400px){	#wrapper{min-height: 768px;height: 768px;}	#hock{left: 48.05%; top: 45.9%;}	#oh{left: 31.2%;}	.txt{		bottom: 127px;		margin: 0 0 0 -230px;	}	.txt p{margin: 0 0 23px;}	#title{top: 76%;}}@media only screen and (max-width: 1370px){	#wrapper{min-height: 650px;height: 650px;}	#hock{left: 48.095%; top: 41.9%;}	#oh{left: 29.9%; bottom: 39%;}	.txt{bottom: 86px;}	#moon{margin: -60px 0 0;}	#title{top: 70%;}}@media only screen and (max-width: 1300px){	#hock{left: 48.2%;}	#oh{left: 30.2%;}}@media only screen and (max-width: 1240px){	#hock{left: 48.3%; top: 41.9%;}}@media only screen and (max-width: 1240px){	#hock{left: 48.4%;}	#oh{left: 28%;}}@media only screen and (max-width: 1180px){	#hock{left: 48.6%;}	#oh{left: 27%;}}@media only screen and (max-width: 1120px){	#hock{left: 48.7%;}	#oh{left: 25%;}}@media only screen and (max-width: 1090px){	#hock{left: 48.9%;}}@media only screen and (max-width: 1030px){	#hock{left: 49.1%;}}@media only screen and (max-width: 970px){	#hock{left: 49.3%;}	#oh{left: 25%;}	.txt{margin: 0 0 0 -210px;}}@media only screen and (max-width: 920px){	#hock{left: 49.5%;}}@media only screen and (max-width: 880px){	#wrapper{min-height: 1000px;height: 1000px;}	#hock{left: 49.8%; top: 35.9%;}	#title{top: 82%;}	#moon{margin: 0;}	#oh{left: 20%; bottom: 42%;}}@media only screen and (max-width: 835px){	#hock{left: 50.0%;}}@media only screen and (max-width: 785px){	#hock{left: 50.4%; top: 37%;}	#oh{left: 19%;}}@media only screen and (max-width: 755px){	#hock{left: 50.6%;}}@media only screen and (max-width: 700px){	#hock{left: 50.9%;}}@media only screen and (max-width: 670px){	#wrapper{min-height: 920px;height: 920px;}	#hock{left: 51.2%; top: 39.9%;}	#oh{left: 17%;}}@media only screen and (max-width: 630px){	#hock{left: 51.6%;}	#oh{left: 16%;}}@media only screen and (max-width: 595px){	#hock{left: 52.0%;}	#oh{left: 12%;}}@media only screen and (max-width: 565px){	#hock{left: 52.4%;}	#oh{left: 8%;}}@media only screen and (max-width: 540px){	#hock{left: 52.8%;}}@media only screen and (max-width: 510px){	#hock{left: 53.1%;}}@media only screen and (max-width: 490px){	#wrapper{min-height: 840px;height: 840px;}	#moon{margin: -22px 0 0;}	#hock{left: 53.6%;}	#oh{left: 6%;}}@media only screen and (max-width: 469px){	#hock{left: 54.3%;}}@media only screen and (max-width: 430px){	#hock{left: 54.8%;}}@media only screen and (max-width: 415px){	#hock{left: 55.4%;}	.txt{margin: 0 0 0 -180px;}}@media only screen and (max-width: 385px){	#hock{left: 56.1%;}	.txt{		width: 340px;		bottom: 150px;		margin: 0 0 0 -170px;	}}@media only screen and (max-width: 355px){	#hock{left: 57.4%;}}@media only screen and (max-width: 325px){	#hock{left: 57.8%;}}