/*********************
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: 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: 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? */
/*********************
ANIMATION
*********************/
/*********************
CIRCLE & TRIANGLE
*********************/
/*********************
MEDIA QUERIES
*********************/
/******************************************************************
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.

******************************************************************/
/*
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 only screen and (max-width: 768px) {
  .m-all {
    float: left;
    padding-right: 0;
    width: 100%; }
  .m-1of2 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .m-1of3 {
    float: left;
    padding-right: 1.5em;
    width: 33.33333%; }
  .m-1of4 {
    float: left;
    padding-right: 1.5em;
    width: 25%; }
  .m-1of5 {
    float: left;
    padding-right: 1.5em;
    width: 20%; }
  .m-1of6 {
    float: left;
    padding-right: 1.5em;
    width: 16.66667%; }
  .m-1of7 {
    float: left;
    padding-right: 1.5em;
    width: 14.28571%; }
  .m-1of8 {
    float: left;
    padding-right: 1.5em;
    width: 12.5%; }
  .m-1of9 {
    float: left;
    padding-right: 1.5em;
    width: 11.11111%; }
  .m-1of10 {
    float: left;
    padding-right: 1.5em;
    width: 10%; }
  .m-1of11 {
    float: left;
    padding-right: 1.5em;
    width: 9.09091%; }
  .m-1of12 {
    float: left;
    padding-right: 1.5em;
    width: 8.33333%; }
  .m-2of3 {
    float: left;
    padding-right: 1.5em;
    width: 66.66667%; }
  .m-2of4 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .m-2of5 {
    float: left;
    padding-right: 1.5em;
    width: 40%; }
  .m-2of6 {
    float: left;
    padding-right: 1.5em;
    width: 33.33333%; }
  .m-2of7 {
    float: left;
    padding-right: 1.5em;
    width: 28.57143%; }
  .m-2of8 {
    float: left;
    padding-right: 1.5em;
    width: 25%; }
  .m-2of9 {
    float: left;
    padding-right: 1.5em;
    width: 22.22222%; }
  .m-2of10 {
    float: left;
    padding-right: 1.5em;
    width: 20%; }
  .m-2of11 {
    float: left;
    padding-right: 1.5em;
    width: 18.18182%; }
  .m-2of12 {
    float: left;
    padding-right: 1.5em;
    width: 16.66667%; }
  .m-3of4 {
    float: left;
    padding-right: 1.5em;
    width: 75%; }
  .m-3of5 {
    float: left;
    padding-right: 1.5em;
    width: 60%; }
  .m-3of6 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .m-3of7 {
    float: left;
    padding-right: 1.5em;
    width: 42.85714%; }
  .m-3of8 {
    float: left;
    padding-right: 1.5em;
    width: 37.5%; }
  .m-3of9 {
    float: left;
    padding-right: 1.5em;
    width: 33.33333%; }
  .m-3of10 {
    float: left;
    padding-right: 1.5em;
    width: 30%; }
  .m-3of11 {
    float: left;
    padding-right: 1.5em;
    width: 27.27273%; }
  .m-3of12 {
    float: left;
    padding-right: 1.5em;
    width: 25%; }
  .m-4of5 {
    float: left;
    padding-right: 1.5em;
    width: 80%; }
  .m-4of6 {
    float: left;
    padding-right: 1.5em;
    width: 66.66667%; }
  .m-4of7 {
    float: left;
    padding-right: 1.5em;
    width: 57.14286%; }
  .m-4of8 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .m-4of9 {
    float: left;
    padding-right: 1.5em;
    width: 44.44444%; }
  .m-4of10 {
    float: left;
    padding-right: 1.5em;
    width: 40%; }
  .m-4of11 {
    float: left;
    padding-right: 1.5em;
    width: 36.36364%; }
  .m-4of12 {
    float: left;
    padding-right: 1.5em;
    width: 33.33333%; }
  .m-5of6 {
    float: left;
    padding-right: 1.5em;
    width: 83.33333%; }
  .m-5of7 {
    float: left;
    padding-right: 1.5em;
    width: 71.42857%; }
  .m-5of8 {
    float: left;
    padding-right: 1.5em;
    width: 62.5%; }
  .m-5of9 {
    float: left;
    padding-right: 1.5em;
    width: 55.55556%; }
  .m-5of10 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .m-5of11 {
    float: left;
    padding-right: 1.5em;
    width: 45.45455%; }
  .m-5of12 {
    float: left;
    padding-right: 1.5em;
    width: 41.66667%; }
  .m-6of7 {
    float: left;
    padding-right: 1.5em;
    width: 85.71429%; }
  .m-6of8 {
    float: left;
    padding-right: 1.5em;
    width: 75%; }
  .m-6of9 {
    float: left;
    padding-right: 1.5em;
    width: 66.66667%; }
  .m-6of10 {
    float: left;
    padding-right: 1.5em;
    width: 60%; }
  .m-6of11 {
    float: left;
    padding-right: 1.5em;
    width: 54.54545%; }
  .m-6of12 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .m-7of8 {
    float: left;
    padding-right: 1.5em;
    width: 87.5%; }
  .m-7of9 {
    float: left;
    padding-right: 1.5em;
    width: 77.77778%; }
  .m-7of10 {
    float: left;
    padding-right: 1.5em;
    width: 70%; }
  .m-7of11 {
    float: left;
    padding-right: 1.5em;
    width: 63.63636%; }
  .m-7of12 {
    float: left;
    padding-right: 1.5em;
    width: 58.33333%; }
  .m-8of9 {
    float: left;
    padding-right: 1.5em;
    width: 88.88889%; }
  .m-8of10 {
    float: left;
    padding-right: 1.5em;
    width: 80%; }
  .m-8of11 {
    float: left;
    padding-right: 1.5em;
    width: 72.72727%; }
  .m-8of12 {
    float: left;
    padding-right: 1.5em;
    width: 66.66667%; }
  .m-9of10 {
    float: left;
    padding-right: 1.5em;
    width: 90%; }
  .m-9of11 {
    float: left;
    padding-right: 1.5em;
    width: 81.81818%; }
  .m-9of12 {
    float: left;
    padding-right: 1.5em;
    width: 75%; }
  .m-10of11 {
    float: left;
    padding-right: 1.5em;
    width: 90.90909%; }
  .m-10of12 {
    float: left;
    padding-right: 1.5em;
    width: 83.33333%; }
  .m-11of12 {
    float: left;
    padding-right: 1.5em;
    width: 91.66667%; } }

@media only screen and (min-width: 481px) and (max-width: 768px) {
  .h-all {
    float: left;
    padding-right: 0;
    width: 100%; }
  .h-1of2 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .h-1of3 {
    float: left;
    padding-right: 1.5em;
    width: 33.33333%; }
  .h-1of4 {
    float: left;
    padding-right: 1.5em;
    width: 25%; }
  .h-1of5 {
    float: left;
    padding-right: 1.5em;
    width: 20%; }
  .h-1of6 {
    float: left;
    padding-right: 1.5em;
    width: 16.66667%; }
  .h-1of7 {
    float: left;
    padding-right: 1.5em;
    width: 14.28571%; }
  .h-1of8 {
    float: left;
    padding-right: 1.5em;
    width: 12.5%; }
  .h-1of9 {
    float: left;
    padding-right: 1.5em;
    width: 11.11111%; }
  .h-1of10 {
    float: left;
    padding-right: 1.5em;
    width: 10%; }
  .h-1of11 {
    float: left;
    padding-right: 1.5em;
    width: 9.09091%; }
  .h-1of12 {
    float: left;
    padding-right: 1.5em;
    width: 8.33333%; }
  .h-2of3 {
    float: left;
    padding-right: 1.5em;
    width: 66.66667%; }
  .h-2of4 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .h-2of5 {
    float: left;
    padding-right: 1.5em;
    width: 40%; }
  .h-2of6 {
    float: left;
    padding-right: 1.5em;
    width: 33.33333%; }
  .h-2of7 {
    float: left;
    padding-right: 1.5em;
    width: 28.57143%; }
  .h-2of8 {
    float: left;
    padding-right: 1.5em;
    width: 25%; }
  .h-2of9 {
    float: left;
    padding-right: 1.5em;
    width: 22.22222%; }
  .h-2of10 {
    float: left;
    padding-right: 1.5em;
    width: 20%; }
  .h-2of11 {
    float: left;
    padding-right: 1.5em;
    width: 18.18182%; }
  .h-2of12 {
    float: left;
    padding-right: 1.5em;
    width: 16.66667%; }
  .h-3of4 {
    float: left;
    padding-right: 1.5em;
    width: 75%; }
  .h-3of5 {
    float: left;
    padding-right: 1.5em;
    width: 60%; }
  .h-3of6 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .h-3of7 {
    float: left;
    padding-right: 1.5em;
    width: 42.85714%; }
  .h-3of8 {
    float: left;
    padding-right: 1.5em;
    width: 37.5%; }
  .h-3of9 {
    float: left;
    padding-right: 1.5em;
    width: 33.33333%; }
  .h-3of10 {
    float: left;
    padding-right: 1.5em;
    width: 30%; }
  .h-3of11 {
    float: left;
    padding-right: 1.5em;
    width: 27.27273%; }
  .h-3of12 {
    float: left;
    padding-right: 1.5em;
    width: 25%; }
  .h-4of5 {
    float: left;
    padding-right: 1.5em;
    width: 80%; }
  .h-4of6 {
    float: left;
    padding-right: 1.5em;
    width: 66.66667%; }
  .h-4of7 {
    float: left;
    padding-right: 1.5em;
    width: 57.14286%; }
  .h-4of8 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .h-4of9 {
    float: left;
    padding-right: 1.5em;
    width: 44.44444%; }
  .h-4of10 {
    float: left;
    padding-right: 1.5em;
    width: 40%; }
  .h-4of11 {
    float: left;
    padding-right: 1.5em;
    width: 36.36364%; }
  .h-4of12 {
    float: left;
    padding-right: 1.5em;
    width: 33.33333%; }
  .h-5of6 {
    float: left;
    padding-right: 1.5em;
    width: 83.33333%; }
  .h-5of7 {
    float: left;
    padding-right: 1.5em;
    width: 71.42857%; }
  .h-5of8 {
    float: left;
    padding-right: 1.5em;
    width: 62.5%; }
  .h-5of9 {
    float: left;
    padding-right: 1.5em;
    width: 55.55556%; }
  .h-5of10 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .h-5of11 {
    float: left;
    padding-right: 1.5em;
    width: 45.45455%; }
  .h-5of12 {
    float: left;
    padding-right: 1.5em;
    width: 41.66667%; }
  .h-6of7 {
    float: left;
    padding-right: 1.5em;
    width: 85.71429%; }
  .h-6of8 {
    float: left;
    padding-right: 1.5em;
    width: 75%; }
  .h-6of9 {
    float: left;
    padding-right: 1.5em;
    width: 66.66667%; }
  .h-6of10 {
    float: left;
    padding-right: 1.5em;
    width: 60%; }
  .h-6of11 {
    float: left;
    padding-right: 1.5em;
    width: 54.54545%; }
  .h-6of12 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .h-7of8 {
    float: left;
    padding-right: 1.5em;
    width: 87.5%; }
  .h-7of9 {
    float: left;
    padding-right: 1.5em;
    width: 77.77778%; }
  .h-7of10 {
    float: left;
    padding-right: 1.5em;
    width: 70%; }
  .h-7of11 {
    float: left;
    padding-right: 1.5em;
    width: 63.63636%; }
  .h-7of12 {
    float: left;
    padding-right: 1.5em;
    width: 58.33333%; }
  .h-8of9 {
    float: left;
    padding-right: 1.5em;
    width: 88.88889%; }
  .h-8of10 {
    float: left;
    padding-right: 1.5em;
    width: 80%; }
  .h-8of11 {
    float: left;
    padding-right: 1.5em;
    width: 72.72727%; }
  .h-8of12 {
    float: left;
    padding-right: 1.5em;
    width: 66.66667%; }
  .h-9of10 {
    float: left;
    padding-right: 1.5em;
    width: 90%; }
  .h-9of11 {
    float: left;
    padding-right: 1.5em;
    width: 81.81818%; }
  .h-9of12 {
    float: left;
    padding-right: 1.5em;
    width: 75%; }
  .h-10of11 {
    float: left;
    padding-right: 1.5em;
    width: 90.90909%; }
  .h-10of12 {
    float: left;
    padding-right: 1.5em;
    width: 83.33333%; }
  .h-11of12 {
    float: left;
    padding-right: 1.5em;
    width: 91.66667%; } }

/* Portrait tablet to landscape */
@media only screen and (min-width: 769px) and (max-width: 1029px) {
  .t-all {
    float: left;
    padding-right: 0;
    width: 100%; }
  .t-1of2 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .t-1of3 {
    float: left;
    padding-right: 1.5em;
    width: 33.33333%; }
  .t-1of4 {
    float: left;
    padding-right: 1.5em;
    width: 25%; }
  .t-1of5 {
    float: left;
    padding-right: 1.5em;
    width: 20%; }
  .t-1of6 {
    float: left;
    padding-right: 1.5em;
    width: 16.66667%; }
  .t-1of7 {
    float: left;
    padding-right: 1.5em;
    width: 14.28571%; }
  .t-1of8 {
    float: left;
    padding-right: 1.5em;
    width: 12.5%; }
  .t-1of9 {
    float: left;
    padding-right: 1.5em;
    width: 11.11111%; }
  .t-1of10 {
    float: left;
    padding-right: 1.5em;
    width: 10%; }
  .t-1of11 {
    float: left;
    padding-right: 1.5em;
    width: 9.09091%; }
  .t-1of12 {
    float: left;
    padding-right: 1.5em;
    width: 8.33333%; }
  .t-2of3 {
    float: left;
    padding-right: 1.5em;
    width: 66.66667%; }
  .t-2of4 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .t-2of5 {
    float: left;
    padding-right: 1.5em;
    width: 40%; }
  .t-2of6 {
    float: left;
    padding-right: 1.5em;
    width: 33.33333%; }
  .t-2of7 {
    float: left;
    padding-right: 1.5em;
    width: 28.57143%; }
  .t-2of8 {
    float: left;
    padding-right: 1.5em;
    width: 25%; }
  .t-2of9 {
    float: left;
    padding-right: 1.5em;
    width: 22.22222%; }
  .t-2of10 {
    float: left;
    padding-right: 1.5em;
    width: 20%; }
  .t-2of11 {
    float: left;
    padding-right: 1.5em;
    width: 18.18182%; }
  .t-2of12 {
    float: left;
    padding-right: 1.5em;
    width: 16.66667%; }
  .t-3of4 {
    float: left;
    padding-right: 1.5em;
    width: 75%; }
  .t-3of5 {
    float: left;
    padding-right: 1.5em;
    width: 60%; }
  .t-3of6 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .t-3of7 {
    float: left;
    padding-right: 1.5em;
    width: 42.85714%; }
  .t-3of8 {
    float: left;
    padding-right: 1.5em;
    width: 37.5%; }
  .t-3of9 {
    float: left;
    padding-right: 1.5em;
    width: 33.33333%; }
  .t-3of10 {
    float: left;
    padding-right: 1.5em;
    width: 30%; }
  .t-3of11 {
    float: left;
    padding-right: 1.5em;
    width: 27.27273%; }
  .t-3of12 {
    float: left;
    padding-right: 1.5em;
    width: 25%; }
  .t-4of5 {
    float: left;
    padding-right: 1.5em;
    width: 80%; }
  .t-4of6 {
    float: left;
    padding-right: 1.5em;
    width: 66.66667%; }
  .t-4of7 {
    float: left;
    padding-right: 1.5em;
    width: 57.14286%; }
  .t-4of8 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .t-4of9 {
    float: left;
    padding-right: 1.5em;
    width: 44.44444%; }
  .t-4of10 {
    float: left;
    padding-right: 1.5em;
    width: 40%; }
  .t-4of11 {
    float: left;
    padding-right: 1.5em;
    width: 36.36364%; }
  .t-4of12 {
    float: left;
    padding-right: 1.5em;
    width: 33.33333%; }
  .t-5of6 {
    float: left;
    padding-right: 1.5em;
    width: 83.33333%; }
  .t-5of7 {
    float: left;
    padding-right: 1.5em;
    width: 71.42857%; }
  .t-5of8 {
    float: left;
    padding-right: 1.5em;
    width: 62.5%; }
  .t-5of9 {
    float: left;
    padding-right: 1.5em;
    width: 55.55556%; }
  .t-5of10 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .t-5of11 {
    float: left;
    padding-right: 1.5em;
    width: 45.45455%; }
  .t-5of12 {
    float: left;
    padding-right: 1.5em;
    width: 41.66667%; }
  .t-6of7 {
    float: left;
    padding-right: 1.5em;
    width: 85.71429%; }
  .t-6of8 {
    float: left;
    padding-right: 1.5em;
    width: 75%; }
  .t-6of9 {
    float: left;
    padding-right: 1.5em;
    width: 66.66667%; }
  .t-6of10 {
    float: left;
    padding-right: 1.5em;
    width: 60%; }
  .t-6of11 {
    float: left;
    padding-right: 1.5em;
    width: 54.54545%; }
  .t-6of12 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .t-7of8 {
    float: left;
    padding-right: 1.5em;
    width: 87.5%; }
  .t-7of9 {
    float: left;
    padding-right: 1.5em;
    width: 77.77778%; }
  .t-7of10 {
    float: left;
    padding-right: 1.5em;
    width: 70%; }
  .t-7of11 {
    float: left;
    padding-right: 1.5em;
    width: 63.63636%; }
  .t-7of12 {
    float: left;
    padding-right: 1.5em;
    width: 58.33333%; }
  .t-8of9 {
    float: left;
    padding-right: 1.5em;
    width: 88.88889%; }
  .t-8of10 {
    float: left;
    padding-right: 1.5em;
    width: 80%; }
  .t-8of11 {
    float: left;
    padding-right: 1.5em;
    width: 72.72727%; }
  .t-8of12 {
    float: left;
    padding-right: 1.5em;
    width: 66.66667%; }
  .t-9of10 {
    float: left;
    padding-right: 1.5em;
    width: 90%; }
  .t-9of11 {
    float: left;
    padding-right: 1.5em;
    width: 81.81818%; }
  .t-9of12 {
    float: left;
    padding-right: 1.5em;
    width: 75%; }
  .t-10of11 {
    float: left;
    padding-right: 1.5em;
    width: 90.90909%; }
  .t-10of12 {
    float: left;
    padding-right: 1.5em;
    width: 83.33333%; }
  .t-11of12 {
    float: left;
    padding-right: 1.5em;
    width: 91.66667%; } }

/* Landscape to small desktop */
@media only screen and (min-width: 1030px) {
  .d-all {
    float: left;
    padding-right: 0;
    width: 100%; }
  .d-1of2 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .d-1of3 {
    float: left;
    padding-right: 1.5em;
    width: 33.33333%; }
  .d-1of4 {
    float: left;
    padding-right: 1.5em;
    width: 25%; }
  .d-1of5 {
    float: left;
    padding-right: 1.5em;
    width: 20%; }
  .d-1of6 {
    float: left;
    padding-right: 1.5em;
    width: 16.66667%; }
  .d-1of7 {
    float: left;
    padding-right: 1.5em;
    width: 14.28571%; }
  .d-1of8 {
    float: left;
    padding-right: 1.5em;
    width: 12.5%; }
  .d-1of9 {
    float: left;
    padding-right: 1.5em;
    width: 11.11111%; }
  .d-1of10 {
    float: left;
    padding-right: 1.5em;
    width: 10%; }
  .d-1of11 {
    float: left;
    padding-right: 1.5em;
    width: 9.09091%; }
  .d-1of12 {
    float: left;
    padding-right: 1.5em;
    width: 8.33333%; }
  .d-2of3 {
    float: left;
    padding-right: 1.5em;
    width: 66.66667%; }
  .d-2of4 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .d-2of5 {
    float: left;
    padding-right: 1.5em;
    width: 40%; }
  .d-2of6 {
    float: left;
    padding-right: 1.5em;
    width: 33.33333%; }
  .d-2of7 {
    float: left;
    padding-right: 1.5em;
    width: 28.57143%; }
  .d-2of8 {
    float: left;
    padding-right: 1.5em;
    width: 25%; }
  .d-2of9 {
    float: left;
    padding-right: 1.5em;
    width: 22.22222%; }
  .d-2of10 {
    float: left;
    padding-right: 1.5em;
    width: 20%; }
  .d-2of11 {
    float: left;
    padding-right: 1.5em;
    width: 18.18182%; }
  .d-2of12 {
    float: left;
    padding-right: 1.5em;
    width: 16.66667%; }
  .d-3of4 {
    float: left;
    padding-right: 1.5em;
    width: 75%; }
  .d-3of5 {
    float: left;
    padding-right: 1.5em;
    width: 60%; }
  .d-3of6 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .d-3of7 {
    float: left;
    padding-right: 1.5em;
    width: 42.85714%; }
  .d-3of8 {
    float: left;
    padding-right: 1.5em;
    width: 37.5%; }
  .d-3of9 {
    float: left;
    padding-right: 1.5em;
    width: 33.33333%; }
  .d-3of10 {
    float: left;
    padding-right: 1.5em;
    width: 30%; }
  .d-3of11 {
    float: left;
    padding-right: 1.5em;
    width: 27.27273%; }
  .d-3of12 {
    float: left;
    padding-right: 1.5em;
    width: 25%; }
  .d-4of5 {
    float: left;
    padding-right: 1.5em;
    width: 80%; }
  .d-4of6 {
    float: left;
    padding-right: 1.5em;
    width: 66.66667%; }
  .d-4of7 {
    float: left;
    padding-right: 1.5em;
    width: 57.14286%; }
  .d-4of8 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .d-4of9 {
    float: left;
    padding-right: 1.5em;
    width: 44.44444%; }
  .d-4of10 {
    float: left;
    padding-right: 1.5em;
    width: 40%; }
  .d-4of11 {
    float: left;
    padding-right: 1.5em;
    width: 36.36364%; }
  .d-4of12 {
    float: left;
    padding-right: 1.5em;
    width: 33.33333%; }
  .d-5of6 {
    float: left;
    padding-right: 1.5em;
    width: 83.33333%; }
  .d-5of7 {
    float: left;
    padding-right: 1.5em;
    width: 71.42857%; }
  .d-5of8 {
    float: left;
    padding-right: 1.5em;
    width: 62.5%; }
  .d-5of9 {
    float: left;
    padding-right: 1.5em;
    width: 55.55556%; }
  .d-5of10 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .d-5of11 {
    float: left;
    padding-right: 1.5em;
    width: 45.45455%; }
  .d-5of12 {
    float: left;
    padding-right: 1.5em;
    width: 41.66667%; }
  .d-6of7 {
    float: left;
    padding-right: 1.5em;
    width: 85.71429%; }
  .d-6of8 {
    float: left;
    padding-right: 1.5em;
    width: 75%; }
  .d-6of9 {
    float: left;
    padding-right: 1.5em;
    width: 66.66667%; }
  .d-6of10 {
    float: left;
    padding-right: 1.5em;
    width: 60%; }
  .d-6of11 {
    float: left;
    padding-right: 1.5em;
    width: 54.54545%; }
  .d-6of12 {
    float: left;
    padding-right: 1.5em;
    width: 50%; }
  .d-7of8 {
    float: left;
    padding-right: 1.5em;
    width: 87.5%; }
  .d-7of9 {
    float: left;
    padding-right: 1.5em;
    width: 77.77778%; }
  .d-7of10 {
    float: left;
    padding-right: 1.5em;
    width: 70%; }
  .d-7of11 {
    float: left;
    padding-right: 1.5em;
    width: 63.63636%; }
  .d-7of12 {
    float: left;
    padding-right: 1.5em;
    width: 58.33333%; }
  .d-8of9 {
    float: left;
    padding-right: 1.5em;
    width: 88.88889%; }
  .d-8of10 {
    float: left;
    padding-right: 1.5em;
    width: 80%; }
  .d-8of11 {
    float: left;
    padding-right: 1.5em;
    width: 72.72727%; }
  .d-8of12 {
    float: left;
    padding-right: 1.5em;
    width: 66.66667%; }
  .d-9of10 {
    float: left;
    padding-right: 1.5em;
    width: 90%; }
  .d-9of11 {
    float: left;
    padding-right: 1.5em;
    width: 81.81818%; }
  .d-9of12 {
    float: left;
    padding-right: 1.5em;
    width: 75%; }
  .d-10of11 {
    float: left;
    padding-right: 1.5em;
    width: 90.90909%; }
  .d-10of12 {
    float: left;
    padding-right: 1.5em;
    width: 83.33333%; }
  .d-11of12 {
    float: left;
    padding-right: 1.5em;
    width: 91.66667%; } }

.last-col {
  float: right;
  padding-right: 0; }

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

table tr th#select, table tr td#select {
  width: 1em; }

table tr th#transaction_id, table tr th#remark_id, table tr th#group_id, table tr th#ID, table tr td#transaction_id, table tr td#remark_id, table tr td#group_id, table tr td#ID {
  width: 3em; }

table tr th#amount,  table tr td#amount  {
  width: 5em; }

table tr th#transaction_type, table tr td#transaction_type{
  width: 15em;}

table tr th#member, table tr th#entry_date, table tr td#member, table tr td#entry_date {
  width: 7em; }

table tr th#notes, table tr td#notes {
  width: 15em; }

table tr th#actions, table tr td#actions {
  width: 10em; }

.table-layout .row {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch;
  border-bottom: 1px solid #E6E6E6;
  margin: 0;
  padding: 0; }
  .table-layout .row:nth-child(even) {
    background: #fff; }
  .table-layout .row > div {
    padding: 5px; }

.table-layout.volunteer-table .row > div {
  width: 33%; }

.table-layout.transaction-table .row > div {
  width: 20%; }

.menu-wrapper {
  height: 30px;
  margin: 6px 0 4px; }

#wpfooter {
  position: relative; }

.content-display-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: stretch;
  -ms-flex-align: stretch;
  align-items: stretch; }

#sidebar-wrapper {
  position: -webkit-sticky;
  position: sticky;
  top: 32px;
  background: #fff;
  border-left: 1px solid #E6E6E6;
  border-right: 1px solid #E6E6E6;
  margin-left: -20px; }
  #sidebar-wrapper .sidebar-edit-filter {
    padding: 0.75rem 1rem;
    cursor: pointer;
    -webkit-transition: all ease-in-out 0.2s;
    -o-transition: all ease-in-out 0.2s;
    transition: all ease-in-out 0.2s;
    color: #333; }
    #sidebar-wrapper .sidebar-edit-filter.active, #sidebar-wrapper .sidebar-edit-filter:hover {
      background: #E6E6E6;
      color: #333; }
    #sidebar-wrapper .sidebar-edit-filter::before {
      padding-right: 5px; }

.sjmm-header-inner-wrapper {
  width: 100%;
  float: left; }
  .sjmm-header-inner-wrapper .title-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap; }
    .sjmm-header-inner-wrapper .title-wrapper h1 {
      float: left;
      margin-right: 15px; }
    .sjmm-header-inner-wrapper .title-wrapper .add-new-parent-wrapper {
      float: left;
      font-weight: bold; }

.header-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap; }
  .header-wrapper h3 {
    float: left;
    margin-right: 15px; }
  .header-wrapper .add-new-parent-wrapper {
    float: left;
    font-weight: bold; }

.edit-content-wrapper {
  display: none;
  min-height: 95vh;
  padding-left: 1.5rem; }
  .edit-content-wrapper.active {
    display: block; }

.g-btn {
  font-size: 0.75rem;
  background: none;
  font-weight: bold;
  border: 2px solid #333;
  color: #333;
  padding: 0.25em 1em;
  cursor: pointer;
  -webkit-transition: all ease-in-out 0.2s;
  -o-transition: all ease-in-out 0.2s;
  transition: all ease-in-out 0.2s;
  text-decoration: none;
  text-transform: uppercase;
  text-align: center; }
  .g-btn:hover, .g-btn:active {
    color: #fff;
    background: #333; }

#step_tracker {
  width: 100%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-wrap: nowrap;
  flex-wrap: nowrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between; }
  #step_tracker::after {
    content: '';
    height: 1px;
    width: 75%;
    margin: auto 12.5%;
    background: #333333;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0; }
  #step_tracker span {
    background: #F2F2F2;
    padding: 5px 15px;
    z-index: 1; }
    #step_tracker span.current-step {
      font-weight: bold; }

.each-overview-module {
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #fff; }
  .each-overview-module:last-child {
    border-bottom: 0; }
  .each-overview-module p {
    margin: 0; }

.sj-form-wrapper {
  max-width: 800px;
  width: 100%; }
  .sj-form-wrapper .form-input-wrapper {
    margin: 0 5px 15px 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    width: 100%; }
    .sj-form-wrapper .form-input-wrapper.previous-button {
      float: left;
      width: auto; }
    .sj-form-wrapper .form-input-wrapper.submit {
      float: right;
      width: auto; }
    .sj-form-wrapper .form-input-wrapper.hidden {
      margin: 0; }
    .sj-form-wrapper .form-input-wrapper.no_governance_phone, .sj-form-wrapper .form-input-wrapper.no_governance_mail, .sj-form-wrapper .form-input-wrapper.no_governance_email, .sj-form-wrapper .form-input-wrapper.no_marketing_phone, .sj-form-wrapper .form-input-wrapper.no_marketing_mail, .sj-form-wrapper .form-input-wrapper.no_marketing_email, .sj-form-wrapper .form-input-wrapper.do_not_rent {
      float: left;
      width: calc( 33% - 5px);
      max-width: 250px; }
    .sj-form-wrapper .form-input-wrapper.first_name, .sj-form-wrapper .form-input-wrapper.last_name, .sj-form-wrapper .form-input-wrapper.email, .sj-form-wrapper .form-input-wrapper.alt_email, .sj-form-wrapper .form-input-wrapper.street_address_city, .sj-form-wrapper .form-input-wrapper.street_address_province, .sj-form-wrapper .form-input-wrapper.street_address_country, .sj-form-wrapper .form-input-wrapper.street_address_postal, .sj-form-wrapper .form-input-wrapper.state_province, .sj-form-wrapper .form-input-wrapper.country, .sj-form-wrapper .form-input-wrapper.post_code, .sj-form-wrapper .form-input-wrapper.city, .sj-form-wrapper .form-input-wrapper.tel {
      float: left;
      width: calc( 50% - 5px);
      max-width: 400px; }
    .sj-form-wrapper .form-input-wrapper.message {
      float: left;
      width: 100%; }
    .sj-form-wrapper .form-input-wrapper h5 {
      margin: 0;
      font-size: 0.85rem; }
    .sj-form-wrapper .form-input-wrapper .description {
      width: 100%;
      -webkit-box-ordinal-group: 1000;
      -ms-flex-order: 999;
      order: 999; }
      .sj-form-wrapper .form-input-wrapper .description.smaller {
        font-size: 0.75rem; }
    .sj-form-wrapper .form-input-wrapper .wp-editor-wrap {
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2; }
    .sj-form-wrapper .form-input-wrapper input, .sj-form-wrapper .form-input-wrapper textarea, .sj-form-wrapper .form-input-wrapper select {
      padding: 5px;
      border: 1px solid #aaa;
      border-radius: 3px;
      -webkit-box-ordinal-group: 3;
      -ms-flex-order: 2;
      order: 2; }
      .sj-form-wrapper .form-input-wrapper input:focus + label, .sj-form-wrapper .form-input-wrapper textarea:focus + label, .sj-form-wrapper .form-input-wrapper select:focus + label {
        color: #2980b9; }
    .sj-form-wrapper .form-input-wrapper span.select2 {
      max-width: 400px;
      min-width: 250px;
      width: 100%; }
    .sj-form-wrapper .form-input-wrapper input[type="text"], .sj-form-wrapper .form-input-wrapper input[type="url"], .sj-form-wrapper .form-input-wrapper input[type="textarea"], .sj-form-wrapper .form-input-wrapper input[type="email"], .sj-form-wrapper .form-input-wrapper input[type="select"], .sj-form-wrapper .form-input-wrapper input[type="tel"], .sj-form-wrapper .form-input-wrapper input[type="number"] {
      max-width: 400px;
      min-width: 250px;
      width: 100%; }
    .sj-form-wrapper .form-input-wrapper input[type="submit"] {
      text-transform: uppercase;
      border: 2px solid #333333;
      border-radius: 0;
      padding: 5px 7px;
      font-weight: bold;
      cursor: pointer;
      -webkit-transition: all ease-in-out 0.2s;
      -o-transition: all ease-in-out 0.2s;
      transition: all ease-in-out 0.2s; }
      .sj-form-wrapper .form-input-wrapper input[type="submit"]:hover {
        background: #333333;
        color: #fff; }
    .sj-form-wrapper .form-input-wrapper input[type="hidden"] + label {
      display: none; }
    .sj-form-wrapper .form-input-wrapper select,
    .sj-form-wrapper .form-input-wrapper textarea {
      max-width: 100%;
      min-width: 400px; }
    .sj-form-wrapper .form-input-wrapper span.select2 {
      -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
      order: 3; }
      .sj-form-wrapper .form-input-wrapper span.select2.select2-container--open + label {
        color: #2980b9; }
    .sj-form-wrapper .form-input-wrapper label {
      text-transform: uppercase;
      font-size: 0.75rem;
      width: 100%;
      float: left;
      -webkit-transition: all ease-in-out 0.2s;
      -o-transition: all ease-in-out 0.2s;
      transition: all ease-in-out 0.2s;
      -webkit-box-ordinal-group: 2;
      -ms-flex-order: 1;
      order: 1; }
    .sj-form-wrapper .form-input-wrapper.checkbox input, .sj-form-wrapper .form-input-wrapper.radio input {
      float: left; }
    .sj-form-wrapper .form-input-wrapper.checkbox label, .sj-form-wrapper .form-input-wrapper.radio label {
      margin-left: 5px;
      width: auto;
      line-height: 8px;
      -webkit-box-ordinal-group: 4;
      -ms-flex-order: 3;
      order: 3; }
    .sj-form-wrapper .form-input-wrapper .select2-container {
      max-width: 100%;
      min-width: 400px; }
    .sj-form-wrapper .form-input-wrapper .required_asterisk {
      color: red; }
  .sj-form-wrapper .member-select > label {
    margin-bottom: 1rem; }
  .sj-form-wrapper .add-new-member-button {
    float: left;
    width: 100%;
    margin-top: 10px;
    max-width: 400px;
    clear: both;
    text-align: center;
    margin-bottom: 10px;
    -webkit-box-ordinal-group: 6;
    -ms-flex-order: 5;
    order: 5; }
  .sj-form-wrapper .member-list-input-wrapper {
    float: left;
    width: 100%;
    -webkit-box-ordinal-group: 5;
    -ms-flex-order: 4;
    order: 4; }
    .sj-form-wrapper .member-list-input-wrapper .added-member-list {
      margin-bottom: 15px; }
    .sj-form-wrapper .member-list-input-wrapper .add-existing-member-button {
      margin-top: 15px;
      clear: both;
      max-width: 400px; }
    .sj-form-wrapper .member-list-input-wrapper span.select2 {
      margin-top: 15px; }
    .sj-form-wrapper .member-list-input-wrapper .existing-member-select-wrapper {
      float: left;
      width: 100%; }
    .sj-form-wrapper .member-list-input-wrapper .each-member {
      padding: 10px 5px;
      border: 1px solid #E6E6E6;
      background: #fff;
      position: relative;
      float: left;
      width: 100%;
      margin-bottom: 1rem;
      max-width: 425px;
      clear: both;
      border-radius: 3px; }
      .sj-form-wrapper .member-list-input-wrapper .each-member .member-name {
        font-weight: bold;
        text-transform: uppercase; }
      .sj-form-wrapper .member-list-input-wrapper .each-member .remove-member {
        position: absolute;
        float: right;
        right: 0;
        top: 0;
        height: 100%;
        width: 40px; }
        .sj-form-wrapper .member-list-input-wrapper .each-member .remove-member::before, .sj-form-wrapper .member-list-input-wrapper .each-member .remove-member::after {
          content: '';
          position: absolute;
          background: #333333;
          width: 15px;
          height: 4px;
          cursor: pointer;
          top: 17px;
          right: 5px; }
        .sj-form-wrapper .member-list-input-wrapper .each-member .remove-member::before {
          -webkit-transform: rotate(45deg);
          -ms-transform: rotate(45deg);
          transform: rotate(45deg); }
        .sj-form-wrapper .member-list-input-wrapper .each-member .remove-member::after {
          -webkit-transform: rotate(-45deg);
          -ms-transform: rotate(-45deg);
          transform: rotate(-45deg); }

.sj-merge-member-table {
  background: #fff; }
  .sj-merge-member-table td {
    padding: 5px; }

#member-overview-wrapper.active {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -ms-flex-line-pack: start;
  align-content: flex-start; }

#edit-personal-info-form-1 .form-input-wrapper.first_name,
#edit-personal-info-form-1 .form-input-wrapper.last_name,
#edit-personal-info-form-1 .form-input-wrapper.email,
#edit-personal-info-form-1 .form-input-wrapper.alt_email,
#edit-personal-info-form-1 .form-input-wrapper.street_address_city_1,
#edit-personal-info-form-1 .form-input-wrapper.street_address_province_1,
#edit-personal-info-form-1 .form-input-wrapper.street_address_country_1,
#edit-personal-info-form-1 .form-input-wrapper.street_address_postal_1 {
  float: left;
  width: 50%; }

#update-notification-settings fieldset {
  margin-bottom: 25px; }

.tool-wrapper {
  margin-bottom: 1.5rem;
  padding: 0 0 1.5em 0; }
  .tool-wrapper:last-child {
    border-bottom: 0px; }
  .tool-wrapper h4 {
    margin: 1.33em 0 .075em; }
  .tool-wrapper p {
    margin: 0 0 .25em 0; }
  .tool-wrapper form {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start; }
    .tool-wrapper form#renew-member-form fieldset {
      width: 100%; }
    .tool-wrapper form .form-input-wrapper {
      width: auto; }
    .tool-wrapper form .form-input-wrapper.submit {
      -ms-flex-item-align: end;
      align-self: flex-end;
      padding: 0;
      margin: 0 0 18px; }

.sjmm-modal {
  display: none;
  max-width: 600px;
  width: 100%;
  max-height: 80%;
  overflow: auto;
  padding: 25px 50px;
  border-radius: 5px;
  background-color: #fff; }

#lean_overlay {
  position: fixed;
  z-index: 100;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: #000;
  display: none;
  z-index: 9999; }