.weather-app{position:relative;height:40vh;width:40vw;min-height:410px;max-width:768px;margin:5vh auto;box-shadow:0 0 10px 5px #ddd;border-radius:10px;display:flex;flex-direction:column}.weather-app .weather-main-screen{flex:1;position:relative;border-radius:10px 10px 0 0;overflow:hidden}.weather-app .weather-info-panel{position:relative;height:30%;border-radius:0 0 10px 10px}.weather-app .weather-info-panel .info-tiles-container{height:100%;overflow:hidden;display:flex;align-items:center}.weather-app .weather-info-panel .info-tiles-container .info-tiles-row{width:100%;padding:0 5px;display:flex}.weather-app .weather-info-panel .info-tiles-container .info-tiles-row>div{background-color:rgba(255,255,255,.05);border-radius:10px;flex:1;display:flex;flex-direction:column;padding:10px 0;margin:0 2.5px;text-align:center;color:#fff;opacity:.75}.weather-app .weather-info-panel .info-tiles-container .info-tiles-row>div i{font-size:2.5em}.weather-app .weather-info-panel .info-tiles-container .info-tiles-row>div span{margin-top:15px;font-size:1.25em}.weather-app .weather-info-panel .info-tiles-container .info-tiles-row p{font-weight:bold;font-size:.85em;text-transform:uppercase;color:#fff;opacity:.8}@media only screen and (max-width:767px){.weather-app{font-size:.75em}}.weather-animated-view .cloud{opacity:.2;width:120px;height:80px;background-color:#fff;position:absolute;top:100px;border-radius:35px;animation:move-clouds 40s linear infinite}.weather-animated-view .cloud::after{content:"";width:110px;height:110px;border-radius:50%;position:absolute;right:-15px;top:-30px;background-color:#fff}.weather-animated-view .cloud::before{content:"";width:80px;height:80px;border-radius:50%;position:absolute;left:-15px;top:0;background-color:#fff}.weather-animated-view .cloud:nth-child(2){opacity:.15;top:30px;transform:scale(.55);animation:move-clouds 60s linear alternate infinite}.weather-animated-view .cloud:nth-child(3){opacity:.25;top:80px;transform:scale(1.2);animation:move-clouds 60s alternate infinite}.weather-animated-view .hill{position:absolute}.weather-animated-view .hill .tree{height:30px;width:5px;position:absolute;top:-27.5px;right:calc(37.5% + 70px);background-color:inherit}.weather-animated-view .hill .tree:last-child{top:-22.5px;right:calc(37.5% + 85px)}.weather-animated-view .hill .tree:after{content:"";border:10px solid transparent;border-bottom:30px solid;border-bottom-color:inherit;top:-22.5px;left:-7px;position:absolute}.weather-animated-view .hill .house{position:absolute;top:-40px;right:37.5%;height:50px;width:50px;background-color:inherit}.weather-animated-view .hill .house .window{position:absolute;top:10px;left:20px;width:10px;height:15px;background-color:#fff}.weather-animated-view .hill .house:after{content:"";position:absolute;top:-55px;left:-5px;border:30px solid transparent;border-bottom:30px solid;border-bottom-color:inherit}.weather-animated-view .hill:last-child{width:110%;height:100px;border-radius:30%;bottom:-40px;transform:rotate(-3.5deg)}.weather-animated-view .hill:nth-child(3){width:100%;height:100px;border-radius:100%;bottom:20px;right:-30%;transform:rotate(-5deg)}.weather-animated-view .hill:nth-child(2){width:100%;height:100px;border-radius:100%;bottom:0;left:-50%}.weather-animated-view .hill:first-child{width:100vw;height:300px;max-width:1200px;border-radius:100%;bottom:-150px;left:-5%}.weather-basic-info{position:relative;padding-left:3.5vh;top:10px;color:#fff;font-size:1.25em;z-index:1}.weather-basic-info p:last-child{position:relative;padding-left:3.5vh;font-size:1.25em;top:-10px;text-transform:capitalize}.weather-temperature{background-color:rgba(255,255,255,.05);border-radius:10px;position:absolute;left:2%;bottom:5%;padding:10px;font-size:8vw;font-weight:700;color:#fff}.weather-temperature .temperature-boundaries-container{position:relative;display:inline-block;min-width:30px;padding-top:15%}.weather-temperature .temperature-boundaries-container .temperature-boundaries{position:absolute;right:10%;bottom:-20%;display:flex;flex-direction:column}.weather-temperature .temperature-boundaries-container .temperature-boundaries .temperature-boundary{flex:1;display:inline-block;font-size:.2em;font-weight:normal;opacity:.8;white-space:nowrap}.weather-temperature .temperature-boundaries-container .temperature-boundaries .temperature-boundary [class^="wi"]{font-size:.75em;margin-right:5px}.weather-temperature>span:not(.wi-thermometer){position:relative;top:7.5px;font-size:.5em;vertical-align:top}.weather-temperature .wi-thermometer{margin-right:10px;font-size:.5em;vertical-align:middle}@media only screen and (max-width:767px){.weather-temperature .temperature-boundaries-container{right:1.5%}}.weather-temperature-options{position:absolute;top:7.5px;right:7.5px;font-size:14px}.weather-temperature-options i{opacity:.5;cursor:pointer}.weather-temperature-options i:hover{opacity:1}.weather-temperature-options .temperature-settings{position:absolute;background-color:#fff;top:17.5px;color:#808080;padding:5px 10px;border-radius:0 10px 10px 10px;white-space:nowrap;cursor:pointer;font-weight:normal}.weather-temperature-options .temperature-settings span{font-size:1.5em;vertical-align:sub}.weather-icon{position:absolute;top:5%;right:5%;font-size:5em;text-align:center;color:#fff}.weather-icon-main{padding:35px 0 0}.weather-icon .weather-day-length{position:relative;top:15px;background-color:rgba(255,255,255,.05);border-radius:10px;padding:15px;margin-top:1vh}.weather-icon .weather-day-length>div{display:flex;align-items:center}.weather-icon .weather-day-length>div span{flex:1;font-size:.33em;text-align:right}.weather-icon .weather-day-length-icon{min-width:40px;margin-right:10px;font-size:.375em;text-align:center}@media only screen and (max-width:767px){.weather-icon .weather-day-length-icon{min-width:30px}}.refresh-button{display:flex;position:absolute;left:3%;bottom:34%;height:6vh;width:6vh;background-color:#fff;border-radius:30px;box-shadow:0 7.5px 5px 1px rgba(0,0,0,.2);cursor:pointer;justify-content:center;align-items:center;z-index:30}.refresh-button i{font-size:2.5em}.refresh-button:hover{bottom:33.5%}@media only screen and (max-width:767px){.refresh-button{bottom:19.25%}.refresh-button:hover{bottom:19.5%}}.simple-switch-container{position:absolute;right:15px;top:15px;z-index:10;display:flex;align-items:center}.simple-switch-container span{color:#fff;font-size:12px;font-weight:bold;margin:0 5px}.simple-switch-container .simple-switch{cursor:pointer}.simple-switch-container .simple-switch-track{position:relative;height:8px;width:35px;background-color:#fff;border-radius:10px}.simple-switch-container .simple-switch-track:after{content:"";position:absolute;height:20px;width:20px;border-radius:50%;left:0;top:-5px;background-color:#fff;box-shadow:0 0 5px 2.5px rgba(0,0,0,.15)}.simple-switch-container .simple-switch--checked .simple-switch-track{background-color:#808080}.simple-switch-container .simple-switch--checked .simple-switch-track:after{left:auto;right:0}@keyframes move-clouds{0%{right:-200px}100%{right:125%}}.event_cl{position:relative;height:40vh;background-color:#f0fff0;width:40vw;min-height:410px;max-width:768px;margin:5vh auto;box-shadow:0 0 10px 5px #ddd;border-radius:10px;align-items:center;text-align:center}.event_cl p{position:relative;margin:auto;top:30%}