@import url(//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,400,300,600,700,800);
@import url(//fonts.googleapis.com/css?family=Open+Sans+Condensed:300,700);
@font-face {
  font-family: 'FontAwesome';
  src: url("../fonts/fontawesome-webfont.eot?v=4.2.0");
  src: url("../fonts/fontawesome-webfont.eot?#iefix&v=4.2.0") format("embedded-opentype"), url("../fonts/fontawesome-webfont.woff?v=4.2.0") format("woff"), url("../fonts/fontawesome-webfont.ttf?v=4.2.0") format("truetype"), url("../fonts/fontawesome-webfont.svg?v=4.2.0#fontawesomeregular") format("svg");
  font-weight: normal;
  font-style: normal; }
/******************************************************************
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: Typography

Need to import a font or set of icons for your site? Drop them in
here or just use this to establish your typographical grid. Or not.
Do whatever you want to...GOSH!

Helpful Articles:
http://trentwalton.com/2012/06/19/fluid-type/
http://ia.net/blog/responsive-typography-the-basics/
http://alistapart.com/column/responsive-typography-is-a-physical-discipline

******************************************************************/
/*********************
FONT FACE (IN YOUR FACE)
*********************/
/*  To embed your own fonts, use this syntax
  and place your fonts inside the
  library/fonts folder. For more information
  on embedding fonts, go to:
  http://www.fontsquirrel.com/
  Be sure to remove the comment brackets.
*/
/*  @font-face {
      font-family: 'Font Name';
      src: url('library/fonts/font-name.eot');
      src: url('library/fonts/font-name.eot?#iefix') format('embedded-opentype'),
             url('library/fonts/font-name.woff') format('woff'),
             url('library/fonts/font-name.ttf') format('truetype'),
             url('library/fonts/font-name.svg#font-name') format('svg');
      font-weight: normal;
      font-style: normal;
  }
*/
@font-face {
  font-family: 'amaticbold';
  src: url("../fonts/Amatic-Bold-webfont.eot");
  src: url("../fonts/Amatic-Bold-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/Amatic-Bold-webfont.woff2") format("woff2"), url("../fonts/Amatic-Bold-webfont.woff") format("woff"), url("../fonts/Amatic-Bold-webfont.ttf") format("truetype"), url("../fonts/Amatic-Bold-webfont.svg#amaticbold") format("svg");
  font-weight: normal;
  font-style: normal; }
@font-face {
  font-family: 'amatic_scregular';
  src: url("../fonts/AmaticSC-Regular-webfont.eot");
  src: url("../fonts/AmaticSC-Regular-webfont.eot?#iefix") format("embedded-opentype"), url("../fonts/AmaticSC-Regular-webfont.woff2") format("woff2"), url("../fonts/AmaticSC-Regular-webfont.woff") format("woff"), url("../fonts/AmaticSC-Regular-webfont.ttf") format("truetype"), url("../fonts/AmaticSC-Regular-webfont.svg#amatic_scregular") format("svg");
  font-weight: normal;
  font-style: normal; }
/*
The following is based of Typebase:
https://github.com/devinhunt/typebase.css
I've edited it a bit, but it's a nice starting point.
*/
/*
 i imported this one in the functions file so bones would look sweet.
 don't forget to remove it for your site.
*/
/*
some nice typographical defaults
more here: http://www.newnet-soft.com/blog/csstypography
*/
p {
  -ms-word-break: break-all;
  -ms-word-wrap: break-all;
  word-break: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
  -moz-hyphens: auto;
  hyphens: auto;
  -webkit-hyphenate-before: 2;
  -webkit-hyphenate-after: 3;
  hyphenate-lines: 3;
  -webkit-font-feature-settings: "liga", "dlig";
  -moz-font-feature-settings: "liga=1, dlig=1";
  -ms-font-feature-settings: "liga", "dlig";
  -o-font-feature-settings: "liga", "dlig";
  font-feature-settings: "liga", "dlig"; }

/* fix bootstrap font sizing */
html {
  font-size: inherit; }

/******************************************************************
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/
*********************/
/*$black:             #323944;*/
/*$text-color:        #5c6b80;*/
/*$meta-gray:         #9fa6b4;*/
/*$green:             #7dd667;*/
/* STC colors */
/*$link-color:        $bones-pink;*/
/*
Here's a great tutorial on how to
use color variables properly:
http://sachagreif.com/sass-color-variables/
*/
/**
 * General
 */
html {
  font-size: inherit; }

img {
  max-width: 100%; }

.page-header .btn {
  float: right;
  margin-left: 0.5em;
  margin-top: 0.1em; }

/* Checklists */
ol.checklist,
ul.checklist {
  margin-left: 1.15em; }
  ol.checklist li,
  ul.checklist li {
    list-style: none; }
    ol.checklist li.completed,
    ul.checklist li.completed {
      opacity: 0.7;
      text-decoration: line-through; }
    ol.checklist li input[type="checkbox"],
    ul.checklist li input[type="checkbox"] {
      margin-right: 0.35em; }

.highlight .hll {
  background-color: #ffffcc; }

.highlight .c {
  color: #408080;
  font-style: italic; }

/* Comment */
.highlight .err {
  /*border: 1px solid #FF0000*/ }

/* Error */
.highlight .k {
  color: #008000;
  font-weight: bold; }

/* Keyword */
.highlight .o {
  color: #666666; }

/* Operator */
.highlight .cm {
  color: #408080;
  font-style: italic; }

/* Comment.Multiline */
.highlight .cp {
  color: #BC7A00; }

/* Comment.Preproc */
.highlight .c1 {
  color: #408080;
  font-style: italic; }

/* Comment.Single */
.highlight .cs {
  color: #408080;
  font-style: italic; }

/* Comment.Special */
.highlight .gd {
  color: #A00000; }

/* Generic.Deleted */
.highlight .ge {
  font-style: italic; }

/* Generic.Emph */
.highlight .gr {
  color: #FF0000; }

/* Generic.Error */
.highlight .gh {
  color: #000080;
  font-weight: bold; }

/* Generic.Heading */
.highlight .gi {
  color: #00A000; }

/* Generic.Inserted */
.highlight .go {
  color: #888888; }

/* Generic.Output */
.highlight .gp {
  color: #000080;
  font-weight: bold; }

/* Generic.Prompt */
.highlight .gs {
  font-weight: bold; }

/* Generic.Strong */
.highlight .gu {
  color: #800080;
  font-weight: bold; }

/* Generic.Subheading */
.highlight .gt {
  color: #0044DD; }

/* Generic.Traceback */
.highlight .kc {
  color: #008000;
  font-weight: bold; }

/* Keyword.Constant */
.highlight .kd {
  color: #008000;
  font-weight: bold; }

/* Keyword.Declaration */
.highlight .kn {
  color: #008000;
  font-weight: bold; }

/* Keyword.Namespace */
.highlight .kp {
  color: #008000; }

/* Keyword.Pseudo */
.highlight .kr {
  color: #008000;
  font-weight: bold; }

/* Keyword.Reserved */
.highlight .kt {
  color: #B00040; }

/* Keyword.Type */
.highlight .m {
  color: #666666; }

/* Literal.Number */
.highlight .s {
  color: #BA2121; }

/* Literal.String */
.highlight .na {
  color: #7D9029; }

/* Name.Attribute */
.highlight .nb {
  color: #008000; }

/* Name.Builtin */
.highlight .nc {
  color: #0000FF;
  font-weight: bold; }

/* Name.Class */
.highlight .no {
  color: #880000; }

/* Name.Constant */
.highlight .nd {
  color: #AA22FF; }

/* Name.Decorator */
.highlight .ni {
  color: #999999;
  font-weight: bold; }

/* Name.Entity */
.highlight .ne {
  color: #D2413A;
  font-weight: bold; }

/* Name.Exception */
.highlight .nf {
  color: #0000FF; }

/* Name.Function */
.highlight .nl {
  color: #A0A000; }

/* Name.Label */
.highlight .nn {
  color: #0000FF;
  font-weight: bold; }

/* Name.Namespace */
.highlight .nt {
  color: #008000;
  font-weight: bold; }

/* Name.Tag */
.highlight .nv {
  color: #19177C; }

/* Name.Variable */
.highlight .ow {
  color: #AA22FF;
  font-weight: bold; }

/* Operator.Word */
.highlight .w {
  color: #bbbbbb; }

/* Text.Whitespace */
.highlight .mb {
  color: #666666; }

/* Literal.Number.Bin */
.highlight .mf {
  color: #666666; }

/* Literal.Number.Float */
.highlight .mh {
  color: #666666; }

/* Literal.Number.Hex */
.highlight .mi {
  color: #666666; }

/* Literal.Number.Integer */
.highlight .mo {
  color: #666666; }

/* Literal.Number.Oct */
.highlight .sb {
  color: #BA2121; }

/* Literal.String.Backtick */
.highlight .sc {
  color: #BA2121; }

/* Literal.String.Char */
.highlight .sd {
  color: #BA2121;
  font-style: italic; }

/* Literal.String.Doc */
.highlight .s2 {
  color: #BA2121; }

/* Literal.String.Double */
.highlight .se {
  color: #BB6622;
  font-weight: bold; }

/* Literal.String.Escape */
.highlight .sh {
  color: #BA2121; }

/* Literal.String.Heredoc */
.highlight .si {
  color: #BB6688;
  font-weight: bold; }

/* Literal.String.Interpol */
.highlight .sx {
  color: #008000; }

/* Literal.String.Other */
.highlight .sr {
  color: #BB6688; }

/* Literal.String.Regex */
.highlight .s1 {
  color: #BA2121; }

/* Literal.String.Single */
.highlight .ss {
  color: #19177C; }

/* Literal.String.Symbol */
.highlight .bp {
  color: #008000; }

/* Name.Builtin.Pseudo */
.highlight .vc {
  color: #19177C; }

/* Name.Variable.Class */
.highlight .vg {
  color: #19177C; }

/* Name.Variable.Global */
.highlight .vi {
  color: #19177C; }

/* Name.Variable.Instance */
.highlight .il {
  color: #666666; }

/* Literal.Number.Integer.Long */
.course-lesson {
  /* Title and subtitle */ }
  .course-lesson img.tex {
    vertical-align: -6px; }
  .course-lesson .title {
    text-align: center;
    font-size: 250%; }
  .course-lesson .subtitle {
    border-top: none;
    padding-top: 0;
    margin: 0;
    text-align: center;
    font-size: 140%; }
  .course-lesson .author {
    margin-top: 1em;
    text-align: center; }
  .course-lesson .date {
    margin-top: 1em;
    text-align: center; }
  .course-lesson a {
    text-decoration: underline; }
  .course-lesson a.tex {
    text-decoration: none; }
  .course-lesson code {
    font-size: 95%;
    color: #fa503a;
    font-weight: bold; }
  .course-lesson .number {
    margin-right: 1em; }
  .course-lesson h1 span.number {
    display: block;
    margin-bottom: 0.5em;
    font-size: 80%; }
  .course-lesson span.number {
    font-weight: bold; }
  .course-lesson .label {
    font-weight: bold;
    margin-right: 0.5em; }
  .course-lesson .header {
    font-weight: bold;
    margin-right: 0.5em; }
  .course-lesson .caption .header {
    font-weight: normal; }
  .course-lesson .code {
    margin-top: 0.2em;
    width: 100%;
    white-space: pre;
    font-family: "Courier New", Courier, monospace;
    border: 1px solid #999;
    background: #eee;
    margin-bottom: 1em; }
  .course-lesson .codelisting {
    width: 100%;
    border: 1px solid #999;
    background: #eee;
    margin-bottom: 1em;
    margin-top: 1em; }
  .course-lesson .codelisting .code {
    border: 0;
    margin-bottom: 0; }
  .course-lesson .codelisting .heading {
    width: 100%;
    background: #ccc;
    line-height: 1.2;
    padding-top: 0.1em;
    padding-bottom: 0.3em; }
  .course-lesson .codelisting .heading .number {
    margin-right: 0.3em;
    margin-left: 0.3em; }
  .course-lesson .codelisting .heading span.filepath {
    display: block;
    margin-left: 0.4em;
    margin-top: 0.2em;
    margin-bottom: 0.1em;
    padding-top: 10px;
    font-style: italic; }
  .course-lesson .codelisting span.break {
    margin-top: -0.4em; }
  .course-lesson .code .highlight .lineno {
    color: #666;
    font-weight: normal; }
  .course-lesson .filepath {
    font-family: Courier, monospace;
    font-size: 80%; }
  .course-lesson .inline_verbatim {
    font-family: Courier, monospace; }
  .course-lesson a.ref {
    color: #002f72; }
  .course-lesson .graphics.image {
    text-align: center; }
  .course-lesson .graphics.image img {
    margin-top: 2em;
    max-width: 100%; }
  .course-lesson .graphics.image.box img {
    border: 1px solid #666; }
  .course-lesson a .graphics img {
    display: block;
    margin: 2em auto auto; }
  .course-lesson .table {
    text-align: center;
    margin-top: 2em; }
  .course-lesson table.tabular {
    margin-left: auto;
    margin-right: auto; }
  .course-lesson .center {
    text-align: center; }
  .course-lesson .displaymath {
    text-align: center;
    margin-top: 1em;
    margin-bottom: 1em; }
  .course-lesson .caption {
    font-size: 0.85em;
    font-style: italic;
    text-align: center;
    margin-bottom: 3em;
    margin-top: 1em; }
  .course-lesson .equation {
    margin-top: 2em;
    margin-bottom: 2em; }
  .course-lesson .equation_number {
    float: right; }
  .course-lesson table.tabular {
    border-collapse: collapse; }
  .course-lesson .tabular th {
    padding: 0.5em; }
  .course-lesson .tabular th.align_left {
    text-align: left; }
  .course-lesson .tabular th.align_center {
    text-align: center; }
  .course-lesson .tabular th.align_right {
    text-align: right; }
  .course-lesson .tabular th.left_border {
    border-left: 1px solid black; }
  .course-lesson .tabular th.right_border {
    border-right: 1px solid black; }
  .course-lesson .tabular td {
    padding: 0.5em; }
  .course-lesson .tabular td.align_left {
    text-align: left; }
  .course-lesson .tabular td.align_center {
    text-align: center; }
  .course-lesson .tabular td.align_right {
    text-align: right; }
  .course-lesson .tabular td.left_border {
    border-left: 1px solid black; }
  .course-lesson .tabular td.right_border {
    border-right: 1px solid black; }
  .course-lesson .tabular tr.top_border {
    border-top: 1px solid black; }
  .course-lesson .tabular tr.bottom_border {
    border-bottom: 1px solid black; }
  .course-lesson .tabular tr.top_border {
    border-top: 1px solid black; }
  .course-lesson .footnotes {
    border-top: 1px solid black;
    margin-top: 5em;
    font-size: 90%; }
  .course-lesson sup.footnote {
    font-size: 90%;
    margin-right: 2px;
    line-height: 0; }
  .course-lesson sup.footnote.intersentence {
    margin-right: 0px; }
  .course-lesson sup.footnote a:visited {
    color: #002f72; }
  .course-lesson ol.footnotes a.arrow {
    text-decoration: none; }
  .course-lesson ol.footnotes.nonumbers li {
    list-style-type: none; }
  .course-lesson .footnotes .header {
    padding-top: 1em;
    padding-bottom: 0.5em;
    margin-left: 0.5em;
    font-size: 120%;
    font-weight: bold; }
  .course-lesson a.arrow {
    text-decoration: none; }
  .course-lesson a:visited.arrow {
    color: #002f72; }
  .course-lesson a.section {
    color: #070707;
    text-decoration: none; }
  .course-lesson a.heading {
    color: #000;
    text-decoration: none; }
    .course-lesson a.heading:hover {
      cursor: text;
      text-decoration: none; }
  .course-lesson .aside {
    border: 1px solid #999;
    padding: 0.5em;
    background: #eee;
    width: 100%; }
  .course-lesson .aside .heading {
    font-weight: bold; }
  .course-lesson .highlight {
    width: 100%;
    padding-right: 0.5px; }
  .course-lesson .highlight .go {
    color: darkgreen; }
  .course-lesson pre {
    line-height: 1.2em;
    font-family: monospace; }
  .course-lesson .highlight pre {
    margin: 10px 0 10px 10px;
    font-size: 82%;
    font-weight: bold; }
  .course-lesson #table_of_contents {
    margin-top: -1em;
    margin-bottom: 3em;
    margin-left: -1.8em; }
  .course-lesson #table_of_contents ul {
    list-style-type: none;
    list-style-position: outside;
    padding-left: 0;
    line-height: 1.2em; }
  .course-lesson #table_of_contents li.chapter {
    font-weight: bold;
    padding-top: 1.2em; }
  .course-lesson #table_of_contents ul li {
    padding-left: 3.6em; }
  .course-lesson #table_of_contents a {
    color: #002f72; }
  .course-lesson .navigation {
    font-size: 90%;
    padding-bottom: 2em; }
  .course-lesson .navigation .prev_page {
    float: left; }
  .course-lesson .navigation .next_page {
    float: right; }
  .course-lesson a span.undefined_ref {
    color: red; }
  .course-lesson .tt {
    font-family: Courier, monospace; }
  .course-lesson .sc {
    font-variant: small-caps; }
  .course-lesson .texhtml {
    line-height: 0.5; }
  .course-lesson span.break {
    display: block; }
  .course-lesson h1 span.break {
    display: block;
    margin-top: 0.5em; }
  .course-lesson span.intersentencespace {
    margin-right: 0.2em; }

.course-lesson {
  /* remove bootstrap's styles */ }
  .course-lesson h1 {
    display: none; }
  .course-lesson h1 a, .course-lesson h2 a, .course-lesson h3 a, .course-lesson h4 a, .course-lesson h5 a {
    color: #121212; }
  .course-lesson .heading.hyperref .number {
    display: none; }
  .course-lesson .aside .heading {
    font-size: 1.1em; }
  .course-lesson .highlight pre {
    background: transparent;
    border: 0;
    border-radius: 0;
    color: inherit;
    font-size: 108%;
    padding: 0; }

.list-group.message-list .list-group-item.message-closed {
  opacity: 0.5; }

.step-progression {
  margin: 0 0 1.3em;
  padding: 0 0 1.3em;
  position: relative; }
  .step-progression li {
    color: #b7b7b7;
    display: block;
    float: left;
    height: 1.95em;
    line-height: 1.95em;
    margin: 0 1.5em 0 0;
    padding: 0 1em;
    position: relative;
    width: 46.5%; }
    .step-progression li:first-child {
      margin-left: 1em; }
    .step-progression li:last-of-type {
      margin-right: 0; }
    .step-progression li.active {
      background: #d4e68b;
      color: #333333; }
      .step-progression li.active:before {
        border-top-color: #d4e68b;
        border-bottom-color: #d4e68b; }
      .step-progression li.active:after {
        border-left-color: #d4e68b; }
    .step-progression li.completed {
      background: #e75e62;
      color: #f8cdce; }
      .step-progression li.completed:before {
        border-top-color: #e75e62;
        border-bottom-color: #e75e62; }
      .step-progression li.completed:after {
        border-left-color: #e75e62; }
    .step-progression li:before {
      width: 0px;
      height: 0px;
      border-top: 1em solid transparent;
      border-bottom: 1em solid transparent;
      border-left: 1em solid transparent;
      position: absolute;
      content: "";
      top: 0px;
      left: -.95em; }
    .step-progression li:after {
      width: 0;
      height: 0;
      border-top: 1em solid transparent;
      border-bottom: 1em solid transparent;
      border-left: 1em solid transparent;
      position: absolute;
      content: "";
      top: 0px;
      right: -.95em; }
  @media screen and (max-width: 480px) {
    .step-progression li {
      float: none;
      margin: 0 !important;
      width: 100%; }
      .step-progression li:after, .step-progression li:before {
        border-color: transparent !important; } }

/*
 * Sales banner
 */
.banner-sales {
  background: #e4efb5;
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
  line-height: 1.6em;
  padding: 0.75em;
  text-align: center; }
  .banner-sales .btn {
    display: inline-block;
    font-weight: 700;
    margin-left: 0.5em; }

/*
 * Bottom banner
 */
.banner-bottom {
  background: #f3f3f3;
  border-top: 8px solid #f0ad4e;
  bottom: 0;
  padding: 1em 0 4em;
  position: fixed;
  width: 100%;
  z-index: 1; }

.banner-bottom .container {
  position: relative; }

.banner-bottom .btn-close {
  border-radius: 1.6em;
  height: 1.6em;
  line-height: 1.6em;
  padding: 0;
  position: absolute;
  right: 1em;
  top: 1em;
  width: 1.6em; }

.banner-bottom h3 {
  font-size: 1.8em;
  margin-bottom: 1.25em; }

.banner-bottom .guide {
  margin: 0 0 1em 2em;
  width: 100px; }

.banner-bottom .guide h4 {
  color: #ffffff;
  font-size: 0.9em;
  font-weight: 300;
  line-height: 1.4em;
  margin: 25px auto 0;
  position: relative;
  width: 72px;
  z-index: 1; }

.banner-bottom .guide-cover {
  margin: 0 auto;
  position: absolute;
  top: 0;
  width: 100px; }

.banner-bottom form {
  clear: both;
  font-size: 1.2em; }

.banner-bottom form .response {
  font-size: 0.9em;
  margin-bottom: 1em; }

.banner-bottom form input,
.banner-bottom form .btn {
  font-size: 1.1em; }

.banner-bottom form input {
  height: 2em;
  line-height: 1.2em; }

@media only screen and (max-device-width: 480px) {
  .banner-bottom {
    padding: 0 0 1.5em; }

  .banner-bottom h3 {
    font-size: 1.3em;
    margin-bottom: 0.75em; }

  .banner-bottom .guide {
    display: none; }

  .banner-bottom form label {
    display: none; } }
/*
 * Global
 */
.drip-tab-container,
.drip-lightbox-wrapper {
  display: none; }

body.course-lesson-controller-show {
  position: relative; }

/*
 * Header
 */
.header .lesson-name {
  float: left;
  max-width: 65%; }
  .header .lesson-name h1,
  .header .lesson-name .nav {
    float: left; }
  .header .lesson-name h1 {
    line-height: 1.2em;
    margin-top: 0.5em;
    margin-bottom: 0.5em; }
  .header .lesson-name .nav {
    clear: both;
    display: block;
    margin: -0.5em 0 0.5em; }
    .header .lesson-name .nav.course-nav li:first-child {
      border-left: 0; }
    .header .lesson-name .nav .back-to-course {
      padding-top: 0;
      padding-bottom: 0; }

.nav.top-nav.course-nav {
  margin-left: 0; }
  .nav.top-nav.course-nav li a {
    color: #555555; }
  .nav.top-nav.course-nav li:first-child {
    border-left: 0; }
  .nav.top-nav.course-nav li.active a, .nav.top-nav.course-nav li:hover a {
    color: black; }
  .nav.top-nav.course-nav li ul.sub-menu li a,
  .nav.top-nav.course-nav li ul.children li a {
    width: 220px; }
.nav.top-nav li a.back-to-course {
  font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 400;
  text-transform: lowercase; }
  .nav.top-nav li a.back-to-course i {
    font-size: 0.8em; }

.feature-locked {
  position: relative; }
  .feature-locked .lock-overlay {
    background: #fff;
    opacity: 0.5;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; }
  .feature-locked > i.glyphicon-lock {
    color: #454545;
    font-size: 2.5em;
    left: 50%;
    margin: -0.5em 0 0 -0.5em;
    opacity: 1;
    position: absolute;
    top: 50%;
    z-index: 2014; }

/*
 * General
 */
.list-group {
  margin-left: 0; }
  .list-group .list-group-item dl {
    margin: 0; }
    .list-group .list-group-item dl dt {
      float: left;
      width: 20%; }
    .list-group .list-group-item dl dd {
      margin-left: 20%; }
  .list-group .list-group-item .list-group-item-heading .supplemental {
    margin-top: 0.5em; }
    .list-group .list-group-item .list-group-item-heading .supplemental small {
      color: #121212;
      font-size: 70%; }
    .list-group .list-group-item .list-group-item-heading .supplemental a {
      color: #e13137;
      font-weight: bold;
      text-decoration: underline; }

/*
 * Courses
 */
.list-group.nice-list-group .list-group-item {
  color: #555555;
  padding: 0; }
  .list-group.nice-list-group .list-group-item .list-group-item-heading,
  .list-group.nice-list-group .list-group-item .list-group-item-text {
    margin: 0;
    padding: 0.75em; }
  .list-group.nice-list-group .list-group-item .list-group-item-heading {
    background-color: #e2e2e2;
    border-bottom: 1px solid #b7b7b7;
    color: #121212;
    font-size: 1.3em;
    font-weight: 600; }
    .list-group.nice-list-group .list-group-item .list-group-item-heading > a:not(.btn) {
      color: #121212; }
    .list-group.nice-list-group .list-group-item .list-group-item-heading .btn {
      float: right;
      font-size: 0.8em;
      margin-top: -0.4em; }
  .list-group.nice-list-group .list-group-item .progress {
    background: #ababab;
    border: 0;
    border-radius: 0;
    font-family: "proxima-nova", "Helvetica Neue", Helvetica, Arial, sans-serif;
    margin: 0; }
    .list-group.nice-list-group .list-group-item .progress,
    .list-group.nice-list-group .list-group-item .progress .progress-bar {
      box-shadow: none;
      height: 30px;
      line-height: 30px;
      overflow: visible; }
    .list-group.nice-list-group .list-group-item .progress .progress-bar {
      background-color: #a8c72b;
      border-radius: 0;
      font-size: 0.9em;
      font-weight: 600;
      padding-left: 1.25em;
      text-align: left;
      white-space: nowrap; }
    .list-group.nice-list-group .list-group-item .progress.short .progress-bar {
      color: #333333; }

/*
 * Lessons
 */
.entry-content.course-lesson {
  padding-top: 0; }

.list-group.entities .list-group-item {
  color: #555555;
  display: table;
  padding: 0;
  width: 100%;
  -webkit-transition: background-color 0.14s ease-in-out;
  transition: background-color 0.14s ease-in-out; }
  .list-group.entities .list-group-item:visited {
    /*color: $black;*/ }
  .list-group.entities .list-group-item:hover {
    background-color: #efefef; }
  .list-group.entities .list-group-item.heading {
    background: transparent;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    font-size: 1.1em;
    margin-left: -1px;
    margin-right: -1px;
    padding: 2.5em 0 1.25em;
    position: relative; }
    .list-group.entities .list-group-item.heading:first-child {
      border-top: 1px solid transparent;
      margin-top: -1px;
      padding-top: 0.5em; }
    .list-group.entities .list-group-item.heading.disabled {
      background: transparent;
      opacity: 1; }
    .list-group.entities .list-group-item.heading .list-group-item-heading {
      font-weight: bold;
      margin: 0; }
    .list-group.entities .list-group-item.heading .list-group-item-text {
      display: none; }
    .list-group.entities .list-group-item.heading .info {
      padding: 0; }
  .list-group.entities .list-group-item.disabled {
    opacity: 0.8; }
    .list-group.entities .list-group-item.disabled:hover {
      /*cursor: not-allowed;*/ }
    .list-group.entities .list-group-item.disabled,
    .list-group.entities .list-group-item.disabled .designation {
      background-color: #efefef; }
  .list-group.entities .list-group-item.complete, .list-group.entities .list-group-item.complete:hover {
    background-color: #fbfdf4; }
  .list-group.entities .list-group-item.complete .status {
    background-color: #a8c72b;
    color: #fff; }
  .list-group.entities .list-group-item.complete .info {
    opacity: 0.8; }
    .list-group.entities .list-group-item.complete .info h3 {
      color: #555555; }
  .list-group.entities .list-group-item .list-group-item-heading {
    color: #121212;
    font-size: 1.3em;
    font-weight: 400; }
    .list-group.entities .list-group-item .list-group-item-heading .btn {
      float: right;
      font-size: 60%;
      margin-left: 0.5em; }
  .list-group.entities .list-group-item .info,
  .list-group.entities .list-group-item .designation {
    display: table-cell;
    padding: 0.75em; }
  .list-group.entities .list-group-item .designation {
    text-align: center;
    vertical-align: middle;
    width: 1em; }
  .list-group.entities .list-group-item .status {
    background-color: #efefef;
    border-right: 1px solid #b7b7b7; }

/*
 * Course actions nav
 */
.nav-side-actions {
  font-size: 0.8em;
  left: 0;
  position: fixed;
  text-align: center;
  text-transform: uppercase;
  top: 10em; }
  .nav-side-actions ul.nav,
  .nav-side-actions ul {
    margin: 0; }
    .nav-side-actions ul.nav li,
    .nav-side-actions ul li {
      border-top: 1px solid #e2e2e2;
      float: none;
      margin: 0; }
      .nav-side-actions ul.nav li.gap-above,
      .nav-side-actions ul li.gap-above {
        margin-top: 4em; }
      .nav-side-actions ul.nav li.active a,
      .nav-side-actions ul li.active a {
        background-color: #e13137;
        color: #fff;
        font-weight: bold; }
        .nav-side-actions ul.nav li.active a .item-name,
        .nav-side-actions ul li.active a .item-name {
          color: #e13137; }
      .nav-side-actions ul.nav li a:hover .item-name, .nav-side-actions ul.nav li.active a .item-name,
      .nav-side-actions ul li a:hover .item-name,
      .nav-side-actions ul li.active a .item-name {
        left: 6em; }
      .nav-side-actions ul.nav li a:hover,
      .nav-side-actions ul li a:hover {
        background-color: #e2e2e2;
        color: #15c; }
      .nav-side-actions ul.nav li a,
      .nav-side-actions ul li a {
        background-color: #efefef;
        color: #b7b7b7;
        display: block;
        height: 5em;
        padding: 0;
        position: relative;
        -webkit-transition: background-color 0.14s ease-in-out;
        transition: background-color 0.14s ease-in-out; }
        .nav-side-actions ul.nav li a .item-name,
        .nav-side-actions ul.nav li a .item-icon,
        .nav-side-actions ul li a .item-name,
        .nav-side-actions ul li a .item-icon {
          display: block;
          float: left; }
        .nav-side-actions ul.nav li a .item-name,
        .nav-side-actions ul li a .item-name {
          left: -100em;
          line-height: 5em;
          padding: 0 1.5em 0 0;
          position: absolute;
          top: 0; }
        .nav-side-actions ul.nav li a .item-icon,
        .nav-side-actions ul li a .item-icon {
          height: 5em;
          text-align: center;
          width: 5em; }
          .nav-side-actions ul.nav li a .item-icon i,
          .nav-side-actions ul li a .item-icon i {
            display: block;
            font-size: 2em;
            line-height: 2.65em; }
  @media only screen and (max-width: 1080px) {
    .nav-side-actions {
      display: none; } }

/**
 * Lessons v2
 */
.section-divider {
  color: #b7b7b7;
  font-size: 3.5em;
  font-weight: bold;
  line-height: 1em;
  margin: 3em 0 3.5em;
  text-align: center; }

.section-divider-message {
  color: #777;
  font-size: 1.2em;
  margin: -2em 0;
  text-align: center; }
  .section-divider-message.no-bottom-ellipsis {
    margin-bottom: 6em; }
  .section-divider-message a {
    text-decoration: underline; }

.complete-lesson hr {
  margin: 3em 0; }

.lesson-feedback {
  display: none; }

body.course-lesson-controller-show .page-header {
  margin-top: 2.5em; }

/**
 * Compass
 */
.course-compass-modal .course-compass {
  margin: 0.5em; }
.course-compass-modal .course-compass-footer .btn {
  font-size: 1em; }

.course-compass {
  border-left: 2px dashed #cce276;
  opacity: 0;
  padding: 0.7em 0 0 1em; }
  .course-compass .lesson-section {
    margin: 0 0 2em;
    position: relative; }
    .course-compass .lesson-section:before {
      bottom: 0;
      color: #cce276;
      content: '\f062';
      font-family: FontAwesome;
      font-size: 1.2em;
      position: absolute;
      left: -1.38em; }
    .course-compass .lesson-section:first-child:before {
      content: '\f135';
      font-size: 2em;
      height: 2.3em;
      left: -0.825em;
      top: -0.7em;
      -webkit-transform: rotate(-45deg);
      transform: rotate(-45deg); }
    .course-compass .lesson-section:last-of-type:before {
      bottom: -0.75em;
      content: '\f192';
      left: -1.35em; }
    .course-compass .lesson-section.lesson-section-1 header,
    .course-compass .lesson-section.lesson-section-1 ul.lessons {
      margin-left: 2%;
      margin-right: 2%; }
    .course-compass .lesson-section.lesson-section-2 header,
    .course-compass .lesson-section.lesson-section-2 ul.lessons {
      margin-left: 4%;
      margin-right: 4%; }
    .course-compass .lesson-section.lesson-section-3 header,
    .course-compass .lesson-section.lesson-section-3 ul.lessons {
      margin-left: 6%;
      margin-right: 6%; }
    .course-compass .lesson-section.lesson-section-4 header,
    .course-compass .lesson-section.lesson-section-4 ul.lessons {
      margin-left: 8%;
      margin-right: 8%; }
    .course-compass .lesson-section.lesson-section-5 header,
    .course-compass .lesson-section.lesson-section-5 ul.lessons {
      margin-left: 10%;
      margin-right: 10%; }
    .course-compass .lesson-section.lesson-section-6 header,
    .course-compass .lesson-section.lesson-section-6 ul.lessons {
      margin-left: 12%;
      margin-right: 12%; }
    .course-compass .lesson-section.section-active header .glyphicon-chevron-up {
      display: inline-block; }
    .course-compass .lesson-section.section-active header .glyphicon-chevron-down {
      display: none; }
    .course-compass .lesson-section.section-active header > a {
      background-color: #fff;
      border-top: 1px dashed #ababab;
      outline: 0; }
      .course-compass .lesson-section.section-active header > a:hover {
        background-color: #e2e2e2; }
    .course-compass .lesson-section header {
      border: 1px solid #e2e2e2;
      position: relative;
      text-align: center; }
      .course-compass .lesson-section header em {
        bottom: 1.1em;
        color: #777;
        font-size: 0.85em;
        font-style: normal;
        font-weight: 300;
        position: absolute;
        left: 1em;
        text-transform: uppercase; }
      .course-compass .lesson-section header i {
        float: right; }
        .course-compass .lesson-section header i.glyphicon-chevron-up {
          display: none; }
      .course-compass .lesson-section header > a {
        background-color: #efefef;
        display: block;
        padding: 1em; }
        .course-compass .lesson-section header > a:hover, .course-compass .lesson-section header > a:active, .course-compass .lesson-section header > a:focus {
          text-decoration: none; }
        .course-compass .lesson-section header > a:hover {
          background-color: #d6d6d6; }
      .course-compass .lesson-section header h3 {
        margin: 0; }
    .course-compass .lesson-section ul.lessons {
      border: 1px solid #e2e2e2;
      border-bottom: 0;
      display: none;
      margin: 0;
      padding: 0.5em 1em 1em; }
      .course-compass .lesson-section ul.lessons > li {
        list-style: none; }
        .course-compass .lesson-section ul.lessons > li.lesson-no-access h4 a:hover {
          text-decoration: none; }
        .course-compass .lesson-section ul.lessons > li.lesson-coming-soon {
          opacity: 0.7;
          -webkit-transition: opacity 0.14s ease-in-out;
          transition: opacity 0.14s ease-in-out; }
          .course-compass .lesson-section ul.lessons > li.lesson-coming-soon h4:before {
            color: #404040;
            content: 'coming soon';
            display: block;
            font-size: 0.8em;
            font-style: italic;
            font-weight: 300;
            margin: 0 0 0.4em 2.25em;
            text-transform: uppercase; }
          .course-compass .lesson-section ul.lessons > li.lesson-coming-soon a,
          .course-compass .lesson-section ul.lessons > li.lesson-coming-soon a:hover {
            text-decoration: none; }
          .course-compass .lesson-section ul.lessons > li.lesson-coming-soon:hover {
            opacity: 1; }
        .course-compass .lesson-section ul.lessons > li.lesson-completed {
          opacity: 0.55; }
          .course-compass .lesson-section ul.lessons > li.lesson-completed h4 {
            text-decoration: line-through; }
            .course-compass .lesson-section ul.lessons > li.lesson-completed h4 i.fa-check-circle {
              color: #a8c72b;
              display: block; }
            .course-compass .lesson-section ul.lessons > li.lesson-completed h4 a {
              color: #333333; }
        .course-compass .lesson-section ul.lessons > li.lesson-current,
        .course-compass .lesson-section ul.lessons > li.lesson-current h4,
        .course-compass .lesson-section ul.lessons > li.lesson-current h4 a {
          color: #2980b9; }
        .course-compass .lesson-section ul.lessons > li.lesson-current h4 i.fa-hand-o-left {
          display: block; }
        .course-compass .lesson-section ul.lessons > li.lesson-current h4 .you-are-here {
          display: block; }
        .course-compass .lesson-section ul.lessons > li h4 {
          margin: 1.25em 0; }
          .course-compass .lesson-section ul.lessons > li h4 a {
            color: #333333; }
          .course-compass .lesson-section ul.lessons > li h4 i {
            float: right;
            margin-left: 0.5em; }
            .course-compass .lesson-section ul.lessons > li h4 i.fa-check-circle, .course-compass .lesson-section ul.lessons > li h4 i.fa-hand-o-left {
              display: none; }
          .course-compass .lesson-section ul.lessons > li h4 .you-are-here {
            display: none;
            float: right;
            font-size: 0.55em;
            letter-spacing: -1px;
            line-height: 2.1em;
            margin: 0 -1em 0 0.25em;
            text-transform: uppercase; }
        .course-compass .lesson-section ul.lessons > li .lesson-number {
          display: inline-block;
          width: 1.75em; }
          .course-compass .lesson-section ul.lessons > li .lesson-number:after {
            content: '.'; }
        .course-compass .lesson-section ul.lessons > li .lesson-skills {
          font-size: 0.8em;
          margin-left: 2.5em; }
          .course-compass .lesson-section ul.lessons > li .lesson-skills p {
            font-size: 1em; }
          .course-compass .lesson-section ul.lessons > li .lesson-skills ul {
            margin-left: 1.25em; }
            .course-compass .lesson-section ul.lessons > li .lesson-skills ul li {
              margin: 0.5em 0; }
          .course-compass .lesson-section ul.lessons > li .lesson-skills [class^="alert"] {
            display: none; }
  @media only screen and (max-width: 768px) {
    .course-compass .lesson-section.lesson-section-1, .course-compass .lesson-section.lesson-section-2, .course-compass .lesson-section.lesson-section-3, .course-compass .lesson-section.lesson-section-4, .course-compass .lesson-section.lesson-section-5, .course-compass .lesson-section.lesson-section-6 {
      margin-left: 0;
      margin-right: 0; }
    .course-compass .lesson-section header em {
      display: block;
      padding: 0 0 0.5em 1.2em;
      position: static; } }

.course-compass-footer {
  text-align: center; }

/*
 * New Course show
 */
.lesson-list-footer {
  border-top: 1px solid #efefef;
  font-size: 0.85em;
  margin: 1em 0 0;
  padding: 1em 0 0; }

.lesson-description {
  font-size: 0.95em; }
  .lesson-description p {
    font-size: 1em; }
  .lesson-description ul {
    margin: 0 0 0 1.5em; }
    .lesson-description ul li {
      margin: 0.5em 0; }
  .lesson-description [class^="alert"] {
    display: none; }

.highlighted-course {
  padding: 1em 0; }
  .highlighted-course .course-image {
    -webkit-transition: opacity 0.14s ease-in-out;
    transition: opacity 0.14s ease-in-out; }
    .highlighted-course .course-image:hover {
      opacity: 0.6; }
  .highlighted-course h3 {
    font-size: 1.4em;
    line-height: 1.4em;
    margin: 0.25em 0 1em; }
  .highlighted-course .btn {
    margin-top: 0.5em; }

.lesson-list {
  list-style: none;
  margin: 0;
  padding: 0; }
  .lesson-list.upcoming-lessons {
    height: 410px;
    overflow: hidden; }
  .lesson-list li h3 {
    line-height: 1.4em; }
  .lesson-list li.header h3 {
    border-bottom: 1px solid #e2e2e2;
    font-size: 1.3em;
    margin: 2.25em 0 1.25em;
    padding-bottom: 0.5em; }
    .lesson-list li.header h3 a, .lesson-list li.header h3 a:hover {
      color: #121212;
      text-decoration: none; }
  .lesson-list li.complete {
    text-decoration: line-through; }
    .lesson-list li.complete .fa-check-circle {
      color: #a8c72b; }
    .lesson-list li.complete a i {
      color: #15c; }
    .lesson-list li.complete h3 a,
    .lesson-list li.complete h3 small {
      color: #a8c72b; }
  .lesson-list li.disabled {
    opacity: 0.7;
    -webkit-transition: background-color 0.14s ease-in-out;
    transition: background-color 0.14s ease-in-out; }
    .lesson-list li.disabled:hover {
      opacity: 1; }
    .lesson-list li.disabled h3 a {
      color: #333333; }
      .lesson-list li.disabled h3 a:hover {
        text-decoration: none; }

.step-progression.survey-headers li {
  color: #b7b7b7; }
  .step-progression.survey-headers li.active {
    background: #fff;
    color: #e13137; }
    .step-progression.survey-headers li.active:before {
      border-top-color: #fff;
      border-bottom-color: #fff; }
    .step-progression.survey-headers li.active:after {
      border-left-color: #fff; }

.survey-response-controller-edit {
  background-color: #e13137; }
  .survey-response-controller-edit #content {
    background-color: #e13137; }
    .survey-response-controller-edit #content,
    .survey-response-controller-edit #content h1, .survey-response-controller-edit #content h2, .survey-response-controller-edit #content h3, .survey-response-controller-edit #content h4, .survey-response-controller-edit #content h5,
    .survey-response-controller-edit #content p {
      color: #fff; }
  .survey-response-controller-edit .page-header {
    border-bottom-color: #e75e62; }

.header-descriptions {
  border-bottom: 1px solid #e75e62;
  margin: 0 0 1.3em;
  opacity: 0.85; }
  .header-descriptions .header-description {
    display: none; }
    .header-descriptions .header-description p {
      font-size: 0.95em;
      line-height: 1.4em; }

.survey-questions {
  position: relative; }
  .survey-questions .question-number {
    line-height: 1em;
    margin-top: -0.5em;
    opacity: 0.8; }
  .survey-questions .form-group {
    margin-bottom: 0.5em; }
  .survey-questions .btn {
    background-color: #fff;
    color: #e13137;
    padding: 0 0.65em; }
  .survey-questions .survey-answer-form {
    display: none; }
  .survey-questions .question-actions small {
    display: inline-block;
    margin-top: 0.75em; }
  .survey-questions .question-actions .previous-question {
    background: transparent;
    color: #fff;
    float: left;
    font-size: 0.85em;
    font-weight: normal;
    margin: 0.5em 0 0 -0.5em;
    opacity: 0.6; }
    .survey-questions .question-actions .previous-question:hover {
      opacity: 1; }
  .survey-questions .question-actions .next-question,
  .survey-questions .question-actions .complete-survey {
    float: right; }

/* = STEPS CONTAINER
----------------------------*/
.wizard-steps {
  margin: 20px 10px 0px 10px;
  padding: 0px;
  position: relative;
  clear: both;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: bold; }

.wizard-steps div {
  position: relative; }

/* = STEP NUMBERS
----------------------------*/
.wizard-steps span {
  display: block;
  float: left;
  font-size: 10px;
  text-align: center;
  width: 15px;
  margin: 2px 5px 0px 0px;
  line-height: 15px;
  color: #ccc;
  background: #FFF;
  border: 2px solid #CCC;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px; }

/* = DEFAULT STEPS
----------------------------*/
.wizard-steps a {
  position: relative;
  display: block;
  width: auto;
  height: 24px;
  margin-right: 18px;
  padding: 0px 10px 0px 3px;
  float: left;
  font-size: 11px;
  line-height: 24px;
  color: #666;
  background: #F0EEE3;
  text-decoration: none;
  text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.8); }

.wizard-steps a:before {
  width: 0px;
  height: 0px;
  border-top: 12px solid #F0EEE3;
  border-bottom: 12px solid #F0EEE3;
  border-left: 12px solid transparent;
  position: absolute;
  content: "";
  top: 0px;
  left: -12px; }

.wizard-steps a:after {
  width: 0;
  height: 0;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 12px solid #F0EEE3;
  position: absolute;
  content: "";
  top: 0px;
  right: -12px; }

/* = COMPLETED STEPS
----------------------------*/
.wizard-steps .completed-step a {
  color: #163038;
  background: #A3C1C9; }

.wizard-steps .completed-step a:before {
  border-top: 12px solid #A3C1C9;
  border-bottom: 12px solid #A3C1C9; }

.wizard-steps .completed-step a:after {
  border-left: 12px solid #A3C1C9; }

.wizard-steps .completed-step span {
  border: 2px solid #163038;
  color: #163038;
  text-shadow: none; }

/* = ACTIVE STEPS
----------------------------*/
.wizard-steps .active-step a {
  color: #A3C1C9;
  background: #163038;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); }

.wizard-steps .active-step a:before {
  border-top: 12px solid #163038;
  border-bottom: 12px solid #163038; }

.wizard-steps .active-step a:after {
  border-left: 12px solid #163038; }

.wizard-steps .active-step span {
  color: #163038;
  -webkit-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
  -moz-box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.8);
  text-shadow: none;
  border: 2px solid #A3C1C9; }

/* = HOVER STATES
----------------------------*/
.wizard-steps .completed-step:hover a, .wizard-steps .active-step:hover a {
  color: #fff;
  background: #8F061E;
  text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.8); }

.wizard-steps .completed-step:hover span, .wizard-steps .active-step:hover span {
  color: #8F061E; }

.wizard-steps .completed-step:hover a:before, .wizard-steps .active-step:hover a:before {
  border-top: 12px solid #8F061E;
  border-bottom: 12px solid #8F061E; }

.wizard-steps .completed-step:hover a:after, .wizard-steps .active-step:hover a:after {
  border-left: 12px solid #8F061E; }

.payment-form .cc-accepted {
  font-size: 1.4em;
  line-height: 1em; }

.tooltip-inner {
  max-width: 200px;
  /* If max-width does not work, try using width instead */
  width: 200px; }

body.clean #content {
  padding-bottom: 1em; }