html,body {
	height:100%;
	width:100%;
	margin:0;
	padding:0;
	overflow:hidden;
	font-family:Arial,Helvetica,sans-serif;
}

body {
	background-image:url("../varena_image/current.jpg");
	background-repeat:no-repeat;
	background-size:cover;
}

a:link {
	color:#ffffff;
	text-decoration:none;
}
a:hover {
	color:#ffffff;
	text-decoration:underline;
}
a:visited {
	color:#ffffff;
	text-decoration:none;
}
a:active {
	color:#ffffff;
	text-decoration:none;
}

img {
	max-height:100%;
	max-width:100%;
	vertical-align: middle;
}

#meteostatus {
	max-height:70%;
	max-width:70%;
}

#meteotrend {
	max-height:50%;
	max-width:50%;
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.trend_img {
	display: inline;
	text-align:center;
	height:100%;
	width:50%;
}

#main {
	width:100%;
	text-align:center;
}

#main_container {
	width:95%;
	margin: 0 auto;
}

.mainimage {
	box-shadow:2px 2px 2px black;
	overflow:hidden;
	padding:10px;
	background-color:white;
	border:1px solid silver;
}

#wrapper {
	height:100%;
	width:100%;
	position:relative;
}

#footer {
	width:100%;
	height:10%;
}

#logo_left {
	width:10%;
	height:100%;
	text-align:center;
	float:left;
}

#logo_right {
	width:10%;
	height:100%;
	text-align:center;
	float:right;
}

/*header CSS*/

/* #### Desktops 16:9 or 16:10 #### */
@media (min-width:1281px) /*screen and (device-aspect-ratio: 16/9), screen and (device-aspect-ratio: 16/10)*/
{
    /* some CSS here */
    /*header CSS*/
	#header_wrapper {
		width:100%;
		height:12%;
		color:white;
		font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
		background: rgba(0,0,0,0.8);
		background: rgba(0,0,0,1);
		background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(75%, rgba(0,0,0,0.2)), color-stop(100%, rgba(0,0,0,0)));
		background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -o-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
	}

	#info {
		position:relative;
		top:50%;
		left:10%;
		width:80%;
		height:50%;
		text-align:center;
		color:white;
	}

	.head {
		width:100%;
		height:30%;
		font-size:15px;
	}

	.msg {
		width:100%;
		height:60%;
		font-size:28px;
		font-weight:bold;
	}

	.msg2 {
		width:100%;
		height:20%;
		font-size:15px;
	}

	#info_left {
		height:100%;
		width:20%;
		left:0%;
		position:absolute;
		text-align:right;
		}

	#info_center_left {
		height:100%;
		width:15%;
		left:25%;
		position:absolute;
		text-align:right;
		}
		
	#info_center_center {
		height:100%;
		width:15%;
		left:38%;
		position:absolute;
		text-align:right;
		}

	#info_center_right {
		height:100%;
		width:15%;
		left:55%;
		position:absolute;
		text-align:left;
		margin-left:8px;
		}

	#info_right {
		height:100%;
		width:25%;
		left:65%;
		position:absolute;
		text-align:left;
		}

	.mvtitle {
		position:relative;
		width:100%;
		height:50%;
		text-align:center;
		float:left;
		font-size:30px;
	}

	/*footer CSS */
	#footer_wrapper {
		position:absolute;
		bottom:0%;
		left:0%;
		width:100%;
		height:6%;
		text-align:center;
		font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
		color:white;
		overflow:hidden;
		background: rgba(0,0,0,0);
		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(17%, rgba(0,0,0,0.2)), color-stop(100%, rgba(0,0,0,1)));
		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
	}

	#astro {
		width:100%;
		height:100%;
		position:relative;
	}

	.moon_details {
		width:7%;
		height:100%;
		float:left;
	}

	.sun_details {
		width:9%;
		height:100%;
		float:left;
	}


	.moon_phase {
		width:18%;
		height:100%;
		float:left;
	}

	.astro_time {
		width:23%;
		height:100%;
		float:left;
	}

	.astro_head {
		width:100%;
		height:40%;
		font-size:15px;
	}

	.astro_date {
		font-size:18px;
		font-weight:bold;
	}

	.msg3 {
		width:100%;
		height:20%;
		font-size:13px;
		font-weight:bold;
	}

	#yesterday_thumb {
		height:100%;
		width:10%;
		left:90%;
		position:absolute;
		text-align:center;
		}

	.yesterday_img {
		width:100%;
		height:60%;
		overflow:hidden;
		border:2px solid rgba(255,255,255,0.3);
		border-radius:5px;
		background-color:rgba(0,0,0,0.2);
	}

	.yesterday_img img {
		width:100%;
		height:100%;
		object-fit:cover;
		opacity:0.9;
		transition:opacity 0.3s ease;
	}

	.yesterday_img img:hover {
		opacity:1;
		border-color:rgba(255,255,255,0.6);
	}
}

/* #### iPhone 4+ Landscape #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  /* some CSS here */
    /*header CSS*/
	#header_wrapper {
		width:100%;
		height:18%;
		color:white;
		font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
		background: rgba(0,0,0,0.8);
		background: rgba(0,0,0,1);
		background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(75%, rgba(0,0,0,0.2)), color-stop(100%, rgba(0,0,0,0)));
		background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -o-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
	}

	#info {
		position:relative;
		top:50%;
		left:10%;
		width:80%;
		height:50%;
		text-align:center;
		color:white;
	}

	.head {
		width:100%;
		height:30%;
		font-size:13px;
	}

	.msg {
		width:100%;
		height:60%;
		font-size:21px;
	}

	.msg2 {
		width:100%;
		height:20%;
		font-size:13px;
	}

	#info_left {
		height:100%;
		width:20%;
		left:0%;
		position:absolute;
		text-align:right;
		}

	#info_center_left {
		height:100%;
		width:25%;
		left:15%;
		position:absolute;
		text-align:right;
		}
		
	#info_center_center {
		height:100%;
		width:35%;
		left:25%;
		position:absolute;
		text-align:right;
		}
		
	#info_center_right {
		height:100%;
		width:25%;
		left:45%;
		position:absolute;
		text-align:left;
		margin-left:8px;
		}

	#info_right {
		height:100%;
		width:35%;
		left:75%;
		position:absolute;
		text-align:left;
		}

	.mvtitle {
		position:relative;
		width:100%;
		height:50%;
		text-align:center;
		float:left;
		font-size:25px;
	}

	/*footer CSS */
	#footer_wrapper {
		position:absolute;
		bottom:0%;
		left:0%;
		width:100%;
		height:8%;
		text-align:center;
		font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
		color:white;
		overflow:hidden;
		background: rgba(0,0,0,0);
		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(17%, rgba(0,0,0,0.2)), color-stop(100%, rgba(0,0,0,1)));
		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
	}

	#astro {
		width:100%;
		height:100%;
		position:relative;
	}

	.moon_details {
		width:7%;
		height:100%;
		float:left;
	}

	.sun_details {
		width:9%;
		height:100%;
		float:left;
	}


	.moon_phase {
		width:18%;
		height:100%;
		float:left;
	}

	.astro_time {
		width:23%;
		height:100%;
		float:left;
	}

	.astro_head {
		width:100%;
		height:40%;
		font-size:15px;
	}

	.astro_date {
		font-size:13px;
		font-weight:bold;
	}

	.msg3 {
		width:100%;
		height:20%;
		font-size:13px;
		font-weight:bold;
	}
}

/* #### iPhone 4+ Portrait #### */
@media screen and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  /* some CSS here */
    /*header CSS*/
	#header_wrapper {
		width:100%;
		height:10%;
		color:white;
		font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
		background: rgba(0,0,0,0.8);
		background: rgba(0,0,0,1);
		background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(75%, rgba(0,0,0,0.2)), color-stop(100%, rgba(0,0,0,0)));
		background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -o-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
	}

	#info {
		position:relative;
		top:50%;
		left:10%;
		width:80%;
		height:50%;
		text-align:center;
		color:white;
	}

	.head {
		width:100%;
		height:30%;
		font-size:13px;
	}

	.msg {
		width:100%;
		height:60%;
		font-size:25px;
	}

	.msg2 {
		width:100%;
		height:20%;
		font-size:13px;
	}

	#info_left {
		height:100%;
		width:20%;
		left:0%;
		position:absolute;
		text-align:right;
		}

	#info_center_left {
		height:100%;
		width:25%;
		left:15%;
		position:absolute;
		text-align:right;
		}
		
	#info_center_right {
		height:100%;
		width:25%;
		left:45%;
		position:absolute;
		text-align:left;
		margin-left:8px;
		}

	#info_right {
		height:100%;
		width:35%;
		left:75%;
		position:absolute;
		text-align:left;
		}

	.mvtitle {
		position:relative;
		width:100%;
		height:50%;
		text-align:center;
		float:left;
		font-size:40px;
	}

	/*footer CSS */
	#footer_wrapper {
		position:absolute;
		bottom:0%;
		left:0%;
		width:100%;
		height:5%;
		text-align:center;
		font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
		color:white;
		overflow:hidden;
		background: rgba(0,0,0,0);
		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(17%, rgba(0,0,0,0.2)), color-stop(100%, rgba(0,0,0,1)));
		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
	}

	#astro {
		width:100%;
		height:100%;
		position:relative;
	}

	.moon_details {
		width:7%;
		height:100%;
		float:left;
	}

	.sun_details {
		width:9%;
		height:100%;
		float:left;
	}


	.moon_phase {
		width:18%;
		height:100%;
		float:left;
	}

	.astro_time {
		width:23%;
		height:100%;
		float:left;
	}

	.astro_head {
		width:100%;
		height:40%;
		font-size:15px;
	}

	.astro_date {
		font-size:18px;
		font-weight:bold;
	}

	.msg3 {
		width:100%;
		height:20%;
		font-size:15px;
		font-weight:bold;
	}
}

/* #### Tablets Landscape #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: landscape){
  /*header CSS*/
	#header_wrapper {
		width:100%;
		height:15%;
		color:white;
		font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
		background: rgba(0,0,0,0.8);
		background: rgba(0,0,0,1);
		background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(75%, rgba(0,0,0,0.2)), color-stop(100%, rgba(0,0,0,0)));
		background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -o-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
	}

	#info {
		position:relative;
		top:50%;
		left:10%;
		width:80%;
		height:50%;
		text-align:center;
		color:white;
	}

	.head {
		width:100%;
		height:30%;
		font-size:12px;
	}

	.msg {
		width:100%;
		height:60%;
		font-size:25px;
		font-weight:bold;
	}

	.msg2 {
		width:100%;
		height:20%;
		font-size:12px;
	}

	#info_left {
		height:100%;
		width:20%;
		left:0%;
		position:absolute;
		text-align:right;
		}

	#info_center_left {
		height:100%;
		width:25%;
		left:15%;
		position:absolute;
		text-align:right;
		}
		
	#info_center_right {
		height:100%;
		width:25%;
		left:45%;
		position:absolute;
		text-align:left;
		margin-left:8px;
		}

	#info_right {
		height:100%;
		width:35%;
		left:75%;
		position:absolute;
		text-align:left;
		}

	.mvtitle {
		position:relative;
		width:100%;
		height:50%;
		text-align:center;
		float:left;
		font-size:35px;
	}

	/*footer CSS */
	#footer_wrapper {
		position:absolute;
		bottom:0%;
		left:0%;
		width:100%;
		height:8%;
		text-align:center;
		font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
		color:white;
		overflow:hidden;
		background: rgba(0,0,0,0);
		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(17%, rgba(0,0,0,0.2)), color-stop(100%, rgba(0,0,0,1)));
		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
	}

	#astro {
		width:100%;
		height:100%;
		position:relative;
	}

	.moon_details {
		width:7%;
		height:100%;
		float:left;
	}

	.sun_details {
		width:9%;
		height:100%;
		float:left;
	}


	.moon_phase {
		width:18%;
		height:100%;
		float:left;
	}

	.astro_time {
		width:23%;
		height:100%;
		float:left;
	}

	.astro_head {
		width:100%;
		height:40%;
		font-size:15px;
	}

	.astro_date {
		font-size:18px;
		font-weight:bold;
	}

	.msg3 {
		width:100%;
		height:20%;
		font-size:15px;
		font-weight:bold;
	}
}

/* #### Tablets Portrait #### */
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation: portrait){
  /*header CSS*/
	#header_wrapper {
		width:100%;
		height:10%;
		color:white;
		font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
		background: rgba(0,0,0,0.8);
		background: rgba(0,0,0,1);
		background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(75%, rgba(0,0,0,0.2)), color-stop(100%, rgba(0,0,0,0)));
		background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -o-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
	}

	#info {
		position:relative;
		top:50%;
		left:10%;
		width:80%;
		height:50%;
		text-align:center;
		color:white;
	}

	.head {
		width:100%;
		height:30%;
		font-size:12px;
	}

	.msg {
		width:100%;
		height:60%;
		font-size:25px;
		font-weight:bold;
	}

	.msg2 {
		width:100%;
		height:20%;
		font-size:12px;
	}

	#info_left {
		height:100%;
		width:20%;
		left:0%;
		position:absolute;
		text-align:right;
		}

	#info_center_left {
		height:100%;
		width:25%;
		left:15%;
		position:absolute;
		text-align:right;
		}
		
	#info_center_right {
		height:100%;
		width:25%;
		left:45%;
		position:absolute;
		text-align:left;
		margin-left:8px;
		}

	#info_right {
		height:100%;
		width:35%;
		left:75%;
		position:absolute;
		text-align:left;
		}

	.mvtitle {
		position:relative;
		width:100%;
		height:50%;
		text-align:center;
		float:left;
		font-size:35px;
	}

	/*footer CSS */
	#footer_wrapper {
		position:absolute;
		bottom:0%;
		left:0%;
		width:100%;
		height:7%;
		text-align:center;
		font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
		color:white;
		overflow:hidden;
		background: rgba(0,0,0,0);
		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(17%, rgba(0,0,0,0.2)), color-stop(100%, rgba(0,0,0,1)));
		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
	}

	#astro {
		width:100%;
		height:100%;
		position:relative;
	}

	.moon_details {
		width:7%;
		height:100%;
		float:left;
	}

	.sun_details {
		width:9%;
		height:100%;
		float:left;
	}


	.moon_phase {
		width:18%;
		height:100%;
		float:left;
	}

	.astro_time {
		width:23%;
		height:100%;
		float:left;
	}

	.astro_head {
		width:100%;
		height:40%;
		font-size:15px;
	}

	.astro_date {
		font-size:18px;
		font-weight:bold;
	}

	.msg3 {
		width:100%;
		height:20%;
		font-size:15px;
		font-weight:bold;
	}
}

/* #### Mobile Phones Landscape #### */
@media screen and (max-device-width: 640px) and (orientation: landscape){
  /*header CSS*/
	#header_wrapper {
		width:100%;
		height:15%;
		color:white;
		font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
		background: rgba(0,0,0,0.8);
		background: rgba(0,0,0,1);
		background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(75%, rgba(0,0,0,0.2)), color-stop(100%, rgba(0,0,0,0)));
		background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -o-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
	}

	#info {
		position:relative;
		top:50%;
		left:10%;
		width:80%;
		height:50%;
		text-align:center;
		color:white;
	}

	.head {
		width:100%;
		height:30%;
		font-size:12px;
	}

	.msg {
		width:100%;
		height:60%;
		font-size:25px;
		font-weight:bold;
	}

	.msg2 {
		width:100%;
		height:20%;
		font-size:12px;
	}

	#info_left {
		height:100%;
		width:20%;
		left:0%;
		position:absolute;
		text-align:right;
		}

	#info_center_left {
		height:100%;
		width:25%;
		left:15%;
		position:absolute;
		text-align:right;
		}
		
	#info_center_right {
		height:100%;
		width:25%;
		left:45%;
		position:absolute;
		text-align:left;
		margin-left:8px;
		}

	#info_right {
		height:100%;
		width:35%;
		left:75%;
		position:absolute;
		text-align:left;
		}

	.mvtitle {
		position:relative;
		width:100%;
		height:50%;
		text-align:center;
		float:left;
		font-size:35px;
	}

	/*footer CSS */
	#footer_wrapper {
		position:absolute;
		bottom:0%;
		left:0%;
		width:100%;
		height:8%;
		text-align:center;
		font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
		color:white;
		overflow:hidden;
		background: rgba(0,0,0,0);
		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(17%, rgba(0,0,0,0.2)), color-stop(100%, rgba(0,0,0,1)));
		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
	}

	#astro {
		width:100%;
		height:100%;
		position:relative;
	}

	.moon_details {
		width:7%;
		height:100%;
		float:left;
	}

	.sun_details {
		width:9%;
		height:100%;
		float:left;
	}


	.moon_phase {
		width:18%;
		height:100%;
		float:left;
	}

	.astro_time {
		width:23%;
		height:100%;
		float:left;
	}

	.astro_head {
		width:100%;
		height:40%;
		font-size:15px;
	}

	.astro_date {
		font-size:18px;
		font-weight:bold;
	}

	.msg3 {
		width:100%;
		height:20%;
		font-size:15px;
		font-weight:bold;
	}
}

/* #### Mobile Phones Portrait or Landscape #### */
@media screen and (max-device-width: 640px){
  /*header CSS*/
	#header_wrapper {
		width:100%;
		height:8%;
		color:white;
		font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
		background: rgba(0,0,0,0.8);
		background: rgba(0,0,0,1);
		background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,1)), color-stop(75%, rgba(0,0,0,0.2)), color-stop(100%, rgba(0,0,0,0)));
		background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -o-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: -ms-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.2) 75%, rgba(0,0,0,0) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
	}

	#info {
		position:relative;
		top:50%;
		left:10%;
		width:80%;
		height:50%;
		text-align:center;
		color:white;
	}

	.head {
		width:100%;
		height:30%;
		font-size:18px;
	}

	.msg {
		width:100%;
		height:60%;
		font-size:25px;
		font-weight:bold;
	}

	.msg2 {
		width:100%;
		height:20%;
		font-size:18px;
	}

	#info_left {
		height:100%;
		width:20%;
		left:0%;
		position:absolute;
		text-align:right;
		}

	#info_center_left {
		height:100%;
		width:25%;
		left:15%;
		position:absolute;
		text-align:right;
		}
		
	#info_center_right {
		height:100%;
		width:25%;
		left:45%;
		position:absolute;
		text-align:left;
		margin-left:8px;
		}

	#info_right {
		height:100%;
		width:35%;
		left:75%;
		position:absolute;
		text-align:left;
		}

	.mvtitle {
		position:relative;
		width:100%;
		height:50%;
		text-align:center;
		float:left;
		font-size:35px;
	}

	/*footer CSS */
	#footer_wrapper {
		position:absolute;
		bottom:0%;
		left:0%;
		width:100%;
		height:4%;
		text-align:center;
		font-family: "Helvetica Neue",Helvetica,Roboto,Arial,sans-serif;
		color:white;
		overflow:hidden;
		background: rgba(0,0,0,0);
		background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(0,0,0,0)), color-stop(17%, rgba(0,0,0,0.2)), color-stop(100%, rgba(0,0,0,1)));
		background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 17%, rgba(0,0,0,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000', GradientType=0 );
	}

	#astro {
		width:100%;
		height:100%;
		position:relative;
	}

	.moon_details {
		width:7%;
		height:100%;
		float:left;
	}

	.sun_details {
		width:9%;
		height:100%;
		float:left;
	}


	.moon_phase {
		width:18%;
		height:100%;
		float:left;
	}

	.astro_time {
		width:23%;
		height:100%;
		float:left;
	}

	.astro_head {
		width:100%;
		height:40%;
		font-size:15px;
	}

	.astro_date {
		font-size:18px;
		font-weight:bold;
	}

	.msg3 {
		width:100%;
		height:20%;
		font-size:15px;
		font-weight:bold;
	}
}