@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;
}

#weather {
    height: 100%;
    margin: 0px auto;
    text-align: right;
}

    #weather [class^="icon-"]::before, #weather [class*=" icon-"]::before {
        font-size: 50px !important;
        margin-bottom: 20px;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
    }

    #weather .h1 {
        margin: 0;
        margin-top: 25px;
        color: #000;
        font-family: weather;
        font-size: 30px;
        font-weight: normal;
        line-height: 30px;
        display: inline-flex;
    }

        #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: -50px 0 8px;*/
        /*text-shadow: 0px 1px 3px rgba(0, 0, 0, 0.15);*/
    }

    #weather .h3 {
        /*margin: -50px 0 8px;*/
        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;
    }