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;}