html, body {
	background-color: #000;
	margin: 0;
	padding: 0;
	}

body {
	font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif;

}
/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Standard HTML
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
	
a:link, a:visited, a:active {
	text-decoration: none;
	color: #000;
}
a:hover, a:focus {
}
h1 {
	text-indent:-9000px;
	height:1px;
	overflow:hidden;
	white-space:nowrap;
	margin:0;
}
/* ************* EFFECTS **************** */
/* ************* SPIN **************** */

.spin  {
        -webkit-transform: rotate(360deg);
        -webkit-animation-name: spin;
        -webkit-animation-duration: 1s;
        -webkit-animation-iteration-count:  1;
        -webkit-animation-timing-function: linear;
        -moz-transform: rotate(360deg);
        -moz-animation-name: spin;
        -moz-animation-duration: 1s;
        -moz-animation-iteration-count:  1;
        -moz-animation-timing-function: linear;        
}
@-webkit-keyframes spin {
        from {-webkit-transform: rotate(0deg);}
        to {-webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin {
        from {-moz-transform: rotate(0deg);}
        to {-moz-transform: rotate(360deg);}
}

/* ************* FADE IN **************** */
.in, .out {
        -webkit-animation-timing-function: ease-in-out;
        -webkit-animation-duration: 7s;
        -moz-animation-timing-function: ease-in-out;
        -moz-animation-duration: 7s;        
}
@-webkit-keyframes fadein {
    from { opacity: .1; }
    to { opacity: 1; }
}

@-webkit-keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}

@-moz-keyframes fadein {
    from { opacity: .1; }
    to { opacity: 1; }
}

@-moz-keyframes fadeout {
    from { opacity: 1; }
    to { opacity: 0; }
}
.fade.out {
        z-index: 0;
        -webkit-animation-name: fadeout;
        -moz-animation-name: fadeout;
}

.fade.in {
        opacity: 1;
        z-index: 10;
        -webkit-animation-name: fadein;
        -moz-animation-name: fadein;
}


/*  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Layout Blocks
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

header {display:none;}

#moon{
	margin:0 auto;
	position: fixed;
	height:100%!important;
	width: 100%;
	
}
#hgimg { 
	height: 100% !important;
	width: auto !important;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.col-width:after {
	content: '';
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}
.col-width {
/*	max-width: 980px; not working in ie7*/
	margin: 0 auto;
	padding:0;
}


/* =Responsive Structure
----------------------------------------------- */


/* #### Desktops #### */
@media screen and (max-width: 1024px){

}

/* Big Tablet (landscape) ----------- */
@media (min-width: 981px) and (orientation: landscape) {
	#hgimg { 
		height: 100% !important;
		width: auto !important;
	}
}

/* Big Tablet (portrait) ----------- */
@media (max-width : 980px) and (orientation: portrait) {	
	#hgimg { 
		width: 100% !important;
		height: auto !important;
	}
}


/* Small Tablet (landscape) ----------- */
@media (min-width: 681px) and (orientation: landscape) {
	#hgimg { 
		height: 100% !important;
		width: auto !important;
	}

}
/* Small Tablet (portrait) ----------- */
@media (max-width : 680px) and (orientation: portrait) {	

	#hgimg { 
		width: 100% !important;
		height: auto !important;
	}
}


/* Smartphones (landscape) ----------- */
@media (min-width : 321px) and (orientation: landscape) {
	#hgimg { 
		height: 100% !important;
		width: auto !important;
	}
}

/* Smartphones (portrait) ----------- */
@media (max-width : 320px) and (orientation: portrait) {

	#hgimg { 
		width: 100% !important;
		height: auto !important;
	}
}