/* Make Firefox images scale with screen width. The width:100% messes up on Safari */
@-moz-document url-prefix() {  
  img {   
    width: 100%;   
  }
}


  /* Site Styles
================================================== */
  
  body { font: 15px/27px "ff-tisa-web-pro",serif; 
         font-family: Helvetica Neue, sans-serif; 
         font-style: normal; 
         font-weight: 300; 
         font-size: 100%;
         letter-spacing: 0.03em; }

  body, li, select, input, textarea { color: #777; }

  /* Highlight colors */
  ::-moz-selection{background: #333; color: #fff; text-shadow: none;}
  ::selection {background: #333; color: #fff; text-shadow: none;} 
  ins {background-color: #333; color: #000; text-decoration: none;}
  mark {background-color: #333; color: #000; font-style: italic; font-weight: bold;}

/* #Basic
================================================== */

  html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video {
    margin: 0;
    vertical-align: baseline;
    background: transparent;
    font-weight: 300; 
  }                 
  
  article, aside, figure, footer, header, hgroup, nav, section { display: block; }


/* #Typography
================================================== */

  h3 { font-size: 17px; }

  p { margin: 0 0 20px 0; line-height: 18px; }
  p.content { font-size: 14px; line-height: 25px; }


  a.header { color: #FFFFFF; text-decoration: none; }
  a.link { color: #002CEE; text-decoration: none; }
  a.visited { color: #002CEE; }

  ul { list-style-type:square; list-style-position:outside; line-height: 2.0em; }
  ul.content { font-size: 14px; line-height: 30px; margin-left: 20px; padding: 0px; margin-top: -1em; }
  ul.content2 { font-size: 14px; line-height: 30px; margin-left: 20px; padding: 0px; }

  img.resize {
    width:100%; /* you can use % */
    height: auto;
}


  .button {
  padding: .6em;
  cursor: pointer;
  text-decoration: none;
  color: #C3CDD5;
  border-style: solid;
  border-width: 1px;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  }

  .border-fade {
    display: inline-block;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: box-shadow; opacity;
    transition-property: box-shadow; opacity;
    -webkit-transform: translateZ(1);
    transform: translateZ(1);
    box-shadow: inset 0 0 0 4px #333333, 1 1 1px rgba(0, 0, 0, 0);
    }

  .border-fade:hover, .border-fade:focus, .border-fade:active {
    box-shadow: 1px 1px 1px #888888;
    opacity: .8;
    }

  .portfolio_button { font-size: 13px; color: #777; line-height: 22px; }


  .bold {font-weight: bold;}
  .spacing { word-spacing: normal; }
  .line { 
  background-color: #E5E5E5; 
  display: block;
  font-size: 0.1em;
  line-height: .1;
  padding: .05em;
  margin: 0;
  margin-top: 5px;
  margin-bottom: 15px;
  }


    /* Subnav
================================================== */

  .sub_nav { padding: .6em; background-color: #b0e0e6; word-spacing: 10px; font-size: 14px // 1rem = 14px; color: #6A6868; line-height: 20px; padding-top: 87px; }
   @media screen and (min-width: 300px){
  .sub_nav{
    font-size: 12px;
    }
  }
  @media screen and (min-width: 570px){
  .sub_nav{
    font-size: 12px;
    }
  }
  @media screen and (min-width: 620px){
  .sub_nav{
    font-size: 12px;
    }
  }
  @media screen and (min-width: 680px){
  .sub_nav{
    font-size: 12px;
    }
  }
  @media screen and (min-width: 720px){
  .sub_nav{
    font-size: 12px;
    }
  }
  @media screen and (min-width: 800px){
  .sub_nav{
    font-size: 13px;
    }
  }
  @media screen and (min-width: 860px){
  .sub_nav{
    font-size: 13px;
    }
  }
  @media screen and (min-width: 920px){
  .sub_nav{
    font-size: 13px;
    }
  }
  @media screen and (min-width: 1000px){
  .sub_nav{
    font-size: 14px;
    }
  }

  .sub_nav_opacity { opacity:.5; }



    /* Masthead
================================================== */

.masthead {
  position: fixed;
  min-height: 3.75em;
  background-color: #333333;
  width: 100%;
  top: 0;
  left: 0; 
  z-index: 2; }
  .masthead.absolute {
    position: absolute; }
  .masthead .masthead__logo {
    max-width: 30em;
    margin: 0;
    padding: 0.625em 0; }


.masthead__navigation {
  position: relative;
  right: 20px;
  bottom: 20px; }

  @media screen and (min-width: 300px){
  .masthead__navigation{
     right: 10px;
     bottom: 20px; 
   }
  }
    @media screen and (min-width: 570px){
    .masthead__navigation{
     right: 20px;
     bottom: 20px; 
   }
  }


#nav1 { 
  background-color: #333333; 
  color: #ffffff;
  display: block;
  font-size: 0.875em;
  line-height: 1;
  padding: 1.07143em;
  margin: 0;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.125em;
  }
  

#nav2 { 
  background-color: #777777; 
  color: #ffffff;
  display: block;
  font-size: 0.875em;
  line-height: 1;
  padding: 1.07143em;
  margin: 0;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 0.125em;
  }


  .menu {
    position: absolute;
    bottom: 0;
    right: 0; 
  }

@media screen and (min-width: 300px){
  .menu{
    font-size: 10px;
    bottom: 5px;
    }
  }
  @media screen and (min-width: 570px){
    .menu{
    font-size: 14px;
    bottom: 0px;
  }
}
@media screen and (min-width: 620px){
  .menu{
    font-size: 14px;
    bottom: 0px;
  }
}
@media screen and (min-width: 680px){
  .menu{
    font-size: 14px;
    bottom: 0px;
  }
}
@media screen and (min-width: 720px){
  .menu{
    font-size: 14px;
    bottom: 0px;
  }
}
@media screen and (min-width: 800px){
  .menu{
    font-size: 14px;
    bottom: 0px;
  }
}
@media screen and (min-width: 860px){
  .menu{
    font-size: 14px;
    bottom: 0px;
  }
}
@media screen and (min-width: 920px){
  .menu{
    font-size: 14px;
    bottom: 0px;
  }
}
@media screen and (min-width: 1000px){
  .menu{
    font-size: 14px;
    bottom: 0px;
  }
}

    .menu > ul > li {
      display: inline-block;
      position: relative;
      z-index: 100; }


    p.header { font-size: 24px // 1rem = 24px; color: #ffffff; margin: 20px; letter-spacing: 0.025em; }
  @media screen and (min-width: 300px){
  p.header{
    font-size: 14px;
    }
  }
  @media screen and (min-width: 570px){
  p.header{
    font-size: 15px;
    }
  }
  @media screen and (min-width: 620px){
  p.header{
    font-size: 16px;
    }
  }
  @media screen and (min-width: 680px){
  p.header{
    font-size: 17px;
    }
  }
  @media screen and (min-width: 720px){
  p.header{
    font-size: 18px;
    }
  }
  @media screen and (min-width: 800px){
  p.header{
    font-size: 19px;
    }
  }
  @media screen and (min-width: 860px){
  p.header{
    font-size: 20px;
    }
  }
  @media screen and (min-width: 920px){
  p.header{
    font-size: 21px;
    }
  }
  @media screen and (min-width: 1000px){
  p.header{
    font-size: 24px;
    }
  }