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

  Look inspired by https://www.degreees.com/
  Used for demo purposes.

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

@font-face {
  font-family: "weather";
  src: url("../fonts/artill_clean_icons-webfont.eot");
  src: url("../fonts/artill_clean_icons-webfont.eot?#iefix") format("embedded-opentype"),
    url("../fonts/artill_clean_icons-webfont.woff") format("woff"),
    url("../fonts/artill_clean_icons-webfont.ttf") format("truetype"),
    url("../fonts/artill_clean_icons-webfont.svg#artill_clean_weather_iconsRg") format("svg");
  font-weight: normal;
  font-style: normal;
}

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

.widget-weather i {
  color: #fff;
  font-family: weather;
  font-size: 100px;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  display: inline;
}

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

.widget-weather #weather h2 {
  margin: 20px 0px 0px 0px;
  color: #fff;
  font-size: 60px;
  font-weight: normal;
  text-align: center;
  text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);
  background: none;
  font-style: normal;
  padding: 30px 0px;
  font-family: "Open Sans", sans-serif;
  border-bottom: solid 1px #fff;
}

.widget-weather #weather ul {
  margin: 0;
  padding: 0;
  background-color: #fff;
  border-top: solid 5px #535353;
  border-bottom: solid 3px #e3e4e8;
}

.widget-weather #weather li {
  background: #fff;
  padding: 38px 0px;
  display: inline-block;
  font-size: 20px;
  font-weight: bold;
  color: #d8dce0;
  text-transform: capitalize;
}

.widget-weather #weather .currently {
  margin: 0 20px;
}