@font-face {
    font-family: "weather";
    font-style: normal;
    font-weight: normal;
    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");
}

#weather {
   
    text-transform: uppercase;
    width: auto;
}
#weather i {
    color: #986c87;
    font-family: weather;
    font-size: 55px;
    font-style: normal;
    font-weight: normal;
    line-height: 35px;
    text-transform: none;
}
.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";
}
#weather h2 {
    color: #986c87;
    font-size: 30px;
    font-weight: 300;
}
#weather ul {
    margin: 0;
    padding: 0;
}
#weather li {
    background: rgba(255, 255, 255, 0.9) none repeat scroll 0 0;
    border-radius: 5px;
    display: inline-block;
    padding: 20px;
}
#weather .currently {
    margin: 0 20px;
}