LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code




    
    
  

    
Look Ma! I broke that HTML!
show modal
CSS
.grid {
  zoom: 1;
}
.grid:after,
.grid:before {
  content: '';
  display: table;
}
.grid:after {
  clear: both;
}
.grid .grid-bit {
  float: left;
  padding-left: 0.625rem;
  padding-right: 0.3125rem;
}
.grid .grid-bit:last-of-type {
  padding-right: 0.625rem;
}
.grid .grid-bit + .grid-bit {
  padding-left: 0.3125rem;
}
.grid--gutter-x2 .grid-bit {
  padding-left: 1.25rem;
  padding-right: 0.625rem;
}
.grid--gutter-x2 .grid-bit:last-of-type {
  padding-right: 1.25rem;
}
.grid--gutter-x2 .grid-bit + .grid-bit {
  padding-left: 0.625rem;
}
.grid--gutter-x3 .grid-bit {
  padding-left: 1.875rem;
  padding-right: 0.9375rem;
}
.grid--gutter-x3 .grid-bit:last-of-type {
  padding-right: 1.875rem;
}
.grid--gutter-x3 .grid-bit + .grid-bit {
  padding-left: 0.9375rem;
}
.grid--gutter-x4 .grid-bit {
  padding-left: 2.5rem;
  padding-right: 1.25rem;
}
.grid--gutter-x4 .grid-bit:last-of-type {
  padding-right: 2.5rem;
}
.grid--gutter-x4 .grid-bit + .grid-bit {
  padding-left: 1.25rem;
}
.grid--gutter-x5 .grid-bit {
  padding-left: 3.125rem;
  padding-right: 1.5625rem;
}
.grid--gutter-x5 .grid-bit:last-of-type {
  padding-right: 3.125rem;
}
.grid--gutter-x5 .grid-bit + .grid-bit {
  padding-left: 1.5625rem;
}
.grid--gutter-x6 .grid-bit {
  padding-left: 3.75rem;
  padding-right: 1.875rem;
}
.grid--gutter-x6 .grid-bit:last-of-type {
  padding-right: 3.75rem;
}
.grid--gutter-x6 .grid-bit + .grid-bit {
  padding-left: 1.875rem;
}
.grid--gutter-x7 .grid-bit {
  padding-left: 4.375rem;
  padding-right: 2.1875rem;
}
.grid--gutter-x7 .grid-bit:last-of-type {
  padding-right: 4.375rem;
}
.grid--gutter-x7 .grid-bit + .grid-bit {
  padding-left: 2.1875rem;
}
.grid--gutter-x8 .grid-bit {
  padding-left: 5rem;
  padding-right: 2.5rem;
}
.grid--gutter-x8 .grid-bit:last-of-type {
  padding-right: 5rem;
}
.grid--gutter-x8 .grid-bit + .grid-bit {
  padding-left: 2.5rem;
}
.grid--gutter-x9 .grid-bit {
  padding-left: 5.625rem;
  padding-right: 2.8125rem;
}
.grid--gutter-x9 .grid-bit:last-of-type {
  padding-right: 5.625rem;
}
.grid--gutter-x9 .grid-bit + .grid-bit {
  padding-left: 2.8125rem;
}
.grid--gutter-x10 .grid-bit {
  padding-left: 6.25rem;
  padding-right: 3.125rem;
}
.grid--gutter-x10 .grid-bit:last-of-type {
  padding-right: 6.25rem;
}
.grid--gutter-x10 .grid-bit + .grid-bit {
  padding-left: 3.125rem;
}
.grid--sliced .grid-bit:first-of-type {
  padding-left: 0;
}
.grid--sliced .grid-bit:last-of-type {
  padding-right: 0;
}
.grid-bit--1-20 {
  width: 5%;
}
.grid-bit--2-20 {
  width: 10%;
}
.grid-bit--3-20 {
  width: 15%;
}
.grid-bit--4-20 {
  width: 20%;
}
.grid-bit--5-20 {
  width: 25%;
}
.grid-bit--6-20 {
  width: 30%;
}
.grid-bit--7-20 {
  width: 35%;
}
.grid-bit--8-20 {
  width: 40%;
}
.grid-bit--9-20 {
  width: 45%;
}
.grid-bit--10-20 {
  width: 50%;
}
.grid-bit--11-20 {
  width: 55%;
}
.grid-bit--12-20 {
  width: 60%;
}
.grid-bit--13-20 {
  width: 65%;
}
.grid-bit--14-20 {
  width: 70%;
}
.grid-bit--15-20 {
  width: 75%;
}
.grid-bit--16-20 {
  width: 80%;
}
.grid-bit--17-20 {
  width: 85%;
}
.grid-bit--18-20 {
  width: 90%;
}
.grid-bit--19-20 {
  width: 95%;
}
.grid-bit--20-20 {
  width: 100%;
}
* {
  box-sizing: border-box;
}
.hint {
  font-size: 0.875rem;
  line-height: 1.5rem;
  color: #fff;
  position: absolute;
  letter-spacing: 0.0625rem;
  opacity: 0;
}
.hint--1 {
  width: 10rem;
  top: 15rem;
  left: -11.875rem;
  padding-top: 1.75rem;
  background: transparent url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PHN2ZyB3aWR0aD0iNzVweCIgaGVpZ2h0PSIxNnB4IiB2aWV3Qm94PSIwIDAgNzUgMTYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeG1sbnM6c2tldGNoPSJodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2gvbnMiPiAgICAgICAgPHRpdGxlPlNsaWNlIDE8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+PC9kZWZzPiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBza2V0Y2g6dHlwZT0iTVNQYWdlIj4gICAgICAgIDxnIGlkPSJQYXRoLTY0LSstUGF0aC02NiIgc2tldGNoOnR5cGU9Ik1TTGF5ZXJHcm91cCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzcuNTAwMDAwLCA4LjAwMDAwMCkgc2NhbGUoLTEsIDEpIHRyYW5zbGF0ZSgtMzcuNTAwMDAwLCAtOC4wMDAwMDApIHRyYW5zbGF0ZSgxLjAwMDAwMCwgMS4wMDAwMDApIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMiI+ICAgICAgICAgICAgPHBhdGggZD0iTTEuODMxOTg3OTgsMS4wNjk0OTI1MiBMMS4zODUyNTM5MSw1LjMyMTc3NzM0IEw1LjQyMDQxMDE2LDUuNjkyODcxMDkiIGlkPSJQYXRoLTY0IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgzLjQwMjgzMiwgMy4zODExODIpIHJvdGF0ZSgyMC4wMDAwMDApIHRyYW5zbGF0ZSgtMy40MDI4MzIsIC0zLjM4MTE4MikgIj48L3BhdGg+ICAgICAgICAgICAgPHBhdGggZD0iTTIuMDY2NDA2MjUsNC4xMzY3MTg3NSBDMi4wNjY0MDYyNSw0LjEzNjcxODc1IDMxLjY4MTI4MDEsLTUuMzAxMjE2NTggNzIuNzE2MzA4NiwxMy45OTY1ODIiIGlkPSJQYXRoLTY1IiBza2V0Y2g6dHlwZT0iTVNTaGFwZUdyb3VwIj48L3BhdGg+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=") no-repeat right top;
}
.hint--2 {
  right: -10rem;
  top: -1.25rem;
  width: 9.375rem;
  padding-top: 0.625rem;
  padding-left: 0.625rem;
  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: -6.5625rem;
  margin-top: -3.4375rem;
  letter-spacing: 0.03125rem;
  font-size: 0.875rem;
  text-align: center;
  font-weight: bold;
}
.launch-button {
  font-size: 16px;
  color: #fff;
  background-color: #4acad9;
  box-shadow: 0 0 0 3.875rem #fff;
  border-radius: 0.375rem;
  text-align: center;
  width: 13.75rem;
  height: 2.8125rem;
  line-height: 2.8125rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.125rem;
  position: absolute;
  overflow: hidden;
  display: block;
  text-transform: uppercase;
  left: 50%;
  top: 50%;
  margin-left: -6.875rem;
  margin-top: -1.40625rem;
}
.launch-button:hover {
  cursor: pointer;
}
.launch-button:hover .launch-button__glare {
  right: -35%;
  -webkit-transition: all 0.4s linear;
  transition: all 0.4s linear;
}
.launch-button:active {
  opacity: 0.95;
}
.launch-button__glare {
  position: absolute;
  width: 45px;
  height: 200%;
  -webkit-transform: rotate(25deg);
          transform: rotate(25deg);
  background-color: rgba(255,255,255,0.5);
  top: -50%;
  right: 120%;
}
.launch-button__glare: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: 2.5rem;
  border-radius: 0.375rem;
  font-size: 1rem;
  color: #fff;
  background: #222;
  letter-spacing: 0.0625rem;
  outline: none;
}
button:hover,
.button:hover {
  cursor: pointer;
  opacity: 0.9;
}
button--grey,
.button--grey {
  background: #cecece;
}
.modal-holder {
  position: absolute;
  width: 30rem;
  height: 28.125rem;
  z-index: 2;
  top: 50%;
  left: 50%;
  margin-left: -15rem;
  margin-top: -14.0625rem;
}
.modal-holder .svg-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.modal-holder .break-parts {
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 0;
}
.modal-holder .modal {
  position: absolute;
  z-index: 2;
}
.modal-holder .effect {
  position: absolute;
  top: -7.625rem;
  left: 0.125rem;
  z-index: 4;
  display: none;
}
.effect__burst {
  position: absolute;
  width: 3.625rem;
  height: 3.625rem;
  left: 20.125rem;
  top: 1.4375rem;
  opacity: 0.5;
}
.effect__circle {
  position: absolute;
  left: 25rem;
  top: 6.25rem;
  width: 6.25rem;
  height: 6.25rem;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.effect__line {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  position: absolute;
  height: 56.25rem;
  width: 0.25rem;
  left: 28.0625rem;
  top: 9.375rem;
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
}
.effect__line--1 {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.effect__line--2 {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.effect__line--3 {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.effect__line--4 {
  -webkit-transform: rotate(-225deg);
          transform: rotate(-225deg);
}
.modal {
  background: #fff;
  border-radius: 0.4375rem;
  width: 100%;
  height: 100%;
  color: #222;
  text-align: center;
  letter-spacing: 0.0625rem;
  overflow: hidden;
  display: none;
}
.modal__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: inline-block;
}
.modal__close:before {
  content: '';
  position: absolute;
  width: 300%;
  height: 300%;
  top: -100%;
  left: -100%;
}
.modal__close:hover {
  opacity: 0.75;
  cursor: pointer;
}
.modal__close .icon {
  width: 1rem;
  height: 1rem;
  fill: #222;
  stroke: #222;
}
.modal__header {
  font-size: 1.5rem;
  margin-top: 5rem;
}
.modal__description {
  font-size: 0.875rem;
  color: #cecece;
  margin-top: 2.5rem;
  margin-bottom: 2.5rem;
}
.modal__section {
  width: 21.875rem;
  margin-top: 1.25rem;
  margin-left: auto;
  margin-right: auto;
}
.modal__section:last-of-type {
  margin-top: 1.875rem;
}
.input-with-label {
  text-align: left;
  position: relative;
}
.input-with-label__input {
  height: 2.5rem;
  width: 100%;
  border: 0.125rem solid #222;
  border-radius: 0.375rem;
  background: transparent;
  padding: 0 0.625rem;
  letter-spacing: 0.0625rem;
  font-size: 0.875rem;
  color: #222;
}
.input-with-label__input:hover {
  background: rgba(34,34,34,0.01);
}
.input-with-label__input:not(:focus):not(.is-keep-focus).is-fill + .input-with-label__label {
  display: none;
}
.input-with-label__input:focus,
.input-with-label__input.is-keep-focus {
  outline: none;
  background: rgba(34,34,34,0.01);
}
.input-with-label__input:focus + .input-with-label__label,
.input-with-label__input.is-keep-focus + .input-with-label__label {
  top: -1.125rem;
  left: 0;
  background: #222;
  padding: 0.125rem 0.4375rem 0.25rem;
  font-size: 0.625rem;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
  color: #fff;
  letter-spacing: 0.0625rem;
}
.input-with-label__input:focus + .input-with-label__label .input-with-label__label__corner,
.input-with-label__input.is-keep-focus + .input-with-label__label .input-with-label__label__corner {
  display: block;
}
.input-with-label__label {
  font-size: 0.875rem;
  display: block;
  position: absolute;
  color: #cecece;
  top: 0.625rem;
  left: 0.625rem;
  cursor: text;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}
.input-with-label__label__corner {
  display: none;
  position: absolute;
  left: 0;
  bottom: -0.25rem;
  width: 0;
  height: 0;
  border: 0.25rem solid transparent;
  border-left-color: #222;
}
.modal-overlay {
  width: 100%;
  height: 100%;
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  background: rgba(34,34,34,0.9);
  z-index: 1;
}
.svg-overlay {
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  display: none;
}
.svg-overlay--2 {
  -webkit-transform-origin: 96% 2%;
          transform-origin: 96% 2%;
}
.svg-overlay--3 {
  -webkit-transform-origin: 97% 6%;
          transform-origin: 97% 6%;
}
.svg-overlay svg {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
}
.by {
  position: absolute;
  right: 1.25rem;
  bottom: 1.25rem;
  width: 3.125rem;
  height: 3.125rem;
  border-radius: 50%;
  background: #fff 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;
}
JS
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


Description

just a small experiment on how to blow any html element git repo: https://github.com/legomushroom/modal-break
Term
Mon, 11/27/2017 - 21:24

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv