/* Welcome to Compass.
 * In this file you should write your main styles. (or centralize your imports)
 * Import this file using the following HTML or equivalent:
 * <link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css" /> */
@import url(http://fonts.googleapis.com/css?family=Lobster|Bitter:400,700);
html, body, div, span, applet, object, iframe,
h1, h2, h3, #blog article#comments_list p.author cite, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

html {
  line-height: 1; }

ol, ul {
  list-style: none; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

q, blockquote {
  quotes: none; }
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }

a img {
  border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

/* -------------------
    Mixins
-------------------- */
/* -------------------
   // Mixins
-------------------- */
html {
  -webkit-text-size-adjust: none;
  /* Prevent font scaling in landscape */ }

body {
  background-image: url("../img/bg_pattern.png");
  background-repeat: repeat;
  position: relative;
  font-size: 100%;
  font-family: helvetica, arial, 'sans-serif'; }
  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
    body {
      background-image: url("../img/bg_pattern@2x.png");
      -webkit-background-size: 69px auto;
      -moz-background-size: 69px auto;
      background-size: 69px auto; } }

/* -------------------
    General Formatting
-------------------- */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 30px;
  height: 0;
  overflow: hidden;
  margin-bottom: 10px;
  width: 97%; }

.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; }

h1, h2, h3, #blog article#comments_list p.author cite, h4, h5 {
  font-family: 'Bitter', serif;
  font-weight: 400;
  text-align: left; }

h1 {
  font-size: 2.8em;
  letter-spacing: -.05em;
  text-transform: uppercase;
  color: #FD933E;
  text-shadow: 1px 1px 0px #937A61, 1px 2px 0px #937A61;
  margin-bottom: .4em; }

h2 {
  font-size: 2em;
  letter-spacing: -.05em;
  color: #764530;
  margin-bottom: .4em; }

h2.page_title {
  font-size: 2em;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: #9a5a3f;
  text-shadow: 1px 1px 0 #523021;
  text-align: center; }
  h2.page_title span {
    text-shadow: none;
    text-transform: none;
    color: #9a5a3f; }

h2.page_title + hr {
  margin-top: 0;
  margin-bottom: 30px; }

h3, #blog article#comments_list p.author cite {
  font-family: 'Bitter', serif;
  color: #764530;
  margin: 10px 0 10px 0;
  line-height: 1; }

h4 {
  font-size: 1.4em;
  color: #764530;
  font-weight: 100 !important;
  text-transform: uppercase;
  line-height: 1.2em;
  margin-bottom: .2m; }
  h4.border {
    font-weight: 700;
    border-bottom: 1px solid #764530;
    margin-bottom: .5em; }

a {
  text-decoration: none;
  color: #38b9d5;
  font-weight: inherit;
  -moz-transition-property: color, background-color, opacity;
  -o-transition-property: color, background-color, opacity;
  -webkit-transition-property: color, background-color, opacity;
  transition-property: color, background-color, opacity;
  -moz-transition-duration: 0.6s;
  -o-transition-duration: 0.6s;
  -webkit-transition-duration: 0.6s;
  transition-duration: 0.6s; }
  a:hover {
    text-decoration: underline; }

.hidden {
  display: none; }

div.clearfix {
  clear: both;
  padding: 5px 0; }

/* -------------------
    Code
-------------------- */
pre {
  margin-bottom: 15px;
  overflow: auto;
  color: white;
  background: #FFFDF8;
  padding: 0;
  font-family: Menlo,Monaco,monospace;
  -moz-tab-size: 2;
  -o-tab-size: 2;
  tab-size: 2;
  word-break: normal;
  -moz-hyphens: none;
  -ms-hyphens: none;
  -webkit-hyphens: none;
  hyphens: none;
  position: relative;
  padding-top: 10px;
  -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
  pre[rel]:before {
    content: attr(rel);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #FFF7E1;
    color: #663C2A;
    letter-spacing: -.1em;
    padding: 5px 0;
    text-indent: 15px; }
  pre code {
    font-family: Menlo,Monaco,monospace;
    background: none;
    padding: 15px;
    white-space: pre;
    overflow: auto;
    display: block;
    color: #333; }

/*----------------------------------
    Button
-----------------------------------*/
.button {
  display: inline-block;
  text-align: center;
  font-size: .9em;
  font-weight: bold;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  color: #fff;
  padding: .8em 2em;
  background-color: #555;
  background-repeat: repeat-x;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-transition: background-position 0.3s linear;
  -o-transition: background-position 0.3s linear;
  -webkit-transition: background-position 0.3s linear;
  transition: background-position 0.3s linear;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-box-shadow: inset 0 -1px 0px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  -webkit-box-shadow: inset 0 -1px 0px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  box-shadow: inset 0 -1px 0px rgba(0, 0, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.4);
  cursor: pointer;
  background-position: 0 0; }
  .button.large {
    padding: 1em 4em; }
  .button:hover {
    text-decoration: none;
    background-position: 0 -18px; }
  .button:active {
    -moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5);
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.5);
    background-position: 0 -38px; }
  .button.flat {
    background: #2596cb; }
    .button.flat:hover {
      background: #289fd8; }
  .button.primary {
    background-color: #2186b5;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzQ2YWRkZCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzIxODZiNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #46addd), color-stop(100%, #2186b5));
    background-image: -moz-linear-gradient(#46addd, #2186b5);
    background-image: -webkit-linear-gradient(#46addd, #2186b5);
    background-image: linear-gradient(#46addd, #2186b5); }
  .button.secondary {
    background-color: #484848;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZlNmU2ZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzQ4NDg0OCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #6e6e6e), color-stop(100%, #484848));
    background-image: -moz-linear-gradient(#6e6e6e, #484848);
    background-image: -webkit-linear-gradient(#6e6e6e, #484848);
    background-image: linear-gradient(#6e6e6e, #484848); }
  .button.inverted {
    background-color: #ded6c0;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2VlZWFkZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RkZDRiZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #eeeade), color-stop(100%, #ddd4bd));
    background-image: -moz-linear-gradient(#eeeade, #ddd4bd);
    background-image: -webkit-linear-gradient(#eeeade, #ddd4bd);
    background-image: linear-gradient(#eeeade, #ddd4bd);
    color: #222;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); }
  .button span {
    display: inline-block; }

i[class^="icon-"] {
  display: inline-block;
  background-image: url("../img/icons_sprite.png");
  background-repeat: no-repeat;
  background-position: 0px 0px;
  width: 14px;
  height: 14px;
  margin-left: -5px;
  margin-right: 5px; }
  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
    i[class^="icon-"] {
      background-image: url("../img/icons_sprite@2x.png");
      -webkit-background-size: 181px auto;
      -moz-background-size: 181px auto;
      background-size: 181px auto; } }

i.icon-down {
  background-position: -68px -141px; }

i.icon-email {
  background-position: -39px -140px; }

i.icon-external {
  background-position: -39px -140px; }

/* -------------------
    Next_prev Portfolio Nav
-------------------- */
#next_prev {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  border: 1px solid #999;
  background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I1YjVhNyIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RiZGJkMyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
  background-size: 100%;
  background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b5b5a7), color-stop(100%, #dbdbd3));
  background-image: -moz-linear-gradient(#b5b5a7, #dbdbd3);
  background-image: -webkit-linear-gradient(#b5b5a7, #dbdbd3);
  background-image: linear-gradient(#b5b5a7, #dbdbd3); }
  #next_prev:after {
    content: '';
    height: 0;
    line-height: 0;
    display: block;
    clear: both; }
  #next_prev li {
    width: 50%;
    display: block;
    float: left; }
  #next_prev li a.button {
    margin: 0; }
  #next_prev li.prev_item {
    float: left; }
    #next_prev li.prev_item a {
      -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), inset -1px 0px 1px rgba(0, 0, 0, 0.4);
      -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), inset -1px 0px 1px rgba(0, 0, 0, 0.4);
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), inset -1px 0px 1px rgba(0, 0, 0, 0.4);
      -moz-border-radius: 3px 0 0 3px;
      -webkit-border-radius: 3px;
      border-radius: 3px 0 0 3px; }
  #next_prev li.next_item {
    float: right; }
    #next_prev li.next_item a {
      -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 1px 0px 1px rgba(255, 255, 255, 0.4);
      -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 1px 0px 1px rgba(255, 255, 255, 0.4);
      box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.4), inset 1px 0px 1px rgba(255, 255, 255, 0.4);
      -moz-border-radius: 0 3px 3px 0;
      -webkit-border-radius: 0;
      border-radius: 0 3px 3px 0; }

p {
  text-align: left;
  color: #673d2d;
  font-size: 1em;
  line-height: 1.5em;
  font-weight: 200;
  font-family: helvetica, arial, 'sans-serif';
  margin-bottom: 20px; }
  p:last-child {
    margin-bottom: 35px; }

a#back_to_top {
  background-image: url("../img/top.png");
  display: block;
  width: 33px;
  height: 34px;
  position: fixed;
  z-index: 15;
  right: 5%;
  bottom: 5px;
  text-indent: -9999px;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
  opacity: 0.5; }
  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
    a#back_to_top {
      background-image: url("../img/top@2x.png");
      -webkit-background-size: 33px auto;
      -moz-background-size: 33px auto;
      background-size: 33px auto; } }
  a#back_to_top.fadeIn {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=50);
    opacity: 0.5; }
  a#back_to_top.fadeOut {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
    opacity: 0; }
  a#back_to_top.fadeIn:hover {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=90);
    opacity: 0.9; }

#sidebar > p:first-child:first-letter,
.post_content .post_img + p:first-letter {
  display: block;
  float: left;
  font-size: 2.5em;
  font-weight: bold;
  line-height: 1em;
  margin-top: 8px;
  padding-right: 5px;
  padding-left: 5px;
  margin-right: 8px;
  background: #B36A4E;
  color: #F3F3E9; }

#sidebar > p:first-child:first-line,
.post_content .post_img + p:first-line {
  font-weight: 500;
  color: #B36A4E; }

strong {
  font-weight: bold; }

.floatr {
  float: right;
  margin: 0 0 10px 40px; }

/*----------------------------------
    General Form Styling
-----------------------------------*/
input[type='text'],
input[type='email'],
input[type='submit'],
input[type='search'],
button,
textarea {
  -moz-appearance: none;
  -webkit-appearance: none;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border: none; }
  input[type='text']:focus,
  input[type='email']:focus,
  input[type='submit']:focus,
  input[type='search']:focus,
  button:focus,
  textarea:focus {
    outline: none; }

#hideErrors, .hiddenFields {
  display: none !important; }

label {
  display: block;
  font-weight: 700;
  color: #849897;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
  margin-bottom: .4em; }
  label span.red {
    color: #B23E3A; }
  label.error {
    display: none !important; }
  label input {
    -moz-appearance: none;
    -webkit-appearance: none;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box; }

input[type='text'], input[type='email'], textarea {
  -moz-transition: background-color 0.3s linear;
  -o-transition: background-color 0.3s linear;
  -webkit-transition: background-color 0.3s linear;
  transition: background-color 0.3s linear;
  background-color: rgba(0, 0, 0, 0.1);
  padding: 1em;
  font-size: .9em;
  color: #fbfbf4;
  -moz-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2), 0 2px 0 rgba(255, 255, 255, 0.8);
  -webkit-box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2), 0 2px 0 rgba(255, 255, 255, 0.8);
  box-shadow: 0 -2px 0 rgba(0, 0, 0, 0.2), 0 2px 0 rgba(255, 255, 255, 0.8);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  width: 100%; }
  input[type='text']:focus, input[type='email']:focus, textarea:focus {
    background-color: rgba(0, 0, 0, 0.15); }
  input[type='text'].error, input[type='email'].error, textarea.error {
    background-color: rgba(151, 37, 37, 0.3); }
  input[type='text'].valid, input[type='email'].valid, textarea.valid {
    background-color: rgba(41, 141, 46, 0.3); }

input[type='text'], input[type='email'] {
  width: 60%; }

textarea {
  height: 140px;
  resize: none; }

.field {
  margin-bottom: 1.4em; }

#contact-submit {
  float: right; }

hr {
  border: none;
  height: 1px;
  background: #d6d6ce;
  -moz-box-shadow: 0 1px 0px white;
  -webkit-box-shadow: 0 1px 0px white;
  box-shadow: 0 1px 0px white; }

hr.fancy {
  background: none;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  border: none;
  width: 100%;
  height: 21px;
  background-image: url("../img/hr.png");
  position: relative;
  background-repeat: no-repeat;
  background-position: center center;
  margin: 40px 0; }
  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
    hr.fancy {
      background-image: url("../img/hr@2x.png");
      -webkit-background-size: 18px auto;
      -moz-background-size: 18px auto;
      background-size: 18px auto; } }
  hr.fancy:after, hr.fancy:before {
    content: '';
    width: 42%;
    height: 1px;
    background: #d6d6ce;
    -moz-box-shadow: 0 1px 0px white;
    -webkit-box-shadow: 0 1px 0px white;
    box-shadow: 0 1px 0px white;
    position: absolute;
    top: 10px; }
  hr.fancy:before {
    right: 0; }
  hr.fancy:after {
    left: 0; }

img.large, img.half, .video-container {
  border: 8px solid #f3f3e9;
  margin-bottom: .8em;
  -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.15); }

img.large {
  width: 97%;
  height: auto; }

img.half {
  width: 46.5%;
  height: auto;
  float: left;
  margin-right: .8em; }
  img.half.last {
    margin-right: 0; }

/* -------------------
    Ribbon Heading
-------------------- */
.ribbon_container {
  position: relative;
  text-align: center;
  z-index: -2; }
  .ribbon_container:after, .ribbon_container:before {
    content: '';
    height: 1px;
    width: 33%;
    position: absolute;
    background: rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7);
    top: 37px;
    z-index: -2; }
  .ribbon_container:before {
    left: 0; }
  .ribbon_container:after {
    right: 0; }

h1.ribbon {
  text-transform: none;
  display: inline-block;
  letter-spacing: .1em;
  font-size: 1.6em;
  color: #fff;
  text-shadow: 1px 1px 0 #427480,2px 2px 0 #427480;
  position: relative;
  padding: 0 40px;
  height: 1.8em;
  line-height: 1.8em;
  text-align: center;
  margin: 0 auto;
  background: #ACBFBE;
  margin-bottom: 50px; }
  h1.ribbon:before, h1.ribbon:after {
    content: '';
    position: absolute;
    display: block;
    bottom: -.5em;
    border: 0.9em solid #95a6a5;
    z-index: -1; }
  h1.ribbon:before {
    left: -1.3em;
    border-left-color: transparent;
    border-left-width: .4em;
    border-right-width: 1.7em; }
  h1.ribbon:after {
    right: -1.3em;
    border-right-color: transparent;
    border-right-width: .4em;
    border-left-width: 1.7em; }
  h1.ribbon .ribbon_content {
    font-weight: normal; }
  h1.ribbon .ribbon_content:before, h1.ribbon .ribbon_content:after {
    content: '';
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #687372 transparent transparent transparent;
    bottom: -.5em; }
  h1.ribbon .ribbon_content:before {
    left: 0;
    border-width: .5em  0 0 .8em; }
  h1.ribbon .ribbon_content:after {
    right: 0;
    border-width: .5em .8em 0 0; }

/* -------------------
    Skills Meters
-------------------- */
@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: -30px 0; }
  to {
    background-position: 0 0; } }
@-moz-keyframes progress-bar-stripes {
  from {
    background-position: -30px 0; }
  to {
    background-position: 0 0; } }
@-ms-keyframes progress-bar-stripes {
  from {
    background-position: -30px 0; }
  to {
    background-position: 0 0; } }
@-o-keyframes progress-bar-stripes {
  from {
    background-position: 0 0; }
  to {
    background-position: -30px 0; } }
@keyframes progress-bar-stripes {
  from {
    background-position: -30px 0; }
  to {
    background-position: 0 0; } }
div.meter {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100%;
  height: 30px;
  position: relative;
  margin-top: 12px;
  background-color: rgba(0, 0, 0, 0.6);
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  -moz-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.9);
  -webkit-box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.9);
  box-shadow: inset 0px 3px 6px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(0, 0, 0, 0.4), inset 0 -1px 0 rgba(255, 255, 255, 0.9); }
  div.meter span {
    -moz-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.2);
    -webkit-box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.2);
    box-shadow: inset 0px 1px 0px rgba(255, 255, 255, 0.2);
    -moz-border-radius: 1px;
    -webkit-border-radius: 1px;
    border-radius: 1px;
    height: 90%;
    width: 98%;
    top: 1px;
    left: 1px;
    position: relative;
    display: block;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmMDAwMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDBmZiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ff0000), color-stop(100%, #0000ff));
    background-image: -moz-linear-gradient(#ff0000, #0000ff);
    background-image: -webkit-linear-gradient(#ff0000, #0000ff);
    background-image: linear-gradient(#ff0000, #0000ff); }
    div.meter span.photoshop {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzJkM2NlMCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzE5MjVhNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
      background-size: 100%;
      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #2d3ce0), color-stop(100%, #1925a7));
      background-image: -moz-linear-gradient(#2d3ce0, #1925a7);
      background-image: -webkit-linear-gradient(#2d3ce0, #1925a7);
      background-image: linear-gradient(#2d3ce0, #1925a7); }
    div.meter span.illustrator {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2YwYjk1OSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2U4OWIxNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
      background-size: 100%;
      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f0b959), color-stop(100%, #e89b15));
      background-image: -moz-linear-gradient(#f0b959, #e89b15);
      background-image: -webkit-linear-gradient(#f0b959, #e89b15);
      background-image: linear-gradient(#f0b959, #e89b15); }
    div.meter span.css {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I0ZDIyZiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzdmOTQyMCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
      background-size: 100%;
      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #b4d22f), color-stop(100%, #7f9420));
      background-image: -moz-linear-gradient(#b4d22f, #7f9420);
      background-image: -webkit-linear-gradient(#b4d22f, #7f9420);
      background-image: linear-gradient(#b4d22f, #7f9420); }
    div.meter span.sass {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RmOGJlNCIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NlNGRkNiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
      background-size: 100%;
      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #df8be4), color-stop(100%, #ce4dd6));
      background-image: -moz-linear-gradient(#df8be4, #ce4dd6);
      background-image: -webkit-linear-gradient(#df8be4, #ce4dd6);
      background-image: linear-gradient(#df8be4, #ce4dd6); }
    div.meter span.js {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2U0OTc4YiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2Q2NWY0ZCIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
      background-size: 100%;
      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e4978b), color-stop(100%, #d65f4d));
      background-image: -moz-linear-gradient(#e4978b, #d65f4d);
      background-image: -webkit-linear-gradient(#e4978b, #d65f4d);
      background-image: linear-gradient(#e4978b, #d65f4d); }
    div.meter span.git {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2RiZDg1MiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2I5YjYyNyIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
      background-size: 100%;
      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #dbd852), color-stop(100%, #b9b627));
      background-image: -moz-linear-gradient(#dbd852, #b9b627);
      background-image: -webkit-linear-gradient(#dbd852, #b9b627);
      background-image: linear-gradient(#dbd852, #b9b627); }
    div.meter span.agile {
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzUyYzBkYiIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzI3OWRiOSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
      background-size: 100%;
      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #52c0db), color-stop(100%, #279db9));
      background-image: -moz-linear-gradient(#52c0db, #279db9);
      background-image: -webkit-linear-gradient(#52c0db, #279db9);
      background-image: linear-gradient(#52c0db, #279db9); }
    div.meter span:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      right: 0;
      z-index: 1;
      height: 100%;
      background-position: 0 0;
      background-image: -webkit-gradient(linear, 0 0, 100% 100%, color-stop(0.25, rgba(255, 255, 255, 0.2)), color-stop(0.25, transparent), color-stop(0.5, transparent), color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.75, rgba(255, 255, 255, 0.2)), color-stop(0.75, transparent), to(transparent));
      background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
      background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
      background-image: -ms-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
      background-image: -o-linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
      -moz-background-size: 30px 30px;
      -o-background-size: 30px 30px;
      -webkit-background-size: 30px 30px;
      background-size: 30px 30px; }
    div.meter span:hover {
      cursor: pointer; }
      div.meter span:hover:after {
        -webkit-animation: progress-bar-stripes 1s infinite linear;
        -moz-animation: progress-bar-stripes 1s infinite linear;
        -ms-animation: progress-bar-stripes 1s infinite linear;
        -o-animation: progress-bar-stripes 1s infinite linear; }
  div.meter i {
    position: absolute;
    left: 5px;
    top: 7px;
    color: #fff;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7); }
    div.meter i.percent {
      left: auto;
      right: 5px;
      font-weight: normal;
      font-size: 90%; }

/* -------------------
    List Item Skills
-------------------- */
li.skill {
  color: #fff;
  font-weight: 600;
  font-size: 1em;
  padding: 10px;
  background: #666;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  border: 3px solid #333;
  margin-bottom: 8px;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  padding-left: 50px;
  line-height: 1em;
  position: relative;
  -moz-transition-duration: 0.6s;
  -o-transition-duration: 0.6s;
  -webkit-transition-duration: 0.6s;
  transition-duration: 0.6s; }
  li.skill i {
    position: absolute;
    left: 5px;
    top: 0;
    width: 34px;
    height: 34px;
    display: block;
    background-image: url("../img/icons_sprite.png");
    background-position: 0 0; }
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      li.skill i {
        background-image: url("../img/icons_sprite@2x.png");
        -webkit-background-size: 181px auto;
        -moz-background-size: 181px auto;
        background-size: 181px auto; } }
  li.skill.UI-UX {
    background: #ee873c;
    border-color: #a15f25; }
    li.skill.UI-UX i {
      background-position: 246px -44px; }
  li.skill.Imaging {
    background: #38b9d5;
    border-color: #3d7982; }
    li.skill.Imaging i {
      background-position: 246px -108px; }
  li.skill.Branding {
    background: #e2c537;
    border-color: #b49d2d; }
    li.skill.Branding i {
      background-position: 213px -140px; }
  li.skill.Mobile {
    background: #7bbbc6;
    border-color: #5090ab; }
    li.skill.Mobile i {
      background-position: 278px -108px; }
  li.skill.Creative-Direction {
    background: #c56142;
    border-color: #9d492f; }
    li.skill.Creative-Direction i {
      background-position: 279px -140px; }
  li.skill.Motion {
    background: #c27bc6;
    border-color: #984ba6; }
    li.skill.Motion i {
      background-position: 278px -77px; }
  li.skill.Sound-Design {
    background: #38D589;
    border-color: #26945f; }
    li.skill.Sound-Design i {
      background-position: 215px -76px; }
  li.skill.Compositing {
    background: #3898d5;
    border-color: #286e99; }
    li.skill.Compositing i {
      background-position: 246px -140px; }
  li.skill.HTML-CSS {
    background: #8ec734;
    border-color: #5d8222; }
    li.skill.HTML-CSS i {
      background-position: 215px -44px; }
  li.skill.Print {
    background: #666ed8;
    border-color: #283d99; }
    li.skill.Print i {
      background-position: 246px -76px; }
  li.skill.Video {
    background: #c54242;
    border-color: #9d2f2f; }
    li.skill.Video i {
      background-position: 279px -45px; }

#wrapper {
  width: 1200px;
  padding-top: 120px;
  position: relative;
  z-index: 0;
  margin: 0 auto;
  background: url("../img/wrapper_bg_pattern.jpg") repeat;
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.16);
  border: 2px solid #F5F5EC; }

#header {
  width: 100%;
  height: 70px;
  background-image: url("../img/header_pattern.png");
  background-repeat: repeat;
  position: fixed;
  z-index: 50;
  -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.23);
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.23);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.23);
  border-bottom: 6px solid #FEE8B0;
  padding-top: 10px; }
  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
    #header {
      background-image: url("../img/header_pattern@2x.png");
      -webkit-background-size: 5px auto;
      -moz-background-size: 5px auto;
      background-size: 5px auto; } }
  #header #header_wrapper {
    margin: 0 auto;
    height: auto;
    width: 1200px;
    position: relative; }
  #header #utility_bar:after {
    content: '';
    height: 0;
    line-height: 0;
    display: block;
    clear: both; }
  #header #utility_bar li a.social {
    display: block;
    float: left;
    text-indent: -9999px;
    width: 24px;
    height: 28px;
    margin-left: 10px;
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65);
    opacity: 0.65;
    -moz-transition-property: opacity;
    -o-transition-property: opacity;
    -webkit-transition-property: opacity;
    transition-property: opacity;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    -webkit-transition-duration: 0.5s;
    transition-duration: 0.5s;
    background-image: url("../img/icons_sprite.png");
    background-position: 0 0; }
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      #header #utility_bar li a.social {
        background-image: url("../img/icons_sprite@2x.png");
        -webkit-background-size: 181px auto;
        -moz-background-size: 181px auto;
        background-size: 181px auto; } }
    #header #utility_bar li a.social.tw {
      background-position: 0 0; }
    #header #utility_bar li a.social.fb {
      background-position: -25px 0px; }
    #header #utility_bar li a.social.dr {
      background-position: -99px 0px; }
    #header #utility_bar li a.social.in {
      background-position: -74px 0px; }
    #header #utility_bar li a.social.rss {
      background-position: -123px 0px; }
    #header #utility_bar li a.social.cp {
      background-position: -50px 0px; }
    #header #utility_bar li a.social:hover {
      filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
      opacity: 1; }
  #header #utility_bar #search {
    float: right; }
    #header #utility_bar #search input[type='search'] {
      background: #FFFBED;
      border: 1px solid #EFD596;
      font-size: 11px;
      height: 26px;
      line-height: 26px;
      margin: 0;
      width: 75px;
      display: inline-block;
      float: left;
      padding: 0 0 0 4px;
      color: #663C2A; }
    #header #utility_bar #search input[type='submit'] {
      height: 26px;
      width: 28px;
      background: transparent;
      background-image: url("../img/icons_sprite.png");
      background-position: -148px 0px;
      display: inline-block;
      float: right;
      position: relative;
      cursor: pointer; }
      @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
        #header #utility_bar #search input[type='submit'] {
          background-image: url("../img/icons_sprite@2x.png");
          -webkit-background-size: 181px auto;
          -moz-background-size: 181px auto;
          background-size: 181px auto; } }
  #header nav#main_navigation {
    position: relative;
    text-align: center;
    top: 3px; }
    #header nav#main_navigation:after:after {
      content: '';
      height: 0;
      line-height: 0;
      display: block;
      clear: both; }
    #header nav#main_navigation a {
      font-size: 1.6em;
      display: inline-block;
      position: relative;
      padding: 7px 25px;
      bottom: 0px;
      text-decoration: none;
      font-family: 'Lobster', cursive;
      color: #BB9E74;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
      font-weight: normal; }
      #header nav#main_navigation a:nth-of-type(2) {
        margin-right: 40px; }
      #header nav#main_navigation a:nth-of-type(3) {
        margin-left: 40px; }
      #header nav#main_navigation a:hover, #header nav#main_navigation a.current {
        color: #663c2a;
        text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6); }
      #header nav#main_navigation a.current span {
        width: 0;
        height: 0;
        display: block;
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        border-bottom: 7px solid #FEE8B0;
        position: absolute;
        z-index: 8;
        left: 50%;
        margin-left: -7px;
        bottom: 0px; }
    #header nav#main_navigation a.logo {
      background-image: url("../img/icons_sprite.png");
      background-repeat: no-repeat;
      width: 84px;
      height: 96px;
      padding: 0;
      bottom: -23px;
      position: absolute;
      left: 50%;
      margin-left: -42px;
      text-indent: -9999px;
      background-position: 1px -29px; }
      @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
        #header nav#main_navigation a.logo {
          background-image: url("../img/icons_sprite@2x.png");
          -webkit-background-size: 181px auto;
          -moz-background-size: 181px auto;
          background-size: 181px auto; } }
      #header nav#main_navigation a.logo:after {
        content: '';
        width: 48px;
        height: 48px;
        background: #FEE8B0;
        position: absolute;
        z-index: -1;
        bottom: -5.8px;
        left: 50%;
        margin-left: -24px;
        -moz-transform: rotate(45deg) skew(-15deg, -15deg);
        -ms-transform: rotate(45deg) skew(-15deg, -15deg);
        -webkit-transform: rotate(45deg) skew(-15deg, -15deg);
        transform: rotate(45deg) skew(-15deg, -15deg);
        -moz-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
        -webkit-box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2);
        box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.2); }

/* -------------------
   ----Sections----
-------------------- */
#left_col {
  float: left;
  width: 65%; }

aside#sidebar {
  float: right;
  width: 32%;
  text-align: left; }
  aside#sidebar .button {
    width: 100%;
    margin-bottom: 10px; }
  aside#sidebar .widget {
    background: #f7f7ed;
    border: 1px solid #e7e7dd;
    padding-bottom: 15px;
    -moz-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.18);
    -webkit-box-shadow: 0px 0 3px rgba(0, 0, 0, 0.18);
    box-shadow: 0px 0 3px rgba(0, 0, 0, 0.18);
    margin-bottom: 25px; }
    aside#sidebar .widget ul {
      margin-bottom: 0; }
      aside#sidebar .widget ul li {
        padding-left: 25px;
        line-height: 2.3em; }
        aside#sidebar .widget ul li a {
          color: #738887;
          font-size: 1.1em; }
    aside#sidebar .widget h3, aside#sidebar .widget #blog article#comments_list p.author cite, #blog article#comments_list p.author aside#sidebar .widget cite {
      font-family: 'Lobster', cursive;
      text-transform: none;
      font-size: 1.3em;
      color: #834833;
      background: #f5f1e1;
      padding: .5em 0 .5em .5em;
      border-bottom: 1px solid #d4d4cc;
      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
      margin: 0;
      margin-bottom: 5px; }
  aside#sidebar ul {
    margin-bottom: 30px; }
    aside#sidebar ul h3, aside#sidebar ul #blog article#comments_list p.author cite, #blog article#comments_list p.author aside#sidebar ul cite {
      text-transform: uppercase;
      color: #513115;
      margin-bottom: 8px;
      font-size: 1.2em; }
    aside#sidebar ul li {
      line-height: 1.8em;
      color: #7d6643;
      font-weight: 700;
      font-size: .8em; }
      aside#sidebar ul li.skill {
        line-height: 1em;
        color: #fff;
        font-size: .8em; }

#wrapper > section {
  margin-bottom: 50px;
  text-align: left;
  padding: 0 26px; }
  #wrapper > section:after {
    content: '';
    height: 0;
    line-height: 0;
    display: block;
    clear: both; }
  #wrapper > section article:after {
    content: '';
    height: 0;
    line-height: 0;
    display: block;
    clear: both; }
  #wrapper > section article p {
    text-align: justify; }

/*----------------------------------
Intro Secion
-----------------------------------*/
.intro {
  text-align: center;
  margin-bottom: 40px; }
  .intro hr {
    margin: 12px 0; }
  .intro h1, .intro h3, .intro #blog article#comments_list p.author cite, #blog article#comments_list p.author .intro cite, .intro h4 {
    text-align: center; }
  .intro h4 {
    text-transform: none;
    color: #d3be99; }
  .intro h3, .intro #blog article#comments_list p.author cite, #blog article#comments_list p.author .intro cite {
    font-size: 1.2em;
    color: #764530;
    margin-bottom: 3px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.8); }
  .intro h1 {
    font-size: 3.8em;
    text-transform: uppercase;
    color: #a8bb51;
    text-shadow: 1px 1px 0 #7C8B34, 2px 2px 0 #7C8B34;
    line-height: 1;
    font-weight: 400;
    margin-bottom: 0; }
    .intro h1 span {
      color: #6ab19a;
      text-shadow: 1px 1px 0 #538276, 2px 2px 0 #538276;
      letter-spacing: -.04em; }

/*----------------------------------
Layer Slider Secion
-----------------------------------*/
#layer_slider {
  padding: 0 !important;
  margin-bottom: 70px;
  border: 12px solid #b2c8cd;
  margin-left: -12px;
  position: relative;
  background: #F9F6F2;
  -moz-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.26);
  -webkit-box-shadow: 0 2px 7px rgba(0, 0, 0, 0.26);
  box-shadow: 0 2px 7px rgba(0, 0, 0, 0.26); }
  #layer_slider .sh {
    font-family: 'Bitter', serif;
    line-height: 1.3em;
    color: #764530;
    font-size: 2.8em;
    white-space: normal; }
  #layer_slider .si {
    width: 100%;
    height: auto;
    max-width: 510px; }
  #layer_slider .sp {
    line-height: 2em;
    color: #555;
    font-size: 1.3em;
    line-height: 1.4;
    width: 280px;
    text-align: justify; }
  #layer_slider:before, #layer_slider:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    z-index: -1;
    left: -12px;
    top: -26px;
    border-top: 16px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid #4e5d60; }
  #layer_slider:after {
    left: inherit;
    right: -12px;
    border-top: 16px solid transparent;
    border-bottom: 10px solid transparent;
    border-left: 10px solid #4e5d60;
    border-right: none; }
  #layer_slider .ls-bottom-slidebuttons a {
    background: rgba(0, 0, 0, 0.05);
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px;
    -moz-box-shadow: inset 0 0px 2px rgba(0, 0, 0, 0.3), inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.9), 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 0px 2px rgba(0, 0, 0, 0.3), inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.9), 0 -1px 0 rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 0px 2px rgba(0, 0, 0, 0.3), inset 0 1px 3px rgba(0, 0, 0, 0.2), 0 1px 0 rgba(255, 255, 255, 0.9), 0 -1px 0 rgba(0, 0, 0, 0.4);
    width: 20px;
    height: 20px;
    margin: 0 3px;
    display: inline-block;
    position: relative; }
  #layer_slider .ls-bottom-slidebuttons a.ls-nav-active:after, #layer_slider .ls-bottom-slidebuttons a:hover:after {
    content: '';
    width: 12px;
    height: 12px;
    background: #8EA4AA;
    position: absolute;
    z-index: 10;
    /*center dot*/
    left: 50%;
    margin-left: -6px;
    top: 3px;
    /*center dot*/
    -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3);
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
    border-radius: 30px; }

/*----------------------------------
My Work Secion
-----------------------------------*/
#my_work nav#work_navigation {
  text-align: center; }
  #my_work nav#work_navigation ul {
    overflow: hidden; }
    #my_work nav#work_navigation ul li {
      width: 20%;
      float: left; }
      #my_work nav#work_navigation ul li a {
        display: block;
        background: #fcfcfa;
        padding: 8px 0;
        color: #474747;
        font-family: 'Bitter', serif;
        font-size: .8em;
        border-right: 1px solid #efefe6; }
        #my_work nav#work_navigation ul li a:hover, #my_work nav#work_navigation ul li a.current {
          background: #efe4bf;
          color: #4a3413;
          text-decoration: none; }
      #my_work nav#work_navigation ul li:last-child a {
        border-right: 0; }
#my_work ul#grid {
  padding-top: 30px; }
  #my_work ul#grid li {
    background: #fcfcfa;
    width: 245px;
    padding: 10px;
    height: 425px;
    min-height: 300px;
    overflow: hidden;
    text-align: left;
    margin: 0 0 1.1em;
    -moz-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2);
    box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.2); }
    #my_work ul#grid li:after {
      content: '';
      height: 0;
      line-height: 0;
      display: block;
      clear: both; }
    #my_work ul#grid li img {
      width: 100%;
      height: auto;
      border: none;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none;
      margin: 0; }
    #my_work ul#grid li p {
      padding: 0;
      font-size: .9em;
      line-height: 1.5em;
      font-weight: 300;
      text-align: left; }
    #my_work ul#grid li a.more {
      position: absolute;
      bottom: 5px;
      right: 5px;
      font-weight: normal;
      color: #C2D271;
      font-family: 'Lobster', cursive;
      font-size: 1em;
      margin: 0 10px 10px 0; }
      #my_work ul#grid li a.more:hover {
        color: #A3B54D;
        text-decoration: none; }

/* -------------------
About Me Section
-------------------- */
#about_me img {
  border: 0;
  margin: 0;
  -moz-box-shadow: none;
  -webkit-box-shadow: none;
  box-shadow: none; }
  #about_me img#hexskills {
    max-width: 302px;
    float: left;
    margin-top: 50px;
    margin-right: 40px;
    margin-bottom: 10px; }
#about_me #about {
  margin-bottom: 20px; }

#contact_me h4 {
  margin-bottom: 1.1em; }
#contact_me article#form {
  text-align: left;
  float: left;
  width: 65%; }
#contact_me aside#contact_info {
  float: right;
  text-align: left;
  width: 30%; }
  #contact_me aside#contact_info ul li {
    line-height: 1.8em;
    color: #95a6a5;
    font-weight: 200; }

/* -------------------
    Gear Head
-------------------- */
@keyframes rotate {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-webkit-keyframes rotate {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-moz-keyframes rotate {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@-ms-keyframes rotate {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg); } }
@keyframes rotate-cc {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg); } }
@-webkit-keyframes rotate-cc {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg); } }
@-moz-keyframes rotate-cc {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg); } }
@-ms-keyframes rotate-cc {
  0% {
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg); }
  100% {
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
    transform: rotate(-360deg); } }
#gear-head {
  margin-left: 50px;
  width: 315px;
  height: 473px;
  float: right;
  background-image: url("../img/gearOpen_head.png");
  background-repeat: no-repeat;
  position: relative;
  z-index: 0; }
  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
    #gear-head {
      background-image: url("../img/gearOpen_head@2x.png");
      -webkit-background-size: 315px auto;
      -moz-background-size: 315px auto;
      background-size: 315px auto; } }
  #gear-head i {
    position: absolute;
    display: block;
    z-index: 1;
    background-image: url("../img/gears.png");
    background-position: 0px 0px;
    background-repeat: no-repeat;
    width: 50px;
    height: 50px; }
    @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
      #gear-head i {
        background-image: url("../img/gears@2x.png");
        -webkit-background-size: 212px auto;
        -moz-background-size: 212px auto;
        background-size: 212px auto; } }
    #gear-head i.gear-one {
      width: 66px;
      height: 66px;
      background-position: 0px 0px;
      left: 143px;
      top: 95px;
      -webkit-animation: rotate 5s infinite linear;
      -moz-animation: rotate 5s infinite linear;
      -ms-animation: rotate 5s infinite linear;
      -o-animation: rotate 5s infinite linear; }
    #gear-head i.gear-two {
      width: 60px;
      height: 60px;
      background-position: -69px 0px;
      left: 93px;
      top: 65px;
      -webkit-animation: rotate-cc 5s infinite linear;
      -moz-animation: rotate-cc 5s infinite linear;
      -ms-animation: rotate-cc 5s infinite linear;
      -o-animation: rotate-cc 5s infinite linear; }
    #gear-head i.gear-three {
      width: 54px;
      height: 54px;
      background-position: -131px 0px;
      left: 171px;
      top: 155px;
      -webkit-animation: rotate-cc 5s infinite linear;
      -moz-animation: rotate-cc 5s infinite linear;
      -ms-animation: rotate-cc 5s infinite linear;
      -o-animation: rotate-cc 5s infinite linear; }
    #gear-head i.gear-four {
      width: 35px;
      height: 35px;
      background-position: 0px -69px;
      left: 223px;
      top: 186px;
      -webkit-animation: rotate 5s infinite linear;
      -moz-animation: rotate 5s infinite linear;
      -ms-animation: rotate 5s infinite linear;
      -o-animation: rotate 5s infinite linear; }
    #gear-head i.gear-five {
      width: 32px;
      height: 32px;
      background-position: -40px -70px;
      left: 110px;
      top: 129px;
      -webkit-animation: rotate 8s infinite linear;
      -moz-animation: rotate 8s infinite linear;
      -ms-animation: rotate 8s infinite linear;
      -o-animation: rotate 8s infinite linear; }
    #gear-head i.gear-six {
      width: 23px;
      height: 23px;
      background-position: -189px -13px;
      left: 207px;
      top: 82px;
      -webkit-animation: rotate 8s infinite linear;
      -moz-animation: rotate 8s infinite linear;
      -ms-animation: rotate 8s infinite linear;
      -o-animation: rotate 8s infinite linear; }
    #gear-head i.gear-seven {
      width: 34px;
      height: 34px;
      background-position: -173px -68px;
      left: 214px;
      top: 110px;
      -webkit-animation: rotate-cc 8s infinite linear;
      -moz-animation: rotate-cc 8s infinite linear;
      -ms-animation: rotate-cc 8s infinite linear;
      -o-animation: rotate-cc 8s infinite linear; }
    #gear-head i.gear-eight {
      width: 31px;
      height: 31px;
      background-position: -140px -71px;
      left: 133px;
      top: 158px;
      -webkit-animation: rotate 3s infinite linear;
      -moz-animation: rotate 3s infinite linear;
      -ms-animation: rotate 3s infinite linear;
      -o-animation: rotate 3s infinite linear; }
    #gear-head i.gear-nine {
      width: 32px;
      height: 32px;
      background-position: -76px -70px;
      left: 164px;
      top: 64px;
      -webkit-animation: rotate-cc 5s infinite linear;
      -moz-animation: rotate-cc 5s infinite linear;
      -ms-animation: rotate-cc 5s infinite linear;
      -o-animation: rotate-cc 5s infinite linear; }
    #gear-head i.gear-ten {
      width: 28px;
      height: 28px;
      background-position: -111px -72px;
      left: 224px;
      top: 147px;
      -webkit-animation: rotate 5s infinite linear;
      -moz-animation: rotate 5s infinite linear;
      -ms-animation: rotate 5s infinite linear;
      -o-animation: rotate 5s infinite linear; }
    #gear-head i.gear-eleven {
      width: 34px;
      height: 34px;
      background-position: -173px -68px;
      left: 74px;
      top: 115px;
      -webkit-animation: rotate 3s infinite linear;
      -moz-animation: rotate 3s infinite linear;
      -ms-animation: rotate 3s infinite linear;
      -o-animation: rotate 3s infinite linear; }
    #gear-head i.connector-one {
      background-image: none;
      border: 5px solid #4593B7;
      border-right: 0;
      border-left: 0;
      width: 62px;
      height: 25px;
      top: 174px;
      left: 183px;
      z-index: 0;
      -moz-transform: rotate(25deg);
      -ms-transform: rotate(25deg);
      -webkit-transform: rotate(25deg);
      transform: rotate(25deg); }
    #gear-head i.connector-two {
      background-image: none;
      border: 2px solid #DED032;
      border-right: 0;
      border-left: 0;
      width: 62px;
      height: 19px;
      top: 102px;
      left: 165px;
      z-index: 0;
      -moz-transform: rotate(-41deg);
      -ms-transform: rotate(-41deg);
      -webkit-transform: rotate(-41deg);
      transform: rotate(-41deg); }

/* -------------------
    Skill Maters Area
-------------------- */
.skills-description {
  float: left;
  width: 50%; }

.skill-meters {
  float: right;
  width: 45%;
  margin-top: 50px; }

/* -------------------
    Categories listing Page
-------------------- */
ul#cat_list li {
  padding: 2em 0;
  border-bottom: 1px solid #d6d6ce;
  -moz-box-shadow: 0 1px 0px white;
  -webkit-box-shadow: 0 1px 0px white;
  box-shadow: 0 1px 0px white; }
  ul#cat_list li a.title {
    font-size: 1.1em;
    font-family: 'Bitter', serif;
    font-weight: 700;
    color: #9a5a3f; }
  ul#cat_list li img.th {
    float: left;
    margin-bottom: .8em;
    border: 4px solid #f3f3e9;
    -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    margin-right: 10px; }
  ul#cat_list li time {
    float: left;
    margin: 0 2em 0 0;
    display: block;
    height: 50px;
    color: #999;
    font-weight: 100; }
  ul#cat_list li:first-child {
    padding-top: 0; }
  ul#cat_list li .title {
    margin-bottom: 8px;
    display: block; }
  ul#cat_list li p {
    margin-bottom: 0;
    overflow: hidden; }

.pagination {
  margin: 25px 0; }
  .pagination:after {
    content: '';
    height: 0;
    line-height: 0;
    display: block;
    clear: both; }
  .pagination a, .pagination strong {
    display: block;
    float: left;
    width: 20px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    border: 1px solid #BABABA;
    font-size: .7em;
    -moz-border-radius: 3px;
    -webkit-border-radius: 3px;
    border-radius: 3px;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RlZGVkZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f9f9f9), color-stop(100%, #dedede));
    background-image: -moz-linear-gradient(#f9f9f9, #dedede);
    background-image: -webkit-linear-gradient(#f9f9f9, #dedede);
    background-image: linear-gradient(#f9f9f9, #dedede);
    -moz-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
    color: #666;
    font-weight: bold;
    margin-right: 5px; }
  .pagination a:hover {
    background: #fff;
    text-decoration: none; }
  .pagination strong {
    background: #555;
    border-color: #222;
    color: #eee;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
    -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4); }

/* -------------------
Footer & Copyright Section
-------------------- */
section#footer_wrapper {
  margin-bottom: 20px;
  background-repeat: repeat;
  position: relative;
  width: 100%;
  margin-left: -15px;
  padding: 25px 15px;
  -moz-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  background-image: url("../img/footerbg.png"); }
  @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
    section#footer_wrapper {
      background-image: url("../img/footerbg@2x.png");
      -webkit-background-size: 10px auto;
      -moz-background-size: 10px auto;
      background-size: 10px auto; } }
  section#footer_wrapper:after {
    content: '';
    height: 0;
    line-height: 0;
    display: block;
    clear: both; }
  section#footer_wrapper:before, section#footer_wrapper:after {
    content: '';
    width: 0;
    height: 0;
    position: absolute;
    z-index: -1; }
  section#footer_wrapper:before {
    left: -1px;
    top: -18px;
    border-top: 18px solid transparent;
    border-bottom: 14px solid transparent;
    border-right: 14px solid #998040; }
  section#footer_wrapper:after {
    top: -18px;
    right: -1px;
    border-top: 18px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 14px solid #998040;
    border-right: none; }
  section#footer_wrapper footer {
    text-align: left; }
    section#footer_wrapper footer:after {
      content: '';
      height: 0;
      line-height: 0;
      display: block;
      clear: both; }
    section#footer_wrapper footer ul {
      width: 28.8%;
      float: left;
      margin: 0 25px; }
      section#footer_wrapper footer ul li {
        font-size: .9em;
        overflow: hidden;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        white-space: nowrap;
        line-height: 2em; }
        section#footer_wrapper footer ul li a {
          font-weight: 300;
          color: #756033; }
      section#footer_wrapper footer ul.recent_posts a, section#footer_wrapper footer ul.kindle a {
        font-weight: bold; }
        section#footer_wrapper footer ul.recent_posts a em, section#footer_wrapper footer ul.kindle a em {
          font-weight: normal;
          font-style: italic; }
      section#footer_wrapper footer ul.tweet_list li {
        background-image: url("../img/twitter_bird.png");
        background-repeat: no-repeat;
        padding-left: 28px;
        color: #756033;
        font-weight: 300;
        line-height: 1.3em;
        white-space: normal;
        margin-bottom: 10px; }
        @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
          section#footer_wrapper footer ul.tweet_list li {
            background-image: url("../img/twitter_bird@2x.png");
            -webkit-background-size: 18px auto;
            -moz-background-size: 18px auto;
            background-size: 18px auto; } }
        section#footer_wrapper footer ul.tweet_list li span.tweet_time {
          font-size: .75em;
          font-weight: bold;
          display: block; }
      section#footer_wrapper footer ul.tweet_list a {
        color: #43b9ef; }
      section#footer_wrapper footer ul h3, section#footer_wrapper footer ul #blog article#comments_list p.author cite, #blog article#comments_list p.author section#footer_wrapper footer ul cite {
        font-family: 'lobster', serif;
        color: #5b3618;
        width: 100%;
        margin: 0 auto;
        margin-bottom: 10px;
        text-shadow: 0 1px 0 #ffeab2;
        font-weight: 400;
        font-size: 1.3em;
        text-align: center;
        padding-bottom: 5px;
        position: relative; }
        section#footer_wrapper footer ul h3:before, section#footer_wrapper footer ul #blog article#comments_list p.author cite:before, #blog article#comments_list p.author section#footer_wrapper footer ul cite:before, section#footer_wrapper footer ul h3:after, section#footer_wrapper footer ul #blog article#comments_list p.author cite:after, #blog article#comments_list p.author section#footer_wrapper footer ul cite:after {
          content: '';
          position: absolute;
          width: 32%;
          height: 9px;
          display: block;
          top: 8px;
          border-bottom: 1px solid #916925; }
        section#footer_wrapper footer ul h3:before, section#footer_wrapper footer ul #blog article#comments_list p.author cite:before, #blog article#comments_list p.author section#footer_wrapper footer ul cite:before {
          background-image: url("../img/text_decor_left.png");
          background-position: right center;
          background-repeat: no-repeat;
          display: block;
          left: 0; }
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            section#footer_wrapper footer ul h3:before, section#footer_wrapper footer ul #blog article#comments_list p.author cite:before, #blog article#comments_list p.author section#footer_wrapper footer ul cite:before {
              background-image: url("../img/text_decor_left@2x.png");
              -webkit-background-size: 21px auto;
              -moz-background-size: 21px auto;
              background-size: 21px auto; } }
        section#footer_wrapper footer ul h3:after, section#footer_wrapper footer ul #blog article#comments_list p.author cite:after, #blog article#comments_list p.author section#footer_wrapper footer ul cite:after {
          background-image: url("../img/text_decor_right.png");
          background-position: left center;
          background-repeat: no-repeat;
          display: block;
          right: 0; }
          @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
            section#footer_wrapper footer ul h3:after, section#footer_wrapper footer ul #blog article#comments_list p.author cite:after, #blog article#comments_list p.author section#footer_wrapper footer ul cite:after {
              background-image: url("../img/text_decor_right@2x.png");
              -webkit-background-size: 21px auto;
              -moz-background-size: 21px auto;
              background-size: 21px auto; } }

/* -------------------
Blog
-------------------- */
#blog .post a.button {
  float: right; }
#blog .post div.meta {
  margin-bottom: 10px; }
  #blog .post div.meta:after {
    content: '';
    height: 0;
    line-height: 0;
    display: block;
    clear: both; }
  #blog .post div.meta span {
    font-size: .8em;
    font-weight: bold;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9);
    color: #8a6556;
    display: inline-block;
    float: left;
    margin-right: 10px;
    padding-left: 20px; }
    #blog .post div.meta span.date {
      background-image: url("../img/postMeta_clock.png");
      background-repeat: no-repeat;
      background-position: left center; }
      @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
        #blog .post div.meta span.date {
          background-image: url("../img/postMeta_clock@2x.png");
          -webkit-background-size: 15px auto;
          -moz-background-size: 15px auto;
          background-size: 15px auto; } }
    #blog .post div.meta span.tags {
      background-image: url("../img/postMeta_tags.png");
      background-repeat: no-repeat;
      background-position: left center; }
      @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
        #blog .post div.meta span.tags {
          background-image: url("../img/postMeta_tags@2x.png");
          -webkit-background-size: 15px auto;
          -moz-background-size: 15px auto;
          background-size: 15px auto; } }
    #blog .post div.meta span.comments {
      background-image: url("../img/postMeta_comments.png");
      background-repeat: no-repeat;
      background-position: left center; }
      @media (-webkit-min-device-pixel-ratio: 2), (-moz-min-device-pixel-ratio: 2) {
        #blog .post div.meta span.comments {
          background-image: url("../img/postMeta_comments@2x.png");
          -webkit-background-size: 15px auto;
          -moz-background-size: 15px auto;
          background-size: 15px auto; } }
    #blog .post div.meta span a {
      font-weight: normal;
      color: #bc9f71; }
#blog .post header h4 {
  text-transform: none;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.6);
  margin-bottom: 8px; }
#blog article {
  margin-bottom: 30px; }
#blog article.related:after {
  content: '';
  height: 0;
  line-height: 0;
  display: block;
  clear: both; }
#blog article.related ul li {
  display: block;
  float: left;
  width: 28.5%;
  padding: 10px;
  background: #fcfcfa;
  margin-right: 3%; }
  #blog article.related ul li h3, #blog article.related ul li article#comments_list p.author cite, #blog article#comments_list p.author article.related ul li cite {
    margin: 0; }
  #blog article.related ul li:last-child {
    margin-right: 0; }
  #blog article.related ul li img {
    width: 100%;
    height: auto; }
#blog article#comments_list p.author {
  margin-bottom: 0px; }
  #blog article#comments_list p.author .avatar img {
    float: left;
    border: 3px solid #fff;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
    margin: 0 1em 1em 0; }
  #blog article#comments_list p.author .datetime {
    font-weight: 500;
    font-size: .8em;
    color: #666; }
  #blog article#comments_list p.author cite {
    font-size: 1.2em; }
#blog article#comments_list p.commentary {
  overflow: hidden; }

/*----------------------------------
    Copyright
-----------------------------------*/
footer#copyright {
  padding: 0 20px;
  padding-bottom: 10px; }
  footer#copyright:after {
    content: '';
    height: 0;
    line-height: 0;
    display: block;
    clear: both; }
  footer#copyright p, footer#copyright a, footer#copyright span {
    font-size: .8em;
    color: #9a9a9a;
    font-weight: 300; }
  footer#copyright p {
    float: left; }
  footer#copyright ul, footer#copyright li {
    float: right;
    display: block; }
  footer#copyright li span.pipe {
    padding: 0 10px; }

/**** Isotope Filtering ****/
.isotope-item {
  z-index: 2; }

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1; }

/**** Isotope CSS3 transitions ****/
.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
  -moz-transition-duration: 0.8s;
  -ms-transition-duration: 0.8s;
  -o-transition-duration: 0.8s;
  transition-duration: 0.8s; }

.isotope {
  -webkit-transition-property: height, width;
  -moz-transition-property: height, width;
  -ms-transition-property: height, width;
  -o-transition-property: height, width;
  transition-property: height, width; }

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
  -moz-transition-property: -moz-transform, opacity;
  -ms-transition-property: -ms-transform, opacity;
  -o-transition-property: -o-transform, opacity;
  transition-property: transform, opacity; }

/**** disabling Isotope CSS3 transitions ****/
.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
  -moz-transition-duration: 0s;
  -ms-transition-duration: 0s;
  -o-transition-duration: 0s;
  transition-duration: 0s; }

/* -------------------
    @media Queries
-------------------- */
@media only screen and (max-width: 1210px) {
  #wrapper {
    width: 960px; }
    #wrapper ul#grid li {
      width: 200px;
      margin-bottom: 10px; }

  #layer_slider .sh {
    line-height: 1.3em;
    font-size: 2.3em; }
  #layer_slider .si {
    max-width: 410px; }
  #layer_slider .sp {
    line-height: 1.6em;
    font-size: 1.1em; }

  img.half {
    width: 46%;
    margin-right: .8em; }

  #blog article.related ul li {
    margin-right: 2%; }

  section#footer_wrapper footer ul {
    width: 28%; }
    section#footer_wrapper footer ul h3:before, section#footer_wrapper footer ul #blog article#comments_list p.author cite:before, #blog article#comments_list p.author section#footer_wrapper footer ul cite:before, section#footer_wrapper footer ul h3:after, section#footer_wrapper footer ul #blog article#comments_list p.author cite:after, #blog article#comments_list p.author section#footer_wrapper footer ul cite:after {
      width: 27%; }

  #header #header_wrapper {
    width: 960px; } }
@media only screen and (max-width: 970px) {
  #wrapper {
    width: 768px; }
    #wrapper ul#grid li {
      width: 210px;
      margin-bottom: 12px; }

  #layer_slider .sh {
    line-height: 1.3em;
    font-size: 1.9em; }
  #layer_slider .si {
    max-width: 325px; }
  #layer_slider .sp {
    line-height: 1.6em;
    font-size: 1.1em; }

  img.half {
    width: 45%;
    margin-right: .85em; }

  #blog article.related ul li {
    margin-right: 2%;
    padding: 8px; }

  section#footer_wrapper footer ul {
    margin: 0 15px;
    width: 29%; }
    section#footer_wrapper footer ul h3:before, section#footer_wrapper footer ul #blog article#comments_list p.author cite:before, #blog article#comments_list p.author section#footer_wrapper footer ul cite:before, section#footer_wrapper footer ul h3:after, section#footer_wrapper footer ul #blog article#comments_list p.author cite:after, #blog article#comments_list p.author section#footer_wrapper footer ul cite:after {
      width: 23%; }

  #header #header_wrapper {
    width: 768px; } }
@media only screen and (max-width: 810px) {
  #wrapper {
    width: 600px; }
    #wrapper ul#grid li {
      width: 242px;
      margin-bottom: 20px; }

  #layer_slider .sh {
    line-height: 1.3em;
    font-size: 1.45em; }
  #layer_slider .si {
    max-width: 255px; }
  #layer_slider .sp {
    line-height: 1.5em;
    font-size: .9em; }

  img.half {
    width: 43%;
    margin-right: .85em; }

  #blog article.related ul li {
    margin-right: 6%;
    padding: 10px;
    width: 40%;
    margin-bottom: 6%; }
    #blog article.related ul li:nth-child(2n+2) {
      margin-right: 0; }

  #left_col {
    width: 60%; }

  aside#sidebar {
    width: 35%; }

  section#footer_wrapper footer ul {
    margin: 0 10px;
    width: 29.5%; }
    section#footer_wrapper footer ul h3:before, section#footer_wrapper footer ul #blog article#comments_list p.author cite:before, #blog article#comments_list p.author section#footer_wrapper footer ul cite:before, section#footer_wrapper footer ul h3:after, section#footer_wrapper footer ul #blog article#comments_list p.author cite:after, #blog article#comments_list p.author section#footer_wrapper footer ul cite:after {
      width: 23%;
      background: none; }
  section#footer_wrapper li {
    padding: 0 15px; }

  #header #header_wrapper {
    width: 600px; }

  #about_me #gear-head {
    margin: 0 auto;
    float: none; }
  #about_me img#hexskills {
    max-width: 220px;
    margin-right: 40px; } }
@media only screen and (max-width: 610px) {
  body {
    font-size: 85%; }

  .button {
    width: 100%;
    padding-right: 0;
    padding-left: 0;
    text-align: center; }

  #left_col {
    width: 100%; }

  img.half {
    width: 45.3%;
    margin-right: .8em; }

  aside#sidebar {
    float: none;
    clear: both;
    width: 100%; }

  #wrapper {
    width: 480px;
    padding-top: 10px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 0; }
    #wrapper section#left_col {
      padding: 0; }
    #wrapper section#posts {
      padding: 0; }
    #wrapper ul#grid li {
      width: 200px;
      margin-bottom: 20px; }
    #wrapper section {
      padding: 0 10px; }
    #wrapper .intro {
      font-size: 70%;
      margin-bottom: 25px; }
    #wrapper section#layer_slider {
      display: none; }
    #wrapper section#footer_wrapper {
      padding: 0;
      margin-left: 0;
      -moz-box-shadow: none;
      -webkit-box-shadow: none;
      box-shadow: none; }
      #wrapper section#footer_wrapper footer {
        padding: 15px; }

  section#footer_wrapper footer ul {
    text-align: center;
    margin: 0;
    margin-bottom: 15px;
    float: none;
    width: 96%; }
    section#footer_wrapper footer ul.tweet_list li {
      text-align: left; }
    section#footer_wrapper footer ul h3:before, section#footer_wrapper footer ul #blog article#comments_list p.author cite:before, #blog article#comments_list p.author section#footer_wrapper footer ul cite:before, section#footer_wrapper footer ul h3:after, section#footer_wrapper footer ul #blog article#comments_list p.author cite:after, #blog article#comments_list p.author section#footer_wrapper footer ul cite:after {
      width: 38%; }
    section#footer_wrapper footer ul h3:before, section#footer_wrapper footer ul #blog article#comments_list p.author cite:before, #blog article#comments_list p.author section#footer_wrapper footer ul cite:before {
      background-image: url("../img/text_decor_left.png");
      background-position: right center;
      background-repeat: no-repeat;
      display: block;
      left: 0; } }
    @media only screen and (max-width: 610px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 610px) and (-moz-min-device-pixel-ratio: 2) {
      section#footer_wrapper footer ul h3:before, section#footer_wrapper footer ul #blog article#comments_list p.author cite:before, #blog article#comments_list p.author section#footer_wrapper footer ul cite:before {
        background-image: url("../img/text_decor_left@2x.png");
        -webkit-background-size: 21px auto;
        -moz-background-size: 21px auto;
        background-size: 21px auto; } }
@media only screen and (max-width: 610px) {
    section#footer_wrapper footer ul h3:after, section#footer_wrapper footer ul #blog article#comments_list p.author cite:after, #blog article#comments_list p.author section#footer_wrapper footer ul cite:after {
      background-image: url("../img/text_decor_right.png");
      background-position: left center;
      background-repeat: no-repeat;
      display: block;
      right: 0; } }
    @media only screen and (max-width: 610px) and (-webkit-min-device-pixel-ratio: 2), only screen and (max-width: 610px) and (-moz-min-device-pixel-ratio: 2) {
      section#footer_wrapper footer ul h3:after, section#footer_wrapper footer ul #blog article#comments_list p.author cite:after, #blog article#comments_list p.author section#footer_wrapper footer ul cite:after {
        background-image: url("../img/text_decor_right@2x.png");
        -webkit-background-size: 21px auto;
        -moz-background-size: 21px auto;
        background-size: 21px auto; } }

@media only screen and (max-width: 610px) {
  section#footer_wrapper:before, section#footer_wrapper:after {
    display: none;
    border: 0; }

  #header {
    padding-top: 0;
    position: relative;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
    border-bottom: 0;
    height: auto;
    margin: 0 auto;
    background: none; }
    #header #header_wrapper {
      width: 480px;
      margin: 0 auto;
      width: 100%; }
      #header #header_wrapper #utility_bar {
        display: none; }
    #header nav#main_navigation {
      background: url("../img/wrapper_bg_pattern.jpg") repeat;
      width: 480px;
      margin: 0 auto;
      top: 0;
      position: relative; }
      #header nav#main_navigation a {
        font-size: 1.4em;
        background-color: #fff;
        width: 24.5%;
        margin-left: -3px;
        padding: .5em 0; }
        #header nav#main_navigation a:nth-of-type(1) {
          margin-left: 0; }
        #header nav#main_navigation a:nth-of-type(2) {
          margin-right: 0; }
        #header nav#main_navigation a:nth-of-type(3) {
          margin-left: -3px; }
        #header nav#main_navigation a:nth-of-type(4) {
          border-right: 0; }
        #header nav#main_navigation a.logo {
          position: static;
          background-color: transparent;
          top: 10px;
          margin-top: 10px;
          border: none;
          margin-left: 0px; }
          #header nav#main_navigation a.logo:after {
            display: none; }
          #header nav#main_navigation a.logo:hover {
            background-color: transparent; }
        #header nav#main_navigation a:hover {
          background-color: #EFE4BF;
          color: #764530; }

  #my_work nav#work_navigation ul li {
    width: 100%;
    float: none; }

  .ribbon_container:after, .ribbon_container:before {
    display: none; }

  #about_me hr {
    display: none; }
  #about_me #gear-head {
    display: none; }
  #about_me img#hexskills {
    display: none;
    max-width: 220px;
    margin-right: 40px; }

  #contact_me h4 {
    text-align: center;
    margin-bottom: 0; }
  #contact_me li {
    text-align: center; }
    #contact_me li.linkedin, #contact_me li.facebook, #contact_me li.skype, #contact_me li.twitter {
      display: none; }
    #contact_me li a {
      display: block;
      text-align: center;
      padding: 8px 0;
      background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2Y5ZjlmOSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2RlZGVkZSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
      background-size: 100%;
      background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #f9f9f9), color-stop(100%, #dedede));
      background-image: -moz-linear-gradient(#f9f9f9, #dedede);
      background-image: -webkit-linear-gradient(#f9f9f9, #dedede);
      background-image: linear-gradient(#f9f9f9, #dedede);
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      border: 1px solid #d5d5c8;
      text-decoration: none;
      margin-bottom: 10px;
      color: #764530; }
  #contact_me article#form, #contact_me article#form {
    width: 100%;
    float: none;
    margin-bottom: 40px; }
  #contact_me aside#contact_info {
    float: none;
    width: 100%; }

  input[type='text'], input[type='email'], input[type='submit'] {
    width: 100%;
    float: none; }

  textarea {
    margin: 0; }

  input[type='text'], input[type='email'] {
    width: 100%; } }
@media only screen and (max-width: 400px) {
  .ribbon_container {
    display: none; }

  form input {
    display: block; }

  .video-container {
    width: 95%; }

  #wrapper {
    width: 320px;
    padding-top: 5px; }
    #wrapper ul#grid li {
      width: 280px;
      margin-bottom: 20px; }

  img.half, img.large {
    width: 95%;
    margin-right: 0em; }

  #blog article.related ul li {
    margin: 0 !important;
    padding: 10px;
    width: 92%;
    float: none;
    margin-bottom: 6%; }

  #about_me img#gear_head, #about_me img#hexskills {
    max-width: 100%;
    margin-left: 0px;
    margin-bottom: 8px; }

  #header nav#main_navigation {
    width: 320px;
    margin: 0 auto;
    top: 0; }
    #header nav#main_navigation a {
      font-size: 1.2em;
      padding: .5em 0; }

  section#footer_wrapper footer ul h3:before, section#footer_wrapper footer ul #blog article#comments_list p.author cite:before, #blog article#comments_list p.author section#footer_wrapper footer ul cite:before, section#footer_wrapper footer ul h3:after, section#footer_wrapper footer ul #blog article#comments_list p.author cite:after, #blog article#comments_list p.author section#footer_wrapper footer ul cite:after {
    width: 30%; }

  h1.ribbon {
    padding: 0 10px;
    margin-bottom: 25px; }
    h1.ribbon .ribbon_content {
      font-size: .9em; }

  hr, hr.fancy {
    margin: 20px 0; } }