background-color: #EEEEEE;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-webkit-box-pack: center;
-webkit-justify-content: center;
box-shadow: 0px 0px 25px 1px rgba(50, 50, 50, 0.1);
-webkit-animation: appear 500ms ease-out forwards;
animation: appear 500ms ease-out forwards;
font-family: 'Lato', sans-serif;
-webkit-transform: translateX(150px);
-ms-transform: translateX(150px);
transform: translateX(150px);
-webkit-animation: title-appear 500ms ease-out 500ms forwards;
animation: title-appear 500ms ease-out 500ms forwards;
font-family: 'Lato', sans-serif;
-webkit-animation: title-appear 1s ease-out 500ms forwards;
animation: title-appear 1s ease-out 500ms forwards;
-webkit-animation: weather-icon-move 5s ease-in-out infinite;
animation: weather-icon-move 5s ease-in-out infinite;
box-shadow: rgba(255, 255, 0, 0.1) 0 0 0 4px;
-webkit-animation: light 800ms ease-in-out infinite alternate, weather-icon-move 5s ease-in-out infinite;
animation: light 800ms ease-in-out infinite alternate, weather-icon-move 5s ease-in-out infinite;
@-webkit-keyframes light {
box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 10px;
box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 17px;
box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 10px;
box-shadow: rgba(255, 255, 0, 0.2) 0 0 0 17px;
box-shadow: #e1e1e1 24px -6px 0 2px, #e1e1e1 10px 5px 0 5px, #e1e1e1 30px 5px 0 2px, #e1e1e1 11px -8px 0 -3px, #e1e1e1 25px 11px 0 -1px;
background-color: transparent;
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
-webkit-animation: rain 800ms ease-in-out infinite alternate;
animation: rain 800ms ease-in-out infinite alternate;
@-webkit-keyframes rain {
box-shadow: #2092A9 8px 0px, #2092A9 32px -6px, #2092A9 20px 0px;
box-shadow: #2092A9 8px 6px, #2092A9 32px 0px, #2092A9 20px 6px;
box-shadow: #2092A9 8px 0px, #2092A9 32px -6px, #2092A9 20px 0px;
box-shadow: #2092A9 8px 6px, #2092A9 32px 0px, #2092A9 20px 6px;
@-webkit-keyframes weather-icon-move {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
@keyframes weather-icon-move {
-webkit-transform: translateY(-8px);
transform: translateY(-8px);
font-family: 'Lato', sans-serif;
-webkit-animation: all 300ms ease-in-out;
animation: all 300ms ease-in-out;
@-webkit-keyframes appear {
-webkit-transform: scale(0);
-webkit-transform: scale(1.05);
-webkit-transform: scale(0.95);
-webkit-transform: scale(1);
-webkit-transform: scale(0);
-webkit-transform: scale(1.05);
-webkit-transform: scale(0.95);
-webkit-transform: scale(1);
@-webkit-keyframes title-appear {
-webkit-transform: translateX(150px);
transform: translateX(150px);
-webkit-transform: translateX(0px);
transform: translateX(0px);
@keyframes title-appear {
-webkit-transform: translateX(150px);
transform: translateX(150px);
-webkit-transform: translateX(0px);
transform: translateX(0px);