/* Imports */
/* Color Variables */
/* Mixins */
@font-face {
  font-family: 'codeandcrown';
  src: url("../fonts/codeandcrown.eot");
  src: url("../fonts/codeandcrown.eot?#iefix") format("embedded-opentype"), url("../fonts/codeandcrown.svg#codeandcrown") format("svg"), url("../fonts/codeandcrown.woff") format("woff"), url("../fonts/codeandcrown.ttf") format("truetype");
  font-weight: normal;
  font-style: normal; }

/* Use the following CSS code if you want to have a class per icon */
[class^="icon-font-"]:before, [class*=" icon-font-"]:before,
.nav, hr:before {
  font-family: 'codeandcrown';
  font-style: normal;
  speak: none;
  /* Enable Ligatures */
  -webkit-font-feature-settings: "liga","dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -moz-font-feature-settings: "liga","dlig";
  -ms-font-feature-settings: "liga","dlig";
  -o-font-feature-settings: "liga","dlig";
  font-feature-settings: "liga","dlig";
  text-rendering: optimizeLegibility;
  font-weight: normal;
  -webkit-font-smoothing: antialiased; }

.icon-font-list:before {
  content: "\6d\65\6e\75"; }

.icon-font-dribbble:before {
  content: "\64\72\69\62\62\62\6c\65"; }

.icon-font-github:before {
  content: "\67\69\74\68\75\62"; }

.icon-font-twitter:before {
  content: "\74\77\69\74\74\65\72"; }

.icon-font-crown:before {
  content: "\63\72\6f\77\6e"; }

.icon-font-tumblr:before {
  content: "\62\6c\6f\67"; }

.icon-font-linkedin:before {
  content: "\6c\69\6e\6b\65\64\69\6e"; }

.icon-font-css3:before {
  content: "\63\73\73\33"; }

.icon-font-html5:before {
  content: "\68\74\6d\6c\35"; }

.icon-font-mobile:before {
  content: "\6d\6f\62\69\6c\65"; }

.icon-font-semantics:before {
  content: "\73\65\6d\61\6e\74\69\63\73"; }

/* Global */
body {
  padding: 20px;
  background-color: #4a525a; }

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; }

/* Container */
.site-container {
  max-width: 820px;
  margin: 0 auto 0; }

/* Typography */
.copy {
  font-size: 1em;
  font-weight: 100;
  letter-spacing: .075em;
  line-height: 1.25em;
  color: #d4d4d4;
  text-align: center; }

/* Branding */
hgroup {
  margin: 0 auto 32px;
  text-align: center;
  font-weight: 100;
  color: #d4d4d4; }
  hgroup .logo {
    padding: 0;
    margin: 0;
    margin-bottom: 18px;
    display: block;
    font-size: 1.8em;
    font-weight: 100;
    letter-spacing: .075em; }
  hgroup .logo:before {
    display: block;
    margin-bottom: 12px;
    font-size: 120%;
    font-weight: normal;
    color: #2b3035;
    -webkit-transition: all .3s ease;
    -moz-transition: all .3s ease;
    -o-transition: all .3s ease;
    transition: all .3s ease; }
  hgroup a {
    color: #2b3035;
    font-weight: 100;
    text-decoration: none; }
  hgroup a:hover .logo:before {
    color: #eeeeee; }
  hgroup h2 {
    padding: 0;
    margin: 0; }

/* Nav */
.nav {
  padding: 0;
  margin: 0;
  margin: 0 auto 24px;
  list-style: none;
  font-size: 1.8em;
  color: #2b3035;
  text-align: center; }
  .nav li {
    display: inline-block; }
    .nav li a {
      position: relative;
      padding: 2px 4px;
      color: #2b3035;
      text-decoration: none;
      -webkit-transition: all .3s ease;
      -moz-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease; }
    .nav li a:hover {
      top: -8px;
      color: #eeeeee; }

/* Dribbble List */
#dribbble {
  margin: 0 auto 18px; }
  #dribbble ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center; }
    #dribbble ul li {
      position: relative;
      -webkit-border-radius: 10%;
      border-radius: 10%;
      display: inline-block;
      max-width: 120px;
      max-height: 120px;
      margin: 6px;
      border: 1px solid #444;
      overflow: hidden;
      -webkit-transition: all .3s ease;
      -moz-transition: all .3s ease;
      -o-transition: all .3s ease;
      transition: all .3s ease; }
      #dribbble ul li img {
        max-width: 200px;
        max-height: 150px;
        margin-top: -30px;
        -webkit-transition: margin .5s ease;
        -moz-transition: margin .5s ease;
        -ms-transition: margin .5s ease;
        -o-transition: margin .5s ease;
        transition: margin .5s ease; }
      #dribbble ul li a {
        display: block; }
      #dribbble ul li a:before {
        opacity: 0;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        content: attr(title);
        display: block;
        padding: 24px 12px 0;
        font-size: .85em;
        font-weight: 300;
        line-height: 1.25em;
        color: #eeeeee;
        text-align: center;
        text-decoration: none;
        text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.35);
        background-color: rgba(43, 48, 53, 0.75);
        -webkit-transition: all .3s ease;
        -moz-transition: all .3s ease;
        -o-transition: all .3s ease;
        transition: all .3s ease;
        z-index: 100; }
    #dribbble ul li:hover img {
      margin-top: 0;
      margin-left: -30px;
      -webkit-filter: blur(1px); }
    #dribbble ul li:hover a:before {
      opacity: 1; }

/* HR */
hr {
  position: relative;
  margin: 0 0 24px;
  height: 1px;
  border-width: 0;
  background: rgba(0, 0, 0, 0.1);
  font-size: 1em;
  text-align: center;
  color: rgba(0, 0, 0, 0.35); }

hr:before {
  position: absolute;
  top: -12px;
  padding: 6px;
  content: "\63\72\6f\77\6e";
  font-size: .85em;
  background: #4a525a; }

/* Skills */
.skills {
  padding: 0;
  margin: 0;
  margin: 36px auto 18px;
  list-style: none;
  font-size: 1.25em;
  font-weight: 300;
  font-style: italic;
  color: #2b3035; }
  .skills li {
    display: block;
    position: relative;
    margin-bottom: 6px;
    padding: 6px;
    background-color: rgba(0, 0, 0, 0.1);
    width: 100%;
    color: #eeeeee; }
  .skills li:before {
    position: absolute;
    right: 10px;
    font-style: 1.8em; }

/* Tumblr */
#tumblr {
  margin-top: 36px; }

.gfc-resultsRoot {
  font-size: 1em;
  font-weight: 100;
  letter-spacing: .075em;
  line-height: 1.25em;
  color: #d4d4d4; }
  .gfc-resultsRoot .gfc-result {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
  .gfc-resultsRoot .gfc-resultsHeader {
    display: none; }
  .gfc-resultsRoot .gf-result .gf-author, .gfc-resultsRoot .gf-result .gf-spacer {
    display: none; }
  .gfc-resultsRoot .gf-result .gf-title a {
    color: #eeeeee;
    text-decoration: none;
    border-bottom: 1px solid #64686C; }
  .gfc-resultsRoot .gf-result .gf-title a:hover {
    color: #eeeeee; }
  .gfc-resultsRoot .gf-result .gf-relativePublishedDate {
    display: block;
    margin-bottom: 12px;
    font-size: .85em;
    color: #aaaaaa; }
  .gfc-resultsRoot .gf-result .gf-snippet {
    font-size: .85em;
    color: #aaaaaa; }