@font-face {
  font-family: 'NG_sdnl';
  font-weight: normal;
  src: url("../type/nittigrotesk-semilight-v20.eot");
  src: url("../type/nittigrotesk-semilight-v20.eot?#iefix") format("embedded-opentype"), url("../type/nittigrotesk-semilight-v20.woff") format("woff"); }
@font-face {
  font-family: 'NG_sdnl';
  font-weight: bold;
  src: url("../type/nittigrotesk-medium-v20.eot");
  src: url("../type/nittigrotesk-medium-v20.eot?#iefix") format("embedded-opentype"), url("../type/nittigrotesk-medium-v20.woff") format("woff"); }
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(../type/MaterialIcons-Regular.eot);
  /* For IE6-8 */
  src: local("Material Icons"), local("MaterialIcons-Regular"), url(../type/MaterialIcons-Regular.woff2) format("woff2"), url(../type/MaterialIcons-Regular.woff) format("woff"), url(../type/MaterialIcons-Regular.ttf) format("truetype"); }
/*
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }
*/
body {
  font-family: NG_sdnl, sans-serif;
  background-color: #fefaef;
  color: #177fc8;
  margin: 0;
  padding: 0 18px; }

body, textarea {
  font-family: NG_sdnl, sans-serif; }

::selection {
  background-color: #eee8d5; }

body, h1 {
  font-size: 25px;
  line-height: 1.4;
  font-weight: bold; }

nav, footer {
  font-size: 75%; }

h1 {
  text-transform: uppercase;
  letter-spacing: .05em;
  font-feature-settings: 'dlig' 1; }

header, footer, nav, .example, form {
  max-width: 550px;
  margin: 0 auto; }

header {
  margin-top: 3em;
  margin-bottom: 3em; }

footer {
  margin-top: 2em;
  margin-bottom: 3em;
  font-weight: normal; }

header a, footer a {
  color: #177fc8;
  text-decoration: none;
  background-image: linear-gradient(to bottom, #177fc8 75%, #177fc8 75%);
  background-repeat: repeat-x;
  background-size: 1px 1px;
  background-position: 0 95%;
  text-shadow: -2px 0 0 #fefaef, -1px 0 0 #fefaef, 1px 0 0 #fefaef, 2px 0 0 #fefaef, -2px -1px 0 #fefaef, -1px -1px 0 #fefaef, 1px -1px 0 #fefaef, 2px -1px 0 #fefaef, -2px 1px 0 #fefaef, -1px 1px 0 #fefaef, 1px 1px 0 #fefaef, 2px 1px 0 #fefaef;
  -webkit-tap-highlight-color: #177fc8; }
  header a::selection, footer a::selection {
    text-shadow: none; }
  header a:hover, header a:active, footer a:hover, footer a:active {
    background: #177fc8;
    text-shadow: none; }

nav {
  font-weight: normal;
  margin-top: 4em; }
  nav ul {
    list-style: none;
    padding: 0; }
  nav a:before {
    content: '> ';
    text-align: right;
    float: left;
    margin-left: -18px;
    width: 18px;
    white-space: pre; }
  nav a {
    color: #177fc8;
    text-decoration: none;
    -webkit-tap-highlight-color: #177fc8; }
    nav a:hover {
      background: #177fc8; }

.example a {
  display: inline-block;
  width: 413px;
  max-width: 100%;
  overflow: hidden;
  border: .5em solid white;
  margin: -.5em; }
  .example a:hover img {
    transform: scale3d(1.05, 1.05, 1);
    transition: transform .2s ease; }
.example img {
  display: block;
  width: 100%;
  transition: transform .1s ease; }

a img {
  border: none; }

form {
  display: flex;
  padding-bottom: 26.25px;
  position: relative;
  font-size: 75%;
  font-weight: normal;
  margin-bottom: 3em; }

textarea {
  flex: 1 0 auto;
  outline: none;
  resize: vertical;
  font-size: 18.75px;
  min-height: 52.5px;
  margin: 0;
  border: 1px solid #268bd2;
  border-right: none;
  border-radius: 6px 0 0 6px;
  background-color: transparent;
  padding: 6px;
  line-height: 1.4; }
  textarea:focus {
    background-color: #fff; }

label {
  position: absolute;
  left: 0;
  bottom: 0;
  cursor: pointer; }

input[type="checkbox"] {
  vertical-align: middle;
  cursor: pointer; }

button {
  background-color: #268bd2;
  border: 1px solid #1e6ea7;
  outline: none;
  margin: 0;
  cursor: pointer;
  border-radius: 0 6px 6px 0;
  transition: background-color .2s; }
  button i {
    display: none; }
  button:after {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
    color: #fff;
    content: '\e163';
    padding: 0 12px; }
  button:hover {
    background-color: #3797db; }
    button:hover:after {
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }