/*
  Docs at http://http://simpleweatherjs.com

  Weather icon font from http://fonts.artill.de/collection/artill-weather-icons

  DO NOT hotlink the assets/font included in this demo. If you wish to use the same font icon then download it to your local assets at the link above. If you use the links below odds are at some point they will be removed and your version will break.
*/

@font-face {
    font-family: 'weather';
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot');
    src: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.eot?#iefix') format('embedded-opentype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.woff') format('woff'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.ttf') format('truetype'),
         url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/93/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg') format('svg');
    font-weight: normal;
    font-style: normal;
}

.loading {
  margin: 65px 0 0;
}

#weather {
  width: 100%;
  height: 100%;
  margin: 0px auto; 	
  text-align: center;
  text-transform: uppercase;
}

#weather h1 {
  margin: 0;
  color: #fff;
  font-family: weather;
  font-size: 80px;
  font-weight: normal;
  line-height: 1.0;
}

#weather h1.icon-0:before { content: ":"; }
#weather h1.icon-1:before { content: "p"; }
#weather h1.icon-2:before { content: "S"; }
#weather h1.icon-3:before { content: "Q"; }
#weather h1.icon-4:before { content: "S"; }
#weather h1.icon-5:before { content: "W"; }
#weather h1.icon-6:before { content: "W"; }
#weather h1.icon-7:before { content: "W"; }
#weather h1.icon-8:before { content: "W"; }
#weather h1.icon-9:before { content: "I"; }
#weather h1.icon-10:before { content: "W"; }
#weather h1.icon-11:before { content: "I"; }
#weather h1.icon-12:before { content: "I"; }
#weather h1.icon-13:before { content: "I"; }
#weather h1.icon-14:before { content: "I"; }
#weather h1.icon-15:before { content: "W"; }
#weather h1.icon-16:before { content: "I"; }
#weather h1.icon-17:before { content: "W"; }
#weather h1.icon-18:before { content: "U"; }
#weather h1.icon-19:before { content: "Z"; }
#weather h1.icon-20:before { content: "Z"; }
#weather h1.icon-21:before { content: "Z"; }
#weather h1.icon-22:before { content: "Z"; }
#weather h1.icon-23:before { content: "Z"; }
#weather h1.icon-24:before { content: "E"; }
#weather h1.icon-25:before { content: "E"; }
#weather h1.icon-26:before { content: "3"; }
#weather h1.icon-27:before { content: "a"; }
#weather h1.icon-28:before { content: "A"; }
#weather h1.icon-29:before { content: "a"; }
#weather h1.icon-30:before { content: "A"; }
#weather h1.icon-31:before { content: "6"; }
#weather h1.icon-32:before { content: "1"; }
#weather h1.icon-33:before { content: "6"; }
#weather h1.icon-34:before { content: "1"; }
#weather h1.icon-35:before { content: "W"; }
#weather h1.icon-36:before { content: "1"; }
#weather h1.icon-37:before { content: "S"; }
#weather h1.icon-38:before { content: "S"; }
#weather h1.icon-39:before { content: "S"; }
#weather h1.icon-40:before { content: "M"; }
#weather h1.icon-41:before { content: "W"; }
#weather h1.icon-42:before { content: "I"; }
#weather h1.icon-43:before { content: "W"; }
#weather h1.icon-44:before { content: "a"; }
#weather h1.icon-45:before { content: "S"; }
#weather h1.icon-46:before { content: "U"; }
#weather h1.icon-47:before { content: "S"; }

#weather h2 {
  margin: 0px 0 8px;
  color: #fff;
  font-size: 40px;
  font-weight: 300;
  text-align: center;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
}
#weather h3 {
  margin: 0px 0 0px;
  color: #fff;
  font-size: 20px;
  font-weight: 300;
  text-align: center;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
}
#weather ul {
  margin: 0;
  padding: 0;
}

#weather li {
  background: #fff;
  background: rgba(255,255,255,0.90);
  margin: 0 15px;
  padding: 20px;
  display: inline-block;
  border-radius: 5px;
}

#weather .updated {
  opacity: 0.45;
}





#weather2 {
  width: 100%;
  height: 100%;
  margin: 0px auto; 	
  text-align: center;
  text-transform: uppercase;
}

#weather2 h1 {
  margin: 0;
  color: #fff;
  font-family: weather;
  font-size: 80px;
  font-weight: normal;
  line-height: 1.0;
}

#weather2 h1.icon-0:before { content: ":"; }
#weather2 h1.icon-1:before { content: "p"; }
#weather2 h1.icon-2:before { content: "S"; }
#weather2 h1.icon-3:before { content: "Q"; }
#weather2 h1.icon-4:before { content: "S"; }
#weather2 h1.icon-5:before { content: "W"; }
#weather2 h1.icon-6:before { content: "W"; }
#weather2 h1.icon-7:before { content: "W"; }
#weather2 h1.icon-8:before { content: "W"; }
#weather2 h1.icon-9:before { content: "I"; }
#weather2 h1.icon-10:before { content: "W"; }
#weather2 h1.icon-11:before { content: "I"; }
#weather2 h1.icon-12:before { content: "I"; }
#weather2 h1.icon-13:before { content: "I"; }
#weather2 h1.icon-14:before { content: "I"; }
#weather2 h1.icon-15:before { content: "W"; }
#weather2 h1.icon-16:before { content: "I"; }
#weather2 h1.icon-17:before { content: "W"; }
#weather2 h1.icon-18:before { content: "U"; }
#weather2 h1.icon-19:before { content: "Z"; }
#weather2 h1.icon-20:before { content: "Z"; }
#weather2 h1.icon-21:before { content: "Z"; }
#weather2 h1.icon-22:before { content: "Z"; }
#weather2 h1.icon-23:before { content: "Z"; }
#weather2 h1.icon-24:before { content: "E"; }
#weather2 h1.icon-25:before { content: "E"; }
#weather2 h1.icon-26:before { content: "3"; }
#weather2 h1.icon-27:before { content: "a"; }
#weather2 h1.icon-28:before { content: "A"; }
#weather2 h1.icon-29:before { content: "a"; }
#weather2 h1.icon-30:before { content: "A"; }
#weather2 h1.icon-31:before { content: "6"; }
#weather2 h1.icon-32:before { content: "1"; }
#weather2 h1.icon-33:before { content: "6"; }
#weather2 h1.icon-34:before { content: "1"; }
#weather2 h1.icon-35:before { content: "W"; }
#weather2 h1.icon-36:before { content: "1"; }
#weather2 h1.icon-37:before { content: "S"; }
#weather2 h1.icon-38:before { content: "S"; }
#weather2 h1.icon-39:before { content: "S"; }
#weather2 h1.icon-40:before { content: "M"; }
#weather2 h1.icon-41:before { content: "W"; }
#weather2 h1.icon-42:before { content: "I"; }
#weather2 h1.icon-43:before { content: "W"; }
#weather2 h1.icon-44:before { content: "a"; }
#weather2 h1.icon-45:before { content: "S"; }
#weather2 h1.icon-46:before { content: "U"; }
#weather2 h1.icon-47:before { content: "S"; }

#weather2 h2 {
  margin: 0px 0 8px;
  color: #fff;
  font-size: 40px;
  font-weight: 300;
  text-align: center;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
}
#weather2 h3 {
  margin: 0px 0 0px;
  color: #fff;
  font-size: 20px;
  font-weight: 300;
  text-align: center;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
}
#weather2 ul {
  margin: 0;
  padding: 0;
}

#weather2 li {
  background: #fff;
  background: rgba(255,255,255,0.90);
  margin: 0 15px;
  padding: 20px;
  display: inline-block;
  border-radius: 5px;
}

#weather2 .updated {
  opacity: 0.45;
}