Responsive svg animation - with @media



Responsive svg animation - with @media




 <div class="container">
  
  
 <!--  this svg contains three scenes grouped together and stacked one on top of another, we show three different scenes at different window size -->
  
			<svg class="svg" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
			    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
			        <g id="MySVG" sketch:type="MSLayerGroup">
			            <g id="SceneThree" sketch:type="MSShapeGroup">
			                <rect id="Rectangle-1-Copy-2" fill="#7994B5" x="0" y="0" width="199" height="199"></rect>
			                <path d="M64.7480042,198.827145 L90.5740312,144.858641 L111.683204,119.205114 L141.011934,56.0029779 L196.204742,198.827145 L64.7480042,198.827145 Z" id="mountain" fill="#E2E2E2"></path>
			                <path d="M152.26404,198.827145 L168.608338,183.247008 L141.011934,56.0029779 L196.204742,198.827145 L152.26404,198.827145 Z" id="shadowL" fill="#D1D0D0"></path>
			                <path d="M39.4344523,164.039426 C41.2367207,164.706858 39.406856,161.686306 38.7258048,160.666127 C35.0385914,155.142874 32.2051215,147.182461 30.1898795,140.011112 C30.0491343,139.510262 28.3735027,138.689491 28.2407274,138.197437 C28.1433483,137.836559 29.9871136,138.552559 29.8940102,138.197437 C27.8124315,130.257724 26.3981861,123.114648 26.3981861,123.114648 C26.3981861,123.114648 25.2651683,128.098034 23.3806099,134.729696 C23.0711512,135.818665 25.664649,133.566606 25.3163501,134.729697 C25.0070821,135.76245 23.1655778,137.128225 22.8282009,138.197437 C20.6732573,145.026872 16.563411,155.465007 13.6180707,160.666127 C12.8087227,162.09534 8.90036382,165.51323 11.2592171,164.70686 C13.6180704,163.90049 10.2834126,166.312055 9.81401243,167.062889 C4.66607718,175.297331 1.06420371,179.383126 1.06420371,179.383126 L5.1834772,179.383126 C6.00510427,179.383126 8.38183319,178.001213 9.20346026,178.001213 C9.99146504,178.001213 9.22436798,179.383126 10.0123728,179.383126 C11.0049367,179.383126 13.4296975,178.321242 14.4222614,178.321242 C15.2335287,178.321242 14.6125991,179.383126 15.4238663,179.383126 C16.4561743,179.383126 18.51156,178.001213 19.5438679,178.001213 C20.5618605,178.001213 20.5567752,179.383126 21.5747678,179.383126 C23.6505625,179.383126 25.3163499,179.383126 25.3163499,179.383126 L22.4758569,198.217607 L29.8940093,198.217607 L26.9833419,179.383126 L30.3354936,179.383126 C31.4111243,179.383126 31.1616422,178.001213 32.2372729,178.001213 C32.8815589,178.001213 34.8509578,179.383126 35.4952438,179.383126 C36.5583486,179.383126 36.613915,178.001213 37.6770198,178.001213 C38.6600715,178.001213 40.6506617,179.383126 41.6337134,179.383126 C42.4439447,179.383126 42.3475061,178.001213 43.1577374,178.001213 C44.0254185,178.001213 45.7997695,179.383126 46.6674507,179.383126 L51.2796718,179.383126 C51.2796718,179.383126 37.6321839,163.371995 39.4344523,164.039426 Z" id="Tree" fill="#363636"></path>
			                <path d="M138.59378,119.205114 C124.664412,122.554281 127.304174,115.855947 123.841751,115.855947 C120.847235,115.855947 111.683204,119.205114 111.683204,119.205114 C111.683204,119.205114 136.746209,56.0029778 141.011934,56.0029779 C145.277658,56.0029781 165.504355,119.205114 165.504355,119.205114 C165.504355,119.205114 152.523147,115.855947 138.59378,119.205114 Z" id="mountainThree" fill="#FFFFFF"></path>
			                <path d="M102.210181,157.599381 C102.210181,157.599381 103.774681,156.364249 105.092154,156.364249 C105.092154,156.364249 103.692339,155.293802 105.33918,153.646961 C106.986022,152.000119 108.632864,152.164803 110.691416,154.635066 C110.691416,154.635066 110.8561,154.223355 111.597179,153.976329 C111.597179,153.976329 112.091231,152.576513 113.820415,152.576513 C115.549599,152.576513 115.631941,153.729303 115.631941,153.729303 C115.631941,153.729303 117.937519,153.23525 119.749045,154.223355 C121.560571,155.21146 123.783807,155.870197 126.418753,155.952539 C128.971358,156.034881 130.535858,156.446591 129.794779,157.434696 C129.794779,157.434696 129.630095,158.011091 129.218384,158.258117 C128.806674,158.505143 128.806674,158.834512 128.724332,159.16388 C128.64199,159.493248 128.147937,161.304774 127.406858,161.798827 C126.748122,162.292879 123.12507,163.775037 121.725255,164.433773 C120.325439,165.09251 115.796625,168.139167 115.22023,168.550877 C114.643836,168.962588 114.314467,169.703667 113.820415,169.950693 C113.326362,170.197719 113.491047,171.185824 113.491047,171.679877 C113.491047,172.173929 113.24402,173.244376 113.491047,173.820771 C113.738073,174.397165 114.479152,176.291033 114.80852,177.032112 C115.137888,177.773191 115.302572,179.008322 116.125993,179.749401 C116.949414,180.490479 116.702388,181.066874 117.19644,181.643269 C117.690493,182.302005 118.596256,183.701821 118.843282,184.360557 C119.007966,184.936952 119.996071,186.172083 120.654808,187.24253 C121.313544,188.230635 121.972281,188.971714 122.054623,189.630451 C122.136965,190.289187 123.536781,190.947924 124.030833,192.265397 C124.524886,193.582871 124.360201,193.747555 124.030833,194.159265 C123.701465,194.570975 123.866149,193.912239 123.536781,193.418186 C123.207412,192.924134 123.536781,193.912239 123.12507,193.994581 C122.71336,194.076923 122.71336,193.006476 122.383991,192.924134 C122.054623,192.841792 122.301649,193.829897 121.972281,193.829897 C121.642913,193.829897 121.807597,193.088818 121.313544,192.924134 C120.819492,192.75945 121.066518,193.253502 120.572466,192.924134 C120.078413,192.594766 119.17265,191.936029 118.76094,191.524318 C118.349229,191.112608 117.937519,190.124503 117.443467,190.371529 C116.949414,190.536213 117.114098,190.536213 116.620046,190.371529 C116.125993,190.124503 115.631941,190.78324 115.384914,190.618556 C115.137888,190.453871 114.643836,190.618556 114.149783,190.206845 C113.655731,189.795135 110.44439,188.065951 109.2916,187.24253 C108.385837,186.666136 105.997917,183.537136 105.997917,183.537136 C105.997917,183.537136 104.762786,182.713716 104.598102,182.219663 C104.433418,181.725611 104.598102,182.549031 104.104049,183.372452 C103.609997,184.195873 102.127839,186.666136 101.716129,187.407214 C101.304418,188.148293 100.728024,190.206845 100.398655,190.700898 C100.069287,191.277292 99.4928926,193.088818 99.5752346,193.665213 C99.6575767,194.323949 100.233971,195.394396 101.139734,195.723765 C102.045497,196.053133 103.857023,195.970791 104.186391,196.464843 C104.598102,197.041238 105.256838,198.029343 104.762786,197.947001 C104.351075,197.864659 103.609997,197.12358 103.36297,197.12358 C103.115944,197.12358 104.021707,198.029343 103.609997,198.111685 C103.198286,198.194027 102.127839,197.370606 101.880813,197.288264 C101.716129,197.205922 102.374865,198.029343 101.880813,198.111685 C101.38676,198.194027 100.480998,197.617633 99.904603,197.53529 C99.3282084,197.452948 96.4462355,197.782317 95.5404726,197.617633 C94.6347097,197.452948 94.3876835,196.876554 94.3053414,196.300159 C94.2229993,195.723765 93.7289468,195.229712 93.4819206,194.73566 C93.2348943,194.323949 91.6703947,190.78324 91.6703947,190.78324 C91.6703947,190.78324 89.941211,187.077846 90.0235531,185.26632 C90.1058952,183.454794 89.6941848,182.466689 89.7765269,181.725611 C89.8588689,180.984532 86.4828436,183.701821 85.0830282,183.948847 C83.6832128,184.195873 83.930239,184.936952 83.930239,185.595689 C83.930239,186.172083 84.6713177,188.889372 84.7536598,189.712793 C84.8360019,190.618556 85.2477123,192.841792 85.4123965,193.665213 C85.4947386,194.570975 86.2358173,195.229712 87.2239223,195.476738 C88.2120273,195.723765 89.8588689,196.300159 90.1058952,197.041238 C90.3529214,197.782317 89.7765269,197.205922 89.2001323,197.12358 C88.5413956,197.041238 88.2943694,197.617633 87.8003169,197.452948 C87.3062644,197.288264 86.4828436,197.041238 85.6594227,197.041238 C84.8360019,197.041238 82.942134,197.370606 81.7893449,197.205922 C80.6365557,197.12358 79.9778191,196.794212 79.7307928,196.300159 C79.4014245,195.806107 78.8250299,194.488633 78.1662932,193.747555 C77.5075566,193.006476 76.5194516,191.19495 76.2724253,190.865582 C76.0253991,190.536213 74.4608995,188.148293 73.966847,187.160188 C73.4727945,186.089741 71.9906371,185.019294 71.5789267,184.772268 C71.1672162,184.525241 70.0144271,184.278215 69.5203746,184.85461 C69.0263221,185.431004 66.8030859,188.395319 66.6384017,189.054056 C66.4737175,189.712793 64.8268759,193.253502 64.1681392,194.076923 C63.5917447,194.900344 62.5212976,195.641423 62.8506659,196.135475 C63.1800343,196.629528 65.4032705,196.71187 65.8149809,197.452948 C66.2266913,198.276369 65.897323,198.111685 65.3209284,198.029343 C64.7445338,197.947001 64.4151655,198.111685 63.8387709,198.111685 C63.3447184,198.111685 63.921113,199.09979 63.1800343,198.68808 C62.4389555,198.276369 61.4508505,197.452948 61.2038243,197.699975 C60.956798,197.864659 60.3804035,198.194027 59.886351,198.029343 C59.0629301,197.782317 57.3337464,197.782317 56.5926677,197.947001 C55.8515889,198.111685 55.8515889,196.629528 55.7692468,195.970791 C55.6869048,195.312054 55.6869048,191.524318 55.933931,190.536213 C56.1809573,189.548108 55.8515889,187.407214 55.933931,186.089741 C56.0162731,184.772268 56.4279835,178.92598 56.6750097,177.526164 C56.8396939,176.208691 57.5807727,169.621325 60.2980614,165.339536 C63.0153501,161.057748 65.5679546,157.764065 71.908295,156.446591 C78.2486353,155.129118 82.5304236,158.258117 86.894554,158.175775 C91.2586843,158.093433 90.3529214,157.764065 92.4938156,156.940644 C94.6347097,156.117223 97.1873143,155.293802 99.7399188,156.117223 C101.798471,156.693618 102.210181,157.599381 102.210181,157.599381 L102.210181,157.599381 Z" id="BearThree" fill="#363636" transform="translate(92.849658, 175.677552) scale(-1, 1) translate(-92.849658, -175.677552) "></path>
			                <g id="Stars" transform="translate(14.593333, 17.246667)" fill="#FFF141">
			                    <polygon class="star" id="Star-1" points="1.99 24.2116667 0.820307348 24.8266105 1.04369877 23.5241386 0.0973975326 22.6017228 1.40515367 22.4116948 1.99 21.2266667 2.57484633 22.4116948 3.88260247 22.6017228 2.93630123 23.5241386 3.15969265 24.8266105 "></polygon>
			                    <polygon class="star2" id="Star-1-Copy" points="19.2366667 81.2583333 18.066974 81.8732772 18.2903654 80.5708052 17.3440642 79.6483895 18.6518203 79.4583614 19.2366667 78.2733333 19.821513 79.4583614 21.1292691 79.6483895 20.1829679 80.5708052 20.4063593 81.8732772 "></polygon>
			                    <polygon class="star" id="Star-1-Copy-2" points="157.21 6.965 156.040307 7.57994382 156.263699 6.27747191 155.317398 5.35505618 156.625154 5.16502809 157.21 3.98 157.794846 5.16502809 159.102602 5.35505618 158.156301 6.27747191 158.379693 7.57994382 "></polygon>
			                    <polygon class="star2" id="Star-1-Copy-3" points="161.19 65.3383333 160.020307 65.9532772 160.243699 64.6508052 159.297398 63.7283895 160.605154 63.5383614 161.19 62.3533333 161.774846 63.5383614 163.082602 63.7283895 162.136301 64.6508052 162.359693 65.9532772 "></polygon>
			                    <polygon class="star3" id="Star-1-Copy-4" points="117.41 20.2316667 116.240307 20.8466105 116.463699 19.5441386 115.517398 18.6217228 116.825154 18.4316948 117.41 17.2466667 117.994846 18.4316948 119.302602 18.6217228 118.356301 19.5441386 118.579693 20.8466105 "></polygon>
			                    <polygon class="star2" id="Star-1-Copy-5" points="104.143333 67.9916667 102.973641 68.6066105 103.197032 67.3041386 102.250731 66.3817228 103.558487 66.1916948 104.143333 65.0066667 104.72818 66.1916948 106.035936 66.3817228 105.089635 67.3041386 105.313026 68.6066105 "></polygon>
			                    <polygon class="star" id="Star-1-Copy-6" points="77.61 4.31166667 76.4403073 4.92661049 76.6636988 3.62413858 75.7173975 2.70172285 77.0251537 2.51169476 77.61 1.32666667 78.1948463 2.51169476 79.5026025 2.70172285 78.5563012 3.62413858 78.7796927 4.92661049 "></polygon>
			                    <polygon class="star2" id="Star-1-Copy-7" points="55.0566667 40.1316667 53.886974 40.7466105 54.1103654 39.4441386 53.1640642 38.5217228 54.4718203 38.3316948 55.0566667 37.1466667 55.641513 38.3316948 56.9492691 38.5217228 56.0029679 39.4441386 56.2263593 40.7466105 "></polygon>
			                    <polygon class="star3" id="Star-1-Copy-8" points="35.1566667 2.985 33.986974 3.59994382 34.2103654 2.29747191 33.2640642 1.37505618 34.5718203 1.18502809 35.1566667 0 35.741513 1.18502809 37.0492691 1.37505618 36.1029679 2.29747191 36.3263593 3.59994382 "></polygon>
			                </g>
			            </g>
			            <g id="SceneTwo" sketch:type="MSShapeGroup">
			                <rect id="BackgroundTwo" fill="#93AFD0" x="0" y="0" width="199" height="199"></rect>
			                <path d="M0.402273662,198.909956 L50.2159434,78.9834313 L87.0572859,130.276095 L128.628655,17.2748741 L198.819509,198.909956 L0.402273662,198.909956 Z" id="mountain" fill="#E2E2E2"></path>
			                <path d="M70.8032226,124.514413 L50.2159434,78.9834313 L87.0572859,130.276095 L70.8032226,124.514413 Z" id="shadowR" fill="#D1D0D0"></path>
			                <path d="M60.5278331,103.074088 C58.3908973,103.165352 53.2644284,100.961703 51.0013279,101.275302 C48.742569,101.5883 46.2868659,103.891185 44.5613467,103.973482 C43.278423,104.034671 40.7085091,101.872601 40.7085091,101.872601 C40.7085091,101.872601 48.2433987,79.9995369 50.2159434,78.9834313 C52.188488,77.9673257 65.7968163,100.676031 65.7968163,100.676031 C65.7968163,100.676031 65.0091374,102.882702 60.5278331,103.074088 Z" id="top" fill="#FFFFFF"></path>
			                <path d="M142.938399,198.909956 L163.724082,179.096086 L128.628655,17.2748741 L198.819509,198.909956 L142.938399,198.909956 Z" id="shadowL" fill="#D1D0D0"></path>
			                <path d="M147.539687,96.692297 C143.262387,96.7410907 136.135818,92.281737 130.976782,93.1636119 C124.531309,94.2653878 117.161392,100.302706 112.102048,100.4635 C108.879031,100.565932 100.280565,94.3319648 100.280565,94.3319648 C100.280565,94.3319648 126.280527,17.2748741 128.628655,17.2748741 C130.976782,17.2748741 157.701291,92.5070506 157.701291,92.5070506 C157.701291,92.5070506 154.730892,96.6102626 147.539687,96.692297 Z" id="top" fill="#FFFFFF"></path>
			                <g id="Snowflakes" transform="translate(7.960000, 14.925000)" fill="#FFFFFF">
			                    <ellipse class="flake2" id="Oval-1" cx="22.3875" cy="2.4875" rx="2.4875" ry="2.4875"></ellipse>
			                    <ellipse class="flake" id="Oval-1-Copy" cx="155.7175" cy="6.4675" rx="2.4875" ry="2.4875"></ellipse>
			                    <ellipse class="flake2" id="Oval-1-Copy-2" cx="76.1175" cy="70.1475" rx="2.4875" ry="2.4875"></ellipse>
			                    <ellipse class="flake" id="Oval-1-Copy-8" cx="33.3325" cy="124.8725" rx="2.4875" ry="2.4875"></ellipse>
			                    <ellipse class="flake2" id="Oval-1-Copy-9" cx="126.8625" cy="121.8875" rx="2.4875" ry="2.4875"></ellipse>
			                    <ellipse class="flake" id="Oval-1-Copy-3" cx="85.0725" cy="22.3875" rx="2.4875" ry="2.4875"></ellipse>
			                    <ellipse class="flake" id="Oval-1-Copy-6" cx="174.6225" cy="41.2925" rx="2.4875" ry="2.4875"></ellipse>
			                    <ellipse class="flake" id="Oval-1-Copy-10" cx="78.1075" cy="141.7875" rx="2.4875" ry="2.4875"></ellipse>
			                    <ellipse class="flake2" id="Oval-1-Copy-11" cx="174.6225" cy="85.0725" rx="2.4875" ry="2.4875"></ellipse>
			                    <ellipse class="flake2" id="Oval-1-Copy-4" cx="2.4875" cy="85.0725" rx="2.4875" ry="2.4875"></ellipse>
			                    <ellipse class="flake" id="Oval-1-Copy-5" cx="35.3225" cy="32.3375" rx="2.4875" ry="2.4875"></ellipse>
			                </g>
			                <g id="Trees" transform="translate(33.830000, 123.380000)" fill="#4B4B4B">
			                    <path d="M25.0996774,51.4257894 C22.7240262,47.8671881 20.8984372,42.738338 19.600028,38.1178771 C19.5093465,37.7951823 18.4297464,37.2663641 18.3442,36.9493369 C18.2814592,36.716825 19.469387,37.1781399 19.409401,36.9493369 C18.0682513,31.8338235 17.1570609,27.2315789 17.1570609,27.2315789 C17.1570609,27.2315789 16.4270638,30.4423471 15.2128532,34.7150904 C15.0134706,35.4167071 16.684447,33.9657178 16.4600399,34.7150907 C16.2607802,35.3804879 15.0743092,36.2604492 14.8569392,36.9493369 C13.4685209,41.3495035 10.8205697,48.0747363 8.92290321,51.4257894 C4.35592687,59.4905263 0.834516129,63.4850481 0.834516129,63.4850481 L3.48854125,63.4850481 C4.01791103,63.4850481 5.54922433,62.5946892 6.0785941,62.5946892 C6.58630122,62.5946892 6.09206483,63.4850481 6.59977195,63.4850481 C7.2392754,63.4850481 8.80153536,62.800882 9.44103881,62.800882 C9.96373382,62.800882 9.56367232,63.4850481 10.0863673,63.4850481 C10.7514776,63.4850481 12.0757513,62.5946892 12.7408616,62.5946892 C13.3967485,62.5946892 13.3934721,63.4850481 14.0493591,63.4850481 C15.3867822,63.4850481 16.4600398,63.4850481 16.4600398,63.4850481 L14.6299259,75.6199999 L19.4094004,75.6199999 L17.5340735,63.4850481 L19.6938463,63.4850481 C20.3868692,63.4850481 20.2261292,62.5946892 20.9191522,62.5946892 C21.3342621,62.5946892 22.6031349,63.4850481 23.0182448,63.4850481 C23.7031973,63.4850481 23.7389984,62.5946892 24.423951,62.5946892 C25.0573258,62.5946892 26.339852,63.4850481 26.9732268,63.4850481 C27.4952544,63.4850481 27.4331195,62.5946892 27.955147,62.5946892 C28.5141892,62.5946892 29.6573937,63.4850481 30.2164359,63.4850481 L33.1880645,63.4850481 C33.1880645,63.4850481 30.4835347,59.4905263 25.0996774,51.4257894 Z" id="Path-6"></path>
			                    <path d="M72.9963191,50.453357 C74.3233952,50.9448115 72.975999,48.7206688 72.4745161,47.9694736 C69.7594861,43.9025007 67.6730987,38.0409577 66.1892025,32.7604309 C66.0855666,32.3916369 64.8517378,31.7872732 64.7539705,31.4249564 C64.6822667,31.1592286 66.0398985,31.6864457 65.9713431,31.4249564 C64.4386006,25.5786554 63.3972401,20.3189474 63.3972401,20.3189474 C63.3972401,20.3189474 62.5629577,23.9883967 61.1752884,28.8715319 C60.9474227,29.6733795 62.8571099,28.0151061 62.6006447,28.8715322 C62.3729193,29.6319861 61.0169524,30.6376562 60.7685295,31.4249564 C59.1817658,36.4537183 56.1555358,44.1396986 53.9867742,47.9694736 C53.3908217,49.0218549 50.5129542,51.5385723 52.2498641,50.9448127 C53.9867739,50.3510532 51.5313435,52.1267764 51.1857071,52.6796433 C47.3950943,58.7429635 44.7429032,61.7514836 44.7429032,61.7514836 L47.7760748,61.7514836 C48.3810688,61.7514836 50.1311412,60.7339305 50.7361352,60.7339305 C51.3163719,60.7339305 50.7515303,61.7514836 51.331767,61.7514836 C52.0626281,61.7514836 53.8480681,60.9695795 54.5789291,60.9695795 C55.1762949,60.9695795 54.7190817,61.7514836 55.3164475,61.7514836 C56.0765735,61.7514836 57.5900291,60.7339305 58.3501551,60.7339305 C59.0997403,60.7339305 59.0959958,61.7514836 59.8455809,61.7514836 C61.3740644,61.7514836 62.6006445,61.7514836 62.6006445,61.7514836 L60.5090858,75.6199999 L65.9713424,75.6199999 L63.8281116,61.7514836 L66.2964234,61.7514836 C67.0884496,61.7514836 66.9047468,60.7339305 67.696773,60.7339305 C68.1711843,60.7339305 69.6213247,61.7514836 70.095736,61.7514836 C70.8785389,61.7514836 70.9194544,60.7339305 71.7022574,60.7339305 C72.4261143,60.7339305 73.8918585,61.7514836 74.6157155,61.7514836 C75.2123184,61.7514836 75.1413071,60.7339305 75.73791,60.7339305 C76.3768153,60.7339305 77.6833348,61.7514836 78.3222401,61.7514836 L81.718387,61.7514836 C81.718387,61.7514836 71.6692431,49.9619026 72.9963191,50.453357 Z" id="Path-6-Copy-5"></path>
			                    <path d="M45.1105571,38.1765789 C44.8532765,37.4928173 44.5530863,36.4016769 44.2246069,35.014853 C44.1572353,34.7304131 42.8899468,33.9725644 42.8203212,33.6642114 C42.7544041,33.3722819 43.8862602,33.531038 43.818543,33.2193565 C41.4976077,22.5368074 38.1822574,0.733157895 38.1822574,0.733157895 C38.1822574,0.733157895 35.3965813,16.9903785 33.1881848,28.2777236 C33.1332928,28.5582822 34.1366363,28.296267 34.0825093,28.5703586 C34.0392269,28.7895343 32.9383269,29.5460415 32.8955931,29.7607069 C32.1132485,33.6906742 31.4272578,36.8368713 30.9996481,38.1765789 C27.0159003,50.6577192 23.9441935,56.8397174 23.9441935,56.8397174 L26.2592847,56.8397174 C26.721051,56.8397174 28.056807,55.4617809 28.5185733,55.4617809 C28.9614433,55.4617809 28.5303237,56.8397174 28.9731938,56.8397174 C29.531029,56.8397174 30.8937796,55.7808889 31.4516148,55.7808889 C31.9075588,55.7808889 31.5585874,56.8397174 32.0145313,56.8397174 C32.5947032,56.8397174 33.7498597,55.4617809 34.3300317,55.4617809 C34.9021582,55.4617809 34.8993002,56.8397174 35.4714267,56.8397174 C36.6380533,56.8397174 37.5742499,56.8397174 37.5742499,56.8397174 L35.9778518,75.6199999 L40.1469605,75.6199999 L38.5111234,56.8397174 L40.3950811,56.8397174 C40.9996011,56.8397174 40.8593885,55.4617809 41.4639085,55.4617809 C41.8260066,55.4617809 42.9328372,56.8397174 43.2949352,56.8397174 C43.8924155,56.8397174 43.9236446,55.4617809 44.5211248,55.4617809 C45.0736141,55.4617809 46.1923545,56.8397174 46.7448438,56.8397174 C47.2002055,56.8397174 47.1460056,55.4617809 47.6013672,55.4617809 C48.0890166,55.4617809 49.0862275,56.8397174 49.5738768,56.8397174 L52.1660117,56.8397174 C52.1660117,56.8397174 49.8068656,50.6577192 45.1105571,38.1765789 Z" id="Path-6-Copy-4"></path>
			                </g>
			                <path d="M150.918157,171.459231 C150.918157,171.459231 151.94533,170.648305 152.810318,170.648305 C152.810318,170.648305 151.891269,169.945503 152.972504,168.864268 C154.053738,167.783033 155.134973,167.891156 156.486517,169.513009 C156.486517,169.513009 156.594641,169.2427 157.081196,169.080515 C157.081196,169.080515 157.405567,168.161465 158.540863,168.161465 C159.67616,168.161465 159.730222,168.918329 159.730222,168.918329 C159.730222,168.918329 161.243951,168.593959 162.433309,169.2427 C163.622667,169.891441 165.082334,170.323935 166.81231,170.377996 C168.488224,170.432058 169.515398,170.702367 169.028842,171.351108 C169.028842,171.351108 168.920718,171.72954 168.65041,171.891725 C168.380101,172.053911 168.380101,172.270158 168.326039,172.486405 C168.271977,172.702652 167.947607,173.89201 167.461051,174.21638 C167.028557,174.540751 164.649841,175.513862 163.730791,175.946356 C162.811741,176.37885 159.838345,178.379135 159.459913,178.649443 C159.081481,178.919752 158.865234,179.406308 158.540863,179.568493 C158.216493,179.730678 158.324616,180.379419 158.324616,180.70379 C158.324616,181.02816 158.162431,181.730963 158.324616,182.109395 C158.486802,182.487827 158.973357,183.731248 159.189604,184.217803 C159.405851,184.704359 159.513975,185.515285 160.054592,186.001841 C160.59521,186.488397 160.433024,186.866829 160.757395,187.245261 C161.081765,187.677755 161.676445,188.596805 161.83863,189.029299 C161.946753,189.407731 162.595494,190.218657 163.027988,190.92146 C163.460482,191.570201 163.892976,192.056756 163.947038,192.48925 C164.0011,192.921744 164.920149,193.354238 165.24452,194.219226 C165.56889,195.084214 165.460767,195.192337 165.24452,195.462646 C165.028273,195.732955 165.136396,195.300461 164.920149,194.976091 C164.703902,194.65172 164.920149,195.300461 164.649841,195.354523 C164.379532,195.408584 164.379532,194.705782 164.163285,194.65172 C163.947038,194.597658 164.109223,195.246399 163.892976,195.246399 C163.676729,195.246399 163.784853,194.759844 163.460482,194.65172 C163.136112,194.543597 163.298297,194.867967 162.973926,194.65172 C162.649556,194.435473 162.054877,194.002979 161.784568,193.73267 C161.514259,193.462362 161.243951,192.813621 160.91958,192.975806 C160.59521,193.083929 160.703333,193.083929 160.378963,192.975806 C160.054592,192.813621 159.730222,193.246115 159.568036,193.137991 C159.405851,193.029868 159.081481,193.137991 158.75711,192.867682 C158.43274,192.597374 156.324332,191.462077 155.567467,190.92146 C154.972788,190.543027 153.404998,188.488681 153.404998,188.488681 C153.404998,188.488681 152.594071,187.948064 152.485948,187.623693 C152.377824,187.299323 152.485948,187.83994 152.161577,188.380558 C151.837207,188.921175 150.864096,190.543027 150.593787,191.029583 C150.323478,191.516139 149.945046,192.867682 149.728799,193.192053 C149.512552,193.570485 149.13412,194.759844 149.188181,195.138276 C149.242243,195.57077 149.620675,196.273572 150.215355,196.489819 C150.810034,196.706066 151.999392,196.652005 152.215639,196.976375 C152.485948,197.354807 152.918442,198.003548 152.594071,197.949486 C152.323763,197.895425 151.837207,197.408869 151.675022,197.408869 C151.512836,197.408869 152.107516,198.003548 151.837207,198.05761 C151.566898,198.111672 150.864096,197.571054 150.70191,197.516993 C150.593787,197.462931 151.026281,198.003548 150.70191,198.05761 C150.37754,198.111672 149.782861,197.73324 149.404428,197.679178 C149.025996,197.625116 147.133835,197.841363 146.539156,197.73324 C145.944477,197.625116 145.782291,197.246684 145.72823,196.868252 C145.674168,196.489819 145.349798,196.165449 145.187612,195.841078 C145.025427,195.57077 143.998254,193.246115 143.998254,193.246115 C143.998254,193.246115 142.862957,190.813336 142.917019,189.623978 C142.971081,188.434619 142.700772,187.785878 142.754834,187.299323 C142.808896,186.812767 140.592364,188.596805 139.673314,188.75899 C138.754265,188.921175 138.91645,189.407731 138.91645,189.840225 C138.91645,190.218657 139.403006,192.002695 139.457067,192.543312 C139.511129,193.137991 139.781438,194.597658 139.889561,195.138276 C139.943623,195.732955 140.430179,196.165449 141.07892,196.327634 C141.727661,196.489819 142.808896,196.868252 142.971081,197.354807 C143.133266,197.841363 142.754834,197.462931 142.376402,197.408869 C141.943908,197.354807 141.781722,197.73324 141.457352,197.625116 C141.132981,197.516993 140.592364,197.354807 140.051747,197.354807 C139.511129,197.354807 138.267709,197.571054 137.510844,197.462931 C136.75398,197.408869 136.321486,197.192622 136.159301,196.868252 C135.943054,196.543881 135.564622,195.678893 135.132128,195.192337 C134.699634,194.705782 134.050893,193.516423 133.888708,193.300176 C133.726522,193.083929 132.699349,191.516139 132.374979,190.867398 C132.050608,190.164595 131.077497,189.461793 130.807188,189.299607 C130.536879,189.137422 129.780015,188.975237 129.455644,189.353669 C129.131274,189.732101 127.671607,191.678324 127.563483,192.110818 C127.45536,192.543312 126.374125,194.867967 125.941631,195.408584 C125.563199,195.949202 124.860396,196.435758 125.076643,196.760128 C125.29289,197.084499 126.752557,197.13856 127.022866,197.625116 C127.293175,198.165733 127.076928,198.05761 126.698495,198.003548 C126.320063,197.949486 126.103816,198.05761 125.725384,198.05761 C125.401014,198.05761 125.779446,198.706351 125.29289,198.436042 C124.806334,198.165733 124.157593,197.625116 123.995408,197.787301 C123.833223,197.895425 123.454791,198.111672 123.13042,198.003548 C122.589803,197.841363 121.454506,197.841363 120.96795,197.949486 C120.481395,198.05761 120.481395,197.084499 120.427333,196.652005 C120.373271,196.219511 120.373271,193.73267 120.535457,193.083929 C120.697642,192.435188 120.481395,191.029583 120.535457,190.164595 C120.589518,189.299607 120.859827,185.461223 121.022012,184.542174 C121.130136,183.677186 121.616691,179.352246 123.400729,176.541035 C125.184767,173.729825 126.860681,171.567355 131.023435,170.702367 C135.186189,169.837379 137.9974,171.891725 140.862673,171.837664 C143.727945,171.783602 143.133266,171.567355 144.538871,171.026737 C145.944477,170.48612 147.620391,169.945503 149.296305,170.48612 C150.647849,170.864552 150.918157,171.459231 150.918157,171.459231 L150.918157,171.459231 Z" id="BearTwo" fill="#616161" transform="translate(144.772500, 183.328466) scale(-1, 1) translate(-144.772500, -183.328466) "></path>
			            </g>
			            <g id="SceneOne" sketch:type="MSShapeGroup">
			                <rect id="BackgroundOne" fill="#B0CBEB" x="0" y="0" width="200" height="199.004975"></rect>
			                <path d="M0.404295138,198.914929 L50.4682848,78.9854059 L87.4947597,130.279352 L129.27503,17.275306 L199.818602,198.914929 L0.404295138,198.914929 Z" id="mountain" fill="#EEEEEE"></path>
			                <path d="M71.1590177,124.517526 L50.4682848,78.9854059 L87.4947597,130.279352 L71.1590177,124.517526 Z" id="shadowR" fill="#E2E2E2"></path>
			                <path d="M60.8319931,103.076665 C58.6843189,103.167931 53.5320888,100.964227 51.257616,101.277834 C48.9875065,101.59084 46.5194633,103.893782 44.785273,103.976082 C43.4959025,104.037271 40.9130744,101.875148 40.9130744,101.875148 C40.9130744,101.875148 48.4858279,80.0015369 50.4682848,78.9854059 C52.4507417,77.9692749 66.1274536,100.678548 66.1274536,100.678548 C66.1274536,100.678548 65.3358165,102.885274 60.8319931,103.076665 Z" id="top" fill="#FFFFFF"></path>
			                <path d="M143.656682,198.914929 L164.546816,179.100564 L129.27503,17.275306 L199.818602,198.914929 L143.656682,198.914929 Z" id="shadowL" fill="#E3E3E3"></path>
			                <path d="M148.281093,96.6947144 C143.982299,96.7435093 136.819918,92.2840441 131.634957,93.165941 C125.157094,94.2677445 117.750143,100.305214 112.665375,100.466011 C109.426162,100.568446 100.784488,94.3343231 100.784488,94.3343231 C100.784488,94.3343231 126.915103,17.275306 129.27503,17.275306 C131.634957,17.275306 158.49376,92.5093633 158.49376,92.5093633 C158.49376,92.5093633 155.508434,96.612678 148.281093,96.6947144 Z" id="top" fill="#FFFFFF"></path>
			                <g id="Snowflakes" transform="translate(8.000000, 14.925373)" fill="#FFFFFF">
			                    <ellipse class="flake2" id="Oval-1" cx="22.5" cy="2.48756219" rx="2.5" ry="2.48756219"></ellipse>
			                    <ellipse class="flake" id="Oval-1-Copy" cx="156.5" cy="6.46766169" rx="2.5" ry="2.48756219"></ellipse>
			                    <ellipse class="flake" id="Oval-1-Copy-2" cx="76.5" cy="70.1492537" rx="2.5" ry="2.48756219"></ellipse>
			                    <ellipse cl                    
                  
                



 .svg{
	width:270px;
/*	width:30%;*/
	float:left;
	margin:1% 3% 2% 1%;
}

body{
	text-align:center;
	font-family:"Avenir", sans-serif;
}


.container{
	width:70%;
	margin:0 auto;
	padding-top:5%;
}

p{
	text-align:justify;
	line-height:1.9em;
	font-size:1.2em;
	font-weight:200;
}

h2{
  font-size:0.9em;
}

#SceneThree, #SceneTwo, #SceneOne{
	display:none;
}

/* show the first scene when window is > 1100px, others are displayed:none, svg size is set above */
@media screen and (min-width: 1100px) {
    #SceneOne {
			display:block;
    }
}

/* show the second scene when window is < 1100 and hide the first, set svg size */
@media screen and (max-width: 1100px) {
    #SceneTwo {
			display:block;
    }

		#SceneOne{
			display:none;
		}

		.svg{
			width:205px;
		}
}

/* show third scene when window is < 700px, hide second and the first scene, set new svg size */
@media screen and (max-width: 700px) {
    #SceneThree {
			display:block;
    }

    #SceneTwo, #SceneOne {
			display:none;
    }

		.svg{
			width:145px;
/*
    if you want you can rearrange the smallest svg on top of the text with setting float to none:
    
    float:none;
			margin:3% 0 0 0;*/
		}
}

/* animations */

@-webkit-keyframes aniSnow {
    0% {
    transform: translateY(-150px);
    -webkit-transform: translateY(-150px);
  }
	
  100% {
    transform: translateY(190px);
    -webkit-transform: translateY(190px);
		
  }
}

@-moz-keyframes aniSnow {
    0% {
    transform: translateY(-150px);
    -webkit-transform: translateY(-150px);
  }
	
  100% {
    transform: translateY(190px);
    -webkit-transform: translateY(190px);
		
  }
}

@-o-keyframes aniSnow {
    0% {
    transform: translateY(-150px);
    -webkit-transform: translateY(-150px);
  }
	
  100% {
    transform: translateY(190px);
    -webkit-transform: translateY(190px);
		
  }
}

@keyframes aniSnow {
    0% {
    transform: translateY(-150px);
    -webkit-transform: translateY(-150px);
  }
	
  100% {
    transform: translateY(190px);
    -webkit-transform: translateY(190px);
		
  }
}

.flake{
  -webkit-animation:aniSnow 10s -1s linear infinite normal both;
  -moz-animation:aniSnow 10s -1s linear infinite normal both;
	animation:aniSnow 10s -1s linear infinite normal both;
  -o-animation:aniSnow 10s -1s linear infinite normal both;
}

.flake2{
  -webkit-animation:aniSnow 12s 1s linear infinite normal both;
   -moz-animation:aniSnow 12s 1s linear infinite normal both;
   -o-animation:aniSnow 12s 1s linear infinite normal both;
	animation:aniSnow 12s 1s linear infinite normal both;
}

@-webkit-keyframes aniStar{
	
	50%{
		opacity:0;
	}	
}

@-moz-keyframes aniStar{
	
	50%{
		opacity:0;
	}	
}

@-o-keyframes aniStar{
	
	50%{
		opacity:0;
	}	
}

@keyframes aniStar{
	
	50%{
		opacity:0;
	}	
}

.star{
	-webkit-animation:aniStar 3s -1s linear infinite normal both;
  -moz-animation:aniStar 3s -1s linear infinite normal both;
  -o-animation:aniStar 3s -1s linear infinite normal both;
  animation:aniStar 3s -1s linear infinite normal both;
}

.star2{
	-webkit-animation:aniStar 4s -1s linear infinite normal both;
  -moz-animation:aniStar 4s -1s linear infinite normal both;
  -o-animation:aniStar 4s -1s linear infinite normal both;
  animation:aniStar 4s -1s linear infinite normal both;
}

.star3{
	-webkit-animation:aniStar 3.5s -1s linear infinite normal both;
  -moz-animation:aniStar 3.5s -1s linear infinite normal both;
  -o-animation:aniStar 3.5s -1s linear infinite normal both;
  animation:aniStar 3.5s -1s linear infinite normal both;
}