/*
 * ! Made with Bones: http://themble.com/bones :)
 */
/*
 * *****************************************************************
 * Site Name:
 * Author:
 * 
 * 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.
 * 
 * Helpful articles on Sass file organization:
 * http://thesassway.com/advanced/modular-css-naming-conventions
 * 
 * *****************************************************************
 */
/*
 * ********************
 * 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: auto;
  -epub-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto; }

/*
 * 
 * * 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 silver;
  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.
 */

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,
.comment-respond {
  zoom: 1; }
  .clearfix:before,
  .cf:before,
  .clearfix:after,
  .cf:after,
  .comment-respond:before,
  .comment-respond:after {
    content: "";
    display: table; }
  .clearfix:after,
  .cf:after,
  .comment-respond: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; }

/*
 * *****************************************************************
 * 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
 * 
 * *****************************************************************
 */
/*
 * ********************
 * FONT FACE (IN YOUR FACE)
 * ********************
 */
/*
 * To embed your own fonts, use this syntax
 * and place your fonts inside the
 * library/fonts folder. For more information
 * on embedding fonts, go to:
 * http://www.fontsquirrel.com/
 * Be sure to remove the comment brackets.
 */
/*
 * @font-face {
 * font-family: 'Font Name';
 * src: url('library/fonts/font-name.eot');
 * src: url('library/fonts/font-name.eot?#iefix') format('embedded-opentype'),
 * url('library/fonts/font-name.woff') format('woff'),
 * url('library/fonts/font-name.ttf') format('truetype'),
 * url('library/fonts/font-name.svg#font-name') format('svg');
 * font-weight: normal;
 * font-style: normal;
 * }
 */
/*
 * 
 * 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.
 */
/*
 * 
 * some nice typographical defaults
 * more here: http://www.newnet-soft.com/blog/csstypography
 */
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
 * ********************
 */
/*
 * 
 * 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?
 */
/*
 * *****************************************************************
 * Site Name:
 * Author:
 * 
 * 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.
 * https://github.com/dope/lemonade - Neat lightweight grid.
 * 
 * 
 * The grid below is a custom built thingy I modeled a bit after
 * Gridset. It's VERY basic and probably shouldn't be used on
 * your client projects. The idea is you learn how to roll your
 * own grids. It's better in the long run and allows you full control
 * over your project's layout.
 * 
 * *****************************************************************
 */
.last-col {
  float: right;
  padding-right: 0; }

/*
 * 
 * Mobile Grid Styles
 * These are the widths for the mobile grid.
 * There are four types, but you can add or customize
 * them however you see fit.
 */
@media (max-width: 767px) {
  .m-all {
    float: left;
    width: 100%;
    padding-right: 0; }

  .m-1of2 {
    float: left;
    width: 50%; }

  .m-1of3 {
    float: left;
    width: 33.33%; }

  .m-2of3 {
    float: left;
    width: 66.66%; }

  .m-1of4 {
    float: left;
    width: 25%; }

  .m-3of4 {
    float: left;
    width: 75%; } }

/*
 * Portrait tablet to landscape
 */
@media (min-width: 768px) and (max-width: 1029px) {
  .t-all {
    float: left;
    width: 100%;
    padding-right: 0; }

  .t-1of2 {
    float: left;
    width: 50%; }

  .t-1of3 {
    float: left;
    width: 33.33%; }

  .t-2of3 {
    float: left;
    width: 66.66%; }

  .t-1of4 {
    float: left;
    width: 25%; }

  .t-3of4 {
    float: left;
    width: 75%; }

  .t-1of5 {
    float: left;
    width: 20%; }

  .t-2of5 {
    float: left;
    width: 40%; }

  .t-3of5 {
    float: left;
    width: 60%; }

  .t-4of5 {
    float: left;
    width: 80%; } }

/*
 * Landscape to small desktop
 */
@media (min-width: 1030px) {
  .d-all {
    float: left;
    width: 100%;
    padding-right: 0; }

  .d-1of2 {
    float: left;
    width: 50%; }

  .d-1of3 {
    float: left;
    width: 33.33%; }

  .d-2of3 {
    float: left;
    width: 66.66%; }

  .d-1of4 {
    float: left;
    width: 25%; }

  .d-3of4 {
    float: left;
    width: 75%; }

  .d-1of5 {
    float: left;
    width: 20%; }

  .d-2of5 {
    float: left;
    width: 40%; }

  .d-3of5 {
    float: left;
    width: 60%; }

  .d-4of5 {
    float: left;
    width: 80%; }

  .d-1of6 {
    float: left;
    width: 16.667%; }

  .d-1of7 {
    float: left;
    width: 14.286%; }

  .d-2of7 {
    float: left;
    width: 28.571%; }

  .d-3of7 {
    float: left;
    width: 42.857%; }

  .d-4of7 {
    float: left;
    width: 57.143%; }

  .d-5of7 {
    float: left;
    width: 71.429%; }

  .d-6of7 {
    float: left;
    width: 85.714%; }

  .d-1of8 {
    float: left;
    width: 12.5%; }

  .d-1of9 {
    float: left;
    width: 11.111%; }

  .d-1of10 {
    float: left;
    width: 10%; }

  .d-1of11 {
    float: left;
    width: 9.091%; }

  .d-1of12 {
    float: left;
    width: 8.33%; } }

/*
 * ********************
 * 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.
 * ********************
 */
/*
 * *****************************************************************
 * 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 {
  margin: 10px;
  padding: 5px 18px;
  border: 1px solid; }

.alert-help {
  border-color: #e8dc59;
  background: #ebe16f; }

.alert-info {
  border-color: #bfe4f4;
  background: #d5edf8; }

.alert-error {
  border-color: #f8cdce;
  background: #fbe3e4; }

.alert-success {
  border-color: #deeaae;
  background: #e6efc2; }

/*
 * *****************************************************************
 * 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
 * 
 * ********************
 */
.blue-btn,
.comment-reply-link,
#submit {
  display: inline-block;
  position: relative;
  font-family: Helvetica, Arial, sans-serif;
  text-decoration: none;
  color: white;
  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; }
  .blue-btn:hover,
  .blue-btn:focus,
  .comment-reply-link:hover,
  #submit:hover,
  .comment-reply-link:focus,
  #submit:focus {
    color: white;
    text-decoration: none; }
  .blue-btn:active,
  .comment-reply-link:active,
  #submit: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.
 */
.blue-btn,
.comment-reply-link,
#submit {
  background-color: #41392e; }
  .blue-btn:hover,
  .blue-btn:focus,
  .comment-reply-link:hover,
  #submit:hover,
  .comment-reply-link:focus,
  #submit:focus {
    background-color: #352f26; }
  .blue-btn:active,
  .comment-reply-link:active,
  #submit:active {
    background-color: #322c23; }

/*
 * *****************************************************************
 * 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
 * ********************
 */
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: #41392e;
  border-radius: 3px;
  vertical-align: middle;
  box-shadow: none;
  border: 0;
  width: 100%;
  max-width: 400px;
  font-family: false;
  background-color: #eaedf2;
  -webkit-", "transition: background-color 0.24s ease-in-out; }
  input[type="text"]:focus,
  input[type="password"]:focus,
  input[type="datetime"]:focus,
  input[type="datetime-local"]:focus,
  input[type="date"]:focus,
  input[type="month"]:focus,
  input[type="time"]:focus,
  input[type="week"]:focus,
  input[type="number"]:focus,
  input[type="email"]:focus,
  input[type="url"]:focus,
  input[type="search"]:focus,
  input[type="tel"]:focus,
  input[type="color"]:focus,
  select:focus,
  textarea:focus,
  .field:focus,
  input[type="text"]:active,
  input[type="password"]:active,
  input[type="datetime"]:active,
  input[type="datetime-local"]:active,
  input[type="date"]:active,
  input[type="month"]:active,
  input[type="time"]:active,
  input[type="week"]:active,
  input[type="number"]:active,
  input[type="email"]:active,
  input[type="url"]:active,
  input[type="search"]:active,
  input[type="tel"]:active,
  input[type="color"]:active,
  select:active,
  textarea:active,
  .field:active {
    background-color: #f7f8fa; }
  input[type="text"].error,
  input[type="password"].error,
  input[type="datetime"].error,
  input[type="datetime-local"].error,
  input[type="date"].error,
  input[type="month"].error,
  input[type="time"].error,
  input[type="week"].error,
  input[type="number"].error,
  input[type="email"].error,
  input[type="url"].error,
  input[type="search"].error,
  input[type="tel"].error,
  input[type="color"].error,
  select.error,
  textarea.error,
  .field.error,
  input[type="text"].is-invalid,
  input[type="password"].is-invalid,
  input[type="datetime"].is-invalid,
  input[type="datetime-local"].is-invalid,
  input[type="date"].is-invalid,
  input[type="month"].is-invalid,
  input[type="time"].is-invalid,
  input[type="week"].is-invalid,
  input[type="number"].is-invalid,
  input[type="email"].is-invalid,
  input[type="url"].is-invalid,
  input[type="search"].is-invalid,
  input[type="tel"].is-invalid,
  input[type="color"].is-invalid,
  select.is-invalid,
  textarea.is-invalid,
  .field.is-invalid {
    color: #fbe3e4;
    border-color: #fbe3e4;
    background-color: white;
    background-position: 99% center;
    background-repeat: no-repeat;
    background-image: ();
    outline-color: #fbe3e4; }

  input[type="text"].success,
  input[type="password"].success,
  input[type="datetime"].success,
  input[type="datetime-local"].success,
  input[type="date"].success,
  input[type="month"].success,
  input[type="time"].success,
  input[type="week"].success,
  input[type="number"].success,
  input[type="email"].success,
  input[type="url"].success,
  input[type="search"].success,
  input[type="tel"].success,
  input[type="color"].success,
  select.success,
  textarea.success,
  .field.success,
  input[type="text"].is-valid,
  input[type="password"].is-valid,
  input[type="datetime"].is-valid,
  input[type="datetime-local"].is-valid,
  input[type="date"].is-valid,
  input[type="month"].is-valid,
  input[type="time"].is-valid,
  input[type="week"].is-valid,
  input[type="number"].is-valid,
  input[type="email"].is-valid,
  input[type="url"].is-valid,
  input[type="search"].is-valid,
  input[type="tel"].is-valid,
  input[type="color"].is-valid,
  select.is-valid,
  textarea.is-valid,
  .field.is-valid {
    color: #e6efc2;
    border-color: #e6efc2;
    background-color: white;
    background-position: 99% center;
    background-repeat: no-repeat;
    background-image: (); }

  input[type="text"][disabled],
  input[type="password"][disabled],
  input[type="datetime"][disabled],
  input[type="datetime-local"][disabled],
  input[type="date"][disabled],
  input[type="month"][disabled],
  input[type="time"][disabled],
  input[type="week"][disabled],
  input[type="number"][disabled],
  input[type="email"][disabled],
  input[type="url"][disabled],
  input[type="search"][disabled],
  input[type="tel"][disabled],
  input[type="color"][disabled],
  select[disabled],
  textarea[disabled],
  .field[disabled],
  input[type="text"].is-disabled,
  input[type="password"].is-disabled,
  input[type="datetime"].is-disabled,
  input[type="datetime-local"].is-disabled,
  input[type="date"].is-disabled,
  input[type="month"].is-disabled,
  input[type="time"].is-disabled,
  input[type="week"].is-disabled,
  input[type="number"].is-disabled,
  input[type="email"].is-disabled,
  input[type="url"].is-disabled,
  input[type="search"].is-disabled,
  input[type="tel"].is-disabled,
  input[type="color"].is-disabled,
  select.is-disabled,
  textarea.is-disabled,
  .field.is-disabled {
    cursor: false;
    border-color: #cfcfcf;
    opacity: 0.6; }
    input[type="text"][disabled]:focus,
    input[type="password"][disabled]:focus,
    input[type="datetime"][disabled]:focus,
    input[type="datetime-local"][disabled]:focus,
    input[type="date"][disabled]:focus,
    input[type="month"][disabled]:focus,
    input[type="time"][disabled]:focus,
    input[type="week"][disabled]:focus,
    input[type="number"][disabled]:focus,
    input[type="email"][disabled]:focus,
    input[type="url"][disabled]:focus,
    input[type="search"][disabled]:focus,
    input[type="tel"][disabled]:focus,
    input[type="color"][disabled]:focus,
    select[disabled]:focus,
    textarea[disabled]:focus,
    .field[disabled]:focus,
    input[type="text"].is-disabled:focus,
    input[type="password"].is-disabled:focus,
    input[type="datetime"].is-disabled:focus,
    input[type="datetime-local"].is-disabled:focus,
    input[type="date"].is-disabled:focus,
    input[type="month"].is-disabled:focus,
    input[type="time"].is-disabled:focus,
    input[type="week"].is-disabled:focus,
    input[type="number"].is-disabled:focus,
    input[type="email"].is-disabled:focus,
    input[type="url"].is-disabled:focus,
    input[type="search"].is-disabled:focus,
    input[type="tel"].is-disabled:focus,
    input[type="color"].is-disabled:focus,
    select.is-disabled:focus,
    textarea.is-disabled:focus,
    .field.is-disabled:focus,
    input[type="text"][disabled]:active,
    input[type="password"][disabled]:active,
    input[type="datetime"][disabled]:active,
    input[type="datetime-local"][disabled]:active,
    input[type="date"][disabled]:active,
    input[type="month"][disabled]:active,
    input[type="time"][disabled]:active,
    input[type="week"][disabled]:active,
    input[type="number"][disabled]:active,
    input[type="email"][disabled]:active,
    input[type="url"][disabled]:active,
    input[type="search"][disabled]:active,
    input[type="tel"][disabled]:active,
    input[type="color"][disabled]:active,
    select[disabled]:active,
    textarea[disabled]:active,
    .field[disabled]:active,
    input[type="text"].is-disabled:active,
    input[type="password"].is-disabled:active,
    input[type="datetime"].is-disabled:active,
    input[type="datetime-local"].is-disabled:active,
    input[type="date"].is-disabled:active,
    input[type="month"].is-disabled:active,
    input[type="time"].is-disabled:active,
    input[type="week"].is-disabled:active,
    input[type="number"].is-disabled:active,
    input[type="email"].is-disabled:active,
    input[type="url"].is-disabled:active,
    input[type="search"].is-disabled:active,
    input[type="tel"].is-disabled:active,
    input[type="color"].is-disabled:active,
    select.is-disabled:active,
    textarea.is-disabled:active,
    .field.is-disabled:active {
      background-color: #d5edf8; }

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

select {
  -webkit-appearance: none;
    /*
   * 1
   */
  background-image: ();
  background-position: 97.5% center; }


/*
 * ********************
 * 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:
 * Author:
 * 
 * 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
 * ********************
 */
body {
  font-family: Helvetica, Arial, sans-serif;
  font-size: 100%;
  font-size: 15px;
  line-height: 1.4;
  color: #41392e;
  background: url('/wp-content/themes/bigbedelia/library/images/bg.jpg') top center fixed;
  -webkit-font-smoothing: antialiased; }

/*
 * *******************
 * WORDPRESS BODY CLASSES
 * style a page via class
 * *******************
 */

/*
 * for sites that are read right to left (i.e. hebrew)
 */
body.home {
  background: black; }
  body.home #content {
    margin: 0; }
  body.home footer .copyright {
    color: #fefef2; }
  body.home .no-break {
    width: 150px;
    margin: 0 auto; }
  body.home .entry-content {
    padding: 0; }
  body.home .entry-content img {
    padding: 1em; }
  body.home .entry-content img:hover {
    background: rgba(255, 255, 255, 0.1); }
  body.home .back-to-top {
    display: none; }

/*
 * home page
 */

/*
 * blog template page
 */

/*
 * archive page
 */

/*
 * date archive page
 */

/*
 * replace the number to the corresponding page number
 */

/*
 * search page
 */

/*
 * search result page
 */

/*
 * no results search page
 */

/*
 * individual paged search (i.e. body.search-paged-3)
 */

/*
 * 404 page
 */

/*
 * single post page
 */

/*
 * individual post page by id (i.e. body.postid-73)
 */

/*
 * individual paged single (i.e. body.single-paged-3)
 */

/*
 * attatchment page
 */

/*
 * individual attatchment page (i.e. body.attachmentid-763)
 */

/*
 * style mime type pages
 */

/*
 * author page
 */

/*
 * user nicename (i.e. body.author-samueladams)
 */

/*
 * paged author archives (i.e. body.author-paged-4) for page 4
 */
  .page .no-break {
    width: 150px;
    margin: 0 auto; }


/*
 * category page
 */

/*
 * individual category page (i.e. body.category-6)
 */

/*
 * replace the number to the corresponding page number
 */

/*
 * tag page
 */

/*
 * individual tag page (i.e. body.tag-news)
 */

/*
 * replace the number to the corresponding page number
 */

/*
 * custom page template page
 */

/*
 * individual page template (i.e. body.page-template-contact-php
 */

/*
 * replace the number to the corresponding page number
 */

/*
 * parent page template
 */

/*
 * child page template
 */

/*
 * replace the number to the corresponding page number
 */

/*
 * if user is logged in
 */

/*
 * paged items like search results or archives
 */

/*
 * individual paged (i.e. body.paged-3)
 */
/*
 * ********************
 * LAYOUT & GRID STYLES
 * ********************
 */
.wrap {
  width: 96%;
  margin: 0 auto; }

/*
 * ********************
 * LINK STYLES
 * ********************
 */
a,
a:visited {
  color: #fefef2;
  text-decoration: none;
    /*
   * on hover
   */
    /*
   * on click
   */
    /*
   * mobile tap color
   */ }
  a:hover,
  a:visited:hover,
  a:focus,
  a:visited:focus {
    color: #41392e; }

  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
 * *****************************************************************
 */
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5 {
  text-rendering: optimizelegibility;
  font-weight: 400;
    /*
   * 
   * if you're going to use webfonts, be sure to check your weights
   * http://css-tricks.com/watch-your-font-weight/
   */
    /*
   * removing text decoration from all headline links
   */ }
  h1 a,
  .h1 a,
  h2 a,
  .h2 a,
  h3 a,
  .h3 a,
  h4 a,
  .h4 a,
  h5 a,
  .h5 a {
    text-decoration: none; }

h1,
h2,
h3 {
  font-family: 'Oswald';
  text-transform: uppercase; }

h1,
.h1 {
  font-size: 32px;
  line-height: 1.5em; }

h2,
.h2 {
  font-size: 1.75em;
  line-height: 1.4em;
  margin-bottom: 0.375em; }

h3,
.h3 {
  font-size: 1.125em; }

h4,
.h4 {
  font-size: 1.1em; }

h5,
.h5 {
  font-size: 0.846em;
  line-height: 2.09em;
  text-transform: uppercase;
  letter-spacing: 2px; }

/*
 * ********************
 * HEADER STYLES
 * ********************
 */
.home .header {
  display: none; }


#logo {
  margin: 0.75em; }
  #logo a {
    display: block;
    margin: 0 auto;
    width: 249px;
    height: 96px;
    text-indent: -9999px;
    background: url('/wp-content/themes/bigbedelia/library/images/logo.png') no-repeat; }
    #logo a:hover {
      opacity: 0.8; }

/*
 * ********************
 * NAVIGATION STYLES
 * ********************
 */
/*
 * 
 * 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.
 */
#menu-toggle {
  display: block;
  text-transform: uppercase;
  font-weight: bold;
  font-size: 24px;
  text-align: center; }
  #menu-toggle span {
    margin-left: 10px;
    display: inline-block;
    width: 17px;
    height: 17px;
    background: url('/wp-content/themes/bigbedelia/library/images/menu.png') left; }
  #menu-toggle:hover span {
    background-position: right; }

.nav {
  border-bottom: 0;
  margin: 0;
    /*
   * end .menu li
   */
    /*
   * highlight current page
   */
    /*
   * end current highlighters
   */ }
  .nav li {
        /*
     * 
     * so you really have to rethink your dropdowns for mobile.
     * you don't want to have it expand too much because the
     * screen is so small. How you manage your menu should
     * depend on the project. Here's some great info on it:
     * http://www.alistapart.com/articles/organizing-mobile/
     */ }
    .nav li a {
      text-transform: uppercase;
      font-weight: bold;
      font-size: 24px;
      display: block;
      text-align: center;
      text-decoration: none;
      padding: 0.25em;
            /*
       * 
       * remember this is for mobile ONLY, so there's no need
       * to even declare hover styles here, you can do it in
       * the style.scss file where it's relevant. We want to
       * keep this file as small as possible!
       */ }
      .nav li a:hover,
      .nav li a:focus {
        color: #41392e; }
    .nav li ul.sub-menu,
    .nav li ul.children {
      position: relative;
      z-index: 9000;
      display: none; }
        .nav li ul.sub-menu li a,
        .nav li ul.children li a {
          padding-left: 30px; }

    .nav li.current-menu-item a,
    .nav li.current_page_item a,
    .nav li.current-page-ancestor a {
      color: #313f26; }
    .nav li.current-menu-item .sub-menu a,
    .nav li.current-menu-item .children a,
    .nav li.current_page_item .sub-menu a,
    .nav li.current_page_item .children a,
    .nav li.current-page-ancestor .sub-menu a,
    .nav li.current-page-ancestor .children a {
      color: #fefef2; }
      .nav li.current-menu-item .sub-menu a:hover,
      .nav li.current-menu-item .children a:hover,
      .nav li.current_page_item .sub-menu a:hover,
      .nav li.current_page_item .children a:hover,
      .nav li.current-page-ancestor .sub-menu a:hover,
      .nav li.current-page-ancestor .children a:hover {
        color: #41392e; }

/*
 * end .nav
 */
/*
 * ********************
 * POSTS & CONTENT STYLES
 * ********************
 */
  #post-list li {
    padding: 10px; }
    #post-list li a {
      overflow: hidden;
      display: block;
      padding: 1em 2em;
      background: rgba(0, 0, 0, 0.8);
      color: white;
      text-decoration: none;
      opacity: 0; }
      #post-list li a h2 {
        margin: 0.375em 0;
        text-align: center; }
    #post-list li .st_sharethis_large {
      display: none; }
  #post-list .no-bg a {
    opacity: 1;
    background: none;
    color: #313f26; }
    #post-list .no-bg a:hover {
      background: rgba(0, 0, 0, 0.8);
      color: white; }

.page-number-top {
  display: block;
  float: right;
  font-family: "Oswald";
  font-weight: 300;
  font-size: 19px;
  color: #41392e;
  background: rgba(255, 255, 255, 0.2);
  padding: 2px 6px;
  margin-right: 0.2em;
  margin-bottom: -0.5em; }

#content {
  margin-top: 1.5em; }

.hentry {
  margin-bottom: 1.5em; }
  .hentry header {
    padding: 0 1.5em; }
  .hentry footer {
    padding: 1.5em; }
    .hentry footer p {
      margin: 0; }

/*
 * end .hentry
 */
.single-title,
.page-title,
.entry-title {
  margin: 0; }



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


/*
 * want to style individual post classes? Booya!
 */

/*
 * post by id (i.e. post-3)
 */

/*
 * general post style
 */

/*
 * general article on a page style
 */

/*
 * general style on an attatchment
 */

/*
 * sticky post style
 */

/*
 * hentry class
 */

/*
 * style by category (i.e. category-videos)
 */

/*
 * style by tag (i.e. tag-news)
 */
/*
 * post meta
 */
.byline {
  font-style: italic;
  margin: 0; }


/*
 * entry content
 */
.entry-content {
  padding: 1.5em 1.5em 0;
    /*
   * 
   * 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 h1 {
    text-align: center; }
  .entry-content p {
    margin: 0 0 1em; }




  .entry-content table {
    width: 100%;
    border: 1px solid #eaedf2;
    margin-bottom: 1.5em; }
    .entry-content table caption {
      margin: 0 0 7px;
      font-size: 0.75em;
      text-transform: uppercase;
      letter-spacing: 1px; }
  .entry-content tr {
    border-bottom: 1px solid #eaedf2; }
    .entry-content tr:nth-child(even) {
      background-color: #f8f9fa; }
  .entry-content td {
    padding: 7px;
    border-right: 1px solid #eaedf2; }
    .entry-content td:last-child {
      border-right: 0; }
  .entry-content th {
    background-color: #f8f9fa;
    border-bottom: 1px solid #eaedf2;
    border-right: 1px solid #eaedf2; }
    .entry-content th:last-child {
      border-right: 0; }
  .entry-content blockquote {
    background: rgba(242, 241, 223, 0.5);
    margin: 0 0 1em 0;
    padding: 1.5em; }


  .entry-content dd {
    margin-left: 0;
    font-size: 0.9em;
    color: #787878;
    margin-bottom: 1.5em; }
  .entry-content img {
    margin: 0 0 1.5em 0;
    max-width: 100%;
    height: auto; }


  .entry-content .size-auto,
  .entry-content .size-full,
  .entry-content .size-large,
  .entry-content .size-medium,
  .entry-content .size-thumbnail {
    max-width: 100%;
    height: auto; }
  .entry-content pre {
    background: black;
    color: #f8f9fa;
    font-size: 0.9em;
    padding: 1.5em;
    margin: 0 0 1.5em;
    border-radius: 3px; }

/*
 * end .entry-content
 */
.wp-caption {
  max-width: 100%;
    /*
   * images inside wp-caption
   */ }
  .wp-caption img {
    max-width: 100%;
    margin-bottom: 0;
    width: 100%; }
  .wp-caption p.wp-caption-text {
    font-size: 0.85em;
    margin: 4px 0 7px;
    text-align: right;
    font-style: italic; }

/*
 * end .wp-caption
 */
/*
 * image gallery styles
 */



/*
 * end .gallery
 */
/*
 * gallery caption styles
 */





.tags {
  margin: 0; }

/*
 * *****************************************************************
 * PAGE NAVI STYLES
 * *****************************************************************
 */
.page-links {
  margin: -20px 0;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase; }
  .page-links a,
  .page-links span {
    display: inline-block;
    padding: 0 2px;
    vertical-align: middle; }
  .page-links span {
    padding-top: 6px; }
  .page-links a {
    font-size: 60px;
    text-decoration: none;
    width: 40px; }

.pagination,
.wp-prev-next {
  margin: 1.5em 0; }

.pagination {
  text-align: center; }
  .pagination ul {
    display: inline-block;
    background-color: white;
    white-space: nowrap;
    padding: 0;
    clear: both;
    border-radius: 3px; }
  .pagination li {
    padding: 0;
    margin: 0;
    float: left;
    display: inline;
    overflow: hidden;
    border-right: 1px solid #eaedf2; }
  .pagination a,
  .pagination span {
    margin: 0;
    text-decoration: none;
    padding: 0;
    line-height: 1em;
    font-size: 1em;
    font-weight: normal;
    padding: 0.75em;
    min-width: 1em;
    display: block;
    color: #41392e; }
    .pagination a:hover,
    .pagination span:hover,
    .pagination a:focus,
    .pagination span:focus {
      background-color: #41392e;
      color: white; }
  .pagination .current {
    cursor: default;
    color: #41392e;
    font-weight: bold; }
    .pagination .current:hover,
    .pagination .current:focus {
      background-color: white;
      color: #41392e; }

/*
 * end .bones_page_navi
 */
/*
 * fallback previous & next links
 */

  .wp-prev-next .prev-link {
    float: left; }
  .wp-prev-next .next-link {
    float: right; }

/*
 * end .wp-prev-next
 */
/*
 * *****************************************************************
 * COMMENT STYLES
 * *****************************************************************
 */
#comment-wrapper {
  background: rgba(255, 255, 255, 0.2);
  margin-top: 2em; }
  #comment-wrapper #comment-switch {
    margin: 0 1.5em;
    font-size: 16px;
    margin-bottom: 1em; }
    #comment-wrapper #comment-switch:hover {
      color: #fefef2; }

/*
 * h3 comment title
 */
#comments-title {
  padding: 0.75em;
  margin: 0;
    /*
   * number of comments span
   */ }




.commentlist {
  margin: 0;
  list-style-type: none; }

.comment {
  position: relative;
  clear: both;
  overflow: hidden;
  padding: 1.5em;
    /*
   * vcard
   */
    /*
   * end .commentlist .vcard
   */
    /*
   * end children
   */
    /*
   * general comment classes
   */ }
  .comment .comment-author {
    padding: 7px;
    border: 0; }
    .comment .vcard cite.fn {
      font-weight: 700;
      font-style: normal; }
    .comment .vcard time {
      display: block;
      font-size: 0.9em;
      font-style: italic; }
      .comment .vcard time a {
        text-decoration: none; }
        .comment .vcard time a:hover {
          text-decoration: underline; }
    .comment .vcard .avatar {
      display: none; }
  .comment:last-child {
    margin-bottom: 0; }
  .comment .children {
    margin: 0;
        /*
     * variations
     */
        /*
     * change number for different depth
     */ }



  .comment[class*=depth-] {
    margin-top: 1.1em; }
  .comment.depth-1 {
    margin-left: 0;
    margin-top: 0; }
  .comment:not(.depth-1) {
    margin-top: 0;
    margin-left: 7px;
    padding: 7px; }



  .comment.odd {
    background-color: rgba(0, 0, 0, 0.05); }
  .comment.even {
    background: rgba(0, 0, 0, 0.1); }






/*
 * comment meta
 */




/*
 * comment content
 */
  .comment_content p {
    margin: 0.734em 0 1.5em;
    font-size: 1em;
    line-height: 1.5em; }

/*
 * end .commentlist .comment_content
 */
/*
 * comment reply link
 */
.comment-reply-link {
  font-size: 0.9em;
  float: right; }


/*
 * end .commentlist .comment-reply-link
 */
/*
 * edit comment link
 */
.comment-edit-link {
  font-style: italic;
  margin: 0 7px 0 0;
  text-decoration: none;
  font-size: 0.9em; }

/*
 * *****************************************************************
 * COMMENT FORM STYLES
 * *****************************************************************
 */
.comment-respond {
  padding: 1.5em; }

#reply-title {
  margin: 0; }

.logged-in-as {
  font-style: italic;
  margin: 0; }
  .logged-in-as a {
    color: #41392e; }

.comment-form-comment {
  margin: 1.5em 0 0.75em; }

.form-allowed-tags {
  padding: 1.5em;
  background-color: #f8f9fa;
  font-size: 0.9em; }

/*
 * comment submit button
 */
#submit {
  float: right;
  font-size: 1em; }

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

/*
 * cancel comment reply link
 */


/*
 * logged in comments
 */

/*
 * allowed tags
 */
#allowed_tags {
  margin: 1.5em 10px 0.734em 0; }

/*
 * no comments
 */
.nocomments {
  margin: 0 20px 1.1em; }

/*
 * ********************
 * SIDEBARS & ASIDES
 * ********************
 */


    .widget ul li {
            /*
       * deep nesting
       */ }


.no-widgets {
  background-color: white;
  padding: 1.5em;
  text-align: center;
  border: 1px solid #cccccc;
  border-radius: 2px;
  margin-bottom: 1.5em; }

/*
 * ********************
 * FOOTER STYLES
 * ********************
 */
.footer {
  width: 100%;
  clear: both; }

/*
 * 
 * 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
 */
.copyright {
  text-align: center; }
  .copyright span {
    display: block;
    font-size: 0.85em; }

#mailchimp-popup {
  display: none;
  background: rgba(0, 0, 0, 0.3);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9001; }
  #mailchimp-popup form {
    position: relative;
    top: 23%;
    margin: auto;
    width: 300px;
    padding: 40px;
    background: white; }
  #mailchimp-popup h3 {
    margin: 0;
    margin-bottom: 20px;
    text-transform: uppercase;
    font-size: 21px; }

.signup {
  text-align: center; }

#signup {
  display: inline-block;
  cursor: pointer;
  background: #41392e;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-weight: bold; }

#close {
  display: block;
  position: absolute;
  background: url('/wp-content/themes/bigbedelia/library/images/close.png') no-repeat;
  width: 20px;
  height: 20px;
  text-indent: -9999px;
  cursor: pointer;
  top: -10px;
  right: -10px; }

#submit {
  float: none; }

.st_facebook_large .stLarge {
  background-image: url('/wp-content/themes/bigbedelia/library/images/facebook.png') !important;
  margin-left: -15px; }
  .st_facebook_large .stLarge:hover {
    background-image: url('/wp-content/themes/bigbedelia/library/images/facebook-over.png') !important; }

.st_twitter_large .stLarge {
  background-image: url('/wp-content/themes/bigbedelia/library/images/twitter.png') !important; }
  .st_twitter_large .stLarge:hover {
    background-image: url('/wp-content/themes/bigbedelia/library/images/twitter-over.png') !important; }

.st_tumblr_large .stLarge {
  background-image: url('/wp-content/themes/bigbedelia/library/images/tumblr.png') !important; }
  .st_tumblr_large .stLarge:hover {
    background-image: url('/wp-content/themes/bigbedelia/library/images/tumblr-over.png') !important; }

.st_sharethis_large .stLarge {
  background-image: url('/wp-content/themes/bigbedelia/library/images/sharethis.png') !important; }
  .st_sharethis_large .stLarge:hover {
    background-image: url('/wp-content/themes/bigbedelia/library/images/sharethis-over.png') !important; }

.back-to-top {
  position: fixed;
  z-index: 8000;
  bottom: 0px;
  right: 0px;
  display: none; }

.back-to-top a {
  display: block;
  padding: 10px;
  background: rgba(0, 0, 0, 0.5);
  text-decoration: none; }

.back-to-top a:hover {
  background: rgba(0, 0, 0, 0.8);
  color: #fefef2; }

#smithereens-nav {
  display: none; }

#ZoomBox {
  z-index: 9000 !important; }

  .signoff:after {
    display: inline-block;
    content: " ";
    width: 21px;
    height: 21px;
    margin-bottom: -5px;
    margin-left: 4px;
    background-image: url('/wp-content/themes/bigbedelia/library/images/signoff.png');
    background-size: cover; }

.next-post,
.prev-post {
  text-align: center; }
  .next-post a,
  .prev-post a {
    display: inline-block;
    margin: -20px 0 -20px 4px;
    font-size: 60px;
    -ms-transform: rotate(90deg);
        /*
     * IE 9
     */
    -webkit-transform: rotate(90deg);
        /*
     * Chrome, Safari, Opera
     */
    transform: rotate(90deg); }

/*
 * ********************
 * 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: 481px) {
  /*
 * *****************************************************************
 * Site Name:
 * Author:
 * 
 * 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.
 * 
 * *****************************************************************
 */
/*
 * 
 * IMPORTANT NOTE ABOUT SASS 3.3 & UP
 * You can't use @extend within media queries
 * anymore, so just be aware that if you drop
 * them in here, they won't work.
 */
/*
 * ********************
 * NAVIGATION STYLES
 * ********************
 */

/*
 * .menu is clearfixed inside mixins.scss
 */
.menu {
    /*
   * end .menu ul
   */ }
  .menu ul {
        /*
     * end .menu ul li
     */
        /*
     * highlight current page
     */
        /*
     * end current highlighters
     */ }
    .menu ul li {
            /*
       * 
       * plan your menus and drop-downs wisely.
       */ }
      .menu ul li a {
                /*
         * 
         * you can use hover styles here even though this size
         * has the possibility of being a mobile device.
         */ }
        .menu ul li a:hover,
        .menu ul li a:focus {
          color: #313f26; }



/*
 * end .menu
 */
/*
 * ********************
 * 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
 * ********************
 */
/*
 * 
 * check your menus here. do they look good?
 * do they need tweaking?
 */


/*
 * end .footer-links
 */ }

/*
 * ********************
 * 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: 768px) {
  /*
 * *****************************************************************
 * Site Name:
 * Author:
 * 
 * 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 {
  padding-top: 142px; }

body.home {
  padding: 0; }

/*
 * ********************
 * LAYOUT & GRID STYLES
 * ********************
 */
.wrap {
  width: 760px; }

/*
 * ********************
 * HEADER STYLES
 * ********************
 */
.header {
  width: 100%;
  position: fixed;
  top: 0;
  background: url('/wp-content/themes/bigbedelia/library/images/bg.jpg') top center;
  z-index: 8999;
  height: 142px; }

#logo {
  margin-bottom: 0.75em; }

#logo a {
  position: relative;
  z-index: 8000;
  background-size: 80%;
  background-position: center; }

.nav {
  margin-top: -92px; }
  .nav li a {
    font-size: 18px;
    padding: 0.25em 0.4em; }
    .nav .menu-item-object-page:nth-child(1) {
      margin-left: 12px; }
    .nav .menu-item-object-page:nth-child(2) {
      margin-right: 120px; }
    .nav .menu-item-object-page:nth-child(3) {
      margin-left: 120px; }


/*
 * ********************
 * NAVIGATION STYLES
 * ********************
 */
#menu-item-13 .sub-menu {
  left: -24px; }

#menu-item-14 .sub-menu {
  left: -10px; }

#menu-toggle {
  display: none; }

.nav {
  border: 0;
  text-align: center;
    /*
   * end .menu ul li
   */
    /*
   * highlight current page
   */
    /*
   * end current highlighters
   */ }
  .nav ul {
    margin-top: 0; }
  .nav li {
    display: inline-block;
    position: relative;
        /*
     * 
     * plan your menus and drop-downs wisely.
     */
        /*
     * showing sub-menus
     */ }
    .nav li a {
      border-bottom: 0;
            /*
       * 
       * you can use hover styles here even though this size
       * has the possibility of being a mobile device.
       */ }

    .nav li ul.sub-menu,
    .nav li ul.children {
      display: block;
      margin-top: 0;
      background: #d8e6cd;
      border-top: 0;
      position: absolute;
      overflow: hidden;
      visibility: hidden;
      z-index: 8000;
            /*
       * highlight sub-menu current page
       */ }
      .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.
         */ }
        .nav li ul.sub-menu li a,
        .nav li ul.children li a {
          font-size: 18px;
          padding-left: 10px;
          border-right: 0;
          display: block;
          width: 160px;
          border-bottom: 1px solid #cde5cd; }
          .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;
      overflow: visible;
      visibility: visible; }


/*
 * end .nav
 */
/*
 * ********************
 * CONTENT
 * ********************
 */
      #post-list li a:hover {
        opacity: 1; }

.entry-content {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto; }

.article-header,
.article-footer,
#comment-wrapper {
  max-width: 650px;
  margin-left: auto;
  margin-right: auto; }

/*
 * ********************
 * SIDEBARS & ASIDES
 * ********************
 */
.sidebar {
  margin-top: 2.2em; }

.widgettitle {
  border-bottom: 2px solid #444444;
  margin-bottom: 0.75em; }

.widget {
  padding: 0 10px;
  margin: 2.2em 0; }
    .widget ul li {
      margin-bottom: 0.75em;
            /*
       * deep nesting
       */ }
      .widget ul li ul {
        margin-top: 0.75em;
        padding-left: 1em; }

/*
 * links widget
 */




/*
 * meta widget
 */




/*
 * pages widget
 */




/*
 * recent-posts widget
 */




/*
 * archives widget
 */






/*
 * tag-cloud widget
 */







/*
 * calendar widget
 */












/*
 * category widget
 */













/*
 * recent-comments widget
 */





/*
 * search widget
 */



/*
 * text widget
 */



/*
 * ********************
 * 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-links ul li {
            /*
       * 
       * be careful with the depth of your menus.
       * it's very rare to have multi-depth menus in
       * the footer.
       */ }


/*
 * end .footer-links
 */ }

/*
 * ********************
 * 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: 1030px) {
  /*
 * *****************************************************************
 * Site Name:
 * Author:
 * 
 * Stylesheet: Desktop Stylsheet
 * 
 * This is the desktop size. It's larger than an iPad so it will only
 * be seen on the Desktop.
 * 
 * *****************************************************************
 */
.wrap {
  width: 1040px; }

.hentry header {
  padding: 0; }

#menu-item-13 .sub-menu {
  left: -20px; }

#menu-item-14 .sub-menu {
  left: -5px; }

.nav li ul.sub-menu li a {
  width: 180px; }

#logo a {
  background-size: 100%; }

.nav {
  margin-top: -102px; }
  .nav li a {
    font-size: 24px; }
    .nav .menu-item-object-page:nth-child(1) {
      margin-left: 16px; }
    .nav .menu-item-object-page:nth-child(2) {
      margin-right: 115px; }
    .nav .menu-item-object-page:nth-child(3) {
      margin-left: 170px; } }

/*
 * ********************
 * LARGE VIEWING SIZE
 * This is for the larger monitors and possibly full screen viewers.
 * ********************
 */
@media only screen and (min-width: 1240px) {
  /*
 * *****************************************************************
 * Site Name:
 * Author:
 * 
 * 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:
 * Author:
 * 
 * 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.
 */ }

/*
 * ********************
 * 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:
 * Author:
 * 
 * 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: #444444 !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 #999999;
  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; } }