Weather Forecast

In this example below you will see how to do a Weather Forecast with some HTML / CSS and Javascript

Weather Forecast is based on HTML and CSS only. It took me almost 28 hours.

Thumbnail
This awesome code was written by khadkamhn, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright khadkamhn ©

Technologies

  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Weather Forecast</title>
  
  
  <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto:400,100,300,500,700,900'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="box-wrap">
	<input id="toggle" class="toggle" type="checkbox">
	<div class="rain"><i style="left:693px;top:844px"></i><i style="left:1307px;top:-31px"></i><i style="left:984px;top:101px"></i><i style="left:1662px;top:-64px"></i><i style="left:999px;top:1371px"></i><i style="left:960px;top:-820px"></i><i style="left:1288px;top:185px"></i><i style="left:1618px;top:103px"></i><i style="left:659px;top:1180px"></i><i style="left:648px;top:-408px"></i><i style="left:844px;top:10px"></i><i style="left:662px;top:1098px"></i><i style="left:471px;top:55px"></i><i style="left:811px;top:-752px"></i><i style="left:281px;top:1300px"></i><i style="left:117px;top:153px"></i><i style="left:579px;top:942px"></i><i style="left:657px;top:-977px"></i><i style="left:1757px;top:808px"></i><i style="left:1334px;top:116px"></i><i style="left:1089px;top:-59px"></i><i style="left:615px;top:661px"></i><i style="left:1303px;top:-163px"></i><i style="left:60px;top:789px"></i><i style="left:1038px;top:-686px"></i><i style="left:920px;top:1190px"></i><i style="left:1174px;top:-21px"></i><i style="left:1031px;top:-762px"></i><i style="left:1541px;top:432px"></i><i style="left:72px;top:286px"></i><i style="left:1746px;top:34px"></i><i style="left:900px;top:566px"></i><i style="left:1045px;top:-666px"></i><i style="left:224px;top:-370px"></i><i style="left:206px;top:-904px"></i><i style="left:1586px;top:-521px"></i><i style="left:410px;top:-962px"></i><i style="left:223px;top:604px"></i><i style="left:457px;top:-558px"></i><i style="left:516px;top:163px"></i><i style="left:1474px;top:380px"></i><i style="left:1363px;top:748px"></i><i style="left:35px;top:1337px"></i><i style="left:1029px;top:263px"></i><i style="left:360px;top:443px"></i><i style="left:1343px;top:825px"></i><i style="left:1731px;top:1009px"></i><i style="left:1613px;top:442px"></i><i style="left:333px;top:-920px"></i><i style="left:1202px;top:-815px"></i><i style="left:1081px;top:126px"></i><i style="left:1820px;top:381px"></i><i style="left:1687px;top:-234px"></i><i style="left:1064px;top:1364px"></i><i style="left:1601px;top:518px"></i><i style="left:545px;top:105px"></i><i style="left:1198px;top:-508px"></i><i style="left:61px;top:658px"></i><i style="left:73px;top:1197px"></i><i style="left:774px;top:40px"></i><i style="left:1680px;top:483px"></i><i style="left:1742px;top:1118px"></i><i style="left:369px;top:-825px"></i><i style="left:307px;top:-557px"></i><i style="left:1641px;top:973px"></i><i style="left:1273px;top:1015px"></i><i style="left:1727px;top:1334px"></i><i style="left:1390px;top:-637px"></i><i style="left:1693px;top:1164px"></i><i style="left:1394px;top:-687px"></i><i style="left:363px;top:300px"></i><i style="left:492px;top:965px"></i><i style="left:1507px;top:212px"></i><i style="left:201px;top:878px"></i><i style="left:1047px;top:-646px"></i><i style="left:1796px;top:1045px"></i><i style="left:10px;top:1px"></i><i style="left:235px;top:155px"></i><i style="left:863px;top:1131px"></i><i style="left:1415px;top:802px"></i><i style="left:605px;top:1220px"></i><i style="left:1557px;top:484px"></i><i style="left:906px;top:563px"></i><i style="left:1087px;top:582px"></i><i style="left:14px;top:-726px"></i><i style="left:226px;top:-883px"></i><i style="left:311px;top:-215px"></i><i style="left:1401px;top:-679px"></i><i style="left:817px;top:1245px"></i><i style="left:1095px;top:992px"></i><i style="left:1092px;top:275px"></i><i style="left:1630px;top:49px"></i><i style="left:516px;top:-335px"></i><i style="left:238px;top:-675px"></i><i style="left:286px;top:690px"></i><i style="left:763px;top:496px"></i><i style="left:527px;top:667px"></i><i style="left:1626px;top:-142px"></i><i style="left:1691px;top:-71px"></i><i style="left:419px;top:-189px"></i><i style="left:758px;top:-455px"></i><i style="left:1618px;top:-910px"></i><i style="left:147px;top:335px"></i><i style="left:778px;top:317px"></i><i style="left:1296px;top:293px"></i><i style="left:1836px;top:494px"></i><i style="left:132px;top:7px"></i><i style="left:1586px;top:368px"></i><i style="left:538px;top:512px"></i><i style="left:702px;top:-701px"></i><i style="left:627px;top:-103px"></i><i style="left:303px;top:1345px"></i><i style="left:1090px;top:752px"></i><i style="left:1502px;top:23px"></i><i style="left:1763px;top:-670px"></i><i style="left:1467px;top:136px"></i><i style="left:1708px;top:-138px"></i><i style="left:1228px;top:-112px"></i><i style="left:310px;top:1361px"></i><i style="left:917px;top:852px"></i><i style="left:195px;top:281px"></i><i style="left:835px;top:470px"></i><i style="left:1025px;top:-67px"></i><i style="left:1705px;top:954px"></i><i style="left:996px;top:486px"></i><i style="left:598px;top:-280px"></i><i style="left:1822px;top:-799px"></i><i style="left:152px;top:444px"></i><i style="left:673px;top:-395px"></i><i style="left:1834px;top:470px"></i><i style="left:995px;top:5px"></i><i style="left:992px;top:-814px"></i><i style="left:588px;top:-38px"></i><i style="left:1179px;top:-949px"></i><i style="left:341px;top:1180px"></i><i style="left:1556px;top:-268px"></i><i style="left:730px;top:1203px"></i><i style="left:1439px;top:878px"></i><i style="left:723px;top:-718px"></i><i style="left:1367px;top:387px"></i><i style="left:587px;top:487px"></i><i style="left:504px;top:806px"></i><i style="left:623px;top:-933px"></i><i style="left:52px;top:319px"></i><i style="left:1107px;top:362px"></i><i style="left:1300px;top:1059px"></i><i style="left:89px;top:744px"></i><i style="left:1136px;top:1206px"></i><i style="left:1259px;top:-229px"></i><i style="left:725px;top:969px"></i><i style="left:833px;top:919px"></i><i style="left:1177px;top:-114px"></i><i style="left:484px;top:-675px"></i><i style="left:942px;top:995px"></i><i style="left:1824px;top:18px"></i><i style="left:496px;top:765px"></i><i style="left:34px;top:-358px"></i><i style="left:1154px;top:437px"></i><i style="left:1128px;top:-19px"></i><i style="left:413px;top:-770px"></i><i style="left:961px;top:-76px"></i><i style="left:870px;top:-627px"></i><i style="left:976px;top:918px"></i><i style="left:381px;top:526px"></i><i style="left:1605px;top:-350px"></i><i style="left:1791px;top:1188px"></i><i style="left:539px;top:-692px"></i><i style="left:1408px;top:-352px"></i><i style="left:1117px;top:-924px"></i><i style="left:1825px;top:1103px"></i><i style="left:439px;top:-140px"></i><i style="left:1588px;top:-133px"></i><i style="left:1375px;top:376px"></i><i style="left:1832px;top:-471px"></i><i style="left:1506px;top:479px"></i><i style="left:521px;top:92px"></i><i style="left:1498px;top:569px"></i><i style="left:265px;top:-711px"></i><i style="left:1740px;top:801px"></i><i style="left:553px;top:828px"></i><i style="left:1596px;top:-150px"></i><i style="left:784px;top:-52px"></i><i style="left:444px;top:-665px"></i><i style="left:773px;top:1246px"></i><i style="left:538px;top:-611px"></i><i style="left:735px;top:382px"></i><i style="left:1756px;top:1249px"></i><i style="left:1643px;top:-795px"></i><i style="left:777px;top:35px"></i><i style="left:1554px;top:1155px"></i><i style="left:1476px;top:654px"></i><i style="left:1849px;top:548px"></i><i style="left:1314px;top:-308px"></i><i style="left:273px;top:707px"></i><i style="left:1875px;top:457px"></i><i style="left:908px;top:738px"></i><i style="left:624px;top:-233px"></i><i style="left:895px;top:-447px"></i><i style="left:67px;top:746px"></i><i style="left:1459px;top:-458px"></i><i style="left:993px;top:6px"></i><i style="left:1660px;top:1260px"></i><i style="left:724px;top:702px"></i><i style="left:1394px;top:1342px"></i><i style="left:312px;top:-22px"></i><i style="left:395px;top:1341px"></i><i style="left:642px;top:-680px"></i><i style="left:823px;top:513px"></i><i style="left:1522px;top:1314px"></i><i style="left:1372px;top:-293px"></i><i style="left:1888px;top:-866px"></i><i style="left:1895px;top:-792px"></i><i style="left:1808px;top:394px"></i><i style="left:769px;top:183px"></i><i style="left:1812px;top:1138px"></i><i style="left:1341px;top:-769px"></i><i style="left:1085px;top:1347px"></i><i style="left:1298px;top:510px"></i><i style="left:1174px;top:1306px"></i><i style="left:917px;top:577px"></i><i style="left:433px;top:-654px"></i><i style="left:1805px;top:1382px"></i><i style="left:1006px;top:470px"></i><i style="left:1362px;top:558px"></i><i style="left:894px;top:-267px"></i><i style="left:1641px;top:-803px"></i><i style="left:205px;top:1133px"></i><i style="left:155px;top:1199px"></i><i style="left:1078px;top:-626px"></i><i style="left:75px;top:17px"></i><i style="left:1248px;top:675px"></i><i style="left:447px;top:-283px"></i><i style="left:1594px;top:-801px"></i><i style="left:48px;top:246px"></i><i style="left:738px;top:-592px"></i><i style="left:545px;top:312px"></i><i style="left:1523px;top:1255px"></i><i style="left:1451px;top:648px"></i><i style="left:463px;top:-202px"></i><i style="left:1285px;top:-840px"></i><i style="left:349px;top:-537px"></i><i style="left:871px;top:328px"></i><i style="left:1880px;top:-165px"></i><i style="left:341px;top:-30px"></i><i style="left:170px;top:-567px"></i><i style="left:1175px;top:884px"></i><i style="left:1815px;top:-521px"></i><i style="left:499px;top:576px"></i><i style="left:1237px;top:-169px"></i><i style="left:1324px;top:420px"></i><i style="left:1758px;top:1141px"></i><i style="left:1405px;top:666px"></i><i style="left:764px;top:-453px"></i><i style="left:560px;top:1299px"></i><i style="left:1808px;top:797px"></i><i style="left:1313px;top:-539px"></i><i style="left:608px;top:-862px"></i><i style="left:1254px;top:797px"></i><i style="left:32px;top:148px"></i><i style="left:109px;top:-82px"></i><i style="left:1357px;top:-678px"></i><i style="left:1516px;top:-543px"></i><i style="left:1035px;top:-737px"></i><i style="left:1487px;top:-877px"></i><i style="left:1653px;top:1312px"></i><i style="left:1643px;top:-617px"></i><i style="left:783px;top:462px"></i><i style="left:1493px;top:944px"></i><i style="left:387px;top:-710px"></i><i style="left:1383px;top:58px"></i><i style="left:690px;top:1345px"></i><i style="left:897px;top:273px"></i><i style="left:102px;top:788px"></i><i style="left:958px;top:-942px"></i><i style="left:1531px;top:414px"></i><i style="left:644px;top:46px"></i><i style="left:1488px;top:-573px"></i><i style="left:1577px;top:1187px"></i><i style="left:51px;top:132px"></i><i style="left:689px;top:1284px"></i><i style="left:179px;top:120px"></i><i style="left:704px;top:-339px"></i><i style="left:572px;top:940px"></i><i style="left:161px;top:594px"></i><i style="left:1107px;top:1214px"></i><i style="left:420px;top:-441px"></i><i style="left:1254px;top:-838px"></i><i style="left:415px;top:42px"></i><i style="left:1841px;top:-986px"></i><i style="left:694px;top:-631px"></i><i style="left:1747px;top:801px"></i><i style="left:174px;top:-276px"></i><i style="left:1772px;top:370px"></i><i style="left:1345px;top:1281px"></i><i style="left:206px;top:-169px"></i><i style="left:708px;top:776px"></i><i style="left:582px;top:749px"></i><i style="left:1268px;top:607px"></i><i style="left:976px;top:223px"></i><i style="left:665px;top:1049px"></i><i style="left:57px;top:-29px"></i><i style="left:1275px;top:-516px"></i><i style="left:140px;top:559px"></i><i style="left:326px;top:988px"></i><i style="left:1848px;top:-398px"></i><i style="left:1577px;top:794px"></i><i style="left:664px;top:-590px"></i><i style="left:400px;top:1039px"></i><i style="left:1697px;top:624px"></i><i style="left:1536px;top:1165px"></i><i style="left:745px;top:-995px"></i><i style="left:1281px;top:786px"></i><i style="left:1491px;top:-327px"></i><i style="left:1468px;top:1128px"></i><i style="left:823px;top:796px"></i><i style="left:42px;top:-85px"></i><i style="left:1239px;top:-543px"></i><i style="left:731px;top:130px"></i><i style="left:1626px;top:1205px"></i><i style="left:872px;top:296px"></i><i style="left:210px;top:-280px"></i><i style="left:865px;top:490px"></i><i style="left:1348px;top:967px"></i><i style="left:663px;top:25px"></i><i style="left:472px;top:1037px"></i><i style="left:203px;top:-150px"></i><i style="left:1113px;top:309px"></i><i style="left:280px;top:977px"></i><i style="left:1571px;top:1361px"></i><i style="left:1709px;top:-512px"></i><i style="left:973px;top:1128px"></i><i style="left:1425px;top:628px"></i><i style="left:803px;top:-664px"></i><i style="left:189px;top:554px"></i><i style="left:1840px;top:1232px"></i><i style="left:1317px;top:-488px"></i><i style="left:776px;top:-249px"></i><i style="left:633px;top:-815px"></i><i style="left:151px;top:943px"></i><i style="left:1009px;top:-58px"></i><i style="left:1126px;top:1120px"></i><i style="left:404px;top:-963px"></i><i style="left:1799px;top:173px"></i><i style="left:1345px;top:-656px"></i><i style="left:101px;top:-606px"></i><i style="left:1638px;top:-976px"></i><i style="left:404px;top:-111px"></i><i style="left:1437px;top:-903px"></i><i style="left:192px;top:-421px"></i><i style="left:1859px;top:-846px"></i><i style="left:1698px;top:-563px"></i><i style="left:1645px;top:1175px"></i><i style="left:771px;top:-481px"></i><i style="left:1046px;top:472px"></i><i style="left:1683px;top:206px"></i><i style="left:1093px;top:1214px"></i><i style="left:625px;top:-260px"></i><i style="left:1297px;top:240px"></i><i style="left:383px;top:153px"></i><i style="left:1842px;top:-933px"></i><i style="left:773px;top:1272px"></i><i style="left:1576px;top:-48px"></i><i style="left:479px;top:57px"></i><i style="left:1101px;top:-870px"></i><i style="left:1308px;top:-814px"></i><i style="left:658px;top:-299px"></i><i style="left:1591px;top:-231px"></i><i style="left:897px;top:15px"></i><i style="left:435px;top:200px"></i><i style="left:1380px;top:-809px"></i><i style="left:417px;top:134px"></i><i style="left:1459px;top:-127px"></i><i style="left:715px;top:979px"></i><i style="left:1565px;top:-918px"></i><i style="left:189px;top:333px"></i><i style="left:1417px;top:822px"></i><i style="left:1413px;top:-59px"></i><i style="left:1315px;top:-715px"></i><i style="left:1248px;top:-597px"></i><i style="left:1812px;top:588px"></i><i style="left:1164px;top:704px"></i><i style="left:172px;top:545px"></i><i style="left:789px;top:-891px"></i><i style="left:1257px;top:1397px"></i><i style="left:894px;top:158px"></i><i style="left:323px;top:775px"></i><i style="left:1498px;top:-378px"></i><i style="left:1849px;top:1201px"></i><i style="left:209px;top:1295px"></i><i style="left:768px;top:-446px"></i><i style="left:1070px;top:1070px"></i><i style="left:534px;top:1221px"></i><i style="left:466px;top:31px"></i><i style="left:1518px;top:508px"></i><i style="left:660px;top:-405px"></i><i style="left:1266px;top:701px"></i><i style="left:1019px;top:-989px"></i><i style="left:1837px;top:-843px"></i><i style="left:459px;top:-107px"></i><i style="left:957px;top:1032px"></i><i style="left:386px;top:286px"></i><i style="left:163px;top:-267px"></i><i style="left:606px;top:820px"></i><i style="left:103px;top:-474px"></i><i style="left:1680px;top:662px"></i><i style="left:1232px;top:-980px"></i><i style="left:1886px;top:291px"></i><i style="left:612px;top:1029px"></i><i style="left:362px;top:-625px"></i><i style="left:1191px;top:1199px"></i><i style="left:1230px;top:-306px"></i><i style="left:1093px;top:428px"></i><i style="left:1566px;top:-370px"></i><i style="left:1629px;top:-912px"></i><i style="left:786px;top:-767px"></i><i style="left:4px;top:1313px"></i><i style="left:1096px;top:553px"></i><i style="left:1619px;top:242px"></i><i style="left:1392px;top:70px"></i><i style="left:981px;top:615px"></i><i style="left:1243px;top:685px"></i><i style="left:1031px;top:1126px"></i><i style="left:719px;top:1192px"></i><i style="left:1464px;top:-167px"></i><i style="left:128px;top:974px"></i><i style="left:1px;top:122px"></i><i style="left:786px;top:-390px"></i><i style="left:354px;top:1288px"></i><i style="left:221px;top:300px"></i><i style="left:857px;top:-240px"></i><i style="left:319px;top:-840px"></i><i style="left:1817px;top:344px"></i><i style="left:1587px;top:-628px"></i><i style="left:1282px;top:894px"></i><i style="left:1265px;top:1323px"></i><i style="left:780px;top:780px"></i><i style="left:672px;top:-653px"></i><i style="left:44px;top:-423px"></i><i style="left:820px;top:-106px"></i><i style="left:262px;top:-903px"></i><i style="left:897px;top:-416px"></i><i style="left:805px;top:95px"></i><i style="left:1041px;top:-734px"></i><i style="left:1581px;top:-677px"></i><i style="left:1287px;top:-344px"></i><i style="left:68px;top:465px"></i><i style="left:1550px;top:-721px"></i><i style="left:1232px;top:459px"></i><i style="left:492px;top:-555px"></i><i style="left:409px;top:215px"></i><i style="left:1621px;top:-197px"></i><i style="left:757px;top:1154px"></i><i style="left:1147px;top:28px"></i><i style="left:1501px;top:-658px"></i><i style="left:1357px;top:-35px"></i><i style="left:571px;top:944px"></i><i style="left:1667px;top:788px"></i><i style="left:191px;top:1003px"></i><i style="left:101px;top:1051px"></i><i style="left:1209px;top:-287px"></i><i style="left:1057px;top:1323px"></i><i style="left:1289px;top:-525px"></i><i style="left:359px;top:1068px"></i><i style="left:1049px;top:-225px"></i><i style="left:1832px;top:245px"></i><i style="left:674px;top:-164px"></i><i style="left:1250px;top:-499px"></i><i style="left:119px;top:984px"></i><i style="left:1787px;top:494px"></i><i style="left:1544px;top:57px"></i><i style="left:1464px;top:-676px"></i><i style="left:104px;top:-688px"></i><i style="left:1510px;top:172px"></i><i style="left:986px;top:1075px"></i><i style="left:419px;top:1355px"></i><i style="left:1039px;top:927px"></i><i style="left:1760px;top:1167px"></i><i style="left:377px;top:906px"></i><i style="left:1107px;top:1169px"></i><i style="left:1844px;top:745px"></i><i style="left:725px;top:-172px"></i><i style="left:553px;top:-95px"></i><i style="left:695px;top:699px"></i><i style="left:69px;top:1096px"></i><i style="left:1330px;top:213px"></i><i style="left:647px;top:-650px"></i><i style="left:106px;top:313px"></i><i style="left:1813px;top:-868px"></i><i style="left:1329px;top:450px"></i><i style="left:1719px;top:-827px"></i><i style="left:16px;top:-901px"></i><i style="left:1848px;top:1259px"></i><i style="left:810px;top:1205px"></i><i style="left:231px;top:-935px"></i><i style="left:1392px;top:-90px"></i><i style="left:1685px;top:85px"></i><i style="left:786px;top:732px"></i><i style="left:1627px;top:-404px"></i><i style="left:1413px;top:-681px"></i><i style="left:1417px;top:880px"></i><i style="left:718px;top:1366px"></i><i style="left:302px;top:35px"></i><i style="left:373px;top:-387px"></i><i style="left:867px;top:-509px"></i><i style="left:1617px;top:602px"></i><i style="left:1445px;top:370px"></i><i style="left:1675px;top:-529px"></i><i style="left:1489px;top:952px"></i><i style="left:158px;top:150px"></i><i style="left:1689px;top:1177px"></i><i style="left:1600px;top:884px"></i><i style="left:757px;top:88px"></i><i style="left:471px;top:98px"></i><i style="left:1049px;top:384px"></i><i style="left:1508px;top:1241px"></i><i style="left:1865px;top:-209px"></i><i style="left:1810px;top:1355px"></i><i style="left:1826px;top:102px"></i><i style="left:1600px;top:-574px"></i><i style="left:33px;top:1223px"></i><i style="left:1221px;top:-571px"></i><i style="left:1252px;top:-420px"></i><i style="left:582px;top:1172px"></i><i style="left:723px;top:909px"></i><i style="left:1483px;top:-497px"></i><i style="left:1811px;top:-305px"></i><i style="left:987px;top:1077px"></i><i style="left:1315px;top:296px"></i><i style="left:982px;top:533px"></i><i style="left:348px;top:-326px"></i><i style="left:742px;top:851px"></i><i style="left:1103px;top:-59px"></i><i style="left:1533px;top:-683px"></i><i style="left:614px;top:292px"></i><i style="left:498px;top:223px"></i><i style="left:175px;top:-836px"></i><i style="left:857px;top:1364px"></i><i style="left:1479px;top:-761px"></i><i style="left:372px;top:-549px"></i><i style="left:1440px;top:927px"></i><i style="left:203px;top:-718px"></i><i style="left:509px;top:-492px"></i><i style="left:1080px;top:-446px"></i><i style="left:611px;top:616px"></i><i style="left:1578px;top:-142px"></i><i style="left:60px;top:186px"></i><i style="left:1348px;top:-535px"></i><i style="left:1815px;top:-262px"></i><i style="left:559px;top:-878px"></i><i style="left:354px;top:1224px"></i><i style="left:47px;top:410px"></i><i style="left:1263px;top:1336px"></i><i style="left:1255px;top:343px"></i><i style="left:1212px;top:467px"></i><i style="left:259px;top:-975px"></i><i style="left:315px;top:376px"></i><i style="left:99px;top:507px"></i><i style="left:880px;top:604px"></i><i style="left:1124px;top:-59px"></i><i style="left:485px;top:-671px"></i><i style="left:408px;top:-403px"></i><i style="left:1307px;top:-508px"></i><i style="left:1171px;top:-894px"></i><i style="left:218px;top:-169px"></i><i style="left:194px;top:823px"></i><i style="left:207px;top:-623px"></i><i style="left:671px;top:263px"></i><i style="left:1169px;top:670px"></i><i style="left:878px;top:-405px"></i><i style="left:922px;top:343px"></i><i style="left:652px;top:141px"></i><i style="left:941px;top:612px"></i><i style="left:1425px;top:80px"></i><i style="left:82px;top:338px"></i><i style="left:308px;top:-815px"></i><i style="left:281px;top:519px"></i><i style="left:1039px;top:590px"></i><i style="left:688px;top:63px"></i><i style="left:1456px;top:-543px"></i><i style="left:272px;top:-520px"></i><i style="left:375px;top:188px"></i><i style="left:1350px;top:-609px"></i><i style="left:300px;top:1303px"></i><i style="left:918px;top:375px"></i><i style="left:1900px;top:456px"></i><i style="left:1788px;top:-815px"></i><i style="left:720px;top:-570px"></i><i style="left:1558px;top:1201px"></i><i style="left:1585px;top:1303px"></i><i style="left:1471px;top:787px"></i><i style="left:1520px;top:-270px"></i><i style="left:603px;top:1364px"></i><i style="left:1685px;top:257px"></i><i style="left:425px;top:-590px"></i><i style="left:1656px;top:1107px"></i><i style="left:229px;top:439px"></i><i style="left:1626px;top:-832px"></i><i style="left:1175px;top:1151px"></i><i style="left:1510px;top:542px"></i><i style="left:1415px;top:776px"></i><i style="left:37px;top:255px"></i><i style="left:573px;top:1026px"></i><i style="left:605px;top:-801px"></i><i style="left:464px;top:-498px"></i><i style="left:1175px;top:769px"></i><i style="left:1104px;top:-98px"></i><i style="left:391px;top:-240px"></i><i style="left:673px;top:1308px"></i><i style="left:1487px;top:773px"></i><i style="left:1775px;top:148px"></i><i style="left:15px;top:1394px"></i><i style="left:145px;top:-844px"></i><i style="left:1225px;top:420px"></i><i style="left:511px;top:794px"></i><i style="left:1580px;top:-345px"></i><i style="left:1156px;top:367px"></i><i style="left:346px;top:15px"></i><i style="left:178px;top:19px"></i><i style="left:1728px;top:298px"></i><i style="left:906px;top:1245px"></i><i style="left:346px;top:-626px"></i><i style="left:540px;top:-712px"></i><i style="left:1477px;top:-64px"></i><i style="left:1442px;top:-230px"></i><i style="left:1051px;top:-656px"></i><i style="left:95px;top:-834px"></i><i style="left:1860px;top:16px"></i><i style="left:869px;top:283px"></i><i style="left:819px;top:-493px"></i><i style="left:1799px;top:-121px"></i><i style="left:1335px;top:130px"></i><i style="left:830px;top:98px"></i><i style="left:1161px;top:941px"></i><i style="left:1418px;top:-572px"></i><i style="left:1617px;top:-359px"></i><i style="left:708px;top:-833px"></i><i style="left:521px;top:793px"></i><i style="left:1173px;top:-362px"></i><i style="left:1561px;top:669px"></i><i style="left:1162px;top:366px"></i><i style="left:1616px;top:950px"></i><i style="left:294px;top:1325px"></i><i style="left:161px;top:-110px"></i><i style="left:1476px;top:745px"></i><i style="left:298px;top:528px"></i><i style="left:33px;top:-162px"></i><i style="left:1452px;top:-92px"></i><i style="left:496px;top:-139px"></i><i style="left:1309px;top:-116px"></i><i style="left:684px;top:40px"></i><i style="left:1141px;top:938px"></i><i style="left:1219px;top:-465px"></i><i style="left:722px;top:914px"></i><i style="left:448px;top:-548px"></i><i style="left:276px;top:-227px"></i><i style="left:1612px;top:337px"></i><i style="left:1472px;top:-80px"></i><i style="left:1453px;top:1317px"></i><i style="left:1099px;top:1283px"></i><i style="left:418px;top:307px"></i><i style="left:985px;top:479px"></i><i style="left:1214px;top:-249px"></i><i style="left:1369px;top:-417px"></i><i style="left:49px;top:396px"></i><i style="left:1597px;top:-861px"></i><i style="left:1751px;top:1253px"></i><i style="left:1705px;top:752px"></i><i style="left:366px;top:1189px"></i><i style="left:488px;top:-538px"></i><i style="left:1145px;top:-850px"></i><i style="left:349px;top:1094px"></i><i style="left:339px;top:-595px"></i><i style="left:1494px;top:111px"></i><i style="left:1443px;top:-548px"></i><i style="left:556px;top:-486px"></i><i style="left:684px;top:38px"></i><i style="left:1818px;top:398px"></i><i style="left:1783px;top:-468px"></i><i style="left:1564px;top:349px"></i><i style="left:1482px;top:-730px"></i><i style="left:1423px;top:-288px"></i><i style="left:786px;top:-932px"></i><i style="left:709px;top:-848px"></i><i style="left:1496px;top:395px"></i><i style="left:1138px;top:590px"></i><i style="left:1345px;top:1231px"></i><i style="left:1722px;top:-890px"></i><i style="left:1765px;top:805px"></i><i style="left:498px;top:122px"></i><i style="left:280px;top:-310px"></i><i style="left:477px;top:1088px"></i><i style="left:472px;top:376px"></i><i style="left:409px;top:216px"></i><i style="left:244px;top:-193px"></i><i style="left:1019px;top:-650px"></i><i style="left:392px;top:148px"></i><i style="left:1093px;top:-913px"></i><i style="left:571px;top:571px"></i><i style="left:1890px;top:1017px"></i><i style="left:1510px;top:955px"></i><i style="left:437px;top:-292px"></i><i style="left:1476px;top:546px"></i><i style="left:190px;top:475px"></i><i style="left:1795px;top:874px"></i><i style="left:417px;top:100px"></i><i style="left:858px;top:-115px"></i><i style="left:242px;top:162px"></i><i style="left:325px;top:975px"></i><i style="left:742px;top:-844px"></i><i style="left:1568px;top:479px"></i><i style="left:1433px;top:-565px"></i><i style="left:1509px;top:963px"></i><i style="left:1598px;top:5px"></i><i style="left:216px;top:361px"></i><i style="left:1171px;top:-665px"></i><i style="left:489px;top:1379px"></i><i style="left:730px;top:1353px"></i><i style="left:871px;top:-793px"></i><i style="left:1210px;top:1010px"></i><i style="left:340px;top:1123px"></i><i style="left:26px;top:411px"></i><i style="left:1094px;top:-466px"></i><i style="left:235px;top:1055px"></i><i style="left:1141px;top:776px"></i><i style="left:502px;top:-46px"></i><i style="left:414px;top:958px"></i><i style="left:1181px;top:-527px"></i><i style="left:1036px;top:606px"></i><i style="left:85px;top:105px"></i><i style="left:1205px;top:1236px"></i><i style="left:1374px;top:487px"></i><i style="left:1799px;top:385px"></i><i style="left:639px;top:644px"></i><i style="left:754px;top:946px"></i><i style="left:564px;top:647px"></i><i style="left:681px;top:1226px"></i><i style="left:919px;top:1273px"></i><i style="left:1505px;top:95px"></i><i style="left:1437px;top:1205px"></i><i style="left:23px;top:-341px"></i><i style="left:537px;top:697px"></i><i style="left:1345px;top:1371px"></i><i style="left:649px;top:1343px"></i><i style="left:1474px;top:-725px"></i><i style="left:1464px;top:962px"></i><i style="left:205px;top:1154px"></i><i style="left:1496px;top:-83px"></i><i style="left:304px;top:-787px"></i><i style="left:1577px;top:1245px"></i><i style="left:253px;top:1124px"></i><i style="left:735px;top:473px"></i><i style="left:804px;top:-929px"></i><i style="left:1516px;top:-924px"></i><i style="left:1858px;top:-134px"></i><i style="left:540px;top:-803px"></i><i style="left:243px;top:-684px"></i><i style="left:1022px;top:-658px"></i><i style="left:1600px;top:-111px"></i><i style="left:878px;top:600px"></i><i style="left:440px;top:-211px"></i><i style="left:969px;top:-428px"></i><i style="left:1665px;top:-221px"></i><i style="left:948px;top:-728px"></i><i style="left:1230px;top:66px"></i><i style="left:903px;top:1357px"></i><i style="left:1136px;top:1240px"></i><i style="left:27px;top:866px"></i><i style="left:285px;top:-751px"></i><i style="left:1843px;top:78px"></i><i style="left:933px;top:1358px"></i><i style="left:887px;top:-813px"></i><i style="left:1326px;top:717px"></i><i style="left:491px;top:-281px"></i><i style="left:1888px;top:863px"></i><i style="left:1464px;top:1371px"></i><i style="left:1287px;top:-217px"></i><i style="left:1570px;top:-975px"></i><i style="left:1098px;top:749px"></i><i style="left:210px;top:-48px"></i><i style="left:1454px;top:911px"></i><i style="left:1819px;top:736px"></i><i style="left:143px;top:683px"></i><i style="left:689px;top:406px"></i><i style="left:827px;top:-861px"></i><i style="left:1654px;top:-553px"></i><i style="left:651px;top:670px"></i><i style="left:1402px;top:871px"></i><i style="left:1082px;top:887px"></i><i style="left:888px;top:1380px"></i><i style="left:145px;top:1397px"></i><i style="left:154px;top:137px"></i><i style="left:558px;top:689px"></i><i style="left:742px;top:162px"></i><i style="left:1884px;top:461px"></i><i style="left:739px;top:-244px"></i><i style="left:1060px;top:875px"></i><i style="left:1359px;top:-458px"></i><i style="left:1241px;top:1199px"></i><i style="left:623px;top:-272px"></i><i style="left:1890px;top:-960px"></i><i style="left:1471px;top:-72px"></i><i style="left:537px;top:346px"></i><i style="left:476px;top:-127px"></i><i style="left:494px;top:1218px"></i><i style="left:1112px;top:-977px"></i><i style="left:80px;top:-546px"></i><i style="left:1571px;top:1378px"></i><i style="left:764px;top:75px"></i><i style="left:505px;top:876px"></i><i style="left:810px;top:412px"></i><i style="left:18px;top:350px"></i><i style="left:925px;top:-157px"></i><i style="left:715px;top:269px"></i><i style="left:1656px;top:1165px"></i><i style="left:1397px;top:261px"></i><i style="left:1247px;top:970px"></i><i style="left:163px;top:1095px"></i><i style="left:880px;top:-215px"></i><i style="left:1185px;top:717px"></i><i style="left:1255px;top:371px"></i><i style="left:1763px;top:-873px"></i><i style="left:893px;top:-131px"></i><i style="left:3px;top:321px"></i><i style="left:315px;top:676px"></i><i style="left:1572px;top:1013px"></i><i style="left:1177px;top:891px"></i><i style="left:975px;top:1181px"></i><i style="left:705px;top:40px"></i><i style="left:1605px;top:-865px"></i><i style="left:1180px;top:581px"></i><i style="left:278px;top:-201px"></i><i style="left:529px;top:447px"></i><i style="left:777px;top:461px"></i><i style="left:215px;top:1351px"></i><i style="left:1530px;top:630px"></i><i style="left:1874px;top:552px"></i><i style="left:500px;top:557px"></i><i style="left:1550px;top:1231px"></i><i style="left:1459px;top:1134px"></i><i style="left:1249px;top:372px"></i><i style="left:847px;top:876px"></i><i style="left:407px;top:746px"></i><i style="left:46px;top:-448px"></i><i style="left:1420px;top:917px"></i><i style="left:1304px;top:-794px"></i><i style="left:5px;top:267px"></i><i style="left:1414px;top:53px"></i><i style="left:837px;top:-108px"></i><i style="left:1799px;top:85px"></i><i style="left:904px;top:45px"></i><i style="left:371px;top:-250px"></i><i style="left:543px;top:-11px"></i><i style="left:131px;top:304px"></i><i style="left:1369px;top:223px"></i><i style="left:1045px;top:-889px"></i><i style="left:80px;top:-66px"></i><i style="left:904px;top:732px"></i></div>
	<div class="box-inner">
	<div class="box">
		<div class="box-base"></div>
		<div class="flip front">
			<div class="city">
				<div class="clouds">
					<div class="cloud cloud-1"><div class="dtl"></div></div>
					<div class="cloud cloud-2"><div class="dtl"></div></div>
					<div class="cloud cloud-3"><div class="dtl"></div></div>
				</div>
				<div class="statue">
					<div class="head">
						<div class="crown">
							<div class="arrow arrow-1"></div>
							<div class="arrow arrow-2"></div>
							<div class="arrow arrow-3"></div>
						</div>
						<div class="hair"></div>
					</div>
					<div class="body">
						<div class="hands">
							<div class="hand left">
								<div class="torch-glow"></div>
								<div class="torch">
									<div class="flame"></div>
								</div>
							</div>
							<div class="hand right"></div>
						</div>
						<div class="cloth-wrap">
							<div class="cloth cloth-1"></div><div class="cloth cloth-2"></div>
							<div class="cloth cloth-3"></div><div class="cloth cloth-4"></div>
							<div class="cloth cloth-5"></div><div class="cloth cloth-6"></div>
							<div class="cloth cloth-7"></div><div class="cloth cloth-8"></div>
							<div class="cloth cloth-9"></div><div class="cloth cloth-10"></div>
						</div>
					</div>
					<div class="base">
						<div class="top"></div>
						<div class="bar mid"></div>
						<div class="bar bot"></div>
					</div>
				</div>
			</div>
			<div class="general-info text-gradient">
				<div class="measure">
					<span class="numb">16</span>
					<span class="unit">c&#176;</span>
				</div>
				<div class="status">Raining</div>
				<div class="city-name">New York</div>
				<div class="current-date">August 16<sup>th</sup></div>
			</div>
		</div>
		<div class="flip back">
			<div class="content">
				<div class="title text-gradient">New York</div>
				<div class="sub-title">Forecast</div>
				<div class="forecast">
					<div class="grd">
						<div class="col">
							<div class="info">
								<div class="date">Mon 18</div>
								<div class="ico"><i class="basethundercloud"></i><i class="icon-thunder"></i></div>
								<div class="unit"><span class="max">18&#176;</span> <span class="min">12&#176;</span></div>
								<div class="text">T-Stroms</div>
							</div>
						</div>
						<div class="col">
							<div class="info">
								<div class="date">Tue 19</div>
								<div class="ico"><i class="basecloud"></i><i class="icon-showers icon-sunny"></i></div>
								<div class="unit"><span class="max">17&#176;</span> <span class="min">14&#176;</span></div>
								<div class="text">Showers</div>
							</div>
						</div>
						<div class="col">
							<div class="info">
								<div class="date">Wed 20</div>
								<div class="ico"><i class="basecloud"></i><i class="icon-rainy"></i></div>
								<div class="unit"><span class="max">19&#176;</span> <span class="min">15&#176;</span></div>
								<div class="text">Rain</div>
							</div>
						</div>
						<div class="col">
							<div class="info">
								<div class="date">Thu 21</div>
								<div class="ico"><i class="basecloud"></i><i class="icon-drizzle"></i></div>
								<div class="unit"><span class="max">16&#176;</span> <span class="min">11&#176;</span></div>
								<div class="text">Drizzle</div>
							</div>
						</div>
						<div class="col">
							<div class="info">
								<div class="date">Fri 22</div>
								<div class="ico"><i class="basethundercloud"></i><i class="icon-thunder icon-sunny"></i></div>
								<div class="unit"><span class="max">21&#176;</span> <span class="min">16&#176;</span></div>
								<div class="text">T-Sunny</div>
							</div>
						</div>
						<div class="col">
							<div class="info">
								<div class="date">Sat 23</div>
								<div class="ico"><i class="basecloud"></i><i class="icon-windy"></i></div>
								<div class="unit"><span class="max">14&#176;</span> <span class="min">12&#176;</span></div>
								<div class="text">Windy</div>
							</div>
						</div>
					</div>
					<div class="info summary">
						Normals: High: 15&#176; Low: 13&#176;
					</div>
				</div>
				<div class="author">A Pen by <a href="https://codepen.io/khadkamhn" target="_blank">@khadkamhn</a></div>
			</div>
		</div>
	</div>
	<label for="toggle" class="toggle-switch">
		<span class="tgl-btn front">
			<div class="ico"><i class="basethundercloud"></i><i class="icon-thunder icon-sunny"></i></div>
		</span>
		<span class="tgl-btn back">
			<div class="dtl-icon"><i></i></div>
		</span>
	</label>
	</div>
</div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/khadkamhn/weather-forecast-gryLoa */
body{
	margin:0;
	color:#444;
	background-color:#333366;
	font:300 14px/18px Roboto, sans-serif;
}
*,:after,:before{box-sizing:border-box}
.pull-left{float:left}
.pull-right{float:right}
.clearfix:after,.clearfix:before{content:'';display:table}
.clearfix:after{clear:both;display:block}

@font-face{
	font-family:'iconvault';
	src:url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAABHoAA0AAAAAH/wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAARzAAAABkAAAAcZRC1lE9TLzIAAAGgAAAASgAAAGBBGl5IY21hcAAAAigAAABCAAABQgAP9MBjdnQgAAACbAAAAAQAAAAEABEBRGdhc3AAABHEAAAACAAAAAj//wADZ2x5ZgAAAqQAAA1SAAAY5KRMyiloZWFkAAABMAAAAC8AAAA2/LWGy2hoZWEAAAFgAAAAHQAAACQDuwHkaG10eAAAAewAAAA5AAAAOgxBBltsb2NhAAACcAAAADQAAAA0SGJPam1heHAAAAGAAAAAIAAAACAAZQH5bmFtZQAAD/gAAAFXAAACf8Plfydwb3N0AAARUAAAAHQAAAEEt7GzgnjaY2BkYGAA4li1bxfj+W2+MnAzMYDA2cOLDeG04P/7jP8Ye4FcDgawNABQjAxHAHjaY2BkYGDs/X+fQY+JAQQY/zEwMqACFgBgsAOiAAAAAAEAAAAZAcgACgAAAAAAAgAAAAEAAQAAAEAALgAAAAB42mNgYWJg/MLAysDA6MOYxsDA4A6lvzJIMrQwMDAxsHEywIEAgskQkOaawnDgI8NHUcYD/w8w6DH2MigChRmRlCgwMAIAMWQL+AAAeNpjYmAQZAACJjBmjGaUZZjN8JphDUMggzHDNgZzIL2UYS7DJoY2hnsMm4FiIHFjhsUM7QDvKgqlAAAAeNpjYGBgZoBgGQZGBhCwAfIYwXwWBgUgzQKEQP5H0f//gSTD///8zFCVDIxsDDAmAyMTkGBiQAWMDMMeAABTNwbBAAAAEQFEAAAAKgAqACoAgADoAfACxgMCA1wDpAPSBKAFRAW0CC4JLgl+CaYJzgpWCvgLggwSDCIMcnjapVh9qGTJVa9TdavqfnT37Y/78d68mffR/d7tmX2T97r7dvd1nDcf2cxsxrASljjExJVd3GwICP6zoriKKIqbiNlFJH5E8peYCJFsdoIaUJCwggSS4L8G0T8W/CdsCCSBgDLj79S9r1/PTAR3pbtvVZ2qc+6pU+ec+p0WUvSEEH9Gd4USVhy9QeL45J71xNuzN4z+t5N7SqIr3lBM1ky+Zw3998k9YnrZK3vjsjfqffJXP/5xunv/iz0qIY3o58TX6T79uqiEODAWn9FwOpyXs3JWLfEx42JcoKlnFnNHxCezHcq3yXXpfjRod6OIfJ8oCNqRktlgM25TW6l+KI0vo7wTa209nYWd6GIaBNr/QS8KlOpKZSVJG6bpUSKpNTC+knknUETU8uJZ1utqqVUAVYWhC+J1+i/6FHYfi1zsiLF4EltYzGcXKBnms+SQoPnYFDdomcWUZ+aYiuW4afNllmfYhBljE+MjskMeLIpquqSXut3f8v1N389MpHumZXruoaPP9Exk8PvQznskbUrtkwc1R3nckl5Aukef2PD9Df+nu92KGfB7zXHo1md6NWGLLu4MNxQFWvXPbexI33Vb2I8Uf/7gB/RT4iviy+KrsH5mYppsK2uKYxpO7WybEjOy+WRa8UzOZDssFuPlYpy5RTbboYY6XthiiW2X1bBD42J+g2ySutWOPjlSOKcdqoZHNMd4DMHFdYmOo86yPE3SvECH1xzTiupejcXX5TbFVMGyTDXZdTqiDtEdiowhT+K0Ik/TgDxrpOrmpJUaUGxMIHGSfaXJSCySCbW1CUE7Ry2sBBsfP9GA112gSEMYgRBpmFZpq7w+UUZSeVhDHWsCUtSTnjwV1zLr4iTez54DJh/Um52I4G/0GzL0POl5EOJJFUiNXuSRhaeRp7wuv1a2OpKUlNjUJohqu2t9T0ZYGSslyXrgozTwPF0LY40w4UMY3tiC2o6Uw1lVHBkNWktCXg/ilFIXYojDtjzoBjJe7ZNkcXPJGgax84fviB16n/ht8cfis84fjinNzDWaL9iHx4t0tkOOmAxxruzms3KccmszjoCGiHjlU5xfpTHcaEVZFBwm0xyDPF0MOSR2OHbSvOJoMaO6rSbjxXzZEF3ojGzJoZUvHKlYFoZuwpgB+SGOD7uHQTzrw54aRByLLykgSwHGvlKeMj6MFJJBVwWnnJIP/hFOPrYVa+AxK7o4g8DxXupT/yb4+CQ9S6TRU1it8UYPRxVpTEIcqGDkM9MaCmoJd1Ha19q1tQDwa15IPtgt1exYjBcyWRpCoHraYDUcCyzYBDm/kzhCZOC/fvAf9JPiD0QoUrErxPKIqutsL2sQM0iObmzPum8OjPEvBTa05lk/9E2WaONfHNddntpvZWF7TweTdvgCP7QbP8dd08rD1pBzIIlnxG16na6K98FDkB+GhzQZjqYFzuyqRNJeLubICBU3o6GJ4c9pgryX8lIkPZfAr1M5AyXdJvrS/qZEFMDAHm1I6m70YxzEyeGwCqTd2N0YBAbm29zLBlvtm+PyTj//nXP70tdmo9fJFYVaP3Fyac+SHG0ke7CdZ8he3trdSPTB0Z0Shttlvy7FMX2TnkHOxp1zsE1prTjS05o69lT3eaM7jZzy2BZ9Lt063Cb59sUr57Ld+Omjk7ubyYWsF9FTs4vvjWSwNT7cfpvoH/yDfPvwysVia8McVndP5K+cT3pbSiJJzZ6aFoG6dH77CZzd3z74Ic3E34tADMQFIfZZkSXrUPDDrIauR2ne7SX9n0/63bx71z2f60bxdBpHAX5d9MOmFZBdiafoG3RFvEc8K34fsrPm6oT5C75y+D5FzxTVMs/4Uy2n6NXX7Xi5TevrOzT9MQyzqmE4WJdSLuup6hEZq3fS1zUSnd4bkBzu5rvkTbbaeRpeiKMs2jyMzw2C5JK+PDy/1d5CpBjTwnLp8fK9vf9lOXn1eu/+Z9eoHq2kPCxDqkbGS0iOJOMYmKGrZADY4KRKCpEWO9Tp8rz6iPRaLeXWhfToQsu5Ou6223TtjLUtO902Ma9+7A3CQ+yMXez0xIFYiF+DL444LAqGMwbWQ56zSHWy4JEFDuKpfMFLOGvCzFdpllQrB36C3l3k0c+8gMukFUqZ8JXV/lj4u1FkqI0gpBAJSEXtPGm3zytKSPZCPwk/3885UjP6v4fqq7iBgL7CAIeezBMyOoDsfqstu7a9hwlcP+mH7O7gnQS0w2HiL5H7FuLVJvcdiqV470MZcK2bn2XAqmlBWqeedf+uY5TKACiUap91kYo9N/ayvbpNcdfnNRVXQLaLrN5M9HXH+ueUtxPYE90xAbq7gbnFD+PGfbRtC7re8c+oN/RO0Ey4/X3uwVv0tPhT8UfiT+iQjulN+me+j5ORw5LS3Yo78ITxyHXdHTt3V/E1srhQV8Qx8Gg+y6t6YNKGiIuXr2Q54it4PBourzaXNl+ww2m+mGc2rXCfr4g5v2w4tuypo3zSXMWmWDqJI1OU1aSsX2OTUUOcl5WTUC7q9wAPNhTHPhnl4/nyAm78tRcB9bEKtsEC9YvKZQYg6nZVAojkWHQ6dmB7Os4Tc7b1YokTXsEHoAczHq3hCZsMr9GkqnF5emquZHjj1JDNPrIUxEW1hmlgL1hqDdIAvdhJWkOaajiqV83BWEOatW3MZxawdVnQHU878KEi6QGOoSgBpsMFr6UyUgMUAKdpd+EzGvA9HdVAw1MR7n/whcABEW42AqRRWqEm8NA6DAJfleBGYeAwCbAt0IPveS1yYMNDeDEEycI4/AUyzE0KWYukgzG8iEEpgg8w1SggWAhjVOpBO4+nJTGSRkUE50dXMeb1AYmxAipjOfiByZwAKAjcDH483cZ42vGzMgChwDy3gbFQhWkFFA0i+UDcnsKmFaOw0AkFSIMpkJVgGYAkB/CQKDDEjFKhQ3iBA8Ah2Fkg2H0wMBBEvoKZLRavuC1jPJ/GQHO/iJZZLDkkyeQQGgD6QSXussmB1ZXyGQcGrIVt5DKeZGhIDNd5txAQ+owvQ0aONpTM7TO354esk9tDzc14EtA+6hwD0FmcBZuHpSKFwu6oB9hA7kSMO01AP6B5iVwKAzsrwqjWMbs1MB+xJmBb53YfzmHM7LkqyHGDpAeRjqanbqPhNYb9CwUEnAa7YFjscYlB7EYa9VXkcb3BpY124n0cr3NVJwCnVwtwmNUJMK5OCSyD4IjdthaAw2K/dfxbjGYF7sZ7D75HT4o3HSb6onhdiGoFhM6wUGWbioDrkVFergX1aQ7kQuWhHNgUKqfJKT0jroIayWmCcF2RWCoqlYUL62K0lp1cghw1YT2v63wMhoXJvtPLe/20v5P2e3n3duRsQhHMyS5k4fAe2wHOxwHj3BMG4MoDFobHSY5S5eIuUlyHwFiek2JC4gD0WQjqBqzw2Y9cTChyQnAlo4L14SZtODjikgOE3yRRk1zqm/6i1e224rKMytj1XlYu6uBxAfsj/D8AUwBlcGxwdclahSBZqKEjjhi8lZWT5PTQTJKNEPi1204txef6B1LqiG6kwAwtDjCFchmBsibF9A1j9N8TP0Ev0R3g4SnfdTWAbHAPwE21dP8DLcsZYNDSAcpt4kU2c/P0SxtJfLB/eTPfyWwQdOK9ZdTZOwiQCfyN/IrpJsmxp891W53h1p7nJcnByY9m80ubG36U2a709rf378TeAOZM/vCJS4ddkpu3Rwd5H6qai6zfvz/4Ed1Cbcz+KQ4axACkCy3cYEk3VW8A02316CkIVH0e3EZ51QvaIz3x9SQIAh4whlHiK6JFJTBM/V+SWLKDs7PPstOea/8zTuM43c7iOIsvcjd+0fXnjv6se0KeRWVToMaRIoK0ETBRKT4oXkAUuQhC4Q1hOcvksme+LPfW+vtZ7fwdqoty6JBecRyLyXReDE06mZ6Ocr6fjaver1Ij+/soIvH9pvZ9XRhrzf1v8LPgMd3pB1sBft9u2vnzt/zIn39gjueryDCZbnkZ0mXHRvZbxSnfJzFafT/dsO43Ld2eGN83B/P5AbeTrtVbGl+7wW/cEC6fPIa1qwZhH9IKcz+OtSv3J94Kbpf/f6z9rzXADleImx6D2mUYvn8Nbf/TO8faf+NAdg24X1yH2gfpCmtff6dQ+8f51DPixXfvU9M6i0/mjVOltVdhWCFdH5KbvkajIWO62bv2qt88dacOu5fX+taYWcba2ld89ie/fsKrzoP1/EHT0q0JOdn78/l+3ZvEK6diF4NfhaJ88H3Y5NMubrfEGDa5Id6PWPuweE6IfhO12WzJW0zWLbWyDWo422yVZ4GrayIW7D/813FeZGvXEm62f3n+1q3nb33wA3Ps9OnaPt9urFPor9aELxSnFiMahM467hEOgrceGdP8Fgv81JwF/uOK77VH5LxSC/5EY+u3+BEMwuChcT+o/x/6iwffpbn4moC1DmxpqxGVly+/9uTlr33k5Y9x3nsFcfnLmB+4uBT7j4VgOX64Ika85o9EJS3Dn304hD58/aFyFtH2chj+1VpQfXQ9Ksq1ypQ6ZyEi/gckxjJWAAB42oWQz2oCMRDGv/gPhFKKT5BLwR6MccXLUnoRPBR61LurWQ3YXVmzilBKn6UP0EvPPffcc5+gtz5Cv12DUAp1QzK/+XZmMhMA53iBwOG7waNngSY+PFfQwJfnKi7FtecammLruY4L8ey5Qf2dkaLWpPdQZhUs0MKb5wrO8Om5ilt8e66hJSLPdUjx5LlB/RVDZDCYwvGcQyLCnueYNkdCNae3gyUtSSOkpVrYDAvmSARQ0LRtRjiuNUJ0uWIfGx9jFTb0FFVD/QoYZmbqzFxGezmO8sTlcmfdUo7SxI3SbGFkoLRsL51bh91uTDUuVLWJVWIc8y1m5SVbDpBjxaKwszTZTvMV8a4cyfLPPR0ztzntfxOE3H9LHvQAfXQw4A4Y26OH322G8ng1Oeh3Bp1A9/qnmpywg4zvYssYydpFdVXaoidMTLaxaSK17imttTxR8AfTvnDyAHjaXc23EcIAFARRrTDCezN0oQ8IE+LUCwkZ/dEZMGgjLnkzl2ySJr+9X8nqC8n/qjclpUadBk0yWrTp0KVHnwFDRoyZMGXGnAXL7Pm4l5HnGrrWjW610J3u9aBHPelZL3rVm5aVYT/sh/2wH/aj+ACCnTN0AAAAAf//AAJ42mNgYGBkAIKTnfmGIPrs4cVwGgBGKwa8AAAA) format('woff');
	font-weight:normal;
	font-style:normal;
}
[class^="icon-"],
[class*=" icon-"]{
	font-family:'iconvault';
	font-style:normal;
	font-weight:normal;
	text-decoration:inherit;
	-webkit-font-smoothing:antialiased;
 }
.basecloud:before,
.windyraincloud:before,
.windysnowcloud:before,
.basethundercloud:before{font-family:'iconvault';font-style:normal;position:absolute;color:#ccc}
.basecloud:before{content:'\f105'}
.windyraincloud:before{content:'\f111'}
.windysnowcloud:before{content:'\f109'}
.basethundercloud:before{content:'\f105'}

.icon-thunder:before{content:'\f114';position:absolute;color:#ffa500}
.icon-sunny:after{content:'\f101';color:#ffa500;position:absolute}
.icon-drizzle:before{content:'\f10a';color: #82b2e4;position:absolute}
.icon-hail:before{content:'\f10f';position:absolute;color:#ccc}
.icon-showers:before{content:'\f104';position:absolute;color:#82b2e4}
.icon-rainy:before{content:'\f107';position:absolute;color:#4681c3}
.icon-snowy:before{content:'\f10b';position:absolute;color:#acd3f3}
.icon-frosty:before{content:'\f102';position:absolute;color:#85d8f7}
.icon-windy:before{content:'\f115';position:absolute;color:#ccc}
.icon-windyrain:before{content:'\f10e';position:absolute;color:#acd3f3}
.icon-windysnow:before{content:'\f103';position:absolute;color:#acd3f3}
.icon-sleet:before{content:'\f10c';position:absolute;color:#acd3f3}
.icon-moon:after{content:'\f10d';color:#ffa500;position:absolute}
.icon-night:after{content:'\f100';position:absolute;color:#ffa500}
.icon-sun::after{content:'\f113';color:#ffa500;position:absolute}
.icon-cloud:after{content:'\f106';color:#ccc;position:absolute}
.icon-sunrise:before{content:'\f112';color:#ffa500;position:absolute}
.icon-sunset:before{content:'\f110';color:#f96f23;position:absolute}
.icon-mist:before{content:'\f108';color:#ccc;position:absolute}

.box-inner:after,
.box-base:before,
.box-base:after,
.cloud:before,
.cloud:after,
.cloud .dtl:before,
.cloud .dtl:after,
.statue .hair:before,
.statue .hair:after,
.statue .crown .arrow:before,
.statue .crown .arrow:after,
.statue .body:before,
.statue .body:after,
.statue .hand:before,
.statue .hand:after,
.statue .torch-glow:before,
.statue .torch-glow:after,
.statue .torch:before,
.statue .torch:after,
.statue .cloth:before,
.statue .cloth:after,
.statue .cloth-wrap:before,
.statue .cloth-wrap:after,
.statue .base .top:before,
.statue .base .top:after,
.toggle-switch .tgl-btn:after,
.toggle-switch .dtl-icon>i:before,
.toggle-switch .dtl-icon>i:after
{
	content:'';
	position:absolute;
}
.statue,
.statue .head,
.statue .hair,
.statue .crown .arrow,
.statue .torch,
.statue .body,
.statue .cloth,
.statue .base .bar,
.statue .base .top,
.statue .cloth-wrap,
.toggle-switch .dtl-icon>i{
	margin:auto;
	position:relative;
}

.box-wrap{
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:-1;
	position:fixed;
	background-color:#333366;
	background:linear-gradient(to bottom,#333366 0, #000 100%);
}
.box,
.box-base,
.box-inner,
.box .flip{max-width:600px;max-height:350px;width:100%;height:100%}
.box-inner{margin:auto;position:relative}
.box-inner:after{
	width:100%;
	height:5px;
	bottom:-56px;
	background:#444;
	-webkit-transform:scaleX(1.41);
	        transform:scaleX(1.41);
}
.box{
	margin:auto;
	margin-top:80px;
	-webkit-perspective:600px;
	        perspective:600px;
}
.box-base{
	z-index:1;
	bottom:-320px;
	position:absolute;
	background-color:#333;
	-webkit-transform:rotateX(90deg) translateZ(160px);
	        transform:rotateX(90deg) translateZ(160px);
}
.box .flip{
	position:absolute;
	-webkit-transform-style:preserve-3d;
	        transform-style:preserve-3d;
	-webkit-backface-visibility:hidden;
	        backface-visibility:hidden;
	transition:all .8s cubic-bezier(1,1.55,.2,.8);
}
.box .flip.front{
	z-index:1;
}
.box .flip.back{
	color:#66cccd;
	background:#333;
	-webkit-transform:rotateX(-90deg) translateZ(160px);
	        transform:rotateX(-90deg) translateZ(160px);
}
.toggle{
	opacity:0;
	z-index:999;
	visibility:hidden;
	position:absolute;
}
.toggle:checked ~ .box-inner .flip.front{
	z-index:-1;
	opacity:0;
	-webkit-transform:rotateX(90deg) translateZ(160px);
	        transform:rotateX(90deg) translateZ(160px);
}
.toggle:checked ~ .box-inner .flip.back{
	-webkit-transform:rotateX(0deg);
	        transform:rotateX(0deg);
}
.toggle:checked ~ .box-inner .box:after{z-index:-1}

.city{
	width:100%;
	bottom:40px;
	position:absolute;
}
.clouds,
.cloud,
.cloud .dtl{
	position:absolute;
}
.clouds{
	z-index:-1;
	width:inherit;
}
.cloud{
	width:75px;
	height:15px;
	border-radius:15px;
	background-color:#4b5d8b;
	-webkit-animation:move-cloud 10s linear infinite;
	        animation:move-cloud 10s linear infinite;
}
.cloud .dtl{
	bottom:0;
	left:-4px;
	width:24px;
	height:24px;
	border-radius:50%;
	background-color:inherit;
}
.cloud .dtl:before{
	top:-4px;
	left:22px;
	width:14px;
	height:20px;
	border-radius:12px;
	background-color:inherit;
}
.cloud .dtl:after{
	left:34px;
	width:34px;
	bottom:2px;
	height:34px;
	border-radius:50%;
	background-color:inherit;
}
.cloud.cloud-1{
	top:15px;
	left:80px;
	animation-dealy:.2s;
}
.cloud.cloud-2{
	top:-25px;
	right:200px;
	background-color:#333366;
	animation-dealy:.4s;
	-webkit-animation-duration:13s;
	        animation-duration:13s;
}
.cloud.cloud-3{
	top:40px;
	width:55px;
	right:240px;
	background-color:#2c2c54;
	animation-dealy:.6s;
	-webkit-animation-duration:15s;
	        animation-duration:15s;
}
.cloud.cloud-3 .dtl{
	width:18px;
	height:18px;
}
.cloud.cloud-3 .dtl:before{
	top:-12px;
	left:14px;
	width:28px;
	height:28px;
	border-radius:50%;
	background-color:inherit;
}
.cloud.cloud-3 .dtl:after{
	bottom:0;
	left:38px;
	width:24px;
	height:24px;
}
@-webkit-keyframes move-cloud{
	0%,100%{-webkit-transform:translateX(100px);transform:translateX(100px)}
	50%{-webkit-transform:translateX(-50px);transform:translateX(-50px)}
}
@keyframes move-cloud{
	0%,100%{-webkit-transform:translateX(100px);transform:translateX(100px)}
	50%{-webkit-transform:translateX(-50px);transform:translateX(-50px)}
}

.statue{
	left:-70px;
}
.statue .head{
	z-index:2;
	width:18px;
	height:22px;
	margin-bottom:4px;
	background-color:#66cccd;
	border-top-left-radius:12px;
	border-top-right-radius:12px;
	border-bottom-left-radius:12px 22px;
	border-bottom-right-radius:12px 22px;
    box-shadow:0 2px 4px rgba(0,0,0,.38);
}
.statue .hair{
	width:inherit;
	height:inherit;
	overflow:hidden;
	border-radius:inherit;
	border-top:2px solid #006f75;
}
.statue .hair:before,
.statue .hair:after{
	top:-8px;
	width:16px;
	height:16px;
	border-radius:50%;
	background-color:#389699;
}
.statue .hair:before{left:-7px}
.statue .hair:after{right:-5px}

.statue .crown{
	width:inherit;
	height:inherit;
	position:absolute;
}
.statue .crown .arrow,
.statue .crown .arrow:before,
.statue .crown .arrow:after{
	width:0;
	height:0;
	position:absolute;
	border:2px solid transparent;
	border-bottom:16px solid #66cccd;
}
.statue .crown .arrow.arrow-1{top:-7px;left:-8px;-webkit-transform:rotate(-70deg);transform:rotate(-70deg)}
.statue .crown .arrow.arrow-1:before{top:1px;left:-8px;-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}
.statue .crown .arrow.arrow-1:after{right:-9px;-webkit-transform:rotate(25deg);transform:rotate(25deg)}

.statue .crown .arrow.arrow-2{top:-17px;left:50%;margin-left:-2px}
.statue .crown .arrow.arrow-2:before,
.statue .crown .arrow.arrow-2:after{display:none}

.statue .crown .arrow.arrow-3{top:-7px;right:-8px;-webkit-transform:rotate(70deg);transform:rotate(70deg)}
.statue .crown .arrow.arrow-3:before{top:1px;right:-8px;-webkit-transform:rotate(18deg);transform:rotate(18deg)}
.statue .crown .arrow.arrow-3:after{left:-9px;-webkit-transform:rotate(-25deg);transform:rotate(-25deg)}

.statue .body{
	width:30px;
	height:90px;
	margin:auto;
	background-color:#66cccd;
	border-top-right-radius:4px;
}
.statue .body:before,
.statue .body:after{
	width:0;
	bottom:0;
	height:0;
	border:4px solid transparent;
}
.statue .body:before{
	left:-3px;
	border-bottom:18px solid #66cccd;
}
.statue .body:after{
	right:-3px;
	border-bottom:24px solid #66cccd;
}
.statue .hands{
	width:inherit;
	height:inherit;
	position:absolute;
}
.statue .hand{position:absolute}
.statue .hand.left{
	top:-45px;
	width:30px;
	left:-16px;
	height:52px;
	border:7px solid #66cccd;
	border-top:none;
	border-right:none;
	border-bottom-left-radius:35px 45px;
	border-top-left-radius:5px 30px;
}
.statue .hand.left:before{
	top:-4px;
	z-index:1;
	left:-8px;
	width:10px;
	height:14px;
	box-shadow:0 0 2px;
	background-color:#66cccd;
	border-top-left-radius:4px 4px;
	border-top-right-radius:4px 4px;
	border-bottom-left-radius:5px 8px;
	border-bottom-right-radius:5px 8px;
}
.statue .hand.left:after{
    left:-4px;
	z-index:1;
	width:18px;
    bottom:-5px;
	height:14px;
	background-color:#66cccd;
    -webkit-transform:rotate(30deg);
            transform:rotate(30deg);
}
.statue .hand.right{
    top:4px;
    z-index:2;
	width:15px;
    right:-12px;
	height:40px;
	background-color:#4b9296;
    -webkit-transform:rotate(35deg);
            transform:rotate(35deg);
}
.statue .hand.right:after{
    top:12px;
    left:10px;
	width:9px;
	height:13px;
	background-color:#66cccd;
    border-top-left-radius:4px 4px;
    border-top-right-radius:4px 4px;
    border-bottom-right-radius:5px 8px;
}
.statue .torch-glow,
.statue .torch{
	position:absolute;
}
.statue .torch-glow{
	top:-50px;
	left:-38px;
	width:72px;
	height:72px;
}
.statue .torch-glow:before,
.statue .torch-glow:after{
	z-index:-1;
	width:inherit;
	height:inherit;
	border-radius:50%;
	-webkit-animation:torch-glow 2s linear infinite;
	        animation:torch-glow 2s linear infinite;
}
.statue .torch-glow:before{
	color:rgb(73,70,81);
	background-color:rgba(73,70,81,.75);
	background:radial-gradient(#444 0,rgba(68,68,68,.15) 100%);
}
.statue .torch-glow:after{
	top:50%;
	left:50%;
	width:48px;
	height:48px;
	margin-top:-24px;
	margin-left:-24px;
	color:rgb(99,84,63);
	background-color:rgba(99,84,63,.75);
	background:radial-gradient(#996633 0,rgba(68,68,68,.15) 100%);
}
@-webkit-keyframes torch-glow{
	0%,100%{
		box-shadow:0 0 20px;
		-webkit-transform:scale(1);
		        transform:scale(1);
	}
	50%{
		box-shadow:none;
		-webkit-transform:scale(1.1);
		        transform:scale(1.1);
	}
}
@keyframes torch-glow{
	0%,100%{
		box-shadow:0 0 20px;
		-webkit-transform:scale(1);
		        transform:scale(1);
	}
	50%{
		box-shadow:none;
		-webkit-transform:scale(1.1);
		        transform:scale(1.1);
	}
}
.statue .torch{
	top:-8px;
	left:-5px;
	width:4px;
	height:22px;
	background-color:#4b9296;
	border-radius:0 0 4px 4px;
}
.statue .torch:after{
	top:-5px;
	left:50%;
	width:10px;
	height:5px;
	margin-left:-5px;
	background-color:#4b9296;
	border-radius:0 0 4px 4px;
}
.statue .torch .flame{
	left:-1px;
    top:-14px;
	width:8px;
	height:8px;
	position:absolute;
    border-top-right-radius:8px 12px;
    border-bottom-left-radius:12px 8px;
	background-color:#ff9642;
	background:linear-gradient(to bottom,#face3a -4px,#ff9642 100%);
	-webkit-transform:rotate(60deg);
	        transform:rotate(60deg);
}

.statue .cloth-wrap{height:100%}
.statue .cloth-wrap:before,
.statue .cloth-wrap:after{
	background-color:#66cccd;
}
.statue .cloth-wrap:before{
	left:2px;
	top:-11px;
	width:20px;
	height:32px;
	background-color:#66cccd;
	-webkit-transform:rotate(-80deg);
	        transform:rotate(-80deg);
}
.statue .cloth-wrap:after{
	right:-4px;
	width:20px;
	height:20px;
	background-color:#66cccd;
	-webkit-transform:rotate(-28deg);
	        transform:rotate(-28deg);
	border-top-right-radius:4px;
}
.statue .cloth{
	width:100%;
	height:100%;
	position:absolute;
}
.statue .cloth:before,
.statue .cloth:after{
	width:0;
	height:0;
	z-index:1;
}
.statue .cloth.cloth-1:before{
	top:-8px;
	left:-5px;
	width:4px;
	height:14px;
	background-color:#46aab3;
	-webkit-transform:rotate(32deg);
	        transform:rotate(32deg);
}
.statue .cloth.cloth-1:after{
	top:2px;
	left:-10px;
	border-radius:1px;
	border:8px solid #66cccd;
	border-right:14px solid transparent;
	border-bottom:0 solid transparent;
	-webkit-transform:rotate(-70deg) skew(-30deg);
	        transform:rotate(-70deg) skew(-30deg);
}
.statue .cloth.cloth-2:before{
    top:-2px;
    left:-2px;
	width:12px;
	z-index:0;
	height:20px;
	background-color:#46aab3;
    -webkit-transform:rotate(-18deg);
            transform:rotate(-18deg);
}
.statue .cloth.cloth-2:after{
	left:2px;
	width:15px;
	height:35px;
	background-color:#66cccd;
	border-bottom-left-radius:3px 12px;
	-webkit-transform:rotate(58deg) skewX(18deg);
	        transform:rotate(58deg) skewX(18deg);
}
.statue .cloth.cloth-3:before{
	top:24px;
	left:-10px;
	border-radius:1px;
	border:8px solid #46aab3;
	border-right:32px solid transparent;
	border-bottom:3px solid transparent;
	-webkit-transform:rotate(-52deg) skew(-28deg);
	        transform:rotate(-52deg) skew(-28deg);
}
.statue .cloth.cloth-3:after{
	top:30px;
	left:8px;
	width:3px;
	height:35px;
	background:#46aab3;
	border-top-left-radius:3px 35px;
	border-bottom-right-radius:3px 35px;
	-webkit-transform:rotate(15deg);
	        transform:rotate(15deg);
}
.statue .cloth.cloth-4:before{
	top:20px;
	left:11px;
	border-radius:1px;
	border:7px solid #46aab3;
	border-left:2px solid transparent;
	border-top:7px solid transparent;
	border-bottom:42px solid transparent;
	-webkit-transform:rotate(-14deg) skewX(-26deg);
	        transform:rotate(-14deg) skewX(-26deg);
}
.statue .cloth.cloth-4:after{
	left:3px;
	z-index:2;
	width:15px;
	bottom:14px;
	height:10px;
	background-color:#66cccd;
	-webkit-transform:rotate(-33deg) skewX(20deg);
	        transform:rotate(-33deg) skewX(20deg);
}
.statue .cloth.cloth-5{overflow:hidden}
.statue .cloth.cloth-5:before{
	width:24px;
	height:30px;
	bottom:1px;
	right:-5px;
	background-color:#46aab3;
	-webkit-transform:rotate(60deg);
	        transform:rotate(60deg);
	background:linear-gradient(136deg,#46aab3 0,transparent 100%);
}
.statue .cloth.cloth-6:before{
	right:2px;
	border:10px solid transparent;
	border-top:4px solid #46aab3;
	border-right:4px solid #46aab3;
	border-top-right-radius:4px;
}
.statue .cloth.cloth-6:after{
	width:4px;
	right:-2px;
	height:30px;
	bottom:20px;
	background-color:#46aab3;
	border-bottom-right-radius:4px 5px;
	-webkit-transform:rotate(-4deg);
	        transform:rotate(-4deg);
}

.statue .base .top{
	width:45px;
	height:45px;
	background:linear-gradient(to bottom,#38999d 0, #3f6564 100%);
}
.statue .base .top:before,
.statue .base .top:after{
	left:50%;
	background-color:#66cccd;
}
.statue .base .top:before{height:4px;width:50px;margin-left:-25px}
.statue .base .top:after{top:10px;height:6px;width:54px;margin-left:-27px}
.statue .base .bar.mid,
.statue .base .bar.bot{
	width:66px;
	height:8px;
	background-color:#3f6564;
}
.statue .base .bar.bot{
	width:100px;
}
.rain{
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:1;
	width:100%;
	height:100%;
	/*display:none;*/
	overflow:hidden;
	position:absolute;
	-webkit-animation:blnk 6s linear infinite;
	        animation:blnk 6s linear infinite;
}
.rain i{
	width:1px;
	height:30px;
	bottom:200px;
	position:absolute;
	background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.6) 100%);
	-webkit-animation:fall .63s linear infinite;
	        animation:fall .63s linear infinite;
}
@-webkit-keyframes fall{ to{margin-top:900px} }
@keyframes fall{ to{margin-top:900px} }
@-webkit-keyframes blnk{ 0%,95%,98%{background-color:transparent}96%,99%,100%{background-color:#fff} }
@keyframes blnk{ 0%,95%,98%{background-color:transparent}96%,99%,100%{background-color:#fff} }
.toggle:checked ~ .rain{
	z-index:-1;
}

.text-gradient{color:#33ffcc;background:-webkit-linear-gradient(left,#33ffcc 0,#33ffff 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.general-info{
	right:0;
	bottom:0;
	min-width:180px;
	min-height:200px;
	position:absolute;
	-webkit-transform:translateX(0);
	        transform:translateX(0);
	transition:all .4s ease-in-out 0s;
}
.general-info .measure{
	font-size:36px;
	line-height:36px;
	font-weight:400;
}
.general-info .status,
.general-info .current-date{font-size:13px;font-weight:400}
.general-info .city-name{font-size:24px;margin-top:15px}
.toggle:checked ~ .box-inner .general-info{-webkit-transform:translateX(50px);transform:translateX(50px)}

.content{
	padding:30px;
}
.content .title{
	font-size:24px;
	margin-bottom:8px;
}
.forecast .grd:after,.content .forecast .grd:before{content:'';display:table}
.forecast .grd:after{clear:both;display:block}
.forecast .grd{
	margin-left:-5px;
	margin-right:-5px;
}
.forecast .grd>.col{
	float:left;
	padding:5px;
	width:16.6666%;
	transition:all .4s ease-in-out 0s;
}
@-webkit-keyframes show-list{
	0%{-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0}
	100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
}
@keyframes show-list{
	0%{-webkit-transform:translateY(100px);transform:translateY(100px);opacity:0}
	100%{-webkit-transform:translateY(0);transform:translateY(0);opacity:1}
}
.toggle:checked ~ .box-inner .forecast .grd>.col{-webkit-animation:show-list 1s linear backwards;animation:show-list 1s linear backwards;-webkit-animation-delay:.4s;animation-delay:.4s}
.toggle:checked ~ .box-inner .forecast .grd>.col:nth-child(1){-webkit-animation-duration:.3s;animation-duration:.3s}
.toggle:checked ~ .box-inner .forecast .grd>.col:nth-child(2){-webkit-animation-duration:.4s;animation-duration:.4s}
.toggle:checked ~ .box-inner .forecast .grd>.col:nth-child(3){-webkit-animation-duration:.5s;animation-duration:.5s}
.toggle:checked ~ .box-inner .forecast .grd>.col:nth-child(4){-webkit-animation-duration:.6s;animation-duration:.6s}
.toggle:checked ~ .box-inner .forecast .grd>.col:nth-child(5){-webkit-animation-duration:.7s;animation-duration:.7s}
.toggle:checked ~ .box-inner .forecast .grd>.col:nth-child(6){-webkit-animation-duration:.8s;animation-duration:.8s}

.forecast .info{
	padding:10px;
	cursor:default;
	background-color:rgba(255,255,255,.03);
	transition:background .2s ease-in-out 0s;
}
.forecast .grd .info:hover{
	background-color:rgba(255,255,255,.08);
}
.forecast .date{
	font-size:14px;
}
.forecast .ico{
	width:38px;
	height:38px;
	font-size:38px;
	line-height:38px;
	display:inline-block;
}
.forecast .unit .min,
.forecast .unit .max{position:relative;margin-right:8px}
.forecast .unit .min{font-size:14px}
.forecast .info .text{
	font-size:14px;
	margin-top:5px;
}
.author{
	margin-top:5px;
	text-align:right;
}
.summary{margin-top:5px;transition:all .2s ease-in-out 0s}
.toggle:checked ~ .box-inner .summary{-webkit-animation:flip-inf .2s linear backwards;animation:flip-inf .2s linear backwards;-webkit-animation-delay:.9s;animation-delay:.9s}
@-webkit-keyframes flip-inf{
	0%{-webkit-transform:scale(0);transform:scale(0)}
	100%{-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes flip-inf{
	0%{-webkit-transform:scale(0);transform:scale(0)}
	100%{-webkit-transform:scale(1);transform:scale(1)}
}
.author{
	margin-top:10px;
}
.author a{
	color:#fff;
	display:inline-block;
	text-decoration:none;
}
.toggle-switch{
	right:0;
	z-index:20;
	width:50px;
	height:50px;
	bottom:-50px;
	cursor:pointer;
	position:absolute;
	-webkit-perspective:200px;
	        perspective:200px;
}
.toggle-switch .tgl-btn{
	width:50px;
	height:50px;
	overflow:hidden;
	position:absolute;
	background-color:#80DEEA;
	-webkit-backface-visibility:hidden;
	        backface-visibility:hidden;
	transition:all .4s ease-in-out 0s;
	background:linear-gradient(30deg,#80DEEA 0, #26C6DA 100%);
}
.toggle-switch .tgl-btn:hover{color:#fff;background:linear-gradient(30deg,#26C6DA 0, #80DEEA 100%)}
.toggle-switch .tgl-btn:after{
	top:0;
	left:-25px;
	width:20px;
	height:100%;
	background-color:rgba(255,255,255,.55);
	-webkit-transform:skewX(-15deg);
	        transform:skewX(-15deg);
	-webkit-filter:blur(2px);
}
.toggle-switch .tgl-btn.front:after{-webkit-animation:shine 2s linear infinite;animation:shine 2s linear infinite}
@-webkit-keyframes shine{
	0%,90%{opacity:0;left:-25px}
	100%{opacity:1;left:50px}
}
@keyframes shine{
	0%,90%{opacity:0;left:-25px}
	100%{opacity:1;left:50px}
}
.toggle-switch .ico{
	width:36px;
	margin:auto;
	height:36px;
	font-size:36px;
	line-height:50px;
}
.toggle-switch .ico>i:before,
.toggle-switch .ico>i:after{color:inherit}
.toggle-switch .dtl-icon{
	width:inherit;
	height:inherit;
	text-align:center;
}
.toggle-switch .dtl-icon>i{
	height:30px;
	margin-top:10px;
	position:relative;
	display:inline-block;
	border-left:1px solid;
}
.toggle-switch .dtl-icon>i:before,
.toggle-switch .dtl-icon>i:after{
	top:-1px;
	height:15px;
	border:inherit;
}
.toggle-switch .dtl-icon>i:before{
	left:-7px;
	-webkit-transform:rotate(45deg);
	        transform:rotate(45deg);
}
.toggle-switch .dtl-icon>i:after{
	right:-6px;
	-webkit-transform:rotate(-45deg);
	        transform:rotate(-45deg);
}

.toggle-switch .tgl-btn.back,
.toggle:checked ~ .box-inner .toggle-switch .tgl-btn.front{-webkit-transform:rotateX(180deg);transform:rotateX(180deg)}
.toggle:checked ~ .box-inner .toggle-switch .tgl-btn.back{-webkit-transform:rotateX(0deg);transform:rotateX(0deg)}
.toggle:checked ~ .box-inner .toggle-switch .tgl-btn.back:after{-webkit-animation:shine 2s linear infinite;animation:shine 2s linear infinite}

Comments