cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <audio id="audio" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/turnitaround.m4a" autoplay></audio>

<div id="content">
  <section class="lone">
    <p class="lg">When you're feeling low</p>
    <p class="lg2">You might be focused on the wrong thing</p>
    <p class="lg3">You might be too zoomed in</p>
    <p class="lg4">You're looking through the wrong end of the telescope</p>
    <svg class="landscape" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" preserveAspectRatio="xMidYMid meet" viewBox="0 0 1065.3 270" enable-background="new 0 0 1065.334 270" xml:space="preserve">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#E68C74" stroke="#36A39D" stroke-miterlimit="10" d="M681.4 193.4c8.3-16.3 9.2-36.2 15.9-51 2.4-5.3 8.4-10.1 12.8-15.1 13.8-15.9 25.1-31.4 39-46.2 -13.2 37.2-23.9 77-40.6 110.8 -9.1-3.9-18.1 3.5-25.5 3.2C682.9 194 682.7 193.1 681.4 193.4z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#2B959E" stroke="#36A39D" stroke-miterlimit="10" d="M447.1 140.8c-0.2-0.6 0-1.6-0.8-1.6 2.6-0.9 5.9 5.2 8.8 8.8 3.3 4 6.9 8.1 9.6 11.2 12.4 15.2 24.8 30.5 37.5 45.4 -1.4 2.3-8.2-0.7-9.6 1.6 -1.1 0-2.1 0-3.2 0 -5.5-8.6-10.4-17.8-16.7-25.5C464.6 166.9 456.2 153.5 447.1 140.8z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#B0826A" stroke="#36A39D" stroke-miterlimit="10" d="M428.8 53.2c8.1-6.5 17.4-12.8 27.9-20.7 7.9-6 20.6-18.5 27.9-19.1 -0.8 0-1.6 0-2.4 0 -15.4 32.2-31 64-45.4 97.2 -6.8 16.8-11.5 35.8-18.3 52.6 -0.6-2.4 1.4-2.3 0.8-4.8 -2.2 4.7-5.1 8.7-5.6 15.1 -0.9-0.2-0.5-1.6-1.6-1.6 -2.9 6.2-7.9 7.6-12.7 10.4 -2.4-2.4-8.8-0.8-10.4-4 -2.7 3.3-7.6 10.7-12.7 12.8 0.4-3.6-1.6-4.8-2.4-7.2 -1.6 1.6-2.1 0.2-3.2-0.8 0.3-1.1 1.4-0.1 1.6 0.8 17.6-38.7 30.6-82 46.2-122.7C422.5 59.1 426 56.6 428.8 53.2z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#CF856F" stroke="#36A39D" stroke-miterlimit="10" d="M285.3 61.1c3.4-1.4 9-0.6 13.5-0.8 -12.8-0.9-17.8 6.1-24.7 11.2 -26.6 20.8-59.6 42.5-78.9 65.3 -2 0.1-3.8 0.5-4.8 1.6 -30.3 4.8-61.4 8.8-87.7 17.5 11.3-13.8 34.8-9.3 51-15.1 9.3-3.4 21.2-14.5 31.1-21.5 21.4-15.1 38.6-29.6 63-40.6C260.8 72.9 273.8 66.7 285.3 61.1z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#207C86" stroke="#36A39D" stroke-miterlimit="10" d="M634.3 205.4c-8.8-6.9-17.3-14.1-26.3-20.7 0.1-1.5 3.1 1.4 3.2-1.6 1.4 1.2-0.7 3.3 2.4 4 -0.4-0.7-0.7-1.4-1.6-1.6 5.7 1.3 16.7 1.1 22.3 0.8 1.5-0.1-0.9 2.8 1.6 1.6 2.1-0.2-1.1-1.4 0-3.2 5.8 6.2 11 12.9 16.7 19.1 6.4 0 12.8 0 19.1 0 2.3-0.7-1-2 0-4 2.7 0.2 6.5-0.6 8 0.8 -0.1 0.6-0.8 0.8-0.8 1.6 -1.6 0-3.2 0-4.8 0 -0.6 2.2 3.8-0.6 3.2 1.6 -2.3 6.7-27.7 1.6-41.4 3.2C635.6 206.3 635.2 205.5 634.3 205.4z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#2B959E" stroke="#36A39D" stroke-miterlimit="10" d="M497.3 96.2c-0.8 0-1.6 0-2.4 0 -3.8-27.5-7.8-54.9-12-82.1 4.2 0.6 7 2.5 10.4 4 23.8 5.9 33.3 26.2 48.6 40.6 16 14.5 36.5 30.4 55 44.6 5.6 4.3 13 7.9 17.5 12.7 5.1 5.5 9.9 14.1 14.3 20.7 13.6 20.3 26.6 41.2 41.4 61.4 -0.3 1.4 0.6 1.5 1.6 1.6 -1 2 2.3 3.3 0 4 -6.4 0-12.7 0-19.1 0 -5.7-6.2-11-12.9-16.7-19.1 -1.1 1.8 2.1 3 0 3.2 -2.5 1.2-0.1-1.7-1.6-1.6 -5.6 0.3-16.6 0.5-22.3-0.8 0.9 0.2 1.2 0.9 1.6 1.6 -3.1-0.7-1-2.8-2.4-4 -0.1 3-3.1 0.1-3.2 1.6 9 6.6 17.5 13.8 26.3 20.7 -23.2 1.6-50.4-1.8-70.1-0.8 -1.7-1.5-1.8-4.6-4-5.6 -2.5-6.3-6-11.5-9.6-16.7 -16.7-29.3-33.4-58.5-51-86.9C498.6 95.3 497.4 95.3 497.3 96.2z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#577F83" stroke="#36A39D" stroke-miterlimit="10" d="M560.2 199c2.2 1 2.3 4.1 4 5.6 0 0.3 0 0.5 0 0.8 -6.5 0.7-13.5 0.8-19.9 1.6 -17.9 0.4-33.6-1.4-51.8-0.8 1.4-2.3 8.2 0.8 9.6-1.6 -12.7-14.9-25.1-30.2-37.5-45.4 12.4 13.1 22.8 28.2 36.7 39.8 10.1 4.8 17.8 2.7 27.1 1.6 1.5-2.7-3.9-2.9 0-3.2 6.7 7.2 20 9.9 34.3 7.2C562.4 202.1 560.9 201 560.2 199z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#739596" stroke="#36A39D" stroke-miterlimit="10" d="M497.3 96.2c0.1-0.9 1.3-0.9 2.4-0.8 17.6 28.4 34.3 57.6 51 86.9 -2.4-0.5-1.6-4.3-4-4.8 -0.1 1.4 1 1.7 0.8 3.2 -0.8-1.3-2.9-2.8-2.4 0.8 -10.7-2.4-20.7-5.4-32.7-6.4 0-0.8 0-1.6 0-2.4 -2 0.7-6.9-1.5-6.4 1.6 -3.1-2-4.2-4.3-8-4 0-0.8 1-0.6 1.6-0.8 -0.6-1.8-4.5-0.3-6.4-0.8 10.3 6.9 23.4 18.6 35.1 28.7 -3.9 0.3 1.5 0.5 0 3.2 -9.3 1.1-17 3.2-27.1-1.6 -13.8-11.7-24.3-26.7-36.7-39.8 -2.7-3.1-6.3-7.1-9.6-11.2 -2.9-3.5-6.2-9.6-8.8-8.8 0.8 0 0.6 1 0.8 1.6 -2.7-3.1-5.6-6.1-6.4-11.2 1.4 0 2.1-0.6 2.4-1.6 17.5-9.9 35.5-19.2 52.6-29.5C496.6 98.3 501 96.2 497.3 96.2z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#8E807E" stroke="#36A39D" stroke-miterlimit="10" d="M436.7 110.5c14.4-33.2 30.1-65 45.4-97.2 0.8 0 1.6 0 2.4 0 3.3 1.2 7.5 1.5 8.8 4.8 -3.3-1.5-6.1-3.4-10.4-4 4.2 27.1 8.1 54.6 12 82.1 0.8 0 1.6 0 2.4 0 3.7 0-0.7 2.1-1.6 2.4 0.1-3.7-10.2 1-13.5 1.6C466.4 103 452 107.2 436.7 110.5z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#90735F" stroke="#36A39D" stroke-miterlimit="10" d="M376.2 191c5.1-2 10-9.5 12.8-12.7 1.6 3.2 8 1.6 10.4 4 4.9-2.7 9.9-4.1 12.8-10.4 1.1 0 0.7 1.4 1.6 1.6 0.5-6.4 3.4-10.4 5.6-15.1 0.6 2.4-1.4 2.3-0.8 4.8 -0.9 7.6-4.4 12.6-5.6 19.9 -4.9 8.4-3.6 13.2-8.8 23.1 -13.5-1.3-29.8 0.1-43-1.6 0-3.5 0.5-7.4-1.6-8.8 0.8-4 2.9-6.6 4-10.4 1.8-0.9 6.7 1 7.2 4 1.8 0.2 0.9-2.3 2.4-2.4C375.9 186.5 374.4 190.5 376.2 191z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#CF856F" stroke="#36A39D" stroke-miterlimit="10" d="M409.6 81.9c3.8-10 6.5-21.1 15.1-26.3 2.5 0.4 2.1-2.1 4-2.4 -2.7 3.4-6.3 5.9-10.4 8 -15.6 40.7-28.6 84-46.2 122.7 -0.2-0.9-1.3-1.9-1.6-0.8 1.1 1 1.6 2.4 3.2 0.8 0.8 2.4 2.8 3.6 2.4 7.2 -1.8-0.6-0.2-4.5-3.2-4 -1.5 0.1-0.6 2.6-2.4 2.4 -0.5-3-5.3-4.8-7.2-4 -0.1-1.4 1-1.7 0.8-3.2 3.5-1.5 2.5-7.6 5.6-9.6 0 0.5 0 1.1 0 1.6 3.7-4 5.1-10.3 8-15.1 2.6 1.3-1.5 4.3 0.8 5.6C388.2 142.3 399.3 110.5 409.6 81.9z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#B0826A" stroke="#36A39D" stroke-miterlimit="10" d="M18 192.8c19.9-9 61.4-26.6 80.9-36.1 0 0.3 0 0.5 0 0.8 -5.9 1.8-6.3 9.1-13.5 9.6 0.2 1.4 0.5 3.2-2.4 4.8 -4.5 4.3-4.9 0.5-6.4 6.4 -0.8-1.4-2.5-1.7-4-2.4 -2.2 0.7 2.1 1.5 0.8 4 -4.1-1.4-7.4 2.1-8.8 0.8 -2.2 1.3 4.3 2.9 1.6 4.8 -3.7-1.1-7.9-1.7-12.7-1.6 0.5 0.7 1 1.4 0 1.6 0.2 1.1 4-0.7 6.4 0 0.5 3.1-4.4 0.9-6.4 1.6 -1.8-1.1 1-1.9-0.8-2.4 -3.3-0.2-0.4 1.7-0.8 3.2 -3-3.8-6.4-1.7-10.4 0.8 1.5 1.3 4.6 0.6 5.6-0.8 0 2.4 0 4.8 0 7.2 -2.1 0-35.4 10.6-37.6 10.6C15.3 199.2 14 189.9 18 192.8z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#9B837C" stroke="#36A39D" stroke-miterlimit="10" d="M547.5 62.7c14.3 12.3 35.9 27.5 51.8 39.8 14 10.8 20.9 19.5 30.3 33.5 14.2 21.1 27.4 40.5 40.6 62.2 -14.9-20.2-27.9-41.1-41.4-61.4 -4.4-6.6-9.2-15.2-14.3-20.7 -4.5-4.8-11.9-8.4-17.5-12.7 -18.5-14.2-39-30.1-55-44.6C543.8 60 545.4 61.6 547.5 62.7z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#BF908A" stroke="#36A39D" stroke-miterlimit="10" d="M298.9 60.3c3.8 0.6 5.5-0.9 8.8-0.8 1.6 0 3.2 0 4.8 0 8.2 7.5 15.2 16.1 22.3 24.7 -8-6.6-13.5-15.7-21.5-22.3 -2.7 24.7-4.9 49.9-6.4 75.7 -2.7-4.4-4.3-12.1-5.6-19.1 -8.5-2.8-13.7 4.8-17.5 1.6 -1.6 1.1 0.8 2.7-0.8 4.8 -2.9 0.3-7.8-1.5-6.4 3.2 -1.9 0-3.7 0-5.6 0 -1.8 0.1-0.3 3.4-0.8 4.8 -7 1.2-8-0.8-12.7 1.6 3.2-0.6 17.7 2.8 19.9-3.2 4.8 0.5 0.4 3.7 3.2 4 -6.6 3.6-23.1 1.8-35.1 2.4 -14.1 0-28.2 0-42.2 0 -1.3-0.1-3 0.4-3.2-0.8 23.9-22.6 50.2-42.8 74.1-65.3C281 66.4 286.1 59.5 298.9 60.3z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#C69B99" stroke="#36A39D" stroke-miterlimit="10" d="M306.8 137.6c0 0.5 0 1.1 0 1.6 0.7 0.9 1.1 2.1 0.8 4 -1.3-1.1-0.8-3.9-2.4-4.8 -16.7-0.5-41.8 1-59.8-0.8 12-0.6 28.4 1.3 35.1-2.4 -2.8-0.2 1.6-3.5-3.2-4 -2.2 6-16.7 2.6-19.9 3.2 4.7-2.4 5.8-0.4 12.8-1.6 0.5-1.4-1-4.7 0.8-4.8 1.9 0 3.7 0 5.6 0 -1.5-4.6 3.5-2.9 6.4-3.2 1.6-2-0.8-3.7 0.8-4.8 3.8 3.2 9-4.4 17.5-1.6C302.5 125.5 304.2 133.2 306.8 137.6z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#E68C74" stroke="#36A39D" stroke-miterlimit="10" d="M274.2 71.5c-23.9 22.6-50.2 42.8-74.1 65.3 -3.2 0.5-5.7 1.7-9.6 1.6 1-1.1 2.7-1.5 4.8-1.6C214.6 114 247.6 92.3 274.2 71.5z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#9E948E" stroke="#36A39D" stroke-miterlimit="10" d="M334.7 84.3c6.6 7.8 14 14.7 19.9 23.1 -0.3 0-0.5 0-0.8 0 -0.7-0.6-1.2-1.4-1.6-2.4 -15.5 10.6-30.5 21.6-44.6 33.5 0.3 1 1.4 1.3 1.6 2.4 -1-0.3-1.3-1.4-2.4-1.6 0-0.5 0-1.1 0-1.6 1.5-25.8 3.7-51 6.4-75.7C321.3 68.5 326.7 77.7 334.7 84.3z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#577F83" stroke="#36A39D" stroke-miterlimit="10" d="M783.4 73.1c2.4 5.6 11.5 11.3 15.9 17.5 -0.6-0.2-0.8-0.8-1.6-0.8 -13.2-4.6-28.4-7.2-43-10.4 3.5-2.1 9.3-1.9 12.7-4C771.7 74.2 778.2 70.9 783.4 73.1z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#207C86" stroke="#36A39D" stroke-miterlimit="10" d="M799.3 90.6c-4.4-6.2-13.6-11.9-15.9-17.5 41.1 9.4 86.5 14.4 114.7 36.7 5.5 8.3 12.7 14.9 17.5 23.9 0.5 2.6-0.5 3.7-0.8 5.6 1.3-3 7.5 12.3 9.6 17.5 6.4 15.9 12.1 37.8 21.5 51 2.1-5.6 0-13.8-0.8-19.1 3.6 1.1 3.8 1.3 6.4 4 3.9-5.5 10.9 3.5 18.3 0 4.2 3.1 20 5 23.1 1.6 2.1 0.8 33.2 7.3 35.1 8.4 0 4.8 28.3 8 28.3 12.7 -25.1-1.7-111.5 0.7-139.8 0.4 5.4-1.2 12.7-0.6 16.7-3.2 0.1-1.7-2.8-0.4-4-0.8 12-1.6 22.8-2.2 35.9-4 -4.4-2.7-13.2-1.1-15.9-5.6 0.5 3.7-0.6 5.8-2.4 7.2 -6.5-3.4-5.4-10.4-12-10.4 -11.4 0.1-33.1-5.1-46.2-6.4 0.2-2.5 0.8-4.5 1.6-6.4 -5.2-1.9-15.6-1.3-20.7-4.8 0.1-0.9 1.5-0.7 2.4-0.8 -1.6-1.9-5.3-1.6-8.8-1.6 -4.4-6.5-13.6-8.1-16.7-15.9 -2.3-0.7-2.1 1.1-4 0.8 -2.2-5.2-2.1-4.5-7.2-10.4 8 19.3 21.7 39.9 30.3 61.4 -5.9-4.2-14.7-1.6-23.1-2.4 -1.1 1-1.2 3-2.4 4 -6.6 0-13.3 0-19.9 0 -0.5-1.6 1-5.2-0.8-5.6 0.7-2.3-1.1-2.1-0.8-4 0.4-9.5-1.4-16.7-0.8-26.3 0-3.2 0-6.4 0-9.6 1.5-1.9 0.5 5.3 0.8 7.2 1.2 1.5 0 5.3 1.6 6.4 2.9-3.2 4.9-0.6 8.8 1.6 -0.8-9.6-6.2-14.5-6.4-24.7 1.7 0.1 1.7 2 1.6 4 12 9.3 21.1 28.3 34.3 39 -16.3-39.2-38.5-72.5-56.6-110 -0.9 0.1-0.7 1.5-0.8 2.4C799.5 95.7 799.2 93.4 799.3 90.6zM812.8 93.8c27.3 8.2 55.1 20.4 81.3 27.1 -32.6-13.3-64.5-27.4-97.2-40.6 0 3.9 2.8 1.9 4 3.2 -3.3 0.7 1.8 3.2-2.4 4.8 2.6 2.2 8.4 1.1 10.4 4 0.8-1.5-2.4-2.7 0-3.2C809.7 91.1 814.2 92 812.8 93.8z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#2B959E" stroke="#36A39D" stroke-miterlimit="10" d="M808.9 89c-2.4 0.5 0.8 1.7 0 3.2 -1.9-2.9-7.7-1.8-10.4-4 4.2-1.5-0.9-4.1 2.4-4.8 -1.2-1.3-4 0.7-4-3.2 32.7 13.2 64.6 27.3 97.2 40.6 -26.2-6.7-53.9-18.8-81.3-27.1C814.2 92 809.7 91.1 808.9 89z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#E68C74" stroke="#36A39D" stroke-miterlimit="10" d="M385.7 133.7c9.6-15.6 14.8-35.7 23.9-51.8 -10.3 28.6-21.4 60.4-31.1 82.9 -2.3-1.3 1.8-4.3-0.8-5.6 -2.9 4.8-4.3 11.1-8 15.1 0-0.5 0-1.1 0-1.6 2-8.9 7.5-14.3 9.6-23.1C381.3 144.1 384 139.4 385.7 133.7z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#90735F" stroke="#36A39D" stroke-miterlimit="10" d="M702.1 212.5c-0.2-1.1-2.4-0.3-2.4-1.6 -5.7 0.6-11.1-1.1-2.4-0.8 2.3 0.7 2.1-1.1 4-0.8 0.3 1.5 2.3 1.4 1.6 4 7.9-0.4 21.9 8.1 27.1-2.4 2-1.3-2.7 2.6-3.2 4 3.9-2.7 6.3-7 9.6-10.4 2 1-2.4 2.3-2.4 4 3.7-2.4 5.8-6.4 8.8-9.6 2.2 0.7-1.8 1.8-1.6 3.2 3.7-2.4 5.8-6.4 8.8-9.6 2 1-2.4 2.3-2.4 4 2.2-1.5 4.1-3.4 5.6-5.6 0.3 0 0.5 0 0.8 0 0 2.1 0 4.3 0 6.4 -1.8 4.5-0.3 12.5-0.8 18.3 -14.1-0.2-24.6 1.5-39.8 1.6C712.1 213.1 704.4 215.5 702.1 212.5z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#2B959E" stroke="#36A39D" stroke-miterlimit="10" d="M928.4 89c16.1 12.3 32.6 24.3 45.4 39.8 6.3 13.6 12.6 25.7 21.5 36.7 0 11.2 32.7 25.9 32.7 37.1 -1.8-1.1-32.9-7.6-35.1-8.4 -3.1 3.4-18.9 1.5-23.1-1.6 -7.4 3.5-14.4-5.5-18.3 0 -2.6-2.7-2.7-2.9-6.4-4 0.8 5.3 2.9 13.6 0.8 19.1 -9.4-13.2-15.1-35.1-21.5-51 -2.1-5.2-8.2-20.6-9.6-17.5 0.3-1.9 1.3-3 0.8-5.6 4.4-13.9 5.4-31.2 8.8-46.2C926.9 86.8 925.9 89.6 928.4 89z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#9B837C" stroke="#36A39D" stroke-miterlimit="10" d="M915.6 133.7c-4.8-9-12-15.6-17.5-23.9 1.6 0 1 2.2 3.2 1.6 8-8.7 15-18.5 23.9-26.3 0.2 2.2 2.6 2.2 3.2 4 -2.5 0.6-1.5-2.2-4-1.6C921.1 102.4 920.1 119.8 915.6 133.7z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#6A6F69" stroke="#36A39D" stroke-miterlimit="10" d="M799.3 90.6c-0.1 2.8 0.2 5.1 1.6 6.4 5.1 16.7 10 33.6 14.3 51 0 0.8 0 1.6 0 2.4 -18.7 14.7-39.4 27.6-60.6 39.8 12.4-34.8 32.5-66.3 43-100.4C798.5 89.8 798.6 90.5 799.3 90.6z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#CF856F" stroke="#36A39D" stroke-miterlimit="10" d="M482.2 100.2c3.4-0.6 13.6-5.3 13.5-1.6 -17.1 10.3-35.1 19.6-52.6 29.5 -1.4-0.1-1.7 1-3.2 0.8 1.4-3.1 2.3-6.7 2.4-11.2 15.4-5.8 30.6-11.9 46.2-17.5C487.7 98.4 484.9 101.2 482.2 100.2z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#CF856F" stroke="#36A39D" stroke-miterlimit="10" d="M412.8 183.1c-1.3 4.9-1 6.7-1.6 12 10.1-16.2 16.1-36.5 24.7-54.2 -2.6 15.8-13.5 41.1-17.5 61.4 1.2 1.2 1.4 3.4 3.2 4 0.6 2.2-3.8-0.6-3.2 1.6 -5 0-10.1 0-15.1 0 -13.7-2.5-31.7-0.7-46.2-2.4 -0.3-2.6-2.4-3.5-4-4.8 0-0.5 0-1.1 0-1.6 3-0.2 4.5-1.8 6.4-3.2 2.1 1.4 1.6 5.3 1.6 8.8 13.2 1.7 29.5 0.3 43 1.6C409.3 196.3 407.9 191.5 412.8 183.1z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#E68C74" stroke="#36A39D" stroke-miterlimit="10" d="M412.8 183.1c1.2-7.3 4.6-12.4 5.6-19.9 6.9-16.8 11.5-35.8 18.3-52.6 15.3-3.3 29.7-7.5 45.4-10.4 2.7 1 5.6-1.8 6.4 0 -15.6 5.6-30.8 11.7-46.2 17.5 -0.1 4.4-1 8-2.4 11.2 -1.3 3.7-0.4 7.9-4 12 -8.6 17.7-14.6 38-24.7 54.2C411.8 189.7 411.5 188 412.8 183.1z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#739596" stroke="#36A39D" stroke-miterlimit="10" d="M353.9 107.4c3.8 9.8 10.5 20.8 13.5 28.7 1 2.5 1.6 0.4 4 1.6 0.2 4.1 3.5 9.8 4.8 15.1 2.7 0.6 1.3-2.9 3.2-3.2 -2 8.9-7.5 14.2-9.6 23.1 -3.1 1.9-2.1 8-5.6 9.6 -6.9-4.8-13.1-10.3-19.9-15.1 -11.7-8.8-22.8-18.1-35.1-26.3 -0.2-1.1-1.3-1.3-1.6-2.4 14.2-11.9 29.2-22.9 44.6-33.5C352.7 105.9 353.1 106.8 353.9 107.4z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#C69B99" stroke="#36A39D" stroke-miterlimit="10" d="M354.7 107.4c3.2 6.7 7.2 12.4 10.4 19.1 7.3 2 13.8 4.8 20.7 7.2 -1.7 5.7-4.4 10.5-6.4 15.9 -1.9 0.3-0.5 3.8-3.2 3.2 -1.3-5.4-4.6-11-4.8-15.1 -2.3-1.2-3 0.9-4-1.6 -3.1-7.8-9.7-18.9-13.5-28.7C354.1 107.4 354.4 107.4 354.7 107.4z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#8E807E" stroke="#36A39D" stroke-miterlimit="10" d="M418.4 202.2c0-0.8 0-1.6 0-2.4 2.2-0.6 1.6 1.6 3.2 1.6 1.5-2.5 15.2-1.6 22.3-2.4 7.2-0.8 13.4-4.2 24.7-4 2.2-1 4.6-1.8 5.6-4 1.7 1.2 2.4 4.2-0.8 2.4 2.1 3.4 2.9-0.6 4.8-1.6 -0.2-1.4-1.4-1.8-3.2-1.6 3.6-3.6-2.1-5.3-2.4-9.6 6.4 7.7 11.2 16.9 16.7 25.5 0 0.3 0 0.5 0 0.8 -7.3 0.4-13.4-0.4-19.9-0.8 -0.1 1.7 2.8 0.4 4 0.8 -14.2 2.1-36.6 0.9-55 0.8 -0.6-2.2 3.8 0.6 3.2-1.6C419.8 205.5 419.6 203.4 418.4 202.2z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#9B837C" stroke="#36A39D" stroke-miterlimit="10" d="M443.1 128.1c-0.3 1-1 1.6-2.4 1.6 0.8 5.1 3.6 8.1 6.4 11.2 9.1 12.6 17.5 26.1 25.5 39.8 0.3 4.3 6 6 2.4 9.6 1.8-0.2 3 0.2 3.2 1.6 -1.9 1-2.6 5-4.8 1.6 3.2 1.8 2.5-1.2 0.8-2.4 -1 2.2-3.4 3-5.6 4 -11.3-0.2-17.5 3.2-24.7 4 -7.1 0.8-20.8-0.1-22.3 2.4 -1.6 0-1-2.2-3.2-1.6 0 0.8 0 1.6 0 2.4 4.1-20.2 14.9-45.6 17.5-61.4 3.6-4 2.7-8.3 4-12C441.4 129.1 441.7 128 443.1 128.1z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#FA988E" stroke="#36A39D" stroke-miterlimit="10" d="M203.3 137.6c0 0.5 0 1.1 0 1.6 -5.1 0.9 5.8 15.6 8.8 18.3 -34.7 0.7-73.7-1.2-110.8-0.8 0.2-0.6 0.7-0.9 1.6-0.8 26.3-8.8 57.4-12.8 87.7-17.5 3.9 0.1 6.4-1.1 9.6-1.6C200.2 138 202 137.6 203.3 137.6z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#DF9A92" stroke="#36A39D" stroke-miterlimit="10" d="M203.3 139.2c0-0.5 0-1.1 0-1.6 14.1 0 28.2 0 42.2 0 17.9 1.8 43.1 0.3 59.8 0.8 1.5 0.8 1.1 3.7 2.4 4.8 2.3 9.9 0.1 24.3 6.4 30.3 -15-3.8-33.8-11.7-50.2-16.7 -5.8-1.8-11.8-1.2-16.7-4 -0.4-0.2 1.2-0.9 1.6-0.8 -4.6-1.6-8.8 0.4-9.6-4 -7.2 3.3-8.9-5.1-15.9-2.4 0.7-4.5-10-4.3-12-4.8 -0.1-3.5 2.3 0.4 3.2-1.6C211.7 138.5 206 138.8 203.3 139.2z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#FEA19A" stroke="#36A39D" stroke-miterlimit="10" d="M203.3 139.2c2.7-0.4 8.5-0.7 11.2 0 -0.9 2-3.3-1.9-3.2 1.6 2 0.5 12.6 0.3 12 4.8 7-2.8 8.8 5.7 15.9 2.4 0.8 4.4 5 2.4 9.6 4 -0.4-0.1-2 0.6-1.6 0.8 5 2.8 10.9 2.2 16.7 4 16.4 5.1 35.2 12.9 50.2 16.7 6.3 1.9 11.4 5 17.5 7.2 -0.2 1.1-2 0.7-3.2 0.8 -18.1-3.7-37.2-7.5-56.6-11.2 -18.5-3.5-37.4-9.2-55.8-11.2 -38.4-4.1-75.5 1.1-117.1-1.6 0-0.3 0-0.5 0-0.8 0.8 0 1.6 0 2.4 0 37.1-0.4 76 1.5 110.8 0.8C209.1 154.8 198.2 140.1 203.3 139.2z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#BCA3A5" stroke="#36A39D" stroke-miterlimit="10" d="M307.6 143.2c0.3-1.8-0.1-3.1-0.8-4 1.1 0.2 1.3 1.3 2.4 1.6 12.2 8.2 23.4 17.5 35.1 26.3 5.6 4.2 12.9 11.2 1.6 14.3 2.1 2.4 5.1 3.9 8.8 4.8 -2.7 2.3-4.1 6-8 7.2 -6.1-4-9-11.2-18.3-12 1.2-0.1 2.9 0.3 3.2-0.8 -6.1-2.1-11.2-5.3-17.5-7.2C307.8 167.5 310 153.1 307.6 143.2z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#9E948E" stroke="#36A39D" stroke-miterlimit="10" d="M328.4 181.5c9.3 0.8 12.2 8 18.3 12 3.8-1.2 5.3-4.8 8-7.2 -3.6-0.9-6.7-2.4-8.8-4.8 11.3-3.2 4-10.1-1.6-14.3 6.9 4.8 13.1 10.3 19.9 15.1 0.2 1.5-0.9 1.8-0.8 3.2 -1 3.7-3.2 6.4-4 10.4 -1.8 1.3-3.4 3-6.4 3.2 0 0.5 0 1.1 0 1.6 -7.8-3.6-11.3-15.7-19.9-17.5 -5.6-1.2-17.4 2.4-25.5 4 -23.3 4.5-53.2 10.1-74.1 14.3 -2.8 1.4 2.6 1.6 0 3.2 -0.3 0-0.5 0-0.8 0 -0.7-0.6-1.2-1.4-1.6-2.4 -25.6 2.2-56.1 1-86.9 2.4 -16.1 0.7-35.5-0.2-47 2.4 -10.6 2.6-29.2-2.9-42.2-0.8 -0.5 0-1.1 0-1.6 0 5.8-15.4 20.5-22 29.5-34.3 2.9-1.6 2.6-3.4 2.4-4.8 7.2-0.5 7.7-7.7 13.5-9.6 41.6 2.7 78.7-2.5 117.1 1.6 18.3 2 37.3 7.7 55.8 11.2C291.2 174 310.2 177.8 328.4 181.5z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#566562" stroke="#36A39D" stroke-miterlimit="10" d="M802.5 215.7c-21.6-1.8-31.7-15.1-46.2-23.9 5.5 1.2 12.1 7.3 20.7 10.4 3.5 1.2 9 3.4 12.8 4 2.5 0.4 5.6-0.6 8 0 0.7 0.2 1.6 2.3 2.4 2.4 2.4 0.3 5.7-1 8.8-0.8 3 0.2 4.9 1.8 7.2 1.6 3.2-0.3 0.2-1.7 2.4-2.4 -0.3 1.9 1.5 1.7 0.8 4 0 1.9 0 3.7 0 5.6C813.1 216.8 807.7 216.4 802.5 215.7z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#BF908A" stroke="#36A39D" stroke-miterlimit="10" d="M82.9 171.9c-9 12.2-23.7 18.8-29.5 34.3 0.5 0 1.1 0 1.6 0 -3.8 2.6-41.1 1.5-47.2 1.4 0-4 21.3-7 21.3-11 2.1 0 15.8-1.6 17.9-1.6 0-2.4 0-4.8 0-7.2 -0.9 1.4-4.1 2.1-5.6 0.8 3.9-2.5 7.4-4.6 10.4-0.8 0.4-1.5-2.5-3.4 0.8-3.2 1.8 0.4-1 1.2 0.8 2.4 2-0.7 6.9 1.6 6.4-1.6 -2.4-0.7-6.2 1.1-6.4 0 1-0.2 0.5-0.9 0-1.6 4.9-0.1 9 0.5 12.8 1.6 2.7-1.9-3.8-3.5-1.6-4.8 1.4 1.3 4.7-2.2 8.8-0.8 1.3-2.5-3-3.3-0.8-4 1.5 0.6 3.2 1 4 2.4C78 172.4 78.4 176.2 82.9 171.9z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#739596" stroke="#36A39D" stroke-miterlimit="10" d="M232.7 204.6c0.3 0 0.5 0 0.8 0 2.6-1.6-2.8-1.8 0-3.2 20.9-4.3 50.8-9.9 74.1-14.3 8.1-1.5 19.9-5.2 25.5-4 8.7 1.9 12.2 14 19.9 17.5 1.6 1.3 3.7 2.1 4 4.8 -7.8-0.4-13.5 1.4-21.5 0.8C302.1 203.6 261.9 207.2 232.7 204.6z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#CF856F" stroke="#36A39D" stroke-miterlimit="10" d="M753.1 191c-1.5 2.2-3.4 4.1-5.6 5.6 0-1.7 4.3-3 2.4-4 -3 3.1-5.1 7.1-8.8 9.6 -0.2-1.4 3.8-2.5 1.6-3.2 -3 3.1-5.1 7.1-8.8 9.6 0-1.7 4.3-3 2.4-4 -3.3 3.4-5.7 7.6-9.6 10.4 0.5-1.3 5.1-5.3 3.2-4 -5.2 10.5-19.2 2-27.1 2.4 0.7-2.5-1.3-2.5-1.6-4 -1.9-0.3-1.7 1.5-4 0.8 -8.8-0.3-3.3 1.4 2.4 0.8 0 1.3 2.2 0.4 2.4 1.6 -7.5-1-16.1-0.9-24.7-0.8 -1.3-1.6 0.1-1 0-3.2 0.8-1.9 1.4-3.9 1.6-6.4 0-0.8 0.6-0.9 0.8-1.6 -1.5-1.4-5.3-0.6-8-0.8 -1-0.1-1.9-0.2-1.6-1.6 4.4 2 7.8-3.1 11.2-4.8 1.4-0.3 1.5 0.6 1.6 1.6 7.4 0.3 16.4-7.1 25.5-3.2 16.7-33.7 27.4-73.5 40.6-110.8 0.9-0.7 0.2-2.9 2.4-2.4C749.4 115.1 755.5 154.3 753.1 191z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#606C69" stroke="#36A39D" stroke-miterlimit="10" d="M818.4 207c-2.2 0.6 0.8 2.1-2.4 2.4 -2.2 0.2-4.1-1.4-7.2-1.6 -3-0.2-6.4 1.1-8.8 0.8 -0.8-0.1-1.7-2.2-2.4-2.4 -2.3-0.6-5.5 0.4-8 0 -3.7-0.6-9.3-2.7-12.7-4 -8.6-3.1-15.2-9.2-20.7-10.4 14.5 8.8 24.6 22.1 46.2 23.9 -2.7 0.5-7.4-1-8.8 0.8 -11.6-1.4-25.5-0.6-38.2-0.8 -0.5 0-1.1 0-1.6 0 0-6.1 0-12.2 0-18.3 0-2.1 0-4.3 0-6.4 -0.1-0.7 0.3-0.8 0.8-0.8 21.2-12.3 41.8-25.1 60.6-39.8 0-0.8 0-1.6 0-2.4 1.8 9.9 0.4 23 2.4 32.7C817 190.3 818.9 197.5 818.4 207z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#41767B" stroke="#36A39D" stroke-miterlimit="10" d="M679 202.2c-0.2 2.5-0.8 4.5-1.6 6.4 -0.8 0-0.6 1-0.8 1.6 -26.2-0.4-51.7-1.4-78.1-1.6 -16.4-2.2-37.8 0.6-54.2-1.6 6.4-0.8 13.4-0.9 19.9-1.6 0-0.3 0-0.5 0-0.8 19.7-1 46.9 2.4 70.1 0.8 0.9 0.2 1.2 0.9 1.6 1.6 13.8-1.6 39.2 3.5 41.4-3.2 0.6-2.2-3.8 0.6-3.2-1.6C675.8 202.2 677.4 202.2 679 202.2z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#8E807E" stroke="#36A39D" stroke-miterlimit="10" d="M40.7 246.8c29-1.2 57.6-2.9 87.7-3.2 3.1 1.3 0.3-3.4 2.4-3.2 4 0 8 0 12 0 -0.6 1.8-4.5 0.3-6.4 0.8 4.2 2.3 9.5-1.1 15.1 0 -21-3.1-43.6 1.8-66.1-1.6 4.5 0.9 12.6 1.3 11.2 1.6 -12.2 2.4-30-3.9-41.4-3.2 -2.4-0.7 6.9-1.7 8.8-1.6 22.1 0.9 59.1 2 83.7 2.4 12.7-6.1 29.4-2.2 44.6-2.4 3.1 1.3 0.3-3.4 2.4-3.2 77.8-7.2 150.7-4.2 230.3-4.8 2.9 0.9-4.1 2.7-1.6 3.2 -2.6 3.8-5.6 7.1-9.6 9.6 -2.6 4-6.5 2.6-12.7 5.6 4.1 1.7 16.8 0.3 16.7 4 1.7-2.4 9.5-2.3 10.4 0.8 -44.8-2-135.4-3.2-204-6.4 -6.8-0.3-13.5-0.7-19.9-0.8 -10.9-0.2-25.9-0.9-33.5 1.6 -0.2-2.8-9.3 2.3-14.3-0.8 -9.9 4-24.4 3.2-37.5 4 -8 5.8-25.5 2.2-38.2 3.2 -2.8-1.2-0.5 2.7-2.4 2.4 -5.3-0.9-18.2 1.9-18.3-1.6 -4.5 4.1 1.8-1.8-6.4-0.8C53.5 249.2 40.7 250 40.7 246.8z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#7A6B5B" stroke="#36A39D" stroke-miterlimit="10" d="M753.1 191c2.4-36.7-3.7-75.9-1.6-112.4 5.5-0.8 9.4-3.4 15.9-3.2 -3.5 2.1-9.3 1.9-12.7 4 14.6 3.2 29.9 5.7 43 10.4 -10.6 34.1-30.6 65.6-43 100.4 -0.5 0-0.9 0.1-0.8 0.8C753.6 191 753.3 191 753.1 191z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#2B959E" stroke="#36A39D" stroke-miterlimit="10" d="M800.9 97c0.1-0.9-0.1-2.3 0.8-2.4 18 37.5 40.2 70.8 56.6 110 -13.2-10.8-22.3-29.7-34.3-39 0.1-2 0.1-3.9-1.6-4 0.2 10.2 5.6 15.1 6.4 24.7 -3.9-2.2-5.8-4.8-8.8-1.6 -1.6-1.1-0.4-4.9-1.6-6.4 -0.3-1.9 0.7-9.1-0.8-7.2 0 3.2 0 6.4 0 9.6 -2-9.7-0.6-22.8-2.4-32.7C810.9 130.6 806 113.7 800.9 97z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#748887" stroke="#36A39D" stroke-miterlimit="10" d="M550.7 182.3c3.5 5.2 7.1 10.5 9.6 16.7 0.7 2 2.2 3.1 2.4 5.6 -14.3 2.7-27.5 0-34.3-7.2 -11.6-10.1-24.8-21.8-35.1-28.7 1.9 0.5 5.8-1 6.4 0.8 -0.6 0.2-1.6 0-1.6 0.8 3.7-0.4 4.9 2 8 4 -0.5-3.1 4.4-0.9 6.4-1.6 0 0.8 0 1.6 0 2.4 12 1 22 4 32.7 6.4 -0.6-3.6 1.6-2.1 2.4-0.8 0.2-1.5-0.9-1.8-0.8-3.2C549.1 178 548.3 181.8 550.7 182.3z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#9B837C" stroke="#36A39D" stroke-miterlimit="10" d="M97.3 207c11.6-2.6 30.9-1.7 47-2.4 30.8-1.4 61.3-0.2 86.9-2.4 0.4 0.9 0.8 1.8 1.6 2.4 29.2 2.7 69.3-1 102.8 1.6C256.7 207.1 177.1 207.1 97.3 207z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#196C76" stroke="#36A39D" stroke-miterlimit="10" d="M916.4 215.7c-25.5 0.1-51.3 2.9-76.5 0.8 1.2-0.9 1.2-3 2.4-4 8.4 0.8 17.2-1.8 23.1 2.4 -8.5-21.5-22.2-42-30.3-61.4 5.1 5.9 5 5.2 7.2 10.4 1.9 0.3 1.7-1.5 4-0.8 3.1 7.8 12.3 9.4 16.7 15.9 3.5 0 7.2-0.3 8.8 1.6 -0.9 0.1-2.3-0.1-2.4 0.8 5.1 3.5 15.5 2.9 20.7 4.8 -0.8 1.9-1.4 3.9-1.6 6.4 13.1 1.3 34.9 6.5 46.2 6.4 6.6 0 5.4 6.9 12 10.4 1.8-1.4 2.9-3.5 2.4-7.2 2.7 4.5 11.5 2.9 15.9 5.6 -13 1.8-23.9 2.4-35.9 4 1.2 0.4 4.1-0.9 4 0.8C929.2 215.2 921.8 214.5 916.4 215.7z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#0C454C" stroke="#36A39D" stroke-miterlimit="10" d="M433.5 246.8c1.7-6.6 3.8-12.7 3.2-21.5 3.2-2 5.6 2.6 8.8 3.2 5.1 3.1 9.7 6.8 14.3 10.4 1.6 2.5-1.3 6.6 1.6 8.8C452.4 248.2 440.7 250.9 433.5 246.8z"/>
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#90735F" stroke="#36A39D" stroke-miterlimit="10" d="M433.5 246.8c-5.5 1.2-15.6-0.4-20.7 0 1.9-1.6-1.3-3.8 0.8-5.6 3.9-2.4 7-5.7 9.6-9.6 5.2-1.7 7.4-6.4 12.7-8 0 0.8 0.6 0.9 0.8 1.6C437.3 234.1 435.2 240.3 433.5 246.8z"/>
  </svg>
 
 <div class="person">
    <svg class="torso" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
       preserveAspectRatio="xMidYMid meet" viewBox="0 0 72.254 161.067" enable-background="new 0 0 72.254 161.067"
       xml:space="preserve">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#0C454C" stroke="#36A39D" stroke-miterlimit="10" d="M17.403,70.126l14,83.334
      c0,0,8,7.334,14,0l10-83.334C55.403,70.126,33.403,60.126,17.403,70.126z"/>
    </svg>
    
    <svg class="neck"  xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
       preserveAspectRatio="xMidYMid meet" viewBox="0 0 72.254 161.067" enable-background="new 0 0 72.254 161.067"
       xml:space="preserve">
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#0C454C" stroke="#36A39D" stroke-miterlimit="10" d="M2.736,19.785l14,45.009
      c0,0,18.667,12,38.667,0l11.333-45.009C66.736,19.785,36.736,0.776,2.736,19.785z"/>
    </svg>
    
    <svg class="head" xmlns="http://www.w3.org/2000/svg"  x="0px" y="0px"
     preserveAspectRatio="xMidYMid meet" viewBox="0 0 72.254 161.067" enable-background="new 0 0 72.254 161.067"
     xml:space="preserve">
      <ellipse fill-rule="evenodd" clip-rule="evenodd" fill="#0C454C" stroke="#36A39D" stroke-miterlimit="10" cx="34.736" cy="10.743" rx="32" ry="9.042"/>
    </svg>
   </div>
    <svg class="inside" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" preserveAspectRatio="xMidYMid meet" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
      <circle fill="#0C454C" cx="148.581" cy="148.822" r="143.009"/>
      <rect class="reg" x="118" y="118" fill="#2E797F" width="62" height="61"/>
      <rect class="reg" x="114" y="114" opacity="0.83" fill="#2E797F" width="70" height="69"/>
      <rect class="reg" x="110" y="110" opacity="0.6" fill="#2E797F" width="78" height="77"/>
      <rect class="reg" x="106" y="106" opacity="0.6" fill="#2E797F" width="86" height="85"/>
      <rect class="reg" x="101" y="101" opacity="0.6" fill="#2E797F" width="96" height="95"/>
      <rect class="reg" x="96" y="96" opacity="0.49" fill="#2E797F" width="106" height="105"/>
      <rect class="reg" x="91" y="91" opacity="0.31" fill="#2E797F" width="116" height="115"/>
      <rect class="reg" x="86" y="86" opacity="0.31" fill="#2E797F" width="126" height="125"/>
      <rect class="reg" x="79" y="79" opacity="0.21" fill="#2E797F" width="140" height="139"/>
      <rect class="reg" x="72" y="72" opacity="0.11" fill="#2E797F" width="154" height="153"/>
      <rect class="reg" x="65" y="65" opacity="0.06" fill="#2E797F" width="168" height="167"/>
      <rect class="tiny" x="132.466" y="133.258" transform="matrix(0.7071 0.7071 -0.7071 0.7071 150.3579 -61.9855)" fill="#3A9191" stroke="#B75548" stroke-miterlimit="10" width="35.069" height="34.484"/>
      </svg>
  </section>
  
  <div class="around"></div>
    <section class="turn">
    <p class="lg5">You need to turn it around.</p>
    <svg class="starfield" xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_2" x="0" y="0" viewBox="0 0 800 600" enable-background="new 0 0 800 600" preserveAspectRatio="xMidYMid meet"  xml:space="preserve">
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#F3E180" d="M-40.1 133.67c0 23.33 0 46.67 0 70 -5.52-0.31-12.3 0.63-17-0.5 0-0.17 0-0.33 0-0.5 0-0.17 0-0.33 0-0.5 0.33-22.67-0.66-46.67 0.5-68.5C-51.1 133.67-45.6 133.67-40.1 133.67z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#3F3B40" d="M-40.1 358.69c0 25.67 0 51.34 0 77 -5.33 0-10.67 0-16 0 -0.89 15.39-0.5 40.31-0.5 60 0 1.82-0.37 8.13 0 8.5 2.09 2.09 13.92-1.61 16.5 0 0 0.17 0 0.33 0 0.5 -5.67 0-11.33 0-17 0 0-23.17 0-46.34 0-69.5 1.17-24.33 0.17-50.84 0.5-76C-52.1 358.02-45.44 359.02-40.1 358.69z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#261F26" d="M-40.1 435.69c0 22.83 0 45.67 0 68.5 -2.58-1.61-14.41 2.09-16.5 0 -0.37-0.37 0-6.68 0-8.5 0-19.69-0.39-44.61 0.5-60C-50.77 435.69-45.43 435.69-40.1 435.69z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#747F86" d="M-40.1 505.19c0 0.67 0 1.33 0 2 -1.26 2.72-6.9 1.5-10.5 1.5 -10.66 0-23.53 0-34.5 0 -0.02-24.54 0.04-51.61 0-74.5 5.4 0.89 12.92 0.5 20.5 0.5 1.03 0 6.03 0.39 6.5 0 2-1.67 0.5-14.61 0.5-19 0-18.46-0.39-42.19 0.5-57 0 0.17 0 0.33 0 0.5 0 25.33 0 50.67 0 76 -1.17 22.17-0.17 46.5-0.5 69.5C-52.74 505.83-45.79 504.88-40.1 505.19z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#4C545B" d="M-57.1 359.19c0.17 0 0.33 0 0.5 0 -0.33 25.17 0.67 51.67-0.5 76C-57.1 409.85-57.1 384.52-57.1 359.19z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#D1C98A" d="M-57.1 280.68c0 0.17 0 0.33 0 0.5 0 25.5 0 51 0 76.5 -0.17 0-0.33 0-0.5 0C-57.27 332.18-58.27 305.35-57.1 280.68z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#9FAEA0" d="M-57.6 357.68c0.17 0 0.33 0 0.5 0 0 0.17 0 0.33 0 0.5 0 0.17 0 0.33 0 0.5 -0.89 14.81-0.5 38.54-0.5 57 0 4.39 1.5 17.33-0.5 19 -0.47 0.39-5.47 0-6.5 0 -7.58 0-15.1 0.39-20.5-0.5 0-25.33 0-50.67 0-76 0-0.17 0-0.33 0-0.5 0.17 0 0.33 0 0.5 0 0.17 0 0.33 0 0.5 0 6.84 0.83 17.17 0.83 24 0C-59.15 358.62-59.2 357.39-57.6 357.68z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#BFC087" d="M-60.1 357.68c-6.84 0.83-17.17 0.83-24 0C-76.1 357.68-68.1 357.68-60.1 357.68z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#5B6262" d="M-85.6 129.67c0.17 0 0.33 0 0.5 0 0 24.33 0 48.67 0 73 -0.17 0-0.33 0-0.5 0C-85.6 178.34-85.6 154.01-85.6 129.67z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#6C7367" d="M-85.6 202.68c0.17 0 0.33 0 0.5 0 0 25.5 0 51 0 76.5 0 26.17 0 52.34 0 78.5 0 0.17 0 0.33 0 0.5 -0.17 0-0.33 0-0.5 0C-85.6 306.35-85.6 254.51-85.6 202.68z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#4C545B" d="M-85.6 129.67c0 24.33 0 48.67 0 73 0 51.84 0 103.67 0 155.51 0 50.17 0 100.34 0 150.51 -6.17 0-12.33 0-18.5 0 0-126.34 0-252.67 0-379.02C-97.94 129.67-91.77 129.67-85.6 129.67z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#BFC087" d="M-57.1 202.18c0 0.17 0 0.33 0 0.5 -8.18 1.15-18.49 0.18-27.5 0.5C-76.59 201.69-65.11 203.66-57.1 202.18z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#D1C98A" d="M-40.1 204.18c-5.5 0-11 0-16.5 0 -1.17 24.01-0.16 52.83-0.5 76 -5.3-0.89-12.95-0.5-20.5-0.5 -0.95 0-6.6-0.4-7 0 -1.69 1.69 0 15.56 0 19.5 0 19.37 0 42.18 0 58.5 -0.17 0-0.33 0-0.5 0 0-26.17 0-52.34 0-78.5 1.17-24.33 0.17-50.84 0.5-76 9.01-0.32 19.32 0.65 27.5-0.5 0 0.17 0 0.33 0 0.5 4.7 1.13 11.48 0.19 17 0.5C-40.1 203.84-40.1 204.01-40.1 204.18z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#BFC087" d="M-40.1 204.18c0 25.33 0 50.67 0 76 -5.52 0.31-12.3-0.63-17 0.5 0-0.17 0-0.33 0-0.5 0.34-23.17-0.67-52 0.5-76C-51.1 204.18-45.6 204.18-40.1 204.18z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" d="M-40.1 280.18c0 0.17 0 0.33 0 0.5 -5.52 0.31-12.3-0.63-17 0.5 0-0.17 0-0.33 0-0.5C-52.4 279.55-45.62 280.49-40.1 280.18z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#747F86" d="M-40.1 280.68c0 0.17 0 0.33 0 0.5 -2.02 1.67-13.47-2.11-16 0 -2.34 1.95-0.5 15.11-0.5 19 0 18.95 0.39 42.87-0.5 58 0-0.17 0-0.33 0-0.5 0-25.5 0-51 0-76.5C-52.4 280.05-45.62 280.99-40.1 280.68z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#6C7367" d="M-40.1 281.18c0 25.67 0 51.34 0 77 -5.52 0.31-12.3-0.63-17 0.5 0-0.17 0-0.33 0-0.5 0.89-15.13 0.5-39.05 0.5-58 0-3.89-1.84-17.05 0.5-19C-53.57 279.07-42.12 282.85-40.1 281.18z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#5B6262" d="M-40.1 358.18c0 0.17 0 0.33 0 0.5 -5.34 0.33-12-0.66-16.5 0.5 -0.17 0-0.33 0-0.5 0 0-0.17 0-0.33 0-0.5C-52.4 357.55-45.62 358.49-40.1 358.18z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#6C7367" d="M-57.1 435.19c0 23.17 0 46.34 0 69.5 5.67 0 11.33 0 17 0 0 0.17 0 0.33 0 0.5 -5.69-0.31-12.64 0.64-17.5-0.5C-57.27 481.69-58.27 457.36-57.1 435.19z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" d="M-40.1 133.67c-5.5 0-11 0-16.5 0 -1.16 21.84-0.17 45.83-0.5 68.5 -8.01 1.49-19.49-0.49-27.5 1 -0.33 25.17 0.67 51.67-0.5 76 0-25.5 0-51 0-76.5 0-24.33 0-48.67 0-73 14.83 0.33 31-0.67 45 0.5C-40.1 131.34-40.1 132.51-40.1 133.67z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#ECFAB8" d="M-57.6 357.68c-1.59-0.3-1.55 0.94-2.5 0 -8 0-16 0-24 0 -0.17 0-0.33 0-0.5 0 0-16.32 0-39.13 0-58.5 0-3.94-1.69-17.81 0-19.5 0.4-0.4 6.05 0 7 0 7.55 0 15.21-0.39 20.5 0.5 0 0.17 0 0.33 0 0.5C-58.27 305.35-57.27 332.18-57.6 357.68z"/>
    <path class="stars" fill-rule="evenodd" clip-rule="evenodd" fill="#5B6262" d="M-85.6 358.18c0.17 0 0.33 0 0.5 0 0 25.34 0 50.67 0 76.01 0.04 22.89-0.02 49.96 0 74.5 -0.17 0-0.33 0-0.5 0C-85.6 458.52-85.6 408.35-85.6 358.18z"/>
    <polygon class="stars star-poly" fill-rule="evenodd" clip-rule="evenodd" fill="#BFC087" points="610.65 68.12 599.77 57.88 614.08 53.58 "/>
    <polygon class="stars star-poly" fill-rule="evenodd" clip-rule="evenodd" fill="#BFC087" points="434.61 414.4 422.88 411.26 431.47 402.67 "/>
    <polygon class="stars star-poly" fill-rule="evenodd" clip-rule="evenodd" fill="#BFC087" points="132.13 147.46 101.65 120.43 140.3 107.55 "/>
    <polygon class="stars star-poly" fill-rule="evenodd" clip-rule="evenodd" fill="#9FAEA0" points="680.89 391.26 658.28 377.87 681.19 364.99 "/>
    <polygon class="stars star-poly" fill-rule="evenodd" clip-rule="evenodd" fill="#9FAEA0" points="112.3 263.99 94.9 270.73 97.76 252.29 "/>
    <polygon class="stars star-poly" fill-rule="evenodd" clip-rule="evenodd" fill="#9FAEA0" points="210.65 33.41 201.77 35.23 204.64 26.64 "/>
    <polygon class="stars star-poly" fill-rule="evenodd" clip-rule="evenodd" fill="#9FAEA0" points="74.28 513.58 59.13 513.1 67.12 500.22 "/>
    <polygon class="stars star-poly" fill-rule="evenodd" clip-rule="evenodd" fill="#747F86" points="739.57 91.26 706.85 80.4 732.62 57.5 "/>
    <polygon class="stars star-poly" fill-rule="evenodd" clip-rule="evenodd" fill="#747F86" points="779.24 559.86 746.43 568.88 755.02 535.96 "/>
    <polygon class="stars star-poly" fill-rule="evenodd" clip-rule="evenodd" fill="#747F86" points="217.26 324.32 184.73 321.61 203.34 294.8 "/>
    <polygon class="stars star-poly" fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="20.56 35.23 6.93 34.51 14.36 23.06 "/>
    <polygon class="stars star-poly" fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="480.07 159.86 461.42 159.06 471.44 143.31 "/>
    <polygon class="stars star-poly" fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="661.88 212.75 642.93 205.7 658.52 192.81 "/>
    <polygon class="stars star-poly" fill-rule="evenodd" clip-rule="evenodd" fill="#6C7367" points="250.31 435.69 239.44 434.04 246.31 425.45 "/>
    <g class="flare">
      <line fill="none" x1="213.12" y1="181.35" x2="260.23" y2="210.27"/>
      <circle fill="none" cx="213.12" cy="181.35" r="46.07"/>
      <circle fill="none" cx="213.12" cy="181.35" r="55.28"/>
      <polyline fill="none" points="213.12 181.35 31.91 211.9 213.12 181.35 394.34 150.8 213.12 181.35 182.58 0.13 213.12 181.35 243.67 362.56 213.12 181.35 150.73 320.53 213.12 181.35 275.52 42.17 213.12 181.35 73.94 118.95 213.12 181.35 352.3 243.74 213.12 181.35 117.36 318.02 213.12 181.35 308.89 44.67 213.12 181.35 76.45 85.58 213.12 181.35 349.8 277.11 213.12 181.35 60.43 227.93 213.12 181.35 365.82 134.76 213.12 181.35 166.54 28.65 213.12 181.35 259.71 334.04 213.12 181.35 175.18 228.66 213.12 181.35 251.07 134.04 213.12 181.35 165.81 143.4 213.12 181.35 260.43 219.3 213.12 181.35 119.26 296.95 213.12 181.35 306.99 65.75 213.12 181.35 97.52 87.49 213.12 181.35 328.73 275.21 213.12 181.35 -26.5 216.13 213.12 181.35 452.75 146.57 213.12 181.35 178.34 -58.27 213.12 181.35 247.91 420.97 213.12 181.35 189.51 192.1 213.12 181.35 236.74 170.6 213.12 181.35 202.38 157.73 213.12 181.35 223.87 204.96 213.12 181.35 172.12 215.32 213.12 181.35 254.13 147.37 213.12 181.35 179.15 140.34 213.12 181.35 247.1 222.35 213.12 181.35 63.26 307.87 213.12 181.35 362.99 54.83 213.12 181.35 86.6 31.48 213.12 181.35 339.64 331.21 213.12 181.35 71.61 310.94 213.12 181.35 354.64 51.75 213.12 181.35 83.53 39.83 213.12 181.35 342.72 322.87 213.12 181.35 200.42 209.43 213.12 181.35 225.82 153.26 213.12 181.35 185.04 168.65 213.12 181.35 241.21 194.05 213.12 181.35 81.79 196.7 213.12 181.35 344.46 165.99 213.12 181.35 197.77 50.01 213.12 181.35 228.48 312.68 213.12 181.35 139.62 265.52 213.12 181.35 286.63 97.17 213.12 181.35 128.95 107.84 213.12 181.35 297.3 254.85 213.12 181.35 142.01 232.86 213.12 181.35 284.24 129.83 213.12 181.35 161.61 110.24 213.12 181.35 264.64 252.46 "/>
      <radialGradient id="SVGID_1_" cx="213.12" cy="181.35" r="110.56" gradientUnits="userSpaceOnUse">
        <stop offset="0" stop-color="#666"/>
        <stop offset="0.73" stop-color="#93432A"/>
        <stop offset="1" stop-color="#230000"/>
      </radialGradient>
      <circle opacity="0.15" fill="url(#SVGID_1_)" cx="213.12" cy="181.35" r="110.56"/>
      <radialGradient id="SVGID_2_" cx="213.12" cy="181.35" r="55.28" gradientUnits="userSpaceOnUse">
        <stop offset="0.15" stop-color="#FFFFFF"/>
        <stop offset="0.21" stop-color="#E2D1D2"/>
        <stop offset="0.29" stop-color="#666"/>
        <stop offset="0.36" stop-color="#A67276"/>
        <stop offset="0.42" stop-color="#975A5E"/>
        <stop offset="0.45" stop-color="#915155"/>
        <stop offset="0.56" stop-color="#6C3638"/>
        <stop offset="0.68" stop-color="#44191A"/>
        <stop offset="0.79" stop-color="#2C0707"/>
        <stop offset="0.85" stop-color="#230000"/>
        <stop offset="0.86" stop-color="#270201"/>
        <stop offset="0.86" stop-color="#340805"/>
        <stop offset="0.87" stop-color="#48120B"/>
        <stop offset="0.88" stop-color="#652114"/>
        <stop offset="0.89" stop-color="#8B331F"/>
        <stop offset="0.9" stop-color="#B8492D"/>
        <stop offset="0.9" stop-color="#D65836"/>
        <stop offset="0.9" stop-color="#C95232"/>
        <stop offset="0.91" stop-color="#9D3C25"/>
        <stop offset="0.93" stop-color="#666"/>
        <stop offset="0.94" stop-color="#591B10"/>
        <stop offset="0.95" stop-color="#410F09"/>
        <stop offset="0.97" stop-color="#666"/>
        <stop offset="0.98" stop-color="#260201"/>
        <stop offset="1" stop-color="#230000"/>
      </radialGradient>
      <circle opacity="0.5" fill="url(#SVGID_2_)" cx="213.12" cy="181.35" r="55.28"/>
      <radialGradient id="SVGID_3_" cx="213.12" cy="181.35" r="46.07" gradientUnits="userSpaceOnUse">
        <stop offset="0.15" stop-color="#87949c"/>
        <stop offset="1" stop-color="#261F26"/>
      </radialGradient>
      <circle fill="url(#SVGID_3_)" cx="213.12" cy="181.35" r="46.07"/>
      <polyline opacity="0.03" fill="none" stroke="#FFFFFF" stroke-width="2" stroke-miterlimit="10" points="213.12 181.35 31.91 211.9 213.12 181.35 394.34 150.8 213.12 181.35 182.58 0.13 213.12 181.35 243.67 362.56 213.12 181.35 150.73 320.53 213.12 181.35 275.52 42.17 213.12 181.35 73.94 118.95 213.12 181.35 352.3 243.74 213.12 181.35 117.36 318.02 213.12 181.35 308.89 44.67 213.12 181.35 76.45 85.58 213.12 181.35 349.8 277.11 213.12 181.35 60.43 227.93 213.12 181.35 365.82 134.76 213.12 181.35 166.54 28.65 213.12 181.35 259.71 334.04 213.12 181.35 175.18 228.66 213.12 181.35 251.07 134.04 213.12 181.35 165.81 143.4 213.12 181.35 260.43 219.3 213.12 181.35 119.26 296.95 213.12 181.35 306.99 65.75 213.12 181.35 97.52 87.49 213.12 181.35 328.73 275.21 213.12 181.35 -26.5 216.13 213.12 181.35 452.75 146.57 213.12 181.35 178.34 -58.27 213.12 181.35 247.91 420.97 213.12 181.35 189.51 192.1 213.12 181.35 236.74 170.6 213.12 181.35 202.38 157.73 213.12 181.35 223.87 204.96 213.12 181.35 172.12 215.32 213.12 181.35 254.13 147.37 213.12 181.35 179.15 140.34 213.12 181.35 247.1 222.35 213.12 181.35 63.26 307.87 213.12 181.35 362.99 54.83 213.12 181.35 86.6 31.48 213.12 181.35 339.64 331.21 213.12 181.35 71.61 310.94 213.12 181.35 354.64 51.75 213.12 181.35 83.53 39.83 213.12 181.35 342.72 322.87 213.12 181.35 200.42 209.43 213.12 181.35 225.82 153.26 213.12 181.35 185.04 168.65 213.12 181.35 241.21 194.05 213.12 181.35 81.79 196.7 213.12 181.35 344.46 165.99 213.12 181.35 197.77 50.01 213.12 181.35 228.48 312.68 213.12 181.35 139.62 265.52 213.12 181.35 286.63 97.17 213.12 181.35 128.95 107.84 213.12 181.35 297.3 254.85 213.12 181.35 142.01 232.86 213.12 181.35 284.24 129.83 213.12 181.35 161.61 110.24 213.12 181.35 264.64 252.46 "/>
      </g>
      <polygon class="liney" fill="#6C7367" points="333.46 437.69 353.23 482.62 358.96 479.65 "/>
      <polyline class="liney" fill="#6C7367" points="360.32 420.62 331.8 380.66 354.83 424.02 "/>
      <polyline class="liney" fill="#6C7367" points="357.26 578.72 335.5 534.7 351.3 581.19 "/>
      <polyline class="liney" fill="#6C7367" points="176.57 516.72 175.76 467.62 170.13 516.39 "/>
      <polyline class="liney" fill="#6C7367" points="514.13 59.9 467.66 75.74 515.8 66.13 "/>
      <polyline class="liney" fill="#6C7367" points="625.84 443.72 587.08 413.57 621.55 448.53 "/>
  </svg>
      
      
  <svg class="cons" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 586.678 485.635" preserveAspectRatio="xMidYMid meet" enable-background="new 0 0 586.678 485.635"
     xml:space="preserve">
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="266.314,165.913 246.419,165.055 257.109,148.254 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="262" y1="161.727" x2="338.367" y2="244.765"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="165.897,245.028 156.73,258.855 149.338,244.003 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="156.555" y1="244.765" x2="250.387" y2="161.317"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="230.897,357.353 202.297,362.378 212.244,335.098 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="214.555" y1="348.765" x2="338.367" y2="244.765"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="348.314,251.913 328.419,251.055 339.109,234.254 	"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="357.741,363.128 371.202,372.825 356.074,379.635 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="358.83" y1="368.017" x2="335.333" y2="244.664"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="161.351,135.962 148.367,133.786 156.744,123.63 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="158.449" y1="130.154" x2="255.047" y2="154.594"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="300.741,420.128 314.202,429.825 299.074,436.635 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="301.83" y1="425.017" x2="222.322" y2="351.126"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="299.294" y1="430.879" x2="360.184" y2="375.521"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="160.941" y1="252.504" x2="335.333" y2="244.664"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="156.555" y1="244.765" x2="155.948" y2="135.569"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="342.944,143.268 342.657,129.191 352.146,135.905 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="347.163" y1="139.032" x2="342.661" y2="245.448"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="254.614" y1="160.518" x2="342.412" y2="137.515"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="103.479,314.891 95.604,324.215 88.589,315.771 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="96.15" y1="315.857" x2="163.367" y2="248.216"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="215.253" y1="341.358" x2="100.738" y2="318.879"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="261.351,45.962 248.367,43.786 256.744,33.63 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="258.449" y1="40.155" x2="347.081" y2="135.569"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="256.555" y1="154.765" x2="255.948" y2="45.569"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="451.071,169.334 455.967,155.118 464.104,167.158 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="457.364" y1="167.477" x2="345.244" y2="244.54"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="345.796" y1="136.891" x2="452.608" y2="163.292"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="394.147,41.452 380.92,34.303 394.126,28.239 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="393.342" y1="37.94" x2="457.364" y2="160.518"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="344.967" y1="140.025" x2="388.437" y2="38.949"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="345.796" y1="136.891" x2="214.555" y2="348.765"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="254.614" y1="165.408" x2="358.83" y2="368.017"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="153.569" y1="252.504" x2="347.081" y2="135.569"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="386.487" y1="32.85" x2="257.469" y2="165.608"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="214.555" y1="348.765" x2="254.614" y2="160.518"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="299.294" y1="430.879" x2="254.614" y2="39.796"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="96.034" y1="319.553" x2="457.364" y2="167.477"/>
  </svg>
      
      
     <svg class="cons2" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" viewBox="0 0 586.678 485.635" preserveAspectRatio="xMidYMid meet" enable-background="new 0 0 586.678 485.635"
     xml:space="preserve">
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="266.314,165.913 246.419,165.055 257.109,148.254 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="262" y1="161.727" x2="338.367" y2="244.765"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="165.897,245.028 156.73,258.855 149.338,244.003 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="156.555" y1="244.765" x2="250.387" y2="161.317"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="230.897,357.353 202.297,362.378 212.244,335.098 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="214.555" y1="348.765" x2="338.367" y2="244.765"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="348.314,251.913 328.419,251.055 339.109,234.254 	"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="357.741,363.128 371.202,372.825 356.074,379.635 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="358.83" y1="368.017" x2="335.333" y2="244.664"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="161.351,135.962 148.367,133.786 156.744,123.63 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="158.449" y1="130.154" x2="255.047" y2="154.594"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="300.741,420.128 314.202,429.825 299.074,436.635 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="301.83" y1="425.017" x2="222.322" y2="351.126"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="299.294" y1="430.879" x2="360.184" y2="375.521"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="160.941" y1="252.504" x2="335.333" y2="244.664"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="156.555" y1="244.765" x2="155.948" y2="135.569"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="342.944,143.268 342.657,129.191 352.146,135.905 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="347.163" y1="139.032" x2="342.661" y2="245.448"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="254.614" y1="160.518" x2="342.412" y2="137.515"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="103.479,314.891 95.604,324.215 88.589,315.771 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="96.15" y1="315.857" x2="163.367" y2="248.216"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="215.253" y1="341.358" x2="100.738" y2="318.879"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="261.351,45.962 248.367,43.786 256.744,33.63 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="258.449" y1="40.155" x2="347.081" y2="135.569"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="256.555" y1="154.765" x2="255.948" y2="45.569"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="451.071,169.334 455.967,155.118 464.104,167.158 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="457.364" y1="167.477" x2="345.244" y2="244.54"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="345.796" y1="136.891" x2="452.608" y2="163.292"/>
    <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#B2A56E" points="394.147,41.452 380.92,34.303 394.126,28.239 	"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="393.342" y1="37.94" x2="457.364" y2="160.518"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="344.967" y1="140.025" x2="388.437" y2="38.949"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="345.796" y1="136.891" x2="214.555" y2="348.765"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="254.614" y1="165.408" x2="358.83" y2="368.017"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="153.569" y1="252.504" x2="347.081" y2="135.569"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="386.487" y1="32.85" x2="257.469" y2="165.608"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="214.555" y1="348.765" x2="254.614" y2="160.518"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="299.294" y1="430.879" x2="254.614" y2="39.796"/>
    <line fill="none" stroke="#C69C6D" stroke-miterlimit="10" x1="96.034" y1="319.553" x2="457.364" y2="167.477"/>
  </svg>
      
    
    </section>
</div>
            
          
!
            
              @import url(http://fonts.googleapis.com/css?family=Voltaire);


$yellow: #f2e086;
$ltGreen: #bfbf8a;
$medGreen: #6c7367;
$dkBlue: #3f3b40;
$dkstBlue: #261F26;
$ltYellow: adjust-color($yellow, $lightness: 15%, $saturation: -10%);
$darkest: adjust-color($dkstBlue, $lightness: -2%);

html {
  width: 100%;
  height: 100vh;
  min-width: 100%;
  min-height: 100%;
}

video { 
  display: none; 
  left: 100000px;
}

body {
  width: 100%;
  height: 100%;
  min-height: 600px;
  background-repeat:no-repeat;
  background-size:cover;
  color: $ltYellow;
  font-family: "Voltaire", helvetica, sans-serif;
   background: rgb(120,114,114); /* Old browsers */
  background: -moz-linear-gradient(top, rgba(248,161,170,1) 0%, rgba(239,107,114,1) 41%, rgba(241,116,124,1) 50%, rgba(241,116,124,1) 50%, rgba(255,151,142,1) 50%, rgba(255,151,142,1) 50%, rgba(142,132,133,1) 69%, rgba(120,114,114,1) 100%), rgba(120,114,114,1); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(248,161,170,1)), color-stop(41%,rgba(239,107,114,1)), color-stop(50%,rgba(241,116,124,1)), color-stop(50%,rgba(241,116,124,1)), color-stop(50%,rgba(255,151,142,1)), color-stop(50%,rgba(255,151,142,1)), color-stop(69%,rgba(142,132,133,1)), color-stop(100%,rgba(120,114,114,1))), rgba(120,114,114,1); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, rgba(248,161,170,1) 0%,rgba(239,107,114,1) 41%,rgba(241,116,124,1) 50%,rgba(241,116,124,1) 50%,rgba(255,151,142,1) 50%,rgba(255,151,142,1) 50%,rgba(142,132,133,1) 69%,rgba(120,114,114,1) 100%), rgba(120,114,114,1); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, rgba(248,161,170,1) 0%,rgba(239,107,114,1) 41%,rgba(241,116,124,1) 50%,rgba(241,116,124,1) 50%,rgba(255,151,142,1) 50%,rgba(255,151,142,1) 50%,rgba(142,132,133,1) 69%,rgba(120,114,114,1) 100%), rgba(120,114,114,1); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, rgba(248,161,170,1) 0%,rgba(239,107,114,1) 41%,rgba(241,116,124,1) 50%,rgba(241,116,124,1) 50%,rgba(255,151,142,1) 50%,rgba(255,151,142,1) 50%,rgba(142,132,133,1) 69%,rgba(120,114,114,1) 100%), rgba(120,114,114,1); /* IE10+ */
  background: linear-gradient(to bottom, rgba(248,161,170,1) 0%,rgba(239,107,114,1) 41%,rgba(241,116,124,1) 50%,rgba(241,116,124,1) 50%,rgba(255,151,142,1) 50%,rgba(255,151,142,1) 50%,rgba(142,132,133,1) 69%,rgba(120,114,114,1) 100%), rgba(120,114,114,1); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8a1aa', endColorstr='#787272',GradientType=0 );
}

#content {
  width: 100%;
  height: 100%;
  display: block;
}

section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  display: block;
}

.landscape {
  margin: 150px auto;
  display: table;
  transform: translateZ(0);
}

.person {
  position: absolute;
  width: 300px;
  height: 300px;
  z-index: 100;
  position: absolute;
  left: 68%;
  top: 350px;
  margin-left: -150px;
  transform: translateZ(0);
}

.head {
  position: absolute;
  width: 72px;
}

.neck {
  position: absolute;
  width: 72px;
}

.torso {
  position: absolute;
  width: 72px;
}

.inside {
  width: 300px;
  height: 300px;
  position: absolute;
  z-index: 150;
  left: 10%;
  top: 100px;
  margin-left: -100px;
  visibility: hidden;
}

.around {
  background: $darkest;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 170;
  left: 0;
  top: 0;
  visibility: hidden;
}

/*.turn {
  background: $darkest;
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 200;
  top: 0;
  left: 0;
}*/

p {
  text-transform: uppercase;
  font-size: 40px;
  text-align: center;
  letter-spacing: 0.17em;
  width: 700px;
  height: 190px;
  position: absolute;
  z-index:1000;
  left: 50%;
  top: 48%;
  margin-left: -350px;
  margin-top: -95px;
  font-size: 40px;
  text-align: center;
  line-height: 46px;
  visibility:hidden;
}

.starfield {
  width: 800px;
  height: 600px;
  position: absolute;
  left: 50%;
  top: 48%;
  margin-left: -400px;
  margin-top: -300px;
  visibility: hidden;
  z-index: 170;
  transform: translateZ(0);
}

.stars {
  transform: scale(1.4);
  transform: translateZ(0);
}

.flare {
  opacity: 0.7;
  transform: translateZ(0);
}

.cons, .cons2 {
  width: 590px;
  height: 486px;
  visibility: hidden;
  position: absolute;
  z-index: 400;
  top: 300px;
  left: 30px;
  transform: translateZ(0);
}


            
          
!
            
              //Looks best full screen: http://codepen.io/sdras/full/RNWaMX

TweenMax.ticker.fps(60);

var $text = $("p.lg"), $text2 = $("p.lg2"), $text3 = $("p.lg3"), $text4 = $("p.lg4"), $text5 = $("p.lg5"),
$head = $(".head"),
$neck = $(".neck"),
$torso = $(".torso"),
$person = $(".person"),
$landscape = $(".landscape"),
$inside = $(".inside"),
$reg = $(".reg"),
$circle = $(".inside circle"),
$tiny = $(".tiny"),
$starfield = $(".starfield"),
$stars = $(".stars"),
$starpoly = $(".star-poly"),
$cons = $(".cons"),
$cons2 = $(".cons2"),
$flare = $(".flare");

TweenMax.set("p, .cons, .cons2", {perspective:400});
TweenMax.set("p, .landscape, .starfield,  .contour2, .inside, .turn, .around, .cons, .cons2", {visibility:"visible"});

// when you're feeling low
function sceneOne() {
  var tl = new TimelineLite();
mySplitText = new SplitText($text, {type:"chars, words"});
  
  
tl.staggerFrom(mySplitText.chars, 0.8, {opacity:0, scaleX:0, ease:Power4.easeOut}, 0.05, "+=4")
.staggerTo(mySplitText.words, 0.8, {rotationY:60, y:300, opacity:0, ease:Power4.easeIn}, 0.1, "+=0.1")
.to($person, 3, {rotation:-5, transformOrigin:"80% 50%", y:-10,  ease:Circ.easeOut})
.to($head, 3, {rotation:-10, transformOrigin:"0% 100%", y:10, ease:Back.easeOut}, "-=3")
.to($neck, 3, {rotation:-10, transformOrigin:"0% 100%", y:10, ease:Back.easeOut}, "-=3");
  
return tl;
}

// you might be focused on the wrong thing
function sceneTwo() {
  var tl = new TimelineLite();
thisSplitText = new SplitText($text2, {type:"chars, words, lines"});
  
  
tl.staggerFrom(thisSplitText.chars, 1.2, {opacity:0, scaleX:0, ease:Power4.easeOut}, 0.05, "-=4.5")
.staggerTo(thisSplitText.lines, 1, {scale:10, y:10, opacity:0, ease:Power4.easeIn}, 0.1, "-=2.5")
.add("scaleIn")
.to($person, 2, {scale:3, x:-60, ease:Circ.easeOut}, "scaleIn")
.to($landscape, 2, {scale:2.5, y:-100, x:-170, ease:Circ.easeOut}, "scaleIn");
  
return tl;
}

// you might be too zoomed in
function sceneThree() {
  var tl = new TimelineLite();
zoomSplitText = new SplitText($text3, {type:"chars, words, lines"});
  
  
tl.staggerFrom(zoomSplitText.chars, 0.8, {opacity:0, scale:0, ease:Power4.easeOut}, 0.05, "-=0.1")
.staggerTo(zoomSplitText.lines, 0.8, {scale:0, opacity:0, ease:Power4.easeIn}, 0.1, "-=1")
.add("insular-=4");
tl.to($landscape, 2, {scale:20, transformOrigin:"50% 50%", force3D:true, ease:Power2.easeIn}, "insular+=1")
.to($person, 3, {scale:5, x:-100, y:200, force3D:true, ease:Power2.easeIn}, "insular-=0.5")
.fromTo($inside, 3, {scale:0, force3D:true, ease:Power2.easeIn}, {scale:3, x:400, force3D:true, transformOrigin:"50% 50%", ease:Power2.easeIn}, "insular")
.staggerFrom($reg, 4.25, {autoAlpha:0, rotation:90, force3D:true, transformOrigin:"50% 50%", ease:Bounce.easeOut}, 0.1, "-=2.25")
.from($tiny, 3.5, {opacity:0, scale:0, transformOrigin:"50% 50%", ease:Elastic.easeOut}, "-=3.5")
.add("inner")
.to($tiny, 3, {opacity:0, scale:0, rotation:180, transformOrigin:"50% 50%", ease:Elastic.easeOut}, "inner")
.staggerTo($reg, 4, {autoAlpha:0, rotation:200, transformOrigin:"50% 50%", ease:Power4.easeOut}, 0.1, "inner")
.to($inside, 2, {scale:0, opacity:0, ease:Power2.easeIn}, "inner+=2")
.to($landscape, 3, {scale:1.5, y:0, transformOrigin:"50% 50%", force3D:true, ease:Expo.easeOut}, "inner+=3")
.to($person, 3, {scale:1.5, y:0, transformOrigin:"50% 50%", force3D:true, ease:Expo.easeOut}, "inner+=4");

  
return tl;
}

// you're looking through the wrong end of the telescope
function sceneFour() {
  var tl = new TimelineLite();
teleSplitText = new SplitText($text4, {type:"chars, words, lines"});
  
tl.staggerFrom(teleSplitText.chars, 1, {opacity:0, scaleX:0, ease:Power4.easeOut}, 0.05, "+=1")
.staggerTo(teleSplitText.words, 1.2, {rotation:180, opacity:0, scale:0.5, ease:Power4.easeIn}, 0.1)
.add("person-=1")
.to($head, 3, {rotation:5, transformOrigin:"0% 100%", y:-10, ease:Power2.easeOut}, "person")
.to($neck, 3, {rotation:5, transformOrigin:"0% 100%", y:-10, ease:Power2.easeOut}, "person")
.to($torso, 3, {rotation:5, transformOrigin:"0% 100%", y:-10, ease:Power2.easeOut}, "person")
.to($person, 2, {rotation:60, transformOrigin:"50% 50%", y:-10, ease:Power2.easeOut})
.add("atmosphere-=1")
.to($landscape, 3, {scale:0.4, opacity:0, transformOrigin:"50% 50%", y:35, force3D:true, ease:Power4.easeOut}, "atmosphere-=1")
.to($person, 2, {scale:3, transformOrigin:"50% 50%", x:-800, y:600, force3D:true, ease:Power4.easeOut}, "atmosphere")
.from(".around", 1, {opacity:0, scale:0, transformOrigin:"50% 50%", ease:Power4.easeOut}, "atmosphere");
  
return tl;
}

// the turn it around scene
function sceneFive() {
  var tl = new TimelineLite();
	turnSplitText = new SplitText($text5, {type:"chars, words, lines"});
  
tl.from(".turn", 0.5, {autoAlpha:0, ease:Elastic.easeOut})
.from($starfield, 1, {rotation:10, opacity:0, scale:2, ease:Back.easeOut}, 0.1)
.from($starpoly, 1, {y:-200, x:100, scale:1.2, ease:Back.easeOut}, 0.1)
.staggerFrom(turnSplitText.chars, 1, {opacity:0, scaleX:0, rotationY:-50, transformOrigin:"50%", ease:Elastic.easeOut}, 0.1, "+=2")
.staggerTo(turnSplitText.words, 1.2, {rotationY:-180, opacity:0, ease:Power4.easeIn}, 0.2);

  return tl;
}

// spacedance
function sceneSix() {
  var tl = new TimelineLite();
  
tl.add("sixbegin")
.fromTo($cons, 2, {rotation:60, scale:0.2, opacity:0, transformOrigin:"0% 100%", x:-200, ease:Power4.easeOut}, {rotation:0, scale:1, opacity:0.7, transformOrigin:"50%", x:500, ease:Power4.easeOut})
.to($cons, 3, {rotation:-100, scaleX:0.4, z:-300, opacity:0.5, transformOrigin:"50%", x:-20, ease:Back.easeOut}, "+=1")
.fromTo($cons2, 2, {rotation:-60, scale:0.2, opacity:0, transformOrigin:"0% 100%", x:900, y:-200, ease:Power4.easeOut}, {rotation:0, scale:1, opacity:0.7, transformOrigin:"50%", x:200, ease:Power4.easeOut})
.to($cons, 4, {rotation:200, y:-150, scaleY:0.2, z:100, opacity:0.3, transformOrigin:"50%", ease:Back.easeOut}, "-=2")
.to($cons2, 4, {rotation:-80, y:-300, scaleX:0.2, z:100, opacity:0.3, transformOrigin:"50%", ease:Back.easeOut}, "-=2")
.to($cons2, 1, {opacity:0.4, scaleX:0.25, ease:Expo.easeIn})
.to($cons2, 5, {scale:0.25, x:600, y:-20, opacity: 0.2, ease:Back.easeOut}, "-=2")

.staggerFromTo(".cons polygon", 0.8, {opacity:1, ease:Back.easeOut}, {opacity:0.5, repeat:10, scaleX:0.7, transformOrigin:"50%", ease:Back.easeOut}, 0.4, "sixbegin")
.staggerFromTo(".cons2 polygon", 0.8, {opacity:1, ease:Back.easeOut}, {opacity:0.5, repeat:10, scaleX:0.7, transformOrigin:"50%", ease:Back.easeOut}, 0.4, "sixbegin")

.staggerTo(".liney", 20, {opacity:0.5, scale:1.4, x:200, y:100, transformOrigin:"50%", ease:Back.easeOut}, 0.4, "sixbegin")

.to($flare, 15, {scale:0.3, y:100, transformOrigin:"50%", ease:Back.easeOut}, "sixbegin")

.staggerFromTo($stars, 1, {rotation:10, opacity:1, scale:0.5, ease:Back.easeOut}, {rotation:20, opacity:0, scale:0.85, repeat:-1, ease:Back.easeOut}, 0.1, "sixbegin");
  
return tl;
}



var master = new TimelineLite();
$(document).ready(master)
master.add(sceneOne(), "scene1")
        .add(sceneTwo(), "scene2")
        .add(sceneThree(), "scene3")
        .add(sceneFour(), "scene4")
        .add(sceneFive(), "scene5")
        .add(sceneSix(), "scene6");

//master.seek("scene6");
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console