diff --git a/.gitignore b/.gitignore
index dfb1668..91fae7d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -58,3 +58,4 @@ $RECYCLE.BIN/
 
 # Windows shortcuts
 *.lnk
+css/skeleton.css
diff --git a/css/layout1.sass b/css/layout1.sass
index c3881e8..7866907 100644
--- a/css/layout1.sass
+++ b/css/layout1.sass
@@ -1,39 +1,50 @@
-// Base Styles
+@import vars
+
+//
 
 body
   font-family: "Open Sans", sans-serif
-
 h1
-  color: #ccc
-  weight: 300
-
+  font-size: 5rem
+  color: $title
+  weight: 400
+  margin-top: -25px
+h2
+  font-size: 2.1rem
+  font-weight: 400
+  text-transform: uppercase
+  margin-top: -15px
 figure
   margin: auto
-
 .content
+  position: relative
+  z-index: 2
+  background: white
+  margin-bottom: 250px
   article
-    padding: 100px 0
+    padding: 100px 0 0 0
     max-width: 640px
     margin: 0 auto
     text-align: center
-
 img
   max-width: 100%
+.main-title
+  font-size: 6.3rem
+  margin-top: -40px
+  padding-top: 0px
 
-
-
-// Parallax
+//
 
 .bird-box
   position: relative
-  height: 600px
+  height: 780px
   background:
     image: url(/images/bird-bg.jpg)
-    size: auto 600px
+    size: auto 800px
     position: top center
     attachment: fixed
   overflow: hidden
-
+  z-index: 3
 .logo
   height: 100px
   width: 100%
@@ -44,7 +55,6 @@ img
   position: absolute
   top: 50%
   margin-top: -50px
-
 .fore-bird
   width: 960px
   height: 733px
@@ -54,9 +64,8 @@ img
     position: right bottom
   position: absolute
   left: 50%
-  margin-left: -480px
-  top: 380px
-
+  margin-left: -285px
+  top: 300px
 .back-bird
   width: 960px
   height: 298px
@@ -67,3 +76,127 @@ img
   position: absolute
   left: 50%
   margin-left: -480px
+
+//
+
+.clothes-pics
+  margin-top: 40px
+  margin-bottom: 100px
+  figure
+    margin-bottom: 20px
+    position: relative
+    opacity: 0
+    transform: translateX(20px)
+    transition: all 0.3s ease-in-out
+    overflow: hidden
+    cursor: pointer
+    &.is-showing
+      opacity: 1
+      transform: translateX(0px)
+    img
+      display: block
+      transform: scale(1)
+      transition: all 0.3s ease-in-out
+    &:hover
+      figcaption
+        left: 0%
+      img
+        transform: scale(0.8)
+  figcaption
+    position: absolute
+    bottom: 10px
+    left: -100%
+    background: black
+    color: white
+    padding: 2px 8px
+    font-size: 11px
+    transition: all 0.3s ease-in-out
+
+//
+
+.large-window
+  height: 640px
+  background:
+    position: center 0px
+    attachment: fixed
+  margin-top: 100px
+  margin-bottom: 100px
+  border-radius: 50%
+  position: relative
+  cursor: pointer
+  .window-tint
+    background-color: rgba(0,0,0,0.5)
+    position: absolute
+    top: 0
+    left: 0
+    right: 0
+    bottom: 0
+    border-radius: 50%
+    display: flex
+    justify-content: center
+    align-items: center
+    opacity: 0
+  .promo-text
+    color: white
+    font-weight: 100
+    font-size: 50px
+    line-height: 1.2
+    strong
+      display: block
+      font-size: 30px
+    span
+      font:
+        weight: 300
+        size: 18px
+        style: italic
+      color: rgba(255,255,255,0.6)
+    a.window-cta
+      margin-top: 40px
+      font-size: 20px
+      text-decoration: none
+      color: white
+      border: 1px solid white
+      border-radius: 8%
+      padding: 10px 20px
+      transition: all 0.3s ease-in-out
+      &:hover
+        background: white
+        color: black
+
+//
+
+.blog-posts
+  margin-top: 0px
+  margin-bottom: 100px
+  .post
+    border: 1px solid $hr
+    margin-top: 40px
+    background: white
+    position: relative
+  .post-1
+    transform: translate(100px, 20px)
+  .post-2
+    z-index: 2
+  .post-3
+    transform: translate(-100px, 20px)
+  .post-4
+    margin: 25px 0 60px 0
+    
+//
+
+footer
+  background: $text
+  color: white
+  padding: 40px 0
+  position: fixed
+  bottom: 0
+  width: 100%
+  .footer-stuff
+    max-width: 640px
+    margin: 0 auto
+  ul
+    padding-top: 20px
+    list-style-type: none
+  a
+    color: white
+    text-decoration: none
\ No newline at end of file
diff --git a/css/layout2.sass b/css/layout2.sass
new file mode 100644
index 0000000..b3b0048
--- /dev/null
+++ b/css/layout2.sass
@@ -0,0 +1,109 @@
+@import vars
+    
+//
+
+::selection
+  color: inherit
+  background: $primary-faded
+::-moz-selection
+  color: inherit
+  background: $primary-faded
+.h
+  -webkit-touch-callout: none
+  -webkit-user-select: none
+  -khtml-user-select: none
+  -moz-user-select: none
+  -ms-user-select: none
+  user-select: none
+hr
+  border-top: 1px solid $hr
+  margin-top: 10px
+  margin-bottom: 15px
+hr.solid
+  border-top: 1.5px solid $title-smooth
+hr.dashed
+  border-top: 1.5px dashed $title-smooth
+
+//
+
+.cover-image
+  background-color: $primary-faded
+.tile
+  width: 100%
+  height: 100%
+  h1
+    color: $title
+    font-family: "Open Sans", sans-serif
+  background: $primary-faded
+
+//
+
+.large-window.periscope-1
+  background-image: url(/images/model17.jpg)
+  background-position: top
+  margin-top: 40px
+.large-window.periscope-2
+  background-image: url(/images/model11.jpg)
+  background-position: center
+.large-window:hover
+  background:
+    color: $primary-faded
+    blend-mode: multiply
+    
+//
+
+.post
+  padding: 10px 0px 10px 0px
+  h5
+    margin: 0px 0 10px 0
+  p
+    margin: 10px 0 10px 0
+  img
+    width: 100%
+    height: 100%
+    max-height: 100%
+  a
+    transition: 1s
+    font-size: 12px
+    text-decoration: none
+    color: $text
+    border: 1px solid $hr
+    border-radius: 8%
+    bottom: 0px
+    margin: 0 0 0 0
+    padding: 0 10 0 20
+    transition: all 0.3s ease-in-out
+    &:hover
+      transition: 1s
+      background: $primary-faded
+      border-color: $primary-faded
+      color: $text
+    
+//
+
+footer
+  .columns.three
+    a
+      transition: 1s
+      padding-left: 20px
+      color: $primary-faded
+      &:hover
+        transition: 1s
+        color: $primary
+  .columns.six
+    padding: 45px 0 0 40px
+    input
+      color: $text
+      &:active
+        border-color: $primary
+    .button
+      transition: 1s
+      font-size: 12px
+      padding: 0 20px
+      background-color: $primary-faded
+      border-color: $text
+      color: white
+      &:hover
+        transition: 1s
+        background-color: $primary
+        color: white
\ No newline at end of file
diff --git a/css/loading-screen.scss b/css/loading-screen.scss
new file mode 100644
index 0000000..9327ee6
--- /dev/null
+++ b/css/loading-screen.scss
@@ -0,0 +1,113 @@
+@import 'vars.sass';
+
+#load_screen {
+  background: $title;
+  opacity: 1;
+  position: fixed;
+  z-index: 10;
+  top: 0px;
+  width: 100%;
+  height: 100%; }
+#load_screen > #loading {
+  color: #fff;
+  width: 120px;
+  height: 24px;
+  margin: 300px auto; }
+
+//
+
+#loader-wrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    margin-top: -125px;
+    z-index: 1000; }
+#loader {
+    display: block;
+    position: relative;
+    left: 50%;
+    top: 50%;
+    width: 150px;
+    height: 150px;
+    margin: -75px 0 0 -75px;
+    border-radius: 50%;
+    border: 3px solid transparent;
+    border-top-color: $primary;
+    -webkit-animation: spin 2s linear infinite;
+    -khtml-animation: spin 2s linear infinite;
+    -moz-animation: spin 2s linear infinite;
+    -ms-animation: spin 2s linear infinite;
+    animation: spin 2s linear infinite;
+    z-index: 1001; }
+    #loader:before {
+        content: "";
+        position: absolute;
+        top: 5px;
+        left: 5px;
+        right: 5px;
+        bottom: 5px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: $primary;
+        -webkit-animation: spin 3s linear infinite;
+        -khtml-animation: spin 3s linear infinite;
+        -moz-animation: spin 3s linear infinite;
+        -ms-animation: spin 3s linear infinite;
+        animation: spin 3s linear infinite; }
+    #loader:after {
+        content: "";
+        position: absolute;
+        top: 15px;
+        left: 15px;
+        right: 15px;
+        bottom: 15px;
+        border-radius: 50%;
+        border: 3px solid transparent;
+        border-top-color: $primary;
+        -webkit-animation: spin 1.5s linear infinite;
+        -khtml-animation: spin 1.5s linear infinite;
+        -moz-animation: spin 1.5s linear infinite;
+        -ms-animation: spin 1.5s linear infinite;
+        animation: spin 1.5s linear infinite; }
+
+    @-webkit-keyframes spin {
+        0%   {
+            -webkit-transform: rotate(0deg);
+            -khtml-transform: rotate(0deg);
+            -moz-transform: rotate(0deg);
+            -ms-transform: rotate(0deg);
+            transform: rotate(0deg); }
+        100% {
+            -webkit-transform: rotate(360deg);
+            -khtml-transform: rotate(360deg);
+            -moz-transform: rotate(360deg);
+            -ms-transform: rotate(360deg);
+            transform: rotate(360deg); } }
+    @-ms-keyframes spin {
+        0%   {
+            -webkit-transform: rotate(0deg);
+            -khtml-transform: rotate(0deg);
+            -moz-transform: rotate(0deg);
+            -ms-transform: rotate(0deg);
+            transform: rotate(0deg); }
+        100% {
+            -webkit-transform: rotate(360deg);
+            -khtml-transform: rotate(360deg);
+            -moz-transform: rotate(360deg);
+            -ms-transform: rotate(360deg);
+            transform: rotate(360deg); }}
+    @keyframes spin {
+        0%   {
+            -webkit-transform: rotate(0deg);
+            -khtml-transform: rotate(0deg);
+            -moz-transform: rotate(0deg);
+            -ms-transform: rotate(0deg);
+            transform: rotate(0deg); }
+        100% {
+            -webkit-transform: rotate(360deg);
+            -khtml-transform: rotate(360deg);
+            -moz-transform: rotate(360deg);
+            -ms-transform: rotate(360deg);
+            transform: rotate(360deg); } }
\ No newline at end of file
diff --git a/css/style.css b/css/style.css
index ea67ce2..7f670a3 100644
--- a/css/style.css
+++ b/css/style.css
@@ -1,916 +1 @@
-@charset "UTF-8";
-/*! normalize.css v3.0.2 | MIT License | git.io/normalize */
-/**
- * 1. Set default font family to sans-serif.
- * 2. Prevent iOS text size adjust after orientation change, without disabling
- *    user zoom.
- */
-html {
-  font-family: sans-serif;
-  /* 1 */
-  -ms-text-size-adjust: 100%;
-  /* 2 */
-  -webkit-text-size-adjust: 100%;
-  /* 2 */ }
-
-/**
- * Remove default margin.
- */
-body {
-  margin: 0; }
-
-/* HTML5 display definitions
-   ========================================================================== */
-/**
- * Correct `block` display not defined for any HTML5 element in IE 8/9.
- * Correct `block` display not defined for `details` or `summary` in IE 10/11
- * and Firefox.
- * Correct `block` display not defined for `main` in IE 11.
- */
-article,
-aside,
-details,
-figcaption,
-figure,
-footer,
-header,
-hgroup,
-main,
-menu,
-nav,
-section,
-summary {
-  display: block; }
-
-/**
- * 1. Correct `inline-block` display not defined in IE 8/9.
- * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
- */
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-  /* 1 */
-  vertical-align: baseline;
-  /* 2 */ }
-
-/**
- * Prevent modern browsers from displaying `audio` without controls.
- * Remove excess height in iOS 5 devices.
- */
-audio:not([controls]) {
-  display: none;
-  height: 0; }
-
-/**
- * Address `[hidden]` styling not present in IE 8/9/10.
- * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
- */
-[hidden],
-template {
-  display: none; }
-
-/* Links
-   ========================================================================== */
-/**
- * Remove the gray background color from active links in IE 10.
- */
-a {
-  background-color: transparent; }
-
-/**
- * Improve readability when focused and also mouse hovered in all browsers.
- */
-a:active,
-a:hover {
-  outline: 0; }
-
-/* Text-level semantics
-   ========================================================================== */
-/**
- * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
- */
-abbr[title] {
-  border-bottom: 1px dotted; }
-
-/**
- * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
- */
-b,
-strong {
-  font-weight: bold; }
-
-/**
- * Address styling not present in Safari and Chrome.
- */
-dfn {
-  font-style: italic; }
-
-/**
- * Address variable `h1` font-size and margin within `section` and `article`
- * contexts in Firefox 4+, Safari, and Chrome.
- */
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0; }
-
-/**
- * Address styling not present in IE 8/9.
- */
-mark {
-  background: #ff0;
-  color: #000; }
-
-/**
- * Address inconsistent and variable font size in all browsers.
- */
-small {
-  font-size: 80%; }
-
-/**
- * Prevent `sub` and `sup` affecting `line-height` in all browsers.
- */
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline; }
-
-sup {
-  top: -0.5em; }
-
-sub {
-  bottom: -0.25em; }
-
-/* Embedded content
-   ========================================================================== */
-/**
- * Remove border when inside `a` element in IE 8/9/10.
- */
-img {
-  border: 0; }
-
-/**
- * Correct overflow not hidden in IE 9/10/11.
- */
-svg:not(:root) {
-  overflow: hidden; }
-
-/* Grouping content
-   ========================================================================== */
-/**
- * Address margin not present in IE 8/9 and Safari.
- */
-figure {
-  margin: 1em 40px; }
-
-/**
- * Address differences between Firefox and other browsers.
- */
-hr {
-  -moz-box-sizing: content-box;
-  box-sizing: content-box;
-  height: 0; }
-
-/**
- * Contain overflow in all browsers.
- */
-pre {
-  overflow: auto; }
-
-/**
- * Address odd `em`-unit font size rendering in all browsers.
- */
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em; }
-
-/* Forms
-   ========================================================================== */
-/**
- * Known limitation: by default, Chrome and Safari on OS X allow very limited
- * styling of `select`, unless a `border` property is set.
- */
-/**
- * 1. Correct color not being inherited.
- *    Known issue: affects color of disabled elements.
- * 2. Correct font properties not being inherited.
- * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
- */
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: inherit;
-  /* 1 */
-  font: inherit;
-  /* 2 */
-  margin: 0;
-  /* 3 */ }
-
-/**
- * Address `overflow` set to `hidden` in IE 8/9/10/11.
- */
-button {
-  overflow: visible; }
-
-/**
- * Address inconsistent `text-transform` inheritance for `button` and `select`.
- * All other form control elements do not inherit `text-transform` values.
- * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
- * Correct `select` style inheritance in Firefox.
- */
-button,
-select {
-  text-transform: none; }
-
-/**
- * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
- *    and `video` controls.
- * 2. Correct inability to style clickable `input` types in iOS.
- * 3. Improve usability and consistency of cursor style between image-type
- *    `input` and others.
- */
-button,
-html input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-  -webkit-appearance: button;
-  /* 2 */
-  cursor: pointer;
-  /* 3 */ }
-
-/**
- * Re-set default cursor for disabled elements.
- */
-button[disabled],
-html input[disabled] {
-  cursor: default; }
-
-/**
- * Remove inner padding and border in Firefox 4+.
- */
-button::-moz-focus-inner,
-input::-moz-focus-inner {
-  border: 0;
-  padding: 0; }
-
-/**
- * Address Firefox 4+ setting `line-height` on `input` using `!important` in
- * the UA stylesheet.
- */
-input {
-  line-height: normal; }
-
-/**
- * It's recommended that you don't attempt to style these elements.
- * Firefox's implementation doesn't respect box-sizing, padding, or width.
- *
- * 1. Address box sizing set to `content-box` in IE 8/9/10.
- * 2. Remove excess padding in IE 8/9/10.
- */
-input[type="checkbox"],
-input[type="radio"] {
-  box-sizing: border-box;
-  /* 1 */
-  padding: 0;
-  /* 2 */ }
-
-/**
- * Fix the cursor style for Chrome's increment/decrement buttons. For certain
- * `font-size` values of the `input`, it causes the cursor style of the
- * decrement button to change from `default` to `text`.
- */
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
-  height: auto; }
-
-/**
- * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
- * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
- *    (include `-moz` to future-proof).
- */
-input[type="search"] {
-  -webkit-appearance: textfield;
-  /* 1 */
-  -moz-box-sizing: content-box;
-  -webkit-box-sizing: content-box;
-  /* 2 */
-  box-sizing: content-box; }
-
-/**
- * Remove inner padding and search cancel button in Safari and Chrome on OS X.
- * Safari (but not Chrome) clips the cancel button when the search input has
- * padding (and `textfield` appearance).
- */
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none; }
-
-/**
- * Define consistent border, margin, and padding.
- */
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em; }
-
-/**
- * 1. Correct `color` not being inherited in IE 8/9/10/11.
- * 2. Remove padding so people aren't caught out if they zero out fieldsets.
- */
-legend {
-  border: 0;
-  /* 1 */
-  padding: 0;
-  /* 2 */ }
-
-/**
- * Remove default vertical scrollbar in IE 8/9/10/11.
- */
-textarea {
-  overflow: auto; }
-
-/**
- * Don't inherit the `font-weight` (applied by a rule above).
- * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
- */
-optgroup {
-  font-weight: bold; }
-
-/* Tables
-   ========================================================================== */
-/**
- * Remove most spacing between table cells.
- */
-table {
-  border-collapse: collapse;
-  border-spacing: 0; }
-
-td,
-th {
-  padding: 0; }
-
-/*
-* Skeleton V2.0.4
-* Copyright 2014, Dave Gamache
-* www.getskeleton.com
-* Free to use under the MIT license.
-* http://www.opensource.org/licenses/mit-license.php
-* 12/29/2014
-*/
-/* Table of contents
-––––––––––––––––––––––––––––––––––––––––––––––––––
-- Grid
-- Base Styles
-- Typography
-- Links
-- Buttons
-- Forms
-- Lists
-- Code
-- Tables
-- Spacing
-- Utilities
-- Clearing
-- Media Queries
-*/
-/* Grid
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-.container {
-  position: relative;
-  width: 100%;
-  max-width: 960px;
-  margin: 0 auto;
-  padding: 0 20px;
-  box-sizing: border-box; }
-
-.column,
-.columns {
-  width: 100%;
-  float: left;
-  box-sizing: border-box; }
-
-/* For devices larger than 400px */
-@media (min-width: 400px) {
-  .container {
-    width: 85%;
-    padding: 0; } }
-/* For devices larger than 550px */
-@media (min-width: 550px) {
-  .container {
-    width: 80%; }
-
-  .column,
-  .columns {
-    margin-left: 4%; }
-
-  .column:first-child,
-  .columns:first-child {
-    margin-left: 0; }
-
-  .one.column,
-  .one.columns {
-    width: 4.66666666667%; }
-
-  .two.columns {
-    width: 13.3333333333%; }
-
-  .three.columns {
-    width: 22%; }
-
-  .four.columns {
-    width: 30.6666666667%; }
-
-  .five.columns {
-    width: 39.3333333333%; }
-
-  .six.columns {
-    width: 48%; }
-
-  .seven.columns {
-    width: 56.6666666667%; }
-
-  .eight.columns {
-    width: 65.3333333333%; }
-
-  .nine.columns {
-    width: 74.0%; }
-
-  .ten.columns {
-    width: 82.6666666667%; }
-
-  .eleven.columns {
-    width: 91.3333333333%; }
-
-  .twelve.columns {
-    width: 100%;
-    margin-left: 0; }
-
-  .one-third.column {
-    width: 30.6666666667%; }
-
-  .two-thirds.column {
-    width: 65.3333333333%; }
-
-  .one-half.column {
-    width: 48%; }
-
-  /* Offsets */
-  .offset-by-one.column,
-  .offset-by-one.columns {
-    margin-left: 8.66666666667%; }
-
-  .offset-by-two.column,
-  .offset-by-two.columns {
-    margin-left: 17.3333333333%; }
-
-  .offset-by-three.column,
-  .offset-by-three.columns {
-    margin-left: 26%; }
-
-  .offset-by-four.column,
-  .offset-by-four.columns {
-    margin-left: 34.6666666667%; }
-
-  .offset-by-five.column,
-  .offset-by-five.columns {
-    margin-left: 43.3333333333%; }
-
-  .offset-by-six.column,
-  .offset-by-six.columns {
-    margin-left: 52%; }
-
-  .offset-by-seven.column,
-  .offset-by-seven.columns {
-    margin-left: 60.6666666667%; }
-
-  .offset-by-eight.column,
-  .offset-by-eight.columns {
-    margin-left: 69.3333333333%; }
-
-  .offset-by-nine.column,
-  .offset-by-nine.columns {
-    margin-left: 78.0%; }
-
-  .offset-by-ten.column,
-  .offset-by-ten.columns {
-    margin-left: 86.6666666667%; }
-
-  .offset-by-eleven.column,
-  .offset-by-eleven.columns {
-    margin-left: 95.3333333333%; }
-
-  .offset-by-one-third.column,
-  .offset-by-one-third.columns {
-    margin-left: 34.6666666667%; }
-
-  .offset-by-two-thirds.column,
-  .offset-by-two-thirds.columns {
-    margin-left: 69.3333333333%; }
-
-  .offset-by-one-half.column,
-  .offset-by-one-half.columns {
-    margin-left: 52%; } }
-/* Base Styles
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-/* NOTE
-html is set to 62.5% so that all the REM measurements throughout Skeleton
-are based on 10px sizing. So basically 1.5rem = 15px :) */
-html {
-  font-size: 62.5%; }
-
-body {
-  font-size: 1.5em;
-  /* currently ems cause chrome bug misinterpreting rems on body element */
-  line-height: 1.6;
-  font-weight: 400;
-  font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  color: #222; }
-
-/* Typography
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 0;
-  margin-bottom: 2rem;
-  font-weight: 300; }
-
-h1 {
-  font-size: 4.0rem;
-  line-height: 1.2;
-  letter-spacing: -.1rem; }
-
-h2 {
-  font-size: 3.6rem;
-  line-height: 1.25;
-  letter-spacing: -.1rem; }
-
-h3 {
-  font-size: 3.0rem;
-  line-height: 1.3;
-  letter-spacing: -.1rem; }
-
-h4 {
-  font-size: 2.4rem;
-  line-height: 1.35;
-  letter-spacing: -.08rem; }
-
-h5 {
-  font-size: 1.8rem;
-  line-height: 1.5;
-  letter-spacing: -.05rem; }
-
-h6 {
-  font-size: 1.5rem;
-  line-height: 1.6;
-  letter-spacing: 0; }
-
-/* Larger than phablet */
-@media (min-width: 550px) {
-  h1 {
-    font-size: 5.0rem; }
-
-  h2 {
-    font-size: 4.2rem; }
-
-  h3 {
-    font-size: 3.6rem; }
-
-  h4 {
-    font-size: 3.0rem; }
-
-  h5 {
-    font-size: 2.4rem; }
-
-  h6 {
-    font-size: 1.5rem; } }
-p {
-  margin-top: 0; }
-
-/* Links
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-a {
-  color: #1EAEDB; }
-
-a:hover {
-  color: #0FA0CE; }
-
-/* Buttons
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-.button,
-button,
-input[type="submit"],
-input[type="reset"],
-input[type="button"] {
-  display: inline-block;
-  height: 38px;
-  padding: 0 30px;
-  color: #555;
-  text-align: center;
-  font-size: 11px;
-  font-weight: 600;
-  line-height: 38px;
-  letter-spacing: .1rem;
-  text-transform: uppercase;
-  text-decoration: none;
-  white-space: nowrap;
-  background-color: transparent;
-  border-radius: 4px;
-  border: 1px solid #bbb;
-  cursor: pointer;
-  box-sizing: border-box; }
-
-.button:hover,
-button:hover,
-input[type="submit"]:hover,
-input[type="reset"]:hover,
-input[type="button"]:hover,
-.button:focus,
-button:focus,
-input[type="submit"]:focus,
-input[type="reset"]:focus,
-input[type="button"]:focus {
-  color: #333;
-  border-color: #888;
-  outline: 0; }
-
-.button.button-primary,
-button.button-primary,
-input[type="submit"].button-primary,
-input[type="reset"].button-primary,
-input[type="button"].button-primary {
-  color: #FFF;
-  background-color: #33C3F0;
-  border-color: #33C3F0; }
-
-.button.button-primary:hover,
-button.button-primary:hover,
-input[type="submit"].button-primary:hover,
-input[type="reset"].button-primary:hover,
-input[type="button"].button-primary:hover,
-.button.button-primary:focus,
-button.button-primary:focus,
-input[type="submit"].button-primary:focus,
-input[type="reset"].button-primary:focus,
-input[type="button"].button-primary:focus {
-  color: #FFF;
-  background-color: #1EAEDB;
-  border-color: #1EAEDB; }
-
-/* Forms
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
-textarea,
-select {
-  height: 38px;
-  padding: 6px 10px;
-  /* The 6px vertically centers text on FF, ignored by Webkit */
-  background-color: #fff;
-  border: 1px solid #D1D1D1;
-  border-radius: 4px;
-  box-shadow: none;
-  box-sizing: border-box; }
-
-/* Removes awkward default styles on some inputs for iOS */
-input[type="email"],
-input[type="number"],
-input[type="search"],
-input[type="text"],
-input[type="tel"],
-input[type="url"],
-input[type="password"],
-textarea {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none; }
-
-textarea {
-  min-height: 65px;
-  padding-top: 6px;
-  padding-bottom: 6px; }
-
-input[type="email"]:focus,
-input[type="number"]:focus,
-input[type="search"]:focus,
-input[type="text"]:focus,
-input[type="tel"]:focus,
-input[type="url"]:focus,
-input[type="password"]:focus,
-textarea:focus,
-select:focus {
-  border: 1px solid #33C3F0;
-  outline: 0; }
-
-label,
-legend {
-  display: block;
-  margin-bottom: .5rem;
-  font-weight: 600; }
-
-fieldset {
-  padding: 0;
-  border-width: 0; }
-
-input[type="checkbox"],
-input[type="radio"] {
-  display: inline; }
-
-label > .label-body {
-  display: inline-block;
-  margin-left: .5rem;
-  font-weight: normal; }
-
-/* Lists
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-ul {
-  list-style: circle inside; }
-
-ol {
-  list-style: decimal inside; }
-
-ol, ul {
-  padding-left: 0;
-  margin-top: 0; }
-
-ul ul,
-ul ol,
-ol ol,
-ol ul {
-  margin: 1.5rem 0 1.5rem 3rem;
-  font-size: 90%; }
-
-li {
-  margin-bottom: 1rem; }
-
-/* Code
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-code {
-  padding: .2rem .5rem;
-  margin: 0 .2rem;
-  font-size: 90%;
-  white-space: nowrap;
-  background: #F1F1F1;
-  border: 1px solid #E1E1E1;
-  border-radius: 4px; }
-
-pre > code {
-  display: block;
-  padding: 1rem 1.5rem;
-  white-space: pre; }
-
-/* Tables
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-th,
-td {
-  padding: 12px 15px;
-  text-align: left;
-  border-bottom: 1px solid #E1E1E1; }
-
-th:first-child,
-td:first-child {
-  padding-left: 0; }
-
-th:last-child,
-td:last-child {
-  padding-right: 0; }
-
-/* Spacing
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-button,
-.button {
-  margin-bottom: 1rem; }
-
-input,
-textarea,
-select,
-fieldset {
-  margin-bottom: 1.5rem; }
-
-pre,
-blockquote,
-dl,
-figure,
-table,
-p,
-ul,
-ol,
-form {
-  margin-bottom: 2.5rem; }
-
-/* Utilities
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-.u-full-width {
-  width: 100%;
-  box-sizing: border-box; }
-
-.u-max-full-width {
-  max-width: 100%;
-  box-sizing: border-box; }
-
-.u-pull-right {
-  float: right; }
-
-.u-pull-left {
-  float: left; }
-
-/* Misc
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-hr {
-  margin-top: 3rem;
-  margin-bottom: 3.5rem;
-  border-width: 0;
-  border-top: 1px solid #E1E1E1; }
-
-/* Clearing
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-/* Self Clearing Goodness */
-.container:after,
-.row:after,
-.u-cf {
-  content: "";
-  display: table;
-  clear: both; }
-
-/* Media Queries
-–––––––––––––––––––––––––––––––––––––––––––––––––– */
-/*
-Note: The best way to structure the use of media queries is to create the queries
-near the relevant code. For example, if you wanted to change the styles for buttons
-on small devices, paste the mobile query code up in the buttons section and style it
-there.
-*/
-/* Larger than mobile */
-/* Larger than phablet (also point when grid becomes active) */
-/* Larger than tablet */
-/* Larger than desktop */
-/* Larger than Desktop HD */
-body {
-  font-family: "Open Sans", sans-serif; }
-
-h1 {
-  color: #ccc;
-  weight: 300; }
-
-figure {
-  margin: auto; }
-
-.content article {
-  padding: 100px 0;
-  max-width: 640px;
-  margin: 0 auto;
-  text-align: center; }
-
-img {
-  max-width: 100%; }
-
-.bird-box {
-  position: relative;
-  height: 600px;
-  background-image: url(/images/bird-bg.jpg);
-  background-size: auto 600px;
-  background-position: top center;
-  background-attachment: fixed;
-  overflow: hidden; }
-
-.logo {
-  height: 100px;
-  width: 100%;
-  background-image: url(/images/black-bird-logo.svg);
-  background-position: center;
-  background-repeat: no-repeat;
-  position: absolute;
-  top: 50%;
-  margin-top: -50px; }
-
-.fore-bird {
-  width: 960px;
-  height: 733px;
-  background-image: url(/images/fore-bird.png);
-  background-repeat: no-repeat;
-  background-position: right bottom;
-  position: absolute;
-  left: 50%;
-  margin-left: -480px;
-  top: 380px; }
-
-.back-bird {
-  width: 960px;
-  height: 298px;
-  background-image: url(/images/back-bird.png);
-  background-repeat: no-repeat;
-  background-position: top left;
-  position: absolute;
-  left: 50%;
-  margin-left: -480px; }
+/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}.container{position:relative;width:100%;max-width:960px;margin:0 auto;padding:0 20px;box-sizing:border-box}.column,.columns{width:100%;float:left;box-sizing:border-box}@media (min-width: 400px){.container{width:85%;padding:0}}@media (min-width: 550px){.container{width:80%}.column,.columns{margin-left:4%}.column:first-child,.columns:first-child{margin-left:0}.one.column,.one.columns{width:4.66666666667%}.two.columns{width:13.3333333333%}.three.columns{width:22%}.four.columns{width:30.6666666667%}.five.columns{width:39.3333333333%}.six.columns{width:48%}.seven.columns{width:56.6666666667%}.eight.columns{width:65.3333333333%}.nine.columns{width:74.0%}.ten.columns{width:82.6666666667%}.eleven.columns{width:91.3333333333%}.twelve.columns{width:100%;margin-left:0}.one-third.column{width:30.6666666667%}.two-thirds.column{width:65.3333333333%}.one-half.column{width:48%}.offset-by-one.column,.offset-by-one.columns{margin-left:8.66666666667%}.offset-by-two.column,.offset-by-two.columns{margin-left:17.3333333333%}.offset-by-three.column,.offset-by-three.columns{margin-left:26%}.offset-by-four.column,.offset-by-four.columns{margin-left:34.6666666667%}.offset-by-five.column,.offset-by-five.columns{margin-left:43.3333333333%}.offset-by-six.column,.offset-by-six.columns{margin-left:52%}.offset-by-seven.column,.offset-by-seven.columns{margin-left:60.6666666667%}.offset-by-eight.column,.offset-by-eight.columns{margin-left:69.3333333333%}.offset-by-nine.column,.offset-by-nine.columns{margin-left:78.0%}.offset-by-ten.column,.offset-by-ten.columns{margin-left:86.6666666667%}.offset-by-eleven.column,.offset-by-eleven.columns{margin-left:95.3333333333%}.offset-by-one-third.column,.offset-by-one-third.columns{margin-left:34.6666666667%}.offset-by-two-thirds.column,.offset-by-two-thirds.columns{margin-left:69.3333333333%}.offset-by-one-half.column,.offset-by-one-half.columns{margin-left:52%}}html{font-size:62.5%}body{font-size:1.5em;line-height:1.6;font-weight:400;font-family:"Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;color:#222}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:2rem;font-weight:300}h1{font-size:4.0rem;line-height:1.2;letter-spacing:-.1rem}h2{font-size:3.6rem;line-height:1.25;letter-spacing:-.1rem}h3{font-size:3.0rem;line-height:1.3;letter-spacing:-.1rem}h4{font-size:2.4rem;line-height:1.35;letter-spacing:-.08rem}h5{font-size:1.8rem;line-height:1.5;letter-spacing:-.05rem}h6{font-size:1.5rem;line-height:1.6;letter-spacing:0}@media (min-width: 550px){h1{font-size:5.0rem}h2{font-size:4.2rem}h3{font-size:3.6rem}h4{font-size:3.0rem}h5{font-size:2.4rem}h6{font-size:1.5rem}}p{margin-top:0}a{color:#1EAEDB}a:hover{color:#0FA0CE}.button,button,input[type="submit"],input[type="reset"],input[type="button"]{display:inline-block;height:38px;padding:0 30px;color:#555;text-align:center;font-size:11px;font-weight:600;line-height:38px;letter-spacing:.1rem;text-transform:uppercase;text-decoration:none;white-space:nowrap;background-color:transparent;border-radius:4px;border:1px solid #bbb;cursor:pointer;box-sizing:border-box}.button:hover,button:hover,input[type="submit"]:hover,input[type="reset"]:hover,input[type="button"]:hover,.button:focus,button:focus,input[type="submit"]:focus,input[type="reset"]:focus,input[type="button"]:focus{color:#333;border-color:#888;outline:0}.button.button-primary,button.button-primary,input[type="submit"].button-primary,input[type="reset"].button-primary,input[type="button"].button-primary{color:#FFF;background-color:#33C3F0;border-color:#33C3F0}.button.button-primary:hover,button.button-primary:hover,input[type="submit"].button-primary:hover,input[type="reset"].button-primary:hover,input[type="button"].button-primary:hover,.button.button-primary:focus,button.button-primary:focus,input[type="submit"].button-primary:focus,input[type="reset"].button-primary:focus,input[type="button"].button-primary:focus{color:#FFF;background-color:#1EAEDB;border-color:#1EAEDB}input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea,select{height:38px;padding:6px 10px;background-color:#fff;border:1px solid #D1D1D1;border-radius:4px;box-shadow:none;box-sizing:border-box}input[type="email"],input[type="number"],input[type="search"],input[type="text"],input[type="tel"],input[type="url"],input[type="password"],textarea{-webkit-appearance:none;-moz-appearance:none;appearance:none}textarea{min-height:65px;padding-top:6px;padding-bottom:6px}input[type="email"]:focus,input[type="number"]:focus,input[type="search"]:focus,input[type="text"]:focus,input[type="tel"]:focus,input[type="url"]:focus,input[type="password"]:focus,textarea:focus,select:focus{border:1px solid #33C3F0;outline:0}label,legend{display:block;margin-bottom:.5rem;font-weight:600}fieldset{padding:0;border-width:0}input[type="checkbox"],input[type="radio"]{display:inline}label>.label-body{display:inline-block;margin-left:.5rem;font-weight:normal}ul{list-style:circle inside}ol{list-style:decimal inside}ol,ul{padding-left:0;margin-top:0}ul ul,ul ol,ol ol,ol ul{margin:1.5rem 0 1.5rem 3rem;font-size:90%}li{margin-bottom:1rem}code{padding:.2rem .5rem;margin:0 .2rem;font-size:90%;white-space:nowrap;background:#F1F1F1;border:1px solid #E1E1E1;border-radius:4px}pre>code{display:block;padding:1rem 1.5rem;white-space:pre}th,td{padding:12px 15px;text-align:left;border-bottom:1px solid #E1E1E1}th:first-child,td:first-child{padding-left:0}th:last-child,td:last-child{padding-right:0}button,.button{margin-bottom:1rem}input,textarea,select,fieldset{margin-bottom:1.5rem}pre,blockquote,dl,figure,table,p,ul,ol,form{margin-bottom:2.5rem}.u-full-width{width:100%;box-sizing:border-box}.u-max-full-width{max-width:100%;box-sizing:border-box}.u-pull-right{float:right}.u-pull-left{float:left}hr{margin-top:3rem;margin-bottom:3.5rem;border-width:0;border-top:1px solid #E1E1E1}.container:after,.row:after,.u-cf{content:"";display:table;clear:both}body{font-family:"Open Sans",sans-serif}h1{font-size:5rem;color:#2d2d2d;weight:400;margin-top:-25px}h2{font-size:2.1rem;font-weight:400;text-transform:uppercase;margin-top:-15px}figure{margin:auto}.content{position:relative;z-index:2;background:#fff;margin-bottom:250px}.content article{padding:100px 0 0 0;max-width:640px;margin:0 auto;text-align:center}img{max-width:100%}.main-title{font-size:6.3rem;margin-top:-40px;padding-top:0px}.bird-box{position:relative;height:780px;background-image:url(/images/bird-bg.jpg);background-size:auto 800px;background-position:top center;background-attachment:fixed;overflow:hidden;z-index:3}.logo{height:100px;width:100%;background-image:url(/images/black-bird-logo.svg);background-position:center;background-repeat:no-repeat;position:absolute;top:50%;margin-top:-50px}.fore-bird{width:960px;height:733px;background-image:url(/images/fore-bird.png);background-repeat:no-repeat;background-position:right bottom;position:absolute;left:50%;margin-left:-285px;top:300px}.back-bird{width:960px;height:298px;background-image:url(/images/back-bird.png);background-repeat:no-repeat;background-position:top left;position:absolute;left:50%;margin-left:-480px}.clothes-pics{margin-top:40px;margin-bottom:100px}.clothes-pics figure{margin-bottom:20px;position:relative;opacity:0;transform:translateX(20px);transition:all 0.3s ease-in-out;overflow:hidden;cursor:pointer}.clothes-pics figure.is-showing{opacity:1;transform:translateX(0px)}.clothes-pics figure img{display:block;transform:scale(1);transition:all 0.3s ease-in-out}.clothes-pics figure:hover figcaption{left:0%}.clothes-pics figure:hover img{transform:scale(0.8)}.clothes-pics figcaption{position:absolute;bottom:10px;left:-100%;background:#000;color:#fff;padding:2px 8px;font-size:11px;transition:all 0.3s ease-in-out}.large-window{height:640px;background-position:center 0px;background-attachment:fixed;margin-top:100px;margin-bottom:100px;border-radius:50%;position:relative;cursor:pointer}.large-window .window-tint{background-color:rgba(0,0,0,0.5);position:absolute;top:0;left:0;right:0;bottom:0;border-radius:50%;display:flex;justify-content:center;align-items:center;opacity:0}.large-window .promo-text{color:#fff;font-weight:100;font-size:50px;line-height:1.2}.large-window .promo-text strong{display:block;font-size:30px}.large-window .promo-text span{font-weight:300;font-size:18px;font-style:italic;color:rgba(255,255,255,0.6)}.large-window .promo-text a.window-cta{margin-top:40px;font-size:20px;text-decoration:none;color:#fff;border:1px solid #fff;border-radius:8%;padding:10px 20px;transition:all 0.3s ease-in-out}.large-window .promo-text a.window-cta:hover{background:#fff;color:#000}.blog-posts{margin-top:0px;margin-bottom:100px}.blog-posts .post{border:1px solid rgba(20,20,20,0.1);margin-top:40px;background:#fff;position:relative}.blog-posts .post-1{transform:translate(100px, 20px)}.blog-posts .post-2{z-index:2}.blog-posts .post-3{transform:translate(-100px, 20px)}.blog-posts .post-4{margin:25px 0 60px 0}footer{background:#141414;color:#fff;padding:40px 0;position:fixed;bottom:0;width:100%}footer .footer-stuff{max-width:640px;margin:0 auto}footer ul{padding-top:20px;list-style-type:none}footer a{color:#fff;text-decoration:none}::selection{color:inherit;background:rgba(0,206,209,0.5)}::-moz-selection{color:inherit;background:rgba(0,206,209,0.5)}.h{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}hr{border-top:1px solid rgba(20,20,20,0.1);margin-top:10px;margin-bottom:15px}hr.solid{border-top:1.5px solid rgba(45,45,45,0.5)}hr.dashed{border-top:1.5px dashed rgba(45,45,45,0.5)}.cover-image{background-color:rgba(0,206,209,0.5)}.tile{width:100%;height:100%;background:rgba(0,206,209,0.5)}.tile h1{color:#2d2d2d;font-family:"Open Sans",sans-serif}.large-window.periscope-1{background-image:url(/images/model17.jpg);background-position:top;margin-top:40px}.large-window.periscope-2{background-image:url(/images/model11.jpg);background-position:center}.large-window:hover{background-color:rgba(0,206,209,0.5);background-blend-mode:multiply}.post{padding:10px 0px 10px 0px}.post h5{margin:0px 0 10px 0}.post p{margin:10px 0 10px 0}.post img{width:100%;height:100%;max-height:100%}.post a{transition:1s;font-size:12px;text-decoration:none;color:#141414;border:1px solid rgba(20,20,20,0.1);border-radius:8%;bottom:0px;margin:0 0 0 0;padding:0 10 0 20;transition:all 0.3s ease-in-out}.post a:hover{transition:1s;background:rgba(0,206,209,0.5);border-color:rgba(0,206,209,0.5);color:#141414}footer .columns.three a{transition:1s;padding-left:20px;color:rgba(0,206,209,0.5)}footer .columns.three a:hover{transition:1s;color:#00ced1}footer .columns.six{padding:45px 0 0 40px}footer .columns.six input{color:#141414}footer .columns.six input:active{border-color:#00ced1}footer .columns.six .button{transition:1s;font-size:12px;padding:0 20px;background-color:rgba(0,206,209,0.5);border-color:#141414;color:#fff}footer .columns.six .button:hover{transition:1s;background-color:#00ced1;color:#fff}#load_screen{background:#2d2d2d;opacity:1;position:fixed;z-index:10;top:0px;width:100%;height:100%}#load_screen>#loading{color:#fff;width:120px;height:24px;margin:300px auto}#loader-wrapper{position:fixed;top:0;left:0;width:100%;height:100%;margin-top:-125px;z-index:1000}#loader{display:block;position:relative;left:50%;top:50%;width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;border:3px solid transparent;border-top-color:#00ced1;-webkit-animation:spin 2s linear infinite;-khtml-animation:spin 2s linear infinite;-moz-animation:spin 2s linear infinite;-ms-animation:spin 2s linear infinite;animation:spin 2s linear infinite;z-index:1001}#loader:before{content:"";position:absolute;top:5px;left:5px;right:5px;bottom:5px;border-radius:50%;border:3px solid transparent;border-top-color:#00ced1;-webkit-animation:spin 3s linear infinite;-khtml-animation:spin 3s linear infinite;-moz-animation:spin 3s linear infinite;-ms-animation:spin 3s linear infinite;animation:spin 3s linear infinite}#loader:after{content:"";position:absolute;top:15px;left:15px;right:15px;bottom:15px;border-radius:50%;border:3px solid transparent;border-top-color:#00ced1;-webkit-animation:spin 1.5s linear infinite;-khtml-animation:spin 1.5s linear infinite;-moz-animation:spin 1.5s linear infinite;-ms-animation:spin 1.5s linear infinite;animation:spin 1.5s linear infinite}@-webkit-keyframes spin{0%{-webkit-transform:rotate(0deg);-khtml-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-khtml-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@-ms-keyframes spin{0%{-webkit-transform:rotate(0deg);-khtml-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-khtml-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes spin{0%{-webkit-transform:rotate(0deg);-khtml-transform:rotate(0deg);-moz-transform:rotate(0deg);-ms-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);-khtml-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg)}}
diff --git a/css/style.sass b/css/style.sass
index 92c5a7b..72ccdf4 100644
--- a/css/style.sass
+++ b/css/style.sass
@@ -2,3 +2,6 @@
 @import skeleton
 
 @import layout1
+@import layout2
+@import loading-screen
+@import vars
\ No newline at end of file
diff --git a/css/vars.sass b/css/vars.sass
new file mode 100644
index 0000000..1388caf
--- /dev/null
+++ b/css/vars.sass
@@ -0,0 +1,14 @@
+//
+
+$primary:           rgb(0, 206, 209)
+$primary-faded:     rgba(0, 206, 209, 0.5)
+
+$text:              rgb(20, 20, 20)
+$text-smooth:       rgba(20, 20, 20, 0.5)
+$title:             rgb(45, 45, 45)
+$title-smooth:      rgba(45, 45, 45, 0.5)
+
+$hr:                rgba(20, 20, 20, 0.1)
+
+$c-link:            $primary
+$c-link-h:          $primary
\ No newline at end of file
diff --git a/images/57.jpg b/images/57.jpg
index 979aec4..fb95c24 100644
Binary files a/images/57.jpg and b/images/57.jpg differ
diff --git a/images/DevTips.png b/images/DevTips.png
new file mode 100644
index 0000000..9a991b0
Binary files /dev/null and b/images/DevTips.png differ
diff --git a/images/back-bird.png b/images/back-bird.png
index e1e918e..7ef1a05 100644
Binary files a/images/back-bird.png and b/images/back-bird.png differ
diff --git a/images/bird-bg.jpg b/images/bird-bg.jpg
index a86ceb7..ccbee70 100644
Binary files a/images/bird-bg.jpg and b/images/bird-bg.jpg differ
diff --git a/images/black-bird-logo.png b/images/black-bird-logo.png
new file mode 100644
index 0000000..1f659da
Binary files /dev/null and b/images/black-bird-logo.png differ
diff --git a/images/fore-bird-r.png b/images/fore-bird-r.png
new file mode 100644
index 0000000..65ae1c6
Binary files /dev/null and b/images/fore-bird-r.png differ
diff --git a/images/fore-bird.png b/images/fore-bird.png
index a4e270c..d9c5261 100644
Binary files a/images/fore-bird.png and b/images/fore-bird.png differ
diff --git a/images/logo.png b/images/logo.png
new file mode 100644
index 0000000..e44e203
Binary files /dev/null and b/images/logo.png differ
diff --git a/images/model1.jpg b/images/model1.jpg
index f542f09..2054ecd 100644
Binary files a/images/model1.jpg and b/images/model1.jpg differ
diff --git a/images/model10.jpg b/images/model10.jpg
new file mode 100644
index 0000000..f2e7869
Binary files /dev/null and b/images/model10.jpg differ
diff --git a/images/model11.jpg b/images/model11.jpg
new file mode 100644
index 0000000..76aac1c
Binary files /dev/null and b/images/model11.jpg differ
diff --git a/images/model12.jpg b/images/model12.jpg
new file mode 100644
index 0000000..f6b6b0e
Binary files /dev/null and b/images/model12.jpg differ
diff --git a/images/model13.jpg b/images/model13.jpg
new file mode 100644
index 0000000..c4586c9
Binary files /dev/null and b/images/model13.jpg differ
diff --git a/images/model14.jpg b/images/model14.jpg
new file mode 100644
index 0000000..5439d7f
Binary files /dev/null and b/images/model14.jpg differ
diff --git a/images/model15.jpg b/images/model15.jpg
new file mode 100644
index 0000000..111e6d4
Binary files /dev/null and b/images/model15.jpg differ
diff --git a/images/model16.jpg b/images/model16.jpg
new file mode 100644
index 0000000..3b6787a
Binary files /dev/null and b/images/model16.jpg differ
diff --git a/images/model17.jpg b/images/model17.jpg
new file mode 100644
index 0000000..bb3e075
Binary files /dev/null and b/images/model17.jpg differ
diff --git a/images/model2.jpg b/images/model2.jpg
index 3c46433..198306a 100644
Binary files a/images/model2.jpg and b/images/model2.jpg differ
diff --git a/images/model3.jpg b/images/model3.jpg
index b2aef86..44b9d12 100644
Binary files a/images/model3.jpg and b/images/model3.jpg differ
diff --git a/images/model31.jpg b/images/model31.jpg
new file mode 100644
index 0000000..1ce9f03
Binary files /dev/null and b/images/model31.jpg differ
diff --git a/images/model32.jpg b/images/model32.jpg
new file mode 100644
index 0000000..6f355bb
Binary files /dev/null and b/images/model32.jpg differ
diff --git a/images/model33.jpg b/images/model33.jpg
new file mode 100644
index 0000000..7685648
Binary files /dev/null and b/images/model33.jpg differ
diff --git a/images/model34.jpg b/images/model34.jpg
new file mode 100644
index 0000000..df04ca1
Binary files /dev/null and b/images/model34.jpg differ
diff --git a/images/model35.jpg b/images/model35.jpg
new file mode 100644
index 0000000..ddd9149
Binary files /dev/null and b/images/model35.jpg differ
diff --git a/images/model38.jpg b/images/model38.jpg
new file mode 100644
index 0000000..73de1ec
Binary files /dev/null and b/images/model38.jpg differ
diff --git a/images/model39.jpg b/images/model39.jpg
new file mode 100644
index 0000000..5e03f87
Binary files /dev/null and b/images/model39.jpg differ
diff --git a/images/model4.jpg b/images/model4.jpg
new file mode 100644
index 0000000..5fae206
Binary files /dev/null and b/images/model4.jpg differ
diff --git a/images/model5.jpg b/images/model5.jpg
new file mode 100644
index 0000000..749d57a
Binary files /dev/null and b/images/model5.jpg differ
diff --git a/images/model6.jpg b/images/model6.jpg
new file mode 100644
index 0000000..e02c65a
Binary files /dev/null and b/images/model6.jpg differ
diff --git a/images/model7.jpg b/images/model7.jpg
new file mode 100644
index 0000000..84c02cb
Binary files /dev/null and b/images/model7.jpg differ
diff --git a/images/model8.jpg b/images/model8.jpg
new file mode 100644
index 0000000..c94f8c0
Binary files /dev/null and b/images/model8.jpg differ
diff --git a/images/model9.jpg b/images/model9.jpg
new file mode 100644
index 0000000..9b7df82
Binary files /dev/null and b/images/model9.jpg differ
diff --git a/images/parallax_cover1.jpg b/images/parallax_cover1.jpg
deleted file mode 100644
index 14a17c7..0000000
Binary files a/images/parallax_cover1.jpg and /dev/null differ
diff --git a/index.html b/index.html
index ef26b7a..4b241e4 100644
--- a/index.html
+++ b/index.html
@@ -1,30 +1 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>BlackBird Co.</title>
-    <meta name="description" content="">
-    <meta name="author" content="">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" href="css/style.css">
-    <link rel="icon" type="image/png" href="images/favicon.png">
-  </head>
-  <body>
-    <header class="bird-box">
-      <div class="back-bird"></div>
-      <div class="logo"></div>
-      <div class="fore-bird"></div>
-    </header>
-    <section class="content">
-      <article>
-        <h1>Clothing Store</h1>
-        <hr>
-        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.</p>
-        <hr>
-      </article>
-      <div style="height: 2000px"></div>
-    </section>
-    <script src="/js/jquery-2.1.3.min.js"></script>
-    <script src="/js/functions.js"></script>
-  </body>
-</html>
\ No newline at end of file
+<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>BlackBird Co.</title><meta name="description" content=""><meta name="author" content="Andrea Leone, Travis Neilson"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="css/style.css"><link rel="icon" type="image/png" href="images/logo.png"></head><script src="/js/jquery-2.1.3.min.js"></script><script src="/js/functions.js"></script><body><div id="load_screen"><div id="loading"><div id="loader-wrapper"><div id="loader"></div><div class="loader-section section-left"></div><div class="loader-section section-right"></div></div></div></div><header class="bird-box"><div class="back-bird"></div><div class="logo"></div><div class="fore-bird"></div></header><section class="content">   <article><h1 class="main-title h">Unique Stile</h1><h2 class="h">- Special sale for DevTips community members -</h2><hr class="h"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a posuere eros, vitae aliquam orci. Duis rutrum ipsum et mauris imperdiet tempus id quis risus. In tellus massa, imperdiet a sem vitae, dapibus feugiat urna. Etiam dapibus nisi vitae sapien consectetur, in finibus dui efficitur. Donec finibus tellus mi, vitae rhoncus velit lacinia non. Aliquam at convallis est. Nam nulla leo, accumsan eget suscipit sit amet, blandit eget magna.</p><hr class="h"><div class="clothes-pics"><div class="row img-row"><figure class="columns four"><div class="cover-image"><img src="/images/model1.jpg" class="h"></div><figcaption>BlackBird black Sweater - <strong>$135</strong></figcaption></figure><figure class="columns four"><div class="cover-image"><img src="/images/model2.jpg" class="h"></div><figcaption>BlackBird black Trousers - <strong>$85</strong></figcaption></figure><figure class="columns four"><div class="cover-image"><img src="/images/model3.jpg" class="h"></div><figcaption>BlackBird black Jacket - <strong>$95</strong></figcaption></figure></div><div class="row img-row"><figure class="columns four"><div class="cover-image"><img src="/images/model4.jpg" class="h"></div><figcaption>BlackBird Skinny Trousers - <strong>$75</strong></figcaption></figure><figure class="columns four"><div class="cover-image"><img src="/images/model8.jpg" class="h"></div><figcaption>BlackBird Jeans - <strong>$105</strong></figcaption></figure><figure class="columns four"><div class="cover-image"><img src="/images/model9.jpg" class="h"></div><figcaption>BlackBird Shorts - <strong>$95</strong></figcaption></figure></div><div class="row img-row"><figure class="columns four"><div class="cover-image"><img src="/images/model14.jpg" class="h"></div><figcaption>BlackBird Sweater - <strong>$115</strong></figcaption></figure><figure class="columns four"><div class="cover-image"><img src="/images/model7.jpg" class="h"></div><figcaption>BlackBird Sweater - <strong>$105</strong></figcaption></figure><figure class="columns four"><div class="cover-image"><img src="/images/model12.jpg" class="h"></div><figcaption>BlackBird Sweater - <strong>$115</strong></figcaption></figure></div></div><h1 class="h">Fine Tayloring</h1><hr class="h"><p>Quisque nec faucibus sapien. Nulla ac iaculis lorem. Pellentesque lacus dolor, euismod quis feugiat faucibus, vestibulum et est. Suspendisse tempus luctus neque at accumsan. Mauris sed mi est. Vivamus consectetur lacus quam, at suscipit libero dignissim non.        </p><hr class="h"><div class="large-window periscope-1 h"><div class="window-tint periscope-1"><div class="promo-text">Winter collection <br><a href="" class="window-cta">Shop Now</a></div></div></div><div class="large-window periscope-2 h"><div class="window-tint periscope-2"><div class="promo-text">Autumn collection <br><a href="" class="window-cta">Shop Now</a></div></div></div><h1 class="h">Latest News</h1><hr class="h"><p>Morbi luctus erat odio, non congue lectus porta ac. Morbi mattis mattis diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Here the latest articles:</p><hr class="h"><div class="blog-posts row"><div class="post columns four post-1"><h5>New Collection</h5><img src="/images/model15.jpg"><p>Incididunt ut labore et dolore magna.</p><p><a href="" class="button">Read More</a></p></div><div class="post columns four post-2"><h5>The Stylist</h5><img src="/images/model38.jpg"><p>Donec finibus tellus mi, vitae rhoncus velit lacinia non def curisti.</p><p><a href="" class="button">Read More</a></p></div><div class="post columns four post-3"><h5>New Collection</h5><img src="/images/model31.jpg"><p>Duis aute irure dolor in reprehenderit.</p><p><a href="" class="button">Read More</a></p></div><div class="post columns twelve post-4"><h5>Membership</h5><img src="/images/DevTips.png"><p>Integer pharetra urna ut volutpat ornare. Praesent pharetra ut enim et<br>sodales. Cras sagittis suscipit dui, imperdiet felis impredet.</p><p><a href="" class="button">Read More</a></p></div></div></article></section></body><footer><div class="row footer-stuff"><div class="columns three"><strong>FIND US ON:</strong><ul><li><a href="">Twitter</a></li><li><a href="">Facebook</a></li><li><a href="">Pinterest</a></li><li><a href="">Instagram</a></li></ul></div><div class="columns three"><strong>OTHER SHOPS:</strong><ul><li><a href="">Red Robin</a></li><li><a href="">Emerald Eagle</a></li><li><a href="">Crimson Crane</a></li><li><a href="">Auburn Abbot</a></li></ul></div><div class="columns six"><p>If you want, you can sign up for our monthly newsletter:</p><form class="row"><div class="columns eight"><input type="email" placeholder="Your Email" class="u-full-width"></div><div class="columns four"><input type="submit" value="submit" class="button"></div></form></div></div></footer></html>
\ No newline at end of file
diff --git a/index.jade b/index.jade
index 63fab86..74a863b 100644
--- a/index.jade
+++ b/index.jade
@@ -4,33 +4,139 @@ html(lang="en")
     meta(charset="utf-8")
     title BlackBird Co.
     meta(name="description", content="")
-    meta(name="author", content="")
+    meta(name="author", content="Andrea Leone, Travis Neilson")
     meta(name="viewport", content="width=device-width, initial-scale=1")
     link(rel="stylesheet", href="css/style.css")
-    link(rel="icon", type="image/png", href="images/favicon.png")
+    link(rel="icon", type="image/png", href="images/logo.png")
+  
+  script(src="/js/jquery-2.1.3.min.js")
+  script(src="/js/functions.js")
   
   body
-    
+  
+    #load_screen
+      #loading
+        #loader-wrapper
+          #loader
+          .loader-section.section-left
+          .loader-section.section-right
+          
     header.bird-box
       .back-bird
       .logo
       .fore-bird
       
+    section.content    
     
-    section.content
-      
       article
+        h1.main-title.h Unique Stile
+        h2.h - Special sale for DevTips community members -
+        hr.h
+        p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas a posuere eros, vitae aliquam orci. Duis rutrum ipsum et mauris imperdiet tempus id quis risus. In tellus massa, imperdiet a sem vitae, dapibus feugiat urna. Etiam dapibus nisi vitae sapien consectetur, in finibus dui efficitur. Donec finibus tellus mi, vitae rhoncus velit lacinia non. Aliquam at convallis est. Nam nulla leo, accumsan eget suscipit sit amet, blandit eget magna.
+        hr.h
+
+        .clothes-pics
+          .row.img-row
+            figure.columns.four
+              .cover-image
+                img(src="/images/model1.jpg").h
+              figcaption BlackBird black Sweater - <strong>$135</strong>
+            figure.columns.four
+              .cover-image
+                img(src="/images/model2.jpg").h
+              figcaption BlackBird black Trousers - <strong>$85</strong>
+            figure.columns.four
+              .cover-image
+                img(src="/images/model3.jpg").h
+              figcaption BlackBird black Jacket - <strong>$95</strong>
+          .row.img-row
+            figure.columns.four
+              .cover-image
+                img(src="/images/model4.jpg").h
+              figcaption BlackBird Skinny Trousers - <strong>$75</strong>
+            figure.columns.four
+              .cover-image
+                img(src="/images/model8.jpg").h
+              figcaption BlackBird Jeans - <strong>$105</strong>
+            figure.columns.four
+              .cover-image
+                img(src="/images/model9.jpg").h
+              figcaption BlackBird Shorts - <strong>$95</strong>
+          .row.img-row
+            figure.columns.four
+              .cover-image
+                img(src="/images/model14.jpg").h
+              figcaption BlackBird Sweater - <strong>$115</strong>
+            figure.columns.four
+              .cover-image
+                img(src="/images/model7.jpg").h
+              figcaption BlackBird Sweater - <strong>$105</strong>
+            figure.columns.four
+              .cover-image
+                img(src="/images/model12.jpg").h
+              figcaption BlackBird Sweater - <strong>$115</strong>
+    
+        h1.h Fine Tayloring
+        hr.h
+        p Quisque nec faucibus sapien. Nulla ac iaculis lorem. Pellentesque lacus dolor, euismod quis feugiat faucibus, vestibulum et est. Suspendisse tempus luctus neque at accumsan. Mauris sed mi est. Vivamus consectetur lacus quam, at suscipit libero dignissim non.        
+        hr.h
         
-        h1 Clothing Store
-        
-        hr
+        .large-window.periscope-1.h
+          .window-tint.periscope-1
+            .promo-text Winter collection <br>
+              a(href="").window-cta Shop Now
+        .large-window.periscope-2.h
+          .window-tint.periscope-2
+            .promo-text Autumn collection <br>
+              a(href="").window-cta Shop Now
         
-        p Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.
+        h1.h Latest News
+        hr.h
+        p Morbi luctus erat odio, non congue lectus porta ac. Morbi mattis mattis diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br>Here the latest articles:
+        hr.h
         
-        hr
-
+        .blog-posts.row
+          .post.columns.four.post-1
+            h5 New Collection
+            img(src="/images/model15.jpg")
+            p Incididunt ut labore et dolore magna.
+            p: a.button(href="") Read More
+          .post.columns.four.post-2
+            h5 The Stylist
+            img(src="/images/model38.jpg")
+            p Donec finibus tellus mi, vitae rhoncus velit lacinia non def curisti.
+            p: a.button(href="") Read More
+          .post.columns.four.post-3
+            h5 New Collection
+            img(src="/images/model31.jpg")
+            p Duis aute irure dolor in reprehenderit.
+            p: a.button(href="") Read More
+          .post.columns.twelve.post-4
+            h5 Membership
+            img(src="/images/DevTips.png")
+            p Integer pharetra urna ut volutpat ornare. Praesent pharetra ut enim et<br>sodales. Cras sagittis suscipit dui, imperdiet felis impredet.
+            p: a.button(href="") Read More
         
-      div(style="height: 2000px")
-
-    script(src="/js/jquery-2.1.3.min.js")
-    script(src="/js/functions.js")
+  footer
+      .row.footer-stuff
+        .columns.three
+          strong FIND US ON:
+          ul
+            li: a(href="") Twitter
+            li: a(href="") Facebook
+            li: a(href="") Pinterest
+            li: a(href="") Instagram
+        .columns.three
+          strong OTHER SHOPS:
+          ul
+            li: a(href="") Red Robin
+            li: a(href="") Emerald Eagle
+            li: a(href="") Crimson Crane
+            li: a(href="") Auburn Abbot
+        .columns.six
+          p If you want, you can sign up for our monthly newsletter:
+          form.row
+            .columns.eight
+              input.u-full-width(type="email" placeholder="Your Email")
+            .columns.four
+              input.button(type="submit" value="submit")
\ No newline at end of file
diff --git a/js/functions.js b/js/functions.js
index 851342e..62fdb81 100644
--- a/js/functions.js
+++ b/js/functions.js
@@ -1,17 +1,39 @@
-$(window).scroll(function(){
-
-  var wScroll = $(this).scrollTop();
-
-  $('.logo').css({
-    'transform' : 'translate(0px, '+ wScroll /2 +'%)'
-  });
-
-  $('.back-bird').css({
-    'transform' : 'translate(0px, '+ wScroll /4 +'%)'
-  });
+window.addEventListener("load", function () {
+    var load_screen = document.getElementById("load_screen");
+    document.body.removeChild(load_screen);
+});
 
-  $('.fore-bird').css({
-    'transform' : 'translate(0px, -'+ wScroll /40 +'%)'
-  });
 
-});
+$(window).scroll(function(){
+  var wScroll = $(this).scrollTop();
+  $('.logo').css({'transform' : 'translate(0px, '+ wScroll /2 +'%)'});
+  $('.back-bird').css({'transform' : 'translate(0px, '+ wScroll /4 +'%)'});
+  $('.fore-bird').css({'transform' : 'translate(0px, '+ wScroll /14 +'%)'});
+    
+  if(wScroll > $('.clothes-pics').offset().top - ($(window).height() / 1.2)) {
+    $('.clothes-pics figure').each(function(i){
+      setTimeout(function(){
+        $('.clothes-pics figure').eq(i).addClass('is-showing');
+      }, 150 * (i+1));
+    });
+  };
+    
+  if(wScroll > $('.large-window').offset().top - $(window).height()){
+    $('.large-window').css({'background-position':'center '+ (-wScroll / 35) +'px'});
+    var opacity1 = (wScroll - $('.large-window').offset().top + 400) / (wScroll / 6);
+    var opacity2 = (wScroll - $('.large-window').offset().top + 400 - 640) / (wScroll / 6);
+    $('.window-tint.periscope-1').css({'opacity': opacity1});
+    $('.window-tint.periscope-2').css({'opacity': opacity2});
+  };
+    
+  if(wScroll > $('.blog-posts').offset().top - $(window).height()){
+    var offset = Math.min(0, wScroll - $('.blog-posts').offset().top +$(window).height() - 500);
+    $('.post-1').css({'transform': 'translate('+ offset +'px, '+ Math.abs(offset * 0.3) +'px)'});
+    $('.post-2').css({'transform': 'translate(0px, '+ Math.abs(offset * 0.3) +'px)'});
+    $('.post-3').css({'transform': 'translate('+ Math.abs(offset) +'px, '+ Math.abs(offset * 0.3) +'px)'});
+  };
+  if(wScroll > $('.blog-posts').offset().top - $(window).height()){
+    var offset = Math.min(0, wScroll - $('.blog-posts').offset().top +$(window).height() - 800);
+    $('.post-4').css({'transform': 'translate(0px, '+ Math.abs(offset * 0.3) +'px)'});
+  };
+});
\ No newline at end of file
diff --git a/js/min/functions-min.js b/js/min/functions-min.js
deleted file mode 100644
index 266b986..0000000
--- a/js/min/functions-min.js
+++ /dev/null
@@ -1,19 +0,0 @@
-$(window).scroll(function(){
-
-  var wScroll = $(this).scrollTop();
-
-  $('.logo').css({
-    'transform' : 'translate(0px, '+ wScroll /2 +'%)'
-  });
-
-  $('.back-bird').css({
-    'transform' : 'translate(0px, '+ wScroll /4 +'%)'
-  });
-
-  $('.fore-bird').css({
-    'transform' : 'translate(0px, -'+ wScroll /40 +'%)'
-  });
-
-});
-
-
diff --git a/readme.html b/readme.html
new file mode 100644
index 0000000..55f8914
--- /dev/null
+++ b/readme.html
@@ -0,0 +1,85 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8"/>
+</head>
+<body>
+<h1 id="parallaxontheweb-projectfiles">Parallax On The Web - Project Files</h1>
+
+<p>Video Series <a href="https://www.youtube.com/playlist?list=PLqGj3iMvMa4IyCbhul-PdeiDqmh4ooJzk"> for free on YouTube</a> on the <a href="https://www.youtube.com/user/DevTipsForDesigners">DevTips</a> Channel</p>
+
+<h2 id="releases">Releases</h2>
+
+<p>Releases correspond to the videos. Visit the releases page on this repo to find the specific state of the code base. In other words; if you are watching video 2 and want to grab the code form that point. You will want to look for that <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases">here</a>, or below.</p>
+
+<h2 id="video1-introtoparallaxontheweb">Video 1 - &#8220;Intro to Parallax on the Web&#8221;</h2>
+
+<p><a href="https://youtu.be/STwoa-9jxi0"><img src="https://i.ytimg.com/vi/STwoa-9jxi0/mqdefault.jpg"><br>Watch on YouTube</a></p>
+
+<ul>
+<li>There is no code for this video, it&#8217;s an introductory video</li>
+</ul>
+
+<h2 id="video2-parallaxheader">Video 2 - &#8220;Parallax Header&#8221;</h2>
+
+<p><a href="https://youtu.be/WTZpNAbz3jg"><img src="https://i.ytimg.com/vi/WTZpNAbz3jg/mqdefault.jpg"><br>Watch on YouTube</a></p>
+
+<ul>
+<li>This is where the project starts. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.0">Get the code</a>.</li>
+<li>This is where the project stops at the end of this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.1">Get the code</a>.</li>
+</ul>
+
+<h2 id="video3-landingelements">Video 3 - &#8220;Landing Elements&#8221;</h2>
+
+<p><a href="https://youtu.be/-iOdDz2LnEk"><img src="https://i.ytimg.com/vi/-iOdDz2LnEk/mqdefault.jpg"><br>Watch on YouTube</a></p>
+
+<ul>
+<li>Grab the code we wrote in this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.2">Get the code</a>.</li>
+</ul>
+
+<h2 id="video4-theperiscope">Video 4 - &#8220;The Periscope&#8221;</h2>
+
+<p><a href="https://youtu.be/uYPdA_SFSDw"><img src="https://i.ytimg.com/vi/uYPdA_SFSDw/mqdefault.jpg"><br>Watch on YouTube</a></p>
+
+<ul>
+<li>Grab the code we wrote in this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.3">Get the code</a>.</li>
+</ul>
+
+<h2 id="video5-zoomingthumbnails">Video 5 - &#8220;Zooming Thumbnails&#8221;</h2>
+
+<p><a href="https://youtu.be/KzP7YXcHNcE"><img src="https://i.ytimg.com/vi/KzP7YXcHNcE/mqdefault.jpg"><br>Watch on YouTube</a></p>
+
+<ul>
+<li>Grab the code we wrote in this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.4">Get the code</a>.</li>
+</ul>
+
+<h2 id="video6-promo-scope">Video 6 - &#8220;Promo-Scope&#8221;</h2>
+
+<p><a href="https://youtu.be/zEXubVd_y_M"><img src="https://i.ytimg.com/vi/zEXubVd_y_M/mqdefault.jpg"><br>Watch on YouTube</a></p>
+
+<ul>
+<li>Grab the code we wrote in this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.5">Get the code</a>.</li>
+</ul>
+
+<h2 id="video7-floatingelements">Video 7 - &#8220;Floating Elements&#8221;</h2>
+
+<p><a href="https://youtu.be/LoouHSB0BMM"><img src="https://i.ytimg.com/vi/LoouHSB0BMM/mqdefault.jpg"><br>Watch on YouTube</a></p>
+
+<ul>
+<li>Grab the code we wrote in this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.6">Get the code</a>.</li>
+</ul>
+
+<h2 id="video8-revealedfooter">Video 8 - &#8220;Revealed Footer&#8221;</h2>
+
+<p><a href="https://youtu.be/VH0iYda6KNs"><img src="https://i.ytimg.com/vi/VH0iYda6KNs/mqdefault.jpg"><br>Watch on YouTube</a></p>
+
+<ul>
+<li>Grab the code we wrote in this video. <a href="https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.7">Get the code</a>.</li>
+</ul>
+
+<hr />
+
+<p><em>If this stuff is helpful, consider subscribing to my <a href="https://www.youtube.com/user/DevTipsForDesigners">YouTube Channel</a></em></p>
+
+</body>
+</html>
diff --git a/readme.md b/readme.md
index 3c95fca..c265ffe 100644
--- a/readme.md
+++ b/readme.md
@@ -1,26 +1,4 @@
-# Parallax On The Web - Project Files
+# DevTips Show: Parallax On The Web
 
-Video Series [ for free on YouTube](https://www.youtube.com/playlist?list=PLqGj3iMvMa4IyCbhul-PdeiDqmh4ooJzk) on the [DevTips](https://www.youtube.com/user/DevTipsForDesigners) Channel
-
-## Releases
-
-Releases correspond to the videos. Visit the releases page on this repo to find the specific state of the code base. In other words; if you are watching video 2 and want to grab the code form that point. You will want to look for that [here](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases), or below.
-
-## Video 1 - "Intro to Parallax on the Web"
-
-<a href="https://youtu.be/STwoa-9jxi0"><img src="https://i.ytimg.com/vi/STwoa-9jxi0/mqdefault.jpg"><br>Watch on YouTube</a>
-
-- There is no code for this video, it's an introductory video
-
-
-
-## Video 2 - "Parallax Header"
-
-<a href="https://youtu.be/WTZpNAbz3jg"><img src="https://i.ytimg.com/vi/WTZpNAbz3jg/mqdefault.jpg"><br>Watch on YouTube</a>
-
-- This is where the project starts. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.0).
-- This is where the project stops at the end of this video. [Get the code](https://github.com/DevTips/Parallax-on-the-Web-DevTips-/releases/tag/v0.1).
-
----
-
-_If this stuff is helpful, consider subscribing to my [YouTube Channel](https://www.youtube.com/user/DevTipsForDesigners)_
+That's what I've been messing with watching <a href="http://https://www.youtube.com/user/DevTipsForDesigners">DevTips</a>.
+Updated to the last episode.