/*! Made with Meat: http://forsvunnet.github.io/meat/  */
/* Ownership of the stylesheets is global. */
/******************************************************************
Site Name: Meat
Author: AndrewEivin

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
/********************************************
				B O U R B O N

	Note: If you don't know what you
	do and don't want, just uncomment
	bourbon below and just enjoy life
	with a glass of bourbon.

********************************************/
/*********************
IMPORTING PARTIALS
These files are needed at the beginning so that we establish all
our mixins, functions, and variables that we'll be using across
the whole project.
*********************/
/* normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/**
 * Correct `block` display not defined in IE 8/9.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section,
summary {
  display: block; }

/**
 * Correct `inline-block` display not defined in IE 8/9.
 */
audio,
canvas,
video {
  display: inline-block; }

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0; }

/**
 * Address `[hidden]` styling not present in IE 8/9.
 * Hide the `template` element in IE, Safari, and Firefox < 22.
 */
[hidden],
template {
  display: none; }

/* ==========================================================================
   Base
   ========================================================================== */
/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-family: sans-serif;
  /* 1 */
  -ms-text-size-adjust: 100%;
  /* 2 */
  -webkit-text-size-adjust: 100%;
  /* 2 */ }

/**
 * Remove default margin.
 */
body {
  margin: 0; }

/* ==========================================================================
   Links
   ========================================================================== */
/**
 * Remove the gray background color from active links in IE 10.
 */
a {
  background: transparent; }

/**
 * Address `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted; }

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */
a:active,
a:hover {
  outline: 0; }

/* ==========================================================================
   Typography
   ========================================================================== */
/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari 5, and Chrome.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0; }

/**
 * Address styling not present in IE 8/9, Safari 5, and Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted; }

/**
 * Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
 */
b,
strong,
.strong {
  font-weight: bold; }

/**
 * Address styling not present in Safari 5 and Chrome.
 */
dfn,
em,
.em {
  font-style: italic; }

/**
 * Address differences between Firefox and other browsers.
 */
hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0; }

/*
 * proper formatting (http://blog.fontdeck.com/post/9037028497/hyphens)
*/
p {
  -webkit-hyphens: none;
  -epub-hyphens: none;
  -moz-hyphens: none;
  hyphens: none; }

/*
 * Addresses margins set differently in IE6/7.
 */
pre {
  margin: 0; }

/**
 * Correct font family set oddly in Safari 5 and Chrome.
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  font-size: 1em; }

/**
 * Improve readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre-wrap; }

/**
 * Set consistent quote types.
 */
q {
  quotes: "\201C" "\201D" "\2018" "\2019"; }

/**
 * Address inconsistent and variable font size in all browsers.
 */
q:before,
q:after {
  content: '';
  content: none; }

small, .small {
  font-size: 75%; }

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

/* ==========================================================================
  Lists
========================================================================== */
/*
 * Addresses margins set differently in IE6/7.
 */
dl,
menu,
ol,
ul {
  margin: 1em 0; }

dd {
  margin: 0; }

/*
 * Addresses paddings set differently in IE6/7.
 */
menu {
  padding: 0 0 0 40px; }

ol,
ul {
  padding: 0;
  list-style-type: none; }

/*
 * Corrects list images handled incorrectly in IE7.
 */
nav ul,
nav ol {
  list-style: none;
  list-style-image: none; }

/* ==========================================================================
  Embedded content
========================================================================== */
/**
 * Remove border when inside `a` element in IE 8/9.
 */
img {
  border: 0; }

/**
 * Correct overflow displayed oddly in IE 9.
 */
svg:not(:root) {
  overflow: hidden; }

/* ==========================================================================
   Figures
   ========================================================================== */
/**
 * Address margin not present in IE 8/9 and Safari 5.
 */
figure {
  margin: 0; }

/* ==========================================================================
   Forms
   ========================================================================== */
/**
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

/**
 * 1. Correct `color` not being inherited in IE 8/9.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */
legend {
  border: 0;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * 1. Correct font family not being inherited in all browsers.
 * 2. Correct font size not being inherited in all browsers.
 * 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
 */
button,
input,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 2 */
  margin: 0;
  /* 3 */ }

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */
button,
input {
  line-height: normal; }

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
 * Correct `select` style inheritance in Firefox 4+ and Opera.
 */
button,
select {
  text-transform: none; }

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  /* 2 */
  cursor: pointer;
  /* 3 */ }

/**
 * Re-set default cursor for disabled elements.
 */
button[disabled],
html input[disabled] {
  cursor: default; }

/**
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */
input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */ }

/**
 * 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
 *    (include `-moz` to future-proof).
 */
input[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box;
  /* 2 */
  box-sizing: content-box; }

/**
 * Remove inner padding and search cancel button in Safari 5 and Chrome
 * on OS X.
 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

/**
 * Remove inner padding and border in Firefox 4+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

/**
 * 1. Remove default vertical scrollbar in IE 8/9.
 * 2. Improve readability and alignment in all browsers.
 */
textarea {
  overflow: auto;
  /* 1 */
  vertical-align: top;
  /* 2 */ }

/* ==========================================================================
   Tables
   ========================================================================== */
/**
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0; }

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

.image-replacement,
.ir {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden; }

.clearfix, .cf {
  zoom: 1; }
  .clearfix:before, .clearfix:after, .cf:before, .cf:after {
    content: "";
    display: table; }
  .clearfix:after, .cf:after {
    clear: both; }

/*
use the best ampersand
http://simplebits.com/notebook/2008/08/14/ampersands-2/
*/
span.amp {
  font-family: Baskerville,'Goudy Old Style',Palatino,'Book Antiqua',serif !important;
  font-style: italic; }

/* Colours */
/******************************************************************
Site Name: Meat
Author: AndrewEivin

Stylesheet: Sass Functions

You can do a lot of really cool things in Sass. Functions help you
make repeated actions a lot easier. They are really similar to mixins,
but can be used for so much more.

Anyway, keep them all in here so it's easier to find when you're
looking for one.

For more info on functions, go here:
http://sass-lang.com/documentation/Sass/Script/Functions.html

******************************************************************/
/*********************
COLOR FUNCTIONS
These are helpful when you're working
with shadows and such things. It's essentially
a quicker way to write RGBA.

Example:
box-shadow: 0 0 4px black(0.3);
compiles to:
box-shadow: 0 0 4px rgba(0,0,0,0.3);
*********************/
/* 

Rems for the future, PX for the past.

This is a function that has been created to
remove the need to write everything twice when it comes to REMs and PX.

Basically, when you use u(3rem), the px-only variable on the style, 
android and ie page tells the preprocessor to either change all 
values in the breakpoint stylesheets to be either REM or PX, 
and it'll do the math around it. So what you're left with is more hair
at the end of the day.

Source: http://davidwalsh.name/rem-px-browser-function-sass
@Useage: u(3rem); 
 
*/
/* 1 */
/* This solves an issue with 1px == 1 and 1em == 1, thus 1px == 1em */
/************************
	SQUARE ROOTS
*************************/
/*/////////////////////////////
// Exponent
/////////////////////////////*/
/*************************************
This converts columns to pixels based 
on the $content width 
*************************************/
/*********************
RESPONSIVE HELPER FUNCTION
If you're creating a responsive site, then
you've probably already read
Responsive Web Design: http://www.abookapart.com/products/responsive-web-design

Here's a nice little helper function for calculating
target / context
as mentioned in that book.

Example:
width: cp(650px, 1000px);
or
width: calc-percent(650px, 1000px);
both compile to:
width: 65%;
*********************/
/*
	These are the breakpoints for your website. These can be customised to your design. The 
	more that I think about it, the more I'm starting to realise that these breakpoints 
	need to change for the design, and not for the sizes they are. They're just a guide. 
	In fact, I insist, you MUST change these.
*/
/* 
	This is for something special. If px-only is defined in the u() function, 
	then all rems are replaced with these breakpoints instead.
*/
/*
	This is a breakpoint map. It allows us to use a loop of the breakpoints throughout
	the site inside other loops and @each's. Mostly in _mixins.scss and _wrap.scss
*/
/******************************************************************
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

******************************************************************/
/*
The following is based of Typebase:
https://github.com/devinhunt/typebase.css
I've edited it a bit, but it's a nice starting point.
*/
/*********************************************
		T y p e k i t   O v e r w r i t e
		
	If you've used any fonts from typekit
	and you want to use them, plop them in here.

*********************************************/
/*
some nice typographical defaults
more here: http://www.newnet-soft.com/blog/csstypography
*/
p {
  -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";
  margin: 0 0 30px 0; }
  p span {
    font-weight: 800;
    color: #3e8a96; }

.telelink {
  font-family: #959595; }

/*
	# Typekit and FOUT.

	FOUT means "Flash of Unstyled Text"
	and that happens when the site loads before the 
	javascript can get the fonts needed for the 
	page to be styled.
	
	Typekit have suggested "how about you hide 
	everything until they load?" and have provided 
	a javascript way of getting the fonts to load. 
	
	Which might work, but if the javascript doesn't 
	load, we're still going to have a flash of 
	text right?

*/
body {
  -webkit-transition: opacity 0.3s ease-out;
  -moz-transition: opacity 0.3s ease-out;
  transition: opacity 0.3s ease-out; }

.wf-loading body {
  opacity: 0; }

.wf-active body {
  opacity: 1; }

/*********************
Text Overflow
*********************/
/********************************* 

// This is for website rem to PX
// so you can use @include font-size(2);
// which outputs font-size: 24px; font-size:2rem;

*********************************/
/*********************************
	Text alignment in classes	
*********************************/
.text-left {
  text-align: left; }

.text-center {
  text-align: center; }

.text-right {
  text-align: right; }

.marginauto {
  margin: 0 auto !important;
  float: none !important; }

/******************************************************************
Site Name: Meat
Author: AndrewEivin

Stylesheet: Mixins & Constants Stylesheet

This is where you can take advantage of Sass' great features:
Mixins & Constants. 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.

******************************************************************/
/*********************
CLEARFIXIN'
*********************/
.clearfix {
  zoom: 1; }
  .clearfix:before, .clearfix:after {
    content: "";
    display: table; }
  .clearfix:after {
    clear: both; }

/*
	Grid Mixin
	----------
	
	We use these for making grids work easier.
	@include GridAssets(2, first); = Two columns, and it's the first column
*/
.relative {
  position: relative; }

.vertical {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%); }
  .vertical.horizontal {
    width: 100%;
    text-align: center;
    margin: 0 auto; }

/* 	This mixin will help you nest mediaqueries easier.
	@Usage:
		@include wider-than(mobile) 	{ width: 55%; 	}
		@include wider-than(phablet) 	{ width: 65%; 	}
		@include wider-than(tablet) 	{ width: 75%;	}

	Uses the breakpoint map defined inside _breakpoints.scss
*/
/* this is the padding */
.padding-1 {
  padding-top: 16px;
  padding-bottom: 16px;
  padding-top: 1rem;
  padding-bottom: 1rem; }
  .padding-1-top {
    padding-top: 16px;
    padding-top: 1rem; }
  .padding-1-bottom {
    padding-bottom: 16px;
    padding-bottom: 1rem; }

.padding-2 {
  padding-top: 32px;
  padding-bottom: 32px;
  padding-top: 2rem;
  padding-bottom: 2rem; }
  .padding-2-top {
    padding-top: 32px;
    padding-top: 2rem; }
  .padding-2-bottom {
    padding-bottom: 32px;
    padding-bottom: 2rem; }

.padding-3 {
  padding-top: 48px;
  padding-bottom: 48px;
  padding-top: 3rem;
  padding-bottom: 3rem; }
  .padding-3-top {
    padding-top: 48px;
    padding-top: 3rem; }
  .padding-3-bottom {
    padding-bottom: 48px;
    padding-bottom: 3rem; }

.padding-4 {
  padding-top: 64px;
  padding-bottom: 64px;
  padding-top: 4rem;
  padding-bottom: 4rem; }
  .padding-4-top {
    padding-top: 64px;
    padding-top: 4rem; }
  .padding-4-bottom {
    padding-bottom: 64px;
    padding-bottom: 4rem; }

.no-margin-top {
  margin-top: 0; }

.no-margin-bottom {
  margin-bottom: 0; }

.no-margin-left {
  margin-left: 0; }

.no-margin-right {
  margin-right: 0; }

/*********************
C O N T E N T   C H O R E O G R A P H Y
Something that will reorder your content if used correctly.
And on the right browser, of course.
**********************/
/*********************
Placeholder Mixin
Simply use this in a class somewhere to add placeholder styles.
	@include placeholder {
		colour: $brand-colour;
	}
*********************/
/* Font Smoothing - http://maximilianhoffmann.com/posts/better-font-rendering-on-osx */
/* 
	Blend Modes
	===========
	http://caniuse.com/#feat=css-backgroundblendmode
	@usage:  
		@include blended("url", $colour);
		@include blended("url", $grad: $love);

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

.image-replacement {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden; }

/************************
 I N L I N E - B L O C K
~ Gap Removal Technique ~

@usage: @include ib();
************************/
/* This is quite an experiment with font sizes. 
 Basically, i'm using a modualr scale for the type. */
/*********************
TRANSITION
*********************/
/*
I totally rewrote this to be cleaner and easier to use.
You'll need to be using Sass 3.2+ for these to work.
Thanks to @anthonyshort for the inspiration on these.
USAGE: @include transition(all 0.2s ease-in-out);
*/
/*********************
CSS3 GRADIENTS
Be careful with these since they can
really slow down your CSS. Don't overdo it.
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/*********************
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? */
/*********************
Background colour based on brightness
*********************/
/*
	Global things
	-------------
	We're going to set a few things in here
	that we can use throughout the site to make
	it a little more uniform. Gutters are the
	big thing. The vertical spacing between
	elements is often thrown off
*/
/* Gutters set from Photoshop Document - Without Pixel */
/* Gutters set from Photoshop Document */
table {
  margin-bottom: 45px; }
  table td {
    min-width: 145px; }
    table td span {
      color: #3e8a96;
      font-weight: 800; }

/*********************
IMPORTING MODULES
Modules are reusable blocks or elements we use throughout the project.
We can break them up as much as we want or just keep them all in one.
I mean, you can do whatever you want. The world is your oyster. Unless
you hate oysters, then the world is your peanut butter & jelly sandwich.
*********************/
/********************************************
			   A N I M A T I C S

	This is where all those lovely things
	bourbon does can be kept, a place where
	mixins and animation styles can be defined,
	without including a whole library.

********************************************/
/* 
	Animated Menu Icon. 
	-------------------
	It's not a burger, it's a smaller 
	representation of the way menus 
	look on a mobile environment 
	
	You can turn this off in the meat.js file
*/
.animated.clickable .menu-icon {
  margin-top: 0px;
  padding: 0;
  -webkit-transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
  -transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
  transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg); }
  .animated.clickable .menu-icon > div {
    margin-top: 0px;
    margin-bottom: 5px;
    border-radius: 5px;
    background: #000;
    -webkit-transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
    -transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
    transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -ms-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg); }
    .animated.clickable .menu-icon > div + div {
      opacity: 1;
      -webkit-transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
      -transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
      transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
      -webkit-transform: rotate(0deg);
      -moz-transform: rotate(0deg);
      -ms-transform: rotate(0deg);
      -o-transform: rotate(0deg);
      transform: rotate(0deg); }
      .animated.clickable .menu-icon > div + div + div {
        -webkit-transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
        -transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
        transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
        opacity: 1;
        position: relative; }
.animated.clickable.close {
  position: fixed;
  z-index: 150; }
  .animated.clickable.close .menu-icon {
    -webkit-transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
    -transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
    transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
    position: relative;
    z-index: 150; }
    .animated.clickable.close .menu-icon > div {
      -webkit-transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
      -transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
      transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
      -webkit-transform: rotate(45deg);
      -moz-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
      -o-transform: rotate(45deg);
      transform: rotate(45deg);
      margin: -4px 11px; }
      .animated.clickable.close .menu-icon > div + div {
        opacity: 0;
        -webkit-transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
        -transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
        transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
        -webkit-transform: rotate(-225deg);
        -moz-transform: rotate(-225deg);
        -ms-transform: rotate(-225deg);
        -o-transform: rotate(-225deg);
        transform: rotate(-225deg); }
        .animated.clickable.close .menu-icon > div + div + div {
          -webkit-transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
          -transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
          transition: 0.65s all cubic-bezier(0.86, 0, 0.07, 1);
          opacity: 1;
          position: relative; }

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

Stylesheet: Alert Styles

If you want to use these alerts in your design, you can. If not,
you can just remove this stylesheet.

******************************************************************/
.alert-help, .alert-info, .alert-error, .alert-success {
  padding: 5px 18px;
  border: 1px solid;
  color: #fff; }

.alert-help {
  border-color: #e8d71c;
  background: #eadb33; }

.alert-info {
  border-color: #1d8dc0;
  background: #209dd6; }

.alert-error {
  border-color: #aa2e2e;
  background: #be3333; }

.alert-success {
  border-color: #96b31f;
  background: #a8c923; }

/******************************************************************
Site Name: Meat
Author: AndrewEivin

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

*********************/
/************************************
		B U T T O N   C O L O U R S
	
	This mixin gives you a button in any
	colour that you want. It then decides
	if the background is dark or light and
	gives you white or dark grey text colour.


*************************************/
/******************************
Button Classes that you can have
for free. Go on. Have them
******************************/
.button.brand {
  border: none;
  border-bottom: 5px solid black;
  border-radius: 2px;
  text-indent: 0;
  display: inline-block;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  padding: 7px 14px;
  outline: none;
  -webkit-font-smoothing: antialiased;
  /**********************************
   This determines the background colour
   in a greyscale manner, if it's lighter
   than 40% lightness, the text colour
   becomes dark to compensate.
  **********************************/
  color: #fff;
  background: #005460;
  color: #fff;
  /**********************************
   This is the style for the hovers,
   the actives and the visited.
  **********************************/ }
  .button.brand:hover, .button.brand:focus, .button.brand:active {
    color: #fff; }
  .button.brand:hover {
    background: #006a7a; }
  .button.brand:active {
    background: #00272d;
    box-shadow: inset 0px 10px 5px -7px black;
    position: relative;
    top: 4px;
    margin-bottom: 4px;
    border-bottom-width: 1px; }
  .button.brand:visited {
    background: #005460;
    border-bottom-color: black; }

.button.highlight {
  border: none;
  border-bottom: 5px solid #20484e;
  border-radius: 2px;
  text-indent: 0;
  display: inline-block;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  padding: 7px 14px;
  outline: none;
  -webkit-font-smoothing: antialiased;
  /**********************************
   This determines the background colour
   in a greyscale manner, if it's lighter
   than 40% lightness, the text colour
   becomes dark to compensate.
  **********************************/
  color: #fff;
  background: #3e8a96;
  color: #fff;
  /**********************************
   This is the style for the hovers,
   the actives and the visited.
  **********************************/ }
  .button.highlight:hover, .button.highlight:focus, .button.highlight:active {
    color: #fff; }
  .button.highlight:hover {
    background: #459ba8; }
  .button.highlight:active {
    background: #2f6972;
    box-shadow: inset 0px 10px 5px -7px #20484e;
    position: relative;
    top: 4px;
    margin-bottom: 4px;
    border-bottom-width: 1px; }
  .button.highlight:visited {
    background: #3e8a96;
    border-bottom-color: #20484e; }

.button.white {
  border: none;
  border-bottom: 5px solid #cccccc;
  border-radius: 2px;
  text-indent: 0;
  display: inline-block;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  padding: 7px 14px;
  outline: none;
  -webkit-font-smoothing: antialiased;
  /**********************************
   This determines the background colour
   in a greyscale manner, if it's lighter
   than 40% lightness, the text colour
   becomes dark to compensate.
  **********************************/
  color: #fff;
  background: #fff;
  color: #959595;
  /**********************************
   This is the style for the hovers,
   the actives and the visited.
  **********************************/ }
  .button.white:hover, .button.white:focus, .button.white:active {
    color: #959595; }
  .button.white:hover {
    background: white; }
  .button.white:active {
    background: #e6e6e6;
    box-shadow: inset 0px 10px 5px -7px #cccccc;
    position: relative;
    top: 4px;
    margin-bottom: 4px;
    border-bottom-width: 1px; }
  .button.white:visited {
    background: #fff;
    border-bottom-color: #cccccc; }

.button.black {
  border: none;
  border-bottom: 5px solid black;
  border-radius: 2px;
  text-indent: 0;
  display: inline-block;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  padding: 7px 14px;
  outline: none;
  -webkit-font-smoothing: antialiased;
  /**********************************
   This determines the background colour
   in a greyscale manner, if it's lighter
   than 40% lightness, the text colour
   becomes dark to compensate.
  **********************************/
  color: #fff;
  background: #000;
  color: #fff;
  /**********************************
   This is the style for the hovers,
   the actives and the visited.
  **********************************/ }
  .button.black:hover, .button.black:focus, .button.black:active {
    color: #fff; }
  .button.black:hover {
    background: #0d0d0d; }
  .button.black:active {
    background: black;
    box-shadow: inset 0px 10px 5px -7px black;
    position: relative;
    top: 4px;
    margin-bottom: 4px;
    border-bottom-width: 1px; }
  .button.black:visited {
    background: #000;
    border-bottom-color: black; }

.button.compliment {
  border: none;
  border-bottom: 5px solid #693975;
  border-radius: 2px;
  text-indent: 0;
  display: inline-block;
  font-weight: normal;
  font-style: normal;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  padding: 7px 14px;
  outline: none;
  -webkit-font-smoothing: antialiased;
  /**********************************
   This determines the background colour
   in a greyscale manner, if it's lighter
   than 40% lightness, the text colour
   becomes dark to compensate.
  **********************************/
  color: #fff;
  background: #a261b3;
  color: #fff;
  /**********************************
   This is the style for the hovers,
   the actives and the visited.
  **********************************/ }
  .button.compliment:hover, .button.compliment:focus, .button.compliment:active {
    color: #fff; }
  .button.compliment:hover {
    background: #ac72bb; }
  .button.compliment:active {
    background: #884998;
    box-shadow: inset 0px 10px 5px -7px #693975;
    position: relative;
    top: 4px;
    margin-bottom: 4px;
    border-bottom-width: 1px; }
  .button.compliment:visited {
    background: #a261b3;
    border-bottom-color: #693975; }

/******************************************************************
Site Name: MEAT 
Author: Eivin + Andrew 

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
*********************/
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: 10px 12px;
  margin-bottom: 14px;
  font-size: 1em;
  color: #959595;
  border-radius: 3px;
  vertical-align: middle;
  box-shadow: none;
  border: 0;
  width: 100%;
  max-width: 400px;
  font-family: "azo-sans-web", sans-serif;
  background-color: #ededed;
  -webkit-transition: background-color 0.24s ease-in-out;
  -transition: background-color 0.24s ease-in-out;
  transition: background-color 0.24s ease-in-out; }
  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: #f7f7f7; }
  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: #be3333;
    border-color: #be3333;
    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: #be3333; }
  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: #a8c923;
    border-color: #a8c923;
    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: #a8c923; }
  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; }
    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: #209dd6; }

textarea {
  max-width: 100%;
  min-height: 120px;
  line-height: 1.5em; }

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; }

/******************************************************************
COMMENT FORM STYLES
******************************************************************/
.respond-form label {
  display: block; }

.form li {
  list-style-type: none;
  clear: both;
  margin-bottom: 0.7335em; }
.form input[type=text],
.form input[type=email],
.form input[type=url],
.form textarea {
  padding: 3px 7px;
  background: #efefef;
  border: 2px solid #cecece;
  /* form validation */ }
  .form input[type=text]:focus,
  .form input[type=email]:focus,
  .form input[type=url]:focus,
  .form textarea:focus {
    background: #fff; }
  .form input[type=text]:invalid,
  .form input[type=email]:invalid,
  .form input[type=url]:invalid,
  .form textarea:invalid {
    outline: none;
    border-color: #962828;
    background-color: #be3333;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    -ms-box-shadow: none;
    box-shadow: none; }
.form .email {
  height: 30px; }
.form select,
.form input[type=text],
.form input[type=email],
.form input[type=url] {
  max-width: 100%; }
.form textarea {
  resize: none;
  width: 100%;
  height: 150px; }

/* comment form title */
#comment-form-title {
  margin: 0 0 1.1em; }

/* allowed tags */
/* no comments */
input[type="search"] {
  width: 61%;
  float: left;
  padding: 2% 1%; }

.search-form .button {
  float: right;
  width: 35%; }

/* Grid Math */
/********************************************
			   G R I D  M A T H

	Math. A bunch of it. This is the math
	that makes the grid. Math can change
	in here to completely change the whole
	layout of your site. 
			  
********************************************/
/* Adding an extra mixin to make widths fallbackabler.*/
/* Offset class. Experimental, but looks nice */
.offset-1 {
  margin-left: 5.7969383057%;
  margin-left: calc((99.95% - 11rem) / 12);
  width: 91.3906307551%;
  width: calc((99.95% - 0.0909090909rem) / 1.0909090909); }

.offset-2 {
  margin-left: 14.3563075506%;
  margin-left: calc((99.95% - 5rem) / 6);
  width: 82.8312615101%;
  width: calc((99.95% - 0.2rem) / 1.2); }

.offset-3 {
  margin-left: 22.9156767956%;
  margin-left: calc((99.95% - 3rem) / 4);
  width: 74.2718922652%;
  width: calc((99.95% - 0.3333333333rem) / 1.3333333333); }

.offset-4 {
  margin-left: 31.4750460405%;
  margin-left: calc((99.95% - 2rem) / 3);
  width: 65.7125230203%;
  width: calc((99.95% - 0.5rem) / 1.5); }

.offset-5 {
  margin-left: 40.0344152855%;
  margin-left: calc((99.95% - 1.4rem) / 2.4);
  width: 57.1531537753%;
  width: calc((99.95% - 0.7142857143rem) / 1.7142857143); }

.offset-6 {
  margin-left: 48.5937845304%;
  margin-left: calc((99.95% - 1rem) / 2);
  width: 48.5937845304%;
  width: calc((99.95% - 1rem) / 2); }

.offset-7 {
  margin-left: 57.1531537753%;
  margin-left: calc((99.95% - 0.7142857143rem) / 1.7142857143);
  width: 40.0344152855%;
  width: calc((99.95% - 1.4rem) / 2.4); }

.offset-8 {
  margin-left: 65.7125230203%;
  margin-left: calc((99.95% - 0.5rem) / 1.5);
  width: 31.4750460405%;
  width: calc((99.95% - 2rem) / 3); }

.offset-9 {
  margin-left: 74.2718922652%;
  margin-left: calc((99.95% - 0.3333333333rem) / 1.3333333333);
  width: 22.9156767956%;
  width: calc((99.95% - 3rem) / 4); }

.offset-10 {
  margin-left: 82.8312615101%;
  margin-left: calc((99.95% - 0.2rem) / 1.2);
  width: 14.3563075506%;
  width: calc((99.95% - 5rem) / 6); }

.offset-11 {
  margin-left: 91.3906307551%;
  margin-left: calc((99.95% - 0.0909090909rem) / 1.0909090909);
  width: 5.7969383057%;
  width: calc((99.95% - 11rem) / 12); }

.offset-12 {
  margin-left: 99.95%;
  margin-left: calc((99.95% - 0rem) / 1);
  width: NaN%;
  width: calc((99.95% - Infinityrem) / Infinity); }

/* 
	Experimental feature
	--------------------

	Simple Columns. Sassy, sassy resonsive columns.

*/
.columns {
  letter-spacing: -0.31em;
  /* webkit */
  letter-spacing: -0.31rem;
  /* webkit */
  *letter-spacing: normal;
  /* reset IE < 8 */
  word-spacing: -0.43em;
  /* IE < 8 && gecko */
  word-spacing: -0.43rem;
  /* IE < 8 && gecko */
  width: 100%; }
  .columns > * {
    display: inline-block;
    zoom: 1;
    *display: inline;
    /* IE < 8: fake inline-block */
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top; }
  @media (min-width: 768px) {
    .columns [class*="column-"] {
      margin-left: 2.7624309392%;
      margin-left: calc(1rem * 1); }
      .columns [class*="column-"]:first-child {
        margin-left: 0; } }
  .columns .column-2 {
    width: 100%; }
    @media (min-width: 768px) {
      .columns .column-2 {
        width: 48.5937845304%;
        width: calc((99.95% - 1rem) / 2); }
        .columns .column-2:nth-of-type(2n+1) {
          margin-left: 0; } }
  .columns .column-3 {
    width: 100%; }
    @media (min-width: 768px) {
      .columns .column-3 {
        width: 48.5937845304%;
        width: calc((99.95% - 1rem) / 2); }
        .columns .column-3:nth-of-type(2n+1) {
          margin-left: 0; } }
    @media (min-width: 1024px) {
      .columns .column-3 {
        width: 31.4750460405%;
        width: calc((99.95% - 2rem) / 3); }
        .columns .column-3:nth-of-type(2n+1) {
          margin-left: 2.7624309392%;
          margin-left: calc(1rem * 1); }
        .columns .column-3:nth-of-type(3n+1) {
          margin-left: 0; } }
  .columns .column-4 {
    width: 100%; }
    @media (min-width: 768px) and (max-width: 1023px) {
      .columns .column-4 {
        width: 48.5937845304%;
        width: calc((99.95% - 1rem) / 2); }
        .columns .column-4:nth-of-type(2n+1) {
          margin-left: 0; } }
    @media (min-width: 1024px) {
      .columns .column-4 {
        width: 22.9156767956%;
        width: calc((99.95% - 3rem) / 4); } }

@media (max-width: 1024px) {
  .two_minimum .column-4 {
    width: 48%; }
    .two_minimum .column-4:nth-of-type(2n+1) {
      margin-left: 0; } }

/*	Elemental
	----------
	This is where all the elements of the website are brought together.
	Each element contains its own mediaqueries and does not depend on anything else. */
.footer {
  font-size: 14px;
  font-size: 0.875rem;
  background-color: #3e8a96; }
  .footer a {
    color: #fff;
    font-weight: 800; }
    .footer a:visited {
      color: #fff; }
  .footer p {
    margin: 30px 0; }
  .footer .column-2 {
    text-align: center; }
    @media (min-width: 48rem) {
      .footer .column-2 {
        text-align: right; }
        .footer .column-2:first-child {
          text-align: left; } }

.header {
  text-align: center;
  margin: 40px 0; }

/*	Headings
	--------
	Heading tags, h1 - h6.
	There are two methods of working here.
	We can either use the modular route
	that automatically sizes the fonts down
	in accordance to a specific mathmatic
	algorithm, or we can define them manually.
	
	I'll put both in the code so you can switch betwen them. 
	
*/
h1, h2, h3, h4, h5, h6
.h1, .h2, .h3, .h4, .h5, .h6 {
  text-rendering: optimizelegibility;
  font-weight: 800;
  color: #005460;
  margin: 0 0 30px 0; }
  h1.hero, h2.hero, h3.hero, h4.hero, h5.hero, h6
  .h1.hero, .h2.hero, .h3.hero, .h4.hero, .h5.hero, .h6.hero {
    font-family: "azo-sans-web", sans-serif; }

/* 	If you want to size things automatically,
	turn automaticsizing to true and change
	the maximum sizes here in rem. */
/* 	If things aren't accurate enough, we can
	expand it so you've got access to each 
	font size through the mediaqueries. */
h1, .h1 {
  font-size: 1rem; }
  @media (min-width: 48rem) {
    h1, .h1 {
      font-size: 1rem; } }
  @media (min-width: 62.5rem) {
    h1, .h1 {
      font-size: 1rem; } }

h2, .h2 {
  font-size: 1rem; }
  @media (min-width: 48rem) {
    h2, .h2 {
      font-size: 1rem; } }
  @media (min-width: 62.5rem) {
    h2, .h2 {
      font-size: 1rem; } }
  h2.hero, .h2.hero {
    font-size: 1rem; }
    @media (min-width: 48rem) {
      h2.hero, .h2.hero {
        font-size: 1rem; } }
    @media (min-width: 62.5rem) {
      h2.hero, .h2.hero {
        font-size: 1rem; } }

h3, .h3 {
  font-size: 1rem; }
  @media (min-width: 48rem) {
    h3, .h3 {
      font-size: 1.125rem; } }
  @media (min-width: 62.5rem) {
    h3, .h3 {
      font-size: 1.375rem; } }

h4, .h4 {
  font-size: 0.75rem; }
  @media (min-width: 48rem) {
    h4, .h4 {
      font-size: 0.85rem; } }
  @media (min-width: 62.5rem) {
    h4, .h4 {
      font-size: 1rem; } }

h5, .h5 {
  font-size: 0.75rem; }
  @media (min-width: 48rem) {
    h5, .h5 {
      font-size: 0.85rem; } }
  @media (min-width: 62.5rem) {
    h5, .h5 {
      font-size: 0.9rem; } }

h6, .h6 {
  font-size: 0.7rem; }
  @media (min-width: 48rem) {
    h6, .h6 {
      font-size: 0.75rem; } }
  @media (min-width: 62.5rem) {
    h6, .h6 {
      font-size: 0.8rem; } }

/*	Logo Styles
	-----------
	In this theme, your logo is left aligned
	in the header, then when you're on a smaller
	device, things go centered.
*/
#logo {
  display: block;
  text-align: center;
  width: 100%;
  max-width: 15rem;
  padding: 1.5rem 0;
  margin: 0 auto;
  position: relative;
  z-index: 20; }
  @media (min-width: 48rem) {
    #logo {
      width: 18.6359921731%;
      width: calc((99.95% - 3.8rem) / 4.8);
      text-align: left;
      float: left; } }
  #logo img {
    width: 100%;
    height: auto; }

/*
	Navigation
	----------
	This is the navigation, leading all the 
	way from the smallest to the largest of screens */
/* Dropdown mixin, because you can't 
extend over mediaqueries, we're going 
to use a simple mixin that we can reuse 
throughout the mobile stylesheet */
/***********************
Mobile Icon for Dropdown
***********************/
.clickable {
  margin: 0;
  padding: 1rem 0.5rem 0rem;
  width: 3rem;
  height: 3rem;
  position: fixed;
  bottom: 2.5rem;
  right: 1rem;
  z-index: 100;
  cursor: pointer;
  background-color: #fff; }

.menu-icon {
  margin-top: 0px;
  padding: 0; }
  .menu-icon div {
    height: 4px;
    width: 100%;
    margin-bottom: 5px;
    border-radius: 1px;
    background: #959595; }

/*********************
Navigation Styles
*********************/
.top-nav {
  z-index: 50;
  /* end .menu li */
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /*****************************************
  	Post - Mobile styles
  	--------------------
  	Larger than the mobile styles, 
  	we're going for around tablets here. */
  /* end tablets */ }
  @media (max-width: 48rem) {
    .top-nav {
      overflow: hidden;
      max-height: 0;
      margin: 0;
      opacity: 0;
      -webkit-transition: 0.4s opacity cubic-bezier(0.77, 0, 0.175, 1);
      -transition: 0.4s opacity cubic-bezier(0.77, 0, 0.175, 1);
      transition: 0.4s opacity cubic-bezier(0.77, 0, 0.175, 1); }
      .top-nav.show {
        max-height: 500rem;
        opacity: 1; } }
  .top-nav li {
    display: block;
    position: relative;
    background-color: #005460;
    text-align: center; }
    .top-nav li a {
      display: block;
      text-decoration: none;
      font-size: 1rem;
      padding: 0.45rem 0;
      color: #fff; }
    .top-nav li.menu-item-has-children.is-active {
      position: relative; }
      .top-nav li.menu-item-has-children.is-active > a:before {
        content: "Back";
        position: absolute;
        left: 0;
        top: 0;
        line-height: 2; }
    @media (max-width: 48rem) {
      .top-nav li ul.sub-menu,
      .top-nav li ul.children {
        overflow: hidden;
        max-height: 0;
        margin: 0;
        opacity: 0;
        -webkit-transition: 0.4s opacity cubic-bezier(0.77, 0, 0.175, 1);
        -transition: 0.4s opacity cubic-bezier(0.77, 0, 0.175, 1);
        transition: 0.4s opacity cubic-bezier(0.77, 0, 0.175, 1); }
        .top-nav li ul.sub-menu.show,
        .top-nav li ul.children.show {
          max-height: 500rem;
          opacity: 1; } }
    .top-nav li ul.sub-menu li,
    .top-nav li ul.children li {
      background-color: #fff; }
      .top-nav li ul.sub-menu li a,
      .top-nav li ul.children li a {
        color: #959595; }
  .top-nav.show {
    background-color: #7fa9af;
    bottom: 0;
    left: 0;
    width: 100%; }
  @media (min-width: 48rem) {
    .top-nav {
      text-align: right;
      margin: 1rem 0;
      vertical-align: middle;
      /* end .menu ul li */
      /* highlight current page */
      /* end current highlighters */ }
      .top-nav li {
        display: inline-block;
        background-color: transparent;
        /* showing sub-menus */ }
        .top-nav li:hover a, .top-nav li:focus a {
          color: #005460; }
        .top-nav li a {
          border-bottom: 0;
          color: #959595;
          font-size: 16px;
          font-size: 1rem;
          padding: 0.5rem 1rem;
          font-weight: 400; }
        .top-nav li.menu-item-has-children:after {
          content: "\25BC";
          font-size: 80%;
          line-height: 3;
          position: absolute;
          right: 0;
          top: 0;
          vertical-align: middle; }
        .top-nav li.menu-item-has-children:hover {
          color: #005460; }
        .top-nav li ul.sub-menu,
        .top-nav li ul.children {
          margin-top: 0;
          border-top: 0;
          position: absolute;
          display: none;
          z-index: 15;
          text-align: left;
          background: #005460; }
          .top-nav li ul.sub-menu li a,
          .top-nav li ul.children li a {
            display: block;
            width: 18rem;
            width: -moz-max-content;
            width: -webkit-max-content;
            width: max-content;
            color: #fff; }
        .top-nav li:hover ul {
          display: block; }
      .top-nav li.current-menu-item a,
      .top-nav li.current_page_item a,
      .top-nav li.current-page-ancestor a {
        text-decoration: underline; } }

/* end .nav */
/* Mobile navigation has a bitch of a class system now*/
.is-inactive {
  font-size: 0;
  line-height: 0;
  height: 0;
  width: 0;
  padding: 0;
  margin: 0;
  border: 0; }

/*	Page Styles
	-----------
	Used for elements like body and html
	
*/
body {
  background-color: #b6b6b6;
  font-family: "azo-sans-web", sans-serif;
  font-size: 90%;
  line-height: 1.4;
  color: #959595;
  font-weight: 400; }
  @media (min-width: 48rem) {
    body {
      background-color: #fff; } }
  @media (min-width: 48rem) {
    body {
      font-size: 100%;
      line-height: 1.5; } }

/*
	Wrapping the entire site
	------------------------
	We use a .wrap class on areas that we want
	to restrict the width of. So this loop
	goes through our breakpoints located in
	_breakpoints.scss
*/
.wrap {
  width: 96%;
  margin: 0 auto;
  max-width: 1140px; }

/*	Page by page
	----------
	This is where all the elements of the website are brought together.
	Each element contains its own mediaqueries and does not depend on anything else. */
#map_canvas {
  width: 100%;
  height: 340px;
  margin-bottom: 45px; }
  #map_canvas img {
    max-width: none; }

.page_content {
  border-bottom: 1px solid #959595;
  text-align: center; }
  .page_content table {
    margin-left: auto;
    margin-right: auto; }
  @media (min-width: 48rem) {
    .page_content {
      text-align: left; }
      .page_content table {
        margin-left: 0;
        margin-right: 0; } }

.page_footer {
  padding-top: 45px;
  padding-bottom: 45px; }
  .page_footer .column-2 {
    text-align: center; }
  @media (min-width: 48rem) {
    .page_footer .column-2 {
      text-align: left;
      padding-left: 40px; }
      .page_footer .column-2:first-child {
        text-align: right;
        padding-right: 40px; } }

/*
BASE (MOBILE) SIZE
This are the mobile styles. It's what people see on their phones. If
you set a great foundation, you won't need to add too many styles in
the other stylesheets. Remember, keep it light: Speed is Important.
*/
/******************************************************************
Site Name: Meat
Author: AndrewEivin

Stylesheet: Base Mobile Stylesheet

Be light and don't over style since everything here will be
loaded by mobile devices. You want to keep it as minimal as
possible. This is called at the top of the main stylsheet
and will be used across all viewports.

******************************************************************/
/*********************
GENERAL STYLES
*********************/
/*************************************************
	We include the grid for when you're 
	using the lowest file, you might still
	want to use this in the base, the 481 etc
*************************************************/
/********************************************
			   G R I D  M A T H

	Math. A bunch of it. This is the math
	that makes the grid. Math can change
	in here to completely change the whole
	layout of your site. 
			  
********************************************/
/* Adding an extra mixin to make widths fallbackabler.*/
/* Offset class. Experimental, but looks nice */
.offset-1 {
  margin-left: 5.7969383057%;
  margin-left: calc((99.95% - 11rem) / 12);
  width: 91.3906307551%;
  width: calc((99.95% - 0.0909090909rem) / 1.0909090909); }

.offset-2 {
  margin-left: 14.3563075506%;
  margin-left: calc((99.95% - 5rem) / 6);
  width: 82.8312615101%;
  width: calc((99.95% - 0.2rem) / 1.2); }

.offset-3 {
  margin-left: 22.9156767956%;
  margin-left: calc((99.95% - 3rem) / 4);
  width: 74.2718922652%;
  width: calc((99.95% - 0.3333333333rem) / 1.3333333333); }

.offset-4 {
  margin-left: 31.4750460405%;
  margin-left: calc((99.95% - 2rem) / 3);
  width: 65.7125230203%;
  width: calc((99.95% - 0.5rem) / 1.5); }

.offset-5 {
  margin-left: 40.0344152855%;
  margin-left: calc((99.95% - 1.4rem) / 2.4);
  width: 57.1531537753%;
  width: calc((99.95% - 0.7142857143rem) / 1.7142857143); }

.offset-6 {
  margin-left: 48.5937845304%;
  margin-left: calc((99.95% - 1rem) / 2);
  width: 48.5937845304%;
  width: calc((99.95% - 1rem) / 2); }

.offset-7 {
  margin-left: 57.1531537753%;
  margin-left: calc((99.95% - 0.7142857143rem) / 1.7142857143);
  width: 40.0344152855%;
  width: calc((99.95% - 1.4rem) / 2.4); }

.offset-8 {
  margin-left: 65.7125230203%;
  margin-left: calc((99.95% - 0.5rem) / 1.5);
  width: 31.4750460405%;
  width: calc((99.95% - 2rem) / 3); }

.offset-9 {
  margin-left: 74.2718922652%;
  margin-left: calc((99.95% - 0.3333333333rem) / 1.3333333333);
  width: 22.9156767956%;
  width: calc((99.95% - 3rem) / 4); }

.offset-10 {
  margin-left: 82.8312615101%;
  margin-left: calc((99.95% - 0.2rem) / 1.2);
  width: 14.3563075506%;
  width: calc((99.95% - 5rem) / 6); }

.offset-11 {
  margin-left: 91.3906307551%;
  margin-left: calc((99.95% - 0.0909090909rem) / 1.0909090909);
  width: 5.7969383057%;
  width: calc((99.95% - 11rem) / 12); }

.offset-12 {
  margin-left: 99.95%;
  margin-left: calc((99.95% - 0rem) / 1);
  width: NaN%;
  width: calc((99.95% - Infinityrem) / Infinity); }

body {
  background: #fff;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; }

/*********************
HEADING STYLES - Type
*********************/
h1, h2, h3, h4, h5, h6 {
  text-rendering: optimizelegibility; }

/*********************
TEXT BODY STYLES
*********************/
body {
  font-family: "azo-sans-web", sans-serif;
  font-size: 90%;
  line-height: 1.4;
  color: #959595;
  font-weight: 400; }

b, strong {
  font-weight: 500; }

/*********************
SEPARATION STYLES
*********************/
hr {
  margin: 5.5248618785% 0;
  border: 0;
  border-bottom: 1px solid #000; }

/*********************
LINK STYLES
*********************/
a, a:visited {
  color: #3e8a96;
  text-decoration: none;
  /* on hover */
  /* on click */
  /* mobile tap color */ }
  a:hover, a:focus, a:visited:hover, a:visited:focus {
    color: #005460;
    text-decoration: none; }
  a:link, a:visited:link {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3); }

/*********************
IMG STYLES
*********************/
.img {
  vertical-align: bottom; }

/*********************
LOGO STYLES
*********************/
#logo {
  display: block;
  text-align: center;
  width: 100%;
  padding: 1.5rem 0;
  margin: 0; }
  #logo a {
    border-bottom: 0; }
  #logo img {
    max-width: 15rem;
    height: auto;
    margin: 0 auto; }

/*********************
NAVIGATION AND MENUS
*********************/
/*
all navs have a .nav class applied via
the wp_menu function; this is so we can
easily write one group of styles for
the navs on the site so our css is cleaner
and more scalable.
*/
@media only screen and (max-width: 48rem) {
  .cssremunit .nav {
    overflow: hidden;
    max-height: 0;
    -webkit-transition: 0.4s all cubic-bezier(0.77, 0, 0.175, 1);
    -transition: 0.4s all cubic-bezier(0.77, 0, 0.175, 1);
    transition: 0.4s all cubic-bezier(0.77, 0, 0.175, 1); }
    .cssremunit .show.nav {
      max-height: 500rem; } }

/*********************
MOBILE DROPDOWN NAVIGATION STYLES
*********************/
.clickable {
  margin: 0;
  color: #959595;
  cursor: pointer;
  padding: 0;
  width: 45px;
  position: absolute;
  top: 20px;
  right: 20px; }

.menu-icon {
  margin-top: 0px;
  padding: 0; }
  .menu-icon div {
    height: 4px;
    width: 100%;
    margin-bottom: 5px;
    border-radius: 1px;
    background: #959595; }

/*********************
NAVIGATION STYLES
*********************/
.nav {
  margin: 0;
  font-family: "azo-sans-web", sans-serif;
  /* end .menu li */ }
  .js .nav {
    border-top: 0;
    left: 0;
    right: 0;
    display: inline-block;
    width: 100%;
    position: relative;
    top: 0;
    z-index: 5; }
    .js .nav li a {
      width: 100%; }
  .nav li a {
    display: inline-block;
    text-decoration: none; }
  @media only screen and (max-width: 48rem) {
    .js .nav li ul.sub-menu, .js
    .nav li ul.children {
      overflow: hidden;
      max-height: 0;
      -webkit-transition: 0.4s all cubic-bezier(0.77, 0, 0.175, 1);
      -transition: 0.4s all cubic-bezier(0.77, 0, 0.175, 1);
      transition: 0.4s all cubic-bezier(0.77, 0, 0.175, 1); }
      .js .nav li ul.sub-menu.show, .js
      .nav li ul.children.show {
        max-height: 500rem; } }
  .nav li ul.sub-menu li a,
  .nav li ul.children li a {
    padding-left: 5.5248618785%; }

/* end .nav */
/*********************
POSTS & CONTENT STYLES
*********************/
img {
  margin: 0;
  max-width: 100%;
  height: auto; }

/* post meta */
.byline {
  color: #999; }

blockquote {
  background: #d7d7d7;
  border-left: 10px solid;
  margin: 0;
  padding: 1em 2em; }

.page-title {
  /* Removing the */
  margin: 0; }

.entry-content {
  /*
  image alignment on a screen this size may be
  a bit difficult. It's set to start aligning
  and floating images at the next breakpoint,
  but it's up to you. Feel free to change it up.
  */ }
  .entry-content ul {
    list-style: disc;
    margin-left: 8.2872928177%; }
  .entry-content dd {
    margin-left: 0;
    color: #787878; }
  .entry-content video, .entry-content object {
    max-width: 100%;
    height: auto; }
  .entry-content pre {
    background: #eee;
    border: 1px solid #cecece;
    padding: 10px; }

/* end .entry-content */
.wp-caption {
  max-width: 100%;
  background: #eee;
  padding: 5px; }
  .wp-caption p.wp-caption-text {
    font-size: 0.85em;
    margin: 4px 0 7px;
    text-align: center; }

/* end .wp-caption */
/******************************************************************
PAGE NAVI STYLES
******************************************************************/
.page-navigation,
.wp-prev-next {
  margin: 1.1em 0 2.2em; }

.meat_page_navi {
  /* current page link */
  /* end .meat_page_navi .bpn-current */
  /* common styles for page-navi links */
  /* remove the bg on end links */ }
  .meat_page_navi li {
    float: left;
    margin-left: 10px; }
    .meat_page_navi li a {
      padding: 3px 6px;
      display: block;
      text-decoration: none;
      position: relative; }
      .meat_page_navi li a:hover, .meat_page_navi li a:focus {
        color: #f01d4f;
        text-decoration: underline; }
  .meat_page_navi li.bpn-current {
    padding: 3px 6px;
    border-bottom: 2px solid #f01d4f;
    position: relative; }
  .meat_page_navi li.bpn-prev-link,
  .meat_page_navi li.bpn-next-link {
    font-weight: 700; }
    .meat_page_navi li.bpn-prev-link a,
    .meat_page_navi li.bpn-next-link a {
      padding: 0; }
  .meat_page_navi li.bpn-prev-link a:hover,
  .meat_page_navi li.bpn-next-link a:hover,
  .meat_page_navi li.bpn-first-page-link a:hover,
  .meat_page_navi li.bpn-last-page-link a:hover {
    background: none; }

/* end .meat_page_navi */
/* fallback previous & next links */
.wp-prev-next .prev-link {
  float: left; }
.wp-prev-next .next-link {
  float: right; }

/* end .wp-prev-next */
.single-pagination .page-numbers {
  width: 100%;
  display: inline-block;
  text-align: center; }
  .single-pagination .page-numbers li {
    display: inline-block;
    padding: 4px; }
    .single-pagination .page-numbers li a, .single-pagination .page-numbers li .span {
      background: #005460;
      color: #fff;
      border-radius: 2px;
      display: block;
      height: 30px;
      width: 30px;
      text-align: center;
      vertical-align: middle; }

/******************************************************************
COMMENT STYLES
******************************************************************/
.commentlist {
  /* general comment classes */
  /* vcard */
  /* end .commentlist .vcard */
  /* comment content */
  /* end .commentlist .comment_content */
  /* comment reply link */
  /* end .commentlist .comment-reply-link */ }
  .commentlist li {
    position: relative;
    clear: both;
    overflow: hidden;
    list-style-type: none;
    margin-bottom: 1.5rem;
    padding: 0.7335rem 10px;
    /* end .commentlist li ul.children */ }
    .commentlist li:last-child {
      margin-bottom: 0; }
    .commentlist li ul.children {
      margin: 0; }
  .commentlist li[class*=depth-] {
    margin-top: 1.1rem; }
  .commentlist li.depth-1 {
    margin-left: 0;
    margin-top: 0; }
  .commentlist li:not(.depth-1) {
    margin-right: -10px;
    margin-left: -10px;
    margin-top: 0;
    padding-bottom: 0; }
  .commentlist .odd {
    background: #959595; }
  .commentlist .even {
    background: #d7d7d7; }
  .commentlist .vcard {
    margin-left: 50px; }
    .commentlist .vcard cite.fn {
      font-weight: 700;
      font-style: normal; }
    .commentlist .vcard time {
      float: right; }
      .commentlist .vcard time a {
        color: #999;
        text-decoration: none; }
        .commentlist .vcard time a:hover {
          text-decoration: underline; }
    .commentlist .vcard img.avatar {
      position: absolute;
      left: 10px;
      padding: 2px;
      border: 1px solid #cecece;
      background: #fff; }
  .commentlist .comment_content {
    margin-left: 50px; }
    .commentlist .comment_content p {
      margin: 0.7335em 8px 1.5em;
      font-size: 1em;
      line-height: 1.5em; }
  .commentlist .comment-reply-link {
    text-decoration: none;
    float: right;
    background: #4598bb;
    padding: 3px 5px;
    color: #fff;
    opacity: 0.65;
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 0.9em; }
    .commentlist .comment-reply-link:hover, .commentlist .comment-reply-link:focus {
      opacity: 1; }

/* end .commentlist */
/*********************
SIDEBAR STYLES
*********************/
.sidebar ul {
  margin: 0; }
.sidebar li a {
  display: block; }

/*********************
FOOTER STYLES
*********************/
.footer {
  color: #fff; }

/*
LARGER MOBILE DEVICES
This is for devices like the Galaxy Note or something that's
larger than an iPhone but smaller than a tablet. Let's call them
tweeners.
*/
@media only screen and (min-width: 30.063rem) {
  /******************************************************************
  Site Name: Meat
  Author: AndrewEivin
  
  Stylesheet: 481px and Up Stylesheet
  
  This stylesheet is loaded for larger devices. It's set to 
  481px because at 480px it would load on a landscaped iPhone.
  This isn't ideal because then you would be loading all those
  extra styles on that same mobile connection. 
  
  A word of warning. This size COULD be a larger mobile device,
  so you still want to keep it pretty light and simply expand
  upon your base.scss styles.
  
  ******************************************************************/
  /*********************
  POSTS & CONTENT STYLES
  *********************/
  /* entry content */
  .entry-content {
    /* at this larger size, we can start to align images */ }
    .entry-content .alignleft, .entry-content img.alignleft {
      margin-right: 1.5em;
      display: inline;
      float: left; }
    .entry-content .alignright, .entry-content img.alignright {
      margin-left: 1.5em;
      display: inline;
      float: right; }
    .entry-content .aligncenter, .entry-content img.aligncenter {
      margin-right: auto;
      margin-left: auto;
      display: block;
      clear: both; }

  /* end .entry-content */
  /*********************
  FOOTER STYLES
  *********************/ }
/*
PHABLET
In between Phone and tablet. Seriously. This covers things from nexus 7 to iphone6+ etc.
*/
@media only screen and (min-width: 37rem) {
  /******************************************************************
  Site Name: Meat
  Author: AndrewEivin
  
  Stylesheet: Phablet Stylsheet
  
  This is the Phablet size. It's larger than phone, smaller than a tablet...
  
  ******************************************************************/ }
/*
TABLET & SMALLER LAPTOPS
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 48rem) {
  /******************************************************************
  Site Name: Meat
  Author: AndrewEivin
  
  Stylesheet: Grid Stylesheet
  
  I've seperated the grid so you can swap it out easily. It's
  called at the top the style.scss stylesheet.
  
  There are a ton of grid solutions out there. You should definitely
  experiment with your own. Here are some recommendations:
  
  http://gridsetapp.com - Love this site. Responsive Grids made easy.
  http://susy.oddbird.net/ - Grids using Compass. Very elegant.
  http://gridpak.com/ - Create your own responsive grid.
  
  The grid below is a combination of the 1140 grid and Twitter Boostrap. 
  I liked 1140 but Boostrap's grid was way more detailed so I merged them 
  together, let's see how this works out. If you want to use 1140, the original 
  values are commented out on each line.
  
  ******************************************************************/
  /********************************************
  			   G R I D  M A T H
  
  	Math. A bunch of it. This is the math
  	that makes the grid. Math can change
  	in here to completely change the whole
  	layout of your site. 
  			  
  ********************************************/
  /* Adding an extra mixin to make widths fallbackabler.*/
  /* Offset class. Experimental, but looks nice */
  .offset-1 {
    margin-left: 5.7969383057%;
    margin-left: calc((99.95% - 11rem) / 12);
    width: 91.3906307551%;
    width: calc((99.95% - 0.0909090909rem) / 1.0909090909); }

  .offset-2 {
    margin-left: 14.3563075506%;
    margin-left: calc((99.95% - 5rem) / 6);
    width: 82.8312615101%;
    width: calc((99.95% - 0.2rem) / 1.2); }

  .offset-3 {
    margin-left: 22.9156767956%;
    margin-left: calc((99.95% - 3rem) / 4);
    width: 74.2718922652%;
    width: calc((99.95% - 0.3333333333rem) / 1.3333333333); }

  .offset-4 {
    margin-left: 31.4750460405%;
    margin-left: calc((99.95% - 2rem) / 3);
    width: 65.7125230203%;
    width: calc((99.95% - 0.5rem) / 1.5); }

  .offset-5 {
    margin-left: 40.0344152855%;
    margin-left: calc((99.95% - 1.4rem) / 2.4);
    width: 57.1531537753%;
    width: calc((99.95% - 0.7142857143rem) / 1.7142857143); }

  .offset-6 {
    margin-left: 48.5937845304%;
    margin-left: calc((99.95% - 1rem) / 2);
    width: 48.5937845304%;
    width: calc((99.95% - 1rem) / 2); }

  .offset-7 {
    margin-left: 57.1531537753%;
    margin-left: calc((99.95% - 0.7142857143rem) / 1.7142857143);
    width: 40.0344152855%;
    width: calc((99.95% - 1.4rem) / 2.4); }

  .offset-8 {
    margin-left: 65.7125230203%;
    margin-left: calc((99.95% - 0.5rem) / 1.5);
    width: 31.4750460405%;
    width: calc((99.95% - 2rem) / 3); }

  .offset-9 {
    margin-left: 74.2718922652%;
    margin-left: calc((99.95% - 0.3333333333rem) / 1.3333333333);
    width: 22.9156767956%;
    width: calc((99.95% - 3rem) / 4); }

  .offset-10 {
    margin-left: 82.8312615101%;
    margin-left: calc((99.95% - 0.2rem) / 1.2);
    width: 14.3563075506%;
    width: calc((99.95% - 5rem) / 6); }

  .offset-11 {
    margin-left: 91.3906307551%;
    margin-left: calc((99.95% - 0.0909090909rem) / 1.0909090909);
    width: 5.7969383057%;
    width: calc((99.95% - 11rem) / 12); }

  .offset-12 {
    margin-left: 99.95%;
    margin-left: calc((99.95% - 0rem) / 1);
    width: NaN%;
    width: calc((99.95% - Infinityrem) / Infinity); }

  .onecol {
    width: 5.7969383057%;
    width: calc((99.95% - 11rem) / 12); }

  .twocol {
    width: 14.3563075506%;
    width: calc((99.95% - 5rem) / 6); }

  .threecol {
    width: 22.9156767956%;
    width: calc((99.95% - 3rem) / 4); }

  .fourcol {
    width: 31.4750460405%;
    width: calc((99.95% - 2rem) / 3); }

  .fivecol {
    width: 40.0344152855%;
    width: calc((99.95% - 1.4rem) / 2.4); }

  .sixcol {
    width: 48.5937845304%;
    width: calc((99.95% - 1rem) / 2); }

  .sevencol {
    width: 57.1531537753%;
    width: calc((99.95% - 0.7142857143rem) / 1.7142857143); }

  .eightcol {
    width: 65.7125230203%;
    width: calc((99.95% - 0.5rem) / 1.5); }

  .ninecol {
    width: 74.2718922652%;
    width: calc((99.95% - 0.3333333333rem) / 1.3333333333); }

  .tencol {
    width: 82.8312615101%;
    width: calc((99.95% - 0.2rem) / 1.2); }

  .elevencol {
    width: 91.3906307551%;
    width: calc((99.95% - 0.0909090909rem) / 1.0909090909); }

  .twelvecol {
    width: 99.95%;
    width: calc((99.95% - 0rem) / 1); }

  .onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol, .twelvecol, .fifthcol, .threefifth {
    position: relative;
    float: left;
    margin-left: 2.7624309392%;
    margin-left: calc(1rem * 1); }

  /* 
  	This is a simpler way of using widths.
  	Adding an extra mixin to make widths fallbackabler.
  */
  .first {
    margin-left: 0; }

  .last {
    float: right; }

  .gutter-top {
    margin-top: 2.7624309392%;
    margin-top: calc(1rem * 1); }

  .gutter-bottom {
    margin-bottom: 2.7624309392%;
    margin-bottom: calc(1rem * 1); }

  .third, .quarter, .half {
    float: left; }

  .third {
    width: 33.33333333333%; }

  .quarter {
    width: 25%; }

  .half {
    width: 50%; }

  /******************************************************************
  Site Name: Meat
  Author: AndrewEivin
  
  Stylesheet: Tablet & Small Desktop Stylesheet
  
  Here's where you can start getting into the good stuff.
  This size will work on iPads, other tablets, and desktops.
  So you can start working with more styles, background images,
  and other resources. You'll also notice the grid starts to
  come into play. Have fun!
  
  ******************************************************************/
  /*********************
  GENERAL STYLES
  *********************/
  body {
    font-size: 100%;
    line-height: 1.5; }

  /*********************
  HEADER STYLES
  *********************/
  /*********************
  LOGO STYLES
  *********************/
  #logo {
    width: 22.9156767956%;
    width: calc((99.95% - 3rem) / 4);
    text-align: left;
    float: left;
    margin-left: 0; }
    #logo img {
      margin: 0em auto;
      max-width: 100%;
      position: relative;
      z-index: 20; }

  /*********************
  NAVIGATION STYLES
  *********************/
  .mobile-only {
    display: none;
    visibility: hidden; }

  .nav {
    text-align: right;
    margin: 1rem 0;
    vertical-align: middle;
    /* end .menu ul li */
    /* highlight current page */
    /* end current highlighters */ }
    .js .nav {
      display: block;
      top: auto;
      right: auto;
      left: auto;
      max-height: 100%; }
    .nav li {
      display: inline-block;
      position: relative;
      /*
      you can use hover styles here even though this size
      has the possibility of being a mobile device.
      */
      /*
      plan your menus and drop-downs wisely.
      */
      /* showing sub-menus */ }
      .nav li:hover, .nav li:focus {
        color: #fff;
        background: #005460; }
        .nav li:hover a, .nav li:focus a {
          color: #fff; }
      .nav li a {
        border-bottom: 0;
        color: #959595;
        font-size: 16px;
        font-size: 1rem;
        padding: 0.5rem 1rem;
        font-weight: 400; }
        .nav li a:hover, .nav li a:focus {
          color: #fff;
          background: #00272d; }
      .js .nav li ul.show.sub-menu, .js .nav li ul.show.children,
      .nav li ul.sub-menu,
      .nav li ul.children {
        margin-top: 0;
        border-top: 0;
        position: absolute;
        display: none;
        z-index: 15;
        text-align: left;
        color: #fff;
        background: #005460;
        /* highlight sub-menu current page */ }
        .js .nav li ul.show.sub-menu li, .js .nav li ul.show.children li,
        .nav li ul.sub-menu li,
        .nav li ul.children li {
          /*
          if you need to go deeper, go nuts
          just remember deeper menus suck
          for usability. k, bai.
          */ }
          .js .nav li ul.show.sub-menu li:hover a, .js .nav li ul.show.sub-menu li:focus a, .js .nav li ul.show.children li:hover a, .js .nav li ul.show.children li:focus a,
          .nav li ul.sub-menu li:hover a,
          .nav li ul.sub-menu li:focus a,
          .nav li ul.children li:hover a,
          .nav li ul.children li:focus a {
            background: #00272d;
            border-radius: 2px; }
          .js .nav li ul.show.sub-menu li a, .js .nav li ul.show.children li a,
          .nav li ul.sub-menu li a,
          .nav li ul.children li a {
            font-size: 13.6px;
            font-size: 0.85rem;
            border-right: 0;
            display: block;
            width: 18rem;
            color: #fff; }
          .js .nav li ul.show.sub-menu li:last-child a, .js .nav li ul.show.children li:last-child a,
          .nav li ul.sub-menu li:last-child a,
          .nav li ul.children li:last-child a {
            border-bottom: 0; }
      .nav li:hover ul {
        top: auto;
        display: block; }

  /* end .nav */
  /*********************
  SIDEBARS & ASIDES
  *********************/
  .widget ul li {
    margin-bottom: 0.75rem;
    /* deep nesting */ }
    .widget ul li ul {
      margin-top: 0.75rem;
      padding-left: 1rem; }

  /*********************
  FOOTER STYLES
  *********************/
  /*
  you'll probably need to do quite a bit
  of overriding here if you styled them for
  mobile. Make sure to double check these!
  */
  .footer {
    text-align: left; }
    .footer .widget {
      width: 22.9156767956%;
      width: calc((99.95% - 3rem) / 4); }
      .footer .widget.first {
        margin-left: 0; }
      .footer .widget.last {
        float: right; }
      .footer .widget:first-child {
        margin-left: 0; }
      .footer .widget ul {
        padding: 0;
        margin: 0; }
        .footer .widget ul li {
          padding: 0;
          margin: 0; }
    .footer a:hover {
      color: #005460; }

  /* Desktop only Plugins.
  	@import "plugins/gravity";
  */ }
/*
DESKLET
In between desktop and tablet
*/
@media only screen and (min-width: 55.5rem) {
  /******************************************************************
  Site Name: Meat
  Author: AndrewEivin
  
  Stylesheet: Desklet Stylsheet
  
  This is the desklet size. It's larger than tablet, smaller than a large screen...
  
  ******************************************************************/ }
/*
DESKTOP
This is the average viewing window. So Desktops, Laptops, and
in general anyone not viewing on a mobile device. Here's where
you can add resource intensive styles.
*/
@media only screen and (min-width: 62.5rem) {
  /******************************************************************
  Site Name: Meat
  Author: AndrewEivin
  
  Stylesheet: Desktop Stylsheet
  
  This is the desktop size. It's larger than an iPad so it will only
  be seen on the Desktop. 
  
  ******************************************************************/ }
/*
LARGE VIEWING SIZE
This is for the larger monitors and possibly full screen viewers.
*/
@media only screen and (min-width: 75rem) {
  /******************************************************************
  Site Name: Meat
  Author: AndrewEivin
  
  Stylesheet: Super Large Monitor Stylesheet
  
  You can add some advanced styles here if you like. This kicks in
  on larger screens.
  
  ******************************************************************/ }
/*
RETINA (2x RESOLUTION DEVICES)
This applies to the retina iPhone (4s) and iPad (2,3) along with
other displays with a 2x resolution. You can also create a media
query for retina AND a certain size if you want. Go Nuts.
*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min--moz-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
  /******************************************************************
  Site Name: Meat
  Author: AndrewEivin
  
  Stylesheet: Retina Screens & Devices Stylesheet
  
  When handling retina screens you need to make adjustments, especially
  if you're not using font icons. Here you can add them in one neat
  place.
  
  ******************************************************************/
  /* 
  
  EXAMPLE 
  Let's say you have an image and you need to make sure it looks ok
  on retina screens. Let's say we have an icon which dimension are
  24px x 24px. In your regular stylesheets, it would look something
  like this:
  
  .icon {
  	width: 24px;
  	height: 24px;
  	background: url(img/test.png) no-repeat;
  }
  
  For retina screens, we have to make some adjustments, so that image
  doesn't look blurry. So, taking into account the image above and the
  dimensions, this is what we would put in our retina stylesheet:
  
  .icon {
  	background: url(img/test@2x.png) no-repeat;
  	background-size: 24px 24px;
  }
  
  So, you would create the same icon, but at double the resolution, meaning 
  it would be 48px x 48px. You'd name it the same, but with a @2x at the end
  (this is pretty standard practice). Set the background image so it matches
  the original dimensions and you are good to go. 
  
  */ }
/*
iPHONE 5 MEDIA QUERY
Want to get fancy for no good reason? Knock yourself out.
*/
/*
PRINT STYLESHEET
Feel free to customize this. Remember to add things that won't make
sense to print at the bottom. Things like nav, ads, and forms should
be set to display none.
*/
@media print {
  /******************************************************************
  Site Name: Meat
  Author: AndrewEivin
  
  Stylesheet: Print Stylesheet
  
  This is the print stylesheet. There's probably not a lot
  of reasons to edit this stylesheet. If you want to
  though, go for it.
  
  ******************************************************************/
  * {
    background: transparent !important;
    color: black !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important; }

  a, a:visited {
    color: #444 !important;
    text-decoration: underline; }
    a:after, a:visited:after {
      content: " (" attr(href) ")"; }
    a abbr[title]:after, a:visited abbr[title]:after {
      content: " (" attr(title) ")"; }

  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: ""; }

  pre, blockquote {
    border: 1px solid #999;
    page-break-inside: avoid; }

  thead {
    display: table-header-group; }

  tr, img {
    page-break-inside: avoid; }

  img {
    max-width: 100% !important; }

  @page {
    margin: 0.5cm; }
  p, h2, h3 {
    orphans: 3;
    widows: 3; }

  h2,
  h3 {
    page-break-after: avoid; }

  .sidebar,
  .page-navigation,
  .wp-prev-next,
  .respond-form,
  nav {
    display: none; } }