@import url(https://fonts.googleapis.com/css?family=Raleway:300,400,600);.background{z-index:0;position:fixed;top:0;left:0;right:0;bottom:0}.weather-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;height:100%;width:100%;overflow:auto;position:relative}#card{overflow:hidden;top:0;left:0;right:0;bottom:0;position:fixed}.thunder .weather{background-color:#2f343d}.rain .weather{background-color:#383838}.sun .weather{background-color:#3c3c5f}.weather .cloud{-webkit-transition:fill 2s ease;transition:fill 2s ease}.weather #cloud1{fill:#5f5f5f}.thunder .weather #cloud1{fill:#3f343d}.weather #cloud2{fill:#464646}.thunder .weather #cloud2{fill:#2b2e38}.weather #cloud3{fill:#555}.thunder .weather #cloud3{fill:#3b3938}#back,#outer{position:fixed;pointer-events:none}#main{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}#calendar{border-radius:5px;-ms-flex-item-align:end;align-self:flex-end;-webkit-box-shadow:9px 7px 40px -6px rgba(0,0,0,.25);box-shadow:9px 7px 40px -6px rgba(0,0,0,.25);margin:0 20px;overflow:hidden;background-color:rgba(0,0,0,.4)}#calendar .header{text-align:center;position:relative;z-index:100}#calendar .header h1{margin:0;padding:0;font-size:24px;line-height:62px;font-weight:100;letter-spacing:1px}#calendar .week:first-child .day-name{display:block}#calendar .day{display:inline-block;width:40px;padding:7px;text-align:center;vertical-align:top;position:relative;z-index:100}#calendar .day.other{color:hsla(0,0%,100%,.3)}#calendar .day.today{color:#4dbdd6;font-weight:700;background-color:rgba(0,0,0,.4);border-radius:5px}#calendar .day-name{font-size:11px;text-transform:uppercase;margin-bottom:5px;color:hsla(0,0%,100%,.9);letter-spacing:.7px;display:none}#calendar .day-number{font-size:22px;letter-spacing:1.5px}#calendar .day .day-events{list-style:none;margin-top:3px;text-align:center;height:12px;line-height:6px;overflow:hidden}#calendar .day .day-events span{vertical-align:top;display:inline-block;padding:0;margin:0;width:5px;height:5px;line-height:5px;margin:0 1px}#calendar .blue{background:#9ccaeb}#calendar .orange{background:#f7a700}#calendar .green{background:#99c66d}#calendar .yellow{background:#f9e900}#calendar .details{position:relative;width:420px;height:75px;background:#a4a4a4;margin-top:5px;border-radius:4px}#calendar .details.in{-webkit-animation:moveFromTopFade .5s ease both;animation:moveFromTopFade .5s ease both}#calendar .details.out{-webkit-animation:moveToTopFade .5s ease both;animation:moveToTopFade .5s ease both}#calendar .arrow{position:absolute;top:-5px;left:50%;margin-left:-2px;width:0;height:0;border-style:solid;border-width:0 5px 5px;border-color:transparent transparent #a4a4a4;-webkit-transition:all .7s ease;transition:all .7s ease}