Ok, so my friend Karl-Henrik Nilsson and I made a little project where You can answer riddles and get access to turn on and off lights in our christmas tree.
I will blog more later on about all the bits and pieces.
So for now, heck it out at lttree.se
html
A responsive circle
I wanted to try to create something really simple with responsive design so I created a circle/knob thing that responds to the size of the browser window.
It’s just alot of mediaqueries that renders four divs with border-radius into a circle and then I used trasform: rotate(deg) to create the effect.
You can check out the demo here and make sure You change the size of the browser window.
<!DOCTYPE html> <html lang="en"> <head> <title> Circle </title> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> <meta name="description" content="A responsive circle" /> <link rel="stylesheet" href="style.css" /> </head> <body> <div id="container"> <div class="a"></div> <div class="b"></div> <div class="c"></div> <div class="d"></div> <div class="e"></div> </div> </body> </html>
* {margin: 0; padding:0;} #container {background: #fff; width: 200px; height: 200px; margin: 40px 0 0 40px;position: relative; overflow: hidden; border-radius: 100px; box-shadow: 0 0 10px rgba(0,0,0,.5);} div {position: absolute; top: 0; left: 0;} div.a {-webkit-border-radius: 100px 0 0 0; background: #c00; margin: 0; padding: 0; width: 100px; height: 100px; transform: rotate(0deg);-webkit-transform: rotate(0deg); transform-origin: 100% 100%;-webkit-transform-origin: 100% 100%;-ms-transform-origin: 100% 100%;z-index:2;} div.b, div.c, div.d,div.e { background: #c00; margin: 0; padding: 0; width: 100px; height: 100px;z-index: 1;display: none;} div.b {top:0;left: 100px;border-radius: 0 100px 0 0;} div.c {top: 100px; left: 100px;border-radius: 0 0 100px 0;} div.d {top: 100px; left: 0;border-radius: 0 0 0 100px;} div.e {top: 0; left: 0;z-index:3;background: #fff; border-radius: 100px 0 0 0;} @media only screen and (max-width: 578px) {div.b {display: block;}} @media only screen and (max-width: 760px) {div.c {display: block;}} @media only screen and (max-width: 938px) {div.d {display: block;}} @media only screen and (min-width: 938px) {div.e {display: block;}} @media only screen and (min-width: 1118px) {div.a {display: none;}} @media only screen and (max-width: 1118px) {#container > div.a {transform: rotate(359deg); -webkit-transform: rotate(359deg);-ms-transform: rotate(359deg);}} @media only screen and (max-width: 1116px) {#container > div.a {transform: rotate(358deg); -webkit-transform: rotate(358deg);-ms-transform: rotate(358deg);}} @media only screen and (max-width: 1114px) {#container > div.a {transform: rotate(357deg); -webkit-transform: rotate(357deg);-ms-transform: rotate(357deg);}} @media only screen and (max-width: 1112px) {#container > div.a {transform: rotate(356deg); -webkit-transform: rotate(356deg);-ms-transform: rotate(356deg);}} @media only screen and (max-width: 1110px) {#container > div.a {transform: rotate(355deg); -webkit-transform: rotate(355deg);-ms-transform: rotate(355deg);}} @media only screen and (max-width: 1108px) {#container > div.a {transform: rotate(354deg); -webkit-transform: rotate(354deg);-ms-transform: rotate(354deg);}} @media only screen and (max-width: 1106px) {#container > div.a {transform: rotate(353deg); -webkit-transform: rotate(353deg);-ms-transform: rotate(353deg);}} @media only screen and (max-width: 1104px) {#container > div.a {transform: rotate(352deg); -webkit-transform: rotate(352deg);-ms-transform: rotate(352deg);}} @media only screen and (max-width: 1102px) {#container > div.a {transform: rotate(351deg); -webkit-transform: rotate(351deg);-ms-transform: rotate(351deg);}} @media only screen and (max-width: 1100px) {#container > div.a {transform: rotate(350deg); -webkit-transform: rotate(350deg);-ms-transform: rotate(350deg);}} @media only screen and (max-width: 1098px) {#container > div.a {transform: rotate(349deg); -webkit-transform: rotate(349deg);-ms-transform: rotate(349deg);}} @media only screen and (max-width: 1096px) {#container > div.a {transform: rotate(348deg); -webkit-transform: rotate(348deg);-ms-transform: rotate(348deg);}} @media only screen and (max-width: 1094px) {#container > div.a {transform: rotate(347deg); -webkit-transform: rotate(347deg);-ms-transform: rotate(347deg);}} @media only screen and (max-width: 1092px) {#container > div.a {transform: rotate(346deg); -webkit-transform: rotate(346deg);-ms-transform: rotate(346deg);}} @media only screen and (max-width: 1090px) {#container > div.a {transform: rotate(345deg); -webkit-transform: rotate(345deg);-ms-transform: rotate(345deg);}} @media only screen and (max-width: 1088px) {#container > div.a {transform: rotate(344deg); -webkit-transform: rotate(344deg);-ms-transform: rotate(344deg);}} @media only screen and (max-width: 1086px) {#container > div.a {transform: rotate(343deg); -webkit-transform: rotate(343deg);-ms-transform: rotate(343deg);}} @media only screen and (max-width: 1084px) {#container > div.a {transform: rotate(342deg); -webkit-transform: rotate(342deg);-ms-transform: rotate(342deg);}} @media only screen and (max-width: 1082px) {#container > div.a {transform: rotate(341deg); -webkit-transform: rotate(341deg);-ms-transform: rotate(341deg);}} @media only screen and (max-width: 1080px) {#container > div.a {transform: rotate(340deg); -webkit-transform: rotate(340deg);-ms-transform: rotate(340deg);}} @media only screen and (max-width: 1078px) {#container > div.a {transform: rotate(339deg); -webkit-transform: rotate(339deg);-ms-transform: rotate(339deg);}} @media only screen and (max-width: 1076px) {#container > div.a {transform: rotate(338deg); -webkit-transform: rotate(338deg);-ms-transform: rotate(338deg);}} @media only screen and (max-width: 1074px) {#container > div.a {transform: rotate(337deg); -webkit-transform: rotate(337deg);-ms-transform: rotate(337deg);}} @media only screen and (max-width: 1072px) {#container > div.a {transform: rotate(336deg); -webkit-transform: rotate(336deg);-ms-transform: rotate(336deg);}} @media only screen and (max-width: 1070px) {#container > div.a {transform: rotate(335deg); -webkit-transform: rotate(335deg);-ms-transform: rotate(335deg);}} @media only screen and (max-width: 1068px) {#container > div.a {transform: rotate(334deg); -webkit-transform: rotate(334deg);-ms-transform: rotate(334deg);}} @media only screen and (max-width: 1066px) {#container > div.a {transform: rotate(333deg); -webkit-transform: rotate(333deg);-ms-transform: rotate(333deg);}} @media only screen and (max-width: 1064px) {#container > div.a {transform: rotate(332deg); -webkit-transform: rotate(332deg);-ms-transform: rotate(332deg);}} @media only screen and (max-width: 1062px) {#container > div.a {transform: rotate(331deg); -webkit-transform: rotate(331deg);-ms-transform: rotate(331deg);}} @media only screen and (max-width: 1060px) {#container > div.a {transform: rotate(330deg); -webkit-transform: rotate(330deg);-ms-transform: rotate(330deg);}} @media only screen and (max-width: 1058px) {#container > div.a {transform: rotate(329deg); -webkit-transform: rotate(329deg);-ms-transform: rotate(329deg);}} @media only screen and (max-width: 1056px) {#container > div.a {transform: rotate(328deg); -webkit-transform: rotate(328deg);-ms-transform: rotate(328deg);}} @media only screen and (max-width: 1054px) {#container > div.a {transform: rotate(327deg); -webkit-transform: rotate(327deg);-ms-transform: rotate(327deg);}} @media only screen and (max-width: 1052px) {#container > div.a {transform: rotate(326deg); -webkit-transform: rotate(326deg);-ms-transform: rotate(326deg);}} @media only screen and (max-width: 1050px) {#container > div.a {transform: rotate(325deg); -webkit-transform: rotate(325deg);-ms-transform: rotate(325deg);}} @media only screen and (max-width: 1048px) {#container > div.a {transform: rotate(324deg); -webkit-transform: rotate(324deg);-ms-transform: rotate(324deg);}} @media only screen and (max-width: 1046px) {#container > div.a {transform: rotate(323deg); -webkit-transform: rotate(323deg);-ms-transform: rotate(323deg);}} @media only screen and (max-width: 1044px) {#container > div.a {transform: rotate(322deg); -webkit-transform: rotate(322deg);-ms-transform: rotate(322deg);}} @media only screen and (max-width: 1042px) {#container > div.a {transform: rotate(321deg); -webkit-transform: rotate(321deg);-ms-transform: rotate(321deg);}} @media only screen and (max-width: 1040px) {#container > div.a {transform: rotate(320deg); -webkit-transform: rotate(320deg);-ms-transform: rotate(320deg);}} @media only screen and (max-width: 1038px) {#container > div.a {transform: rotate(319deg); -webkit-transform: rotate(319deg);-ms-transform: rotate(319deg);}} @media only screen and (max-width: 1036px) {#container > div.a {transform: rotate(318deg); -webkit-transform: rotate(318deg);-ms-transform: rotate(318deg);}} @media only screen and (max-width: 1034px) {#container > div.a {transform: rotate(317deg); -webkit-transform: rotate(317deg);-ms-transform: rotate(317deg);}} @media only screen and (max-width: 1032px) {#container > div.a {transform: rotate(316deg); -webkit-transform: rotate(316deg);-ms-transform: rotate(316deg);}} @media only screen and (max-width: 1030px) {#container > div.a {transform: rotate(315deg); -webkit-transform: rotate(315deg);-ms-transform: rotate(315deg);}} @media only screen and (max-width: 1028px) {#container > div.a {transform: rotate(314deg); -webkit-transform: rotate(314deg);-ms-transform: rotate(314deg);}} @media only screen and (max-width: 1026px) {#container > div.a {transform: rotate(313deg); -webkit-transform: rotate(313deg);-ms-transform: rotate(313deg);}} @media only screen and (max-width: 1024px) {#container > div.a {transform: rotate(312deg); -webkit-transform: rotate(312deg);-ms-transform: rotate(312deg);}} @media only screen and (max-width: 1022px) {#container > div.a {transform: rotate(311deg); -webkit-transform: rotate(311deg);-ms-transform: rotate(311deg);}} @media only screen and (max-width: 1020px) {#container > div.a {transform: rotate(310deg); -webkit-transform: rotate(310deg);-ms-transform: rotate(310deg);}} @media only screen and (max-width: 1018px) {#container > div.a {transform: rotate(309deg); -webkit-transform: rotate(309deg);-ms-transform: rotate(309deg);}} @media only screen and (max-width: 1016px) {#container > div.a {transform: rotate(308deg); -webkit-transform: rotate(308deg);-ms-transform: rotate(308deg);}} @media only screen and (max-width: 1014px) {#container > div.a {transform: rotate(307deg); -webkit-transform: rotate(307deg);-ms-transform: rotate(307deg);}} @media only screen and (max-width: 1012px) {#container > div.a {transform: rotate(306deg); -webkit-transform: rotate(306deg);-ms-transform: rotate(306deg);}} @media only screen and (max-width: 1010px) {#container > div.a {transform: rotate(305deg); -webkit-transform: rotate(305deg);-ms-transform: rotate(305deg);}} @media only screen and (max-width: 1008px) {#container > div.a {transform: rotate(304deg); -webkit-transform: rotate(304deg);-ms-transform: rotate(304deg);}} @media only screen and (max-width: 1006px) {#container > div.a {transform: rotate(303deg); -webkit-transform: rotate(303deg);-ms-transform: rotate(303deg);}} @media only screen and (max-width: 1004px) {#container > div.a {transform: rotate(302deg); -webkit-transform: rotate(302deg);-ms-transform: rotate(302deg);}} @media only screen and (max-width: 1002px) {#container > div.a {transform: rotate(301deg); -webkit-transform: rotate(301deg);-ms-transform: rotate(301deg);}} @media only screen and (max-width: 1000px) {#container > div.a {transform: rotate(300deg); -webkit-transform: rotate(300deg);-ms-transform: rotate(300deg);}} @media only screen and (max-width: 998px) {#container > div.a {transform: rotate(299deg); -webkit-transform: rotate(299deg);-ms-transform: rotate(299deg);}} @media only screen and (max-width: 996px) {#container > div.a {transform: rotate(298deg); -webkit-transform: rotate(298deg);-ms-transform: rotate(298deg);}} @media only screen and (max-width: 994px) {#container > div.a {transform: rotate(297deg); -webkit-transform: rotate(297deg);-ms-transform: rotate(297deg);}} @media only screen and (max-width: 992px) {#container > div.a {transform: rotate(296deg); -webkit-transform: rotate(296deg);-ms-transform: rotate(296deg);}} @media only screen and (max-width: 990px) {#container > div.a {transform: rotate(295deg); -webkit-transform: rotate(295deg);-ms-transform: rotate(295deg);}} @media only screen and (max-width: 988px) {#container > div.a {transform: rotate(294deg); -webkit-transform: rotate(294deg);-ms-transform: rotate(294deg);}} @media only screen and (max-width: 986px) {#container > div.a {transform: rotate(293deg); -webkit-transform: rotate(293deg);-ms-transform: rotate(293deg);}} @media only screen and (max-width: 984px) {#container > div.a {transform: rotate(292deg); -webkit-transform: rotate(292deg);-ms-transform: rotate(292deg);}} @media only screen and (max-width: 982px) {#container > div.a {transform: rotate(291deg); -webkit-transform: rotate(291deg);-ms-transform: rotate(291deg);}} @media only screen and (max-width: 980px) {#container > div.a {transform: rotate(290deg); -webkit-transform: rotate(290deg);-ms-transform: rotate(290deg);}} @media only screen and (max-width: 978px) {#container > div.a {transform: rotate(289deg); -webkit-transform: rotate(289deg);-ms-transform: rotate(289deg);}} @media only screen and (max-width: 976px) {#container > div.a {transform: rotate(288deg); -webkit-transform: rotate(288deg);-ms-transform: rotate(288deg);}} @media only screen and (max-width: 974px) {#container > div.a {transform: rotate(287deg); -webkit-transform: rotate(287deg);-ms-transform: rotate(287deg);}} @media only screen and (max-width: 972px) {#container > div.a {transform: rotate(286deg); -webkit-transform: rotate(286deg);-ms-transform: rotate(286deg);}} @media only screen and (max-width: 970px) {#container > div.a {transform: rotate(285deg); -webkit-transform: rotate(285deg);-ms-transform: rotate(285deg);}} @media only screen and (max-width: 968px) {#container > div.a {transform: rotate(284deg); -webkit-transform: rotate(284deg);-ms-transform: rotate(284deg);}} @media only screen and (max-width: 966px) {#container > div.a {transform: rotate(283deg); -webkit-transform: rotate(283deg);-ms-transform: rotate(283deg);}} @media only screen and (max-width: 964px) {#container > div.a {transform: rotate(282deg); -webkit-transform: rotate(282deg);-ms-transform: rotate(282deg);}} @media only screen and (max-width: 962px) {#container > div.a {transform: rotate(281deg); -webkit-transform: rotate(281deg);-ms-transform: rotate(281deg);}} @media only screen and (max-width: 960px) {#container > div.a {transform: rotate(280deg); -webkit-transform: rotate(280deg);-ms-transform: rotate(280deg);}} @media only screen and (max-width: 958px) {#container > div.a {transform: rotate(279deg); -webkit-transform: rotate(279deg);-ms-transform: rotate(279deg);}} @media only screen and (max-width: 956px) {#container > div.a {transform: rotate(278deg); -webkit-transform: rotate(278deg);-ms-transform: rotate(278deg);}} @media only screen and (max-width: 954px) {#container > div.a {transform: rotate(277deg); -webkit-transform: rotate(277deg);-ms-transform: rotate(277deg);}} @media only screen and (max-width: 952px) {#container > div.a {transform: rotate(276deg); -webkit-transform: rotate(276deg);-ms-transform: rotate(276deg);}} @media only screen and (max-width: 950px) {#container > div.a {transform: rotate(275deg); -webkit-transform: rotate(275deg);-ms-transform: rotate(275deg);}} @media only screen and (max-width: 948px) {#container > div.a {transform: rotate(274deg); -webkit-transform: rotate(274deg);-ms-transform: rotate(274deg);}} @media only screen and (max-width: 946px) {#container > div.a {transform: rotate(273deg); -webkit-transform: rotate(273deg);-ms-transform: rotate(273deg);}} @media only screen and (max-width: 944px) {#container > div.a {transform: rotate(272deg); -webkit-transform: rotate(272deg);-ms-transform: rotate(272deg);}} @media only screen and (max-width: 942px) {#container > div.a {transform: rotate(271deg); -webkit-transform: rotate(271deg);-ms-transform: rotate(271deg);}} @media only screen and (max-width: 940px) {#container > div.a {transform: rotate(270deg); -webkit-transform: rotate(270deg);-ms-transform: rotate(270deg);}} @media only screen and (max-width: 938px) {#container > div.a {transform: rotate(269deg); -webkit-transform: rotate(269deg);-ms-transform: rotate(269deg);}} @media only screen and (max-width: 936px) {#container > div.a {transform: rotate(268deg); -webkit-transform: rotate(268deg);-ms-transform: rotate(268deg);}} @media only screen and (max-width: 934px) {#container > div.a {transform: rotate(267deg); -webkit-transform: rotate(267deg);-ms-transform: rotate(267deg);}} @media only screen and (max-width: 932px) {#container > div.a {transform: rotate(266deg); -webkit-transform: rotate(266deg);-ms-transform: rotate(266deg);}} @media only screen and (max-width: 930px) {#container > div.a {transform: rotate(265deg); -webkit-transform: rotate(265deg);-ms-transform: rotate(265deg);}} @media only screen and (max-width: 928px) {#container > div.a {transform: rotate(264deg); -webkit-transform: rotate(264deg);-ms-transform: rotate(264deg);}} @media only screen and (max-width: 926px) {#container > div.a {transform: rotate(263deg); -webkit-transform: rotate(263deg);-ms-transform: rotate(263deg);}} @media only screen and (max-width: 924px) {#container > div.a {transform: rotate(262deg); -webkit-transform: rotate(262deg);-ms-transform: rotate(262deg);}} @media only screen and (max-width: 922px) {#container > div.a {transform: rotate(261deg); -webkit-transform: rotate(261deg);-ms-transform: rotate(261deg);}} @media only screen and (max-width: 920px) {#container > div.a {transform: rotate(260deg); -webkit-transform: rotate(260deg);-ms-transform: rotate(260deg);}} @media only screen and (max-width: 918px) {#container > div.a {transform: rotate(259deg); -webkit-transform: rotate(259deg);-ms-transform: rotate(259deg);}} @media only screen and (max-width: 916px) {#container > div.a {transform: rotate(258deg); -webkit-transform: rotate(258deg);-ms-transform: rotate(258deg);}} @media only screen and (max-width: 914px) {#container > div.a {transform: rotate(257deg); -webkit-transform: rotate(257deg);-ms-transform: rotate(257deg);}} @media only screen and (max-width: 912px) {#container > div.a {transform: rotate(256deg); -webkit-transform: rotate(256deg);-ms-transform: rotate(256deg);}} @media only screen and (max-width: 910px) {#container > div.a {transform: rotate(255deg); -webkit-transform: rotate(255deg);-ms-transform: rotate(255deg);}} @media only screen and (max-width: 908px) {#container > div.a {transform: rotate(254deg); -webkit-transform: rotate(254deg);-ms-transform: rotate(254deg);}} @media only screen and (max-width: 906px) {#container > div.a {transform: rotate(253deg); -webkit-transform: rotate(253deg);-ms-transform: rotate(253deg);}} @media only screen and (max-width: 904px) {#container > div.a {transform: rotate(252deg); -webkit-transform: rotate(252deg);-ms-transform: rotate(252deg);}} @media only screen and (max-width: 902px) {#container > div.a {transform: rotate(251deg); -webkit-transform: rotate(251deg);-ms-transform: rotate(251deg);}} @media only screen and (max-width: 900px) {#container > div.a {transform: rotate(250deg); -webkit-transform: rotate(250deg);-ms-transform: rotate(250deg);}} @media only screen and (max-width: 898px) {#container > div.a {transform: rotate(249deg); -webkit-transform: rotate(249deg);-ms-transform: rotate(249deg);}} @media only screen and (max-width: 896px) {#container > div.a {transform: rotate(248deg); -webkit-transform: rotate(248deg);-ms-transform: rotate(248deg);}} @media only screen and (max-width: 894px) {#container > div.a {transform: rotate(247deg); -webkit-transform: rotate(247deg);-ms-transform: rotate(247deg);}} @media only screen and (max-width: 892px) {#container > div.a {transform: rotate(246deg); -webkit-transform: rotate(246deg);-ms-transform: rotate(246deg);}} @media only screen and (max-width: 890px) {#container > div.a {transform: rotate(245deg); -webkit-transform: rotate(245deg);-ms-transform: rotate(245deg);}} @media only screen and (max-width: 888px) {#container > div.a {transform: rotate(244deg); -webkit-transform: rotate(244deg);-ms-transform: rotate(244deg);}} @media only screen and (max-width: 886px) {#container > div.a {transform: rotate(243deg); -webkit-transform: rotate(243deg);-ms-transform: rotate(243deg);}} @media only screen and (max-width: 884px) {#container > div.a {transform: rotate(242deg); -webkit-transform: rotate(242deg);-ms-transform: rotate(242deg);}} @media only screen and (max-width: 882px) {#container > div.a {transform: rotate(241deg); -webkit-transform: rotate(241deg);-ms-transform: rotate(241deg);}} @media only screen and (max-width: 880px) {#container > div.a {transform: rotate(240deg); -webkit-transform: rotate(240deg);-ms-transform: rotate(240deg);}} @media only screen and (max-width: 878px) {#container > div.a {transform: rotate(239deg); -webkit-transform: rotate(239deg);-ms-transform: rotate(239deg);}} @media only screen and (max-width: 876px) {#container > div.a {transform: rotate(238deg); -webkit-transform: rotate(238deg);-ms-transform: rotate(238deg);}} @media only screen and (max-width: 874px) {#container > div.a {transform: rotate(237deg); -webkit-transform: rotate(237deg);-ms-transform: rotate(237deg);}} @media only screen and (max-width: 872px) {#container > div.a {transform: rotate(236deg); -webkit-transform: rotate(236deg);-ms-transform: rotate(236deg);}} @media only screen and (max-width: 870px) {#container > div.a {transform: rotate(235deg); -webkit-transform: rotate(235deg);-ms-transform: rotate(235deg);}} @media only screen and (max-width: 868px) {#container > div.a {transform: rotate(234deg); -webkit-transform: rotate(234deg);-ms-transform: rotate(234deg);}} @media only screen and (max-width: 866px) {#container > div.a {transform: rotate(233deg); -webkit-transform: rotate(233deg);-ms-transform: rotate(233deg);}} @media only screen and (max-width: 864px) {#container > div.a {transform: rotate(232deg); -webkit-transform: rotate(232deg);-ms-transform: rotate(232deg);}} @media only screen and (max-width: 862px) {#container > div.a {transform: rotate(231deg); -webkit-transform: rotate(231deg);-ms-transform: rotate(231deg);}} @media only screen and (max-width: 860px) {#container > div.a {transform: rotate(230deg); -webkit-transform: rotate(230deg);-ms-transform: rotate(230deg);}} @media only screen and (max-width: 858px) {#container > div.a {transform: rotate(229deg); -webkit-transform: rotate(229deg);-ms-transform: rotate(229deg);}} @media only screen and (max-width: 856px) {#container > div.a {transform: rotate(228deg); -webkit-transform: rotate(228deg);-ms-transform: rotate(228deg);}} @media only screen and (max-width: 854px) {#container > div.a {transform: rotate(227deg); -webkit-transform: rotate(227deg);-ms-transform: rotate(227deg);}} @media only screen and (max-width: 852px) {#container > div.a {transform: rotate(226deg); -webkit-transform: rotate(226deg);-ms-transform: rotate(226deg);}} @media only screen and (max-width: 850px) {#container > div.a {transform: rotate(225deg); -webkit-transform: rotate(225deg);-ms-transform: rotate(225deg);}} @media only screen and (max-width: 848px) {#container > div.a {transform: rotate(224deg); -webkit-transform: rotate(224deg);-ms-transform: rotate(224deg);}} @media only screen and (max-width: 846px) {#container > div.a {transform: rotate(223deg); -webkit-transform: rotate(223deg);-ms-transform: rotate(223deg);}} @media only screen and (max-width: 844px) {#container > div.a {transform: rotate(222deg); -webkit-transform: rotate(222deg);-ms-transform: rotate(222deg);}} @media only screen and (max-width: 842px) {#container > div.a {transform: rotate(221deg); -webkit-transform: rotate(221deg);-ms-transform: rotate(221deg);}} @media only screen and (max-width: 840px) {#container > div.a {transform: rotate(220deg); -webkit-transform: rotate(220deg);-ms-transform: rotate(220deg);}} @media only screen and (max-width: 838px) {#container > div.a {transform: rotate(219deg); -webkit-transform: rotate(219deg);-ms-transform: rotate(219deg);}} @media only screen and (max-width: 836px) {#container > div.a {transform: rotate(218deg); -webkit-transform: rotate(218deg);-ms-transform: rotate(218deg);}} @media only screen and (max-width: 834px) {#container > div.a {transform: rotate(217deg); -webkit-transform: rotate(217deg);-ms-transform: rotate(217deg);}} @media only screen and (max-width: 832px) {#container > div.a {transform: rotate(216deg); -webkit-transform: rotate(216deg);-ms-transform: rotate(216deg);}} @media only screen and (max-width: 830px) {#container > div.a {transform: rotate(215deg); -webkit-transform: rotate(215deg);-ms-transform: rotate(215deg);}} @media only screen and (max-width: 828px) {#container > div.a {transform: rotate(214deg); -webkit-transform: rotate(214deg);-ms-transform: rotate(214deg);}} @media only screen and (max-width: 826px) {#container > div.a {transform: rotate(213deg); -webkit-transform: rotate(213deg);-ms-transform: rotate(213deg);}} @media only screen and (max-width: 824px) {#container > div.a {transform: rotate(212deg); -webkit-transform: rotate(212deg);-ms-transform: rotate(212deg);}} @media only screen and (max-width: 822px) {#container > div.a {transform: rotate(211deg); -webkit-transform: rotate(211deg);-ms-transform: rotate(211deg);}} @media only screen and (max-width: 820px) {#container > div.a {transform: rotate(210deg); -webkit-transform: rotate(210deg);-ms-transform: rotate(210deg);}} @media only screen and (max-width: 818px) {#container > div.a {transform: rotate(209deg); -webkit-transform: rotate(209deg);-ms-transform: rotate(209deg);}} @media only screen and (max-width: 816px) {#container > div.a {transform: rotate(208deg); -webkit-transform: rotate(208deg);-ms-transform: rotate(208deg);}} @media only screen and (max-width: 814px) {#container > div.a {transform: rotate(207deg); -webkit-transform: rotate(207deg);-ms-transform: rotate(207deg);}} @media only screen and (max-width: 812px) {#container > div.a {transform: rotate(206deg); -webkit-transform: rotate(206deg);-ms-transform: rotate(206deg);}} @media only screen and (max-width: 810px) {#container > div.a {transform: rotate(205deg); -webkit-transform: rotate(205deg);-ms-transform: rotate(205deg);}} @media only screen and (max-width: 808px) {#container > div.a {transform: rotate(204deg); -webkit-transform: rotate(204deg);-ms-transform: rotate(204deg);}} @media only screen and (max-width: 806px) {#container > div.a {transform: rotate(203deg); -webkit-transform: rotate(203deg);-ms-transform: rotate(203deg);}} @media only screen and (max-width: 804px) {#container > div.a {transform: rotate(202deg); -webkit-transform: rotate(202deg);-ms-transform: rotate(202deg);}} @media only screen and (max-width: 802px) {#container > div.a {transform: rotate(201deg); -webkit-transform: rotate(201deg);-ms-transform: rotate(201deg);}} @media only screen and (max-width: 800px) {#container > div.a {transform: rotate(200deg); -webkit-transform: rotate(200deg);-ms-transform: rotate(200deg);}} @media only screen and (max-width: 798px) {#container > div.a {transform: rotate(199deg); -webkit-transform: rotate(199deg);-ms-transform: rotate(199deg);}} @media only screen and (max-width: 796px) {#container > div.a {transform: rotate(198deg); -webkit-transform: rotate(198deg);-ms-transform: rotate(198deg);}} @media only screen and (max-width: 794px) {#container > div.a {transform: rotate(197deg); -webkit-transform: rotate(197deg);-ms-transform: rotate(197deg);}} @media only screen and (max-width: 792px) {#container > div.a {transform: rotate(196deg); -webkit-transform: rotate(196deg);-ms-transform: rotate(196deg);}} @media only screen and (max-width: 790px) {#container > div.a {transform: rotate(195deg); -webkit-transform: rotate(195deg);-ms-transform: rotate(195deg);}} @media only screen and (max-width: 788px) {#container > div.a {transform: rotate(194deg); -webkit-transform: rotate(194deg);-ms-transform: rotate(194deg);}} @media only screen and (max-width: 786px) {#container > div.a {transform: rotate(193deg); -webkit-transform: rotate(193deg);-ms-transform: rotate(193deg);}} @media only screen and (max-width: 784px) {#container > div.a {transform: rotate(192deg); -webkit-transform: rotate(192deg);-ms-transform: rotate(192deg);}} @media only screen and (max-width: 782px) {#container > div.a {transform: rotate(191deg); -webkit-transform: rotate(191deg);-ms-transform: rotate(191deg);}} @media only screen and (max-width: 780px) {#container > div.a {transform: rotate(190deg); -webkit-transform: rotate(190deg);-ms-transform: rotate(190deg);}} @media only screen and (max-width: 778px) {#container > div.a {transform: rotate(189deg); -webkit-transform: rotate(189deg);-ms-transform: rotate(189deg);}} @media only screen and (max-width: 776px) {#container > div.a {transform: rotate(188deg); -webkit-transform: rotate(188deg);-ms-transform: rotate(188deg);}} @media only screen and (max-width: 774px) {#container > div.a {transform: rotate(187deg); -webkit-transform: rotate(187deg);-ms-transform: rotate(187deg);}} @media only screen and (max-width: 772px) {#container > div.a {transform: rotate(186deg); -webkit-transform: rotate(186deg);-ms-transform: rotate(186deg);}} @media only screen and (max-width: 770px) {#container > div.a {transform: rotate(185deg); -webkit-transform: rotate(185deg);-ms-transform: rotate(185deg);}} @media only screen and (max-width: 768px) {#container > div.a {transform: rotate(184deg); -webkit-transform: rotate(184deg);-ms-transform: rotate(184deg);}} @media only screen and (max-width: 766px) {#container > div.a {transform: rotate(183deg); -webkit-transform: rotate(183deg);-ms-transform: rotate(183deg);}} @media only screen and (max-width: 764px) {#container > div.a {transform: rotate(182deg); -webkit-transform: rotate(182deg);-ms-transform: rotate(182deg);}} @media only screen and (max-width: 762px) {#container > div.a {transform: rotate(181deg); -webkit-transform: rotate(181deg);-ms-transform: rotate(181deg);}} @media only screen and (max-width: 760px) {#container > div.a {transform: rotate(180deg); -webkit-transform: rotate(180deg);-ms-transform: rotate(180deg);}} @media only screen and (max-width: 758px) {#container > div.a {transform: rotate(179deg); -webkit-transform: rotate(179deg);-ms-transform: rotate(179deg);}} @media only screen and (max-width: 756px) {#container > div.a {transform: rotate(178deg); -webkit-transform: rotate(178deg);-ms-transform: rotate(178deg);}} @media only screen and (max-width: 754px) {#container > div.a {transform: rotate(177deg); -webkit-transform: rotate(177deg);-ms-transform: rotate(177deg);}} @media only screen and (max-width: 752px) {#container > div.a {transform: rotate(176deg); -webkit-transform: rotate(176deg);-ms-transform: rotate(176deg);}} @media only screen and (max-width: 750px) {#container > div.a {transform: rotate(175deg); -webkit-transform: rotate(175deg);-ms-transform: rotate(175deg);}} @media only screen and (max-width: 748px) {#container > div.a {transform: rotate(174deg); -webkit-transform: rotate(174deg);-ms-transform: rotate(174deg);}} @media only screen and (max-width: 746px) {#container > div.a {transform: rotate(173deg); -webkit-transform: rotate(173deg);-ms-transform: rotate(173deg);}} @media only screen and (max-width: 744px) {#container > div.a {transform: rotate(172deg); -webkit-transform: rotate(172deg);-ms-transform: rotate(172deg);}} @media only screen and (max-width: 742px) {#container > div.a {transform: rotate(171deg); -webkit-transform: rotate(171deg);-ms-transform: rotate(171deg);}} @media only screen and (max-width: 740px) {#container > div.a {transform: rotate(170deg); -webkit-transform: rotate(170deg);-ms-transform: rotate(170deg);}} @media only screen and (max-width: 738px) {#container > div.a {transform: rotate(169deg); -webkit-transform: rotate(169deg);-ms-transform: rotate(169deg);}} @media only screen and (max-width: 736px) {#container > div.a {transform: rotate(168deg); -webkit-transform: rotate(168deg);-ms-transform: rotate(168deg);}} @media only screen and (max-width: 734px) {#container > div.a {transform: rotate(167deg); -webkit-transform: rotate(167deg);-ms-transform: rotate(167deg);}} @media only screen and (max-width: 732px) {#container > div.a {transform: rotate(166deg); -webkit-transform: rotate(166deg);-ms-transform: rotate(166deg);}} @media only screen and (max-width: 730px) {#container > div.a {transform: rotate(165deg); -webkit-transform: rotate(165deg);-ms-transform: rotate(165deg);}} @media only screen and (max-width: 728px) {#container > div.a {transform: rotate(164deg); -webkit-transform: rotate(164deg);-ms-transform: rotate(164deg);}} @media only screen and (max-width: 726px) {#container > div.a {transform: rotate(163deg); -webkit-transform: rotate(163deg);-ms-transform: rotate(163deg);}} @media only screen and (max-width: 724px) {#container > div.a {transform: rotate(162deg); -webkit-transform: rotate(162deg);-ms-transform: rotate(162deg);}} @media only screen and (max-width: 722px) {#container > div.a {transform: rotate(161deg); -webkit-transform: rotate(161deg);-ms-transform: rotate(161deg);}} @media only screen and (max-width: 720px) {#container > div.a {transform: rotate(160deg); -webkit-transform: rotate(160deg);-ms-transform: rotate(160deg);}} @media only screen and (max-width: 718px) {#container > div.a {transform: rotate(159deg); -webkit-transform: rotate(159deg);-ms-transform: rotate(159deg);}} @media only screen and (max-width: 716px) {#container > div.a {transform: rotate(158deg); -webkit-transform: rotate(158deg);-ms-transform: rotate(158deg);}} @media only screen and (max-width: 714px) {#container > div.a {transform: rotate(157deg); -webkit-transform: rotate(157deg);-ms-transform: rotate(157deg);}} @media only screen and (max-width: 712px) {#container > div.a {transform: rotate(156deg); -webkit-transform: rotate(156deg);-ms-transform: rotate(156deg);}} @media only screen and (max-width: 710px) {#container > div.a {transform: rotate(155deg); -webkit-transform: rotate(155deg);-ms-transform: rotate(155deg);}} @media only screen and (max-width: 708px) {#container > div.a {transform: rotate(154deg); -webkit-transform: rotate(154deg);-ms-transform: rotate(154deg);}} @media only screen and (max-width: 706px) {#container > div.a {transform: rotate(153deg); -webkit-transform: rotate(153deg);-ms-transform: rotate(153deg);}} @media only screen and (max-width: 704px) {#container > div.a {transform: rotate(152deg); -webkit-transform: rotate(152deg);-ms-transform: rotate(152deg);}} @media only screen and (max-width: 702px) {#container > div.a {transform: rotate(151deg); -webkit-transform: rotate(151deg);-ms-transform: rotate(151deg);}} @media only screen and (max-width: 700px) {#container > div.a {transform: rotate(150deg); -webkit-transform: rotate(150deg);-ms-transform: rotate(150deg);}} @media only screen and (max-width: 698px) {#container > div.a {transform: rotate(149deg); -webkit-transform: rotate(149deg);-ms-transform: rotate(149deg);}} @media only screen and (max-width: 696px) {#container > div.a {transform: rotate(148deg); -webkit-transform: rotate(148deg);-ms-transform: rotate(148deg);}} @media only screen and (max-width: 694px) {#container > div.a {transform: rotate(147deg); -webkit-transform: rotate(147deg);-ms-transform: rotate(147deg);}} @media only screen and (max-width: 692px) {#container > div.a {transform: rotate(146deg); -webkit-transform: rotate(146deg);-ms-transform: rotate(146deg);}} @media only screen and (max-width: 690px) {#container > div.a {transform: rotate(145deg); -webkit-transform: rotate(145deg);-ms-transform: rotate(145deg);}} @media only screen and (max-width: 688px) {#container > div.a {transform: rotate(144deg); -webkit-transform: rotate(144deg);-ms-transform: rotate(144deg);}} @media only screen and (max-width: 686px) {#container > div.a {transform: rotate(143deg); -webkit-transform: rotate(143deg);-ms-transform: rotate(143deg);}} @media only screen and (max-width: 684px) {#container > div.a {transform: rotate(142deg); -webkit-transform: rotate(142deg);-ms-transform: rotate(142deg);}} @media only screen and (max-width: 682px) {#container > div.a {transform: rotate(141deg); -webkit-transform: rotate(141deg);-ms-transform: rotate(141deg);}} @media only screen and (max-width: 680px) {#container > div.a {transform: rotate(140deg); -webkit-transform: rotate(140deg);-ms-transform: rotate(140deg);}} @media only screen and (max-width: 678px) {#container > div.a {transform: rotate(139deg); -webkit-transform: rotate(139deg);-ms-transform: rotate(139deg);}} @media only screen and (max-width: 676px) {#container > div.a {transform: rotate(138deg); -webkit-transform: rotate(138deg);-ms-transform: rotate(138deg);}} @media only screen and (max-width: 674px) {#container > div.a {transform: rotate(137deg); -webkit-transform: rotate(137deg);-ms-transform: rotate(137deg);}} @media only screen and (max-width: 672px) {#container > div.a {transform: rotate(136deg); -webkit-transform: rotate(136deg);-ms-transform: rotate(136deg);}} @media only screen and (max-width: 670px) {#container > div.a {transform: rotate(135deg); -webkit-transform: rotate(135deg);-ms-transform: rotate(135deg);}} @media only screen and (max-width: 668px) {#container > div.a {transform: rotate(134deg); -webkit-transform: rotate(134deg);-ms-transform: rotate(134deg);}} @media only screen and (max-width: 666px) {#container > div.a {transform: rotate(133deg); -webkit-transform: rotate(133deg);-ms-transform: rotate(133deg);}} @media only screen and (max-width: 664px) {#container > div.a {transform: rotate(132deg); -webkit-transform: rotate(132deg);-ms-transform: rotate(132deg);}} @media only screen and (max-width: 662px) {#container > div.a {transform: rotate(131deg); -webkit-transform: rotate(131deg);-ms-transform: rotate(131deg);}} @media only screen and (max-width: 660px) {#container > div.a {transform: rotate(130deg); -webkit-transform: rotate(130deg);-ms-transform: rotate(130deg);}} @media only screen and (max-width: 658px) {#container > div.a {transform: rotate(129deg); -webkit-transform: rotate(129deg);-ms-transform: rotate(129deg);}} @media only screen and (max-width: 656px) {#container > div.a {transform: rotate(128deg); -webkit-transform: rotate(128deg);-ms-transform: rotate(128deg);}} @media only screen and (max-width: 654px) {#container > div.a {transform: rotate(127deg); -webkit-transform: rotate(127deg);-ms-transform: rotate(127deg);}} @media only screen and (max-width: 652px) {#container > div.a {transform: rotate(126deg); -webkit-transform: rotate(126deg);-ms-transform: rotate(126deg);}} @media only screen and (max-width: 650px) {#container > div.a {transform: rotate(125deg); -webkit-transform: rotate(125deg);-ms-transform: rotate(125deg);}} @media only screen and (max-width: 648px) {#container > div.a {transform: rotate(124deg); -webkit-transform: rotate(124deg);-ms-transform: rotate(124deg);}} @media only screen and (max-width: 646px) {#container > div.a {transform: rotate(123deg); -webkit-transform: rotate(123deg);-ms-transform: rotate(123deg);}} @media only screen and (max-width: 644px) {#container > div.a {transform: rotate(122deg); -webkit-transform: rotate(122deg);-ms-transform: rotate(122deg);}} @media only screen and (max-width: 642px) {#container > div.a {transform: rotate(121deg); -webkit-transform: rotate(121deg);-ms-transform: rotate(121deg);}} @media only screen and (max-width: 640px) {#container > div.a {transform: rotate(120deg); -webkit-transform: rotate(120deg);-ms-transform: rotate(120deg);}} @media only screen and (max-width: 638px) {#container > div.a {transform: rotate(119deg); -webkit-transform: rotate(119deg);-ms-transform: rotate(119deg);}} @media only screen and (max-width: 636px) {#container > div.a {transform: rotate(118deg); -webkit-transform: rotate(118deg);-ms-transform: rotate(118deg);}} @media only screen and (max-width: 634px) {#container > div.a {transform: rotate(117deg); -webkit-transform: rotate(117deg);-ms-transform: rotate(117deg);}} @media only screen and (max-width: 632px) {#container > div.a {transform: rotate(116deg); -webkit-transform: rotate(116deg);-ms-transform: rotate(116deg);}} @media only screen and (max-width: 630px) {#container > div.a {transform: rotate(115deg); -webkit-transform: rotate(115deg);-ms-transform: rotate(115deg);}} @media only screen and (max-width: 628px) {#container > div.a {transform: rotate(114deg); -webkit-transform: rotate(114deg);-ms-transform: rotate(114deg);}} @media only screen and (max-width: 626px) {#container > div.a {transform: rotate(113deg); -webkit-transform: rotate(113deg);-ms-transform: rotate(113deg);}} @media only screen and (max-width: 624px) {#container > div.a {transform: rotate(112deg); -webkit-transform: rotate(112deg);-ms-transform: rotate(112deg);}} @media only screen and (max-width: 622px) {#container > div.a {transform: rotate(111deg); -webkit-transform: rotate(111deg);-ms-transform: rotate(111deg);}} @media only screen and (max-width: 620px) {#container > div.a {transform: rotate(110deg); -webkit-transform: rotate(110deg);-ms-transform: rotate(110deg);}} @media only screen and (max-width: 618px) {#container > div.a {transform: rotate(109deg); -webkit-transform: rotate(109deg);-ms-transform: rotate(109deg);}} @media only screen and (max-width: 616px) {#container > div.a {transform: rotate(108deg); -webkit-transform: rotate(108deg);-ms-transform: rotate(108deg);}} @media only screen and (max-width: 614px) {#container > div.a {transform: rotate(107deg); -webkit-transform: rotate(107deg);-ms-transform: rotate(107deg);}} @media only screen and (max-width: 612px) {#container > div.a {transform: rotate(106deg); -webkit-transform: rotate(106deg);-ms-transform: rotate(106deg);}} @media only screen and (max-width: 610px) {#container > div.a {transform: rotate(105deg); -webkit-transform: rotate(105deg);-ms-transform: rotate(105deg);}} @media only screen and (max-width: 608px) {#container > div.a {transform: rotate(104deg); -webkit-transform: rotate(104deg);-ms-transform: rotate(104deg);}} @media only screen and (max-width: 606px) {#container > div.a {transform: rotate(103deg); -webkit-transform: rotate(103deg);-ms-transform: rotate(103deg);}} @media only screen and (max-width: 604px) {#container > div.a {transform: rotate(102deg); -webkit-transform: rotate(102deg);-ms-transform: rotate(102deg);}} @media only screen and (max-width: 602px) {#container > div.a {transform: rotate(101deg); -webkit-transform: rotate(101deg);-ms-transform: rotate(101deg);}} @media only screen and (max-width: 600px) {#container > div.a {transform: rotate(100deg); -webkit-transform: rotate(100deg);-ms-transform: rotate(100deg);}} @media only screen and (max-width: 598px) {#container > div.a {transform: rotate(99deg); -webkit-transform: rotate(99deg);-ms-transform: rotate(99deg);}} @media only screen and (max-width: 596px) {#container > div.a {transform: rotate(98deg); -webkit-transform: rotate(98deg);-ms-transform: rotate(98deg);}} @media only screen and (max-width: 594px) {#container > div.a {transform: rotate(97deg); -webkit-transform: rotate(97deg);-ms-transform: rotate(97deg);}} @media only screen and (max-width: 592px) {#container > div.a {transform: rotate(96deg); -webkit-transform: rotate(96deg);-ms-transform: rotate(96deg);}} @media only screen and (max-width: 590px) {#container > div.a {transform: rotate(95deg); -webkit-transform: rotate(95deg);-ms-transform: rotate(95deg);}} @media only screen and (max-width: 588px) {#container > div.a {transform: rotate(94deg); -webkit-transform: rotate(94deg);-ms-transform: rotate(94deg);}} @media only screen and (max-width: 586px) {#container > div.a {transform: rotate(93deg); -webkit-transform: rotate(93deg);-ms-transform: rotate(93deg);}} @media only screen and (max-width: 584px) {#container > div.a {transform: rotate(92deg); -webkit-transform: rotate(92deg);-ms-transform: rotate(92deg);}} @media only screen and (max-width: 582px) {#container > div.a {transform: rotate(91deg); -webkit-transform: rotate(91deg);-ms-transform: rotate(91deg);}} @media only screen and (max-width: 580px) {#container > div.a {transform: rotate(90deg); -webkit-transform: rotate(90deg);-ms-transform: rotate(90deg);}} @media only screen and (max-width: 578px) {#container > div.a {transform: rotate(89deg); -webkit-transform: rotate(89deg);-ms-transform: rotate(89deg);}} @media only screen and (max-width: 576px) {#container > div.a {transform: rotate(88deg); -webkit-transform: rotate(88deg);-ms-transform: rotate(88deg);}} @media only screen and (max-width: 574px) {#container > div.a {transform: rotate(87deg); -webkit-transform: rotate(87deg);-ms-transform: rotate(87deg);}} @media only screen and (max-width: 572px) {#container > div.a {transform: rotate(86deg); -webkit-transform: rotate(86deg);-ms-transform: rotate(86deg);}} @media only screen and (max-width: 570px) {#container > div.a {transform: rotate(85deg); -webkit-transform: rotate(85deg);-ms-transform: rotate(85deg);}} @media only screen and (max-width: 568px) {#container > div.a {transform: rotate(84deg); -webkit-transform: rotate(84deg);-ms-transform: rotate(84deg);}} @media only screen and (max-width: 566px) {#container > div.a {transform: rotate(83deg); -webkit-transform: rotate(83deg);-ms-transform: rotate(83deg);}} @media only screen and (max-width: 564px) {#container > div.a {transform: rotate(82deg); -webkit-transform: rotate(82deg);-ms-transform: rotate(82deg);}} @media only screen and (max-width: 562px) {#container > div.a {transform: rotate(81deg); -webkit-transform: rotate(81deg);-ms-transform: rotate(81deg);}} @media only screen and (max-width: 560px) {#container > div.a {transform: rotate(80deg); -webkit-transform: rotate(80deg);-ms-transform: rotate(80deg);}} @media only screen and (max-width: 558px) {#container > div.a {transform: rotate(79deg); -webkit-transform: rotate(79deg);-ms-transform: rotate(79deg);}} @media only screen and (max-width: 556px) {#container > div.a {transform: rotate(78deg); -webkit-transform: rotate(78deg);-ms-transform: rotate(78deg);}} @media only screen and (max-width: 554px) {#container > div.a {transform: rotate(77deg); -webkit-transform: rotate(77deg);-ms-transform: rotate(77deg);}} @media only screen and (max-width: 552px) {#container > div.a {transform: rotate(76deg); -webkit-transform: rotate(76deg);-ms-transform: rotate(76deg);}} @media only screen and (max-width: 550px) {#container > div.a {transform: rotate(75deg); -webkit-transform: rotate(75deg);-ms-transform: rotate(75deg);}} @media only screen and (max-width: 548px) {#container > div.a {transform: rotate(74deg); -webkit-transform: rotate(74deg);-ms-transform: rotate(74deg);}} @media only screen and (max-width: 546px) {#container > div.a {transform: rotate(73deg); -webkit-transform: rotate(73deg);-ms-transform: rotate(73deg);}} @media only screen and (max-width: 544px) {#container > div.a {transform: rotate(72deg); -webkit-transform: rotate(72deg);-ms-transform: rotate(72deg);}} @media only screen and (max-width: 542px) {#container > div.a {transform: rotate(71deg); -webkit-transform: rotate(71deg);-ms-transform: rotate(71deg);}} @media only screen and (max-width: 540px) {#container > div.a {transform: rotate(70deg); -webkit-transform: rotate(70deg);-ms-transform: rotate(70deg);}} @media only screen and (max-width: 538px) {#container > div.a {transform: rotate(69deg); -webkit-transform: rotate(69deg);-ms-transform: rotate(69deg);}} @media only screen and (max-width: 536px) {#container > div.a {transform: rotate(68deg); -webkit-transform: rotate(68deg);-ms-transform: rotate(68deg);}} @media only screen and (max-width: 534px) {#container > div.a {transform: rotate(67deg); -webkit-transform: rotate(67deg);-ms-transform: rotate(67deg);}} @media only screen and (max-width: 532px) {#container > div.a {transform: rotate(66deg); -webkit-transform: rotate(66deg);-ms-transform: rotate(66deg);}} @media only screen and (max-width: 530px) {#container > div.a {transform: rotate(65deg); -webkit-transform: rotate(65deg);-ms-transform: rotate(65deg);}} @media only screen and (max-width: 528px) {#container > div.a {transform: rotate(64deg); -webkit-transform: rotate(64deg);-ms-transform: rotate(64deg);}} @media only screen and (max-width: 526px) {#container > div.a {transform: rotate(63deg); -webkit-transform: rotate(63deg);-ms-transform: rotate(63deg);}} @media only screen and (max-width: 524px) {#container > div.a {transform: rotate(62deg); -webkit-transform: rotate(62deg);-ms-transform: rotate(62deg);}} @media only screen and (max-width: 522px) {#container > div.a {transform: rotate(61deg); -webkit-transform: rotate(61deg);-ms-transform: rotate(61deg);}} @media only screen and (max-width: 520px) {#container > div.a {transform: rotate(60deg); -webkit-transform: rotate(60deg);-ms-transform: rotate(60deg);}} @media only screen and (max-width: 518px) {#container > div.a {transform: rotate(59deg); -webkit-transform: rotate(59deg);-ms-transform: rotate(59deg);}} @media only screen and (max-width: 516px) {#container > div.a {transform: rotate(58deg); -webkit-transform: rotate(58deg);-ms-transform: rotate(58deg);}} @media only screen and (max-width: 514px) {#container > div.a {transform: rotate(57deg); -webkit-transform: rotate(57deg);-ms-transform: rotate(57deg);}} @media only screen and (max-width: 512px) {#container > div.a {transform: rotate(56deg); -webkit-transform: rotate(56deg);-ms-transform: rotate(56deg);}} @media only screen and (max-width: 510px) {#container > div.a {transform: rotate(55deg); -webkit-transform: rotate(55deg);-ms-transform: rotate(55deg);}} @media only screen and (max-width: 508px) {#container > div.a {transform: rotate(54deg); -webkit-transform: rotate(54deg);-ms-transform: rotate(54deg);}} @media only screen and (max-width: 506px) {#container > div.a {transform: rotate(53deg); -webkit-transform: rotate(53deg);-ms-transform: rotate(53deg);}} @media only screen and (max-width: 504px) {#container > div.a {transform: rotate(52deg); -webkit-transform: rotate(52deg);-ms-transform: rotate(52deg);}} @media only screen and (max-width: 502px) {#container > div.a {transform: rotate(51deg); -webkit-transform: rotate(51deg);-ms-transform: rotate(51deg);}} @media only screen and (max-width: 500px) {#container > div.a {transform: rotate(50deg); -webkit-transform: rotate(50deg);-ms-transform: rotate(50deg);}} @media only screen and (max-width: 498px) {#container > div.a {transform: rotate(49deg); -webkit-transform: rotate(49deg);-ms-transform: rotate(49deg);}} @media only screen and (max-width: 496px) {#container > div.a {transform: rotate(48deg); -webkit-transform: rotate(48deg);-ms-transform: rotate(48deg);}} @media only screen and (max-width: 494px) {#container > div.a {transform: rotate(47deg); -webkit-transform: rotate(47deg);-ms-transform: rotate(47deg);}} @media only screen and (max-width: 492px) {#container > div.a {transform: rotate(46deg); -webkit-transform: rotate(46deg);-ms-transform: rotate(46deg);}} @media only screen and (max-width: 490px) {#container > div.a {transform: rotate(45deg); -webkit-transform: rotate(45deg);-ms-transform: rotate(45deg);}} @media only screen and (max-width: 488px) {#container > div.a {transform: rotate(44deg); -webkit-transform: rotate(44deg);-ms-transform: rotate(44deg);}} @media only screen and (max-width: 486px) {#container > div.a {transform: rotate(43deg); -webkit-transform: rotate(43deg);-ms-transform: rotate(43deg);}} @media only screen and (max-width: 484px) {#container > div.a {transform: rotate(42deg); -webkit-transform: rotate(42deg);-ms-transform: rotate(42deg);}} @media only screen and (max-width: 482px) {#container > div.a {transform: rotate(41deg); -webkit-transform: rotate(41deg);-ms-transform: rotate(41deg);}} @media only screen and (max-width: 480px) {#container > div.a {transform: rotate(40deg); -webkit-transform: rotate(40deg);-ms-transform: rotate(40deg);}} @media only screen and (max-width: 478px) {#container > div.a {transform: rotate(39deg); -webkit-transform: rotate(39deg);-ms-transform: rotate(39deg);}} @media only screen and (max-width: 476px) {#container > div.a {transform: rotate(38deg); -webkit-transform: rotate(38deg);-ms-transform: rotate(38deg);}} @media only screen and (max-width: 474px) {#container > div.a {transform: rotate(37deg); -webkit-transform: rotate(37deg);-ms-transform: rotate(37deg);}} @media only screen and (max-width: 472px) {#container > div.a {transform: rotate(36deg); -webkit-transform: rotate(36deg);-ms-transform: rotate(36deg);}} @media only screen and (max-width: 470px) {#container > div.a {transform: rotate(35deg); -webkit-transform: rotate(35deg);-ms-transform: rotate(35deg);}} @media only screen and (max-width: 468px) {#container > div.a {transform: rotate(34deg); -webkit-transform: rotate(34deg);-ms-transform: rotate(34deg);}} @media only screen and (max-width: 466px) {#container > div.a {transform: rotate(33deg); -webkit-transform: rotate(33deg);-ms-transform: rotate(33deg);}} @media only screen and (max-width: 464px) {#container > div.a {transform: rotate(32deg); -webkit-transform: rotate(32deg);-ms-transform: rotate(32deg);}} @media only screen and (max-width: 462px) {#container > div.a {transform: rotate(31deg); -webkit-transform: rotate(31deg);-ms-transform: rotate(31deg);}} @media only screen and (max-width: 460px) {#container > div.a {transform: rotate(30deg); -webkit-transform: rotate(30deg);-ms-transform: rotate(30deg);}} @media only screen and (max-width: 458px) {#container > div.a {transform: rotate(29deg); -webkit-transform: rotate(29deg);-ms-transform: rotate(29deg);}} @media only screen and (max-width: 456px) {#container > div.a {transform: rotate(28deg); -webkit-transform: rotate(28deg);-ms-transform: rotate(28deg);}} @media only screen and (max-width: 454px) {#container > div.a {transform: rotate(27deg); -webkit-transform: rotate(27deg);-ms-transform: rotate(27deg);}} @media only screen and (max-width: 452px) {#container > div.a {transform: rotate(26deg); -webkit-transform: rotate(26deg);-ms-transform: rotate(26deg);}} @media only screen and (max-width: 450px) {#container > div.a {transform: rotate(25deg); -webkit-transform: rotate(25deg);-ms-transform: rotate(25deg);}} @media only screen and (max-width: 448px) {#container > div.a {transform: rotate(24deg); -webkit-transform: rotate(24deg);-ms-transform: rotate(24deg);}} @media only screen and (max-width: 446px) {#container > div.a {transform: rotate(23deg); -webkit-transform: rotate(23deg);-ms-transform: rotate(23deg);}} @media only screen and (max-width: 444px) {#container > div.a {transform: rotate(22deg); -webkit-transform: rotate(22deg);-ms-transform: rotate(22deg);}} @media only screen and (max-width: 442px) {#container > div.a {transform: rotate(21deg); -webkit-transform: rotate(21deg);-ms-transform: rotate(21deg);}} @media only screen and (max-width: 440px) {#container > div.a {transform: rotate(20deg); -webkit-transform: rotate(20deg);-ms-transform: rotate(20deg);}} @media only screen and (max-width: 438px) {#container > div.a {transform: rotate(19deg); -webkit-transform: rotate(19deg);-ms-transform: rotate(19deg);}} @media only screen and (max-width: 436px) {#container > div.a {transform: rotate(18deg); -webkit-transform: rotate(18deg);-ms-transform: rotate(18deg);}} @media only screen and (max-width: 434px) {#container > div.a {transform: rotate(17deg); -webkit-transform: rotate(17deg);-ms-transform: rotate(17deg);}} @media only screen and (max-width: 432px) {#container > div.a {transform: rotate(16deg); -webkit-transform: rotate(16deg);-ms-transform: rotate(16deg);}} @media only screen and (max-width: 430px) {#container > div.a {transform: rotate(15deg); -webkit-transform: rotate(15deg);-ms-transform: rotate(15deg);}} @media only screen and (max-width: 428px) {#container > div.a {transform: rotate(14deg); -webkit-transform: rotate(14deg);-ms-transform: rotate(14deg);}} @media only screen and (max-width: 426px) {#container > div.a {transform: rotate(13deg); -webkit-transform: rotate(13deg);-ms-transform: rotate(13deg);}} @media only screen and (max-width: 424px) {#container > div.a {transform: rotate(12deg); -webkit-transform: rotate(12deg);-ms-transform: rotate(12deg);}} @media only screen and (max-width: 422px) {#container > div.a {transform: rotate(11deg); -webkit-transform: rotate(11deg);-ms-transform: rotate(11deg);}} @media only screen and (max-width: 420px) {#container > div.a {transform: rotate(10deg); -webkit-transform: rotate(10deg);-ms-transform: rotate(10deg);}} @media only screen and (max-width: 418px) {#container > div.a {transform: rotate(9deg); -webkit-transform: rotate(9deg);-ms-transform: rotate(9deg);}} @media only screen and (max-width: 416px) {#container > div.a {transform: rotate(8deg); -webkit-transform: rotate(8deg);-ms-transform: rotate(8deg);}} @media only screen and (max-width: 414px) {#container > div.a {transform: rotate(7deg); -webkit-transform: rotate(7deg);-ms-transform: rotate(7deg);}} @media only screen and (max-width: 412px) {#container > div.a {transform: rotate(6deg); -webkit-transform: rotate(6deg);-ms-transform: rotate(6deg);}} @media only screen and (max-width: 410px) {#container > div.a {transform: rotate(5deg); -webkit-transform: rotate(5deg);-ms-transform: rotate(5deg);}} @media only screen and (max-width: 408px) {#container > div.a {transform: rotate(4deg); -webkit-transform: rotate(4deg);-ms-transform: rotate(4deg);}} @media only screen and (max-width: 406px) {#container > div.a {transform: rotate(3deg); -webkit-transform: rotate(3deg);-ms-transform: rotate(3deg);}} @media only screen and (max-width: 404px) {#container > div.a {transform: rotate(2deg); -webkit-transform: rotate(2deg);-ms-transform: rotate(2deg);}} @media only screen and (max-width: 402px) {#container > div.a {transform: rotate(1deg); -webkit-transform: rotate(1deg);-ms-transform: rotate(1deg);}} @media only screen and (max-width: 400px) {#container > div.a {transform: rotate(0deg); -webkit-transform: rotate(0deg);-ms-transform: rotate(0deg);}}
Simple javascript canvas particle system
Today I had some time over and wanted to test out the html5 canvas so I set up to build a quick and dirty particle fountain in javascript.
It is nothing fancy, just something i put togheter in 30 minutes.
Here is a demo: http://blog.warzone.se/demos/particlefountain/
Javascript:
/** * * Just a simple javascript particle fountain * written by Thomas Brunström, thomas.brunstrom@sogeti.se * */ window.onload = function() { var i, canHolder = document.getElementById('canvas'), // The div that we append the canvas to. canvas = document.createElement("canvas"), // Create a canvas object windowSize = {x : window.innerWidth, y : window.innerHeight}, // Window size mouseLoc = { x : (windowSize.x / 2), y : (windowSize.y / 2)}, // Mouse location ctx = canvas.getContext("2d"), // getContext to draw with. objects = [], // Array to hold the objects that we draw render = function() { // Clear the canvas ctx.fillStyle = "rgba(0,0,0,1)"; ctx.fillRect(0,0,windowSize.x,windowSize.y); // Loop through all the objects and move them according to their speed and direction for(i = 0;i<objects.length;i++) { objects[i].xS += objects[i].speedX; objects[i].yS += objects[i].speedY ctx.fillStyle = objects[i].col; ctx.fillRect(objects[i].xS,objects[i].yS,2,2); // If the object is outside the visible area of the // browserwindow we redraw the object at the mouse posiiton if(objects[i].xS > windowSize.x || objects[i].yS > windowSize.y || objects[i].yS < 0 || objects[i].xS < 0) { objects[i] = createObject(); } } setTimeout(render,(1000/60));//Set timeout, ~60 updates per second. }, // Helper function to generate a object createObject = function() { return { col : 'rgba(' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255) + ',' + Math.round(Math.random() * 255)+ ',1)', //Color on object speedX : ((Math.random() * 14) - 7),//Speed x speedY : ((Math.random() * 14) - 7),//Speed y yS : mouseLoc.y, //yStart -> position xS : mouseLoc.x //xStart -> position }; }; // Save the mouse location so we can render from where the mouse is canvas.onmousemove = function(e) { mouseLoc = {x : e.clientX, y : e.clientY }; }; // Set up the height and width of the canvas canvas.height = windowSize.y; canvas.width = windowSize.x; // Set the background on the canvas to black ctx.fillStyle = "rgba(0,0,0,1)"; ctx.fillRect(0,0,windowSize.x,windowSize.y); // Append the canvas to the DOM canHolder.appendChild(canvas); // Create the objects for(i=0;i<1000;i++) { objects.push( createObject() ); } // Lets start drawing the objects setTimeout(render,(1000/60)); };
Html
<!DOCTYPE html> <html> <head> <title>Canvastest</title> <link rel="stylesheet" href="style.css"> </head> <body> <div id="canvas"></div> </body> <script type="text/javascript" src="./script.js" ></script> </html>
Css:
* {margin: 0; padding:0;} body {margin: 0; padding:0; height: 100%; width: 100%;overflow: hidden;} canvas {z-index: 5;}