/* flex webkit usage homeweatherstation css September 14th 2016  cleaned with http://www.cleancss.com/css-beautify/*/

@font-face {
        font-family: weathericons;
        src: url(fonts/weathericons-regular-webfont.eot?) format("eot"),url(fonts/weathericons-regular-webfont.woff) format("woff"),url(fonts/weathericons-regular-webfont.ttf) format("truetype");
        font-display: swap;
}

@font-face {
        font-family: weathertext;
        src: url(fonts/weathertext.eot?) format("eot"),url(fonts/weathertext.woff) format("woff"),url(fonts/weathertext.ttf) format("truetype");
        font-display: swap;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}

@font-face {font-family: 'VerbLight';src: url('fonts/321E69_0_0.eot');src: url('fonts/321E69_0_0.eot?#iefix') format('embedded-opentype'),url('fonts/321E69_0_0.woff2') format('woff2'),url('fonts/321E69_0_0.woff') format('woff'),url('fonts/321E69_0_0.ttf') format('truetype');
font-display: swap;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;

}


@font-face {
        font-family: HelveticaNeue;
        src: url(fonts/HelveticaNeue.eot) format("eot"),url(fonts/HelveticaNeue.woff) format("woff"),url(fonts/HelveticaNeue.ttf) format("truetype");
        font-display: swap;
        text-rendering: optimizeLegibility;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
}

@font-face {
font-family:HelveticaNeue;
src:url(fonts/HelveticaNeue.eot) format(eot),url(fonts/HelveticaNeue.woff) format(woff),url(fonts/HelveticaNeue.ttf) format(truetype);
font-display:swap;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

*,:after,:before {
-webkit-box-sizing:border-box;
-moz-box-sizing:border-box;
-o-box-sizing:border-box;
-ms-box-sizing:border-box;
box-sizing:border-box;
}

body {
background: #1f1f1f;
clear:both;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
font-size:14px;
line-height:1.42857143;
color:#ccc;
}

.left {
float:left;
}

.right {
float:right;
top:10px;
margin-left:0;
margin-right:20px;
}

input[data-function*='swipe'] {
position:absolute;
opacity:0;
}

label[data-function*='swipe'] {
position: absolute;
	top: 10px;
	left: 5px;
	z-index: 99999;
	display: block;
	width: 142px;
	height: 45px;
text-align:center;
color:#ccc;
cursor:pointer;
-webkit-transform:translate3d(0,0,0);
-ms-transform:translate3d(0,0,0);
-webkit-transition:transform .3s;
-moz-transform:translate3d(0,0,0);
-moz-transition:transform .3s;
-o-transform:translate3d(0,0,0);
-o-transition:transform .3s;
transform:translate3d(0,0,0);
transition:transform .3s;
}

label[data-function*='swipe']:after {
position: absolute;
content:'MENU';
font-family:Arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
font-weight:300;
font-size:13px;
padding-left:5px;
margin-top:10px;
}

input[data-function*='swipe']:checked ~ label[data-function*='swipe']:after {
content:'CLOSE';
font-family:Arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
font-weight:300;
font-size:13px;
padding-left:5px;
}

input[data-function*='swipe']:checked ~ .content {
-webkit-transform:translate3d(260px,0px,0px);
-moz-transform:translate3d(260px,0px,0px);
-o-transform:translate3d(260px,0px,0px);
-ms-transform:translate3d(260px,0px,0px);
transform:translate3d(260px,0px,0px);
}

input[data-function*='swipe']:checked ~ .sidebar {
-webkit-transform:translate3d(0px,0px,0px);
-moz-transform:translate3d(0px,0px,0px);
-o-transform:translate3d(0px,0px,0px);
-ms-transform:translate3d(0px,0px,0px);
transform:translate3d(0px,0px,0px);
}

input[data-function*='swipe']:checked ~ .sidebar .menu li {
width:260px;
}

.sidebar {
-webkit-transform:translate3d(-260px,0px,0px);
-moz-transform:translate3d(-260px,0px,0px);
-o-transform:translate3d(-260px,0px,0px);
-ms-transform:translate3d(-260px,0px,0px);
transform:translate3d(-260px,0px,0px);
position:absolute;
width:260px;
color:#ccc;
left:0;
height:100%;
transition:all .3s;
z-index:10;
top:55px;
border:0;
border-top:1px solid #777;

}

.menu li {
list-style:none;
text-align:left;
padding:2px;
background:#3d3d3d;
border-bottom:1px solid #777;
line-height:0.8em;
}

.menu .active {
font-family:Arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
font-weight:400;
background:#3d3d3d;

}

.menu li a {
color:#fff;
display:block;
text-decoration:none;
-webkit-box-shadow:rgba(0,0,0,.2) 0 0 1px;
-moz-box-shadow:rgba(0,0,0,.2) 0 0 1px;
-ms-box-shadow:rgba(0,0,0,.2) 0 0 1px;
-o-box-shadow:rgba(0,0,0,.2) 0 0 1px;
box-shadow:rgba(0,0,0,.2) 0 0 1px;
font-family:Arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
font-weight:400;
font-size:12px;
margin:0 5px;
padding:3px 0;

}

.menu li:hover {
color:#777;
border-radius:0;
font-family:Arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
border-left:0;
-webkit-border-top-right-radius:3px;
-webkit-border-bottom-right-radius:3px;
border-top-right-radius:3px;
border-bottom-right-radius:3px;
margin-left:0;
width:90%;
background:#3d3d3d;
}

button {
position:relative;
font-size:16px;
border:none;
cursor:pointer;
margin-right:0;
margin-top:-45px;
width:auto;
padding:0;
background:none;
}

header {
-webkit-box-shadow:rgba(0,0,0,.1) 0 1px 0;
-moz-box-shadow:rgba(0,0,0,.1) 0 1px 0;
-o-box-shadow:rgba(0,0,0,.1) 0 1px 0;
-ms-box-shadow:rgba(0,0,0,.1) 0 1px 0;
box-shadow:rgba(0,0,0,.1) 0 1px 0;
height:3.9em;
position:fixed;
text-align:center;
top:0;
width:100%;
z-index:1;
background:#3d3d3d;
}

h1 {
color:#ccc;
font-size:1rem;
font-weight:400;
letter-spacing:-.05em;
line-height:2.3em;
padding-right:.5em;
top:10px;
}

.logo {
position:absolute;
color:#ccc;
font-size:1.4em;
font-weight:600;
letter-spacing:-.05em;
line-height:3.3em;
padding-right:.5em;
margin-top:-90px;
}

.logo span {
color:#ccc;
font-weight:100;
letter-spacing:-.05em;
}

.weather-item,body {
text-align:center;
text-transform:none;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.weather-container,.weather-item,a,body {
text-transform:none;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.weather2-item,.weatherfooter-item {
font-family:HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.weather-item,.weather2-item {
color:#ccc;
font-weight:400;
box-shadow:0 .25em .25em rgba(0,0,0,.1);
max-height:360px;
}

.featherlight:before,img,wm2 {
vertical-align:middle;
}

.heading1,.wi {
-moz-osx-font-smoothing:grayscale;
}

.sr-only,svg:not(:root) {
overflow:hidden;
}

.weather-container {
display:flex;
list-style:none;
width:960px;
height:204px;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
overflow:hidden;
margin:5px auto;
background:none;
}

.weather-item {
width:320px;
height:201px;
border:1px solid #383737;
border-bottom:18px solid #383737;
-webkit-border-radius:4px;
-o-border-radius:4px;
-ms-border-radius:4px;
border-radius:4px;
font-size:1em;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
margin:0 5px 5px 0;
padding:6px;
background:#3d3d3d;
}

.weather2-container {
display:flex;
width:960px;
height:100px;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
margin:65px auto -20px;
background:none;
}

.weather2-item {
width:33.3333%;
height:80px;
border:1px solid #383737;
text-align:left;
padding-left:10px;
-webkit-border-radius:4px;
-o-border-radius:4px;
-ms-border-radius:4px;
border-radius:4px;
float:left;
text-transform:none;
font-size:.9em;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
margin:0 5px 5px 0;
background:#3d3d3d;
}

.weatherfooter-container {
display:flex;
width:960px;
font-family:HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
margin:0 auto 2px;
}

.weatherfooter-item {
width:100%;
height:90px;
border:1px solid #383737;
text-align:center;
-webkit-border-radius:4px;
-o-border-radius:4px;
-ms-border-radius:4px;
border-radius:4px;
font-family:HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
margin:0 5px 5px 0;
padding:5px;
background:#3d3d3d;
}

.barometergaugegrid {
width:90%;
text-align:center;
margin:10px 0 auto;
}

h2mb {
letter-spacing:0;
font:2em weathertext,Arial;
}

h2mb span {
color:#F26C4F;
margin-left:0;
margin-top:5px;
font:.4em arial,sans-serif;
}

.h2mbvalue {
margin-top:3px;
padding-right:0;
color:#ccc;
font-weight:400;
font-family:weathertext,Arial,sans-serif;
}

.h2mbunit {
padding-right:25px;
margin-top:-60px;
margin-left:115px;
color:#ccc;
font:.8em arial,sans-serif;
}

.barometertrend {
position:relative;
color:#fff;
text-align:center;
z-index:1;
font:11px Arial,sans-serif;
margin:-58px auto auto;
}

.barometertrend steady {
color:#4c9f83;
}

.temptrend {
position:absolute;
margin-top:38px;
margin-left:15%;
text-align:center;
z-index:auto;
font:600 11px arial,sans-serif;
color:#ccc;
}

.indoortrend {
position:absolute;
margin-left:255px;
top:0;
height:25px;
}

.indoorfeels {
position:absolute;
margin-left:52px;
top:55px;
color:#ccc;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
font-size:10px;
width:80px;
}

h3 {
font:4em weathertext,arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.featherlight {
display:none;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:2;
text-align:center;
white-space:nowrap;

background:#3d3d3d;
}

.featherlight:last-of-type {
background:rgba(0,0,0,.5);
}

.featherlight:before {
content:'';
display:inline-block;
height:100%;
}

.featherlight .featherlight-content {
position:relative;
text-align:left;
vertical-align:top;
display:inline-block;
overflow:hidden;
border-bottom:1px solid transparent;
width:700px;
margin-left:5%;
margin-right:0;
max-height:500px;
cursor:auto;
white-space:normal;
-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	-o-border-radius: 4px;
	-ms-border-radius: 4px;
	border-radius: 4px;
margin-top:5%;
padding:0;
background:#3d3d3d;
}

.featherlight .featherlight-close-icon {
position:absolute;
z-index:9999;
top:5px;
right:10px;
width:25px;
cursor:pointer;
text-align:center;
font:22px / 25px arial,sans-serif;
color:#F26C4F;
font-weight:900;
background:#3d3d3d;
}

.featherlight .featherlight-image {
width:100%;
}

.featherlight-iframe .featherlight-content {
border:1px solid #3d3d3d;
padding:10px 10px 0;
}

.featherlight iframe {
border:1px solid #3d3d3d;
background:#3d3d3d;
}

.box.icon-humidity,.box.icon-temp {
background:no-repeat bottom left;
}

.clock-container {
position:absolute;
margin-top:20px;
margin-left:140px;
width:150px;
}

.clock-container > ul {
display:inline-block;
color:#F26C4F;
font:2em weathertext,arial,sans-serif;
}

.clock-container > ul > li {
color:#F26C4F;
list-style:none;
}

.clock-container > ul > li > span {
position:absolute;
display:block;
margin-top:-37px;
font-family:weathertext,arial,sans-serif;
color:#F26C4F;
margin-right:40px;
}

.box.icon-temp {
background:url(homepageicons/temp.dark.png);
}

.box.icon-humidity {
background:url(homepageicons/humidity.png);
}

.indoortitles {
color:#F26C4F;
margin-top:5px;
text-align:center;
font:1.2em arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.chartindoor,.indoorlocation {
margin-top:40px;
text-align:left;
font:400 11px arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
position:absolute;
}

.chartindoor {
margin-left:250px;
}

.indoorlocation {
margin-left:35px;
width:300px;
}

.indoorvalues {
position:absolute;
margin-top:-15px;
}

.heading1 {
color:#ccc;
font:1em / 15px arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.tempcontainer,.tempcontainer1 {
float:left;
font-family:weathertext,arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

supmb {
font-size:.8em;
color:#ccc;
}

supunit {
font-size:.7em;
color:#00adbc;
font-weight:400;
vertical-align:top;
}

verticalline {
border-right:thin solid #ccc;
margin-right:10px;
}

a:visited {
border:none;
}

.tempcontainer .circleOut,.tempcontainer1 .circleOut {
border-radius:50%;
left:0;
bottom:0;
right:0;
top:-25px;
color:#fff;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.tempcontainer {
position:relative;
width:115px;
height:115px;
margin:40px 10px 10px 55px;
}

.tempcontainer .circleOut {
position:absolute;
width:120px;
height:120px;
font-size:38px;
}

.tempcontainer1 {
position:relative;
width:100px;
height:100px;
margin:30px 10px 10px;
}

.tempcontainer1 .circleOut {
position:absolute;
width:100px;
height:100px;
font:42px weathertext,arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.temptext {
font-size:34px;
color:#fff;
position:absolute;
text-align:center;
padding-top:0;
top:30%;
left:0;
bottom:0;
right:0;
}

.cooler,.mild {
width:120px;
height:120px;
border-radius:50%;
top:0;
left:0;
bottom:0;
right:0;
font-size:0;
color:#fff;
position:absolute;
text-align:center;
padding-top:25%;
}

.cooler {
border:3px solid #5f6061;
background:rgba(90,179,41,1);
}

.gettingcooler,.milder {
width:120px;
height:120px;
border-radius:50%;
top:0;
left:0;
bottom:0;
right:0;
font-size:0;
position:absolute;
text-align:center;
padding-top:25%;
color:#fff;
}

.warm,.warmer {
color:rgba(255,127,0,1);
border:3px solid #5f6061;
}

.hot,.hotter {
width:120px;
height:120px;
border-radius:50%;
top:0;
left:0;
bottom:0;
right:0;
color:#fff;
position:absolute;
text-align:center;
padding-top:25%;
font:0 weathertext,arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.extremehot,.veryhot {
width:120px;
height:120px;
border-radius:50%;
font-size:0;
color:#fff;
padding-top:25%;
bottom:0;
right:0;
position:absolute;
text-align:center;
left:0;
top:0;
}

.temptext1 {
color:#f26c4f;
padding-top:0;
position:absolute;
top:15px;
margin-left:190px;
font:28px weathertext,arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.temptext1 span {
position:absolute;
color:#ccc;
margin-left:5px;
font:800 11px arial,sans-serif;
}

.temptextfreezing {
font-size:34px;
color:rgba(0,172,223,.5);
position:absolute;
text-align:center;
padding-top:0;
top:30%;
left:0;
bottom:0;
right:0;
font-family:weathertext,HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
background: transparent;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(0, 172, 223, .5)), color-stop(100%, #fff));
  background: -webkit-linear-gradient(-45deg, rgba(0, 172, 223, .5) 0%, #fff 100%);
  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;

}

.temptextcold {
font-size:34px;
color:rgba(0,172,223,1);
position:absolute;
text-align:center;
padding-top:0;
top:30%;
left:0;
bottom:0;
right:0;
font-family:weathertext,HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
background: transparent;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(0, 172, 223, 1)), color-stop(100%, #fff));
  background: -webkit-linear-gradient(-45deg, rgba(0, 172, 223, 1) 0%, #fff 100%);
  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.temptextgettingcolder {
font-size:34px;
color:rgba(0,172,223,1);
position:absolute;
text-align:center;
padding-top:0;
top:30%;
left:0;
bottom:0;
right:0;
font-family:weathertext,HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
background: transparent;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(0, 172, 223, 1)), color-stop(100%, #fff));
  background: -webkit-linear-gradient(-45deg, rgba(0, 172, 223, 1) 0%, #fff 100%);
  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  

}

.temperaturecirclecolder {
width:115px;
height:115px;
border-radius:100%;
font-size:0;
color:#ccc;
position:absolute;
text-align:center;
padding-top:25%;
border:1px solid rgba(96,163,191,1);
}

.temptextcolder {
font-size:34px;
color:rgba(96,163,191,1);
position:absolute;
text-align:center;
padding-top:0;
top:30%;
left:0;
bottom:0;
right:0;
font-family:weathertext,HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
background: transparent;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(96, 163, 191, 1)), color-stop(100%, #fff));
  background: -webkit-linear-gradient(-45deg, rgba(96, 163, 191, 1) 0%, #fff 100%);
  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.temperaturecirclecooler {
width:115px;
height:115px;
border-radius:100%;
font-size:0;
color:#ccc;
position:absolute;
text-align:center;
padding-top:25%;
border:1px solid rgba(90,179,41,1);
}

.temptextcooler {
font-size:34px;
color:rgba(90,179,41,1);
position:absolute;
text-align:center;
padding-top:0;
top:30%;
left:0;
bottom:0;
right:0;
font-family:weathertext,HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
background: transparent;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(90, 179, 41, 1)), color-stop(100%, #fff));
  background: -webkit-linear-gradient(-45deg, rgba(90, 179, 41, 1) 0%, #fff 100%);
  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.temperaturecirclemild {
width:115px;
height:115px;
border-radius:100%;
font-size:0;
color:#ccc;
position:absolute;
text-align:center;
padding-top:25%;
border:1px solid rgba(131,173,45,1);
}

.temptextmild {
font-size:34px;
color:rgba(131,173,45,1);
position:absolute;
text-align:center;
padding-top:0;
top:30%;
left:0;
bottom:0;
right:0;
font-family:weathertext,HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
background: transparent;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(131, 173, 45, 1)), color-stop(100%, #fff));
  background: -webkit-linear-gradient(-45deg, rgba(131, 173, 45, 1) 0%, #fff 100%);
  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.temperaturecirclemilder {
width:115px;
height:115px;
border-radius:100%;
font-size:0;
color:#ccc;
position:absolute;
text-align:center;
padding-top:25%;
border:1px solid rgba(206,184,98,1);
}

.temptextmilder {
font-size:34px;
color:rgba(206,184,98,1);
position:absolute;
text-align:center;
padding-top:0;
top:30%;
left:0;
bottom:0;
right:0;
font-family:weathertext,HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
background: transparent;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(206, 184, 98, 1)), color-stop(100%, #fff));
  background: -webkit-linear-gradient(-45deg, rgba(206, 184, 98, 1) 0%, #fff 100%);
  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.temperaturecirclegettingcooler {
width:115px;
height:115px;
border-radius:100%;
font-size:0;
color:#ccc;
position:absolute;
text-align:center;
padding-top:25%;
border:1px solid rgba(255,174,0,1);

}

.temptextgettingcooler {
font-size:34px;
color:rgba(255,174,0,.9);
position:absolute;
text-align:center;
padding-top:0;
top:30%;
left:0;
bottom:0;
right:0;
font-family:weathertext,HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
background: transparent;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 174, 0, .9)), color-stop(100%, #fff));
  background: -webkit-linear-gradient(-45deg, rgba(255, 174, 0, .9) 0%, #fff 100%);
  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
 
}



.temperaturecirclewarm {
width:115px;
height:115px;
border-radius:100%;
font-size:0;
color:#ccc;
position:absolute;
text-align:center;
padding-top:25%;
border:1px solid rgba(255,153,0,1);
}

.temptextwarm {
font-size:34px;
color:rgba(255,153,0,.9);
position:absolute;
text-align:center;
padding-top:0;
top:30%;
left:0;
bottom:0;
right:0;
font-family:weathertext,HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
background: transparent;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 153, 0, .9)), color-stop(100%, #fff));
  background: -webkit-linear-gradient(-45deg, rgba(255, 153, 0, .9) 0%, #fff 100%);
  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.temperaturecirclewarmer {
width:115px;
height:115px;
border-radius:100%;
font-size:0;
color:#ccc;
position:absolute;
text-align:center;
padding-top:25%;
border:1px solid rgba(255,127,0,1);
}

.temptextwarmer {
font-size:34px;
color:rgba(255,127,0,1);
position:absolute;
text-align:center;
padding-top:0;
top:30%;
left:0;
bottom:0;
right:0;
font-family:weathertext,HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
background: transparent;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 127, 0, 1)), color-stop(100%, #fff));
  background: -webkit-linear-gradient(-45deg, rgba(255, 127, 0, 1) 0%, #fff 100%);
  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.temperaturecirclehot {
width:115px;
height:115px;
border-radius:100%;
font-size:0;
color:#ccc;
position:absolute;
text-align:center;
padding-top:25%;
border:1px solid rgba(255,79,0,1);
}

.temptexthot {
font-size:34px;
color:rgba(255,79,0,.9);
position:absolute;
text-align:center;
padding-top:0;
top:30%;
left:0;
bottom:0;
right:0;
font-family:weathertext,HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
background: transparent;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 79, 0, .9)), color-stop(100%, #fff));
  background: -webkit-linear-gradient(-45deg, rgba(255, 79, 0, .9) 0%, #fff 100%);
  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.temperaturecirclehotter {
width:115px;
height:115px;
border-radius:100%;
font-size:0;
color:#ccc;
position:absolute;
text-align:center;
padding-top:25%;
border:1px solid rgba(255,69,69,1);
}

.temptexthotter {
font-size:34px;
color:rgba(255,69,69,1);
position:absolute;
text-align:center;
padding-top:0;
top:30%;
left:0;
bottom:0;
right:0;
font-family:weathertext,HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
background: transparent;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 69, 69, 1)), color-stop(100%, #fff));
  background: -webkit-linear-gradient(-45deg, rgba(255, 69, 69, 1) 0%, #fff 100%);
  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.temperaturecircleveryhot {
width:115px;
height:115px;
border-radius:100%;
font-size:0;
color:#ccc;
position:absolute;
text-align:center;
padding-top:25%;
border:1px solid rgba(255,104,104,1);
}

.temptextveryhot {
font-size:34px;
color:rgba(255,104,104,1);
position:absolute;
text-align:center;
padding-top:0;
top:30%;
left:0;
bottom:0;
right:0;
font-family:weathertext,HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
background: transparent;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(255, 104, 104, 1)), color-stop(100%, #fff));
  background: -webkit-linear-gradient(-45deg, rgba(255, 104, 104, 1) 0%, #fff 100%);
  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.temperaturecircleextremehot {
width:115px;
height:115px;
border-radius:100%;
font-size:0;
color:#ccc;
position:absolute;
text-align:center;
padding-top:25%;
border:1px solid rgba(218,113,113,1);
}

.temptextextremehot {
font-size:34px;
color:rgba(218,113,113,1);
position:absolute;
text-align:center;
padding-top:0;
top:30%;
left:0;
bottom:0;
right:0;
font-family:weathertext,HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
background: transparent;
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, rgba(218, 113, 113, 1)), color-stop(100%, #ccc));
  background: -webkit-linear-gradient(-45deg, rgba(218, 113, 113, 1) 0%, #ccc 100%);
  -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.temperaturecircle {
width:115px;
height:115px;
border-radius:100%;
font-size:26px;
color:#ccc;
position:absolute;
text-align:center;
padding-top:25%;
border:3px solid #5f6061;
}

suptemp,suptemp1 {
font-size:.7em;
vertical-align:text-top;
}

supsolar {
font-size:.8em;
vertical-align:text-top;
}

.who {
position:absolute;
margin-top:-30px;
text-align:center;
margin-left:5%;
font:12px arial,sans-serif;
}

uvi {
font-size:.35em;
text-align:center;
position:absolute;
margin:32px auto 0 -30px;
}

uviforecast {
font-size:.35em;
text-align:center;
position:absolute;
margin:-3px auto 0 0;
}

.uv01,.uv03,.uv35,.uv67,.uv810,.uv1112 {
padding-top:6%;
font:2em weathertext,arial,sans-serif;
color:#ccc;
margin-top:-25px;
border-radius:50%;
margin-left:20px;
border:3px solid #5f6061;
width:90px;
height:90px;
text-align:center;

}

.uv01 {
color:#ccc;


}

.uv03 {
color:rgba(79,184,123,1);


}

.uv35 {
color:rgba(238,166,89,1);


}

.uv67 {
color:rgba(238,114,89,1);


}

.uv810 {
color:rgba(209,94,82,1);


}

.uv1112 {
color:rgba(148,81,136,1);
font:1.9em Arial,sans-serif;


}

.solarcircle {
position:absolute;
margin-top:-15px;
-webkit-border-radius:100%;
border-radius:100%;
height:60px;
width:60px;
margin-left:100px;
border:2px solid #777;
padding-top:18px;
font-family:"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
font-size:14px;
font-weight:600;
line-height:12px;
color:#f26c4f;
}

.solarcircle3 {
position:absolute;
margin-top:-15px;
border-radius:100%;
-webkit-border-radius:100%;
height:60px;
width:60px;
margin-left:100px;
border:2px solid #777;
padding-top:18px;
font-family:"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
font-size:14px;
font-weight:600;
line-height:12px;
color:#00adbc;
}

.solatext {
color:#ccc;
float:left;
width:150px;
margin-left:135px;
margin-top:0;
font:12px arial,sans-serif;
}

.solatext color {
color:#F26C4F;
font-weight:600;
}

.solatext color3 {
color:#00adbc;
font-weight:600;
}

eq {
font-size:.35em;
text-align:center;
position:absolute;
font-weight:600;
margin:32px auto 0 -30px;
}

.eqtext {
color:#ccc;
float:left;
width:150px;
margin-left:120px;
margin-top:-80px;
font:10px  arial,sans-serif;
font-weight:600;
}

.eqtext color {
font-size:1em;
color:#F26C4F;
font-weight:400;
}

.eqtext depth {
font-size:1em;
color:#00adbc;
font-weight:400;
}

.eq03,.eq45,.eq5,.eq67,.eq08 {
padding-top:15px;
font:2em arial,sans-serif;
color:#fff;
margin-top:-25px;
border-radius:50%;
margin-left:20px;
border:3px solid #777;
width:90px;
height:90px;
text-align:center;
}

.eq03:after {
content:'MINOR';
display:block;
font-size:9px;
line-height:10px;
}

.eq5 {
background:#e48f4c;
}

.eq67 {
background:#ee7259;
}

.eq67:after {
content:'STRONG';
display:block;
font-size:9px;
line-height:10px;
}

.eq08 {
background:#d15e52;
}

.eq08:after {
content:'MAJOR';
display:block;
font-size:9px;
line-height:10px;
}

.eqcircle {
position:absolute;
margin-top:-15px;
-webkit-border-radius:100%;
border-radius:100%;
height:60px;
width:60px;
margin-left:220px;
border:2px solid #777;
padding-top:18px;
font-family:"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
font-size:22px;
font-weight:600;
line-height:12px;
color:#f26c4f;
}

.eqcircle1 {
position:absolute;
margin-top:-15px;
-webkit-border-radius:100%;
border-radius:100%;
height:60px;
width:60px;
margin-left:220px;
border:2px solid #777;
padding-top:18px;
font-family:"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
font-size:22px;
font-weight:600;
line-height:12px;
color:#4c9f83;
}

.eqcircle2 {
position:absolute;
margin-top:-15px;
-webkit-border-radius:100%;
border-radius:100%;
height:60px;
width:60px;
margin-left:220px;
border:2px solid #777;
padding-top:18px;
font-family:"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
font-size:22px;
font-weight:600;
line-height:12px;
color:#e48f4c;
}

.eqcircle3 {
position:absolute;
margin-top:-15px;
border-radius:100%;
-webkit-border-radius:100%;
height:60px;
width:60px;
margin-left:220px;
border:2px solid #777;
padding-top:18px;
font-family:"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
font-size:22px;
font-weight:600;
line-height:12px;
color:#ee7259;
}

.eqcircle4 {
position:absolute;
margin-top:-15px;
border-radius:100%;
-webkit-border-radius:100%;
height:60px;
width:60px;
margin-left:220px;
border:2px solid #777;
padding-top:18px;
font-family:"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
font-size:22px;
font-weight:600;
line-height:12px;
color:#f26c4f;
}

.eqnotification {
position:fixed;
top:70px;
right:25px;
max-width:400px;
width:100%;
border-radius:4px;
z-index:99999;
margin:10px auto;
padding:15px;
}

.eqnotification .eqnotification-close {
position:absolute;
top:10px;
right:10px;

font-size:18px;
border-radius:50px;
width:28px;
height:28px;
line-height:22px;
text-align:center;
color:#fff;
}

.eqnotification .eqnotification-close:after {
content:"!";
color:#fff;
}

.eqnotification .eqnotification-title,.eqnotification .eqnotification-message {
color:#fff;
font-family:Helvetica,arial,sans-serif;
}

.eqnotification .eqnotification-title {
position:relative;
margin-top:-10px;
font-size:22px;
font-weight:600;
}

.eqnotification .eqnotification-message {
position:relative;
margin-top:-5px;
font-size:13px;
font-weight:600;
line-height:15px;
width:300px;
}

.eqnotification .eqnotification-distance {
position:relative;
margin-top:-15px;
font-size:13px;
font-weight:600;
line-height:15px;
width:300px;
color:#fff;
}

.eqnotification .eqnotification-credit {
position:absolute;
font-size:10px;
font-weight:600;
line-height:20px;
color:#fff;
padding-left:5px;
margin-top:-10px;
float:right;
}

.eqnotification a {
font-size:10px;
font-weight:400;
line-height:20px;
color:#fff;
}

.eqpopup {
background:#f26c4f;
}

.eqpopup .eqnotification-close {
border:1px solid #fff;
color:#fff;
}

eqnoti {
position:absolute;
margin-top:15px;
margin-left:5px;
font-size:14px;
font-weight:400;
color:#878a8d;
font-family:arial;
}

eqnoti color {
font-size:1em;
font-weight:600;
color:#f26c4f;
font-family:arial;
}

eqnoti magn {
font-size:.8em;
font-weight:400;
color:#bbb;
font-family:arial;
}

magalert {
position:absolute;
margin-top:5px;
margin-left:-15px;
font-size:20px;
font-weight:600;
color:#f26c4f;
font-family:arial;
}

eqalert {
	position:absolute;margin-left:5px;margin-top:17px;font-size:9px;font-weight:600;font-family:arial;width:245px;line-height:10px
}


eqalert1 {
	position:absolute;margin-left:5px;margin-top:0px;font-size:9px;font-weight:600;font-family:arial;width:245px;line-height:10px
}

eqspan{
color:#f26c4f;
font-size:9px;
}

eqspan1{
color:#00adbc;
font-size:9px;
}


eqtime {
position:absolute;
margin-top:10px;
font-size:10px;
line-height:12px;
margin-left:200px;
font-weight:400;
font-family:arial;
}

dist {
position:absolute;
font-size:10px;
font-weight:600;
color:#f26c4f;
font-family:arial;
margin-left:5px;
line-height:11px;
margin-top:5px;
}

dist place {
font-weight:400;
color:#fff;
font-size:10px;
}

.eqtext1 {
color:#ccc;
float:left;
width:100px;
margin-left:100px;
margin-top:-5px;
font:10px  arial,sans-serif;
}

.eqtext1 color {
color:#F26C4F;
font-weight:400;
}

.eqtext1 colortext {
color:#4c9f83;
font-weight:400;
font-size:10px;
}

.eqtext1 colordepth {
color:#ccc;
font-weight:400;
font-size:10px;
}

.eqtext1 color3 {
color:#00adbc;
font-weight:400;
}

.uvsup {
font-size:14px;
color:#F26C4F;
}

.uvtext {
color:#ccc;
float:left;
width:150px;
margin-left:120px;
margin-top:-80px;
font:12px arial,sans-serif;
}

.uvtext color,.uvtext color2 {
font-size:1em;
color:#F26C4F;
}

.uvfooter {
position:relative;
margin-top:110px;
text-align:center;
}

.baromcircle,.heatcircle {
position:absolute;
}

.heatcircle {
float:right;
margin-top:0;
margin-left:150px;
padding:2px;
}

.heatcircle-content {
color:#ccc;
float:left;
margin-top:0;
padding-top:7%;
text-align:center;
width:100%;
font:400 13px / 1.2 arial,sans-serif;
}

.baromcircle-content {
float:left;
line-height:1;
margin-top:-.9em;
padding-top:50%;
text-align:center;
width:100%;
color:#76797c;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
font-weight:900;
}

supraindrop,supraindropw {
z-index:9999999;
font:.4em weathertext,arial,sans-serif;
}

.baromcircle {
border-radius:50%;
height:70px;
width:70px;
float:right;
border-top:.1rem solid rgba(76,59,131,.1);
border-right:.1rem solid rgba(76,59,131,.1);
border-left:.1rem solid rgba(68,59,155,.1);
border-bottom:.1rem solid rgba(68,145,155,.1);
-webkit-background-size:cover;
-ms-background-size:cover;
margin-top:-32px;
margin-left:212px;
padding:2px;

}

supraindropw {
color:#f8f8f8;
}

.rainfalltext color {
font-size:1em;
color:#387791;
}

suprain,suprain1,suprain2 {
font-size:.4em;
font-weight:800;
}

.chartforecast {
margin-left:0;
font-size:.67em;
font-family:arial,sans-serif;
font-weight:400;
position:absolute;
color:#ccc;
margin-top:174px;
width:300px;
padding-top:5px;
padding-left:10px;
text-align:left;
}

.humidity,.windgustcircle,.windgustheadingcircle {
padding-top:35px;
color:#ccc;
}

.h2uv,.max,.sun {
text-align:center;
}

a {
font-weight:600;
font-size:1em;
color:#ccc;
text-decoration:none;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.humidity {
font:400 4em arial,sans-serif;
}

.windgustheading {
color:#ccc;
font:1em weathertext,arial,sans-serif;
}

.windgustcircle {
position:absolute;
margin-top:35px;
margin-left:-136px;
font:20px arial,sans-serif;
}

.windgustheadingcircle {
position:absolute;
margin-top:14px;
margin-left:-125px;
font:12px arial,sans-serif;
}

.iconsize {
font-size:0;
width:50%;
height:50%;
margin-left:10px;
}

.mooninfo {
margin-left:120px;
font:1em / 1.2em arial,sans-serif;
margin-top:100px;
-webkit-border-radius:4px;
border-radius:4px;
border:1px solid #777;
border-top:1px solid #777;
width:auto;
height:280px;
padding:100px 0 10px;
}

.line {
margin-top:5px;
border-bottom:1px solid rgba(255,255,255,0.3);
margin-bottom:5px;
}

.mooncircle {
position:absolute;
color:#ccc;
top:50px;
-webkit-border-radius:100%;
border-radius:100%;
height:160px;
width:160px;
margin-left:165px;
border:10px solid #777;
padding-top:10px;
font-size:26px;
background:#3d3d3d;
}

.mooncircle span {
color:#ccc;
text-align:center;
font-family:weathertext,arial,sans-serif;
font:200 2.1em weathertext,arial,sans-serif;
display:block;
margin-left:0;
}

.mooncircle moonhead {
position:absolute;
color:#f26c4f;
text-align:center;
font-size:18px;
font-family:HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
margin-top:20px;
margin-left:-45px;
}

.solar {
padding-left:25px;
font:2.8em weathertext,Arial,sans-serif;
}

.h2uv {
margin-top:35px;
position:relative;
border-radius:100%;
width:180px;
height:180px;
font:4em arial,sans-serif;
padding:40px;
background:linear-gradient(180deg,#06889525%,#51b1a545%);
}

.sun {
margin-left:85px;
font:.9em / 1.3em arial,sans-serif;
margin-top:10px;
}

.luminance {
postion:absolute;
margin-top:95px;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
font-size:11px;
line-height:11px;
}

.luminance:before {
content:"Luminance";
font-size:11px;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
color:#f26c4f;
line-height:12px;
margin-left:5px;
}

.moonrise {
padding-top:5px;
margin-top:-5px;
margin-left:-0;
font-size:11px;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.moonset {
padding-top:5px;
margin-top:-32px;
margin-left:80px;
}

.fullmoon {
padding-top:5px;
margin-top:-6px;
margin-left:0;
font-size:11px;
}

.luminance1 {
padding-top:0;
margin-top:0;
font:.9em arial,sans-serif;
width:300px;
}

.luminance1:before {
content:"Phase";
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
color:#00adbc;
}

in,mb {
position:absolute;
font:.65em arial,sans-serif;
}

.moon img {
width:20px;
height:20px;
}

.daylight {
position:absolute;
color:#fff;
font-family:arial,sans-serif;
text-align:center;
z-index:999;
top:50px;
margin-left:360px;
border:0;
}

canvas {
display:block;
position:absolute;
top:0;
left:0;
border-radius:75%;
z-index:-1;
border:0;
width:160px;
font-family:weathertext,Arial,sans-serif;
-ms-transform:scale(.9999);
-moz-transform:scale(.9999);
-webkit-transform:scale(.9999);
-o-transform:scale(.9999);
transform:scale(.9999);
background:linear-gradient(45deg,#777,#444);
}

daylighthours:before {
position:absolute;
content:"Today Estimated";
font-size:12px;
margin-top:-20px;
display:inline;
margin-left:2px;
font-family:HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

daylighthours {
color:#f8f8f8;
display:block;
line-height:160px;
text-align:center;
width:140px;
font-size:26px;
font-weight:100;
margin-left:5px;
z-index:auto;
font-family:weathertext,"Helvetica Neue Light",Arial,sans-serif;
}

daylighthours .hrs {
color:#f8f8f8;
font-size:14px;
}

daylighthours:after {
position:absolute;
content:"of Daylight";
font-size:12px;
margin-top:20px;
display:inline;
margin-left:-60px;
font-family:HelveticaNeue,"Helvetica Neue Light",Arial,sans-serif;
}

.sunpos {
position:relative;
margin-top:-21px;
}

.sunpos > div {
margin-left:125px;
}

.sunpos-times {
margin-top:40px;
width:230px;
height:60px;
border-bottom:1rem thin #ccc;
overflow-y:hidden;
}

.sunpos-times .sunpos-path {
margin-left:25px;
width:190px;
height:190px;
overflow:hidden;
border:1px dashed #aaa;
border-radius:50%;
}

.sunpos-times .sunpos-symbol-path {
position:absolute;
color:#f26c4f;
text-shadow:0 0 0 #000;
height:15px;
-webkit-transition:0 2s linear;
-moz-transition:0 2s linear;
-o-transition:0 2s linear;
-ms-transition:0 2s linear;
-webkit-transform-origin:50% 100%;
-moz-transform-origin:50% 100%;
-o-transform-origin:50% 100%;
-ms-transform-origin:50% 100%;
-webkit-transform:rotateZ(-75deg);
-moz-transform:rotateZ(-75deg);
-o-transform:rotateZ(-75deg);
-ms-transform:rotateZ(-75deg);
transform-origin:50% 100%;
transform:rotateZ(-75deg);
left:70px;
bottom:0;
}

.sunpos-times .sunpos-symbol-path .symbol {
position:relative;
font-size:16px;
top:-8px;
}

.sunpos-times .sunpos-animation {
width:0;
height:160px;
-webkit-transition:width 2s linear;
-moz-transition:width 2s linear;
-o-transition:width 2s linear;
-ms-transition:width 2s linear;
transition:width 2s linear;
border-right:1px dashed #ccc;
background:#f26c4f;
}

.symbol {
font-size:10px;
}

mb {
color:#00adbc;
padding-top:17px;
margin-left:-60px;
-webkit-background-size:cover;
-ms-background-size:cover;

}

in {
color:#F26C4F;
padding-top:14px;
margin-left:-35px;
-webkit-background-size:cover;
-ms-background-size:cover;

}

wm2 {
color:#848688;
font:.4em arial,sans-serif;
}

.max {
position:relative;
margin-top:0;
margin-left:3px;
z-index:auto;
font:.83em arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.lo {
position:absolute;
margin-top:65px;
margin-left:39px;
z-index:auto;
font:.9em arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.feels,.feels1 {
position:relative;
color:#fff;
margin-left:auto;
text-align:center;
z-index:auto;
}

.feels {
margin-top:45px;
font:12px arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.feels1 {
margin-top:30px;
font:.7em arial,sans-serif;
}

.windchillcircle,.windgustmphcircle,.windmphcircle {
position:absolute;
border-radius:50%;
height:65px;
border-top:.1rem solid rgba(76,59,131,.1);
border-right:.1rem solid rgba(76,59,131,.1);
border-left:.1rem solid rgba(68,59,155,.1);
border-bottom:.1rem solid rgba(68,145,155,.1);
}

.windchillcircle {
width:65px;
float:right;
-webkit-background-size:cover;
-ms-background-size:cover;
margin-top:-56px;
margin-left:212px;
padding:2px;
}

.windchillcircle-content {
float:left;
line-height:1;
margin-top:-.9em;
padding-top:40%;
text-align:center;
width:100%;
color:#676e73;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
-webkit-font-smoothing:antialiased;
}

.windgustmphcircle-content,.windmphcircle-content {
float:left;
line-height:1;
color:#ccc;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
text-align:center;
}

.windmphcircle {
width:65px;
float:left;
-webkit-background-size:cover;
-ms-background-size:cover;
margin-top:-56px;
margin-left:12px;
padding:2px;
}

.windgustmphcircle {
width:65px;
float:left;
-webkit-background-size:cover;
-ms-background-size:cover;
margin-top:-56px;
margin-left:212px;
padding:2px;
}

#weekday,#wuforecast,#wuforecasts {
background:none;
}

.whitespace {
height:45px;
}

sup {
color:#828487;
top:-.5em;
}

.sup {
font-size:.3em;
color:#913636;
}

.suptemp {
font-size:12px;
color:#fff;
position:relative;
margin-bottom:50px;
margin-right:150px;
}

.centered {
float:none;
margin-left:auto;
margin-right:auto;
}

#wuforecasts {
max-width:420px;
margin-left:1px;
margin-right:0;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
font-weight:600;
}

#wuforecast {
float:left;
width:26%;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
margin:-10px 0 0 15px;
}

#wuforecast:last-child,#wuforecast:nth-child(1n),#wuforecast:nth-child(2n),#wuforecast:nth-child(3n) {
margin-right:0;
border:1px solid #555;
border-radius:4px;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
height:135px;
line-height:15px;
padding:0;
}

#weekday {
text-align:center;
font:.8em arial,sans-serif;
font-weight:700;
margin:0;
padding:3px;
}

#temp,#temp2 {
font:1em arial,sans-serif;
}

.kmh,.rain {
padding-top:5px;
font:.9em arial,sans-serif;
}

#icon {
width:55px;
height:43px;
float:left;
margin:0 10px;
padding:5px;
}

.wi-rotate-35 {
-webkit-transform:rotate(35deg);
-ms-transform:rotate(35deg);
transform:rotate(35deg);
}

.wi-rotate-55 {
-webkit-transform:rotate(55deg);
-ms-transform:rotate(55deg);
transform:rotate(55deg);
}

.wi-snow-wind:before {
content:"\f064";
}

.wi-snow:before {
content:"\f01b";
}

.wi-smog:before {
content:"\f074";
}

.wi-smoke:before {
content:"\f062";
}

.wi-lightning:before {
content:"\f016";
}

.wi-dust:before {
content:"\f063";
}

.wi-snowflake-cold:before {
content:"\f076";
color:#00adbc;
}

.wi-snowflake1-cold:before {
content:"\f076";
color:#f8f8f8;
padding:10px;
}

.wi-windy:before {
content:"\f021";
}

.wi-strong-wind:before {
content:"\f050";
}

.wi-sandstorm:before {
content:"\f082";
}

.wi-fire:before {
content:"\f0c7";
}

.wi-flood:before {
content:"\f07c";
}

.outlook {
border-radius:4px;
border:1px solid #777;
width:600px;
margin-left:4%;
padding:15px;
}

.outlook #dayicon,.outlook #nticon,.outlook #tomoicon {
z-index:1;
background-size: 60px;
}

.outlook .with-badge:before {
content:"";
border:20px solid #00adbc;
position:absolute;
top:0;
left:0;
border-bottom-color:transparent;
border-right-color:transparent;
}

.outlooktitle {
color:#ccc;
margin-top:5px;
text-align:center;
font:1em arial,sans-serif;
}

.outlooktitle span {
color:#ccc;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

#day,#night,#tomo,#dayaftertomo {
color:#ccc;
border-bottom:0 solid #e9ebf1;
text-align:left;
padding:5px;
}

#rainday,#rainnight,#raintomo,#dayafterraintomo {
color:#00adbc;
border-bottom:1px solid #777;
text-align:right;
margin-top:-10px;
font-size:.9em;
padding:5px;
}

#day {
font:.9em arial,sans-serif;
}

#day span,#tomo span {
color:#00adbc;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
text-align:left;
}

#dayaftertomo span {
color:#f26c4f;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
text-align:left;
}

#night,#tomo,#dayaftertomo {
margin-bottom:auto;
width:90%;
font:.9em arial,sans-serif;
}

#night span {
color:#ff6861;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
text-align:left;
}

#chartdiv {
width:100%;
height:500px;
}

.iconh3 {
color:#ccc;
margin-top:20px;
margin-left:125px;
margin-bottom:12px;
font-family:Arial;
font-size:12px;
line-height:12px;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.iconh3 span {
color:#f26c4f;
font-family:Arial;
font-size:12px;

}

.iconcurrent img {
width:128px;
height:101px;
margin-top:0;
float:left;
margin-left:10px;
font-size:0;
margin-bottom:-10px;
}

.wi {
display:inline-block;
font-family:weathericons;
font-style:normal;
font-weight:400;
line-height:1;
}

.wi-fw {
text-align:center;
width:1.4em;
}

.wi-rotate-45 {
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
transform:rotate(45deg);
}

.wi-rotate-90 {
-webkit-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
}

.wi-rotate-180 {
-webkit-transform:rotate(180deg);
-ms-transform:rotate(180deg);
transform:rotate(180deg);
}

.wi-rotate-270 {
-webkit-transform:rotate(270deg);
-ms-transform:rotate(270deg);
transform:rotate(270deg);
}

.wi-flip-horizontal {
-webkit-transform:scale(-1,1);
-ms-transform:scale(-1,1);
transform:scale(-1,1);
}

.wi-flip-vertical {
-webkit-transform:scale(1,-1);
-ms-transform:scale(1,-1);
transform:scale(1,-1);
}

.wi-raindrops:before {
content:"\f04e";
color:#00adbc;
}

.wi-raindrop:before {
content:"\f078";
color:#00adbc;
}

.wi-na:before {
content:"\f07b";
}

.wi-train:before {
content:"\f0cb";
}

.wi-moon-0:before {
content:"\f095";
}

.wi-moon-1:before {
content:"\f096";
}

.wi-moon-2:before {
content:"\f097";
}

.wi-moon-3:before {
content:"\f098";
}

.wi-moon-4:before {
content:"\f099";
}

.wi-moon-5:before {
content:"\f09a";
}

.wi-moon-6:before {
content:"\f09b";
}

.wi-moon-7:before {
content:"\f09c";
}

.wi-moon-8:before {
content:"\f09d";
}

.wi-moon-9:before {
content:"\f09e";
}

.wi-moon-10:before {
content:"\f09f";
}

.wi-moon-11:before {
content:"\f0a0";
}

.wi-moon-12:before {
content:"\f0a1";
}

.wi-moon-13:before {
content:"\f0a2";
}

.wi-moon-15:before {
content:"\f0a4";
}

.wi-moon-16:before {
content:"\f0a5";
}

.wi-moon-17:before {
content:"\f0a6";
}

.wi-moon-18:before {
content:"\f0a7";
}

.wi-moon-19:before {
content:"\f0a8";
}

.wi-moon-20:before {
content:"\f0a9";
}

.wi-moon-21:before {
content:"\f0aa";
}

.wi-moon-22:before {
content:"\f0ab";
}

.wi-moon-23:before {
content:"\f0ac";
}

.wi-moon-24:before {
content:"\f0ad";
}

.wi-moon-25:before {
content:"\f0ae";
}

.wi-moon-26:before {
content:"\f0af";
}

.wi-moon-27:before {
content:"\f0b0";
}

.wi-moon-alt-0:before {
content:"\f0eb";
}

.wi-moon-alt-1:before {
content:"\f0d0";
}

.wi-moon-alt-2:before {
content:"\f0d1";
}

.wi-moon-alt-3:before {
content:"\f0d2";
}

.wi-moon-alt-4:before {
content:"\f0d3";
}

.wi-moon-alt-5:before {
content:"\f0d4";
}

.wi-moon-alt-6:before {
content:"\f0d5";
}

.wi-moon-alt-7:before {
content:"\f0d6";
}

.wi-moon-alt-8:before {
content:"\f0d7";
}

.wi-moon-alt-9:before {
content:"\f0d8";
}

.wi-moon-alt-10:before {
content:"\f0d9";
}

.wi-moon-alt-11:before {
content:"\f0da";
}

.wi-moon-alt-12:before {
content:"\f0db";
}

.wi-moon-alt-13:before {
content:"\f0dc";
}

.wi-moon-alt-14:before {
content:"\f0dd";
}

.wi-moon-alt-15:before {
content:"\f0de";
}

.wi-moon-alt-16:before {
content:"\f0df";
}

.wi-moon-alt-17:before {
content:"\f0e0";
}

.wi-moon-alt-18:before {
content:"\f0e1";
}

.wi-moon-alt-19:before {
content:"\f0e2";
}

.wi-moon-alt-20:before {
content:"\f0e3";
}

.wi-moon-alt-21:before {
content:"\f0e4";
}

.wi-moon-alt-22:before {
content:"\f0e5";
}

.wi-moon-alt-23:before {
content:"\f0e6";
}

.wi-moon-alt-24:before {
content:"\f0e7";
}

.wi-moon-alt-25:before {
content:"\f0e8";
}

.wi-moon-alt-26:before {
content:"\f0e9";
}

.wi-moon-alt-27:before {
content:"\f0ea";
}

.wi-horizon-alt:before {
content:"\f046";
}

.wi-horizon:before {
content:"\f047";
}

.wi-sunrise:before {
color:#ff9350;
}

.wi-moonrise:before {
content:"\f0c9";
color:#ff9350;
}

.wi-moonset:before {
content:"\f0ca";
color:#f26c4f;
}

.wi-earthquake:before {
content:"\f0c6";
color:#fff;
font-size:1.8em;
}

.wi-earthquake1:before {
content:"\f0c6";
color:#aaa;
font-size:1em;
}

.wi-wind:before {
content:"\f0b1";
font-size:1.2em;
vertical-align:text-bottom;
}

.wi-wind.towards-45-deg {
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

.wi-wind.towards-90-deg {
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-ms-transform:rotate(90deg);
-o-transform:rotate(90deg);
transform:rotate(90deg);
}

.wi-wind.towards-135-deg {
-webkit-transform:rotate(135deg);
-moz-transform:rotate(135deg);
-ms-transform:rotate(135deg);
-o-transform:rotate(135deg);
transform:rotate(135deg);
}

.wi-meteor:before {
content:"\f071";
color:#f26c4f;
}

.updatedtime {
margin-top:-15px;
width:75px;
text-align:right;
margin-left:220px;
color:#F26C4F;
font:bold 11px  arial,sans-serif;
line-height:10px;
}

.updatedtimecurrent {
margin-top:-15px;
width:75px;
text-align:right;
margin-left:220px;
color:#F26C4F;
font:700 11px  arial,sans-serif;
line-height:10px;
}

.updatedtimealert {
margin-top:5px;
width:75px;
text-align:right;
margin-left:215px;
color:#F26C4F;
font:700 11px  arial,sans-serif;
line-height:10px;
}

.updatedtimedir {
margin-top:-25px;
width:75px;
text-align:right;
margin-left:135px;
position:absolute;
color:#F26C4F;
font:700 11px  arial,sans-serif;
line-height:10px;

}

.average,.averageuv {
margin-top:140px;
width:100px;
text-align:right;
position:absolute;
}

.averagetemp {
margin-top:-5px;
width:100px;
text-align:center;
position:absolute;
margin-left:-2px;
color:#F26C4F;
font:bold 11px  arial,sans-serif;
}

.averagetemp span {
color:#ccc;
font:normal 10px  arial,sans-serif;
text-align:center;
margin-left:-5px;
}

.average {
margin-left:180px;
color:#F26C4F;
font:bold 11px  arial,sans-serif;
}

.windrunarea {
position:absolute;
margin-left:-70px;
width:100px;
color:#F26C4F;
font:bold 11px  arial,sans-serif;
text-align:left;

}

.windrun {
width:120px;
color:#F26C4F;
font:bold 11px  arial,sans-serif;
margin-top:130px;
text-align:left;
margin-left:0px;

}

.windrun span{
color:#ccc;
font:normal 11px  arial,sans-serif;
}

.averageuv {
margin-left:-20px;
color:#F26C4F;
font:bold 11px  arial,sans-serif;
}

.averageindoor {
margin-left:255px;
color:#ccc;
font:normal 11px  arial,sans-serif;
position:absolute;
margin-top:43px;
width:85px;
}
.barometertrend1 {
margin-left:10px;
margin-top:120px;
width:100px;
text-align:left;
position:absolute;
color:#F26C4F;
font:bold 11px  arial,sans-serif;
line-height:9px;
}


.barometertrend1 hourtrend {
font:normal 10px  arial,sans-serif;
color:#ccc;
line-height:9px;
text-align:left;
margin-left:15px;
}




.indoorunit {
margin-left:230px;
margin-top:45px;
text-align:left;
font:10px arial,sans-serif;
position:absolute;
}

.humidityindoor {
margin-left:185px;
color:#F26C4F;
font:normal 26px  weathertext,arial,sans-serif;
position:absolute;
margin-top:25px;
width:185px;
}

.temperatureindoor {
margin-left:50px;
color:#F26C4F;
font:normal 26px  weathertext,arial,sans-serif;
position:absolute;
margin-top:25px;
width:185px;
}

.averagedir {
margin-left:105px;
margin-top:130px;
width:100px;
text-align:right;
position:absolute;
color:#F26C4F;
font:600 11px  arial,sans-serif;
}

.windalarm,.windcondition {
width:100px;
text-align:left;
}

.windicons {
font-size:0;
position:absolute;
margin-top:75px;
margin-left:135px;
border:3px solid #777;
border-radius:75%;
padding:3px;
}

.windicons img{
	width:20px;
}

.windcondition {
margin-top:-25px;
margin-left:65px;
position:absolute;
color:#ccc;
font:600 9px  arial,sans-serif;
}

.windalarm {
margin-top:-26px;
margin-left:185px;
position:absolute;
color:#ccc;
font:600 9px  arial,sans-serif;
}

.gustspeedtrend,.windspeedtrend{
margin-top:25px;
width:100px;
text-align:right;
position:absolute;
}
.avgspeedwind,.avgspeedgust{
margin-top:10px;
width:120px;
text-align:left;
position:absolute;
}

.gustspeedtrend {
margin-left:180px;
color:#F26C4F;
font:11px  arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
font-weight:600;
}

.gustspeedtrend span {
margin-bottom:0;
color:#ccc;
font-weight:600;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.windspeedtrend {
margin-left:10px;
color:#F26C4F;
font:11px  arial,sans-serif;
font-weight:600;
}

.windspeedtrend span {
margin-bottom:0;
color:#ccc;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}



.avgspeedwind {
margin-left:30px;
color:#F26C4F;
font:11px  arial,sans-serif;
font-weight:600;
}

.avgspeedwind span {
margin-bottom:0;
color:#ccc;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.avgspeedgust {
margin-left:200px;
color:#F26C4F;
font:11px  arial,sans-serif;
font-weight:600;
}

.avgspeedgust span {
margin-bottom:0;
color:#ccc;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}


.windseparator {
color:#777;
}

hr,img {
border:0;
}

body,figure {
margin:0;
}

sub,sup {
position:relative;
font-size:75%;
line-height:0;
vertical-align:baseline;
}

sub {
bottom:-.25em;
}

hr {
height:0;
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
-o-box-sizing:border-box;
box-sizing:content-box;
margin-top:20px;
margin-bottom:20px;
border-top:1px solid #eee;
}

.h2,.h3,.h4,.h5,.h6,h1,h2,h3,h4,h5,h6 {
font-family:inherit;
font-weight:400;
line-height:1.1;
color:inherit;
}

.h2 .small,.h2 small,.h3 .small,.h3 small,.h4 .small,.h4 small,.h5 .small,.h5 small,.h6 .small,.h6 small,h1 .small,h1 small,h2 .small,h2 small,h3 .small,h3 small,h4 .small,h4 small,h5 .small,h5 small,h6 .small,h6 small {
font-weight:400;
line-height:1;
color:#ccc;
}

.h1,.h2,.h3,h1,h2,h3 {
margin-top:20px;
margin-bottom:10px;
}

.h4,.h5,.h6,h4,h5,h6 {
margin-top:10px;
margin-bottom:10px;
}

.homeweatherinfo {
width:230px;
height:70px;
transform:translate(40px,-45px);
font-family:weathertext,sans-serif;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
padding:10px;
}

.homeweatherinfo span:first-child {
display:block;
color:#f26c4f;
font-weight:600;
font-size:15px;
font-family:weathertext,sans-serif;
}

.homeweatherinfo span:last-child {
color:#919191;
font-size:13px;
font-family:weathertext,sans-serif;
}

.homeweatherinfo span a {
color:#545454;
text-decoration:none;
font-weight:600;
font-family:weathertext,sans-serif;
}

.homeweathernotify {
width:300px;
height:65px;
border-radius:4px;
overflow:hidden;

font-family:HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
margin:-25px 0 0 45px;
background:none;
}

.homeweathernotify hv {
font-size:20px;
font-weight:400;
font-family:weathertext,Arial,sans-serif;
color:#f26c4f;
}

.homeweathernotify hvempty {
	font-size: 14px;
	font-family: "HelveticaNeue","Helvetica Neue Light","Helvetica Neue",Arial,"Lucida Grande",sans-serif;
	color: #ccc;
	font-weight: 400;
	margin-left: 25px;
	top: 35px;
}

.homeweathernotify hvcold {
font-size:20px;
font-family:weathertext,Arial,sans-serif;
color:#00adbc;
font-weight:400;
}

.homeweathernotify hv10 {
font-size:26px;
font-family:weathertext,Arial,sans-serif;
color:#8560a8;
font-weight:400;
}

.homeweathernotify span {
margin-top:25px;
font-size:12px;
font-family:HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.homeweathernotify description {
position:absolute;
margin-top:20px;
margin-left:2px;
font-size:13px;
line-height:12px;
font-family:HelveticaNeue,"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.windirection {
width:100%;
margin:10px 0 0 85px;
}

.homeweathercompass {
position:absolute;
width:175px;
height:175px;
text-align:center;
margin-top:-20px;
margin-left:-20px;
z-index:1;
}

.text {
z-index:10;
text-align:center;
font-family:weathertext,Arial;
font-size:26px;
color:#ccc;
margin:60px 0 auto;
}

.windvalue {
font-family:weathertext,Arial;
font-size:26px;
color:#ccc;
}

.homeweathercompass > .homeweathercompass-line {
position:absolute;
z-index:10;
left:25px;
right:25px;
top:25px;
bottom:25px;
-webkit-border-radius:100%;
-o-border-radius:100%;
-ms-border-radius:100%;
border-radius:100%;
border-left:8px solid rgba(95,96,97,0.5);
border-top:8px solid rgba(95,96,97,0.8);
border-right:8px solid rgba(95,96,97,0.5);
border-bottom:8px solid rgba(95,96,97,0.8);
-webkit-clip-path:polygon(100%0,100%100%,100%100%,0100%,00);
-ms-clip-path:polygon(100%0,100%100%,100%100%,0100%,00);
margin:auto;
}

.thearrow {
position:absolute;
z-index:200;
top:0;
left:50%;
margin-left:-5px;
width:10px;
height:50%;
-webkit-transform-origin:50% 100%;
-moz-transform-origin:50% 100%;
-o-transform-origin:50% 100%;
-ms-transform-origin:50% 100%;
transform-origin:50% 100%;
animation:rotate 1.5s both linear;
-webkit-animation:rotate 1.5s both linear;
-moz-animation:rotate 1.5s both linear;
-o-animation:rotate 1.5s both linear;
-ms-animation:rotate 1.5s both linear;
}

.thearrow:after {
content:'';
position:absolute;
left:50%;
top:0;
height:15px;
width:15px;
-webkit-border-radius:100%;
-o-border-radius:100%;
-ms-border-radius:100%;
border-radius:100%;
-webkit-transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-ms-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
background:#f26c4f;
}

.thearrow:before {
content:'';
width:6px;
height:6px;
position:absolute;
z-index:9;
left:2px;
top:-3px;
border:2px solid #fff;
-webkit-border-radius:100%;
-o-border-radius:100%;
-ms-border-radius:100%;
border-radius:100%;
}

.homeweathercompass > .windirectiontext {
display:block;
text-align:center;
color:#ccc;
font-family:Arial,sans-serif;
font-weight:600;
line-height:12px;
font-size:12px;
z-index:10;
margin:0 0 auto;
}

.animated .thearrow {
animation:rotate 1.5s both linear;
-webkit-animation:rotate 1.5s both linear;
-moz-animation:rotate 1.5s both linear;
-o-animation:rotate 1.5s both linear;
-ms-animation:rotate 1.5s both linear;
}

#raincontainer1 {
height:170px;
overflow:hidden;
position:absolute;
width:210px;
margin:-30px auto 0 10px;
}

.rainvalue {
font-size:1.1em;
color:rgba(255,255,255,0.6);
margin-left:30px;
margin-top:2%;
line-height:1em;
font-family:weathertext,Arial,sans-serif;
width:50%;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

.rainvalue span {
font-size:.6em;
}

.norain {
margin-left:-10px;
margin-top:15%;
height:60px;
width:75px;
padding:4px;
background:url(homepageicons/norain.png) no-repeat center;
}

.raintext1 {
font-size:10px;
color:#00adbc;
margin-left:0;
margin-top:1%;
font-weight:700;
line-height:10px;
font-family:Arial,sans-serif;
-webkit-font-smoothing:antialiased;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
}

.raintext1 span {
color:#f26c4f;
font-size:1em;
}

#beaker {
border:5px solid #aaa;
border-top:0;
border-radius:5px 5px 5px 5px;
height:120px;
left:50px;
bottom:0;
width:125px;
background:url(rain/marker.png) no-repeat;
}

#beaker:before,#beaker:after {
border:5px solid #aaa;
border-bottom:0;
border-radius:7px;
content:'';
height:5px;
position:absolute;
top:-0;
width:15px;
}

#beaker:before {
left:-15px;
}

#beaker:after {
right:-15px;
}



#raintoday {
    background-color: none;
    border: 3px solid #00adbc;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    border-radius: 0 0 1px 1px;
    bottom: 0;
    top: 15;
    width: 115px;
    margin-left: 55px;
    margin-bottom: 5px;
    background-image: url(rain/water.svg);
    background-repeat: no-repeat;
}
#raintoday:after {
    background-color: none;
    bottom: 0px;
    content: '';
    height: 200px;
    left: -40px;
    position: absolute;
    width: 120px;
}

.maxrainfallmonth {
position:absolute;
border-radius:50%;
height:60px;
width:60px;
float:right;
border:1px solid #777;
-webkit-background-size:cover;
-ms-background-size:cover;
margin-top:10px;
margin-left:210px;
padding:5px;
}

.maxrainfallyear {
position:absolute;
border-radius:50%;
height:60px;
width:60px;
float:right;
border:1px solid #777;
-webkit-background-size:cover;
-ms-background-size:cover;
margin-top:15px;
margin-left:-7px;
padding:5px;
}

.daylightvalue {
position:absolute;
font-family:weathertext,Arial;
left:-10px;
top:50px;
color:#f8f8f8;
z-index:1;
font-size:22px;
line-height:20px;
width:100px;
}

.daylightvalue minutes {
position:absolute;
font-family:weathertext,Arial;
left:40px;
color:#f8f8f8;
z-index:auto;
font-size:22px;
line-height:20px;
width:100px;
}

.daylightvalue:before {
position:absolute;
content:"Estimated";
display:block;
font-size:11px;
line-height:20px;
top:-28px;
left:45px;
letter-spacing:normal;
}

.daylightvalue span {
position:absolute;
color:#fff;
font-size:3px;
left:67px;
top:0;
}

.daylightvalue period {
position:absolute;
color:#fff;
font-size:11px;
left:47px;
top:20px;
}

.daylightvalue dayperiod {
position:absolute;
color:#fff;
font-size:10px;
left:20px;
top:20px;
width:100px;
}

.daylightvalue min {
position:absolute;
color:#fff;
font-size:9px;
left:85px;
top:-17px;
letter-spacing:normal;
}

.daylightvalue hrs {
position:absolute;
color:#fff;
font-size:9px;
left:40px;
top:-17px;
letter-spacing:normal;
}

.moonimage {
position:absolute;
left:55px;
top:94px;
color:#f8f8f8;
font-size:10px;
line-height:20px;
z-index:1;
}

.sunimage {
position:absolute;
left:55px;
top:4px;
color:#f8f8f8;
font-size:10px;
line-height:20px;
z-index:1;
}

.wi-daylight:before {
content:"\f06e";
}

.hrswassunrise {
margin-top:-120px;
width:100px;
position:absolute;
font-size:10px;
margin-left:-95px;
line-height:12px;
}

.hrstillsunset {
margin-top:-20px;
width:100px;
position:absolute;
font-size:10px;
margin-left:120px;
line-height:12px;
}

.sunrisehome {
margin-top:-120px;
width:100px;
position:absolute;
font-size:10px;
margin-left:120px;
line-height:12px;
}

.sunsethome {
margin-top:-20px;
width:100px;
position:absolute;
font-size:10px;
margin-left:-95px;
line-height:12px;
}

#daylight {
border:4px solid #777;
-webkit-border-radius:100%;
-o-border-radius:100%;
-ms-border-radius:100%;
border-radius:100%;
width:118px;
height:118px;
-webkit-transform:rotate(-90deg);
-moz-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
transform:rotate(-90deg);
}

.daylightbox {
margin-top:15px;
position:absolute;
margin-left:85px;
-webkit-border-radius:100%;
-o-border-radius:100%;
-ms-border-radius:100%;
border-radius:100%;
border:0 solid #777;
width:120px;
height:120px;
}

.daylightoutput {
position:absolute;
z-index:0;
}

.daylightoutputmoon {
position:absolute;
flex-direction:column;
justify-content:center;
align-items:center;
top:-2px;
left:-2px;
width:160px;
height:160px;
border-radius:100%;
border:10px solid #777;
z-index:10;
}

#navigation,#wuforecast:nth-child(4n),#wuforecast:nth-child(5n),#wuforecast:nth-child(6n),#wuforecast:nth-child(7n),#wuforecast:nth-child(8n),#wuforecast:nth-child(9n),.magnitude:nth-child(1n),.magnitude:nth-child(2n) {
display:none;
}

.fgtext {
color:#ccc;

}

.windvalue {
color:#ccc;
font-family:weathertext,arial;
}
.windunits {
	color:#F05E40;
}

.windblowing {
	
	position:absolute;margin-top:5px;margin-left:60px;font-size:11px;
	}



.gustblowing {
	
	position:absolute;margin-top:5px;margin-left:165px;font-size:11px;
	}
	
.beaufort {
	
	position:absolute;margin-top:55px;margin-left:50px;font-size:11px;
	}	



.menu li a:hover,.chartforecast:hover,.temptrendrising,a:hover,.homeweathernotify warmer {
color:#f26c4f;
}

.h2mbunit,h2mb span,.iconh3,.outlook,.updatedtime,#raincontainer1 div {
position:absolute;
}

.barometertrend falling,.barometertrend rising,.barometertrend steady,html {
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.barometertrend rising,#temp,.wi-sunset:before,.windirectiontext span {
color:#F26C4F;
}

.barometertrend falling,supraindrop,suprain,#temp2,.temptrendfalling,.homeweathernotify colder {
color:#00adbc;
}

.indoorfeels span,supsolar,suptemp1,suprain1,.luminance,.sun,.windir,#weekday,.a,.averagetemp span2 {
color:#ccc;
}

.featherlight .featherlight-inner,#wuforecast,.magnitude:first-child {
display:block;
}

::-webkit-scrollbar,::-moz-scrollbar,::-o-scrollbar,::scrollbar {
width:12px;
}

::-webkit-scrollbar-track,::-moz-scrollbar-track,::-o-scrollbar-track,::scrollbar-track {
border-left:1px solid #ccc;
background:#eaeaea;
}

::-webkit-scrollbar-thumb,::-moz-scrollbar-thumb,::-o-scrollbar-thumb,::scrollbar-thumb {
background:#F26C4F;
}

::-webkit-scrollbar-thumb:hover,::-moz-scrollbar-thumb:hover,::-o-scrollbar-thumb:hover,::scrollbar-thumb:hover {
background:#00adbc;
}

.cold,.freezing,.colder,.gettingcolder {
width:120px;
height:120px;
border-radius:50%;
top:0;
left:0;
bottom:0;
right:0;
font-size:0;
color:#ccc;
position:absolute;
text-align:center;
padding-top:25%;
}

.freezing,.cold,.gettingcolder,.colder,.mild,.milder,.gettingcooler,.hot,.hotter,.veryhot,.extremehot {
border:3px solid #5f6061;
}

.temperaturecirclefreezing,.temperaturecirclecold,.temperaturecirclegettingcolder {
width:115px;
height:115px;
border-radius:100%;
font-size:0;
color:#ccc;
position:absolute;
text-align:center;
padding-top:25%;
border:1px solid rgba(0,172,223,1);
}

suptemp,suprain2,.lo,.max {
color:#ccc;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.uv01:after,.uv03:after,.uv35:after,.uv67:after,.uv810:after,.uv1112:after {
content:'UVINDEX';
display:block;
font-size:10px;
}

.solarcircle span,.solarcircle1 span,.solarcircle2 span,.solarcircle3 span {
color:#ccc;
text-align:center;
font:600 .7em / 10px arial,sans-serif;
}

.solarcircle1,.solarcircle2 {
position:absolute;
margin-top:-15px;
-webkit-border-radius:100%;
border-radius:100%;
height:60px;
width:60px;
margin-left:100px;
border:2px solid #777;
padding-top:18px;
font-family:"Helvetica Neue Light","Helvetica Neue",Arial,sans-serif;
font-size:14px;
font-weight:600;
line-height:12px;
color:#4c9f83;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.solatext color1,.solatext color2 {
color:#4c9f83;
font-weight:600;
}

.eq45:after,.eq5:after {
content:'MODERATE';
display:block;
font-size:9px;
line-height:10px;
}

.eqcircle span,.eqcircle1 span,.eqcircle2 span,.eqcircle3 span,.eqcircle4 span {
color:#999;
text-align:center;
font:600 .3em / 10px arial,sans-serif;
}

.eqtext1 color1,.eqtext1 color2 {
color:#4c9f83;
font-weight:400;
}

.mooninfo img,.sun img {
margin-bottom:3px;
}

.moon,.moon1 {
color:#7c7e80;
font:normal .9em / .95em arial,sans-serif;
}

.moon:before,.moon1:before {
content:"";
color:#00adbc;
font:.9em arial,sans-serif;
}

.windmphcircle-content,.windgustmphcircle-content {
margin-top:-.9em;
padding-top:40%;
width:100%;
}

.wi-moon-14:before,.wi-sunrise:before,.wi-sunset:before {
content:"\f0a3";
}

.updatedtime span,.updatedtimecurrent span,.updatedtimealert span,.updatedtimedir span,.average span,.averageuv span,.averageindoor span,.averagedir span {
margin-bottom:0;
color:#ccc;
font-weight:400;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.humidityindoor span,.temperatureindoor span {
margin-bottom:0;
font-size:.4em;
color:#ccc;
font-weight:400;
font-family:weathertext,arial,sans-serif;
}

.windcondition span,.windalarm span {
margin-bottom:0;
color:#ccc;
font-weight:600;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
}

.maxrainfallmonth-content,.maxrainfallyear-content {
float:left;
line-height:1;
margin-top:-.9em;
padding-top:37%;
text-align:center;
width:100%;
color:#676e73;
font-family:Arial;
-webkit-font-smoothing:antialiased;
font-size:.8em;
}

@media screen and max-width 768px{
.weather-container {
display:inline;
width:300px;
height:200px;
font-family:arial,sans-serif;
text-rendering:optimizeLegibility;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
-moz-font-smoothing:antialiased;
-o-font-smoothing:antialiased;
-ms-font-smoothing:antialiased;
overflow:hidden;
margin:5px auto;
background:none;
}

.weather-item {
float:none;
width:310px;
margin-left:1px;
margin-top:10px;
overflow:hidden;
}

#icon {
width:55px;
height:43px;
float:left;
margin:0 0 0 10px;
padding:5px;
}

.homeweathernotifications,.homeweathernotify,.chart,.chart,.charttemperature,.chartforecast,.a,.chartbarometer,.chartdeprem,.chartdirection,.chartrainfall,.chartsky,.chartsolar,.chartwindspeed,.weather2-container,.weatherfooter-container,header {
display:none;
}
}


/* homeweatherstation beta css for mobile devices */
/* Tablet */
@media screen and (max-width: 768px) {
        .weather-container {
                display: inline;
                width: 300px;
                height: 200px;
                background-color: none;
                margin: 5px auto;
                font-family: arial,sans-serif;
                text-rendering: optimizeLegibility;
                -webkit-font-smoothing: antialiased;
                -moz-osx-font-smoothing: grayscale;
                -moz-font-smoothing: antialiased;
                -o-font-smoothing: antialiased;
                -ms-font-smoothing: antialiased;
                overflow: hidden;
        }

        .weather-item {
                float: none;
                width: 310px;
                margin-left: 1px;
                margin-top: 10px;
                overflow: hidden;
        /*scrolling overflow hidden keeping height correct for small devices */
        }

        .homeweathernotifications {
                display: none;
        }

        .homeweathernotify {
                display: none;
        }

        .chart,.chart,.charttemperature,.chartforecast,.a,.chartbarometer,.chartdeprem,.chartdirection,.chartrainfall,.chartsky,.chartsolar,.chartwindspeed,.weather2-container,.weatherfooter-container,.weatherheather {
                display: none;
        }

        header {
                display: none;
        }

        #icon {
                width: 55px;
                height: 43px;
                float: left;
                padding: 5px;
                margin: 0 0 0 10px;
        }
}