/* Shared rules, that are always included, related to responsiveness. */
.hidden {
  display: none;
  visibility: hidden;
}
.visible-phone {
  display: none !important;
}
.visible-tablet {
  display: none !important;
}
.hidden-desktop {
  display: none !important;
}
@media screen and (max-width: 480px) {
  .visible-phone {
    display: inherit !important;
  }
  .hidden-phone {
    display: none !important;
  }
  .hidden-desktop {
    display: inherit !important;
  }
  .visible-desktop {
    display: none !important;
  }
}
.visible-on-responsive-page {
  display: block !important;
}
@media screen and (max-width: 480px) {
  body,
  #page-container {
    min-width: 0;
  }
  #top-header-container .sitewide-navigation .nav-subheader .nav-link,
  #top-header-container .nav-search-box {
    display: none;
  }
  #top-header-container .sitewide-navigation {
    display: block;
    width: 100%;
  }
  #top-header-container .nav-subheader {
    display: block;
  }
  #top-header-container #header-logo {
    display: block;
    float: none;
  }
  #top-header-container #page_auth {
    font-size: 90%;
    position: absolute;
    right: 0;
  }
  #top-header-container #page_auth #user-info > * {
    display: none;
  }
  #top-header-container #page_auth #user-info a {
    padding: 0 8px;
    border-right: none;
  }
  #top-header-container #page_auth #user-info a.highlight {
    display: inline;
  }
  .container {
    width: auto;
  }
  .row,
  .thumbnails {
    margin-left: 0;
  }
  .row-fluid {
    margin-bottom: 0;
  }
  .row-fluid [class*="span"] {
    display: block;
    float: none;
    margin-left: 0;
    margin-bottom: 20px;
    width: auto;
  }
  .row-fluid .span-one-third {
    margin: 0 auto;
    width: 300px;
  }
}
@media screen and (max-width: 567px) {
  .pure-visible-sm {
    display: none !important;
  }
  .pure-visible-md {
    display: none !important;
  }
  .pure-visible-lg {
    display: none !important;
  }
  .pure-visible-xl {
    display: none !important;
  }
  .pure-hidden-xs {
    display: none !important;
  }
  .pure-visible-xs {
    display: block !important;
  }
}
@media screen and (min-width: 568px) and (max-width: 767px) {
  .pure-visible-xs {
    display: none !important;
  }
  .pure-visible-md {
    display: none !important;
  }
  .pure-visible-lg {
    display: none !important;
  }
  .pure-visible-xl {
    display: none !important;
  }
  .pure-hidden-sm {
    display: none !important;
  }
  .pure-visible-sm {
    display: block !important;
  }
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .pure-visible-xs {
    display: none !important;
  }
  .pure-visible-sm {
    display: none !important;
  }
  .pure-visible-lg {
    display: none !important;
  }
  .pure-visible-xl {
    display: none !important;
  }
  .pure-hidden-md {
    display: none !important;
  }
  .pure-visible-md {
    display: block !important;
  }
}
@media screen and (min-width: 1024px) and (max-width: 1199px) {
  .pure-visible-xs {
    display: none !important;
  }
  .pure-visible-sm {
    display: none !important;
  }
  .pure-visible-md {
    display: none !important;
  }
  .pure-visible-xl {
    display: none !important;
  }
  .pure-hidden-lg {
    display: none !important;
  }
  .pure-visible-lg {
    display: block !important;
  }
}
@media screen and (min-width: 1200px) {
  .pure-visible-xs {
    display: none !important;
  }
  .pure-visible-sm {
    display: none !important;
  }
  .pure-visible-md {
    display: none !important;
  }
  .pure-visible-lg {
    display: none !important;
  }
  .pure-hidden-xl {
    display: none !important;
  }
  .pure-visible-xl {
    display: block !important;
  }
}
.pure-g [class*="pure-u"] {
  font-family: inherit;
}
.responsive-img {
  display: block;
  margin: 0 auto;
  max-width: 100%;
}
.pure-g.pure-g--gutter {
  margin-left: -2.56410256%;
}
.pure-g.pure-g--gutter > [class*=pure-u] {
  box-sizing: border-box;
  padding-left: 2.56410256%;
}
.lihp-badges .pure-g.pure-g--gutter {
  margin-left: 0;
}
.lihp-badges .pure-g.pure-g--gutter > [class*=pure-u] {
  padding-left: 0;
  padding-right: 2.56410256%;
}
/* Fall back colors? Eg educator, talks & interviews */
.clearfix {
  *zoom: 1;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
  line-height: 0;
}
.clearfix:after {
  clear: both;
}
.hide-text {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}
.input-block-level {
  display: block;
  width: 100%;
  min-height: 30px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#khanType {
  /* Used to style the topic title on a topic page, eg
  "Introduction to algebra" on /math/algebra/introduction-to-algebra.
  Also used for the tutorial title on tutorial landing pages.
  Not restricted to styling the titles of "Topic" entities. */
}
.vertical-shadow {
  border: 1px solid #ccc;
  border-bottom: 1px solid #aaa;
  box-shadow: 0 1px 3px #ccc;
}
html.page-container-min-width-zero body,
html.page-container-min-width-zero #page-container {
  min-width: 0;
}
.domain-color {
  background: #314453 !important;
}
.subject-color {
  background: #4d6779 !important;
}
.topic-color {
  background: #6a8da6 !important;
}
.tutorial-color {
  background: #fff !important;
}
html .science {
  color: #fff;
}
html .science.domain-color,
html .science .domain-color {
  background: #94424f !important;
}
html .science.subject-color,
html .science .subject-color {
  background: #9d4a5a !important;
}
html .science.topic-color,
html .science .topic-color {
  background: #c55f73 !important;
}
html .science.tutorial-color,
html .science .tutorial-color {
  background: #fff;
}
html .science.accent-button,
html .science .accent-button {
  border: 1px solid #893d49;
  color: #fff;
  text-shadow: none;
  background-color: #8a3e4a;
  background-image: -moz-linear-gradient(top, #94424f, #7b3742);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#94424f), to(#7b3742));
  background-image: -webkit-linear-gradient(top, #94424f, #7b3742);
  background-image: -o-linear-gradient(top, #94424f, #7b3742);
  background-image: linear-gradient(to bottom, #94424f, #7b3742);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff94424f', endColorstr='#ff7b3742', GradientType=0);
  border-color: #7b3742 #7b3742 #461f26;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #7b3742;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  color: #fff !important;
  font-family: inherit;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}
html .science.accent-button:hover,
html .science .accent-button:hover,
html .science.accent-button:focus,
html .science .accent-button:focus,
html .science.accent-button:active,
html .science .accent-button:active,
html .science.accent-button.active,
html .science .accent-button.active,
html .science.accent-button.disabled,
html .science .accent-button.disabled,
html .science.accent-button[disabled],
html .science .accent-button[disabled] {
  color: #fff;
  background-color: #7b3742;
  *background-color: #6a2f38;
}
html .science.accent-button:active,
html .science .accent-button:active,
html .science.accent-button.active,
html .science .accent-button.active {
  background-color: #58272f \9;
}
html .science.accent-button:focus,
html .science .accent-button:focus,
html .science.accent-button:hover,
html .science .accent-button:hover {
  border-bottom-color: #5f2a33;
}
html .humanities {
  color: #fff;
}
html .humanities.domain-color,
html .humanities .domain-color {
  background: #ad3434 !important;
}
html .humanities.subject-color,
html .humanities .subject-color {
  background: #c13b31 !important;
}
html .humanities.topic-color,
html .humanities .topic-color {
  background: #d24a45 !important;
}
html .humanities.tutorial-color,
html .humanities .tutorial-color {
  background: #fff;
}
html .humanities.accent-button,
html .humanities .accent-button {
  border: 1px solid #a13030;
  color: #fff;
  text-shadow: none;
  background-color: #a23131;
  background-image: -moz-linear-gradient(top, #ad3434, #922c2c);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ad3434), to(#922c2c));
  background-image: -webkit-linear-gradient(top, #ad3434, #922c2c);
  background-image: -o-linear-gradient(top, #ad3434, #922c2c);
  background-image: linear-gradient(to bottom, #ad3434, #922c2c);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffad3434', endColorstr='#ff922c2c', GradientType=0);
  border-color: #922c2c #922c2c #571a1a;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #922c2c;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  color: #fff !important;
  font-family: inherit;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}
html .humanities.accent-button:hover,
html .humanities .accent-button:hover,
html .humanities.accent-button:focus,
html .humanities .accent-button:focus,
html .humanities.accent-button:active,
html .humanities .accent-button:active,
html .humanities.accent-button.active,
html .humanities .accent-button.active,
html .humanities.accent-button.disabled,
html .humanities .accent-button.disabled,
html .humanities.accent-button[disabled],
html .humanities .accent-button[disabled] {
  color: #fff;
  background-color: #922c2c;
  *background-color: #7e2626;
}
html .humanities.accent-button:active,
html .humanities .accent-button:active,
html .humanities.accent-button.active,
html .humanities .accent-button.active {
  background-color: #6a2020 \9;
}
html .humanities.accent-button:focus,
html .humanities .accent-button:focus,
html .humanities.accent-button:hover,
html .humanities .accent-button:hover {
  border-bottom-color: #722222;
}
html .economics-finance-domain {
  color: #fff;
}
html .economics-finance-domain.domain-color,
html .economics-finance-domain .domain-color {
  background: #b77033 !important;
}
html .economics-finance-domain.subject-color,
html .economics-finance-domain .subject-color {
  background: #bf7b34 !important;
}
html .economics-finance-domain.topic-color,
html .economics-finance-domain .topic-color {
  background: #d1933b !important;
}
html .economics-finance-domain.tutorial-color,
html .economics-finance-domain .tutorial-color {
  background: #fff;
}
html .economics-finance-domain.accent-button,
html .economics-finance-domain .accent-button {
  border: 1px solid #ab6930;
  color: #fff;
  text-shadow: none;
  background-color: #ac6930;
  background-image: -moz-linear-gradient(top, #b77033, #9b5f2b);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#b77033), to(#9b5f2b));
  background-image: -webkit-linear-gradient(top, #b77033, #9b5f2b);
  background-image: -o-linear-gradient(top, #b77033, #9b5f2b);
  background-image: linear-gradient(to bottom, #b77033, #9b5f2b);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb77033', endColorstr='#ff9b5f2b', GradientType=0);
  border-color: #9b5f2b #9b5f2b #5f3a1b;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #9b5f2b;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  color: #fff !important;
  font-family: inherit;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}
html .economics-finance-domain.accent-button:hover,
html .economics-finance-domain .accent-button:hover,
html .economics-finance-domain.accent-button:focus,
html .economics-finance-domain .accent-button:focus,
html .economics-finance-domain.accent-button:active,
html .economics-finance-domain .accent-button:active,
html .economics-finance-domain.accent-button.active,
html .economics-finance-domain .accent-button.active,
html .economics-finance-domain.accent-button.disabled,
html .economics-finance-domain .accent-button.disabled,
html .economics-finance-domain.accent-button[disabled],
html .economics-finance-domain .accent-button[disabled] {
  color: #fff;
  background-color: #9b5f2b;
  *background-color: #875326;
}
html .economics-finance-domain.accent-button:active,
html .economics-finance-domain .accent-button:active,
html .economics-finance-domain.accent-button.active,
html .economics-finance-domain .accent-button.active {
  background-color: #734720 \9;
}
html .economics-finance-domain.accent-button:focus,
html .economics-finance-domain .accent-button:focus,
html .economics-finance-domain.accent-button:hover,
html .economics-finance-domain .accent-button:hover {
  border-bottom-color: #7b4b22;
}
html .cs {
  color: #fff;
}
html .cs.domain-color,
html .cs .domain-color {
  background: #437a39 !important;
}
html .cs.subject-color,
html .cs .subject-color {
  background: #53893e !important;
}
html .cs.topic-color,
html .cs .topic-color {
  background: #689b51 !important;
}
html .cs.tutorial-color,
html .cs .tutorial-color {
  background: #fff;
}
html .cs.accent-button,
html .cs .accent-button {
  border: 1px solid #3d7034;
  color: #fff;
  text-shadow: none;
  background-color: #3e7034;
  background-image: -moz-linear-gradient(top, #437a39, #36622e);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#437a39), to(#36622e));
  background-image: -webkit-linear-gradient(top, #437a39, #36622e);
  background-image: -o-linear-gradient(top, #437a39, #36622e);
  background-image: linear-gradient(to bottom, #437a39, #36622e);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff437a39', endColorstr='#ff36622e', GradientType=0);
  border-color: #36622e #36622e #192e15;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #36622e;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  color: #fff !important;
  font-family: inherit;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}
html .cs.accent-button:hover,
html .cs .accent-button:hover,
html .cs.accent-button:focus,
html .cs .accent-button:focus,
html .cs.accent-button:active,
html .cs .accent-button:active,
html .cs.accent-button.active,
html .cs .accent-button.active,
html .cs.accent-button.disabled,
html .cs .accent-button.disabled,
html .cs.accent-button[disabled],
html .cs .accent-button[disabled] {
  color: #fff;
  background-color: #36622e;
  *background-color: #2c5026;
}
html .cs.accent-button:active,
html .cs .accent-button:active,
html .cs.accent-button.active,
html .cs .accent-button.active {
  background-color: #233f1d \9;
}
html .cs.accent-button:focus,
html .cs .accent-button:focus,
html .cs.accent-button:hover,
html .cs .accent-button:hover {
  border-bottom-color: #264621;
}
html .hour-of-code {
  color: #fff;
}
html .hour-of-code.domain-color,
html .hour-of-code .domain-color {
  background: #437a39 !important;
}
html .hour-of-code.subject-color,
html .hour-of-code .subject-color {
  background: #53893e !important;
}
html .hour-of-code.topic-color,
html .hour-of-code .topic-color {
  background: #689b51 !important;
}
html .hour-of-code.tutorial-color,
html .hour-of-code .tutorial-color {
  background: #fff;
}
html .hour-of-code.accent-button,
html .hour-of-code .accent-button {
  border: 1px solid #3d7034;
  color: #fff;
  text-shadow: none;
  background-color: #3e7034;
  background-image: -moz-linear-gradient(top, #437a39, #36622e);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#437a39), to(#36622e));
  background-image: -webkit-linear-gradient(top, #437a39, #36622e);
  background-image: -o-linear-gradient(top, #437a39, #36622e);
  background-image: linear-gradient(to bottom, #437a39, #36622e);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff437a39', endColorstr='#ff36622e', GradientType=0);
  border-color: #36622e #36622e #192e15;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #36622e;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  color: #fff !important;
  font-family: inherit;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}
html .hour-of-code.accent-button:hover,
html .hour-of-code .accent-button:hover,
html .hour-of-code.accent-button:focus,
html .hour-of-code .accent-button:focus,
html .hour-of-code.accent-button:active,
html .hour-of-code .accent-button:active,
html .hour-of-code.accent-button.active,
html .hour-of-code .accent-button.active,
html .hour-of-code.accent-button.disabled,
html .hour-of-code .accent-button.disabled,
html .hour-of-code.accent-button[disabled],
html .hour-of-code .accent-button[disabled] {
  color: #fff;
  background-color: #36622e;
  *background-color: #2c5026;
}
html .hour-of-code.accent-button:active,
html .hour-of-code .accent-button:active,
html .hour-of-code.accent-button.active,
html .hour-of-code .accent-button.active {
  background-color: #233f1d \9;
}
html .hour-of-code.accent-button:focus,
html .hour-of-code .accent-button:focus,
html .hour-of-code.accent-button:hover,
html .hour-of-code .accent-button:hover {
  border-bottom-color: #264621;
}
html .computer-programming {
  color: #fff;
}
html .computer-programming.domain-color,
html .computer-programming .domain-color {
  background: #437a39 !important;
}
html .computer-programming.subject-color,
html .computer-programming .subject-color {
  background: #53893e !important;
}
html .computer-programming.topic-color,
html .computer-programming .topic-color {
  background: #689b51 !important;
}
html .computer-programming.tutorial-color,
html .computer-programming .tutorial-color {
  background: #fff;
}
html .computer-programming.accent-button,
html .computer-programming .accent-button {
  border: 1px solid #3d7034;
  color: #fff;
  text-shadow: none;
  background-color: #3e7034;
  background-image: -moz-linear-gradient(top, #437a39, #36622e);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#437a39), to(#36622e));
  background-image: -webkit-linear-gradient(top, #437a39, #36622e);
  background-image: -o-linear-gradient(top, #437a39, #36622e);
  background-image: linear-gradient(to bottom, #437a39, #36622e);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff437a39', endColorstr='#ff36622e', GradientType=0);
  border-color: #36622e #36622e #192e15;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #36622e;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  color: #fff !important;
  font-family: inherit;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}
html .computer-programming.accent-button:hover,
html .computer-programming .accent-button:hover,
html .computer-programming.accent-button:focus,
html .computer-programming .accent-button:focus,
html .computer-programming.accent-button:active,
html .computer-programming .accent-button:active,
html .computer-programming.accent-button.active,
html .computer-programming .accent-button.active,
html .computer-programming.accent-button.disabled,
html .computer-programming .accent-button.disabled,
html .computer-programming.accent-button[disabled],
html .computer-programming .accent-button[disabled] {
  color: #fff;
  background-color: #36622e;
  *background-color: #2c5026;
}
html .computer-programming.accent-button:active,
html .computer-programming .accent-button:active,
html .computer-programming.accent-button.active,
html .computer-programming .accent-button.active {
  background-color: #233f1d \9;
}
html .computer-programming.accent-button:focus,
html .computer-programming .accent-button:focus,
html .computer-programming.accent-button:hover,
html .computer-programming .accent-button:hover {
  border-bottom-color: #264621;
}
html .computing {
  color: #fff;
}
html .computing.domain-color,
html .computing .domain-color {
  background: #437a39 !important;
}
html .computing.subject-color,
html .computing .subject-color {
  background: #53893e !important;
}
html .computing.topic-color,
html .computing .topic-color {
  background: #689b51 !important;
}
html .computing.tutorial-color,
html .computing .tutorial-color {
  background: #fff;
}
html .computing.accent-button,
html .computing .accent-button {
  border: 1px solid #3d7034;
  color: #fff;
  text-shadow: none;
  background-color: #3e7034;
  background-image: -moz-linear-gradient(top, #437a39, #36622e);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#437a39), to(#36622e));
  background-image: -webkit-linear-gradient(top, #437a39, #36622e);
  background-image: -o-linear-gradient(top, #437a39, #36622e);
  background-image: linear-gradient(to bottom, #437a39, #36622e);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff437a39', endColorstr='#ff36622e', GradientType=0);
  border-color: #36622e #36622e #192e15;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #36622e;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  color: #fff !important;
  font-family: inherit;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}
html .computing.accent-button:hover,
html .computing .accent-button:hover,
html .computing.accent-button:focus,
html .computing .accent-button:focus,
html .computing.accent-button:active,
html .computing .accent-button:active,
html .computing.accent-button.active,
html .computing .accent-button.active,
html .computing.accent-button.disabled,
html .computing .accent-button.disabled,
html .computing.accent-button[disabled],
html .computing .accent-button[disabled] {
  color: #fff;
  background-color: #36622e;
  *background-color: #2c5026;
}
html .computing.accent-button:active,
html .computing .accent-button:active,
html .computing.accent-button.active,
html .computing .accent-button.active {
  background-color: #233f1d \9;
}
html .computing.accent-button:focus,
html .computing .accent-button:focus,
html .computing.accent-button:hover,
html .computing .accent-button:hover {
  border-bottom-color: #264621;
}
html .partner-content {
  color: #fff;
}
html .partner-content.domain-color,
html .partner-content .domain-color {
  background: #218270 !important;
}
html .partner-content.subject-color,
html .partner-content .subject-color {
  background: #2c8d7b !important;
}
html .partner-content.topic-color,
html .partner-content .topic-color {
  background: #329a86 !important;
}
html .partner-content.tutorial-color,
html .partner-content .tutorial-color {
  background: #fff;
}
html .partner-content.accent-button,
html .partner-content .accent-button {
  border: 1px solid #1e7665;
  color: #fff;
  text-shadow: none;
  background-color: #1e7766;
  background-image: -moz-linear-gradient(top, #218270, #1a6657);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#218270), to(#1a6657));
  background-image: -webkit-linear-gradient(top, #218270, #1a6657);
  background-image: -o-linear-gradient(top, #218270, #1a6657);
  background-image: linear-gradient(to bottom, #218270, #1a6657);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff218270', endColorstr='#ff1a6657', GradientType=0);
  border-color: #1a6657 #1a6657 #0a2923;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #1a6657;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  color: #fff !important;
  font-family: inherit;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}
html .partner-content.accent-button:hover,
html .partner-content .accent-button:hover,
html .partner-content.accent-button:focus,
html .partner-content .accent-button:focus,
html .partner-content.accent-button:active,
html .partner-content .accent-button:active,
html .partner-content.accent-button.active,
html .partner-content .accent-button.active,
html .partner-content.accent-button.disabled,
html .partner-content .accent-button.disabled,
html .partner-content.accent-button[disabled],
html .partner-content .accent-button[disabled] {
  color: #fff;
  background-color: #1a6657;
  *background-color: #155146;
}
html .partner-content.accent-button:active,
html .partner-content .accent-button:active,
html .partner-content.accent-button.active,
html .partner-content .accent-button.active {
  background-color: #0f3d34 \9;
}
html .partner-content.accent-button:focus,
html .partner-content .accent-button:focus,
html .partner-content.accent-button:hover,
html .partner-content .accent-button:hover {
  border-bottom-color: #12453b;
}
html .math {
  color: #fff;
}
html .math.domain-color,
html .math .domain-color {
  background: #1c758a !important;
}
html .math.subject-color,
html .math .subject-color {
  background: #46a8bf !important;
}
html .math.topic-color,
html .math .topic-color {
  background: #4fbad4 !important;
}
html .math.tutorial-color,
html .math .tutorial-color {
  background: #fff;
}
html .math.accent-button,
html .math .accent-button {
  border: 1px solid #196a7d;
  color: #fff;
  text-shadow: none;
  background-color: #1a6b7e;
  background-image: -moz-linear-gradient(top, #1c758a, #165c6c);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#1c758a), to(#165c6c));
  background-image: -webkit-linear-gradient(top, #1c758a, #165c6c);
  background-image: -o-linear-gradient(top, #1c758a, #165c6c);
  background-image: linear-gradient(to bottom, #1c758a, #165c6c);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff1c758a', endColorstr='#ff165c6c', GradientType=0);
  border-color: #165c6c #165c6c #09262d;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #165c6c;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  color: #fff !important;
  font-family: inherit;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}
html .math.accent-button:hover,
html .math .accent-button:hover,
html .math.accent-button:focus,
html .math .accent-button:focus,
html .math.accent-button:active,
html .math .accent-button:active,
html .math.accent-button.active,
html .math .accent-button.active,
html .math.accent-button.disabled,
html .math .accent-button.disabled,
html .math.accent-button[disabled],
html .math .accent-button[disabled] {
  color: #fff;
  background-color: #165c6c;
  *background-color: #124a57;
}
html .math.accent-button:active,
html .math .accent-button:active,
html .math.accent-button.active,
html .math .accent-button.active {
  background-color: #0d3842 \9;
}
html .math.accent-button:focus,
html .math .accent-button:focus,
html .math.accent-button:hover,
html .math .accent-button:hover {
  border-bottom-color: #0f3f4a;
}
html .test-prep {
  color: #fff;
}
html .test-prep.domain-color,
html .test-prep .domain-color {
  background: #644172 !important;
}
html .test-prep.subject-color,
html .test-prep .subject-color {
  background: #7e5f8e !important;
}
html .test-prep.topic-color,
html .test-prep .topic-color {
  background: #9a72ac !important;
}
html .test-prep.tutorial-color,
html .test-prep .tutorial-color {
  background: #fff;
}
html .test-prep.accent-button,
html .test-prep .accent-button {
  border: 1px solid #5b3b68;
  color: #fff;
  text-shadow: none;
  background-color: #5c3c69;
  background-image: -moz-linear-gradient(top, #644172, #50345b);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#644172), to(#50345b));
  background-image: -webkit-linear-gradient(top, #644172, #50345b);
  background-image: -o-linear-gradient(top, #644172, #50345b);
  background-image: linear-gradient(to bottom, #644172, #50345b);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff644172', endColorstr='#ff50345b', GradientType=0);
  border-color: #50345b #50345b #25182b;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #50345b;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  color: #fff !important;
  font-family: inherit;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}
html .test-prep.accent-button:hover,
html .test-prep .accent-button:hover,
html .test-prep.accent-button:focus,
html .test-prep .accent-button:focus,
html .test-prep.accent-button:active,
html .test-prep .accent-button:active,
html .test-prep.accent-button.active,
html .test-prep .accent-button.active,
html .test-prep.accent-button.disabled,
html .test-prep .accent-button.disabled,
html .test-prep.accent-button[disabled],
html .test-prep .accent-button[disabled] {
  color: #fff;
  background-color: #50345b;
  *background-color: #422b4b;
}
html .test-prep.accent-button:active,
html .test-prep .accent-button:active,
html .test-prep.accent-button.active,
html .test-prep .accent-button.active {
  background-color: #34223b \9;
}
html .test-prep.accent-button:focus,
html .test-prep .accent-button:focus,
html .test-prep.accent-button:hover,
html .test-prep .accent-button:hover {
  border-bottom-color: #392541;
}
html .college-careers-more {
  color: #fff;
}
html .college-careers-more.domain-color,
html .college-careers-more .domain-color {
  background: #218270 !important;
}
html .college-careers-more.subject-color,
html .college-careers-more .subject-color {
  background: #2c8d7b !important;
}
html .college-careers-more.topic-color,
html .college-careers-more .topic-color {
  background: #329a86 !important;
}
html .college-careers-more.tutorial-color,
html .college-careers-more .tutorial-color {
  background: #fff;
}
html .college-careers-more.accent-button,
html .college-careers-more .accent-button {
  border: 1px solid #1e7665;
  color: #fff;
  text-shadow: none;
  background-color: #1e7766;
  background-image: -moz-linear-gradient(top, #218270, #1a6657);
  background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#218270), to(#1a6657));
  background-image: -webkit-linear-gradient(top, #218270, #1a6657);
  background-image: -o-linear-gradient(top, #218270, #1a6657);
  background-image: linear-gradient(to bottom, #218270, #1a6657);
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff218270', endColorstr='#ff1a6657', GradientType=0);
  border-color: #1a6657 #1a6657 #0a2923;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
  *background-color: #1a6657;
  /* Darken IE7 buttons by default so they stand out more given they won't have borders */
  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  color: #fff !important;
  font-family: inherit;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}
html .college-careers-more.accent-button:hover,
html .college-careers-more .accent-button:hover,
html .college-careers-more.accent-button:focus,
html .college-careers-more .accent-button:focus,
html .college-careers-more.accent-button:active,
html .college-careers-more .accent-button:active,
html .college-careers-more.accent-button.active,
html .college-careers-more .accent-button.active,
html .college-careers-more.accent-button.disabled,
html .college-careers-more .accent-button.disabled,
html .college-careers-more.accent-button[disabled],
html .college-careers-more .accent-button[disabled] {
  color: #fff;
  background-color: #1a6657;
  *background-color: #155146;
}
html .college-careers-more.accent-button:active,
html .college-careers-more .accent-button:active,
html .college-careers-more.accent-button.active,
html .college-careers-more .accent-button.active {
  background-color: #0f3d34 \9;
}
html .college-careers-more.accent-button:focus,
html .college-careers-more .accent-button:focus,
html .college-careers-more.accent-button:hover,
html .college-careers-more .accent-button:hover {
  border-bottom-color: #12453b;
}
/* TODO(joshnetterfield): less-ify this file */
/* Exercise Colors */
/**
 * Use this mixin when you're looking to apply our state colors to an element
 */
.unstarted {
  background: #ddd;
}
.practiced {
  background: #9cdceb;
}
.mastery1 {
  background: #58c4dd;
}
.mastery2 {
  color: #fdfdfd;
  background: #29abca;
}
.mastered,
.mastery3 {
  color: #fdfdfd;
  background: #1c758a;
}
.exercise-color.proficient {
  background-color: #1c758a;
  color: #eee !important;
}
.exercise-color.proficient:hover {
  background-color: #1c758a;
}
.exercise-color.suggested {
  background-color: #73982c;
  color: #eee !important;
}
.exercise-color.suggested:hover {
  background-color: #73982c;
}
.exercise-color.review {
  background-color: #e35d04;
  color: #eee !important;
}
.exercise-color.review:hover {
  background-color: #e35d04;
}
.exercise-color.not-started,
.exercise-color.needsPractice {
  background-color: #ccc;
}
.exercise-color.not-started:hover,
.exercise-color.needsPractice {
  background-color: #ccc;
}
.exercise-color.struggling {
  background-color: #c30202;
  color: #dfdfdf !important;
}
.exercise-color.struggling:hover {
  background-color: #c30202;
}
.exercise-color.started {
  background-color: #c7e5f7;
}
.exercise-color.started:hover {
  background-color: #c7e5f7;
}
.exercise-color.review.light {
  background-color: #f2b891;
  background-color: #c7e5f7;
  color: #333 !important;
}
.exercise-color.review.light:hover {
  background-color: #f2b891;
}
.exercise-color.border-only {
  background-color: transparent;
}
.exercise-color.border-only:hover {
  background-color: transparent;
}
.exercise-color.proficient.border-only {
  border-left: 5px solid #1c758a;
}
.exercise-color.review.border-only {
  border-left: 5px solid #e35d04;
}
.exercise-color.not-started.border-only,
.exercise-color.needsPractice.border-only {
  border-left: 5px solid #ccc;
}
.exercise-color.struggling.border-only {
  border-left: 5px solid #c30202;
}
.exercise-color.started.border-only {
  border-left: 5px solid #c7e5f7;
}
.exercise-color.practiced.border-only {
  border-left: 5px solid #9cdceb;
}
.exercise-color.mastery1.border-only {
  border-left: 5px solid #58c4dd;
}
.exercise-color.mastery2.border-only {
  border-left: 5px solid #29abca;
}
.exercise-color.mastery3.border-only {
  border-left: 5px solid #1c758a;
}
.partnership-text .partnership-label {
  color: #999;
  font-family: inherit;
  font-weight: bold;
  font-size: 9pt;
  margin-right: 10px;
  vertical-align: middle;
}
.partnership-text .partnership-logo {
  height: 22px;
  position: relative;
  top: -3px;
  vertical-align: middle;
}
.partnership-text.content-page {
  position: absolute;
  top: 17px;
  right: 17px;
  bottom: auto;
  left: auto;
  text-align: right;
}
.partnership-text.content-page .partnership-label {
  color: #b3b3b3;
  margin-right: 5px;
}
.partnership-text.content-page .partnership-label.light {
  color: #fff;
}
/**
 * our .@{domain} {color: white;} overrides mathjax eqs
 * FIXME(marcos): domain-colors mixins should not define color: @white;
 * except for in actual mixins, but not for .math, .{@domain}, et al.
 */
.MathJax .math {
  color: #444;
}
/**
 * Class for an inline-block square that plays nicely with our state colors.
 * Heavily used in the bathroom tile progress bar and extended a bit in the
 * end of mastery task card
 */
.progress-cell {
  display: inline-block;
  height: 8px;
  width: 8px;
}
.progress-cell.unstarted {
  background: #ddd;
}
.progress-cell.practiced {
  background: #9cdceb;
}
.progress-cell.mastery1 {
  background: #58c4dd;
}
.progress-cell.mastery2 {
  color: #fdfdfd;
  background: #29abca;
}
.progress-cell.mastered,
.progress-cell.mastery3 {
  color: #fdfdfd;
  background: #1c758a;
}
.progress-summary-container {
  line-height: 20px;
  white-space: nowrap;
}
.progress-summary-container .progress-cell {
  display: inline-block;
  height: 20px;
  margin-right: 0;
}
.progress-summary-container .progress-cell .progress-label {
  font-weight: bold;
  padding-left: 5px;
}
.progress-by-topic__title {
  border-bottom: 1px dotted #ddd;
  color: #444;
  line-height: 1;
  margin: 16px 0 5px;
  font-size: 14px;
}
.progress-by-topic .progress-cell {
  height: 12px;
  width: 12px;
}
.progress-by-topic:first-child .progress-by-topic__title {
  margin-top: 0;
}
.qtip {
  max-width: 500px;
}
.progress-cells {
  color: white;
  min-height: 40px;
  padding: 0;
  text-align: left;
}
.progress-cells .progress-cell {
  border: 1px solid #fff;
  border-width: 0 1px 1px 0;
  cursor: pointer;
  display: block;
  float: left;
  transition: all 200ms ease-in-out;
}
.progress-cells .progress-cell:hover,
.progress-cells .progress-cell.highlight {
  box-shadow: inset 0 0 0 2px #fdfdfd;
}
.mario-points {
  padding: 10px;
  position: absolute;
  opacity: 0;
  z-index: 1051;
}
.state-transition-equation-container .state-transition-equation {
  display: table;
  margin: 0 auto;
  text-align: center;
  text-transform: uppercase;
}
.state-transition-equation-container .state-transition-equation .skill-state-block {
  border: 1px solid #fff;
  box-shadow: 0 1px 3px #999;
  box-sizing: border-box;
  color: #444;
  display: table-cell;
  height: 100px;
  width: 100px;
  transition: all 500ms ease 750ms;
  vertical-align: middle;
}
.state-transition-equation-container .state-transition-equation .skill-state-block.unstarted {
  background: #ddd;
}
.state-transition-equation-container .state-transition-equation .skill-state-block.practiced {
  background: #9cdceb;
}
.state-transition-equation-container .state-transition-equation .skill-state-block.mastery1 {
  background: #58c4dd;
}
.state-transition-equation-container .state-transition-equation .skill-state-block.mastery2 {
  color: #fdfdfd;
  background: #29abca;
}
.state-transition-equation-container .state-transition-equation .skill-state-block.mastered,
.state-transition-equation-container .state-transition-equation .skill-state-block.mastery3 {
  color: #fdfdfd;
  background: #1c758a;
}
.state-transition-equation-container .state-transition-equation .skill-state-block.active-state {
  position: relative;
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -ms-transform: scale(1.2);
  -o-transform: scale(1.2);
  transform: scale(1.2);
  z-index: 10;
}
.state-transition-equation-container .state-transition-equation .skill-state-block.inactive-state.unstarted {
  background: #efefef;
}
.state-transition-equation-container .state-transition-equation .skill-state-block.inactive-state.practiced {
  background: #d5d5d5;
}
.state-transition-equation-container .state-transition-equation .skill-state-block.inactive-state.mastery1 {
  background: #c1c1c1;
}
.state-transition-equation-container .state-transition-equation .skill-state-block.inactive-state.mastery2 {
  background: #a0a0a0;
}
.state-transition-equation-container .state-transition-equation .skill-state-block.inactive-state.mastered,
.state-transition-equation-container .state-transition-equation .skill-state-block.inactive-state.mastery3 {
  background: #797979;
}
.state-transition-equation-container .state-transition-equation .skill-state-block.inactive-state.unstarted,
.state-transition-equation-container .state-transition-equation .skill-state-block.inactive-state.practiced,
.state-transition-equation-container .state-transition-equation .skill-state-block.inactive-state.mastery1 {
  color: #999;
}
.state-transition-equation-container .state-transition-equation .skill-state-block.inactive-state.mastery2,
.state-transition-equation-container .state-transition-equation .skill-state-block.inactive-state.mastered,
.state-transition-equation-container .state-transition-equation .skill-state-block.inactive-state.mastery3 {
  color: #555;
}
.state-transition-equation-container.qtip {
  min-width: 500px;
}
.task-container {
  background: #fff;
}
.task-container .icon-ok {
  color: #a7cf5b;
}
.task-container .task-loading-container {
  padding: 60px;
}
.task-container .goldilocks-popdown {
  background-color: lightgrey;
  text-align: center;
  color: black;
  height: 40px;
  line-height: 40px;
  transition: height 750ms ease-in-out;
}
.task-container .goldilocks-popdown a {
  color: #666;
  display: inline-block;
  margin: 0 0 0 20px;
}
.task-container .task-header {
  color: #fff;
  padding: 20px 30px;
  position: relative;
}
.task-container .task-header .now-working-header {
  text-transform: uppercase;
  color: #ddd;
}
.task-container .task-header .task-title {
  color: #fff;
  font-family: inherit;
  font-size: 24px;
  font-weight: bold;
  -webkit-font-smoothing: antialiased;
}
.task-container .task-header .task-description {
  color: #eee;
  font-family: inherit;
  font-size: 12px;
  line-height: 18px;
  margin-top: 3px;
  max-width: 45%;
  white-space: normal;
}
.task-container .task-header .task-description a:link,
.task-container .task-header .task-description a:visited {
  color: inherit;
}
.task-container .task-header .task-description .tutorial-back {
  font-size: 1.2em;
}
.task-container .task-header .content-tags {
  font-size: 12px;
}
.task-container .task-header .buttons .pull-left {
  margin-right: 5px;
}
.task-container .task-header .buttons .pull-right {
  margin-left: 5px;
}
.task-container .task-header .discussion-meta {
  color: #fff;
}
.task-container .task-header .completion-progress-container {
  color: #c6d1ad;
  float: right;
  font-size: 18px;
  padding-right: 3px;
  text-align: right;
  width: 567.5px;
}
.task-container .task-header .completion-progress-container .attempt-icon {
  color: inherit;
}
.task-container .task-header .completion-progress-container .icon-remove {
  display: block;
  margin-top: -1px;
}
.task-container .task-header .completion-progress-container .attempt-icon-hint {
  position: relative;
  top: 1px;
}
.task-container .task-header .completion-progress-container .completion-criteria-desc .title {
  color: #fdfdfd;
  font-family: inherit;
  font-size: 18px;
  text-align: right;
  -webkit-font-smoothing: antialiased;
  vertical-align: 12px;
}
.task-container .task-header .completion-progress-container .grid {
  background-color: transparent;
  border: 3px solid #999;
  border-radius: 100%;
  box-sizing: content-box;
  width: 22px;
  height: 22px;
  margin-left: 9px;
  margin-right: -3px;
  float: right;
  padding: 3px;
  position: relative;
  text-align: center;
  z-index: 3;
  transition: opacity 1s;
}
.task-container .task-header .completion-progress-container .grid.correct {
  color: #fff;
  background-color: #a7cf5b;
  border-color: #a7cf5b;
}
.task-container .task-header .completion-progress-container .grid.incorrect {
  color: #ddd;
  background-color: #999;
  border-color: #999;
}
.task-container .task-header .completion-progress-container .grid.not-attempted .icon-ok {
  color: #999;
}
.task-container .task-header .completion-progress-container .completion-template {
  display: inline-block;
  margin-left: 1em;
  padding-right: 3px;
}
.task-container .task-header .completion-progress-container .problem-history {
  height: 37px;
  padding-right: 3px;
  position: relative;
}
.task-container .task-header .title-and-practice .task-title {
  margin-bottom: 10px;
}
.task-container .task-header .title-and-practice .completion-progress-container {
  float: left;
  width: auto;
}
.task-container .task-header .title-and-practice .completion-progress-container .completion-criteria-desc,
.task-container .task-header .title-and-practice .completion-progress-container .video-status {
  float: left;
}
.task-container .task-header .title-and-practice .completion-progress-container .video-status {
  margin-left: 10px;
}
.task-container .task-header .title-and-practice .practice-button {
  float: right;
  font-size: 16px;
  position: relative;
  top: 10px;
}
.task-container .task-header .title-and-practice .practice-button .kui-button {
  float: right;
}
.task-container .task-header .title-and-practice .mr-pink {
  position: relative;
  top: 30px;
  right: auto;
  bottom: auto;
  left: auto;
  width: 58px;
  height: 51px;
  height: 58px;
  width: 51px;
  animation: glance 2s 5s alternate 2;
  background-image: url(/images/avatars/mr-pink-glance.png);
  float: right;
  margin-right: 15px;
  visibility: hidden;
}
@keyframes glance {
  0% {
    top: 75px;
    visibility: visible;
  }
  40% {
    top: 30px;
  }
  60% {
    animation-timing-function: step-end;
    background-position: 0 0;
  }
  65% {
    animation-timing-function: step-end;
    background-position: -51px 0;
  }
  70% {
    animation-timing-function: step-end;
    background-position: -102px 0;
  }
}
.task-container .task-header-container .task-header-mid-container {
  background-image: none;
  background-color: #314453;
}
.task-container .task-header-container.science .task-header-mid-container {
  background-image: none;
  background-color: #94424f;
}
.task-container .task-header-container.humanities .task-header-mid-container {
  background-image: none;
  background-color: #ad3434;
}
.task-container .task-header-container.economics-finance-domain .task-header-mid-container {
  background-image: none;
  background-color: #b77033;
}
.task-container .task-header-container.cs .task-header-mid-container {
  background-image: none;
  background-color: #437a39;
}
.task-container .task-header-container.hour-of-code .task-header-mid-container {
  background-image: none;
  background-color: #437a39;
}
.task-container .task-header-container.computer-programming .task-header-mid-container {
  background-image: none;
  background-color: #437a39;
}
.task-container .task-header-container.computing .task-header-mid-container {
  background-image: none;
  background-color: #437a39;
}
.task-container .task-header-container.partner-content .task-header-mid-container {
  background-image: none;
  background-color: #218270;
}
.task-container .task-header-container.math .task-header-mid-container {
  background-image: none;
  background-color: #1c758a;
}
.task-container .task-header-container.test-prep .task-header-mid-container {
  background-image: none;
  background-color: #644172;
}
.task-container .task-header-container.college-careers-more .task-header-mid-container {
  background-image: none;
  background-color: #218270;
}
.task-container > .exercise-task .task-header-mid-container:not(.end-of-task):not(.end-of-mastery-task-header) {
  background: #0b0f13;
  background: linear-gradient(180deg, #0b0f13, #3a5163);
}
.task-container > .video-task .completion-progress-container {
  width: 180px;
}
.task-container > .video-task .task-description {
  max-width: 65%;
}
.task-container > .computing .task-description {
  position: relative;
  bottom: auto;
}
.task-container .current-card #problemarea,
.task-container .current-card #answer_area_wrap {
  margin-top: 20px;
}
.task-container .current-card #workarea {
  margin-left: 20px;
}
.task-container .current-card #hintsarea {
  margin-left: 50px;
}
.task-container .exercises-body .exercises-card {
  width: 100%;
  margin: 0;
}
.task-container .exercises-body .current-card-container-inner {
  border-color: #ddd;
  border-width: 0 0 1px 0;
  box-shadow: none;
}
.task-container #extras {
  margin: 0px;
  padding: 10px 15px;
}
.task-container #extras a {
  text-decoration: none;
}
.task-container .end-of-practice-task__leveling .leveled-up,
.task-container .end-of-practice-task__leveling .level {
  text-align: center;
}
.task-container .end-of-practice-task__leveling .leveled-up {
  font-size: 16px;
  line-height: 24px;
  text-transform: uppercase;
}
.task-container .end-of-practice-task__leveling .level {
  font-size: 60px;
  line-height: 90px;
}
.task-container .end-of-practice-task__leveling .state-transition-equation-container {
  padding-top: 10px;
}
.task-container .end-of-practice-task__leveling--main {
  background-color: #1c758a;
  color: #fff;
  height: 176px;
  margin-bottom: 50px;
}
.task-container .end-of-practice-task__leveling--maxed-out {
  padding: 20px 20px 0;
  text-align: center;
}
.task-container .end-of-practice-task__achievements {
  padding: 40px;
}
.task-container .end-of-practice-task__achievements .move-right {
  padding-left: 40px;
  padding-top: 20px;
}
.task-container .end-of-practice-task__achievements .end-of-task__badges {
  padding-top: 10px;
  position: relative;
}
.task-container .end-of-practice-task__achievements .achievement-badge {
  margin-left: 0;
  opacity: 0;
}
.task-container .end-of-practice-task__achievements .achievement-badge.centered-badge {
  position: absolute;
  top: 0;
  right: auto;
  bottom: auto;
  left: 50%;
}
.task-container .end-of-practice-task__achievements .achievement-badge.big-badge {
  -webkit-transform: scale(1.5);
  -moz-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -o-transform: scale(1.5);
  transform: scale(1.5);
  transition: all 150ms ease-in-out;
  z-index: 1;
}
.task-container .end-of-practice-task__achievements .achievement-badge.big-badge.to-normal-size-badge {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  transition: all 100ms ease-in-out;
}
.task-container .end-of-practice-task__achievements .achievement-badge.visible-badge {
  opacity: 1;
}
.task-container .end-of-task__section-header {
  text-transform: uppercase;
}
.task-container .end-of-task__skill-check-description {
  margin: 20px;
}
.task-container .end-of-task__skill-check-table {
  margin-top: 20px;
}
.task-container .end-of-task__subject-title {
  font-size: 16px;
}
.task-container .end-of-task__video-container {
  padding-bottom: 20px;
}
.task-container .end-of-task__incomplete {
  color: #999;
}
.task-container .end-of-task__correctness-icon {
  width: 30px;
  font-size: 20px;
  text-align: center;
  padding-right: 5px;
}
.task-container .end-of-task__video-container a {
  color: #1c758a;
}
.task-container .end-of-task__points-container {
  visibility: hidden;
}
.task-container .end-of-task__points-earned {
  color: #444;
  padding-left: 40px;
  visibility: hidden;
}
.task-container .end-of-task__points-earned__number {
  color: #1c758a;
  font-size: 60px;
  line-height: 90px;
}
.task-container .end-of-task__avatar-parts {
  padding-top: 10px;
}
@keyframes animate-avatar-entrance {
  0% {
    opacity: 0;
    transform: scale(1);
    left: 50%;
  }
  20% {
    opacity: 1;
    transform: scale(1.5);
  }
  85% {
    transform: scale(1.5);
    left: 50%;
  }
  100% {
    transform: scale(1);
    left: 0;
  }
}
.task-container .end-of-task__avatar-parts .avatar-part-achieved {
  *zoom: 1;
  background: #fdfdfd;
  display: inline-block;
  margin-bottom: 20px;
  margin-right: 20px;
  position: relative;
  visibility: hidden;
  width: 320px;
  z-index: 1;
}
.task-container .end-of-task__avatar-parts .avatar-part-achieved:before,
.task-container .end-of-task__avatar-parts .avatar-part-achieved:after {
  display: table;
  content: "";
  line-height: 0;
}
.task-container .end-of-task__avatar-parts .avatar-part-achieved:after {
  clear: both;
}
.task-container .end-of-task__avatar-parts .avatar-part-achieved.avatar-part-visible {
  visibility: visible;
}
.task-container .end-of-task__avatar-parts .avatar-part-achieved.animate-entrance {
  animation: animate-avatar-entrance 1000ms ease-in-out;
}
.task-container .end-of-task__avatar-parts .avatar-part-thumbnail {
  cursor: pointer;
  float: left;
  height: 100px;
  margin-right: 15px;
  width: 100px;
}
.task-container .end-of-task__avatar-parts .background-part .avatar-part-thumbnail {
  border-radius: 100px;
}
.task-container .end-of-task__avatar-parts .avatar-part-name {
  font-weight: bold;
  font-size: 14px;
}
.task-container .end-of-task__avatar-parts .customize-avatar-button-container {
  bottom: 0;
  position: absolute;
  display: inline-block;
}
.task-container .end-of-task__avatar-parts .requirement-icon {
  margin-right: 5px;
}
.task-container .stat-block {
  display: table;
  min-height: 80px;
}
.task-container .stat-block [class*='stat'] {
  display: table-cell;
  vertical-align: top;
}
.task-container .stat-block .stat-num {
  color: #1c758a;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.task-container .stat-block .stat-num,
.task-container .stat-block .stat-desc {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
  padding: 7px 0 7px 10px;
}
.task-container .stat-block .stat-num small,
.task-container .stat-block .stat-desc small {
  display: block;
  font-size: 11px;
  font-weight: normal;
}
.task-container .stat-block .sum-row {
  border-top: 1px solid #aaa;
}
.task-container .end-of-task-info {
  padding: 20px;
  min-height: 330px;
}
.task-container .end-of-task-info .icon-remove {
  color: #6ac1d5;
}
.task-container .end-of-task-info .task-stats .exercise-progress-probability.loading {
  background: url('/images/spinner.gif') 25px no-repeat;
}
.task-container .end-of-task-info .task-stats.dashboard .congrats-img {
  float: left;
  height: 120px;
  padding-right: 15px;
}
.task-container .end-of-task-info .task-stats.dashboard h3 {
  font-size: 24px;
}
.task-container .end-of-task-info .default-action {
  width: 100%;
}
.task-container .end-of-task-info .mastery-stats {
  margin: 30px;
}
.task-container .end-of-task-dismiss-task-button-container {
  padding: 0 20px 20px 20px;
}
.task-container .end-of-task-dismiss-task-button-container > input {
  width: 100%;
}
.task-container .end-of-task-footer-container .end-of-task-footer {
  background-color: #eee;
  border-top: 1px solid #ddd;
  padding: 10px 20px;
}
.task-container .end-of-task-footer-container .end-of-task-footer-minimal {
  text-align: center;
  padding: 10px 20px;
}
.task-container .end-of-task-footer-container .next-task-button-container {
  float: right;
}
.task-container .end-of-task-footer-container .next-task-button-container .kui-button {
  border: none;
}
.task-container .first-time-avatar-unlock {
  height: 150px;
  margin: 50px auto 40px auto;
  position: relative;
  text-align: left;
  width: 530px;
}
.task-container .first-time-avatar-unlock .bouncing-avatar-container {
  float: left;
  height: 150px;
  margin-right: 40px;
  width: 150px;
}
.task-container .first-time-avatar-unlock .unlock-heading {
  font-size: 22px;
  line-height: 1.3;
  margin-bottom: 6px;
}
.task-container .first-time-avatar-unlock .customize-avatar-button-container {
  bottom: 0;
  display: inline-block;
  position: absolute;
}
/**
 * Keyframe animation for text to fade in while expanding to 105%, bouncing
 * back to 90% and then resting at 100%.
 * To use, add the .text-bounce-in class to your element as well as another
 * class that specifies the animation-duration, such as
 * .problem-history-item-animation.
 */
@keyframes textBounceIn {
  0% {
    transform: scale(0.3, 0.3);
    opacity: 0;
  }
  50% {
    transform: scale(1.05, 1.05);
    opacity: 1;
  }
  70% {
    transform: scale(0.9, 0.9);
  }
  100% {
    transform: scale(1, 1);
  }
}
.text-bounce-in {
  animation-name: textBounceIn;
}
.problem-history-item-animation {
  animation-duration: 500ms;
}
/**
 * Animation for criteria enlarging one-by-one when the task is finished
 */
@keyframes criteriaSatisfied {
  0% {
    transform: scale(1, 1);
  }
  50% {
    transform: scale(1.5, 1.5);
  }
  100% {
    transform: scale(1, 1);
  }
}
.criteria-satisfied {
  animation-name: criteriaSatisfied;
  animation-duration: 175ms;
  animation-timing-function: ease;
}
.criteria-satisfied.slow {
  animation-duration: 600ms;
}
@keyframes criteriaSatisfiedFadeout {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
.fadeout {
  opacity: 0;
  animation-name: criteriaSatisfiedFadeout;
  animation-duration: 600ms;
}
@keyframes hat-tip {
  30% {
    transform: rotate(15deg);
  }
  80% {
    transform: rotate(15deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
.hat-tip {
  animation: hat-tip 800ms;
}
.bouncing-avatar-container {
  height: 200px;
  position: relative;
  width: 150px;
}
@keyframes avatar-bounce {
  0% {
    bottom: -10px;
    transform: scaleY(0.8);
  }
  14% {
    bottom: 70px;
    transform: scaleY(1);
  }
  29% {
    bottom: -10px;
    transform: scaleY(0.8);
  }
  43% {
    bottom: 50px;
    transform: scaleY(1);
  }
  57% {
    bottom: 0px;
    transform: scaleY(0.9);
  }
  71% {
    bottom: 30px;
    transform: scaleY(1);
  }
  86% {
    bottom: 0px;
    transform: scaleY(0.95);
  }
  100% {
    bottom: 10px;
    transform: scaleY(1);
  }
}
@keyframes avatar-shadow-bounce {
  0% {
    margin-left: -75px;
    width: 150px;
  }
  14% {
    margin-left: -40px;
    width: 90px;
  }
  29% {
    margin-left: -75px;
    width: 150px;
  }
  43% {
    margin-left: -50px;
    width: 110px;
  }
  57% {
    margin-left: -75px;
    width: 150px;
  }
  71% {
    margin-left: -60px;
    width: 130px;
  }
  86% {
    margin-left: -75px;
    width: 150px;
  }
}
.bouncing-avatar-container.avatar-bounce .avatar-img {
  animation: avatar-bounce 1.8s;
}
.bouncing-avatar-container.avatar-bounce .avatar-shadow {
  animation: avatar-shadow-bounce 1.8s;
}
.bouncing-avatar-container.clickable-avatar:hover {
  cursor: pointer;
}
.bouncing-avatar-container.clickable-avatar:hover .avatar-img {
  transform: scale(1.1);
}
.bouncing-avatar-container.clickable-avatar:hover .avatar-shadow {
  transform: scale(1.05);
}
.bouncing-avatar-container .avatar-img {
  bottom: 10px;
  position: absolute;
  transition: all 0.15s ease;
  width: 100%;
  z-index: 1;
}
.bouncing-avatar-container .avatar-shadow {
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 30%, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0) 100%);
  bottom: 0;
  height: 30px;
  left: 50%;
  margin-left: -75px;
  position: absolute;
  transition: all 0.15s ease;
  width: 150px;
}
.tutorial-mode-task-button-container .practice-again {
  line-height: 20px;
  text-align: center;
}
.tutorial-mode-task-button-container .tutorial-router-link {
  text-align: center;
}
.tutorial-mode-task-button-container .practice-again,
.is-completed-task .maxed-out-level,
.max-level-refer-dashboard {
  display: none;
}
.tutorial-content .dismiss-task,
.tutorial-content .max-level-dont-refer-dashboard {
  display: none;
}
.tutorial-content .tutorial-mode-task-button-container .practice-again,
.tutorial-content .max-level-refer-dashboard {
  display: block;
}
iframe.player {
  width: 100%;
}
.mission-warmup-interstitial {
  box-sizing: border-box;
  color: #fdfdfd;
  background: #0b0f13;
  background: linear-gradient(180deg, #0b0f13, #3a5163);
  padding: 160px 60px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;
  transition-duration: 0.6s;
}
.mission-warmup-interstitial .title {
  font-family: inherit;
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0;
}
.mission-warmup-interstitial .sub-title {
  font-family: inherit;
  font-size: 18px;
  margin-bottom: 20px;
}
.mission-warmup-interstitial.task-interstitial-exit .button-container {
  display: none;
}
.mission-warmup-interstitial.task-interstitial-exit-active {
  padding: 20px;
  max-height: 131px;
}
.mission-warmup-interstitial.task-interstitial-exit-active .title {
  margin-bottom: 22px;
  margin-top: 0;
  -webkit-font-smoothing: antialiased;
}
.mission-warmup-interstitial.task-interstitial-exit-active .sub-title {
  color: #eee;
  font-size: 12px;
  line-height: 18px;
}
@media screen and (max-height: 750px) {
  .task-container .end-of-practice-task__leveling .leveled-up,
  .task-container .end-of-practice-task__leveling .level {
    display: none;
  }
  .task-container .end-of-practice-task__leveling--main {
    height: 55px;
    margin-bottom: 20px;
  }
  .task-container .end-of-practice-task__leveling--main .state-transition-equation-container {
    padding-top: 0;
    -webkit-transform: scale(0.8);
    -moz-transform: scale(0.8);
    -ms-transform: scale(0.8);
    -o-transform: scale(0.8);
    transform: scale(0.8);
  }
  .task-container .end-of-task__points-earned__number {
    font-size: 48px;
    line-height: 72px;
  }
}
/**
 * Bibliotron exercise style resets
 */
.bibliotron-exercise .task-content-container {
  margin: 0;
}
.bibliotron-exercise .end-of-practice-task__achievements {
  border-top: 1px solid #d6d8da;
  padding: 26px 0 0 0;
  margin: 23px 0 0 0;
}
.bibliotron-exercise .end-of-practice-task__achievements > .row-fluid > div:first-child:not(:last-child) {
  margin-left: 0;
  max-width: 300px;
  width: auto;
}
@media (max-width: 767px) {
  .completion-progress-container {
    display: none;
  }
}
.task-container,
.exercise-task,
.task-content-container {
  height: 100%;
}
.task-inner-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.task-inner-container > .task-body-container {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-height: 0px;
}
.task-inner-container > .end-of-practice-task {
  flex-grow: 1;
  overflow-y: auto;
}
.video-task {
  height: 100%;
}
.video-task > * {
  height: 100%;
  display: flex;
  flex-direction: column;
}
.video-task .task-content-container {
  flex-grow: 1;
  overflow-y: auto;
  flex-basis: 0px;
}
@media (max-width: 767px) {
  .task-container .task-header {
    padding: 21px 56px;
    box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 0px 0px;
    text-align: center;
    background-color: #fff;
    z-index: 999;
  }
  .task-container .task-header .task-header-mobile-overflow {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
  }
}
@media (max-width: 767px) {
  .task-container .task-header .task-title {
    color: #3B3E40;
    font-size: 15px;
    font-weight: bold;
    line-height: 18px;
    margin: 0px;
  }
}
@media (max-width: 767px) {
  .task-container .task-header .task-description {
    display: none;
  }
}
@media (max-width: 767px) {
  .task-container .end-of-practice-task__leveling--main {
    padding-top: 10px;
  }
}
.task-container .end-of-task-info {
  overflow-y: auto;
  min-height: 0px;
  flex-grow: 1;
}
@media (max-width: 767px) {
  .mission-warmup-interstitial {
    background-color: #3B3E40;
  }
  .mission-warmup-interstitial .title {
    position: fixed;
    top: 0px;
    left: 0px;
    margin-top: 0px;
    width: 100vw;
    box-sizing: border-box;
    font-size: 15px;
    padding: 21px 56px;
    color: #3B3E40;
    text-align: center;
    background-color: #fff;
  }
  .mission-warmup-interstitial .button-container {
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100vw;
    height: 60px;
    background-color: #fff;
  }
  .mission-warmup-interstitial .kui-button {
    width: 40% !important;
    position: relative;
    top: 6px;
    left: 57vw;
    box-sizing: border-box;
  }
}