.climacon_component-stroke{fill:#eee;stroke-width:0;stroke:#000}.climacon_component-fill{fill:#aedef4;stroke-width:0;stroke:#000}*,:after,:before{box-sizing:border-box}.wrapper,body,html{width:100%}body{font-family:Lato,sans-serif;color:#fff}svg{display:inline-block;width:2em;shape-rendering:geometricPrecision}circle,g,path,rect{animation-iteration-count:infinite;animation-timing-function:linear;transform-origin:50% 50%;animation-duration:18s;animation-direction:normal}.climacon_componentWrap-sun{animation-name:rotate}.climacon_componentWrap_sunSpoke .climacon_component-stroke_sunSpoke{animation-name:scale;animation-direction:alternate;animation-duration:18s/4}.climacon_componentWrap_sunSpoke .climacon_component-stroke_sunSpoke:nth-child(even){animation-delay:18s/4}.climacon_componentWrap-moon{animation-name:partialRotate;animation-duration:18s;animation-direction:alternate}.climacon_componentWrap-wind{animation-name:translateWind;animation-duration:18s/3;animation-direction:alternate;animation-timing-function:ease-in-out}.climacon_componentWrap-snowflake{animation-name:rotate;animation-duration:18s * 3;animation-direction:normal}.climacon_componentWrap-moon_cloud,.climacon_componentWrap-sun_cloud{animation-iteration-count:1,infinite;animation-timing-function:ease-out,linear;animation-duration:18s/4,18s}.climacon_componentWrap-sun_cloud{animation-name:behindCloudMove,rotate;animation-delay:0,18s/4}.climacon_componentWrap-sun_cloud .climacon_componentWrap_sunSpoke .climacon_component-stroke_sunSpoke{fill-opacity:0;animation-name:fillOpacity,scale;animation-iteration-count:1,infinite;animation-delay:18s/4,0;animation-fill-mode:both}.climacon_componentWrap-sun_cloud .climacon_componentWrap_sunSpoke .climacon_component-stroke_sunSpoke:nth-child(even){animation-delay:18s/4}.climacon_componentWrap-moon_cloud{animation-name:behindCloudMove,partialRotate;animation-delay:0,18s/4}.climacon_component-stroke_drizzle{fill-opacity:0;animation-name:drizzleFall,fillOpacity2;animation-timing-function:ease-in;animation-duration:18s/12}@for $i from 1 through 3{){animation-delay:18s * .05 * $i - 18s * .05}}.climacon_component-stroke_rain{fill-opacity:0;animation-name:rainFall,fillOpacity2;animation-timing-function:ease-in;animation-duration:18s/6}.climacon_component-stroke_rain:nth-child(n+4),.climacon_component-stroke_rain_alt:nth-child(2){animation-delay:18s/12}.climacon_component-stroke_hail{//animation-name:translateY,fillOpacity2//animation-timing-function: ease-in//animation-duration: 18s/24}.climacon_component-stroke_hailAlt{fill-opacity:1;animation-timing-function:ease-in;animation-duration:18s/18}.climacon_component-stroke_snow,.climacon_wrapperComponent-snowAlt{fill-opacity:0;animation-timing-function:ease-in-out;animation-duration:18s/2}.climacon_component-stroke_hailAlt-left{animation-name:hailLeft,fillOpacity2}.climacon_component-stroke_hailAlt-middle{animation-name:hailMiddle,fillOpacity2}.climacon_component-stroke_hailAlt-middle:nth-child(2){animation-name:hailMiddle2,fillOpacity2}.climacon_component-stroke_hailAlt-right{animation-name:hailRight,fillOpacity2}@for $i from 1 through 6{){animation-delay:18s/18/6 * $i - 18s/18/6}}.climacon_component-stroke_snow{animation-name:snowFall,fillOpacity2}.climacon_component-stroke_snow:nth-child(3){animation-name:snowFall2,fillOpacity2}@for $i from 1 through 3{){animation-delay:18s/2/3 * $i - 18s/2/3}}.climacon_wrapperComponent-snowAlt{animation-name:snowFall,fillOpacity2}.climacon_component-stroke_fogLine,.climacon_component-stroke_lightning,.climacon_component-stroke_tornadoLine{animation-duration:18s;animation-iteration-count:infinite}.climacon_component-stroke_fogLine{fill-opacity:.5;animation-name:translateFog,fillOpacityFog;animation-direction:normal;animation-timing-function:ease-in}.climacon_component-stroke_fogLine:nth-child(even){animation-delay:18s/2}.climacon_component-stroke_lightning{fill-opacity:0;animation-name:fillOpacityLightning;animation-direction:normal;animation-timing-function:ease-out}.climacon_component-stroke_tornadoLine{animation-name:translateTornado1;animation-direction:alternate;animation-timing-function:ease-in-out}.climacon_component-stroke_tornadoLine:nth-child(1){animation-name:translateTornado1}.climacon_component-stroke_tornadoLine:nth-child(2){animation-name:translateTornado2}.climacon_component-stroke_tornadoLine:nth-child(3){animation-name:translateTornado3}.climacon_component-stroke_tornadoLine:nth-child(4){animation-name:translateTornado4}.climacon_component-stroke_tornadoLine:nth-child(5){animation-name:translateTornado5}.climacon_component-stroke_tornadoLine:nth-child(6){animation-name:translateTornado6}.climacon_iconWrap-sun .climacon_component-stroke_sunSpoke,.climacon_iconWrap-sunFill .climacon_component-stroke_sunSpoke{fill-opacity:1;animation-name:scale;animation-duration:3s;animation-iteration-count:infinite;animation-delay:0;animation-fill-mode:both;animation-direction:alternate}.climacon_iconWrap-sun .climacon_component-stroke_sunSpoke:nth-child(even),.climacon_iconWrap-sunFill .climacon_component-stroke_sunSpoke:nth-child(even){animation-delay:18s/4}.climacon-iconWrap_sunFill .climacon_component-stroke_sunSpoke{fill-opacity:1;animation-name:scale;animation-iteration-count:infinite;animation-delay:0;animation-fill-mode:both;animation-direction:alternate}.climacon-iconWrap_sunFill .climacon_component-stroke_sunSpoke:nth-child(even){animation-delay:18s/4}.climacon_component-stroke_arrow-up{fill-opacity:0;animation-name:fillOpacity2,translateArrowUp;animation-duration:18s/4}.climacon_component-stroke_arrow-down{fill-opacity:0;animation-name:fillOpacity2,translateArrowDown;animation-duration:18s/4}.climacon_componentWrap-sunrise .climacon_component-stroke_sunSpoke,.climacon_componentWrap-sunset .climacon_component-stroke_sunSpoke{animation-name:scale;animation-direction:alternate;animation-iteration-count:infinite;animation-duration:18s/4;animation-delay:0;animation-fill-mode:both}.climacon_componentWrap-sunrise .climacon_component-stroke_sunSpoke:nth-child(even),.climacon_componentWrap-sunset .climacon_component-stroke_sunSpoke:nth-child(even){animation-delay:18s/4}.climacon_componentWrap-sunriseAlt{animation-name:translateSunrise,fillOpacity;animation-duration:18s,18s/2;animation-direction:normal;animation-iteration-count:1;animation-fill-mode:forwards}.climacon_componentWrap-sunriseAlt .climacon_component-stroke_sunSpoke{fill-opacity:0;animation-name:fillOpacity,scale;animation-direction:normal,alternate;animation-iteration-count:1,infinite;animation-duration:18s/4;animation-delay:18s/4,0;animation-fill-mode:both}.climacon_componentWrap-sunriseAlt .climacon_component-stroke_sunSpoke:nth-child(even){animation-delay:18s/4,18s/4}.climacon_componentWrap-sunsetAlt{animation-timing-function:ease-out;animation-name:translateSunset;animation-delay:0;animation-duration:18s;animation-direction:normal;animation-iteration-count:1;animation-fill-mode:forwards}@keyframes rotate{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}@keyframes partialRotate{0%,100%,50%{transform:rotate(0)}25%{transform:rotate(-15deg)}75%{transform:rotate(15deg)}}@keyframes scale{0%{transform:scale(1,1)}100%{transform:scale(.5,.5)}}@keyframes behindCloudMove{0%{transform:translateX(-70px * .025) translateY(70px * .025)}100%{transform:translateX(0) translateY(0)}}@keyframes drizzleFall{0%{transform:translateY(0)}100%{transform:translateY(70px * .3)}}@keyframes rainFall{0%{transform:translateY(0)}100%{transform:translateY(70px * .2)}}@keyframes rainFall2{0%{transform:translateY(0)}50%{transform:translateY(70px * .2)}100%{transform:translateX(70px * .2) translateY(70px * .2)}}$i:51; $t:0; @keyframes hailLeft{50%{transform:translateY(70px * .25)}@while $i <= 100{%{$eq:sin($t)/2;transform:translateY($eq * -(70px * .25) + 70px * .25) translateX(-.3px * ($i - 50))}}}$i:51; $t:0; @keyframes hailMiddle{50%{transform:translateY(70px * .25)}@while $i <= 100{%{$eq:sin($t)/2;transform:translateY($eq * -(70px * .25) + 70px * .25) translateX(-.15px * ($i - 50))}}}pi() / 100:pi() / 100; $i:51; $t:0; @keyframes hailMiddle2{50%{transform:translateY(70px * .25)}@while $i <= 100{%{$eq:sin($t)/2;transform:translateY($eq * -(70px * .25) + 70px * .25) translateX(.15px * ($i - 50))}}}$i:51; $t:0; @keyframes hailRight{50%{transform:translateY(70px * .25)}@while $i <= 100{%{$eq:sin($t)/2;transform:translateY($eq * -(70px * .25) + 70px * .25) translateX(.3px * ($i - 50))}}}@keyframes fillOpacity{0%{fill-opacity:0;stroke-opacity:0}100%{fill-opacity:1;stroke-opacity:1}}@keyframes fillOpacity2{0%,100%{fill-opacity:0;stroke-opacity:0}50%{fill-opacity:1;stroke-opacity:1}}@keyframes lightningFlash{0%,100%,2%,50%,52%,54%{fill-opacity:0}1%,51%,53%{fill-opacity:1}}$i:0; $t:0; @keyframes snowFall{@while $i <= 100{%{$eq:sin($t);transform:translateY(70px * .25 * $i * .01) translateX(-$eq * ($i - 50) * 1px / 4)}}}$i:0; $t:0; @keyframes snowFall2{@while $i <= 100{%{$eq:sin($t);transform:translateY(70px * .25 * $i * .01) translateX($eq * ($i - 50) * 1px / 4)}}}@keyframes translateTornado1{0%{transform:translateY(0)}25%{transform:translateX(70px * .0571)}75%{transform:translateX(-70px * .0571)}100%{transform:translateX(0)}}@keyframes translateTornado2{0%{transform:translateY(0)}25%{transform:translateX(70px * .0286)}75%{transform:translateX(-70px * .0286)}100%{transform:translateX(0)}}@keyframes translateTornado3{0%{transform:translateY(0)}25%{transform:translateX(70px * .1143)}75%{transform:translateX(-70px * .1143)}100%{transform:translateX(0)}}@keyframes translateTornado4{0%{transform:translateY(0)}25%{transform:translateX(70px * .0857)}75%{transform:translateX(-70px * .0857)}100%{transform:translateX(0)}}@keyframes translateTornado5{0%{transform:translateY(0)}25%{transform:translateX(70px * .1429)}75%{transform:translateX(-70px * .1429)}100%{transform:translateX(0)}}@keyframes translateTornado6{0%{transform:translateY(0)}25%{transform:translateX(70px * .0857)}75%{transform:translateX(-70px * .0857)}100%{transform:translateX(0)}}@keyframes fillOpacityLightning{0%,100%,50%,53%,60%,7%{fill-opacity:0;stroke-opacity:0}1%,51%,54%{fill-opacity:1;stroke-opacity:1}}@keyframes translateFog{0%{transform:translateY(0)}25%{transform:translateX(70px * .0357)}75%{transform:translateX(-70px * .0357)}100%{transform:translateX(0)}}@keyframes fillOpacityFog{0%,100%{fill-opacity:.5;stroke-opacity:.5}50%{fill-opacity:1;stroke-opacity:1}}@keyframes translateSunrise{0%{transform:translateY(0)}100%,25%{transform:translateY(-70px * .2286)}}@keyframes translateSunset{0%{transform:translateY(-70px * .2286)}100%,25%{transform:translateY(-70px * .0571)}}@keyframes translateArrowDown{0%{transform:translateY(70px * .0286)}100%{transform:translateY(70px * .0714)}}@keyframes translateArrowUp{0%{transform:translateY(-70px * .0286)}100%{transform:translateY(-70px * .0714)}}@keyframes translateWind{0%{transform:translateY(0)}25%{transform:translateX(70px * .0714)}75%{transform:translateX(-70px * .0714)}100%{transform:translateX(0)}}