/*********************
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.3333333333%;
  }

  .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.6666666667%;
  }

  .m-1of7 {
    float: left;
    padding-right: 1.5em;
    width: 14.2857142857%;
  }

  .m-1of8 {
    float: left;
    padding-right: 1.5em;
    width: 12.5%;
  }

  .m-1of9 {
    float: left;
    padding-right: 1.5em;
    width: 11.1111111111%;
  }

  .m-1of10 {
    float: left;
    padding-right: 1.5em;
    width: 10%;
  }

  .m-1of11 {
    float: left;
    padding-right: 1.5em;
    width: 9.0909090909%;
  }

  .m-1of12 {
    float: left;
    padding-right: 1.5em;
    width: 8.3333333333%;
  }

  .m-2of3 {
    float: left;
    padding-right: 1.5em;
    width: 66.6666666667%;
  }

  .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.3333333333%;
  }

  .m-2of7 {
    float: left;
    padding-right: 1.5em;
    width: 28.5714285714%;
  }

  .m-2of8 {
    float: left;
    padding-right: 1.5em;
    width: 25%;
  }

  .m-2of9 {
    float: left;
    padding-right: 1.5em;
    width: 22.2222222222%;
  }

  .m-2of10 {
    float: left;
    padding-right: 1.5em;
    width: 20%;
  }

  .m-2of11 {
    float: left;
    padding-right: 1.5em;
    width: 18.1818181818%;
  }

  .m-2of12 {
    float: left;
    padding-right: 1.5em;
    width: 16.6666666667%;
  }

  .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.8571428571%;
  }

  .m-3of8 {
    float: left;
    padding-right: 1.5em;
    width: 37.5%;
  }

  .m-3of9 {
    float: left;
    padding-right: 1.5em;
    width: 33.3333333333%;
  }

  .m-3of10 {
    float: left;
    padding-right: 1.5em;
    width: 30%;
  }

  .m-3of11 {
    float: left;
    padding-right: 1.5em;
    width: 27.2727272727%;
  }

  .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.6666666667%;
  }

  .m-4of7 {
    float: left;
    padding-right: 1.5em;
    width: 57.1428571429%;
  }

  .m-4of8 {
    float: left;
    padding-right: 1.5em;
    width: 50%;
  }

  .m-4of9 {
    float: left;
    padding-right: 1.5em;
    width: 44.4444444444%;
  }

  .m-4of10 {
    float: left;
    padding-right: 1.5em;
    width: 40%;
  }

  .m-4of11 {
    float: left;
    padding-right: 1.5em;
    width: 36.3636363636%;
  }

  .m-4of12 {
    float: left;
    padding-right: 1.5em;
    width: 33.3333333333%;
  }

  .m-5of6 {
    float: left;
    padding-right: 1.5em;
    width: 83.3333333333%;
  }

  .m-5of7 {
    float: left;
    padding-right: 1.5em;
    width: 71.4285714286%;
  }

  .m-5of8 {
    float: left;
    padding-right: 1.5em;
    width: 62.5%;
  }

  .m-5of9 {
    float: left;
    padding-right: 1.5em;
    width: 55.5555555556%;
  }

  .m-5of10 {
    float: left;
    padding-right: 1.5em;
    width: 50%;
  }

  .m-5of11 {
    float: left;
    padding-right: 1.5em;
    width: 45.4545454545%;
  }

  .m-5of12 {
    float: left;
    padding-right: 1.5em;
    width: 41.6666666667%;
  }

  .m-6of7 {
    float: left;
    padding-right: 1.5em;
    width: 85.7142857143%;
  }

  .m-6of8 {
    float: left;
    padding-right: 1.5em;
    width: 75%;
  }

  .m-6of9 {
    float: left;
    padding-right: 1.5em;
    width: 66.6666666667%;
  }

  .m-6of10 {
    float: left;
    padding-right: 1.5em;
    width: 60%;
  }

  .m-6of11 {
    float: left;
    padding-right: 1.5em;
    width: 54.5454545455%;
  }

  .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.7777777778%;
  }

  .m-7of10 {
    float: left;
    padding-right: 1.5em;
    width: 70%;
  }

  .m-7of11 {
    float: left;
    padding-right: 1.5em;
    width: 63.6363636364%;
  }

  .m-7of12 {
    float: left;
    padding-right: 1.5em;
    width: 58.3333333333%;
  }

  .m-8of9 {
    float: left;
    padding-right: 1.5em;
    width: 88.8888888889%;
  }

  .m-8of10 {
    float: left;
    padding-right: 1.5em;
    width: 80%;
  }

  .m-8of11 {
    float: left;
    padding-right: 1.5em;
    width: 72.7272727273%;
  }

  .m-8of12 {
    float: left;
    padding-right: 1.5em;
    width: 66.6666666667%;
  }

  .m-9of10 {
    float: left;
    padding-right: 1.5em;
    width: 90%;
  }

  .m-9of11 {
    float: left;
    padding-right: 1.5em;
    width: 81.8181818182%;
  }

  .m-9of12 {
    float: left;
    padding-right: 1.5em;
    width: 75%;
  }

  .m-10of11 {
    float: left;
    padding-right: 1.5em;
    width: 90.9090909091%;
  }

  .m-10of12 {
    float: left;
    padding-right: 1.5em;
    width: 83.3333333333%;
  }

  .m-11of12 {
    float: left;
    padding-right: 1.5em;
    width: 91.6666666667%;
  }
}
@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.3333333333%;
  }

  .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.6666666667%;
  }

  .h-1of7 {
    float: left;
    padding-right: 1.5em;
    width: 14.2857142857%;
  }

  .h-1of8 {
    float: left;
    padding-right: 1.5em;
    width: 12.5%;
  }

  .h-1of9 {
    float: left;
    padding-right: 1.5em;
    width: 11.1111111111%;
  }

  .h-1of10 {
    float: left;
    padding-right: 1.5em;
    width: 10%;
  }

  .h-1of11 {
    float: left;
    padding-right: 1.5em;
    width: 9.0909090909%;
  }

  .h-1of12 {
    float: left;
    padding-right: 1.5em;
    width: 8.3333333333%;
  }

  .h-2of3 {
    float: left;
    padding-right: 1.5em;
    width: 66.6666666667%;
  }

  .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.3333333333%;
  }

  .h-2of7 {
    float: left;
    padding-right: 1.5em;
    width: 28.5714285714%;
  }

  .h-2of8 {
    float: left;
    padding-right: 1.5em;
    width: 25%;
  }

  .h-2of9 {
    float: left;
    padding-right: 1.5em;
    width: 22.2222222222%;
  }

  .h-2of10 {
    float: left;
    padding-right: 1.5em;
    width: 20%;
  }

  .h-2of11 {
    float: left;
    padding-right: 1.5em;
    width: 18.1818181818%;
  }

  .h-2of12 {
    float: left;
    padding-right: 1.5em;
    width: 16.6666666667%;
  }

  .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.8571428571%;
  }

  .h-3of8 {
    float: left;
    padding-right: 1.5em;
    width: 37.5%;
  }

  .h-3of9 {
    float: left;
    padding-right: 1.5em;
    width: 33.3333333333%;
  }

  .h-3of10 {
    float: left;
    padding-right: 1.5em;
    width: 30%;
  }

  .h-3of11 {
    float: left;
    padding-right: 1.5em;
    width: 27.2727272727%;
  }

  .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.6666666667%;
  }

  .h-4of7 {
    float: left;
    padding-right: 1.5em;
    width: 57.1428571429%;
  }

  .h-4of8 {
    float: left;
    padding-right: 1.5em;
    width: 50%;
  }

  .h-4of9 {
    float: left;
    padding-right: 1.5em;
    width: 44.4444444444%;
  }

  .h-4of10 {
    float: left;
    padding-right: 1.5em;
    width: 40%;
  }

  .h-4of11 {
    float: left;
    padding-right: 1.5em;
    width: 36.3636363636%;
  }

  .h-4of12 {
    float: left;
    padding-right: 1.5em;
    width: 33.3333333333%;
  }

  .h-5of6 {
    float: left;
    padding-right: 1.5em;
    width: 83.3333333333%;
  }

  .h-5of7 {
    float: left;
    padding-right: 1.5em;
    width: 71.4285714286%;
  }

  .h-5of8 {
    float: left;
    padding-right: 1.5em;
    width: 62.5%;
  }

  .h-5of9 {
    float: left;
    padding-right: 1.5em;
    width: 55.5555555556%;
  }

  .h-5of10 {
    float: left;
    padding-right: 1.5em;
    width: 50%;
  }

  .h-5of11 {
    float: left;
    padding-right: 1.5em;
    width: 45.4545454545%;
  }

  .h-5of12 {
    float: left;
    padding-right: 1.5em;
    width: 41.6666666667%;
  }

  .h-6of7 {
    float: left;
    padding-right: 1.5em;
    width: 85.7142857143%;
  }

  .h-6of8 {
    float: left;
    padding-right: 1.5em;
    width: 75%;
  }

  .h-6of9 {
    float: left;
    padding-right: 1.5em;
    width: 66.6666666667%;
  }

  .h-6of10 {
    float: left;
    padding-right: 1.5em;
    width: 60%;
  }

  .h-6of11 {
    float: left;
    padding-right: 1.5em;
    width: 54.5454545455%;
  }

  .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.7777777778%;
  }

  .h-7of10 {
    float: left;
    padding-right: 1.5em;
    width: 70%;
  }

  .h-7of11 {
    float: left;
    padding-right: 1.5em;
    width: 63.6363636364%;
  }

  .h-7of12 {
    float: left;
    padding-right: 1.5em;
    width: 58.3333333333%;
  }

  .h-8of9 {
    float: left;
    padding-right: 1.5em;
    width: 88.8888888889%;
  }

  .h-8of10 {
    float: left;
    padding-right: 1.5em;
    width: 80%;
  }

  .h-8of11 {
    float: left;
    padding-right: 1.5em;
    width: 72.7272727273%;
  }

  .h-8of12 {
    float: left;
    padding-right: 1.5em;
    width: 66.6666666667%;
  }

  .h-9of10 {
    float: left;
    padding-right: 1.5em;
    width: 90%;
  }

  .h-9of11 {
    float: left;
    padding-right: 1.5em;
    width: 81.8181818182%;
  }

  .h-9of12 {
    float: left;
    padding-right: 1.5em;
    width: 75%;
  }

  .h-10of11 {
    float: left;
    padding-right: 1.5em;
    width: 90.9090909091%;
  }

  .h-10of12 {
    float: left;
    padding-right: 1.5em;
    width: 83.3333333333%;
  }

  .h-11of12 {
    float: left;
    padding-right: 1.5em;
    width: 91.6666666667%;
  }
}
/* 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.3333333333%;
  }

  .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.6666666667%;
  }

  .t-1of7 {
    float: left;
    padding-right: 1.5em;
    width: 14.2857142857%;
  }

  .t-1of8 {
    float: left;
    padding-right: 1.5em;
    width: 12.5%;
  }

  .t-1of9 {
    float: left;
    padding-right: 1.5em;
    width: 11.1111111111%;
  }

  .t-1of10 {
    float: left;
    padding-right: 1.5em;
    width: 10%;
  }

  .t-1of11 {
    float: left;
    padding-right: 1.5em;
    width: 9.0909090909%;
  }

  .t-1of12 {
    float: left;
    padding-right: 1.5em;
    width: 8.3333333333%;
  }

  .t-2of3 {
    float: left;
    padding-right: 1.5em;
    width: 66.6666666667%;
  }

  .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.3333333333%;
  }

  .t-2of7 {
    float: left;
    padding-right: 1.5em;
    width: 28.5714285714%;
  }

  .t-2of8 {
    float: left;
    padding-right: 1.5em;
    width: 25%;
  }

  .t-2of9 {
    float: left;
    padding-right: 1.5em;
    width: 22.2222222222%;
  }

  .t-2of10 {
    float: left;
    padding-right: 1.5em;
    width: 20%;
  }

  .t-2of11 {
    float: left;
    padding-right: 1.5em;
    width: 18.1818181818%;
  }

  .t-2of12 {
    float: left;
    padding-right: 1.5em;
    width: 16.6666666667%;
  }

  .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.8571428571%;
  }

  .t-3of8 {
    float: left;
    padding-right: 1.5em;
    width: 37.5%;
  }

  .t-3of9 {
    float: left;
    padding-right: 1.5em;
    width: 33.3333333333%;
  }

  .t-3of10 {
    float: left;
    padding-right: 1.5em;
    width: 30%;
  }

  .t-3of11 {
    float: left;
    padding-right: 1.5em;
    width: 27.2727272727%;
  }

  .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.6666666667%;
  }

  .t-4of7 {
    float: left;
    padding-right: 1.5em;
    width: 57.1428571429%;
  }

  .t-4of8 {
    float: left;
    padding-right: 1.5em;
    width: 50%;
  }

  .t-4of9 {
    float: left;
    padding-right: 1.5em;
    width: 44.4444444444%;
  }

  .t-4of10 {
    float: left;
    padding-right: 1.5em;
    width: 40%;
  }

  .t-4of11 {
    float: left;
    padding-right: 1.5em;
    width: 36.3636363636%;
  }

  .t-4of12 {
    float: left;
    padding-right: 1.5em;
    width: 33.3333333333%;
  }

  .t-5of6 {
    float: left;
    padding-right: 1.5em;
    width: 83.3333333333%;
  }

  .t-5of7 {
    float: left;
    padding-right: 1.5em;
    width: 71.4285714286%;
  }

  .t-5of8 {
    float: left;
    padding-right: 1.5em;
    width: 62.5%;
  }

  .t-5of9 {
    float: left;
    padding-right: 1.5em;
    width: 55.5555555556%;
  }

  .t-5of10 {
    float: left;
    padding-right: 1.5em;
    width: 50%;
  }

  .t-5of11 {
    float: left;
    padding-right: 1.5em;
    width: 45.4545454545%;
  }

  .t-5of12 {
    float: left;
    padding-right: 1.5em;
    width: 41.6666666667%;
  }

  .t-6of7 {
    float: left;
    padding-right: 1.5em;
    width: 85.7142857143%;
  }

  .t-6of8 {
    float: left;
    padding-right: 1.5em;
    width: 75%;
  }

  .t-6of9 {
    float: left;
    padding-right: 1.5em;
    width: 66.6666666667%;
  }

  .t-6of10 {
    float: left;
    padding-right: 1.5em;
    width: 60%;
  }

  .t-6of11 {
    float: left;
    padding-right: 1.5em;
    width: 54.5454545455%;
  }

  .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.7777777778%;
  }

  .t-7of10 {
    float: left;
    padding-right: 1.5em;
    width: 70%;
  }

  .t-7of11 {
    float: left;
    padding-right: 1.5em;
    width: 63.6363636364%;
  }

  .t-7of12 {
    float: left;
    padding-right: 1.5em;
    width: 58.3333333333%;
  }

  .t-8of9 {
    float: left;
    padding-right: 1.5em;
    width: 88.8888888889%;
  }

  .t-8of10 {
    float: left;
    padding-right: 1.5em;
    width: 80%;
  }

  .t-8of11 {
    float: left;
    padding-right: 1.5em;
    width: 72.7272727273%;
  }

  .t-8of12 {
    float: left;
    padding-right: 1.5em;
    width: 66.6666666667%;
  }

  .t-9of10 {
    float: left;
    padding-right: 1.5em;
    width: 90%;
  }

  .t-9of11 {
    float: left;
    padding-right: 1.5em;
    width: 81.8181818182%;
  }

  .t-9of12 {
    float: left;
    padding-right: 1.5em;
    width: 75%;
  }

  .t-10of11 {
    float: left;
    padding-right: 1.5em;
    width: 90.9090909091%;
  }

  .t-10of12 {
    float: left;
    padding-right: 1.5em;
    width: 83.3333333333%;
  }

  .t-11of12 {
    float: left;
    padding-right: 1.5em;
    width: 91.6666666667%;
  }
}
/* 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.3333333333%;
  }

  .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.6666666667%;
  }

  .d-1of7 {
    float: left;
    padding-right: 1.5em;
    width: 14.2857142857%;
  }

  .d-1of8 {
    float: left;
    padding-right: 1.5em;
    width: 12.5%;
  }

  .d-1of9 {
    float: left;
    padding-right: 1.5em;
    width: 11.1111111111%;
  }

  .d-1of10 {
    float: left;
    padding-right: 1.5em;
    width: 10%;
  }

  .d-1of11 {
    float: left;
    padding-right: 1.5em;
    width: 9.0909090909%;
  }

  .d-1of12 {
    float: left;
    padding-right: 1.5em;
    width: 8.3333333333%;
  }

  .d-2of3 {
    float: left;
    padding-right: 1.5em;
    width: 66.6666666667%;
  }

  .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.3333333333%;
  }

  .d-2of7 {
    float: left;
    padding-right: 1.5em;
    width: 28.5714285714%;
  }

  .d-2of8 {
    float: left;
    padding-right: 1.5em;
    width: 25%;
  }

  .d-2of9 {
    float: left;
    padding-right: 1.5em;
    width: 22.2222222222%;
  }

  .d-2of10 {
    float: left;
    padding-right: 1.5em;
    width: 20%;
  }

  .d-2of11 {
    float: left;
    padding-right: 1.5em;
    width: 18.1818181818%;
  }

  .d-2of12 {
    float: left;
    padding-right: 1.5em;
    width: 16.6666666667%;
  }

  .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.8571428571%;
  }

  .d-3of8 {
    float: left;
    padding-right: 1.5em;
    width: 37.5%;
  }

  .d-3of9 {
    float: left;
    padding-right: 1.5em;
    width: 33.3333333333%;
  }

  .d-3of10 {
    float: left;
    padding-right: 1.5em;
    width: 30%;
  }

  .d-3of11 {
    float: left;
    padding-right: 1.5em;
    width: 27.2727272727%;
  }

  .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.6666666667%;
  }

  .d-4of7 {
    float: left;
    padding-right: 1.5em;
    width: 57.1428571429%;
  }

  .d-4of8 {
    float: left;
    padding-right: 1.5em;
    width: 50%;
  }

  .d-4of9 {
    float: left;
    padding-right: 1.5em;
    width: 44.4444444444%;
  }

  .d-4of10 {
    float: left;
    padding-right: 1.5em;
    width: 40%;
  }

  .d-4of11 {
    float: left;
    padding-right: 1.5em;
    width: 36.3636363636%;
  }

  .d-4of12 {
    float: left;
    padding-right: 1.5em;
    width: 33.3333333333%;
  }

  .d-5of6 {
    float: left;
    padding-right: 1.5em;
    width: 83.3333333333%;
  }

  .d-5of7 {
    float: left;
    padding-right: 1.5em;
    width: 71.4285714286%;
  }

  .d-5of8 {
    float: left;
    padding-right: 1.5em;
    width: 62.5%;
  }

  .d-5of9 {
    float: left;
    padding-right: 1.5em;
    width: 55.5555555556%;
  }

  .d-5of10 {
    float: left;
    padding-right: 1.5em;
    width: 50%;
  }

  .d-5of11 {
    float: left;
    padding-right: 1.5em;
    width: 45.4545454545%;
  }

  .d-5of12 {
    float: left;
    padding-right: 1.5em;
    width: 41.6666666667%;
  }

  .d-6of7 {
    float: left;
    padding-right: 1.5em;
    width: 85.7142857143%;
  }

  .d-6of8 {
    float: left;
    padding-right: 1.5em;
    width: 75%;
  }

  .d-6of9 {
    float: left;
    padding-right: 1.5em;
    width: 66.6666666667%;
  }

  .d-6of10 {
    float: left;
    padding-right: 1.5em;
    width: 60%;
  }

  .d-6of11 {
    float: left;
    padding-right: 1.5em;
    width: 54.5454545455%;
  }

  .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.7777777778%;
  }

  .d-7of10 {
    float: left;
    padding-right: 1.5em;
    width: 70%;
  }

  .d-7of11 {
    float: left;
    padding-right: 1.5em;
    width: 63.6363636364%;
  }

  .d-7of12 {
    float: left;
    padding-right: 1.5em;
    width: 58.3333333333%;
  }

  .d-8of9 {
    float: left;
    padding-right: 1.5em;
    width: 88.8888888889%;
  }

  .d-8of10 {
    float: left;
    padding-right: 1.5em;
    width: 80%;
  }

  .d-8of11 {
    float: left;
    padding-right: 1.5em;
    width: 72.7272727273%;
  }

  .d-8of12 {
    float: left;
    padding-right: 1.5em;
    width: 66.6666666667%;
  }

  .d-9of10 {
    float: left;
    padding-right: 1.5em;
    width: 90%;
  }

  .d-9of11 {
    float: left;
    padding-right: 1.5em;
    width: 81.8181818182%;
  }

  .d-9of12 {
    float: left;
    padding-right: 1.5em;
    width: 75%;
  }

  .d-10of11 {
    float: left;
    padding-right: 1.5em;
    width: 90.9090909091%;
  }

  .d-10of12 {
    float: left;
    padding-right: 1.5em;
    width: 83.3333333333%;
  }

  .d-11of12 {
    float: left;
    padding-right: 1.5em;
    width: 91.6666666667%;
  }
}
.last-col {
  float: right;
  padding-right: 0;
}

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

#sjmm-member-display-page-wrapper a.button {
  text-transform: none;
}
#sjmm-member-display-page-wrapper .submit {
  text-align: right;
}

.memberships-email-table {
  width: 100%;
}