@charset "UTF-8";
/*
 *
.||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.

    .                                      '||            .
  .||.  .... ... ... ...    ....  ... ...   ||   ....   .||.    ....
   ||    '|.  |   ||'  || .|...||  ||'  ||  ||  '' .||   ||   .|...||
   ||     '|.|    ||    | ||       ||    |  ||  .|' ||   ||   ||
   '|.'    '|     ||...'   '|...'  ||...'  .||. '|..'|'  '|.'  '|...'
        .. |      ||               ||
         ''      ''''             ''''      A Typographic Starter Kit

  URL ........... http://typeplate.com
  VERSION ....... 1.1.0
  Github ........ https://github.com/typeplate/typeplate.github.io
  AUTHORS ....... Dennis Gaebel (@gryghostvisuals) & Zachary Kain (@zakkain)
  LICENSE ....... Creative Commmons Attribution 3.0
  LICENSE URL ... http://creativecommons.org/licenses/by/3.0

 .||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||..||.
 *
 */
@font-face {
  font-family: "Ampersand";
  src: local("Georgia"), local("Garamond"), local("Palatino"), local("Book Antiqua");
  unicode-range: U+0026; }

@font-face {
  font-family: "Ampersand";
  src: local("Georgia");
  unicode-range: U+270C; }

body {
  word-wrap: break-word; }

pre code {
  word-wrap: normal; }

/**
 * Dropcap Sass @include
 * Use the following Sass @include with any selector you feel necessary.
 *
	@include dropcap($dropcap-float-position, $dropcap-font-size, $dropcap-font-family, $dropcap-txt-indent, $dropcap-margin, $dropcap-padding, $dropcap-color, $dropcap-line-height, $dropcap-bg);
 *
 * Extend this object into your custom stylesheet. Let the variables do the work.
 *
 */
html {
  font: normal 112.5%/1.65 "ff-tisa-web-pro", serif; }

body {
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  -ms-hyphens: auto;
  -o-hyphens: auto;
  hyphens: auto;
  color: #444444; }

small {
  font-size: 65%; }

h1, h2, h3, h4, h5, h6 {
  text-rendering: optimizeLegibility;
  line-height: 1;
  margin-top: 0; }

.tera {
  font-size: 117px;
  font-size: 6.5rem;
  margin-bottom: 0.25385rem; }

.giga, header h1 {
  font-size: 90px;
  font-size: 5rem;
  margin-bottom: 0.33rem; }

.mega {
  font-size: 72px;
  font-size: 4rem;
  margin-bottom: 0.4125rem; }

.alpha, h1 {
  font-size: 60px;
  font-size: 3.33333rem;
  margin-bottom: 0.495rem; }

.beta, h2 {
  font-size: 48px;
  font-size: 2.66667rem;
  margin-bottom: 0.61875rem; }

.gamma, h3, article h1 {
  font-size: 36px;
  font-size: 2rem;
  margin-bottom: 0.825rem; }

.delta, h4 {
  font-size: 24px;
  font-size: 1.33333rem;
  margin-bottom: 1.2375rem; }

.epsilon, h5, article h2 {
  font-size: 21px;
  font-size: 1.16667rem;
  margin-bottom: 1.41429rem; }

.zeta, h6, article h3 {
  font-size: 18px;
  font-size: 1rem;
  margin-bottom: 1.65rem; }

p {
  margin: auto auto 1.5em; }

abbr,
acronym,
blockquote,
code,
dir,
kbd,
listing,
plaintext,
q,
samp,
tt,
var,
xmp {
  -webkit-hyphens: none;
  -moz-hyphens: none;
  -ms-hyphens: none;
  -o-hyphens: none;
  hyphens: none; }

pre code {
  white-space: -moz-pre-wrap;
  white-space: pre-wrap; }

pre {
  white-space: pre; }

code {
  white-space: pre;
  font-family: monospace; }

/**
 * Abbreviations Markup
 *
	<abbr title="hyper text markup language">HMTL</abbr>
 *
 * Extend this object into your markup.
 *
 */
abbr {
  font-variant: small-caps;
  font-weight: 600;
  text-transform: lowercase;
  color: gray; }
  abbr:hover {
    cursor: help; }

h1,
h2,
h3,
h4,
h5,
h6 {
  color: #222222; }

p + .drop-cap {
  text-indent: 0;
  margin-top: 0; }

.drop-cap:first-letter {
  float: left;
  margin: inherit;
  padding: inherit;
  font-size: 4em;
  font-family: inherit;
  line-height: 1;
  text-indent: 0;
  background: transparent;
  color: inherit; }

/**
 * Lining Definition Style Markup
 *
	<dl class="lining">
		<dt><b></b></dt>
		<dd></dd>
	</dl>
 *
 * Extend this object into your markup.
 *
 */
.lining dt,
.lining dd {
  display: inline;
  margin: 0; }
.lining dt + dt:before,
.lining dd + dt:before {
  content: "\A";
  white-space: pre; }
.lining dd + dd:before {
  content: ", "; }
.lining dd:before {
  content: ": ";
  margin-left: -0.2rem; }

/**
 * Dictionary Definition Style Markup
 *
	<dl class="dictionary-style">
		<dt><b></b></dt>
			<dd></dd>
	</dl>
 *
 * Extend this object into your markup.
 *
 */
.dictionary-style dt {
  display: inline;
  counter-reset: definitions; }
  .dictionary-style dt + dt:before {
    content: ", ";
    margin-left: -0.2rem; }
.dictionary-style dd {
  display: block;
  counter-increment: definitions; }
  .dictionary-style dd:before {
    content: counter(definitions,decimal) ". "; }

/**
 * Blockquote Markup
 *
		<figure>
			<blockquote cite="">
				<p></p>
			</blockquote>
			<figcaption>
				<cite>
					<small><a href=""></a></small>
				</cite>
			</figcaption>
		</figure>
 *
 * Extend this object into your markup.
 *
 */
/**
 * Pull Quotes Markup
 *
	<aside class="pull-quote">
		<blockquote>
			<p></p>
		</blockquote>
	</aside>
 *
 * Extend this object into your custom stylesheet.
 *
 */
.pull-quote {
  position: relative;
  padding: 1em; }
  .pull-quote:before, .pull-quote:after {
    height: 1em;
    opacity: 0.5;
    position: absolute;
    font-size: 4em;
    color: #009999; }
  .pull-quote:before {
    content: '“';
    top: 0;
    left: 0; }
  .pull-quote:after {
    content: '”';
    bottom: 0;
    right: 0; }

/**
 * Figures Markup
 *
	<figure>
		<figcaption>
			<strong>Fig. 4.2 | </strong>Type Anatomy, an excerpt from Mark Boulton's book<cite title="http://designingfortheweb.co.uk/book/part3/part3_chapter11.php">"Designing for the Web"</cite>
		</figcaption>
	</figure>
 *
 * Extend this object into your markup.
 *
 */
/**
 * Footnote Markup : Replace 'X' with your unique number for each footnote
 *
	<article>
		<p><sup><a href="#fn-itemX" id="fn-returnX"></a></sup></p>
		<footer>
			<ol class="foot-notes">
				<li id="fn-itemX"><a href="#fn-returnX">↩</a></li>
			</ol>
		</footer>
	</article>
 *
 * Extend this object into your markup.
 *
 */
body {
  background-color: #f9f9f9;
  width: 100%;
  margin: 10px 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: "proxima-nova", sans-serif; }

a {
  color: #7ACC51;
  text-decoration: none; }
  a:hover {
    text-decoration: underline; }

.pullquote {
  position: relative;
  padding: 1em;
  font-size: 24px; }
  .pullquote:before, .pullquote:after {
    height: 1em;
    opacity: 1;
    position: absolute;
    font-size: 1.5em;
    color: #7ACC51; }
  .pullquote:before {
    content: '“';
    top: 0;
    left: 0; }
  .pullquote:after {
    content: '”';
    bottom: 0;
    right: 0; }

header {
  margin: 0 auto;
  text-align: center;
  border-bottom: 15px double #7ACC51; }
  header h1 {
    font-weight: 900; }
    header h1 a {
      transition: color .5s;
      -webkit-transition: color .5s; }
      header h1 a:hover {
        color: #a3a6da;
        text-decoration: none; }
  header ul {
    list-style-type: none;
    padding: 0;
    margin-bottom: 10px; }
    header ul li {
      font-family: "proxima-nova", sans-serif;
      font-size: 21px;
      display: inline-block;
      padding: 0 10px 0 0; }
  @media screen and (max-width: 600px) {
    header h1 {
      font-size: 48px; } }

article {
  margin: 20px auto 0;
  max-width: 660px; }
  article .date {
    color: #999; }
  article h1 {
    color: #7ACC51; }
    article h1 a {
      transition: color .5s;
      -webkit-transition: color .5s; }
      article h1 a:hover {
        color: #a3a6da;
        text-decoration: none; }
  @media screen and (max-width: 660px) {
    article {
      width: 90%;
      margin: 20px auto 0; } }
  article img {
    max-width: 660px;
    width: 100%; }

.border {
  margin-top: 20px;
  border-bottom: 15px double #7ACC51; }

footer {
  margin: 20px auto 0;
  text-align: center;
  font-family: "proxima-nova", sans-serif; }

.preview {
  margin-top: 20px;
  border-bottom: 1px solid #ccc; }
  .preview:nth-child(3) {
    border-bottom: none; }

article.projects {
  max-width: 1368px;
  width: 95%;
  margin: 0 auto;
  clear: both; }
  article.projects .project {
    width: 25%;
    padding-left: 5%;
    display: inline-block;
    vertical-align: top; }
    article.projects .project h1 {
      font-size: 24px;
      text-align: center; }
    article.projects .project figure {
      width: 100%;
      margin: 0 0 10px; }
    article.projects .project figcaption {
      font-family: "proxima-nova", sans-serif;
      color: #999;
      font-style: italic; }
  @media screen and (max-width: 1023px) {
    article.projects .project {
      width: 90%; } }