cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

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.

Quick-add: + add another resource

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.

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.

            
              <link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,700" rel="stylesheet" type="text/css">
<svg id="svg-source" height="0" version="1.1" xmlns="http://www.w3.org/2000/svg" style="position:absolute; margin-left: -100%" xmlns:xlink="http://www.w3.org/1999/xlink">

<g id="close-icon">
    <path d="M0.014,1.778L1.79,0.001l30.196,30.221l-1.778,1.777L0.014,1.778z"/>
    <path d="M1.79,31.999l-1.776-1.777L30.208,0.001l1.778,1.777L1.79,31.999z"/>
  </g>
</svg>
    <div class="look">Look Ma! I broke that HTML!</div><a href="https://twitter.com/legomushroom" class="by"></a>
    <div id="js-show-modal" class="launch-button">show modal
      <div class="launch-button__glare"></div>
    </div>
    <div id="js-modal-overlay" class="modal-overlay"></div>
    <div id="js-modal-holder" class="modal-holder">
      <div id="js-hint1" class="hint hint--1">play with the form<br> to be sure it is just<br>a plain HTML</div>
      <div id="js-hint2" class="hint hint--2">then hit<br> the close icon</div>
      <div id="js-effect" style="outline1: 1px solid red" class="effect">
        <div class="effect__burst">
          <svg viewBox="0 0 300 300" width="300" height="300" id="js-burst">
            <g id="Group" sketch:type="MSLayerGroup" transform="translate(2.000000, 2.000000)">
              <path d="M119.843557,132.665423 L142.438936,241.234321" stroke="#FC46AD" stroke-width="2" transform="translate(131.141247, 186.949872) rotate(9.000000) translate(-131.141247, -186.949872) "></path>
              <path d="M120.923275,136.327807 L194.055085,223.544529" stroke="#D0D202" stroke-width="2" transform="translate(157.489180, 179.936168) rotate(9.000000) translate(-157.489180, -179.936168) "></path>
              <path d="M110.892215,7.63766131 L143.724586,126.274355" stroke="#FFE217" stroke-width="2" transform="translate(127.308401, 66.956008) rotate(-165.000000) translate(-127.308401, -66.956008) "></path>
              <path d="M198.35904,105.458064 L161.773069,223.598866" stroke="#B8E986" stroke-width="3" transform="translate(180.066054, 164.528465) rotate(-74.000000) translate(-180.066054, -164.528465) ">          </path>
              <path d="M146.454121,53.5458334 L227.175148,153.69563" stroke="#D0D202" stroke-width="2" transform="translate(186.814634, 103.620732) rotate(-74.000000) translate(-186.814634, -103.620732) ">          </path>
              <path d="M94.4127006,27.0036828 L46.0682754,156.269505" stroke="#51CAD7" stroke-width="3" transform="translate(70.240488, 91.636594) rotate(-257.000000) translate(-70.240488, -91.636594) ">          </path>
              <path d="M29.3969741,113.63349 L113.205038,207.338224" stroke="#FC3F6B" stroke-width="2" transform="translate(71.301006, 160.485857) rotate(-257.000000) translate(-71.301006, -160.485857) ">          </path>
              <path d="M125.792,38.3112087 L198.92381,125.527931" stroke="#D0D202" stroke-width="2" transform="translate(162.357905, 81.919570) rotate(-104.000000) translate(-162.357905, -81.919570) ">          </path>
              <path d="M43.4006609,130.173225 L130.540432,224.973356" stroke="#FC46AD" stroke-width="2" transform="translate(86.970546, 177.573291) rotate(-278.000000) translate(-86.970546, -177.573291) ">          </path>
              <path d="M157.646537,8.08731537 L121.060566,126.228117" stroke="#B8E986" stroke-width="3" transform="translate(139.353552, 67.157716) rotate(-187.000000) translate(-139.353552, -67.157716) ">          </path>
              <path d="M139.340711,132.100895 L90.9962855,261.366717" stroke="#51CAD7" stroke-width="3" transform="translate(115.168498, 196.733806) rotate(-10.000000) translate(-115.168498, -196.733806) ">          </path>
              <path d="M136.22617,122.003677 L220.034234,215.708411" stroke="#FC3F6B" stroke-width="2" transform="translate(178.130202, 168.856044) rotate(-10.000000) translate(-178.130202, -168.856044) "></path>
            </g>
          </svg>
        </div>
        <div class="effect__circle">
          <svg viewBox="0 0 100 100" width="100" height="100">
            <circle cx="50" cy="50" fill="none" id="js-circle"></circle>
          </svg>
        </div>
        <div class="effect__line effect__line--1">
          <svg viewBox="0 0 4 900" width="4" height="900">
            <defs>
              <g id="proto-line" class="js-line">
                <line x1="2" x2="2" y1="0" y2="900" stroke="red" stroke-dasharray="900 1800" stroke-dashoffset="900"></line>
                <line x1="2" x2="2" y1="0" y2="900" stroke="red" stroke-dasharray="900 1800" stroke-dashoffset="900"></line>
                <line x1="2" x2="2" y1="0" y2="900" stroke="red" stroke-dasharray="900 1800" stroke-dashoffset="900"></line>
              </g>
            </defs>
            <use xlink:href="#proto-line" width="4" height="900"></use>
          </svg>
        </div>
        <div class="effect__line effect__line--2">
          <svg viewBox="0 0 4 900" width="4" height="900">
            <use xlink:href="#proto-line" width="4" height="900"></use>
          </svg>
        </div>
        <div class="effect__line effect__line--3">
          <svg viewBox="0 0 4 900" width="4" height="900">
            <use xlink:href="#proto-line" width="4" height="900"></use>
          </svg>
        </div>
        <div class="effect__line effect__line--4">
          <svg viewBox="0 0 4 900" width="4" height="900">
            <use xlink:href="#proto-line" width="4" height="900"></use>
          </svg>
        </div>
      </div>
      <form1 action="" id="js-modal" class="modal">
        <div id="js-close-button" class="modal__close">
          <div id="" title="" class="icon ">
            <svg viewBox="0 0 32 32">
              <use xlink:href="#close-icon"></use>
            </svg>
          </div>
        </div>
        <div class="modal__header">Log In</div>
        <div class="modal__description">this is dumb modal window, click × to close it</div>
        <div class="modal__section">
            <div class="input-with-label">
              <input id="name" type="text" class="input-with-label__input">
              <label for="name" class="input-with-label__label">username or email
                <div class="input-with-label__label__corner"></div>
              </label>
            </div>
        </div>
        <div class="modal__section">
            <div class="input-with-label">
              <input id="password" type="password" class="input-with-label__input">
              <label for="password" class="input-with-label__label">password
                <div class="input-with-label__label__corner"></div>
              </label>
            </div>
        </div>
        <div class="modal__section grid grid--sliced grid--gutter-x2">
          <div class="grid-bit grid-bit--14-20">
            <button type="submit">log in</button>
          </div>
          <div class="grid-bit grid-bit--6-20">
            <button class="button--grey">cancel</button>
          </div>
        </div>
      </form1>
      <svg style="display:none">
        <image width="480" height="450" xlink:href="" id="proto-image" class="js-proto-image"></image>
      </svg>
      <div id="js-break-parts" class="break-parts">
        <div id="js-svg-overlay" class="svg-overlay">
          <svg viewBox="0 0 480 450" id="js-svg1">
            <clipPath id="clip1">
              <path d="M0,450.575574 L0,0 L424.903452,0 L452.375,28.5599486 L20.5087638,460.426185 L0,450.575574 Z"></path>
            </clipPath>
            <use xlink:href="#proto-image" clip-path="url(#clip1)" id="js-image1"></use>
          </svg>
        </div>
        <div class="svg-overlay svg-overlay--2">
          <svg viewBox="0 0 480 450" id="js-svg2">
            <clipPath id="clip2">
              <path d="M452.214614,28.6494713 L424.309513,0 L482.040672,0 L452.214614,28.6494713 Z"></path>
            </clipPath>
            <use xlink:href="#proto-image" clip-path="url(#clip2)" id="js-image2"></use>
          </svg>
        </div>
        <div class="svg-overlay svg-overlay--3">
          <svg viewBox="0 0 480 450" id="js-svg3">
            <clipPath id="clip3">
              <path d="M452.320312,28.526424 L482,58 L482,0.066291362 L452.320312,28.526424 Z"></path>
            </clipPath>
            <use xlink:href="#proto-image" clip-path="url(#clip3)" id="js-image3"></use>
          </svg>
        </div>
        <div class="svg-overlay">
          <svg viewBox="0 0 480 450" id="js-svg4">
            <clipPath id="clip4">
              <path d="M452.270844,28.4954427 L482,57.8942871 L482,451 L29.2740886,450.99999 L452.270844,28.4954427 Z"></path>
            </clipPath>
            <use xlink:href="#proto-image" clip-path="url(#clip4)" id="js-image4"></use>
          </svg>
        </div>
      </div>
    </div>
            
          
!
            
              // VARS
c-black = #222
c-grey  = #CECECE
PX = (1/16)rem
gs = 10*PX
BR = 6*PX

// MIXINS
fly()
  margin-left  auto
  margin-right auto
clearfix()
  zoom: 1
  &:after,
  &:before
    content ''
    display table
  &:after
    clear both
rect(size)
  width size
  height size
nw(position=0)
  top   position
  left  position
ne(position=0)
  top   position 
  right   position
sw(position=0)
  bottom  position
  left  position
se(position=0)
  bottom  position
  right   position
  
// GRID
// Gutter size
gls = gs
gutterSizes = 10
gridSize = 20
part = (100/gridSize)%
.grid
  clearfix()
  .grid-bit
    float left
    padding-left gls
    padding-right: (gls/2)
    &:last-of-type
      padding-right gls
    & + .grid-bit
      padding-left: (gls/2)
  // gutters
  for i in 2..gutterSizes
    &--gutter-x{i}
      .grid-bit
        padding-left i*gls
        padding-right: (i*gls/2)
        &:last-of-type
          padding-right i*gls
        & + .grid-bit
          padding-left: (i*gls/2)
  &--sliced
    .grid-bit
      &:first-of-type
        padding-left 0
      &:last-of-type
        padding-right 0 
.grid-bit
  for i in 1..gridSize
    &--{i}-{gridSize}
      width i*part
 
// STYLES
*
  box-sizing border-box

.hint
  font-size 14*PX
  line-height 24*PX 
  color white
  position absolute
  letter-spacing PX
  opacity 0
  &--1
    width 16*gs
    top  24*gs
    left -19*gs
    padding-top 2.8*gs 
    background transparent url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iNzVweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgNzUgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPlNsaWNlIDE8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJQYXRoLTY0LSstUGF0aC02NiIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzcuNTAwMDAwLCA4LjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtMzcuNTAwMDAwLCAtOC4wMDAwMDApIHRyYW5zbGF0ZSgxLjAwMDAwMCwgMS4wMDAwMDApIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiI+ICAgICAgICAgICAgPHBhdGggZD0iTTEuODMxOTg3OTgsMS4wNjk0OTI1MiBMMS4zODUyNTM5MSw1LjMyMTc3NzM0IEw1LjQyMDQxMDE2LDUuNjkyODcxMDkiIGlkPSJQYXRoLTY0IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjQwMjgzMiwgMy4zODExODIpIHJvdGF0ZSgyMC4wMDAwMDApIHRyYW5zbGF0ZSgtMy40MDI4MzIsIC0zLjM4MTE4MikgIj48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTIuMDY2NDA2MjUsNC4xMzY3MTg3NSBDMi4wNjY0MDYyNSw0LjEzNjcxODc1IDMxLjY4MTI4MDEsLTUuMzAxMjE2NTggNzIuNzE2MzA4NiwxMy45OTY1ODIiIGlkPSJQYXRoLTY1IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=') no-repeat right top
  &--2
    right -16*gs
    top   -2*gs
    width 15*gs
    padding-top gs
    padding-left gs
    text-align right 
    background transparent url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iNzRweCIgaGVpZ2h0PSIxOHB4IiB2aWV3Qm94PSIwIDAgNzQgMTgiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPlNsaWNlIDE8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJQYXRoLTY0LSstUGF0aC02NSIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMS4wMDAwMDAsIDEuMDAwMDAwKSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjIiPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLjgzMTk4Nzk3NywzLjA2OTQ5MjUyIEwwLjM4NTI1MzkwNiw3LjMyMTc3NzM0IEw0LjQyMDQxMDE2LDcuNjkyODcxMDkiIGlkPSJQYXRoLTY0IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTEuMDY2NDA2MjUsNi4xMzY3MTg3NSBDMS4wNjY0MDYyNSw2LjEzNjcxODc1IDMzLjM1NTQ2ODgsLTEyLjU1NTY2NDEgNzEuNzE2MzA4NiwxNS45OTY1ODIiIGlkPSJQYXRoLTY1IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=') no-repeat left top    

body, html
  font-family OpenSans, 'Open Sans', sans-serif
  width 100%
  height 100%
  overflow hidden

body
  background transparent url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iNTA0cHgiIGhlaWdodD0iNDMxcHgiIHZpZXdCb3g9IjAgMCA1MDQgNDMxIiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIj4gICAgICAgIDx0aXRsZT5icmVhay1tb2RhbC1zY3JlZW48L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxwYXRoIGQ9Ik0xNDksMTIxLjYxNzk3NiBMMTYzLjAyMzA5NywxMjEuNjE3OTc2IEwxNjMuMDIzMDk3LDEzNi42MDk5MjggTDE3Ny4yNDY5ODQsMTM2LjYwOTkyOCBMMTc3LjI0Njk4NCwxNTEuMDIzNDciIGlkPSJQYXRoLTEwIiBzdHJva2U9IiNGQjNENkEiIHN0cm9rZS13aWR0aD0iMiIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgPHBhdGggZD0iTTI5NS43OTc3MTIsMjUzIEwzMDEuODU1NDg3LDI1MyBMMzAxLjg1NTQ4NywyNTkuNDc2MzA2IEwzMDgsMjU5LjQ3NjMwNiBMMzA4LDI2NS43MDI3NDciIGlkPSJQYXRoLTE2IiBzdHJva2U9IiM5QzUwODkiIHN0cm9rZS13aWR0aD0iMiIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzAxLjg5ODg1NiwgMjU5LjM1MTM3Mykgcm90YXRlKC0xODAuMDAwMDAwKSB0cmFuc2xhdGUoLTMwMS44OTg4NTYsIC0yNTkuMzUxMzczKSAiPjwvcGF0aD4gICAgICAgIDxwYXRoIGQ9Ik03My41NTU1NDA0LDIwNi4xNzE4NzUgTDY3Ljg0ODUwOTIsMTk2LjUgTDc5LjQ4NTIyNzksMTk2IEw3My41NTU1NDA0LDIwNi4xNzE4NzUgWiIgaWQ9IlBhdGgtMTEiIHN0cm9rZT0iIzlENTg4RCIgc3Ryb2tlLXdpZHRoPSIyIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICA8cGF0aCBkPSJNNzMuNTU1NTQwNCwyMDYuMTcxODc1IEw2Ny44NDg1MDkyLDE5Ni41IEw3OS40ODUyMjc5LDE5NiBMNzMuNTU1NTQwNCwyMDYuMTcxODc1IFoiIGlkPSJQYXRoLTIxIiBzdHJva2U9IiM5RDU4OEQiIHN0cm9rZS13aWR0aD0iMiIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgPHBhdGggZD0iTTE4OS43MDcwMzEsMzg5LjE3MTg3NSBMMTg0LDM3OS41IEwxOTUuNjM2NzE5LDM3OSBMMTg5LjcwNzAzMSwzODkuMTcxODc1IFoiIGlkPSJQYXRoLTIyIiBzdHJva2U9IiM5RDU4OEQiIHN0cm9rZS13aWR0aD0iMiIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTg5LjgxODM1OSwgMzg0LjA4NTkzOCkgcm90YXRlKDk2LjAwMDAwMCkgdHJhbnNsYXRlKC0xODkuODE4MzU5LCAtMzg0LjA4NTkzOCkgIj48L3BhdGg+ICAgICAgICA8cGF0aCBkPSJNMzk5LjA3MDMxMiwzMDkuNSBMMzkzLjM2MzI4MSwyOTkuODI4MTI1IEw0MDUsMjk5LjMyODEyNSBMMzk5LjA3MDMxMiwzMDkuNSBaIiBpZD0iUGF0aC0yMCIgc3Ryb2tlPSIjQjhFOTg2IiBzdHJva2Utd2lkdGg9IjIiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDM5OS4xODE2NDEsIDMwNC40MTQwNjIpIHJvdGF0ZSgtMTgwLjAwMDAwMCkgdHJhbnNsYXRlKC0zOTkuMTgxNjQxLCAtMzA0LjQxNDA2MikgIj48L3BhdGg+ICAgICAgICA8Y2lyY2xlIGlkPSJPdmFsLTEiIHN0cm9rZT0iIzUxQ0FEOCIgc3Ryb2tlLXdpZHRoPSIyIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIiBjeD0iMTY1LjQ3MjQ0NyIgY3k9IjIyOS4yOTcyNTMiIHI9IjciPjwvY2lyY2xlPiAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC04IiBzdHJva2U9IiM5RDU4OEQiIHN0cm9rZS13aWR0aD0iMiIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgY3g9IjQ2NS40NzI0NDciIGN5PSIxMzYuMzIwNzIzIiByPSI1LjMzOTYzODUiPjwvY2lyY2xlPiAgICAgICAgPGNpcmNsZSBpZD0iT3ZhbC0zIiBzdHJva2U9IiM1MUNBRDciIHN0cm9rZS13aWR0aD0iMiIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgY3g9IjI2MC41IiBjeT0iMzEuNSIgcj0iNy41Ij48L2NpcmNsZT4gICAgICAgIDxnIGlkPSJHcm91cCIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjQ0LjAwMDAwMCwgMTUzLjAwMDAwMCkiIHN0cm9rZT0iI0ZGRTIxNyIgc3Ryb2tlLXdpZHRoPSIyIj4gICAgICAgICAgICA8cGF0aCBkPSJNMTUuOTA5MDU2LDEwLjY1NjI4MjIgTDE1LjkwOTA1NiwwLjkwMzU0MDM1NSIgaWQ9IlBhdGgtMTIiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMTUuOTA5MDU2LDIxLjA3ODE1NzIgTDE1LjkwOTA1NiwyOS43NzI1NzU2IiBpZD0iUGF0aC0xMyIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0yMC4zOTM0MzEsMTYuMDIzNDY5NyBMMzAsMTYuMDIzNDY5NyIgaWQ9IlBhdGgtMTQiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNOS41OTI2NDk3OSwxNi4wMjM0Njk3IEwwLjEzMTg1MjQwNywxNi4wMjM0Njk3IiBpZD0iUGF0aC0xNSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgPC9nPiAgICAgICAgPHBhdGggZD0iTTIwNCwyODUgQzIwNCwyODguODY1OTkzIDIwNy4xMzQwMDcsMjkyIDIxMSwyOTIgQzIxNC44NjU5OTMsMjkyIDIxOCwyODguODY1OTkzIDIxOCwyODUiIGlkPSJPdmFsLTIiIHN0cm9rZT0iI0ZCM0Q2QSIgc3Ryb2tlLXdpZHRoPSIyIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICA8cGF0aCBkPSJNNTEsMTAxLjUgQzUxLDk3LjYzNDAwNjggNDcuODY1OTkzMiw5NC41IDQ0LDk0LjUgQzQwLjEzNDAwNjgsOTQuNSAzNyw5Ny42MzQwMDY4IDM3LDEwMS41IiBpZD0iT3ZhbC05IiBzdHJva2U9IiNGQjNENkEiIHN0cm9rZS13aWR0aD0iMiIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgPGcgaWQ9IndhdmUiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMxOC4wMDAwMDAsIDk0LjAwMDAwMCkiIHN0cm9rZT0iI0I4RTk4NiIgc3Ryb2tlLXdpZHRoPSIyIj4gICAgICAgICAgICA8cGF0aCBkPSJNMCw0IEMwLDYuNzYxNDIzNzUgMi4wMTQ3MTg2Myw5IDQuNSw5IEM2Ljk4NTI4MTM3LDkgOSw2Ljc2MTQyMzc1IDksNCIgaWQ9Ik92YWwtNCIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xOCw0IEMxOCw2Ljc2MTQyMzc1IDIwLjAxNDcxODYsOSAyMi41LDkgQzI0Ljk4NTI4MTQsOSAyNyw2Ljc2MTQyMzc1IDI3LDQiIGlkPSJPdmFsLTYiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMTgsNSBDMTgsMi4yMzg1NzYyNSAxNS45ODUyODE0LDEuMDc4NTAyMzdlLTE1IDEzLjUsNC40NDA4OTIxZS0xNiBDMTEuMDE0NzE4Niw0LjQ0MDg5MjFlLTE2IDksMi4yMzg1NzYyNSA5LDUiIGlkPSJPdmFsLTUiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMzYsNSBDMzYsMi4yMzg1NzYyNSAzMy45ODUyODE0LDEuMDc4NTAyMzdlLTE1IDMxLjUsNC40NDA4OTIxZS0xNiBDMjkuMDE0NzE4Niw0LjQ0MDg5MjFlLTE2IDI3LDIuMjM4NTc2MjUgMjcsNSIgaWQ9Ik92YWwtNyIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgPC9nPiAgICAgICAgPGcgaWQ9IndhdmUtMiIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTA0LjAwMDAwMCwgMzA5LjUwMDAwMCkgcm90YXRlKC0zMzAuMDAwMDAwKSB0cmFuc2xhdGUoLTEwNC4wMDAwMDAsIC0zMDkuNTAwMDAwKSB0cmFuc2xhdGUoODYuMDAwMDAwLCAzMDUuMDAwMDAwKSIgc3Ryb2tlPSIjQjhFOTg2IiBzdHJva2Utd2lkdGg9IjIiPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLDQgQzAsNi43NjE0MjM3NSAyLjAxNDcxODYzLDkgNC41LDkgQzYuOTg1MjgxMzcsOSA5LDYuNzYxNDIzNzUgOSw0IiBpZD0iT3ZhbC00IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTE4LDQgQzE4LDYuNzYxNDIzNzUgMjAuMDE0NzE4Niw5IDIyLjUsOSBDMjQuOTg1MjgxNCw5IDI3LDYuNzYxNDIzNzUgMjcsNCIgaWQ9Ik92YWwtNiIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xOCw1IEMxOCwyLjIzODU3NjI1IDE1Ljk4NTI4MTQsMS4wNzg1MDIzN2UtMTUgMTMuNSw0LjQ0MDg5MjFlLTE2IEMxMS4wMTQ3MTg2LDQuNDQwODkyMWUtMTYgOSwyLjIzODU3NjI1IDksNSIgaWQ9Ik92YWwtNSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zNiw1IEMzNiwyLjIzODU3NjI1IDMzLjk4NTI4MTQsMS4wNzg1MDIzN2UtMTUgMzEuNSw0LjQ0MDg5MjFlLTE2IEMyOS4wMTQ3MTg2LDQuNDQwODkyMWUtMTYgMjcsMi4yMzg1NzYyNSAyNyw1IiBpZD0iT3ZhbC03IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICA8L2c+ICAgICAgICA8ZyBpZD0iUGF0aC0xNy0rLVBhdGgtMTgtKy1QYXRoLTE5IiBza2V0Y2g6dHlwZT0iTVNMYXllckdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2LjAwMDAwMCwgMjY4LjAwMDAwMCkiIHN0cm9rZT0iI0ZGRjM5MCIgc3Ryb2tlLXdpZHRoPSIyIj4gICAgICAgICAgICA8cGF0aCBkPSJNMi43MTY3OTY4OCwxNC45NDcyNjU2IEw2LjczNzc5Mjk3LDcuNjkxNDA2MjUgTDExLjQwMzgwODYsMTQuODYzMjgxMiIgaWQ9IlBhdGgtMTciIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMTMuNDQ2Nzc3Myw2LjI5Njg3NSBMNi42MTI3OTI5Nyw3LjIyMzYzMjgxIEwwLjIwNjA1NDY4OCw2LjUwNTg1OTM4IiBpZD0iUGF0aC0xOCIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik03LjEwMDA5NzY2LDAuNDE3OTY4NzUgTDYuODUwMDk3NjYsNy41OTg2MzI4MSIgaWQ9IlBhdGgtMTkiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgICAgIDxnIGlkPSJQYXRoLTE3LSstUGF0aC0xOC0rLVBhdGgtMjAiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQyMy4wMDAwMDAsIDIwOC4wMDAwMDApIiBzdHJva2U9IiM1MUNBRDciIHN0cm9rZS13aWR0aD0iMiI+ICAgICAgICAgICAgPHBhdGggZD0iTTIuNzE2Nzk2ODgsMTQuOTQ3MjY1NiBMNi43Mzc3OTI5Nyw3LjY5MTQwNjI1IEwxMS40MDM4MDg2LDE0Ljg2MzI4MTIiIGlkPSJQYXRoLTE3IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTEzLjQ0Njc3NzMsNi4yOTY4NzUgTDYuNjEyNzkyOTcsNy4yMjM2MzI4MSBMMC4yMDYwNTQ2ODgsNi41MDU4NTkzOCIgaWQ9IlBhdGgtMTgiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNNy4xMDAwOTc2NiwwLjQxNzk2ODc1IEw2Ljg1MDA5NzY2LDcuNTk4NjMyODEiIGlkPSJQYXRoLTE5IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICA8L2c+ICAgICAgICA8ZyBpZD0iR3JvdXAiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg2LjAwMDAwMCwgMzUuMDAwMDAwKSIgc3Ryb2tlPSIjODUyQzZFIiBzdHJva2Utd2lkdGg9IjIiPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0zLjc5NjM4NjcyLDAuNjgzNTkzNzUgTDYuMjI4NzY3NzIsMy4xMTU5NzQ3NSBMOC42NTg5NDY3NiwwLjY4NTc5NTcwMiBNMy43OTYzODY3MiwwLjY4MzU5Mzc1IEw2LjIyODc2NzcyLDMuMTE1OTc0NzUgTDguNjU4OTQ2NzYsMC42ODU3OTU3MDIiIGlkPSJQYXRoLTI5IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTguNjU4OTQ2NzYsMTIuNzYzNDQ1MyBMNi4yMjY1NjU3NywxMC4zMzEwNjQzIEwzLjc5NjM4NjcyLDEyLjc2MTI0MzMgTTguNjU4OTQ2NzYsMTIuNzYzNDQ1MyBMNi4yMjY1NjU3NywxMC4zMzEwNjQzIEwzLjc5NjM4NjcyLDEyLjc2MTI0MzMiIGlkPSJQYXRoLTMyIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTAuNTgwMTk2MjE5LDkuMzMxMDY0MjcgTDMuMDEyNTc3MjIsNi44OTg2ODMyNyBMMC41ODIzOTgxNzIsNC40Njg1MDQyMyBNMC41ODAxOTYyMTksOS4zMzEwNjQyNyBMMy4wMTI1NzcyMiw2Ljg5ODY4MzI3IEwwLjU4MjM5ODE3Miw0LjQ2ODUwNDIzIiBpZD0iUGF0aC0zMSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMi40NDM4NTcyLDQuNDY4NTA0MjMgTDEwLjAxMTQ3NjIsNi45MDA4ODUyMyBMMTIuNDQxNjU1Myw5LjMzMTA2NDI3IE0xMi40NDM4NTcyLDQuNDY4NTA0MjMgTDEwLjAxMTQ3NjIsNi45MDA4ODUyMyBMMTIuNDQxNjU1Myw5LjMzMTA2NDI3IiBpZD0iUGF0aC0zMCIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgPC9nPiAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS0zIiBzdHJva2U9IiNGQjNFNjciIHN0cm9rZS13aWR0aD0iMiIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCIgeD0iMzU3LjUiIHk9IjE3Ni41IiB3aWR0aD0iMTUiIGhlaWdodD0iMTUiPjwvcmVjdD4gICAgICAgIDxnIGlkPSJHcm91cCIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzk3LjAwMDAwMCwgMzkuMDAwMDAwKSIgc3Ryb2tlPSIjRkMzRjZCIiBzdHJva2Utd2lkdGg9IjIiPiAgICAgICAgICAgIDxwYXRoIGQ9Ik00LjA1NzEyODkxLDcuNTk3MTY3OTcgTDAuMDA3ODEyNSw0LjQ0Njc3NzM0IiBpZD0iUGF0aC0zMyIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik0xMC40NjE5MTQxLDEyLjUxMDc0MjIgTDEzLjY3Mjg1MTYsMTUuMjMwNDY4OCIgaWQ9IlBhdGgtMzQiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNNi4xOTA0Mjk2OSw1LjUzNzEwOTM4IEw2LjA5NzY1NjI1LDAuNjg2MDM1MTU2IiBpZD0iUGF0aC0zNSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik05LjQyNTI5Mjk3LDYuNTM3MTA5MzggTDEyLjY3Mjg1MTYsMi42NjQ1NTA3OCIgaWQ9IlBhdGgtMzYiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMTEuNDc3MDUwOCw4Ljk4NTM1MTU2IEwxNS43OTU4OTg0LDguOTUyNjM2NzIiIGlkPSJQYXRoLTM3IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICA8L2c+ICAgICAgICA8cGF0aCBkPSJNMzE1LDM1Mi44MjQyMTkgTDMyMS4yMTY0NywzNTkuMDQwNjg4IEwzMjcuMTcyNzg4LDM1My4wODQzNyIgaWQ9IlBhdGgtNDciIHN0cm9rZT0iIzlENTg4RCIgc3Ryb2tlLXdpZHRoPSIyIiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICA8ZyBpZD0iUGF0aC00OC0rLVBhdGgtNDkiIHNrZXRjaDp0eXBlPSJNU0xheWVyR3JvdXAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDQzNy4wMDAwMDAsIDM2MS4wMDAwMDApIiBzdHJva2U9IiNGQjNENkEiIHN0cm9rZS13aWR0aD0iMiI+ICAgICAgICAgICAgPHBhdGggZD0iTTAuMTA3NDIxODc1LDE0Ljc2NzU3ODEgTDE0Ljg0MDAwMTEsMC4wNzQ2NzA1MDA5IiBpZD0iUGF0aC00OCIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgICAgIDxwYXRoIGQ9Ik01LjEwNzQyMTg4LDE4Ljc2NzU3ODEgTDE5LjUyODU2OTIsNC40MTIwMjMyNSIgaWQ9IlBhdGgtNDkiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgIDwvZz4gICAgICAgIDxnIGlkPSJQYXRoLTUwLSstUGF0aC01MSIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjYuMDAwMDAwLCAzNzEuMDAwMDAwKSIgc3Ryb2tlPSIjNTFDQUQ3IiBzdHJva2Utd2lkdGg9IjIiPiAgICAgICAgICAgIDxwYXRoIGQ9Ik03LjIyMDAxMDkxLDAuNTczNzE5MjI0IEw3LjIyMDAxMDkxLDEzLjI3NjQ2NiIgaWQ9IlBhdGgtNTAiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPjwvcGF0aD4gICAgICAgICAgICA8cGF0aCBkPSJNMC41MjYzNzA2MjYsNi45NTI5ODc5OCBMMTIuNzI4NjU4Myw2Ljk1Mjk4Nzk4IiBpZD0iUGF0aC01MSIgc2tldGNoOnR5cGU9Ik1TU2hhcGVHcm91cCI+PC9wYXRoPiAgICAgICAgPC9nPiAgICA8L2c+PC9zdmc+') repeat left top
  
.look
  position absolute
  z-index 1
  color #FE3A64
  top 50%
  left 50%
  margin-left -10.5*gs 
  margin-top  -5.5*gs
  letter-spacing .5*PX
  font-size 14*PX
  text-align center
  font-weight bold 

{root = '.launch-button'}
  font-size 16px
  color white
  background-color #4ACAD9
  box-shadow 0 0 0 62*PX white
  border-radius 6*PX
  text-align center
  width = 220*PX
  width width
  height = 45*PX
  height      height
  line-height height
  font-size 1.4*gs 
  font-weight 600
  letter-spacing 2*PX
  position absolute
  overflow hidden
  display block
  text-transform uppercase
  left 50%
  top 50%
  margin-left -(width/2) 
  margin-top  -(height/2) 
  &:hover
    cursor pointer
    {root}__glare
      right -35%
      transition all .4s linear
  &:active
    opacity .95
  &__glare
    position absolute
    width 45px
    height 200%
    transform rotate(25deg)
    background-color rgba(255,255,255,.5)
    top -50%
    right 120%
    &:after
      content ''
      display none
      position absolute
      width 20px
      height 100%
      background inherit
      right -15px
      top 0

button, .button
  border 0
  width 100%
  display block
  height 4*gs
  border-radius BR
  font-size 16*PX
  color white
  background c-black
  letter-spacing PX
  outline none
  &:hover
    cursor pointer
    opacity .9
  &--grey
    background c-grey

modalHeight = 45*gs
modalWidth  = 48*gs
.modal-holder
  position absolute
  width  modalWidth
  height modalHeight
  z-index 2
  nw 50%
  margin-left -(modalWidth/2) 
  margin-top  -(modalHeight/2)
  .svg-overlay
    position absolute
    nw 0
    rect 100%
  .break-parts
    rect 100%
    opacity 0
    z-index 0
  .modal
    position absolute
    z-index 2
  .effect
    position absolute
    top -12.2*gs
    left 2*PX
    z-index 4
    display none

.effect
  &__burst
    position absolute
    width  58*PX
    height 58*PX
    left 32.2*gs
    top 2.3*gs
    opacity .5
  &__circle
    position absolute
    left  40*gs
    top   10*gs
    width  10*gs
    height 10*gs
    backface-visibility hidden
  &__line
    backface-visibility hidden
    position absolute
    height 900*PX
    width 4*PX
    left 44.5*gs + 4*PX
    top  15*gs + 0*PX
    transform-origin 50% 0
    &--1
      transform rotate(45deg)
    &--2
      transform rotate(-45deg)
    &--3
      transform rotate(-135deg)
    &--4
      transform rotate(-225deg)

.modal
  background white
  border-radius: 7*PX
  rect 100%
  color c-black
  text-align  center
  letter-spacing PX
  overflow hidden
  display none
  &__close
    position absolute
    ne 2*gs
    display inline-block
    &:before
      content ''
      position absolute
      rect 300%
      nw   -100%
    &:hover
      opacity .75
      cursor pointer
    .icon
      rect 16*PX
      fill c-black
      stroke c-black
  &__header
    font-size 24*PX
    margin-top 8*gs    
  &__description
    font-size 14*PX
    color c-grey
    margin-top 4*gs
    margin-bottom 4*gs 
  &__section
    width 35*gs
    margin-top 2*gs
    fly()
    &:last-of-type
      margin-top 3*gs


{root = '.input-with-label'}
  text-align left
  position relative
  &__input
    height 4*gs
    width 100%
    border 2*PX solid c-black
    border-radius BR
    background transparent
    padding 0 gs
    letter-spacing PX
    font-size 14*PX
    color c-black
    &:hover
      background rgba(c-black, .01)
    &:not(:focus):not(.is-keep-focus).is-fill
      & + {root}__label
        display none
    &:focus, &.is-keep-focus
      outline none
      background rgba(c-black, .01)
      & + {root}__label
        top - 1.8*gs
        left 0
        background c-black
        padding .2*gs .7*gs .4*gs
        font-size gs
        border-top-left-radius  4*PX
        border-top-right-radius 4*PX
        color white
        letter-spacing PX
        .input-with-label__label__corner
          display block
  &__label
    font-size 14*PX
    display block
    position absolute
    color c-grey
    top  1*gs
    left gs

    cursor text
    user-select none
    &__corner
      display none
      position absolute
      left 0
      bottom -4*PX
      rect 0
      border 4*PX solid transparent
      border-left-color c-black

.modal-overlay
  rect 100%
  position absolute
  overflow hidden
  nw 0
  background rgba(c-black,.9)
  z-index 1

.svg-overlay
  backface-visibility hidden
  display none
  &--2
    transform-origin 96% 2%
  &--3
    transform-origin 97% 6%
  svg
    rect 100%
    nw 0
    position absolute

.by
  position absolute
  right   2*gs
  bottom  2*gs
  width   50*PX
  height  50*PX
  border-radius 50%
  background white url() no-repeat center center
  background transparent url() no-repeat center center
  background-image url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNi4wLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCIgWw0KCTwhRU5USVRZIG5zX2V4dGVuZCAiaHR0cDovL25zLmFkb2JlLmNvbS9FeHRlbnNpYmlsaXR5LzEuMC8iPg0KCTwhRU5USVRZIG5zX2FpICJodHRwOi8vbnMuYWRvYmUuY29tL0Fkb2JlSWxsdXN0cmF0b3IvMTAuMC8iPg0KCTwhRU5USVRZIG5zX2dyYXBocyAiaHR0cDovL25zLmFkb2JlLmNvbS9HcmFwaHMvMS4wLyI+DQoJPCFFTlRJVFkgbnNfdmFycyAiaHR0cDovL25zLmFkb2JlLmNvbS9WYXJpYWJsZXMvMS4wLyI+DQoJPCFFTlRJVFkgbnNfaW1yZXAgImh0dHA6Ly9ucy5hZG9iZS5jb20vSW1hZ2VSZXBsYWNlbWVudC8xLjAvIj4NCgk8IUVOVElUWSBuc19zZncgImh0dHA6Ly9ucy5hZG9iZS5jb20vU2F2ZUZvcldlYi8xLjAvIj4NCgk8IUVOVElUWSBuc19jdXN0b20gImh0dHA6Ly9ucy5hZG9iZS5jb20vR2VuZXJpY0N1c3RvbU5hbWVzcGFjZS8xLjAvIj4NCgk8IUVOVElUWSBuc19hZG9iZV94cGF0aCAiaHR0cDovL25zLmFkb2JlLmNvbS9YUGF0aC8xLjAvIj4NCl0+DQo8c3ZnIHZlcnNpb249IjEuMSINCgkgaWQ9IkxheWVyXzEiIHhtbG5zOng9IiZuc19leHRlbmQ7IiB4bWxuczppPSImbnNfYWk7IiB4bWxuczpncmFwaD0iJm5zX2dyYXBoczsiIHhtbG5zOnNrZXRjaD0iaHR0cDovL3d3dy5ib2hlbWlhbmNvZGluZy5jb20vc2tldGNoL25zIg0KCSB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgd2lkdGg9IjM1cHgiIGhlaWdodD0iMzJweCINCgkgdmlld0JveD0iMCAwIDM1IDMyIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAzNSAzMiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8bWV0YWRhdGE+DQoJPHNmdyAgeG1sbnM9IiZuc19zZnc7Ij4NCgkJPHNsaWNlcz48L3NsaWNlcz4NCgkJPHNsaWNlU291cmNlQm91bmRzICBoZWlnaHQ9IjMyIiB3aWR0aD0iMzQuMDU1IiB5PSIxMjguNSIgeD0iMTA2Ljk0NSIgYm90dG9tTGVmdE9yaWdpbj0idHJ1ZSI+PC9zbGljZVNvdXJjZUJvdW5kcz4NCgk8L3Nmdz4NCjwvbWV0YWRhdGE+DQo8ZyBpZD0ibXVzaHJvb20tMiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTEuMDAwMDAwLCAwLjAwMDAwMCkiIHNrZXRjaDp0eXBlPSJNU1NoYXBlR3JvdXAiPg0KCTxwYXRoIGlkPSJGaWxsLTIiIGZpbGw9IiNFNDZBNzUiIGQ9Ik0wLDhoMjR2NEgwVjh6Ii8+DQoJPHBhdGggaWQ9IkZpbGwtMyIgZmlsbD0iI0U0NkE3NSIgZD0iTTQsNGgxNnY0SDRWNHoiLz4NCgk8cGF0aCBpZD0iRmlsbC00IiBmaWxsPSIjRTQ2QTc1IiBkPSJNOCwwaDh2NEg4VjB6Ii8+DQoJPHBhdGggaWQ9IkZpbGwtNSIgZmlsbD0iI0YxQUM4QyIgZD0iTTgsMjBoOHY0SDhWMjB6Ii8+DQoJPHBhdGggaWQ9IkZpbGwtNiIgZmlsbD0iI0I0NjQ3OSIgZD0iTTgsMTZoOHY0SDhWMTZ6Ii8+DQoJPHBhdGggaWQ9IkZpbGwtNyIgZmlsbD0iIzY1NTQ2RSIgZD0iTTgsMTJoOHY0SDhWMTJ6Ii8+DQoJPHBhdGggaWQ9IkZpbGwtOCIgZmlsbD0iI0YxQUM4QyIgZD0iTTgsMjRoOHY4SDhWMjR6Ii8+DQoJPHBhdGggaWQ9IkZpbGwtOSIgZmlsbD0iI0YxQUM4QyIgZD0iTTE0LDhoNHY0aC00Vjh6Ii8+DQoJPHBhdGggaWQ9IkZpbGwtMTAiIGZpbGw9IiNGMUFDOEMiIGQ9Ik04LDRoNHY0SDhWNHoiLz4NCjwvZz4NCjxnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIj4NCgk8cGF0aCBmaWxsPSIjNEE0QTRBIiBkPSJNMy42ODUsMjAuMDE3YzAuNzczLDAsMS4zNzQsMC4yNjQsMS44MDIsMC43OTJjMC40MjgsMC41MjgsMC42NDIsMS4yNzUsMC42NDIsMi4yNDINCgkJcy0wLjIxNiwxLjcxOS0wLjY0NywyLjI1NGMtMC40MzIsMC41MzUtMS4wMzEsMC44MDMtMS43OTcsMC44MDNjLTAuMzgzLDAtMC43MzMtMC4wNy0xLjA1LTAuMjEyDQoJCWMtMC4zMTctMC4xNDItMC41ODMtMC4zNTktMC43OTgtMC42NTNIMS43NzJMMS41ODQsMjZIMC45NDV2LTguMzU3aDAuODkydjIuMDNjMCwwLjQ1NS0wLjAxNCwwLjg2My0wLjA0MywxLjIyNWgwLjA0Mw0KCQlDMi4yNTIsMjAuMzExLDIuODY4LDIwLjAxNywzLjY4NSwyMC4wMTd6IE0zLjU1NiwyMC43NjRjLTAuNjA5LDAtMS4wNDcsMC4xNzQtMS4zMTYsMC41MjNjLTAuMjY5LDAuMzQ5LTAuNDAzLDAuOTM4LTAuNDAzLDEuNzY0DQoJCWMwLDAuODI4LDAuMTM4LDEuNDE5LDAuNDE0LDEuNzc1czAuNzE4LDAuNTM1LDEuMzI3LDAuNTM1YzAuNTQ4LDAsMC45NTYtMC4yLDEuMjI1LTAuNnMwLjQwMy0wLjk3MywwLjQwMy0xLjcyMQ0KCQljMC0wLjc2Ny0wLjEzNC0xLjMzOC0wLjQwMy0xLjcxNFM0LjExOCwyMC43NjQsMy41NTYsMjAuNzY0eiIvPg0KPC9nPg0KPHRleHQgdHJhbnNmb3JtPSJtYXRyaXgoMSAwIDAgMSA3LjI0MDIgMjYpIiBmaWxsPSIjNEE0QTRBIiBmb250LWZhbWlseT0iJ09wZW5TYW5zJyIgZm9udC1zaXplPSIxMSI+IDwvdGV4dD4NCjxnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgICAgIj4NCgk8cGF0aCBmaWxsPSIjNEE0QTRBIiBkPSJNNy4yNTEsMjAuMTEzaDAuOTU2bDEuMjg5LDMuMzU3YzAuMjgzLDAuNzY2LDAuNDU4LDEuMzE5LDAuNTI2LDEuNjU5aDAuMDQzDQoJCWMwLjA0Ni0wLjE4MywwLjE0NC0wLjQ5NSwwLjI5My0wLjkzOGMwLjE0OC0wLjQ0MiwwLjYzNC0xLjgwMiwxLjQ1OC00LjA3OWgwLjk1NmwtMi41Myw2LjcwM2MtMC4yNSwwLjY2Mi0wLjU0MywxLjEzMy0wLjg3OCwxLjQxDQoJCWMtMC4zMzQsMC4yNzctMC43NDYsMC40MTYtMS4yMzIsMC40MTZjLTAuMjcyLDAtMC41NDEtMC4wMy0wLjgwNi0wLjA5MnYtMC43MTRjMC4xOTcsMC4wNDMsMC40MTcsMC4wNjQsMC42NjEsMC4wNjQNCgkJYzAuNjEyLDAsMS4wNDktMC4zNDQsMS4zMTEtMS4wMzFsMC4zMjgtMC44MzhMNy4yNTEsMjAuMTEzeiIvPg0KPC9nPg0KPC9zdmc+DQo=')
  z-index 3



            
          
!
            
              class Main
  constructor:(@o={})->
    @vars()
    @listeners()
  vars:->
    @$effect  = $('#js-effect')
    @$close   = $ '#js-close-button'
    @$modal   = $ '#js-modal'
    @$modalHolder   = $ '#js-modal-holder'
    @$protoImage    = $ '.js-proto-image'
    @$breakParts    = $('#js-break-parts')
    @$modalOverlay  = $('#js-modal-overlay')
    @$hint1         = $('#js-hint1')
    @$hint2         = $('#js-hint2')
    @$burst         = $('#js-burst')
    @$burstPaths    = @$burst.find('path')
    @$showModal     = $('#js-show-modal')
    @$circle        = $('#js-circle')
    @$breakParts    = $('#js-break-parts')
    @$breakOverlays = @$breakParts.find('.svg-overlay')
    @$breakPart1 = @$breakOverlays.eq(0)
    @$breakPart2 = @$breakOverlays.eq(1)
    @$breakPart3 = @$breakOverlays.eq(2)
    @$breakPart4 = @$breakOverlays.eq(3)
    @$svgOverlay = $('.svg-overlay')

    @$lines =  $('.js-line').children()
    @loop = @loop.bind(@); @loop()
    @initEffectTweens(); @showModal(true); @showHints(700)
    isOpera = navigator.userAgent.match(/Opera|OPR\//)
    crack1 = 'http://legomushroom.com/pens-assets/XJjLxe/crack1.wav'
    crack3 = 'http://legomushroom.com/pens-assets/XJjLxe/crack3.mp3'
    url = if !isOpera then crack3 else crack1
    @audio = new Howl urls: [url]

  showHints:(delay)->
    it = @
    HIDE_DELAY  = 5000
    HINT2_DELAY = 200
    @hint1T = new TWEEN.Tween(p:0).to(p:1, 500)
      .onUpdate ->
        it.$hint1.css opacity: @p
      .delay(delay)
      .start()

    @hint2T = new TWEEN.Tween(p:0).to(p:1, 500)
      .onUpdate ->
        it.$hint2.css opacity: @p
      .delay(delay+HINT2_DELAY)
      .start()

    @hintHideT = new TWEEN.Tween(p:0).to(p:1, 500)
      .onUpdate ->
        it.$hint1.css opacity: 1-@p
        it.$hint2.css opacity: 1-@p
      .delay(delay+HINT2_DELAY+HIDE_DELAY)
      .start()


  showModal:(isFirst)->
    if isFirst
      tm = setTimeout =>
        @$modal.find('input').val(''); clearTimeout tm
      , 10
    @initEffectTweens(isFirst); @showModalT.start()

  listeners:->
    @$showModal.on 'click', => @showModal()

    @$modal.on 'keyup', 'input', (e)->
      $it = $(e.target)
      text = $it.val()
      $it.toggleClass 'is-fill', !!text
      if $it.attr('type') is 'text'
        text = text.replace /\s/g, ''
      k = e.keyCode
      if (k> 48 and k< 90) or k in [48,45,32]
        $it.val text

    $input = null
    @$close.on 'mouseleave touchstart', ->
      $input?.removeClass 'is-keep-focus'
      $input = null

    @$close.on 'mouseenter touchstart', =>
      $input = $('input:focus').addClass 'is-keep-focus'
      html2canvas @$modal,
        onrendered: (canvas)=>
          dataURL = canvas.toDataURL()
          @$svgOverlay.css display: 'block'
          @$protoImage.attr 'xlink:href', dataURL

    @$close.on 'click', =>
      @$modal.css display: 'none'
      @$breakParts.css
        'z-index': 2
        opacity: 1
      @$effect.show()
      @launchEffects()
      @audio.play()
      true

  initEffectTweens:(isFirst)->
    it = @
    @s = 1

    for path, i in it.$burstPaths
      len = path.getTotalLength()
      showLen    = @rand(0, ~~len/2)
      showOffset = @rand(0, -~~len)
      path.len = len; path.showLen = showLen
      path.showOffset = showOffset
      path.strokeWidth = @rand(0, 5)
      path.setAttribute 'stroke-dasharray',   "#{showLen} #{3*len}"
      path.setAttribute 'stroke-dashoffset',  showLen
      path.setAttribute 'stroke-linecap',     'round'

    len = 900; colors = ['hotpink', 'yellow', 'cyan']
    @linesT = new TWEEN.Tween(p:0).to(p:1, 900*@s)
      .easing TWEEN.Easing.Exponential.Out
      .onUpdate ->
        p = @p; nP= 1-p; progress = (len)*nP - len*p
        for line, i in it.$lines
          line.setAttribute 'stroke-dashoffset', progress+(i*500)*nP
          line.setAttribute 'stroke',            colors[i]
          line.setAttribute 'stroke-width',      2*nP
        it.$circle.attr
          r: 11*p
          fill: "rgba(#{~~(0+255*p)},#{~~(255-153*p)},#{~~(255-75*p)}, #{nP})"
          'stroke-width': 7*nP

      .onComplete => @$effect.css  display: 'none'

    @burstT = new TWEEN.Tween(p:0).to(p:1, 400*@s)
      .onUpdate ->
        p = @p; nP = 1-p
        for path, i in it.$burstPaths
          path.setAttribute 'stroke-dashoffset', path.showOffset-(path.len*p)
          path.setAttribute 'stroke-width',  path.strokeWidth*nP

    shakeOffset = 50
    @shakeT = new TWEEN.Tween(p:0).to(p:1, 350*@s)
      .onUpdate ->
        p = @p; nP = 1-p
        shake = shakeOffset*nP
        it.$breakParts.css transform: "translate(#{shake}px, #{shake}px)"
        it.$effect.css transform: "translate(#{-.75*shake}px, #{-.5*shake}px)"
      .easing TWEEN.Easing.Elastic.Out

    @shiftT = new TWEEN.Tween(p:0).to(p:1, 1350*@s)
      # .easing TWEEN.Easing.Quadratic.In
      .easing TWEEN.Easing.Sinusoidal.In
      .onUpdate ->
        p = @p; nP = 1-p
        shift = 900*p
        t1 = "translate(#{-shift}px, #{1000*p}px) rotate(#{-50*p}deg)"
        t4 = "translate(0, #{1000*p}px) rotate(#{-15*p}deg)"
        it.$breakPart1.css transform: t1
        it.$breakPart4.css transform: t4
        it.$modalOverlay.css
          transform:  "translate(0, #{50*p})"
          opacity:    nP
      .onComplete =>
        @$modalOverlay.css display: 'none'
        @$breakParts.css   display: 'none'
        @$modalHolder.css  display: 'none'

    @shiftT2 = new TWEEN.Tween(p:0).to(p:1, 1350*@s)
      .onUpdate ->
        p = @p; nP = 1-p
        shift = 900*p
        t2 = "translate(#{-1670*p}px, #{-800*p}px) rotate(#{905*p}deg)"
        t3 = "translate(#{1000*p}px, #{700*p}px) rotate(#{-1500*p}deg)"
        it.$breakPart2.css transform: t2
        it.$breakPart3.css transform: t3

    @showModalT = new TWEEN.Tween(p:0).to(p:1, 800*@s)
      .easing TWEEN.Easing.Exponential.Out
      .onStart =>
        TWEEN.remove(@shiftT); TWEEN.remove(@shiftT2); TWEEN.remove(@shakeT)
        TWEEN.remove(@linesT); TWEEN.remove(@burstT)
        @$modal.css display: 'block', opacity: 0
        @$breakParts.css   display: 'block'
        @$modalHolder.css  display: 'block'
        !isFirst and @$modalOverlay.css display: 'block', opacity: 0
        @$breakPart1.css transform: 'none'
        @$breakPart2.css transform: 'none'
        @$breakPart3.css transform: 'none'
        @$breakPart4.css transform: 'none'
        @$modal.css display: 'block'
        @$breakParts.css 'z-index': 0, opacity: 0
      .onUpdate ->
        p = @p; nP = 1-p
        it.$modal.css opacity: p, transform: "translateY(#{15*nP}px)"
        !isFirst and it.$modalOverlay.css  opacity: p

  launchEffects:->
    @$hint1.hide(); @$hint2.hide()
    @burstT.start(); @linesT.start(); @shiftT.start()
    @shiftT2.start(); @shakeT.start()

  loop:->
    requestAnimationFrame(@loop)
    TWEEN.update()

  rand:(min,max)-> Math.floor((Math.random() * ((max + 1) - min)) + min)

new Main



            
          
!
999px
Loading ..................

Console