@mixin border-radius($pixels) {
  border-radius:#{$pixels};
  -moz-border-radius:#{$pixels};
  -webkit-border-radius:#{$pixels};
  -o-border-radius:#{$pixels};
  -ms-border-radius:#{$pixels};
}

#custom-header {
  background: #00004b;
  position:relative;
  border-bottom:1px solid #e0e0e0;
  overflow: visible;
  .logo-container {
    float:left;
    max-width:275px;
    transform: scale(0.75);
  	  transform-origin: left center;
  }
  nav {
    float:right;
    & > a {
      margin-right:30px;
    }
    & > a, .show-updates-dropdown {
      color: #FFF;
      display:inline-block;
      font:14px/20px "lato", sans-serif; font-weight:400; text-decoration:none;
    }
	@media screen and (min-width: 901px) {
		transform: translateY(100%);
	}
  }
  .updates-dropdown {
    right: 0px;
  }

  @media screen and (min-width: 901px) {
    .logo-container {
      position:relative;
      top:0;
      padding-top:7px;
      padding-bottom:10px;
    }
    nav > a {
      position:relative;
      top:1px;
    }
    .show-updates-dropdown {
      @include border-radius(4px);
      padding:8px 18px 7px;
      border:2px solid rgba(255,255,255,.6);
      &:hover {
        border-color:rgba(255,255,255,.8);  
      }
    }
  }

  @media screen and (max-width: 900px) {
    text-align:center;
    padding-left:5%;
    padding-right:5%;
    padding-bottom:18px;
    .logo-container {
      float:none;
      display:block;
      margin-bottom:18px;
      max-width:none;
      .logo {
        max-width:325px;
        display:inline-block;
      }
    }  
    nav {
      float:none;
    }
    nav > a, .updates-dropdown-container {
      float:none;
    }
  }

  @media screen and (max-width: 475px) {
    nav {
      & > a {
        margin-right:20px; 
      }
      & > a, .show-updates-dropdown {
        font-size:13px;
      }        
    }
    .logo-container .logo {
      max-width:70%; 
    }
    nav > a:nth-child(1):before {
      content:none;
    }
  }
}





#custom-footer {
  padding:20px 40px;
  color:#888; 
  font-size:14px;
  background-color:#333434;
  .logo {
    max-width:150px;
    display:inline-block;
  }
  & > div {
    position:relative;
    top:2px;
  }
  .meta {
    float:right;
  }
  .links {
    float:right;
    margin-left:30px;
    a {
      color:#bbb;
      display:inline-block;
      margin-left:20px;
      &:hover {
        color:#ddd;
      }
      &:first-of-type {
        margin-left:0px;
      }
    }
  }

  @media screen and (max-width: 880px) {
    overflow:hidden;
    & > div {
      top:0px;
    }
    .links {
      margin-left:0px;
    }
    .meta {
      float:left;
    }
    .logo {
      display:none;
    }
  }

  @media screen and (max-width: 600px) {
    text-align:center;
    font-size:13px;
    line-height:20px;
    .meta, .links {
      float:none;
    }
    .links {
      margin-bottom:5px;
    }
  }
}