/* - - - - - - - - - - - - - */
/* - - - SET THE VIBES - - - */
/* - - - - - - - - - - - - - */
/******************************************************************
Site Name:
Author:

Stylesheet: Variables

Here is where we declare all our variables like colors, fonts,
base values, and defaults. We want to make sure this file ONLY
contains variables that way our files don't get all messy.
No one likes a mess.

******************************************************************/
/*********************
COLORS
Need help w/ choosing your colors? Try this site out:
http://0to255.com/
*********************/
/*
Here's a great tutorial on how to
use color variables properly:
http://sachagreif.com/sass-color-variables/
*/
/******************************************************************
Site Name:
Author:

Stylesheet: Typography

Need to import a font or set of icons for your site? Drop them in
here or just use this to establish your typographical grid. Or not.
Do whatever you want to...GOSH!

Helpful Articles:
http://trentwalton.com/2012/06/19/fluid-type/
http://ia.net/blog/responsive-typography-the-basics/
http://alistapart.com/column/responsive-typography-is-a-physical-discipline

******************************************************************/
@import url(http://fonts.googleapis.com/css?family=Lato|Nunito|Paytone+One|Raleway);
@font-face {
  font-family: 'novito';
  src: url("fonts/novitonova-regular-webfont.eot");
  src: url("fonts/novitonova-regular-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/novitonova-regular-webfont.woff2") format("woff2"), url("fonts/novitonova-regular-webfont.woff") format("woff"), url("fonts/novitonova-regular-webfont.ttf") format("truetype"), url("fonts/novitonova-regular-webfont.svg#novitonovaregular") format("svg");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: 'sketch';
  src: url("fonts/sketch_block-webfont.eot");
  src: url("fonts/sketch_block-webfont.eot?#iefix") format("embedded-opentype"), url("fonts/sketch_block-webfont.woff2") format("woff2"), url("fonts/sketch_block-webfont.woff") format("woff"), url("fonts/sketch_block-webfont.ttf") format("truetype"), url("fonts/sketch_block-webfont.svg#sketch_blockbold") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* line 44, ../sass/import/_typography.scss */
.handwritten {
  font-family: 'novito';
  text-transform: uppercase;
}

/* line 49, ../sass/import/_typography.scss */
.sketch {
  font-family: 'sketch';
}

@font-face {
  font-family: 'icomoon';
  src: url("fonts/icomoon.eot?ko5wqp");
  src: url("fonts/icomoon.eot?#iefixko5wqp") format("embedded-opentype"), url("fonts/icomoon.woff?ko5wqp") format("woff"), url("fonts/icomoon.ttf?ko5wqp") format("truetype"), url("fonts/icomoon.svg?ko5wqp#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
}
/* line 70, ../sass/import/_typography.scss */
[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* line 84, ../sass/import/_typography.scss */
.icon-lab:before {
  content: "\e607";
}

/* line 87, ../sass/import/_typography.scss */
.icon-lightning:before {
  content: "\e600";
}

/* line 90, ../sass/import/_typography.scss */
.icon-star:before {
  content: "\e603";
}

/* line 93, ../sass/import/_typography.scss */
.icon-star2:before {
  content: "\e601";
}

/* line 96, ../sass/import/_typography.scss */
.icon-heart:before {
  content: "\e602";
}

/* line 99, ../sass/import/_typography.scss */
.icon-heart2:before {
  content: "\e604";
}

/* line 102, ../sass/import/_typography.scss */
.icon-wink:before {
  content: "\e605";
}

/* line 105, ../sass/import/_typography.scss */
.icon-grin:before {
  content: "\e606";
}

/*
some nice typographical defaults
more here: http://www.newnet-soft.com/blog/csstypography
*/
/* line 114, ../sass/import/_typography.scss */
p {
  -ms-word-break: break-all;
  -ms-word-wrap: break-all;
  word-break: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-before: 2;
  -webkit-hyphenate-after: 3;
  hyphenate-lines: 3;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig";
}

/******************************************************************
Site Name:
Author:

Stylesheet: Mixins Stylesheet

This is where you can take advantage of Sass' great features: Mixins.
I won't go in-depth on how they work exactly,
there are a few articles below that will help do that. What I will
tell you is that this will help speed up simple changes like
changing a color or adding CSS3 techniques gradients.

A WORD OF WARNING: It's very easy to overdo it here. Be careful and
remember less is more.

Helpful:
http://sachagreif.com/useful-sass-mixins/
http://thesassway.com/intermediate/leveraging-sass-mixins-for-cleaner-code
http://web-design-weekly.com/blog/2013/05/12/handy-sass-mixins/

******************************************************************/
/*********************
TRANSITION
*********************/
/* Material Design */
/*-----------------------------------------*/
/*********************
CSS3 GRADIENTS
Be careful with these since they can
really slow down your CSS. Don't overdo it.
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/* Letterpress */
/*-----------------------------------------*/
/* Emboss */
/*-----------------------------------------*/
/*********************
BOX SIZING
*********************/
/* @include box-sizing(border-box); */
/* NOTE: value of "padding-box" is only supported in Gecko. So
probably best not to use it. I mean, were you going to anyway? */
/* Overlay style */
/* line 115, ../sass/import/_mixins.scss */
.overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(153, 204, 51, 0.9);
}

/* Overlay closing cross */
/* line 125, ../sass/import/_mixins.scss */
.overlay .overlay-close {
  width: 80px;
  height: 80px;
  position: absolute;
  right: 20px;
  top: 20px;
  overflow: hidden;
  border: none;
  background: url(../img/cross.png) no-repeat center center;
  text-indent: 200%;
  color: transparent;
  outline: none;
  z-index: 100;
}

/* Menu style */
/* line 141, ../sass/import/_mixins.scss */
.overlay nav {
  text-align: center;
  position: relative;
  top: 50%;
  height: 60%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* line 150, ../sass/import/_mixins.scss */
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  height: 100%;
  position: relative;
}

/* line 159, ../sass/import/_mixins.scss */
.overlay ul li {
  display: block;
  height: 20%;
  height: calc(100% / 5);
  min-height: 54px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* line 168, ../sass/import/_mixins.scss */
.overlay ul li a {
  font-size: 54px;
  font-weight: 300;
  display: block;
  color: #fff;
  -webkit-transition: color 0.2s;
  transition: color 0.2s;
}

/* line 177, ../sass/import/_mixins.scss */
.overlay ul li a:hover,
.overlay ul li a:focus {
  color: #f0f0f0;
}

/* Effects */
/* line 183, ../sass/import/_mixins.scss */
.overlay-genie {
  background: transparent;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.3s 0.2s, visibility 0s 0.6s;
  transition: opacity 0.3s 0.2s, visibility 0s 0.6s;
}

/* line 191, ../sass/import/_mixins.scss */
.overlay-genie.open {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

/* line 198, ../sass/import/_mixins.scss */
.overlay-genie svg {
  position: absolute;
  top: 0;
  left: 0;
}

/* line 204, ../sass/import/_mixins.scss */
.overlay-genie .overlay-path {
  fill: rgba(153, 204, 51, 0.9);
}

/* line 208, ../sass/import/_mixins.scss */
.overlay-genie nav {
  opacity: 0;
  -webkit-transform: scale(0.8) translateY(-48%);
  transform: scale(0.8) translateY(-48%);
  -webkit-transition: opacity 0.3s 0.3s, -webkit-transform 0.3s 0.3s;
  transition: opacity 0.3s 0.3s, transform 0.3s 0.3s;
}

/* line 216, ../sass/import/_mixins.scss */
.overlay-genie .overlay-close {
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

/* line 222, ../sass/import/_mixins.scss */
.overlay-genie.open nav,
.overlay-genie.open .overlay-close {
  opacity: 1;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

/* line 229, ../sass/import/_mixins.scss */
.overlay-genie.open nav {
  -webkit-transform: scale(1) translateY(-50%);
  transform: scale(1) translateY(-50%);
}

/* line 234, ../sass/import/_mixins.scss */
.overlay-genie.close nav,
.overlay-genie.close .overlay-close {
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

@media screen and (max-height: 30.5em) {
  /* line 241, ../sass/import/_mixins.scss */
  .overlay nav {
    height: 70%;
    font-size: 34px;
  }

  /* line 245, ../sass/import/_mixins.scss */
  .overlay ul li {
    min-height: 34px;
  }
}
/******************************************************************
Site Name:
Author:

Stylesheet: Form Styles

We put all the form and button styles in here to setup a consistent
look. If we need to customize them, we can do this in the main
stylesheets and just override them. Easy Peasy.

You're gonna see a few data-uri thingies down there. If you're not
sure what they are, check this link out:
http://css-tricks.com/data-uris/
If you want to create your own, use this helpful link:
http://websemantics.co.uk/online_tools/image_to_data_uri_convertor/

******************************************************************/
/*********************
INPUTS
*********************/
/* line 24, ../sass/import/_forms.scss */
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
select,
textarea,
.field {
  display: block;
  height: 40px;
  line-height: 40px;
  padding: 0 12px;
  margin-bottom: 14px;
  font-size: 1em;
  color: #5c6b80;
  border-radius: 3px;
  vertical-align: middle;
  box-shadow: none;
  border: 0;
  width: 100%;
  max-width: 400px;
  font-family: "Lato", "Georgia", Cambria, Times New Roman, Times, serif;
  background-color: #eaedf2;
  -webkit-transition: background-color 0.24s ease-in-out;
  -moz-transition: background-color 0.24s ease-in-out;
  -ms-transition: background-color 0.24s ease-in-out;
}
/* line 59, ../sass/import/_forms.scss */
input[type="text"]:focus, input[type="text"]:active,
input[type="password"]:focus,
input[type="password"]:active,
input[type="datetime"]:focus,
input[type="datetime"]:active,
input[type="datetime-local"]:focus,
input[type="datetime-local"]:active,
input[type="date"]:focus,
input[type="date"]:active,
input[type="month"]:focus,
input[type="month"]:active,
input[type="time"]:focus,
input[type="time"]:active,
input[type="week"]:focus,
input[type="week"]:active,
input[type="number"]:focus,
input[type="number"]:active,
input[type="email"]:focus,
input[type="email"]:active,
input[type="url"]:focus,
input[type="url"]:active,
input[type="search"]:focus,
input[type="search"]:active,
input[type="tel"]:focus,
input[type="tel"]:active,
input[type="color"]:focus,
input[type="color"]:active,
select:focus,
select:active,
textarea:focus,
textarea:active,
.field:focus,
.field:active {
  background-color: #f7f8fa;
}
/* line 65, ../sass/import/_forms.scss */
input[type="text"].error, input[type="text"].is-invalid,
input[type="password"].error,
input[type="password"].is-invalid,
input[type="datetime"].error,
input[type="datetime"].is-invalid,
input[type="datetime-local"].error,
input[type="datetime-local"].is-invalid,
input[type="date"].error,
input[type="date"].is-invalid,
input[type="month"].error,
input[type="month"].is-invalid,
input[type="time"].error,
input[type="time"].is-invalid,
input[type="week"].error,
input[type="week"].is-invalid,
input[type="number"].error,
input[type="number"].is-invalid,
input[type="email"].error,
input[type="email"].is-invalid,
input[type="url"].error,
input[type="url"].is-invalid,
input[type="search"].error,
input[type="search"].is-invalid,
input[type="tel"].error,
input[type="tel"].is-invalid,
input[type="color"].error,
input[type="color"].is-invalid,
select.error,
select.is-invalid,
textarea.error,
textarea.is-invalid,
.field.error,
.field.is-invalid {
  color: #fbe3e4;
  border-color: #fbe3e4;
  background-color: #fff;
  background-position: 99% center;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2NDM0NDREQkYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2NDM0NDREQ0YwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQ3ODRGRkE2RjA0QTExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY0MzQ0NERBRjA0QjExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+U8iT5wAAAedJREFUeNqk1U9I02Ecx/HtV3aIFAc1hcRDUoGXRAq0oNLA2CrsEFmHbikZu0iQYIFGYAiegkCpLipBxPpDEBMUzB0EhSG2LhG7hMR2GviPgUTvB57Bw8P3+U23B16HPX8+e/b8nt93wezZSMCnhXETF3AcB5BDCnH8Dq98ExcGHcFn8Ah3cdDni+fxnPDv9oAnTB7CKu6VCFXtChZy56LxUjt+jfuB8toSOth9wd7xWAWhqrUjYR/FRTwWJm+iIPT/w7bQf5ljiZnBg45dtKFX6H+LU8gIY8OEV6vgTkStwXWE8BPTGDHGPqNPz2mCfSOOYkA99TvCt1bhGPL68zMcwmncMuape10jrI+q4BbHi/FLn31S9z2x5tRhTc+1W506ipM+T3oRD4X+8+qtc4SqFvL0z/Fr14S+Szjis8bz9Lvvaq8cwS/wwGfdlqfPSWqTiFlX77o13u9Ym1PBs8JAytpRoy44X9Ft9E/gvbA+rYKn8NcaaMVc8UHgBw4b9/iqUQZ6hOAJFbyDcUflmsEX4a6+wTtHGfhAIUqa1U29Zc2BytouThD8x6xuN5CtMPi2CrXLZkZf/HyZoRFCP7n+QVR4PV7uI/AjGghN7OU/r1ilnqILtfpNC+o6vIFljBKYlhb/F2AAgaBsWR5wRiIAAAAASUVORK5CYII=);
  outline-color: #fbe3e4;
}
/* line 77, ../sass/import/_forms.scss */
input[type="text"].success, input[type="text"].is-valid,
input[type="password"].success,
input[type="password"].is-valid,
input[type="datetime"].success,
input[type="datetime"].is-valid,
input[type="datetime-local"].success,
input[type="datetime-local"].is-valid,
input[type="date"].success,
input[type="date"].is-valid,
input[type="month"].success,
input[type="month"].is-valid,
input[type="time"].success,
input[type="time"].is-valid,
input[type="week"].success,
input[type="week"].is-valid,
input[type="number"].success,
input[type="number"].is-valid,
input[type="email"].success,
input[type="email"].is-valid,
input[type="url"].success,
input[type="url"].is-valid,
input[type="search"].success,
input[type="search"].is-valid,
input[type="tel"].success,
input[type="tel"].is-valid,
input[type="color"].success,
input[type="color"].is-valid,
select.success,
select.is-valid,
textarea.success,
textarea.is-valid,
.field.success,
.field.is-valid {
  color: #e6efc2;
  border-color: #e6efc2;
  background-color: #fff;
  background-position: 99% center;
  background-repeat: no-repeat;
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABYAAAAWCAYAAADEtGw7AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo2NDM0NDRERkYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo2NDM0NDRFMEYwNEIxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjY0MzQ0NERERjA0QjExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjY0MzQ0NERFRjA0QjExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+7olkTQAAAfhJREFUeNqklU9oE0EUhzdroWjw0tBeWlDxkEaIp55TsCU9VKIgCrHBelA8CQ1Kr1WPbZrQ3gqtQqvGqxpQc2jBk6BIIaAGD4qNCKURpDSKiPi98gLDsJt//uBjsztvfnk7895sIPAw6/joGMThFJyAXn2+A+9gA57/TaY/eU0OeBgfhGm4DiGnsb7DAszxBz/NAdcKjMJLuNWCqagHbsscN5+L+hmH4QkMOe1L5jzFfNA2PgT34ajTuY7AGuZB0/hmh5m+gS0r8xv1zRvg+gGCHZiOwnF4DP3iB3sQkYxPd2C6CWfhB9Xwlus5+K1j4jXuaq3a+gM1H9OPcAa+7q9lPidZJqHbiIm7Wg22rsEI7FrPSzAMX/T+ADyAKSsu7Fr1KplehLvwCs5DvfBf65p+MypqRbO1FXK9utH4/QKuaqYTsG3E3INJv00Q46px3+XxanJ/Ute2/vqP4FKDza2KcdljIKdnhS0xXYULTaqmLMZFn8FFSFtvt6x70ExFCS5oUXspq2ssa7oEl1swFa+CGFdgtkHgPDyDKy02zyxNU6lXRUZb1EuHYayNNs+Yh5B0WQo+/8fpJnNTZFuzz2OpjoQ2QruSOQlMy35fEGmEGMxY9e1brxobw7TkWA1h6xfckUPb+JhGoE/Hpfvew7qUld/H9J8AAwDpw3WYrxcZ3QAAAABJRU5ErkJggg==);
  outline-color: #e6efc2;
}
/* line 89, ../sass/import/_forms.scss */
input[type="text"][disabled], input[type="text"].is-disabled,
input[type="password"][disabled],
input[type="password"].is-disabled,
input[type="datetime"][disabled],
input[type="datetime"].is-disabled,
input[type="datetime-local"][disabled],
input[type="datetime-local"].is-disabled,
input[type="date"][disabled],
input[type="date"].is-disabled,
input[type="month"][disabled],
input[type="month"].is-disabled,
input[type="time"][disabled],
input[type="time"].is-disabled,
input[type="week"][disabled],
input[type="week"].is-disabled,
input[type="number"][disabled],
input[type="number"].is-disabled,
input[type="email"][disabled],
input[type="email"].is-disabled,
input[type="url"][disabled],
input[type="url"].is-disabled,
input[type="search"][disabled],
input[type="search"].is-disabled,
input[type="tel"][disabled],
input[type="tel"].is-disabled,
input[type="color"][disabled],
input[type="color"].is-disabled,
select[disabled],
select.is-disabled,
textarea[disabled],
textarea.is-disabled,
.field[disabled],
.field.is-disabled {
  cursor: not-allowed;
  border-color: #cfcfcf;
  opacity: 0.6;
}
/* line 95, ../sass/import/_forms.scss */
input[type="text"][disabled]:focus, input[type="text"][disabled]:active, input[type="text"].is-disabled:focus, input[type="text"].is-disabled:active,
input[type="password"][disabled]:focus,
input[type="password"][disabled]:active,
input[type="password"].is-disabled:focus,
input[type="password"].is-disabled:active,
input[type="datetime"][disabled]:focus,
input[type="datetime"][disabled]:active,
input[type="datetime"].is-disabled:focus,
input[type="datetime"].is-disabled:active,
input[type="datetime-local"][disabled]:focus,
input[type="datetime-local"][disabled]:active,
input[type="datetime-local"].is-disabled:focus,
input[type="datetime-local"].is-disabled:active,
input[type="date"][disabled]:focus,
input[type="date"][disabled]:active,
input[type="date"].is-disabled:focus,
input[type="date"].is-disabled:active,
input[type="month"][disabled]:focus,
input[type="month"][disabled]:active,
input[type="month"].is-disabled:focus,
input[type="month"].is-disabled:active,
input[type="time"][disabled]:focus,
input[type="time"][disabled]:active,
input[type="time"].is-disabled:focus,
input[type="time"].is-disabled:active,
input[type="week"][disabled]:focus,
input[type="week"][disabled]:active,
input[type="week"].is-disabled:focus,
input[type="week"].is-disabled:active,
input[type="number"][disabled]:focus,
input[type="number"][disabled]:active,
input[type="number"].is-disabled:focus,
input[type="number"].is-disabled:active,
input[type="email"][disabled]:focus,
input[type="email"][disabled]:active,
input[type="email"].is-disabled:focus,
input[type="email"].is-disabled:active,
input[type="url"][disabled]:focus,
input[type="url"][disabled]:active,
input[type="url"].is-disabled:focus,
input[type="url"].is-disabled:active,
input[type="search"][disabled]:focus,
input[type="search"][disabled]:active,
input[type="search"].is-disabled:focus,
input[type="search"].is-disabled:active,
input[type="tel"][disabled]:focus,
input[type="tel"][disabled]:active,
input[type="tel"].is-disabled:focus,
input[type="tel"].is-disabled:active,
input[type="color"][disabled]:focus,
input[type="color"][disabled]:active,
input[type="color"].is-disabled:focus,
input[type="color"].is-disabled:active,
select[disabled]:focus,
select[disabled]:active,
select.is-disabled:focus,
select.is-disabled:active,
textarea[disabled]:focus,
textarea[disabled]:active,
textarea.is-disabled:focus,
textarea.is-disabled:active,
.field[disabled]:focus,
.field[disabled]:active,
.field.is-disabled:focus,
.field.is-disabled:active {
  background-color: #d5edf8;
}

/* line 105, ../sass/import/_forms.scss */
input[type="password"] {
  letter-spacing: 0.3em;
}

/* line 110, ../sass/import/_forms.scss */
textarea {
  max-width: 100%;
  min-height: 120px;
  line-height: 1.5em;
}

/* line 117, ../sass/import/_forms.scss */
select {
  -webkit-appearance: none;
  /* 1 */
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAHCAYAAADXhRcnAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEOEZCMjYxMEYwNUUxMUUyOTI4REZGQTEzMzA2MDcyNiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEOEZCMjYxMUYwNUUxMUUyOTI4REZGQTEzMzA2MDcyNiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkQ4RkIyNjBFRjA1RTExRTI5MjhERkZBMTMzMDYwNzI2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkQ4RkIyNjBGRjA1RTExRTI5MjhERkZBMTMzMDYwNzI2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Vxkp9gAAAI9JREFUeNpidHFxucHAwKAOxE+AmJmBMPgLxDJAfJMFSKwD4kqoAClgA+P///8ZXF1dPaCGcBKh6QcQB+3evXs7WDMIAA2QB1I7gFgDj0aQFz2BGh+AOEwwUaDAQyBlCMR7cGjcC5KHaQQBuM3IAOiKTiBVhiTUDdRUhq4Oq2aoAelAahIQ5wM1zsCmBiDAADhYMJXVZ9u9AAAAAElFTkSuQmCC);
  background-repeat: no-repeat;
  background-position: 97.5% center;
}

/******************************************************************
Site Name:
Author:

Stylesheet: Button Styles

Buttons are a pretty important part of your site's style, so it's
important to have a consistent baseline for them. Use this stylesheet
to create all kinds of buttons.

Helpful Links:
http://galp.in/blog/2011/08/02/the-ui-guide-part-1-buttons/

******************************************************************/
/*********************
BUTTON DEFAULTS
We're gonna use a placeholder selector here
so we can use common styles. We then use this
to load up the defaults in all our buttons.

Here's a quick video to show how it works:
http://www.youtube.com/watch?v=hwdVpKiJzac

*********************/
/* line 27, ../sass/import/_buttons.scss */
.blue-btn {
  display: inline-block;
  position: relative;
  font-family: "Nunito", "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: #fff;
  font-size: 0.9em;
  font-size: 34px;
  line-height: 34px;
  font-weight: normal;
  padding: 0 24px;
  border-radius: 4px;
  border: 0;
  cursor: pointer;
  -webkit-transition: background-color 0.14s ease-in-out;
  -moz-transition: background-color 0.14s ease-in-out;
  -ms-transition: background-color 0.14s ease-in-out;
}
/* line 44, ../sass/import/_buttons.scss */
.blue-btn:hover, .blue-btn:focus {
  color: #fff;
  text-decoration: none;
}
/* line 50, ../sass/import/_buttons.scss */
.blue-btn:active {
  top: 1px;
}

/*
An example button.
You can use this example if you want. Just replace all the variables
and it will create a button dependant on those variables.
*/
/* line 61, ../sass/import/_buttons.scss */
.blue-btn {
  background-color: #2980b9;
}
/* line 65, ../sass/import/_buttons.scss */
.blue-btn:hover, .blue-btn:focus {
  background-color: #2574a8;
}
/* line 70, ../sass/import/_buttons.scss */
.blue-btn:active {
  background-color: #2472a4;
}

/* - - - - - - - - - - - - - */
/* - - - MEDIA QUERIES - - - */
/* - - - - - - - - - - - - - */
/* SMALL SCREENS */
/* Define basic styles */
@media only screen {
  /*********************
  GENERAL STYLES
  *********************/
  /* line 5, ../sass/import/_base.scss */
  body {
    font-family: "Nunito", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
    line-height: 1.5;
    color: #5c6b80;
    background-color: #eaedf2;
    -webkit-font-smoothing: antialiased;
    background: #fff url("../img/wave.png") no-repeat fixed;
    background-size: cover;
    background-position: 0 -100px;
  }

  /* line 17, ../sass/import/_base.scss */
  p {
    font-family: "Lato", "Georgia", Cambria, Times New Roman, Times, serif;
    color: #555;
  }

  /* line 22, ../sass/import/_base.scss */
  .corner {
    height: 20px;
    width: 10px;
    background: black;
    position: fixed;
    margin: 0;
    padding: 0;
  }

  /* line 31, ../sass/import/_base.scss */
  .top-right {
    top: 0;
    right: 0;
  }

  /* line 37, ../sass/import/_base.scss */
  .top-left {
    top: 0;
    left: 0;
  }

  /* line 43, ../sass/import/_base.scss */
  .bottom-right {
    bottom: 0;
    right: 0;
  }

  /* line 49, ../sass/import/_base.scss */
  .bottom-left {
    bottom: 0;
    left: 0;
  }

  /* line 55, ../sass/import/_base.scss */
  .white-bg {
    background: rgba(255, 255, 255, 0.3);
  }

  /* line 59, ../sass/import/_base.scss */
  #pic-of-me {
    border-radius: 5px;
    height: 200px;
  }

  /* line 63, ../sass/import/_base.scss */
  .thumbnail {
    padding: 10px;
  }

  /* line 67, ../sass/import/_base.scss */
  .my-card {
    border-top: 2px solid rgba(255, 255, 255, 0.8);
    border-left: 2px solid rgba(255, 255, 255, 0.8);
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid white;
    -moz-box-shadow: 0 0px 2px rgba(102, 102, 102, 0.45), 0 1px 4px rgba(0, 0, 255, 0.1);
    -webkit-box-shadow: 0 0px 2px rgba(102, 102, 102, 0.45), 0 1px 4px rgba(0, 0, 255, 0.1);
    box-shadow: 0 0px 2px rgba(102, 102, 102, 0.45), 0 1px 4px rgba(0, 0, 255, 0.1);
    padding: 20px;
    height: auto;
    position: relative;
    max-width: 100%;
    padding: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
  }

  /*********************
  LINK STYLES
  *********************/
  /* line 93, ../sass/import/_base.scss */
  a, a:visited {
    color: #3969FFFF;
    font-weight: bold;
    transition: color 0.2s ease;
    /* on hover */
    /* on click */
    /* mobile tap color */
  }
  /* line 99, ../sass/import/_base.scss */
  a:hover, a:focus, a:visited:hover, a:visited:focus {
    transition: color 0.2s ease;
    color: #0642ff;
  }
  /* line 110, ../sass/import/_base.scss */
  a:link, a:visited:link {
    /*
    this highlights links on iPhones/iPads.
    so it basically works like the :hover selector
    for mobile devices.
    */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
  }

  /******************************************************************
  H1, H2, H3, H4, H5 STYLES
  ******************************************************************/
  /* line 124, ../sass/import/_base.scss */
  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
    text-rendering: optimizelegibility;
    font-weight: 500;
    /* removing text decoration from all headline links */
  }
  /* line 131, ../sass/import/_base.scss */
  h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {
    text-decoration: none;
  }

  /* line 148, ../sass/import/_base.scss */
  h4, .h4 {
    font-family: 'novito';
    color: #333;
    text-transform: uppercase;
  }

  /*********************
  HEADER STYLES
  *********************/
  /* line 165, ../sass/import/_base.scss */
  .enjoy-css {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border: none;
    font: normal normal 900 70px/normal "Aldrich", Helvetica, sans-serif;
    color: #202c2d;
    text-align: center;
    -o-text-overflow: clip;
    text-overflow: clip;
    text-shadow: 0 1px 0 #808d93, -1px 0 0 #cdd2d5, -1px 2px 0 #808d93, -2px 1px 0 #cdd2d5, -2px 3px 0 #808d93, -3px 2px 0 #cdd2d5, -3px 4px 0 #808d93, -4px 3px 0 #cdd2d5, -4px 5px 0 #808d93, -5px 4px 0 #cdd2d5, -5px 6px 0 #808d93, -6px 5px 0 #cdd2d5, -6px 7px 0 #808d93, -7px 6px 0 #cdd2d5, -7px 8px 0 #808d93, -8px 7px 0 #cdd2d5;
  }

  /* line 178, ../sass/import/_base.scss */
  #logo {
    font-family: 'sketch';
    color: #666;
    margin-top: 10px;
    margin-bottom: 12px;
    letter-spacing: 2px;
    font-size: 2.02rem;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  }
  /* line 187, ../sass/import/_base.scss */
  #logo a {
    color: #fff;
  }

  /* line 192, ../sass/import/_base.scss */
  #logo-side {
    font-family: 'sketch';
    color: #333;
    margin-top: 17px;
    margin-bottom: 0px;
    letter-spacing: 2px;
    font-size: 2.02rem;
    text-align: left;
  }
  /* line 202, ../sass/import/_base.scss */
  #logo-side a {
    color: #fff;
  }

  /* line 206, ../sass/import/_base.scss */
  .work-badge {
    width: 100px;
    padding: 10px;
  }

  /*********************
  NAVIGATION STYLES
  *********************/
  /* line 215, ../sass/import/_base.scss */
  #top-nav-list li a, #top-nav-list li span {
    display: inline;
    color: black;
  }

  /* line 222, ../sass/import/_base.scss */
  nav.top-bar, .top-bar-section ul li, .top-bar-section ul li a,
  .top-bar-section li:not(.has-form) a:not(.button), .top-bar-section li:not(.has-form):hover a:not(.button),
  .top-bar-section li:not(.has-form) a:not(.button):hover, a.handwritten, a.handwritten:hover {
    background: none;
  }

  /* line 232, ../sass/import/_base.scss */
  .underline {
    border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
  }

  /* line 236, ../sass/import/_base.scss */
  .top-bar-section ul li > a {
    font-family: 'novito';
    text-transform: uppercase;
    font-size: 1.62rem;
  }

  /* line 242, ../sass/import/_base.scss */
  .sub-nav {
    display: inline-block;
  }

  /* line 245, ../sass/import/_base.scss */
  .navcon {
    font-size: 20px;
    color: #666;
  }

  /* line 249, ../sass/import/_base.scss */
  dl.sub-nav {
    margin-bottom: 0;
    margin-top: -15px;
  }
  /* line 253, ../sass/import/_base.scss */
  dl.sub-nav dd a {
    font-size: 26px;
    color: #333;
    letter-spacing: 1px;
  }
  /* line 259, ../sass/import/_base.scss */
  dl.sub-nav dd a:hover {
    color: rgba(0, 168, 255, 0.5);
    color: #333;
    text-shadow: 2px 2px 0 rgba(255, 0, 180, 0.5);
  }

  /* line 266, ../sass/import/_base.scss */
  #card-nav {
    border-top: 2px solid rgba(255, 255, 255, 0.8);
    border-left: 2px solid rgba(255, 255, 255, 0.8);
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid white;
    -moz-box-shadow: 0 0px 2px rgba(102, 102, 102, 0.45), 0 1px 4px rgba(0, 0, 255, 0.1);
    -webkit-box-shadow: 0 0px 2px rgba(102, 102, 102, 0.45), 0 1px 4px rgba(0, 0, 255, 0.1);
    box-shadow: 0 0px 2px rgba(102, 102, 102, 0.45), 0 1px 4px rgba(0, 0, 255, 0.1);
    padding: 20px;
    height: auto;
    position: relative;
    max-width: 80%;
    top: calc(25% - 200px);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.5);
  }

  /* line 286, ../sass/import/_base.scss */
  nav {
    border-bottom: 0;
    margin: 0;
    /* end .menu li */
    /* highlight current page */
    /* end current highlighters */
  }
  /* line 292, ../sass/import/_base.scss */
  nav li a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 0.75em;
  }

  /* end .nav */
  /*********************
  FOOTER STYLES
  *********************/
  /* line 325, ../sass/import/_base.scss */
  footer {
    clear: both;
    background-color: #323944;
    color: #f8f9fa;
  }

  /*
  if you checked out the link above:
  http://www.alistapart.com/articles/organizing-mobile/
  you'll want to style the footer nav
  a bit more in-depth. Remember to keep
  it simple because you'll have to
  override these styles for the desktop
  view.
  */
  /* end .footer-links */
}
/* max-width 640px, mobile-only styles, use when QAing mobile issues */
@media only screen and (max-width: 40em) {
  /*********************
  GENERAL STYLES
  *********************/
  /* line 5, ../sass/import/_base.scss */
  body {
    font-family: "Nunito", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 100%;
    line-height: 1.5;
    color: #5c6b80;
    background-color: #eaedf2;
    -webkit-font-smoothing: antialiased;
    background: #fff url("../img/wave.png") no-repeat fixed;
    background-size: cover;
    background-position: 0 -100px;
  }

  /* line 17, ../sass/import/_base.scss */
  p {
    font-family: "Lato", "Georgia", Cambria, Times New Roman, Times, serif;
    color: #555;
  }

  /* line 22, ../sass/import/_base.scss */
  .corner {
    height: 20px;
    width: 10px;
    background: black;
    position: fixed;
    margin: 0;
    padding: 0;
  }

  /* line 31, ../sass/import/_base.scss */
  .top-right {
    top: 0;
    right: 0;
  }

  /* line 37, ../sass/import/_base.scss */
  .top-left {
    top: 0;
    left: 0;
  }

  /* line 43, ../sass/import/_base.scss */
  .bottom-right {
    bottom: 0;
    right: 0;
  }

  /* line 49, ../sass/import/_base.scss */
  .bottom-left {
    bottom: 0;
    left: 0;
  }

  /* line 55, ../sass/import/_base.scss */
  .white-bg {
    background: rgba(255, 255, 255, 0.3);
  }

  /* line 59, ../sass/import/_base.scss */
  #pic-of-me {
    border-radius: 5px;
    height: 200px;
  }

  /* line 63, ../sass/import/_base.scss */
  .thumbnail {
    padding: 10px;
  }

  /* line 67, ../sass/import/_base.scss */
  .my-card {
    border-top: 2px solid rgba(255, 255, 255, 0.8);
    border-left: 2px solid rgba(255, 255, 255, 0.8);
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid white;
    -moz-box-shadow: 0 0px 2px rgba(102, 102, 102, 0.45), 0 1px 4px rgba(0, 0, 255, 0.1);
    -webkit-box-shadow: 0 0px 2px rgba(102, 102, 102, 0.45), 0 1px 4px rgba(0, 0, 255, 0.1);
    box-shadow: 0 0px 2px rgba(102, 102, 102, 0.45), 0 1px 4px rgba(0, 0, 255, 0.1);
    padding: 20px;
    height: auto;
    position: relative;
    max-width: 100%;
    padding: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
  }

  /*********************
  LINK STYLES
  *********************/
  /* line 93, ../sass/import/_base.scss */
  a, a:visited {
    color: #3969FFFF;
    font-weight: bold;
    transition: color 0.2s ease;
    /* on hover */
    /* on click */
    /* mobile tap color */
  }
  /* line 99, ../sass/import/_base.scss */
  a:hover, a:focus, a:visited:hover, a:visited:focus {
    transition: color 0.2s ease;
    color: #0642ff;
  }
  /* line 110, ../sass/import/_base.scss */
  a:link, a:visited:link {
    /*
    this highlights links on iPhones/iPads.
    so it basically works like the :hover selector
    for mobile devices.
    */
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
  }

  /******************************************************************
  H1, H2, H3, H4, H5 STYLES
  ******************************************************************/
  /* line 124, ../sass/import/_base.scss */
  h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
    text-rendering: optimizelegibility;
    font-weight: 500;
    /* removing text decoration from all headline links */
  }
  /* line 131, ../sass/import/_base.scss */
  h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a {
    text-decoration: none;
  }

  /* line 148, ../sass/import/_base.scss */
  h4, .h4 {
    font-family: 'novito';
    color: #333;
    text-transform: uppercase;
  }

  /*********************
  HEADER STYLES
  *********************/
  /* line 165, ../sass/import/_base.scss */
  .enjoy-css {
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
    border: none;
    font: normal normal 900 70px/normal "Aldrich", Helvetica, sans-serif;
    color: #202c2d;
    text-align: center;
    -o-text-overflow: clip;
    text-overflow: clip;
    text-shadow: 0 1px 0 #808d93, -1px 0 0 #cdd2d5, -1px 2px 0 #808d93, -2px 1px 0 #cdd2d5, -2px 3px 0 #808d93, -3px 2px 0 #cdd2d5, -3px 4px 0 #808d93, -4px 3px 0 #cdd2d5, -4px 5px 0 #808d93, -5px 4px 0 #cdd2d5, -5px 6px 0 #808d93, -6px 5px 0 #cdd2d5, -6px 7px 0 #808d93, -7px 6px 0 #cdd2d5, -7px 8px 0 #808d93, -8px 7px 0 #cdd2d5;
  }

  /* line 178, ../sass/import/_base.scss */
  #logo {
    font-family: 'sketch';
    color: #666;
    margin-top: 10px;
    margin-bottom: 12px;
    letter-spacing: 2px;
    font-size: 2.02rem;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
  }
  /* line 187, ../sass/import/_base.scss */
  #logo a {
    color: #fff;
  }

  /* line 192, ../sass/import/_base.scss */
  #logo-side {
    font-family: 'sketch';
    color: #333;
    margin-top: 17px;
    margin-bottom: 0px;
    letter-spacing: 2px;
    font-size: 2.02rem;
    text-align: left;
  }
  /* line 202, ../sass/import/_base.scss */
  #logo-side a {
    color: #fff;
  }

  /* line 206, ../sass/import/_base.scss */
  .work-badge {
    width: 100px;
    padding: 10px;
  }

  /*********************
  NAVIGATION STYLES
  *********************/
  /* line 215, ../sass/import/_base.scss */
  #top-nav-list li a, #top-nav-list li span {
    display: inline;
    color: black;
  }

  /* line 222, ../sass/import/_base.scss */
  nav.top-bar, .top-bar-section ul li, .top-bar-section ul li a,
  .top-bar-section li:not(.has-form) a:not(.button), .top-bar-section li:not(.has-form):hover a:not(.button),
  .top-bar-section li:not(.has-form) a:not(.button):hover, a.handwritten, a.handwritten:hover {
    background: none;
  }

  /* line 232, ../sass/import/_base.scss */
  .underline {
    border-bottom: 1px dotted rgba(0, 0, 0, 0.3);
  }

  /* line 236, ../sass/import/_base.scss */
  .top-bar-section ul li > a {
    font-family: 'novito';
    text-transform: uppercase;
    font-size: 1.62rem;
  }

  /* line 242, ../sass/import/_base.scss */
  .sub-nav {
    display: inline-block;
  }

  /* line 245, ../sass/import/_base.scss */
  .navcon {
    font-size: 20px;
    color: #666;
  }

  /* line 249, ../sass/import/_base.scss */
  dl.sub-nav {
    margin-bottom: 0;
    margin-top: -15px;
  }
  /* line 253, ../sass/import/_base.scss */
  dl.sub-nav dd a {
    font-size: 26px;
    color: #333;
    letter-spacing: 1px;
  }
  /* line 259, ../sass/import/_base.scss */
  dl.sub-nav dd a:hover {
    color: rgba(0, 168, 255, 0.5);
    color: #333;
    text-shadow: 2px 2px 0 rgba(255, 0, 180, 0.5);
  }

  /* line 266, ../sass/import/_base.scss */
  #card-nav {
    border-top: 2px solid rgba(255, 255, 255, 0.8);
    border-left: 2px solid rgba(255, 255, 255, 0.8);
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid white;
    -moz-box-shadow: 0 0px 2px rgba(102, 102, 102, 0.45), 0 1px 4px rgba(0, 0, 255, 0.1);
    -webkit-box-shadow: 0 0px 2px rgba(102, 102, 102, 0.45), 0 1px 4px rgba(0, 0, 255, 0.1);
    box-shadow: 0 0px 2px rgba(102, 102, 102, 0.45), 0 1px 4px rgba(0, 0, 255, 0.1);
    padding: 20px;
    height: auto;
    position: relative;
    max-width: 80%;
    top: calc(25% - 200px);
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    background: rgba(255, 255, 255, 0.5);
  }

  /* line 286, ../sass/import/_base.scss */
  nav {
    border-bottom: 0;
    margin: 0;
    /* end .menu li */
    /* highlight current page */
    /* end current highlighters */
  }
  /* line 292, ../sass/import/_base.scss */
  nav li a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 0.75em;
  }

  /* end .nav */
  /*********************
  FOOTER STYLES
  *********************/
  /* line 325, ../sass/import/_base.scss */
  footer {
    clear: both;
    background-color: #323944;
    color: #f8f9fa;
  }

  /*
  if you checked out the link above:
  http://www.alistapart.com/articles/organizing-mobile/
  you'll want to style the footer nav
  a bit more in-depth. Remember to keep
  it simple because you'll have to
  override these styles for the desktop
  view.
  */
  /* end .footer-links */
}
@media only screen and (min-width: 40.063em) {
  /*********************
  GENERAL STYLES
  *********************/
  /* line 5, ../sass/import/_640up.scss */
  #card-nav {
    padding: 20px;
    height: auto;
    position: relative;
    margin-top: calc(25% - 200px);
  }

  /* line 13, ../sass/import/_640up.scss */
  #ascii-divider {
    margin-bottom: 0;
  }

  /*********************
  LAYOUT & GRID STYLES
  *********************/
  /*********************
  HEADER STYLES
  *********************/
  /*********************
  NAVIGATION STYLES
  *********************/
  /* line 33, ../sass/import/_640up.scss */
  dl.sub-nav {
    padding-top: 0;
  }

  /*********************
  SIDEBARS & ASIDES
  *********************/
  /*********************
  FOOTER STYLES
  *********************/
}
/* min-width 641px, medium screens */
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
  /*********************
  GENERAL STYLES
  *********************/
  /* line 5, ../sass/import/_640up.scss */
  #card-nav {
    padding: 20px;
    height: auto;
    position: relative;
    margin-top: calc(25% - 200px);
  }

  /* line 13, ../sass/import/_640up.scss */
  #ascii-divider {
    margin-bottom: 0;
  }

  /*********************
  LAYOUT & GRID STYLES
  *********************/
  /*********************
  HEADER STYLES
  *********************/
  /*********************
  NAVIGATION STYLES
  *********************/
  /* line 33, ../sass/import/_640up.scss */
  dl.sub-nav {
    padding-top: 0;
  }

  /*********************
  SIDEBARS & ASIDES
  *********************/
  /*********************
  FOOTER STYLES
  *********************/
}
/* min-width 641px and max-width 1024px, use when QAing tablet-only issues */
@media only screen and (min-width: 64.063em) {
  /*********************
  GENERAL STYLES
  *********************/
  /* line 5, ../sass/import/_1024up.scss */
  #card-nav {
    padding: 20px;
    height: auto;
    position: relative;
    margin-top: calc(25% - 200px);
  }

  /* line 12, ../sass/import/_1024up.scss */
  .my-card {
    border-top: 2px solid rgba(255, 255, 255, 0.8);
    border-left: 2px solid rgba(255, 255, 255, 0.8);
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid white;
    -moz-box-shadow: 0 0px 2px rgba(102, 102, 102, 0.45), 0 1px 4px rgba(0, 0, 255, 0.1);
    -webkit-box-shadow: 0 0px 2px rgba(102, 102, 102, 0.45), 0 1px 4px rgba(0, 0, 255, 0.1);
    box-shadow: 0 0px 2px rgba(102, 102, 102, 0.45), 0 1px 4px rgba(0, 0, 255, 0.1);
    padding: 20px;
    height: auto;
    position: relative;
    max-width: 80%;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
  }

  /*********************
  NAVIGATION STYLES
  *********************/
  /* line 32, ../sass/import/_1024up.scss */
  dl.sub-nav {
    margin-bottom: 0;
    margin-top: 5px;
  }
  /* line 36, ../sass/import/_1024up.scss */
  dl.sub-nav dd a {
    font-size: 26px;
    color: #666;
    letter-spacing: 1px;
  }

  /*********************
  SIDEBARS & ASIDES
  *********************/
  /*********************
  FOOTER STYLES
  *********************/
}
/* min-width 1025px, large screens */
@media only screen and (min-width: 64.063em) and (max-width: 90em) {
  /*********************
  GENERAL STYLES
  *********************/
  /* line 5, ../sass/import/_1024up.scss */
  #card-nav {
    padding: 20px;
    height: auto;
    position: relative;
    margin-top: calc(25% - 200px);
  }

  /* line 12, ../sass/import/_1024up.scss */
  .my-card {
    border-top: 2px solid rgba(255, 255, 255, 0.8);
    border-left: 2px solid rgba(255, 255, 255, 0.8);
    border-right: 2px solid rgba(255, 255, 255, 0.8);
    border-bottom: 2px solid white;
    -moz-box-shadow: 0 0px 2px rgba(102, 102, 102, 0.45), 0 1px 4px rgba(0, 0, 255, 0.1);
    -webkit-box-shadow: 0 0px 2px rgba(102, 102, 102, 0.45), 0 1px 4px rgba(0, 0, 255, 0.1);
    box-shadow: 0 0px 2px rgba(102, 102, 102, 0.45), 0 1px 4px rgba(0, 0, 255, 0.1);
    padding: 20px;
    height: auto;
    position: relative;
    max-width: 80%;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
  }

  /*********************
  NAVIGATION STYLES
  *********************/
  /* line 32, ../sass/import/_1024up.scss */
  dl.sub-nav {
    margin-bottom: 0;
    margin-top: 5px;
  }
  /* line 36, ../sass/import/_1024up.scss */
  dl.sub-nav dd a {
    font-size: 26px;
    color: #666;
    letter-spacing: 1px;
  }

  /*********************
  SIDEBARS & ASIDES
  *********************/
  /*********************
  FOOTER STYLES
  *********************/
}
/* min-width 1025px and max-width 1440px, use when QAing large screen-only issues */
@media only screen and (min-width: 90.063em) {
  /*********************
  GENERAL STYLES
  *********************/
  /*********************
  LAYOUT & GRID STYLES
  *********************/
  /*********************
  HEADER STYLES
  *********************/
  /*********************
  NAVIGATION STYLES
  *********************/
  /*********************
  SIDEBARS & ASIDES
  *********************/
  /*********************
  FOOTER STYLES
  *********************/
}
/* min-width 1441px, xlarge screens */
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
  /*********************
  GENERAL STYLES
  *********************/
  /*********************
  LAYOUT & GRID STYLES
  *********************/
  /*********************
  HEADER STYLES
  *********************/
  /*********************
  NAVIGATION STYLES
  *********************/
  /*********************
  SIDEBARS & ASIDES
  *********************/
  /*********************
  FOOTER STYLES
  *********************/
}
/* min-width 1441px and max-width 1920px, use when QAing xlarge screen-only issues */
/* min-width 1921px, xxlarge screens */