@charset "UTF-8";
/**
* Homepage main sass.
*
*/
/* Layout Variables */
/* Color Variables */
/* Fonts */
/*-----------------------------------*\
  $TYPE

  Works off the assumption of a 1.5
  line height @ 20px. Again, change
  as necessary.
\*-----------------------------------*/
p, .p, ul, ol, hr, table, form, pre,
h1, .alpha, h2, .beta {
  margin-bottom: 30px;
  margin-bottom: 1.5rem; }

h1, .alpha {
  font-size: 30px;
  font-weight: 700;
  line-height: 1; }

h2, .beta {
  font-size: 24px;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 2; }

h3, .gamma {
  font-size: 20px;
  font-size: 1rem;
  font-weight: 700; }

h1, h2, h3 {
  color: #5A5A5A;
  font-family: "montserrat", Helvetica Neue, Helvetica, Arial, sans-serif; }

hr {
  border: none;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  margin-top: -1px;
  margin-bottom: 20px; }

/*-----------------------------------*\
  $MAIN
\*-----------------------------------*/
html {
  font: 18px/1.5 "ashbury", Helvetica Neue, Helvetica, Arial, sans-serif;
  background: white;
  color: #5A5A5A;
  overflow-y: scroll; }

header {
  padding: 80px 0 10px 0; }

nav ul {
  list-style-type: none;
  margin-bottom: 20px; }
  nav ul li {
    display: inline;
    margin-right: 15px; }
  nav ul a {
    font-family: "montserrat", Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 12px;
    text-transform: uppercase;
    text-decoration: none;
    color: #A3A3A3; }
    nav ul a.active {
      font-family: "montserrat", Helvetica Neue, Helvetica, Arial, sans-serif;
      color: #E6A049; }
    nav ul a:hover {
      color: #FFC47B; }

nav.submenu ul > li {
  float: left;
  margin-right: 15px;
  margin-left: 0px; }

a {
  text-decoration: none;
  color: #E6A049;
  outline: none; }
  a:hover {
    color: #FFC47B; }
  a img {
    border: 0; }
  a img:hover {
    opacity: .8; }

footer {
  background: #5A5A5A;
  color: white; }
  footer .f-title {
    text-transform: uppercase;
    font-size: 14px;
    margin-bottom: 0px; }
  footer p {
    margin-top: 20px; }

@font-face {
  font-family: 'ashbury';
  src: url("../fonts/AshburyLig-webfont.eot");
  src: url("../fonts/AshburyLig-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/AshburyLig-webfont.woff") format("woff"), url("../fonts/AshburyLig-webfont.ttf") format("truetype"), url("../fonts/AshburyLig-webfont.svg#ashburylight") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'montserrat';
  src: url("../fonts/Montserrat-Regular.eot");
  src: url("../fonts/Montserrat-Regular.eot?#iefix") format("embedded-opentype"), url("../fonts/Montserrat-Regular.woff") format("woff"), url("../fonts/Montserrat-Regular.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }
/*-----------------------------------*\

	Toast
	A Simple CSS Framework
	=================================

	Values you may want to change:
	- .container { max-width:; }
	- p { margin-bottom:; }
	- html { font:; }

	Remember: no framework will be as
	good as a custom built, per-
	project	one. Toast and other
	frameworks are best used for
	rapid prototyping.

\*-----------------------------------*/
/*-----------------------------------*\
	$RESET
\*-----------------------------------*/
* {
  margin: 0;
  padding: 0;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/*-----------------------------------*\
	$GRID
\*-----------------------------------*/
.container {
  /* Whatever you want. They’re your oats. */
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 30px;
  padding: 0 1.5rem; }

.grid {
  max-width: 100%; }

.default-width {
  max-width: 645px; }

.slim {
  max-width: 640px; }

.wide {
  max-width: 800px; }

.unit {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  vertical-align: top;
  padding-right: 3%;
  /* Clearfix */
  overflow: hidden;
  *overflow: visible; }

.unit.demo {
  background-color: #fff8eb;
  height: 48px;
  height: 3rem;
  margin-bottom: 24px;
  margin-bottom: 1.5rem; }

.span-grid {
  width: 100%; }

.one-of-two {
  width: 47%; }

.one-of-three {
  width: 30.36%; }

.two-of-three {
  width: 63.666666666%; }

.one-of-four {
  width: 22.05%; }

.three-of-four {
  width: 72%; }

.one-of-five {
  width: 17.07%; }

.two-of-five {
  width: 37%; }

.three-of-five {
  width: 57%; }

.four-of-five {
  width: 77%; }

/*--Custom header sytles --*/
strong {
  font-family: "montserrat", Helvetica Neue, Helvetica, Arial, sans-serif; }

#tagline {
  color: #5A5A5A;
  font-size: 28px;
  padding-bottom: 0px;
  font-weight: bold;
  font-style: italic;
  margin-top: 30px; }
  #tagline p {
    margin-bottom: .25em; }

#credit {
  text-align: right;
  padding-bottom: 30px;
  font-size: 14px;
  text-transform: uppercase; }

#top h1 {
  margin-bottom: 10px;
  text-align: center; }
  #top h1 #logo {
    width: 50px;
    margin-top: 0px;
    margin-bottom: 30px; }

.content {
  margin-bottom: 60px; }
  .content article h1, .content article h2, .content article h3, .content article h4, .content article h5, .content article h6, .content article p, .content article hr, .content article ul, .content article blockquote, .content section h1, .content section h2, .content section h3, .content section h4, .content section h5, .content section h6, .content section p, .content section hr, .content section ul, .content section blockquote {
    max-width: 645px;
    margin-left: auto;
    margin-right: auto;
    padding: 0; }
  .content article p.wide, .content section p.wide {
    max-width: 800px; }
  .content article:not(:last-child) {
    padding-bottom: 30px;
    border-bottom: 1px solid #E4E4E4; }
  .content section {
    padding-bottom: 0px; }

.disqus.default-width, .activity-post .default-width {
  margin-left: auto;
  margin-right: auto; }

.disqus.default-width {
  padding: 0 1.5rem 0 1.5rem; }

.activity-post {
  margin-bottom: 30px;
  padding: 0; }
  .activity-post .title {
    display: block;
    height: 38px; }
    .activity-post .title h2, .activity-post .title p {
      display: inline-block; }
    .activity-post .title h2 {
      float: left;
      margin-bottom: 0px; }
    .activity-post .title p.date {
      float: right;
      margin-top: 10px;
      margin-bottom: 0px; }

h1 {
  text-transform: uppercase;
  font-size: 24px; }

h2 {
  text-transform: uppercase;
  font-size: 18px;
  color: #5A5A5A;
  margin-bottom: 10px; }

h3 {
  text-transform: uppercase;
  font-size: 14px;
  color: #A3A3A3;
  margin-bottom: 10px; }

.project {
  margin-bottom: 30px; }
  .project h2 {
    margin-bottom: 0px; }

.content .list > article {
  padding-bottom: 0px; }
  .content .list > article:not(:first-child) {
    padding-top: 30px; }

.date {
  font-size: 14px;
  text-transform: uppercase;
  color: #A3A3A3; }

.date, .tags {
  font-family: "montserrat", Helvetica Neue, Helvetica, Arial, sans-serif; }

.main-img {
  width: 100%;
  overflow: hidden;
  margin-bottom: 30px; }
  .main-img img {
    width: 100%; }

section.container li {
  margin-left: 50px;
  padding-bottom: 10px; }

section.container ul.tags {
  list-style-type: none; }
  section.container ul.tags li {
    margin-left: 0px;
    margin-right: 10px;
    display: inline;
    padding: 5px;
    border: 1px solid #E6A049;
    font-size: 12px; }
  section.container ul.tags li:hover, section.container ul.tags li.active {
    background: #E6A049; }
    section.container ul.tags li:hover a, section.container ul.tags li.active a {
      color: white; }

section.container .activity-post ul.tags {
  margin-top: 5px;
  margin-bottom: 5px; }
  section.container .activity-post ul.tags li {
    margin-right: 0px;
    padding: 3px;
    border: none; }
  section.container .activity-post ul.tags li:hover, section.container .activity-post ul.tags li.active {
    background: none; }
    section.container .activity-post ul.tags li:hover a, section.container .activity-post ul.tags li.active a {
      color: #FFC47B; }

article figure {
  display: inline-block;
  width: 100%;
  margin-bottom: 0.5%; }
  article figure:not(.custom-size) img {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    display: inline-block; }
  article figure.half {
    width: 49.3%; }
    article figure.half:first-child {
      margin-right: 1.4%; }
  article figure.third {
    width: 32.4%; }
  article figure.onethird {
    width: 30.4%; }
  article figure.twothirds {
    width: 68.2%; }
  article figure.left {
    margin-right: 1.4%; }

#article h2 {
  font-size: 22px;
  margin-bottom: 7px; }
#article h3 {
  font-size: 14px;
  color: #A3A3A3;
  text-transform: uppercase; }
#article article {
  margin-bottom: 50px; }

.pagination {
  height: 50px; }
  .pagination a {
    font-family: "montserrat", Helvetica Neue, Helvetica, Arial, sans-serif;
    text-transform: uppercase;
    font-size: 14px; }
  .pagination .next {
    float: right; }

img.vert {
  width: 49%;
  float: left;
  padding-bottom: 10px; }
  img.vert.left {
    margin-right: 10px; }

@media screen and (max-width: 668px) {
  .content {
    max-width: 645px; }

  .content article {
    padding: 0; }
    .content article h1, .content article h2, .content article h3, .content article h4, .content article h5, .content article h6, .content article p {
      padding: 0; }

  .disqus.default-width {
    padding: 0; }

  article img.full {
    margin: 0 -5rem; } }
@media screen and (max-width: 500px) {
  section.container .activity-post .title {
    display: block;
    height: initial; }
    section.container .activity-post .title h2, section.container .activity-post .title .date {
      float: none;
      display: block; }
    section.container .activity-post .title .date {
      margin-top: 0px;
      margin-bottom: 10px; }

  section.container .activity-post ul.tags {
    float: none;
    margin-top: -15px;
    margin-left: 0px;
    margin-bottom: 0px; } }
@media screen and (max-width: 425px) {
  article img.half, article img.third, article img.onethird, article img.twothirds {
    width: 100%;
    margin-bottom: 0; } }

/*# sourceMappingURL=main.css.map */