Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <svg class="bedroom" xmlns="http://www.w3.org/2000/svg" version="1.1" x="0" y="0" viewBox="0 0 780.9 401.6" enable-background="new 0 0 780.949 401.586" xml:space="preserve">
  <polygon fill-rule="evenodd" clip-rule="evenodd" points="75 289 698 289 784 321.7 784 401.2 -1 402 -1 316 "/>
  <rect x="73.5" y="57.5" fill-rule="evenodd" clip-rule="evenodd" fill="#514743" stroke="#020202" stroke-miterlimit="10" width="626" height="233"/>
  <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#373838" stroke="#020202" stroke-miterlimit="10" points="85.3 264.3 117 248.5 210 248.5 204.3 263.5 "/>
  <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#373838" stroke="#020202" stroke-miterlimit="10" points="687 263.3 635.2 248.5 562.3 247.5 567.9 262.5 "/>
  <rect x="618.5" y="208.5" fill-rule="evenodd" clip-rule="evenodd" fill="#514743" stroke="#020202" stroke-miterlimit="10" width="5" height="44"/>
  <rect x="612.5" y="208.5" fill-rule="evenodd" clip-rule="evenodd" fill="#514743" stroke="#020202" stroke-miterlimit="10" width="6" height="44"/>
  <rect x="605.5" y="214.5" fill-rule="evenodd" clip-rule="evenodd" fill="#2F3338" stroke="#020202" stroke-miterlimit="10" width="7" height="38"/>
  <rect x="597.5" y="208.5" fill-rule="evenodd" clip-rule="evenodd" fill="#2F3338" stroke="#020202" stroke-miterlimit="10" width="8" height="44"/>
  <rect x="591.5" y="206.5" fill-rule="evenodd" clip-rule="evenodd" fill="#514743" stroke="#020202" stroke-miterlimit="10" width="6" height="46"/>
  <rect x="580.5" y="199.5" fill-rule="evenodd" clip-rule="evenodd" fill="#21242B" stroke="#020202" stroke-miterlimit="10" width="11" height="53"/>
  <rect x="573.5" y="208.5" fill-rule="evenodd" clip-rule="evenodd" fill="#514743" stroke="#020202" stroke-miterlimit="10" width="7" height="44"/>
  <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#111214" stroke="#020202" stroke-miterlimit="10" points="565.5 210.3 573.5 208.5 573.5 253 565.5 248.5 "/>
  <rect x="104.5" y="273.5" fill-rule="evenodd" clip-rule="evenodd" fill="#363F45" stroke="#020202" stroke-miterlimit="10" width="106" height="22"/>
  <rect x="557.5" y="274.5" fill-rule="evenodd" clip-rule="evenodd" fill="#363F45" stroke="#020202" stroke-miterlimit="10" width="106" height="22"/>
  <rect x="85.5" y="264.5" fill-rule="evenodd" clip-rule="evenodd" fill="#48545B" stroke="#020202" stroke-miterlimit="10" width="127" height="15"/>
  <rect x="560.5" y="263.5" fill-rule="evenodd" clip-rule="evenodd" fill="#48545B" stroke="#020202" stroke-miterlimit="10" width="127" height="15"/>
  <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#435660" stroke="#000000" stroke-miterlimit="10" points="208.5 288.6 99.7 387.5 702 387.5 561 290 "/>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#121416" stroke="#020202" stroke-miterlimit="10" d="M212.3 321.7c0 0-1.3 33.9 4 37.9S225 363 229 363s340.7 0 340.7 0 10 2 10.7-12.7 0-23.9 0-23.9L212.3 321.7z"/>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#262C30" stroke="#020202" stroke-miterlimit="10" d="M255.5 215v-31c0 0 1.5-9 9.5-7l240.1-0.3c0 0 8.4-0.4 9.4 5V220L255.5 215z"/>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#435660" stroke="#000000" stroke-miterlimit="10" d="M213.1 286l-30.1 31.2c0 0-4 2.7 35.5 2.3 39.5-0.4 361-2.5 361-2.5s21.2 1.9 32.7 0c11.5-1.9-32.1-26.8-32.1-26.8L213.1 286z"/>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#4B585E" stroke="#020202" stroke-miterlimit="10" d="M251.4 185.6c0 0 16.8-8.6 24.1-4.6s24.1-3.4 27.4-1 46.7 2.1 47.4-0.5c0.7-2.6 11.3 3.1 11.3 3.1s12.7-3.6 16 3.1 0.7 22.6 4 25.3 -3.3 6.6-3.3 6.6H255c0 0-4.3-15.1 0.5-19.1S250.5 192.8 251.4 185.6z"/>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#4B585E" stroke="#020202" stroke-miterlimit="10" d="M382.6 192.3c0 0 5.7 15.3 2.4 21.3s129.5 3.8 129.5 3.8 -11-12.9-5.5-19.4 -14.7-17.8-26.7-15.8S383.5 173.7 382.6 192.3z"/>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#363F45" stroke="#020202" stroke-miterlimit="10" d="M220.3 304.6c0 0-59.9-25.6 0-73.5 0 0 12.7-18.8 42.1-20.1 0 0 32.7-5.3 62 0 0 0 46-4.1 67.7-2.4 0 0 101 2.1 113.7-0.4 0 0 24-1.2 46 22.1 0 0 18 6.7 22.7 12s24.7 16.7 14.7 54c0 0 14.7 14.5-142.7 8.2C446.3 304.6 226.5 308.5 220.3 304.6z"/>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#262C30" stroke="#020202" stroke-miterlimit="10" d="M185 316.3c0 0 8 4 15.3 2.7s394.7-2.7 394.7-2.7 7.3 2 15.3 0 -8.7 13.3-59.3 10.7 -338 0.3-338 0.3S183.7 325 185 316.3z"/>
  <path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" fill="#80AAB7" d="M292.5 232l112.2 16.3c0 0 169.3 22.8 151.3-5.3l-17.3-9.5c0 0-18.1-22.9-41.4-25.6S511.5 192 486.7 184h-97c0 0-15.2 6.3-7.9 15.4s-4.2 9.5-4.2 9.5l-36.4 0.6L292.5 232z"/>
  <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#80AAB7" stroke="#000000" stroke-miterlimit="10" points="295.5 232 357 225 392.7 232 351.5 240 "/>
  <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" fill="#80AAB7" d="M295.5 231.2l91.6 13.3c0 0 144.8 13.9 130.1-9.1l-12.5-5.6c0 0-16.3-18.2-35.4-19.1 -48.9-2.5 5.1-12.2-15.2-18.7H392c0 0-11.8 7.5-5.9 15 5.9 7.5-21.8 1.9-21.8 1.9l-29.1 3.9L295.5 231.2z"/>
  <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#4B585E" stroke="#020202" stroke-miterlimit="10" points="351.5 192 351.5 240 295.5 232 295.5 194 "/>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#A3D8E8" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M319.3 208.3l1.2-1.3c0 0-1.2-0.1-1.7 1.3C318.4 209.7 319.3 208.3 319.3 208.3z"/>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#A3D8E8" stroke="#000000" stroke-width="0.5" stroke-miterlimit="10" d="M321.1 211.9c-0.7-0.6-0.2-3.1-2-3.1 0 0-1.6 0.2-1.8 2.3 -0.2 2.1-1.9 1.6-1.5 4.4 0 0 4 5.4 6.8-0.7C322.7 214.8 322.7 213.3 321.1 211.9z"/>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#020202" stroke="#020202" stroke-miterlimit="10" d="M255.5 91"/>
  <polygon class="half-down" fill-rule="evenodd" clip-rule="evenodd" fill="#363F45" stroke="#020202" stroke-miterlimit="10" points="697.3 41.1 774.7 -1 782.5 0.5 782.5 322 697.5 298.7 "/>
  <polygon class="half-down" fill-rule="evenodd" clip-rule="evenodd" fill="#363F45" stroke="#020202" stroke-miterlimit="10" points="-1.5 316.5 75 297.1 73 39.5 32.3 -1.5 -1 -1.5 "/>
  <polygon fill-rule="evenodd" clip-rule="evenodd" points="780.3 -2 700.4 57.4 73.5 57.5 22.6 -1 "/>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#1F2426" stroke="#020202" stroke-miterlimit="10" d="M202.3 145.8l-13.1-11.5c0 0-8.3-6.4-14.1 1.3 -5.8 7.7-10.2 12.5-10.2 12.5L202.3 145.8z"/>
  <path fill-rule="evenodd" clip-rule="evenodd" fill="#1F2426" stroke="#020202" stroke-miterlimit="10" d="M188.6 250c0 0 3.1-6.5-8.5-8.6 0 0-15.7-2.1-26.6 0.7 0 0-9.2 1-7.2 8.9C146.2 251 163.7 258.8 188.6 250z"/>
  <rect x="153.8" y="184.1" transform="matrix(-0.9409 0.3388 -0.3388 -0.9409 371.3968 355.4198)" fill-rule="evenodd" clip-rule="evenodd" fill="#1F2426" stroke="#020202" stroke-miterlimit="10" width="1.8" height="52"/>
  <rect x="148" y="185.6" transform="matrix(-0.9409 0.3388 -0.3388 -0.9409 360.7108 360.164)" fill-rule="evenodd" clip-rule="evenodd" fill="#1F2426" stroke="#020202" stroke-miterlimit="10" width="1.8" height="52"/>
  <polygon fill-rule="evenodd" clip-rule="evenodd" fill="#1F2426" stroke="#020202" stroke-miterlimit="10" points="136.3 189.1 149.8 187.4 149.2 182.6 135.7 184.4 "/>
  <rect x="160.5" y="238.5" fill-rule="evenodd" clip-rule="evenodd" fill="#1F2426" stroke="#020202" stroke-miterlimit="10" width="2" height="5"/>
  <rect x="154.5" y="234.6" transform="matrix(-0.9892 0.1467 -0.1467 -0.9892 354.2563 446.8874)" fill-rule="evenodd" clip-rule="evenodd" fill="#1F2426" stroke="#020202" stroke-miterlimit="10" width="12.4" height="3.8"/>
  <rect x="155.7" y="136" transform="matrix(-0.8328 -0.5536 0.5536 -0.8328 197.2218 386.1722)" fill-rule="evenodd" clip-rule="evenodd" fill="#1F2426" stroke="#020202" stroke-miterlimit="10" width="2.4" height="54.6"/>
</svg>


<svg class="bedroom moveup" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0" y="0" viewBox="0 0 780.9 401.6" enable-background="new 0 0 780.949 401.586" xml:space="preserve">
  <g id="Layer_1">
    <polygon fill="#47535E" stroke="#535353" stroke-miterlimit="10" points="75 289 698 289 784 321.7 784 401.2 -1 402 -1 316 "/>
    <rect x="73.5" y="57.5" fill="#DEA677" stroke="#535353" stroke-miterlimit="10" width="626" height="233"/>
    <polygon fill="#C1836A" stroke="#535353" stroke-miterlimit="10" points="85.3 264.3 117 248.5 210 248.5 204.3 263.5 "/>
    <polygon fill="#C1836A" stroke="#535353" stroke-miterlimit="10" points="687 263.3 635.2 248.5 562.3 247.5 567.9 262.5 "/>
    <rect x="618.5" y="208.5" fill="#C1836A" stroke="#535353" stroke-miterlimit="10" width="5" height="44"/>
    <rect x="612.5" y="208.5" fill="#C1836A" stroke="#535353" stroke-miterlimit="10" width="6" height="44"/>
    <rect x="605.5" y="214.5" fill="#796466" stroke="#535353" stroke-miterlimit="10" width="7" height="38"/>
    <rect x="597.5" y="208.5" fill="#796466" stroke="#535353" stroke-miterlimit="10" width="8" height="44"/>
    <rect x="591.5" y="206.5" fill="#C1836A" stroke="#535353" stroke-miterlimit="10" width="6" height="46"/>
    <rect x="580.5" y="199.5" fill="#796466" stroke="#535353" stroke-miterlimit="10" width="11" height="53"/>
    <rect x="573.5" y="208.5" fill="#C1836A" stroke="#535353" stroke-miterlimit="10" width="7" height="44"/>
    <polygon fill="#47535E" stroke="#535353" stroke-miterlimit="10" points="565.5 210.3 573.5 208.5 573.5 253 565.5 248.5 "/>
    <rect x="104.5" y="273.5" fill="#363F45" stroke="#535353" stroke-miterlimit="10" width="106" height="22"/>
    <rect x="557.5" y="274.5" fill="#363F45" stroke="#535353" stroke-miterlimit="10" width="106" height="22"/>
    <rect x="85.5" y="264.5" fill="#796466" stroke="#535353" stroke-miterlimit="10" width="127" height="15"/>
    <rect x="560.5" y="263.5" fill="#796466" stroke="#535353" stroke-miterlimit="10" width="127" height="15"/>
    <polygon fill="#796466" stroke="#535353" stroke-miterlimit="10" points="208.5 288.6 99.7 387.5 702 387.5 561 290 "/>
    <path fill="#27323D" stroke="#535353" stroke-miterlimit="10" d="M212.3 321.7c0 0-1.3 33.9 4 37.9S225 363 229 363s340.7 0 340.7 0 10 2 10.7-12.7 0-23.9 0-23.9L212.3 321.7z"/>
    <path fill="#47535E" stroke="#535353" stroke-miterlimit="10" d="M255.5 215v-31c0 0 1.5-9 9.5-7l240.1-0.3c0 0 8.4-0.4 9.4 5V220L255.5 215z"/>
    <path fill="#796466" stroke="#535353" stroke-miterlimit="10" d="M213.1 286l-30.1 31.2c0 0-4 2.7 35.5 2.3 39.5-0.4 361-2.5 361-2.5s21.2 1.9 32.7 0c11.5-1.9-32.1-26.8-32.1-26.8L213.1 286z"/>
    <path fill="#796466" stroke="#535353" stroke-miterlimit="10" d="M251.4 185.6c0 0 16.8-8.6 24.1-4.6s24.1-3.4 27.4-1c3.3 2.4 46.7 2.1 47.4-0.5 0.7-2.6 11.3 3.1 11.3 3.1s12.7-3.6 16 3.1 0.7 22.6 4 25.3 -3.3 6.6-3.3 6.6H255c0 0-4.3-15.1 0.5-19.1S250.5 192.8 251.4 185.6z"/>
    <path fill="#796466" stroke="#535353" stroke-miterlimit="10" d="M382.6 192.3c0 0 5.7 15.3 2.4 21.3s129.5 3.8 129.5 3.8 -11-12.9-5.5-19.4 -14.7-17.8-26.7-15.8S383.5 173.7 382.6 192.3z"/>
    <path fill="#C1836A" stroke="#535353" stroke-miterlimit="10" d="M220.3 304.6c0 0-59.9-25.6 0-73.5 0 0 12.7-18.8 42.1-20.1 0 0 32.7-5.3 62 0 0 0 46-4.1 67.7-2.4 0 0 101 2.1 113.7-0.4 0 0 24-1.2 46 22.1 0 0 18 6.7 22.7 12s24.7 16.7 14.7 54c0 0 14.7 14.5-142.7 8.2C446.3 304.6 226.5 308.5 220.3 304.6z"/>
    <path fill="#324152" stroke="#535353" stroke-miterlimit="10" d="M185 316.3c0 0 8 4 15.3 2.7s394.7-2.7 394.7-2.7 7.3 2 15.3 0 -8.7 13.3-59.3 10.7 -338 0.3-338 0.3S183.7 325 185 316.3z"/>
    <path display="none" opacity="0.2" fill="#80AAB7" enable-background="new    " d="M292.5 232l112.2 16.3c0 0 169.3 22.8 151.3-5.3l-17.3-9.5c0 0-18.1-22.9-41.4-25.6S511.5 192 486.7 184h-97c0 0-15.2 6.3-7.9 15.4 7.2 9.1-4.2 9.5-4.2 9.5l-36.4 0.6L292.5 232z"/>
    <polygon fill="#53767C" stroke="#535353" stroke-miterlimit="10" points="295.5 232 357 225 392.7 232 351.5 240 "/>
    <path display="none" opacity="0.5" fill="#80AAB7" enable-background="new    " d="M295.5 231.2l91.6 13.3c0 0 144.8 13.9 130.1-9.1l-12.5-5.6c0 0-16.3-18.2-35.4-19.1 -48.9-2.5 5.1-12.2-15.2-18.7H392c0 0-11.8 7.5-5.9 15 5.9 7.5-21.8 1.9-21.8 1.9l-29.1 3.9L295.5 231.2z"/>
    <polygon fill="#648A93" stroke="#535353" stroke-miterlimit="10" enable-background="new    " points="351.5 192 351.5 240 295.5 232 295.5 194 "/>
    <g>
      <path fill="#E5E5E5" stroke="#535353" stroke-width="0.5" stroke-miterlimit="10" d="M319.3 208.3l1.2-1.3c0 0-1.2-0.1-1.7 1.3C318.4 209.7 319.3 208.3 319.3 208.3z"/>
      <path fill="#E5E5E5" stroke="#535353" stroke-width="0.5" stroke-miterlimit="10" d="M321.1 211.9c-0.7-0.6-0.2-3.1-2-3.1 0 0-1.6 0.2-1.8 2.3 -0.2 2.1-1.9 1.6-1.5 4.4 0 0 4 5.4 6.8-0.7C322.7 214.8 322.7 213.3 321.1 211.9z"/>
    </g>
    <path fill="#020202" stroke="#535353" stroke-miterlimit="10" d="M255.5 91"/>
    <polygon fill="#796466" stroke="#535353" stroke-miterlimit="10" points="697.3 41.1 774.7 -1 782.5 0.5 782.5 322 697.3 290.5 "/>
    <polygon fill="#796466" stroke="#535353" stroke-miterlimit="10" points="-1.5 316.5 75 289 73 39.5 32.3 -1.5 -1 -1.5 "/>
    <polygon fill="#47535E" stroke="#535353" stroke-miterlimit="10" points="780.3 -2 700.4 57.4 73.5 57.5 22.6 -1 "/>
    <g>
      <path fill="#47535E" stroke="#535353" stroke-miterlimit="10" d="M202.3 145.8l-13.1-11.5c0 0-8.3-6.4-14.1 1.3 -5.8 7.7-10.2 12.5-10.2 12.5L202.3 145.8z"/>
      <path fill="#47535E" stroke="#535353" stroke-miterlimit="10" d="M188.6 250c0 0 3.1-6.5-8.5-8.6 0 0-15.7-2.1-26.6 0.7 0 0-9.2 1-7.2 8.9C146.2 251 163.7 258.8 188.6 250z"/>
      <rect x="153.8" y="184.1" transform="matrix(0.9409 -0.3387 0.3387 0.9409 -62.0254 64.8058)" fill="#47535E" stroke="#535353" stroke-miterlimit="10" width="1.8" height="52"/>
      <rect x="148" y="185.6" transform="matrix(0.9409 -0.3387 0.3387 0.9409 -62.8533 62.9411)" fill="#47535E" stroke="#535353" stroke-miterlimit="10" width="1.8" height="52"/>
      <polygon fill="#47535E" stroke="#535353" stroke-miterlimit="10" points="136.3 189.1 149.8 187.4 149.2 182.6 135.7 184.4 "/>
      <rect x="160.5" y="238.5" fill="#47535E" stroke="#535353" stroke-miterlimit="10" width="2" height="5"/>
      <rect x="154.5" y="234.6" transform="matrix(0.9892 -0.1467 0.1467 0.9892 -32.9506 26.1191)" fill="#47535E" stroke="#535353" stroke-miterlimit="10" width="12.4" height="3.8"/>
      <rect x="155.7" y="136" transform="matrix(0.8327 0.5537 -0.5537 0.8327 116.6619 -59.5759)" fill="#47535E" stroke="#535353" stroke-miterlimit="10" width="2.4" height="54.6"/>
    </g>
    <path fill="none" stroke="#EDC38C" stroke-width="0.5" stroke-miterlimit="10" d="M398.3 19"/>
  </g>
  <g id="objects">
    <g id="ball">
      <g>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M473.8 46.5c2.7 0.7 5.9 0.4 8.4 1.5"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M482.2 48c5.5 2.5 11.8 6.5 15.9 10.9"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M498.1 58.9c1.5 2.1 3 4.6 3.8 7"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M501.9 65.9c2.3 5.4 4.6 11.4 6 17.1"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M507.9 83c0.7 1.8 1 4.1 1.1 6.1"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M424.4 85.9c0.2-5.9 2.8-12.4 4.8-18"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M429.2 67.9c1.4-2.6 3.4-5.5 5.6-7.7"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M434.7 60.2c4.2-4.2 9.6-8.3 14.8-11.4"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M449.6 48.8c2-0.7 4.1-1.6 6.1-1.6"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M455.7 47.2c5.7-0.7 12.1-0.6 18.2-0.7"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M473.8 46.5c0.1 1.1 1 2 1.2 3"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M475 49.6c0.3 0.2 0.6 0.2 0.8 0.3"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M455.7 47.2c-0.3 0.9-1.1 1.5-1.3 2.4"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M454.3 49.6c1.1 0.4 2.4 0.4 3.6 0.7"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M457.9 50.3c5.7-0.2 11.5-0.2 17.1-0.7"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M449.6 48.8c1 1 3.1 0.2 4.2 1.1"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M453.8 49.9c0.2-0.1 0.4-0.2 0.5-0.3"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M434.7 60.2c0.9 1.9 0.6 4.3 1.5 6.2"/>
        <line fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" x1="436.2" y1="66.4" x2="436.2" y2="66.4"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M436.2 66.4c4.7-3.6 9.2-7.5 14-10.9"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M429.2 67.9c2.4-0.3 4.6-1.4 7-1.5"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M424.4 85.9c1.2 1.1 1.5 3 2.7 4.2"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M427 90.1c1.5-1.9 2.7-4.2 4.4-6"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M431.4 84.2c1.6-5.4 2.9-11.2 4.9-16.3"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M436.3 67.9c0-0.2 0-0.4 0-0.7"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M424.4 85.9c0 2.1 0.4 4.4 1.1 6.4"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M425.4 92.3c0.6-0.5 0.8-1.3 1.6-1.6"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M425.4 92.3c1.5 5.6 3.7 11.5 6 16.8"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M431.4 109.1c1 0.4 2.1 0.1 3.2 0.4"/>
        <line fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" x1="434.6" y1="109.5" x2="434.6" y2="109.5"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M431.4 109.1c0.9 2.5 2.3 4.9 3.8 7"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M434.6 109.5c0.2 2.2 0.9 4.4 0.7 6.6"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M435.2 116.1c4.1 4.4 10.4 8.4 15.9 10.9"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M451.2 127c2-1 4.4-0.8 6.2-2"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M457.4 125c-1.7-2.3-4.1-4.3-5.4-6.8"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M451.9 118.2c-1.3-1.3-2.8-2.3-4-3.7"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M451.2 127c2.4 1 5.6 0.8 8.3 1.5"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M459.5 128.4c-0.1-1.1-1-2-1.2-3"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M458.3 125.4c-0.3-0.2-0.6-0.2-0.9-0.4"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M459.5 128.4c6-0.1 12.4 0.1 18.2-0.7"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M477.7 127.8c0.3-0.9 1.1-1.5 1.3-2.4"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M479 125.4c-1.1-0.4-2.4-0.4-3.6-0.7"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M477.7 127.8c2 0 4.1-0.9 6.1-1.6"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M483.8 126.2c-1.1-0.9-3-0.2-4.2-1.1"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M483.8 126.2c5.3-2.9 10.2-7.2 14.8-11.1"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M498.6 115.1c-0.9-1.9-0.7-4.3-1.3-6.4"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M497.3 108.7c-0.1 0-0.2 0-0.2 0"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M498.6 115.1c1.9-2.5 4.2-5.2 5.6-8"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M504.2 107.1c-2.3 0.4-4.6 1.2-6.9 1.6"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M501.9 90.8c-1.6 5.4-2.9 11.2-4.9 16.3"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M504.2 107.1c2-5.6 4.5-12.1 4.8-18"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M508.9 89.1c-1.2-1.1-1.5-3-2.7-4.2"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M506.3 84.8c-1.5 1.9-2.7 4.2-4.4 6"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M506.3 84.3c0 0.2 0 0.4 0 0.5"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M507.9 83c-0.7 0.2-0.8 1.1-1.6 1.3"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M501.9 65.9c-1-0.4-2.1-0.1-3.2-0.4"/>
        <line fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" x1="498.7" y1="65.5" x2="498.7" y2="65.5"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M498.7 65.5c2 5.6 4.2 11 6.1 16.6"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M498.1 58.9c-0.3 2.2 0.5 4.4 0.7 6.6"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M482.2 48c-2.1 0.8-4.5 0.8-6.4 1.9"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M475.8 49.9c0 0.1 0 0.1 0 0.2"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M475.8 50.1c2 2 4.1 4.2 5.6 6.6"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M481.4 56.8c1.3 1.3 2.8 2.3 4 3.7"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M485.4 60.4c1.6 0.8 3.3 1.5 4.7 2.4"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M477.8 54.8c1.4 0.3 2.3 1.9 3.6 2"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M475.8 50.1c0.1 1.6 1.8 2.9 2 4.6"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M457.9 50.3c-0.8 2.4-3 4.3-4 6.6"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M453.9 56.9c3.1 1.3 6.4 2.3 9.5 3.4"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M463.5 60.3c4.8-1.9 9.6-3.6 14.3-5.6"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M453.8 49.9c-0.9 2-2.8 3.6-3.6 5.7"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M450.2 55.6c1 0.5 2.2 0.8 3.2 1.3"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M453.4 56.9c0.2 0 0.4 0 0.5 0"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M492.4 64.6c0 5.1 0 10.2 0 15.4"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M498.7 65.5c-1.1-0.2-2.2-0.4-3.3-0.8"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M495.4 64.7c-1 0.4-2-0.1-3-0.1"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M490.1 62.8c0.5 0.8 1.5 1.1 2.3 1.7"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M495.4 64.7c-1.5-0.9-3.6-1.7-5.3-1.9"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M477.5 72.3c1.5 3.9 3 7.8 4.4 11.8"/>
        <line fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" x1="481.9" y1="84.1" x2="481.9" y2="84.1"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M481.9 84.1c3.5-1.2 7-2.8 10.5-4.1"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M463.5 60.3c0 4.2 0 8.3 0 12.5"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M463.5 72.8c4.6-0.4 9.4-0.3 14-0.5"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M477.5 72.3c2.5-4 5.5-7.8 7.8-11.8"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M436.2 66.4c0.1 0.3 0.1 0.5 0.1 0.8"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M436.3 67.2c4.9-1.4 9.6-4 14.4-5.6"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M450.8 61.7c0.4-1.8 2.2-3 2.7-4.8"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M436.3 67.9c0.4 4.5-0.4 9.1-0.1 13.7"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M436.2 81.5c4.5 1.6 9 3.4 13.5 5"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M449.7 86.6c2.7-1.9 5.2-4.3 8.1-6"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M457.8 80.6c0.3-0.4 0.4-0.7 0.8-1.1"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M431.4 84.2c0.8 0.3 1 1.3 1.7 1.7"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M433.1 85.9c1.2-1.3 2-2.9 3-4.4"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M450.8 61.7c2.9 3.9 6.4 7.4 9.5 11.1"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M460.3 72.8c1.1 0 2.1 0 3.2 0"/>
        <line fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" x1="463.5" y1="72.8" x2="463.5" y2="72.8"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M463.5 72.8c0 1.1 0 2.3 0 3.4"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M463.5 76.2c4.9 2.7 9.5 6.4 14.3 9.5"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M477.8 85.8c1.4-0.6 2.8-1 4.1-1.7"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M457.8 80.6c-0.2 2.9-1.6 5.7-2.3 8.6"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M455.5 89.2c4.8 3.1 9.4 6.8 14.3 9.5"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M469.8 98.8c1.9-0.7 3.1-2.5 4.9-3.3"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M474.7 95.4c0.3-0.4 0.4-0.7 0.8-1.1"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M460.3 72.8c-0.5 2.3-1.7 4.5-1.7 6.8"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M458.6 79.5c1.8-0.8 3-2.6 4.9-3.3"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M483.6 88.4c4.5 1.6 9 3.4 13.5 5"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M497.1 93.5c1-1.4 1.9-3 3-4.4"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M500.2 88.8c-2.8-2.7-5.2-6-7.8-8.9"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M477.8 85.8c-0.6 2.9-2 5.7-2.3 8.6"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M475.5 94.4c2.9-1.6 5.4-4 8.1-6"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M483.6 88.4c-0.6-1.4-1-3-1.7-4.4"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M449.7 86.6c0.6 1.4 1 3 1.7 4.4"/>
        <line fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" x1="451.4" y1="90.9" x2="451.4" y2="90.9"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M451.4 90.9c1.3-0.7 2.7-1.1 4.1-1.7"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M433.1 85.9c0 0.1 0 0.2 0 0.3"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M433.1 86.2c2.8 2.7 5.2 6 7.8 8.9"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M440.9 95c3.5-1.4 6.9-2.9 10.5-4.1"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M504.8 82.1c-1.8 2-3 4.6-4.6 6.8"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M500.2 88.8c0 0.1 0 0.2 0 0.3"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M506.3 84.3c-0.7-0.6-0.7-1.8-1.5-2.3"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M497.1 93.5c0.3 4.6-0.6 9.1-0.1 13.7"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M501.9 90.8c-0.8-0.3-1-1.3-1.7-1.7"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M427 90.1c0 0.2 0 0.4 0 0.5"/>
        <path fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#C1836A" stroke-miterlimit="10" d="M427 90.7c0.7 0.6 0.7 1.8 
              
            
!

CSS

              
                body {
  background: #000;
  font-family: 'Fjalla One', sans-serif;
}

.bedroom {
  position: absolute;
  top: 0;
  left: 50%;
  margin-left: -320px;
  height: 100vh;
  max-height: 450px;
}

p {
  text-align: center;
  font-size: 30px;
  color: #fff;
  position: absolute;
  z-index: 1000;
  width: 100%;
  margin-top: 4%;
}
p, .moveup { visibility: hidden; }
.moveup, .t-5 { opacity: 0; }
.t-5 {
  transform: translateY(35px) scale(0.8);
	font-size: 18px;
	color: #EFBB95;
	letter-spacing: 0.03em;
}

@media screen and ( min-height: 350px ) {
  .bedroom {
     margin-left: -400px;
  }
}

@media screen and ( min-height: 450px ) {
  .bedroom {
     margin-left: -450px;
  }
}

@media screen and ( min-height: 600px ) {
  .bedroom {
    margin-top: 10%;
  }
  p {
    font-size: 36px;
    margin-top: 225px;
  }
}

              
            
!

JS

              
                var $nb = $(".moveup"),
    $t1 = $(".t-1"),
    $t2 = $(".t-2"),
		$t3 = $(".t-3"),
		$t4 = $(".t-4"),
		$t5 = $(".t-5"),
		$path = [{x:-150, y:20}, {x:-75, y:40}, {x:0, y:60}];

TweenMax.set("p, #mstar, #lstar", {perspective:400});
TweenMax.set("p, .moveup", {visibility:"visible"});

// introvert
function sceneOne() {
  var tl = new TimelineLite();
  sT = new SplitText($t1, {type:"words"});
  sT2 = new SplitText($t2, {type:"chars, words"});
  
tl.staggerFrom(sT.words, 1, {opacity:0, rotationY:-90, ease:Circ.easeOut}, 0.3, "+=1")
.staggerTo(sT.words, 0.8, {rotationY:90, opacity:0, ease:Power4.easeIn}, 0.1, "+=0.5")
.staggerFrom(sT2.chars, 1, {opacity:0, rotationY:-90, y:-10, ease:Elastic.easeOut}, 0.05, "+=0.5")
.staggerTo(sT2.words, 0.8, {rotation:180, scale:0, opacity:0, ease:Back.easeIn}, 0.1, "+=0.5")
.from($t3, 1, {opacity:0, ease:Back.easeOut})
.to($t3, 0.75, {opacity:0, ease:Back.easeOut}, "+=0.75")
;

  
return tl;
}

// show
function sceneTwo() {
  var tl = new TimelineLite();
	sT4 = new SplitText($t4, {type:"chars, lines"});
  
  tl.add("bringin");
	tl.to($nb, 7, {autoAlpha:1, ease:Back.easeOut}, "bringin")
	.from($("#objects"), 2, {scale:0, rotation:120, transformOrigin:"50% 50%", ease:Expo.easeOut}, "bringin")
	.from($("#lines"), 3, {autoAlpha:1, scale:0, rotation:-500, transformOrigin:"50% 50%", ease:Back.easeOut}, "bringin")
	.staggerFrom(sT4.chars, 1, {opacity:0, rotationY:-90, ease:Circ.easeOut}, 0.1, "bringin+=1")
  .staggerTo(sT4.lines, 1.5, {rotationY:-90, scale:0, bezier:$path, opacity:0, ease:Power4.easeIn}, 0.1, "bringin+=5")
	.staggerFrom($("#lines line"), 5, {scale:0, rotation:-10, transformOrigin:"50%", ease:Back.easeOut}, 0.1, "bringin=+2")
	.staggerFromTo($("#motorcycle path, #ball path, #squiggle path, #elephant path"), 1.5, { drawSVG: '0' }, { drawSVG: true }, 0.01, "bringin=+3")
	.fromTo($("#bstar, #lstar, #lstar2, #lines line"), 8, { drawSVG: '0' }, { drawSVG: true }, "bringin=+1")
	;
  
return tl;
}


// away
function sceneThree() {
  var tl = new TimelineLite();
  
  tl.add("bringout-=16");
	tl.staggerFromTo($("#squiggle path"), 1.5, { drawSVG: true }, { drawSVG: '0' }, 0.01, "bringout")
	.to($("#objects"), 3, {autoAlpha:0, scale:4, rotation:90, transformOrigin:"50% 50%", ease:Back.easeIn}, "bringout")
	.fromTo($("#bstar, #lstar, #lstar2, #lines line"), 8, { drawSVG: true }, { drawSVG: '0' }, "bringout")
	.to($("#lines"), 3, {autoAlpha:0, scale:4, rotation:-500, transformOrigin:"50% 50%", ease:Back.easeIn}, "bringout")
	.to($nb, 4, {opacity:0.7, ease:Expo.easeIn}, "bringout")
	.to($t5, 6, {opacity:0.85, y:10, scale:1, ease:Expo.easeOut}, "bringout+=4")
	;
  
return tl;
}

var master = new TimelineLite();
$(document).ready(master)
master.add(sceneOne(), "scene1")
      .add(sceneTwo(), "scene2")
			.add(sceneThree(), "scene3");

//master.seek("scene2");
              
            
!
999px

Console