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

Stylesheet: IE Stylesheet

So instead of using the respond.js file to add media query support
to IE, we're going to use SASS to create an easily readable css file.
Here, we import all the styles the standard stylesheet gets, only
without the media queries. No need to worry about editing anything!

******************************************************************/
/******************************************************************
IMPORTS & DEPENDENCIES
Remember, all the BASE styles are called already since IE can
read those. Below, we need to import only the stuff IE can't
understand (what's inside the media queries). We also need to
import the mixins file so SASS can understand the variables.
******************************************************************/
/******************************************************************
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/
*********************/
/*#262626;*/
/*
Here's a great tutorial on how to
use color variables properly:
http://sachagreif.com/sass-color-variables/
*/
/*
==============================================
CSS3 ANIMATION CHEAT SHEET
==============================================

Made by Justin Aguilar

www.justinaguilar.com/animations/

Questions, comments, concerns, love letters:
justin@justinaguilar.com
==============================================
*/
/*
==============================================
slideDown
==============================================
*/
/* line 91, ../scss/partials/_variables.scss */
.slideDown {
  animation-name: slideDown;
  -webkit-animation-name: slideDown;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: visible !important;
}

@keyframes slideDown {
  0% {
    transform: translateY(-100%);
  }
  50% {
    transform: translateY(8%);
  }
  65% {
    transform: translateY(-4%);
  }
  80% {
    transform: translateY(4%);
  }
  95% {
    transform: translateY(-2%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes slideDown {
  0% {
    -webkit-transform: translateY(-100%);
  }
  50% {
    -webkit-transform: translateY(8%);
  }
  65% {
    -webkit-transform: translateY(-4%);
  }
  80% {
    -webkit-transform: translateY(4%);
  }
  95% {
    -webkit-transform: translateY(-2%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}
/*
==============================================
slideUp
==============================================
*/
/* line 153, ../scss/partials/_variables.scss */
.slideUp {
  animation-name: slideUp;
  -webkit-animation-name: slideUp;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: visible !important;
}

@keyframes slideUp {
  0% {
    transform: translateY(100%);
  }
  50% {
    transform: translateY(-8%);
  }
  65% {
    transform: translateY(4%);
  }
  80% {
    transform: translateY(-4%);
  }
  95% {
    transform: translateY(2%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes slideUp {
  0% {
    -webkit-transform: translateY(100%);
  }
  50% {
    -webkit-transform: translateY(-8%);
  }
  65% {
    -webkit-transform: translateY(4%);
  }
  80% {
    -webkit-transform: translateY(-4%);
  }
  95% {
    -webkit-transform: translateY(2%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}
/*
==============================================
slideUp
==============================================
*/
/* line 215, ../scss/partials/_variables.scss */
.slideUpSlow {
  animation-name: slideUpSlow;
  -webkit-animation-name: slideUpSlow;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: visible !important;
}

@keyframes slideUpSlow {
  0% {
    opacity: 0.3;
    transform: translateY(10%);
  }
  100% {
    opacity: 1;
    transform: translateY(0%);
  }
}
@-webkit-keyframes slideUpSlow {
  0% {
    opacity: 0.3;
    -webkit-transform: translateY(10%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0%);
  }
}
/*
==============================================
slideLeft
==============================================
*/
/* line 260, ../scss/partials/_variables.scss */
.slideLeft {
  animation-name: slideLeft;
  -webkit-animation-name: slideLeft;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible !important;
}

@keyframes slideLeft {
  0% {
    transform: translateX(150%);
  }
  50% {
    transform: translateX(-8%);
  }
  65% {
    transform: translateX(4%);
  }
  80% {
    transform: translateX(-4%);
  }
  95% {
    transform: translateX(2%);
  }
  100% {
    transform: translateX(0%);
  }
}
@-webkit-keyframes slideLeft {
  0% {
    -webkit-transform: translateX(150%);
  }
  50% {
    -webkit-transform: translateX(-8%);
  }
  65% {
    -webkit-transform: translateX(4%);
  }
  80% {
    -webkit-transform: translateX(-4%);
  }
  95% {
    -webkit-transform: translateX(2%);
  }
  100% {
    -webkit-transform: translateX(0%);
  }
}
/*
==============================================
slideRight
==============================================
*/
/* line 322, ../scss/partials/_variables.scss */
.slideRight {
  animation-name: slideRight;
  -webkit-animation-name: slideRight;
  animation-duration: .5s;
  -webkit-animation-duration: .5s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible !important;
}

@keyframes slideRight {
  0% {
    opacity: 0;
    transform: translateX(-10%);
  }
  100% {
    opacity: 1;
    transform: translateX(0%);
  }
}
@-webkit-keyframes slideRight {
  0% {
    opacity: 0;
    -webkit-transform: translateX(-10%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateX(0%);
  }
}
/*
==============================================
slideExpandUp
==============================================
*/
/* line 366, ../scss/partials/_variables.scss */
.slideExpandUp {
  animation-name: slideExpandUp;
  -webkit-animation-name: slideExpandUp;
  animation-duration: 1.6s;
  -webkit-animation-duration: 1.6s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease -out;
  visibility: visible !important;
}

@keyframes slideExpandUp {
  0% {
    transform: translateY(100%) scaleX(0.5);
  }
  30% {
    transform: translateY(-8%) scaleX(0.5);
  }
  40% {
    transform: translateY(2%) scaleX(0.5);
  }
  50% {
    transform: translateY(0%) scaleX(1.1);
  }
  60% {
    transform: translateY(0%) scaleX(0.9);
  }
  70% {
    transform: translateY(0%) scaleX(1.05);
  }
  80% {
    transform: translateY(0%) scaleX(0.95);
  }
  90% {
    transform: translateY(0%) scaleX(1.02);
  }
  100% {
    transform: translateY(0%) scaleX(1);
  }
}
@-webkit-keyframes slideExpandUp {
  0% {
    -webkit-transform: translateY(100%) scaleX(0.5);
  }
  30% {
    -webkit-transform: translateY(-8%) scaleX(0.5);
  }
  40% {
    -webkit-transform: translateY(2%) scaleX(0.5);
  }
  50% {
    -webkit-transform: translateY(0%) scaleX(1.1);
  }
  60% {
    -webkit-transform: translateY(0%) scaleX(0.9);
  }
  70% {
    -webkit-transform: translateY(0%) scaleX(1.05);
  }
  80% {
    -webkit-transform: translateY(0%) scaleX(0.95);
  }
  90% {
    -webkit-transform: translateY(0%) scaleX(1.02);
  }
  100% {
    -webkit-transform: translateY(0%) scaleX(1);
  }
}
/*
==============================================
expandUp
==============================================
*/
/* line 446, ../scss/partials/_variables.scss */
.expandUp {
  animation-name: expandUp;
  -webkit-animation-name: expandUp;
  animation-duration: 0.7s;
  -webkit-animation-duration: 0.7s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  visibility: visible !important;
}

@keyframes expandUp {
  0% {
    transform: translateY(100%) scale(0.6) scaleY(0.5);
  }
  60% {
    transform: translateY(-7%) scaleY(1.12);
  }
  75% {
    transform: translateY(3%);
  }
  100% {
    transform: translateY(0%) scale(1) scaleY(1);
  }
}
@-webkit-keyframes expandUp {
  0% {
    -webkit-transform: translateY(100%) scale(0.6) scaleY(0.5);
  }
  60% {
    -webkit-transform: translateY(-7%) scaleY(1.12);
  }
  75% {
    -webkit-transform: translateY(3%);
  }
  100% {
    -webkit-transform: translateY(0%) scale(1) scaleY(1);
  }
}
/*
==============================================
fadeIn
==============================================
*/
/* line 495, ../scss/partials/_variables.scss */
.fadeIn {
  animation-name: fadeIn;
  -webkit-animation-name: fadeIn;
  animation-duration: 1s;
  -webkit-animation-duration: 1s;
  animation-timing-function: css animation ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  visibility: visible !important;
}

@keyframes fadeIn {
  0% {
    transform: scale(0.5);
    opacity: 0.0;
  }
  60% {
    transform: scale(1.05);
  }
  80% {
    transform: scale(0.99);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    -webkit-transform: scale(0.5);
    opacity: 0.0;
  }
  60% {
    -webkit-transform: scale(1.05);
  }
  80% {
    -webkit-transform: scale(0.99);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
}
/*
==============================================
expandOpen
==============================================
*/
/* line 554, ../scss/partials/_variables.scss */
.expandOpen {
  animation-name: expandOpen;
  -webkit-animation-name: expandOpen;
  animation-duration: 1.2s;
  -webkit-animation-duration: 1.2s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  visibility: visible !important;
}

@keyframes expandOpen {
  0% {
    transform: scale(1.8);
  }
  50% {
    transform: scale(0.95);
  }
  80% {
    transform: scale(1.05);
  }
  90% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
  }
}
@-webkit-keyframes expandOpen {
  0% {
    -webkit-transform: scale(1.8);
  }
  50% {
    -webkit-transform: scale(0.95);
  }
  80% {
    -webkit-transform: scale(1.05);
  }
  90% {
    -webkit-transform: scale(0.98);
  }
  100% {
    -webkit-transform: scale(1);
  }
}
/*
==============================================
bigEntrance
==============================================
*/
/* line 610, ../scss/partials/_variables.scss */
.bigEntrance {
  animation-name: bigEntrance;
  -webkit-animation-name: bigEntrance;
  animation-duration: 1.6s;
  -webkit-animation-duration: 1.6s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  visibility: visible !important;
}

@keyframes bigEntrance {
  0% {
    transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
    opacity: 0.2;
  }
  30% {
    transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
    opacity: 1;
  }
  45% {
    transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  60% {
    transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  75% {
    transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  90% {
    transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
}
@-webkit-keyframes bigEntrance {
  0% {
    -webkit-transform: scale(0.3) rotate(6deg) translateX(-30%) translateY(30%);
    opacity: 0.2;
  }
  30% {
    -webkit-transform: scale(1.03) rotate(-2deg) translateX(2%) translateY(-2%);
    opacity: 1;
  }
  45% {
    -webkit-transform: scale(0.98) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  60% {
    -webkit-transform: scale(1.01) rotate(-1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  75% {
    -webkit-transform: scale(0.99) rotate(1deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  90% {
    -webkit-transform: scale(1.01) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1) rotate(0deg) translateX(0%) translateY(0%);
    opacity: 1;
  }
}
/*
==============================================
hatch
==============================================
*/
/* line 691, ../scss/partials/_variables.scss */
.hatch {
  animation-name: hatch;
  -webkit-animation-name: hatch;
  animation-duration: 2s;
  -webkit-animation-duration: 2s;
  animation-timing-function: ease-in-out;
  -webkit-animation-timing-function: ease-in-out;
  transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
  visibility: visible !important;
}

@keyframes hatch {
  0% {
    transform: rotate(0deg) scaleY(0.6);
  }
  20% {
    transform: rotate(-2deg) scaleY(1.05);
  }
  35% {
    transform: rotate(2deg) scaleY(1);
  }
  50% {
    transform: rotate(-2deg);
  }
  65% {
    transform: rotate(1deg);
  }
  80% {
    transform: rotate(-1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
@-webkit-keyframes hatch {
  0% {
    -webkit-transform: rotate(0deg) scaleY(0.6);
  }
  20% {
    -webkit-transform: rotate(-2deg) scaleY(1.05);
  }
  35% {
    -webkit-transform: rotate(2deg) scaleY(1);
  }
  50% {
    -webkit-transform: rotate(-2deg);
  }
  65% {
    -webkit-transform: rotate(1deg);
  }
  80% {
    -webkit-transform: rotate(-1deg);
  }
  100% {
    -webkit-transform: rotate(0deg);
  }
}
/*
==============================================
bounce
==============================================
*/
/* line 764, ../scss/partials/_variables.scss */
.bounce {
  animation-name: bounce;
  -webkit-animation-name: bounce;
  animation-duration: 1.6s;
  -webkit-animation-duration: 1.6s;
  animation-timing-function: ease;
  -webkit-animation-timing-function: ease;
  transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
}

@keyframes bounce {
  0% {
    transform: translateY(0%) scaleY(0.6);
  }
  60% {
    transform: translateY(-100%) scaleY(1.1);
  }
  70% {
    transform: translateY(0%) scaleY(0.95) scaleX(1.05);
  }
  80% {
    transform: translateY(0%) scaleY(1.05) scaleX(1);
  }
  90% {
    transform: translateY(0%) scaleY(0.95) scaleX(1);
  }
  100% {
    transform: translateY(0%) scaleY(1) scaleX(1);
  }
}
@-webkit-keyframes bounce {
  0% {
    -webkit-transform: translateY(0%) scaleY(0.6);
  }
  60% {
    -webkit-transform: translateY(-100%) scaleY(1.1);
  }
  70% {
    -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1.05);
  }
  80% {
    -webkit-transform: translateY(0%) scaleY(1.05) scaleX(1);
  }
  90% {
    -webkit-transform: translateY(0%) scaleY(0.95) scaleX(1);
  }
  100% {
    -webkit-transform: translateY(0%) scaleY(1) scaleX(1);
  }
}
/*
==============================================
pulse
==============================================
*/
/* line 828, ../scss/partials/_variables.scss */
.pulse {
  animation-name: pulse;
  -webkit-animation-name: pulse;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes pulse {
  0% {
    transform: scale(0.9);
    opacity: 0.7;
  }
  50% {
    transform: scale(1);
    opacity: 1;
  }
  100% {
    transform: scale(0.9);
    opacity: 0.7;
  }
}
@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale(0.95);
    opacity: 0.7;
  }
  50% {
    -webkit-transform: scale(1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(0.95);
    opacity: 0.7;
  }
}
/*
==============================================
floating
==============================================
*/
/* line 875, ../scss/partials/_variables.scss */
.floating {
  animation-name: floating;
  -webkit-animation-name: floating;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes floating {
  0% {
    transform: translateY(0%);
  }
  50% {
    transform: translateY(8%);
  }
  100% {
    transform: translateY(0%);
  }
}
@-webkit-keyframes floating {
  0% {
    -webkit-transform: translateY(0%);
  }
  50% {
    -webkit-transform: translateY(8%);
  }
  100% {
    -webkit-transform: translateY(0%);
  }
}
/*
==============================================
tossing
==============================================
*/
/* line 916, ../scss/partials/_variables.scss */
.tossing {
  animation-name: tossing;
  -webkit-animation-name: tossing;
  animation-duration: 2.5s;
  -webkit-animation-duration: 2.5s;
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
}

@keyframes tossing {
  0% {
    transform: rotate(-4deg);
  }
  50% {
    transform: rotate(4deg);
  }
  100% {
    transform: rotate(-4deg);
  }
}
@-webkit-keyframes tossing {
  0% {
    -webkit-transform: rotate(-4deg);
  }
  50% {
    -webkit-transform: rotate(4deg);
  }
  100% {
    -webkit-transform: rotate(-4deg);
  }
}
/*
==============================================
pullUp
==============================================
*/
/* line 957, ../scss/partials/_variables.scss */
.pullUp {
  animation-name: pullUp;
  -webkit-animation-name: pullUp;
  animation-duration: 1.1s;
  -webkit-animation-duration: 1.1s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  transform-origin: 50% 100%;
  -ms-transform-origin: 50% 100%;
  -webkit-transform-origin: 50% 100%;
}

@keyframes pullUp {
  0% {
    transform: scaleY(0.1);
  }
  40% {
    transform: scaleY(1.02);
  }
  60% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.01);
  }
  100% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.01);
  }
  100% {
    transform: scaleY(1);
  }
}
@-webkit-keyframes pullUp {
  0% {
    -webkit-transform: scaleY(0.1);
  }
  40% {
    -webkit-transform: scaleY(1.02);
  }
  60% {
    -webkit-transform: scaleY(0.98);
  }
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(0.98);
  }
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(1);
  }
}
/*
==============================================
pullDown
==============================================
*/
/* line 1026, ../scss/partials/_variables.scss */
.pullDown {
  animation-name: pullDown;
  -webkit-animation-name: pullDown;
  animation-duration: 1.1s;
  -webkit-animation-duration: 1.1s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  transform-origin: 50% 0%;
  -ms-transform-origin: 50% 0%;
  -webkit-transform-origin: 50% 0%;
}

@keyframes pullDown {
  0% {
    transform: scaleY(0.1);
  }
  40% {
    transform: scaleY(1.02);
  }
  60% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.01);
  }
  100% {
    transform: scaleY(0.98);
  }
  80% {
    transform: scaleY(1.01);
  }
  100% {
    transform: scaleY(1);
  }
}
@-webkit-keyframes pullDown {
  0% {
    -webkit-transform: scaleY(0.1);
  }
  40% {
    -webkit-transform: scaleY(1.02);
  }
  60% {
    -webkit-transform: scaleY(0.98);
  }
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(0.98);
  }
  80% {
    -webkit-transform: scaleY(1.01);
  }
  100% {
    -webkit-transform: scaleY(1);
  }
}
/*
==============================================
stretchLeft
==============================================
*/
/* line 1095, ../scss/partials/_variables.scss */
.stretchLeft {
  animation-name: stretchLeft;
  -webkit-animation-name: stretchLeft;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  transform-origin: 100% 0%;
  -ms-transform-origin: 100% 0%;
  -webkit-transform-origin: 100% 0%;
}

@keyframes stretchLeft {
  0% {
    transform: scaleX(0.3);
  }
  40% {
    transform: scaleX(1.02);
  }
  60% {
    transform: scaleX(0.98);
  }
  80% {
    transform: scaleX(1.01);
  }
  100% {
    transform: scaleX(0.98);
  }
  80% {
    transform: scaleX(1.01);
  }
  100% {
    transform: scaleX(1);
  }
}
@-webkit-keyframes stretchLeft {
  0% {
    -webkit-transform: scaleX(0.3);
  }
  40% {
    -webkit-transform: scaleX(1.02);
  }
  60% {
    -webkit-transform: scaleX(0.98);
  }
  80% {
    -webkit-transform: scaleX(1.01);
  }
  100% {
    -webkit-transform: scaleX(0.98);
  }
  80% {
    -webkit-transform: scaleX(1.01);
  }
  100% {
    -webkit-transform: scaleX(1);
  }
}
/*
==============================================
stretchRight
==============================================
*/
/* line 1164, ../scss/partials/_variables.scss */
.stretchRight {
  animation-name: stretchRight;
  -webkit-animation-name: stretchRight;
  animation-duration: 1.5s;
  -webkit-animation-duration: 1.5s;
  animation-timing-function: ease-out;
  -webkit-animation-timing-function: ease-out;
  transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  -webkit-transform-origin: 0% 0%;
}

@keyframes stretchRight {
  0% {
    transform: scaleX(0.3);
  }
  40% {
    transform: scaleX(1.02);
  }
  60% {
    transform: scaleX(0.98);
  }
  80% {
    transform: scaleX(1.01);
  }
  100% {
    transform: scaleX(0.98);
  }
  80% {
    transform: scaleX(1.01);
  }
  100% {
    transform: scaleX(1);
  }
}
@-webkit-keyframes stretchRight {
  0% {
    -webkit-transform: scaleX(0.3);
  }
  40% {
    -webkit-transform: scaleX(1.02);
  }
  60% {
    -webkit-transform: scaleX(0.98);
  }
  80% {
    -webkit-transform: scaleX(1.01);
  }
  100% {
    -webkit-transform: scaleX(0.98);
  }
  80% {
    -webkit-transform: scaleX(1.01);
  }
  100% {
    -webkit-transform: scaleX(1);
  }
}
/******************************************************************
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: IE Grid Styles

Since the example grid is based on media queries, so rather than
setup some js library that would make IE8 and below understand
media queries, let's just add some styles that serves a fixed grid.

Again, if you want to roll your own, just remove this junk and put
whatever you use in here.

******************************************************************/
/******************************************************************
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
*********************/
/* line 30, ../scss/breakpoints/_481up.scss */
.header #inner-header {
  height: 108px;
}
/* line 33, ../scss/breakpoints/_481up.scss */
.header #inner-header #logo {
  margin-top: 16px;
}
/* line 36, ../scss/breakpoints/_481up.scss */
.header #inner-header .mobile-nav {
  position: absolute;
  left: inherit;
  top: inherit;
  bottom: 10px;
  right: 1.5em;
}

/* line 50, ../scss/breakpoints/_481up.scss */
.m-all {
  padding: 1.5em;
}

/* line 56, ../scss/breakpoints/_481up.scss */
.nav {
  margin: 0;
  border-bottom: 0;
  /* end .menu li */
  /* highlight current page */
  /* end current highlighters */
}
/* line 61, ../scss/breakpoints/_481up.scss */
.nav li {
  margin-left: 10px;
  /*
  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/
  */
}
/* line 63, ../scss/breakpoints/_481up.scss */
.nav li a {
  /*
  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!
  */
}
/* line 93, ../scss/breakpoints/_481up.scss */
.nav li ul.sub-menu li a,
.nav li ul.children li a {
  padding-left: 30px;
}
/* line 118, ../scss/breakpoints/_481up.scss */
.nav li.current-menu-item a,
.nav li.current_page_item a,
.nav li.current_page_ancestor a {
  color: #004694;
}

/* end .nav */
/*********************
POSTS & CONTENT STYLES
*********************/
/* entry content */
/* line 139, ../scss/breakpoints/_481up.scss */
.entry-content {
  /* at this larger size, we can start to align images */
}
/* line 143, ../scss/breakpoints/_481up.scss */
.entry-content .alignleft, .entry-content img.alignleft {
  margin-right: 1.5em;
  display: inline;
  float: left;
}
/* line 148, ../scss/breakpoints/_481up.scss */
.entry-content .alignright, .entry-content img.alignright {
  margin-left: 1.5em;
  display: inline;
  float: right;
}
/* line 153, ../scss/breakpoints/_481up.scss */
.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 */
/******************************************************************
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
*********************/
/*********************
LAYOUT & GRID STYLES
*********************/
/* line 26, ../scss/breakpoints/_768up.scss */
.wrap {
  width: 760px;
}

/*********************
HEADER STYLES
*********************/
/* line 34, ../scss/breakpoints/_768up.scss */
.header {
  position: fixed;
}
/* line 39, ../scss/breakpoints/_768up.scss */
.header #logo {
  margin-top: 16px;
}
/* line 42, ../scss/breakpoints/_768up.scss */
.header .top-nav {
  display: block;
}
/* line 45, ../scss/breakpoints/_768up.scss */
.header .mobile-nav {
  display: none;
}

/* line 51, ../scss/breakpoints/_768up.scss */
.footer .bot-nav {
  display: block;
}
/* line 54, ../scss/breakpoints/_768up.scss */
.footer .mobile-nav {
  display: none;
}

/* line 64, ../scss/breakpoints/_768up.scss */
.row.slider h1 {
  padding: 22px .5em;
  background: none;
}
/* line 67, ../scss/breakpoints/_768up.scss */
.row.slider h1.shadow {
  background: url(../images/bg_blue.png);
}

/* line 74, ../scss/breakpoints/_768up.scss */
.row.about .m-all, .row.about .t-all, .row.about d-all {
  padding: 3.5em 2.5em 6em;
}

/* line 79, ../scss/breakpoints/_768up.scss */
.row.services .points {
  padding: .5em;
}

/*********************
NAVIGATION STYLES
*********************/
/* line 89, ../scss/breakpoints/_768up.scss */
.nav {
  /* end .menu ul li */
  /* highlight current page */
  /* end current highlighters */
}
/* line 94, ../scss/breakpoints/_768up.scss */
.nav li {
  margin-left: 14px;
  /*
  plan your menus and drop-downs wisely.
  */
  /* showing sub-menus */
}
/* line 97, ../scss/breakpoints/_768up.scss */
.nav li a {
  /*
  you can use hover styles here even though this size
  has the possibility of being a mobile device.
  */
}
/* line 114, ../scss/breakpoints/_768up.scss */
.nav li ul.sub-menu,
.nav li ul.children {
  margin-top: 0;
  border: 1px solid #ccc;
  border-top: 0;
  position: absolute;
  visibility: hidden;
  z-index: 8999;
  /* highlight sub-menu current page */
}
/* line 123, ../scss/breakpoints/_768up.scss */
.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.
  */
}
/* line 125, ../scss/breakpoints/_768up.scss */
.nav li ul.sub-menu li a,
.nav li ul.children li a {
  padding-left: 10px;
  border-right: 0;
  display: block;
  width: 180px;
  border-bottom: 1px solid #ccc;
}
/* line 142, ../scss/breakpoints/_768up.scss */
.nav li ul.sub-menu li:last-child a,
.nav li ul.children li:last-child a {
  border-bottom: 0;
}
/* line 152, ../scss/breakpoints/_768up.scss */
.nav li ul.sub-menu li ul,
.nav li ul.children li ul {
  top: 0;
  left: 100%;
}
/* line 167, ../scss/breakpoints/_768up.scss */
.nav li:hover > ul {
  top: auto;
  visibility: visible;
}

/* end .nav */
/*********************
SIDEBARS & ASIDES
*********************/
/* line 187, ../scss/breakpoints/_768up.scss */
.sidebar {
  /* margin-top: 2.2em; */
}

/* line 199, ../scss/breakpoints/_768up.scss */
.widget ul li {
  /* deep nesting */
}

/* 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!
*/
/* line 314, ../scss/breakpoints/_768up.scss */
.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 */
/******************************************************************
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.

******************************************************************/
/* line 12, ../scss/breakpoints/_1030up.scss */
.wrap {
  width: 980px;
}

/*
you can call the larger styles if you want, but there's really no need
*/
/******************************************************************
ADDITIONAL IE FIXES
These fixes are now ONLY seen by IE, so you don't have to worry
about using prefixes, although it's best practice. For more info
on using Modernizr classes, check out this link:
http://www.modernizr.com/docs/
******************************************************************/
/*
For example, you can use something like:

.no-textshadow .class { ... }

You can also target specific versions by using the classes applied to
the html element. These can sometimes change, so take a look inside the
header.php file to see what they are:


.lt-ie8 .class { ... }

*/

/*# sourceMappingURL=ie.css.map */