html, body { width: 100%; height: 100%;}

    body {
      background-color: #f2f2f2;
      /*overflow-x: hidden;*/
    }

    @media only screen and (max-width : 768px) {
      body {
        /*overflow-y: scroll; /* has to be scroll, not auto */*/
        /*-webkit-overflow-scrolling: touch;*/
      }
    }

    @media only screen and (min-width : 1025px) {
      .background-texture {
        background-image: url("../images/backgrounds/bedge-grunge.png");
        background-blend-mode: multiply;
      }
    }

    /*#overflow-wrapper {
      width: 100%;
      height: 100%;
    }

    @media only screen and (max-width : 768px) {
      #overflow-wrapper {
        overflow-x: hidden;
      }
    }*/



/*=====================================================================
  LOAD FONTS
  =====================================================================*/

    @font-face {
      font-family: 'NittiExtraLight';
      src: url('../type/nittigrotesk-extralight-v20.eot'); /* IE9 Compat Modes */
      src: url('../type/nittigrotesk-extralight-v20.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../type/nittigrotesk-extralight-v20.woff') format('woff'); /* Modern Browsers */
    }

    @font-face {
      font-family: 'NittiLight';
      src: url('../type/nittigrotesk-light-v20.eot'); /* IE9 Compat Modes */
      src: url('../type/nittigrotesk-light-v20.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../type/nittigrotesk-light-v20.woff') format('woff'); /* Modern Browsers */
    }

    @font-face {
      font-family: 'NittiSemiLight';
      src: url('../type/nittigrotesk-semilight-v20.eot'); /* IE9 Compat Modes */
      src: url('../type/nittigrotesk-semilight-v20.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../type/nittigrotesk-semilight-v20.woff') format('woff'); /* Modern Browsers */
    }

    @font-face {
      font-family: 'NittiNormal';
      src: url('../type/nittigrotesk-normal-v20.eot'); /* IE9 Compat Modes */
      src: url('../type/nittigrotesk-normal-v20.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
           url('../type/nittigrotesk-normal-v20.woff') format('woff'); /* Modern Browsers */
    }

/*=====================================================================
  HEADER
  =====================================================================*/
    div {
      z-index: 100;
    }
    #header-img {
      width: 100%;
      height: 100%;
      background-size: cover;
      background-position: center bottom;
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-color: #222;

      -webkit-box-box-shadow: inset 0 -10px 20px -10px rgba(0,0,0,0.3);
      -moz-box-box-shadow: inset 0 -10px 20px -10px rgba(0,0,0,0.3);
      box-shadow: inset 0 -10px 20px -10px rgba(0,0,0,0.3);
    }

    @media only screen and (max-width : 1025px) {
      #header-img {
        /*background-size: auto 120%;*/
        background-size: auto 120%;
        /*background-position: 45% 0%;*/
        background-attachment: scroll;
      }
    }

    #header-img::before {
      width: 100%;
      height: 100%;
      background-image: url("../images/backgrounds/bedge-grunge.png");
      /*background-blend-mode: multiply;*/
    }

    #header-logo {
      position: absolute;
      bottom: 0;
      margin: 0;
      width: 100%;
    }

    #logo {
      position: absolute;
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
      bottom: 0;
      width: 55%;
      display: none;
    }

    @media only screen and (max-width: 992px){

    }
    @media only screen and (max-width : 768px) {
      #logo {
        width: 85%;
      }
    }

    #header-text-box {
      /*position: absolute;
      bottom: 0;*/
      /*margin-bottom: 4rem;*/
      margin-left: auto;
      margin-right: auto;
      left: 0;
      right: 0;
      /*margin-bottom: -7rem;*/
    }

    #header-spacer {
      height: 3rem;
    }

    #header-arrow {
      color: white;
      position: absolute;
      bottom: 2rem;
      margin: 0;
      width: 100%;
    }

    #header-arrow img {
      width: 2.7rem;
    }

    #header-arrow img, #logo {
      -webkit-filter: drop-shadow( 5px 5px 5px rgba(0,0,0,.2) );
              filter: drop-shadow( 5px 5px 5px rgba(0,0,0,.2) ); /* Same syntax as box-shadow */
    }



/*=====================================================================
  TYPOGRAPHY
  =====================================================================*/

    html, body { font-size: 1em; line-height: 1.5em; }
    @media only screen and (max-width: 992px){
      html, body { font-size: .9em; line-height: 1.35em; }
    }
    @media only screen and (max-width : 768px) {
      html, body { font-size: .8em; line-height: 1.2em; }
    }

    * { font-size: inherit; font-weight: normal; }

    body {
      font-family: 'NittiNormal', 'Helvetica Neue', helvetica, arial, sans-serif;
      color: black;
    }

    .text-xxs {
      font-size: .5rem;
      letter-spacing: 1px;
    }
    @media only screen and (max-width : 768px) {
      .text-xxs {
        font-size: .6rem;
        letter-spacing: 1px;
      }
    }

    .text-xs {
      font-size: .8rem;
    }

    .text-sm {
      font-size: .9rem;
      line-height: 1.45rem;
    }

    .text-md {
      font-size: 1.15rem;
      line-height: 2rem;
    }

    .text-lg {
      font-size: 1.3rem;
      line-height: 2rem;
    }

    .text-xl {
      font-size: 1.6rem;
      line-height: 2.2rem;
    }

    .text-xxl {
      font-size: 2rem;
      line-height: 2.6rem;
    }

    .text-xxxl {
      font-size: 3rem;
      line-height: 2.6rem;
    }

    .text-weight-extralight {
      font-family: 'NittiExtraLight', 'Helvetica Neue', helvetica, arial, sans-serif;
    }

    .text-weight-light {
      font-family: 'NittiLight', 'Helvetica Neue', helvetica, arial, sans-serif;
    }

    .text-weight-semilight {
      font-family: 'NittiSemiLight', 'Helvetica Neue', helvetica, arial, sans-serif;
    }

    .text-weight-normal {
      font-family: 'NittiNormal', 'Helvetica Neue', helvetica, arial, sans-serif;
    }

    .text-indent {
      text-indent: 2rem;
    }

    p, h1, h2, h4, h3 {
      margin: 0;
    }

/*=====================================================================
  LINKS
  =====================================================================*/

    a, a:hover, a:visited, a:active, a:focus {
      text-decoration: none;
      color: black;
    }

    .dark a {
      color: white;
    }

    a.underline {
      border-bottom: 1px #ddd solid;
    }

    a.underline:hover {
      border-bottom: 1px #bbb solid;
    }

    a.medium-bg.underline{
      border-bottom: 1px #ddd solid;
    }

    a.medium-bg.underline:hover {
      border-bottom: 1px #eee solid;
    }

    a.dark-bg.underline{
      border-bottom: 1px #444 solid;
    }

    a.dark-bg.underline:hover {
      border-bottom: 1px #666 solid;
    }

/*=====================================================================
  CONTAINERS
  =====================================================================*/

    .dark {
      background-color: #222;
      color: #fff;
    }

    .medium {
      background-color: #cac8c9;
    }

    .bottom-space-md {
      padding-bottom: 6rem;
    }

    @media only screen and (max-width : 768px) {
      .bottom-space-md {
        padding-bottom: 3rem;
      }
    }

    .bottom-space-sm {
      padding-bottom: 3rem;
    }

    .top-space-sm {
      padding-top: 3rem;
    }

/*=====================================================================
  HEADER NAV
  =====================================================================*/

    #nav-fixed {
      position: fixed;
      top: 0;
      width: 100%;
      background-color: #fff;
      /*height: 50px;*/
      padding: 1.5rem 0 1.3rem 0;
      z-index: 1000;
      /*-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .02);
      -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .02);
      box-shadow: 0px 1px 3px rgba(0, 0, 0, .02);*/
      -moz-box-shadow: 0px 3px 5px rgba(0, 0, 0, .05);
      -webkit-box-shadow: 0px 3px 5px rgba(0, 0, 0, .05);
      box-shadow: 0px 3px 5px rgba(0, 0, 0, .05);
      /*display: none;*/
      transition: transform 200ms linear;
      -webkit-transition: -webkit-transform 200ms linear;
    }

    #nav-fixed img {
      height: 1.5rem;
      position: relative;
      top: 1px;
    }

    .nav-pinned {
      transform: translateY(0%);
      -webkit-transform: translateY(0%);
    }

    .nav-unpinned {
      transform: translateY(-100%);
      -webkit-transform: translateY(-100%);
    }

/*=====================================================================
  HAIRLINE RULE
  =====================================================================*/

    hr {
      display: block;
      height: 1px;
      border: 0;
      border-top: 2px solid white;
      margin: 1em auto;
      padding: 0;
      width: 30%;
    }

    .medium hr {
      border-top: 2px solid #ddd;
    }

    .dark hr {
      border-top: 2px solid black;
    }

/*=====================================================================
  VIDEO
  =====================================================================*/

    .video {
      padding-top: 2rem;
      padding-bottom: 2rem;
      /*margin-left: 15px;
      margin-right: 15px;*/
    }

    @media only screen and (max-width : 768px) {
      .video {
        padding-left: 0;
        padding-right: 0;
      }
    }

    #first-video {
      margin-top: -3rem;
      padding-bottom: 3rem;
    }

    @media only screen and (max-width : 768px) {
      #first-video {
        margin-top: 0;
      }
    }

    .embed-container {
      -webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.1);
      -moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.1);
      box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.1);
    }

/*=====================================================================
  TEXT BOX
  =====================================================================*/

    .text-box {
      background: #fff;
      padding: 2rem 4rem;

      -webkit-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
      -moz-box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
      box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.1);
    }

    @media only screen and (max-width : 768px) {
      .text-box-mobile {
        padding-left: 0;
        padding-right: 0;
        margin-bottom: 3rem;
      }
    }



    #first-text-box {
      /*position: relative;
      bottom: 7rem;
      margin-bottom: -7rem;*/
      /*background: transparent;
      padding: 2rem 4rem;
      color: #fff;*/
    }

    #second-text-box, #third-text-box {
      position: relative;
      bottom: 3rem;
      margin: 0 0 -3rem 0;
    }

    @media only screen and (max-width : 768px) {
      #second-text-box {
        bottom: 0;
        margin-bottom: 0;
      }
    }

/*=====================================================================
  LISTS
  =====================================================================*/

    ul {
      list-style-type: none;
      padding: 0;
      margin: 0;
    }

    li.list-title span {
      border-bottom: 1px solid;
    }

    ul.text-md {
      line-height: 1.2rem;
    }

    li {
      margin-bottom: .7rem;
    }

/*=====================================================================
  TUMBLR
  =====================================================================*/

    #tumblr {
      margin-top: 2rem;
      margin-bottom: 2rem;
    }

    #tumblr img {
      width: 100%;
    }

    #tumblr img, .text-entry {
      -webkit-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.1);
      -moz-box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.1);
      box-shadow: 5px 5px 10px 0px rgba(0,0,0,0.1);
    }

    .text-entry {
      background: white;
      /*white-space: nowrap;*/
      /*box-sizing: border-box;
      width: 12em;
      overflow: hidden;
      text-overflow: ellipsis;*/
      padding: 1.5rem;
    }

    .text-entry p {
      display: block;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    #tumblr h1 {
      margin-top: 1rem;
      line-height: 1rem;
    }

/*=====================================================================
  FOOTER
  =====================================================================*/

    footer {
      padding-top: 5rem;
      padding-bottom: 5rem;
    }

/*=====================================================================
  CONTAINERS
  =====================================================================*/

    #client-list {
      margin-top: 1rem;
    }

    @media only screen and (max-width : 768px) {
      #client-list {
        padding-bottom: 3rem;
      }
    }

    .print-work {
      padding: 0;
    }

    @media only screen and (max-width : 768px) {
      .print-work {
        padding-bottom: .5rem;
        padding-top: .25rem;
      }
    }

/*=====================================================================
  SORT
  =====================================================================*/

    .print-work img {
      width: 100%;
    }