/* color names generated by Gpick */
/* Gpicked from efk pdf */
@media (max-width: 1024px) {
  .navbar-header {
    float: none; }

  .navbar-toggle {
    display: block; }

  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); }

  .navbar-collapse.collapse {
    display: none !important; }

  .navbar-nav {
    float: none !important;
    margin: 7.5px -15px; }

  .navbar-nav > li {
    float: none; }

  .navbar-nav > li > a {
    padding-top: 10px;
    padding-bottom: 10px; } }
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  src: local("Lato Regular"), local("Lato-Regular"), url(http://themes.googleusercontent.com/static/fonts/lato/v7/9k-RPmcnxYEPm8CNFsH2gg.woff) format("woff"); }

html, body {
  height: 100%; }

body {
  color: #595958; }

body, p, h1, h2, h3, h4, h5, ul li {
  font-family: 'Lato', sans-serif; }

h1, h2, h3, h4, h5 {
  color: #662680; }

.container, #footer {
  margin: 0 auto;
  padding: 0;
  background-color: #fafafa; }

.push, #footer {
  min-height: 250px; }

#wrapper {
  height: auto !important;
  margin: 0 auto -250px;
  min-height: 100%;
  position: relative; }

#footer {
  background-color: #ffffff;
  margin: 0 auto;
  position: relative;
  text-align: left;
  padding: 40px 5px 40px 5px;
  border-top: 3px solid #c8c8c8; }
  #footer ul li a {
    color: #e03716; }
  #footer .list-unstyled li img {
    margin-bottom: 10px; }

#footer div ul {
  margin: 0 0 20px 0;
  padding: 0; }
  #footer div ul li {
    padding-left: 0;
    list-style-type: none; }
  #footer div ul li:before {
    padding-right: 5px;
    font-family: 'Glyphicons Halflings';
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    position: relative;
    top: 1px;
    content: "\e080"; }
  #footer div ul li ul li:before {
    padding-right: 10px;
    color: #e03716; }
  #footer div ul.list-flatpages li:before {
    color: #e03716; }
  #footer div ul.list-unstyled li {
    text-align: center; }
  #footer div ul.list-unstyled li:before {
    content: none; }

#footer p {
  text-align: center; }

.content {
  margin-top: 0; }
  @media screen and (max-width: 768px) {
    .content {
      padding: 0; } }
  @media screen and (min-width: 768px) {
    .content {
      padding: 0; } }

.list-group-item {
  background-color: #fafafa;
  border: none; }

.contactpage {
  padding-bottom: 40px; }

@media screen and (min-width: 768px) {
  div.flatpage {
    padding: 20px 0 20px 0; } }
@media screen and (max-width: 768px) {
  div.flatpage {
    padding: 10px; } }
div.flatpage img {
  max-width: 100%;
  height: auto; }
div.flatpage img, div.flatpage iframe {
  margin-left: auto;
  margin-right: auto;
  display: block; }
div.flatpage p img {
  margin: 0; }

.navbar-inverse {
  background-image: none !important;
  background-color: #280028;
  border: 0 !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important; }
  @media screen and (min-width: 768px) {
    .navbar-inverse {
      padding-left: 30px;
      padding-right: 30px; } }

.navbar {
  margin-bottom: 0;
  -webkit-border-radius: 0 0;
  -moz-border-radius: 0 / 0;
  border-radius: 0 / 0; }
  .navbar .nav li a, .navbar .collapse li a {
    text-transform: uppercase;
    font-weight: 900;
    font-size: 12px; }
  .navbar .collapse li a {
    padding: 25px 10px 25px 0; }

.navbar-inverse .navbar-brand {
  color: #59bec9;
  padding: 5px 15px 5px 5px; }

.header .navbar-collapse {
  vertical-align: middle; }
  .header .navbar-collapse .dropdown-menu li a {
    padding: 5px; }

.subjectbar {
  z-index: 900; }

.subjects-toggle {
  background-image: none !important;
  color: #e84d1a;
  clear: both; }

.subjects {
  margin: 20px 0 20px 0;
  clear: both; }

.subjects .nav li {
  position: relative;
  vertical-align: middle;
  line-height: 15px; }
  @media screen and (min-width: 1024px) {
    .subjects .nav li {
      border-left: 1px solid #c8c8c8; }
      .subjects .nav li .subject-title {
        max-width: 100px; } }
  .subjects .nav li div {
    display: table-cell;
    vertical-align: middle; }
  .subjects .nav li .subject-chevron {
    color: #e84d1a; }
  .subjects .nav li .subject-title {
    padding: 0 10px 0 10px; }
  .subjects .nav li a {
    font-size: 12px;
    color: #000;
    text-transform: capitalize;
    display: block;
    line-height: 15px;
    padding: 0 10px 0 10px; }
.subjects .nav :first-child {
  border-left: none; }

.header img {
  font-size: 10px;
  text-transform: uppercase; }

.language-select {
  background-color: #0ff; }

.slide .item {
  color: #000;
  font-weight: 900;
  font-size: 1.5em;
  text-align: center; }
  .slide .item .btn {
    text-transform: uppercase;
    font-weight: 900;
    background-image: none !important;
    background-color: #e84d1a;
    color: #fff; }
    .slide .item .btn:hover {
      background-color: #652380; }
  .slide .item img {
    margin: 0 auto; }
.slide .carousel-control.left, .slide .carousel-control.right {
  background: none; }

.homepage h1, .homepage h2, .homepage h2 a, .homepage h3, .homepage h4 {
  color: #595959;
  font-weight: 900; }
.homepage h2 {
  font-size: 25px;
  padding: 10px 15px; }
.homepage .lesson-thumbnail {
  float: left; }
  @media screen and (min-width: 640px) {
    .homepage .lesson-thumbnail {
      width: 31%; } }
  @media screen and (max-width: 640px) {
    .homepage .lesson-thumbnail {
      width: 45%; } }
  @media screen and (max-width: 480px) {
    .homepage .lesson-thumbnail {
      width: 95%; } }

.lesson-thumbnail {
  background-color: #fff;
  padding: 0;
  max-height: 440px;
  overflow: hidden;
  border-radius: 4px;
  border: 1px solid #c8c8c8; }
  @media screen and (min-width: 768px) {
    .lesson-thumbnail {
      margin: 0 1% 40px 1%; } }
  @media screen and (max-width: 768px) {
    .lesson-thumbnail {
      margin: 0 2.5% 40px 2.5%; } }
  .lesson-thumbnail img.lesson-icon {
    margin: 20px auto 0 auto;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    border-radius: 50%;
    display: block; }
  .lesson-thumbnail .caption {
    padding: 0 15px 0 15px;
    height: 175px; }
    .lesson-thumbnail .caption h3 {
      font-size: 20px;
      font-weight: 900;
      color: #280028; }
    .lesson-thumbnail .caption p {
      font-size: 14px;
      color: #565656; }
  .lesson-thumbnail .grades {
    margin: 0 15px 5px 15px;
    padding: 10px 5px 0 5px;
    height: 45px;
    border-top: 1px solid #c8c8c8; }
    .lesson-thumbnail .grades .small-subject-icon {
      float: left;
      margin: 0 5px 20px 0; }
    .lesson-thumbnail .grades p {
      text-transform: uppercase;
      font-size: 11px;
      font-weight: 900;
      color: #000; }
      .lesson-thumbnail .grades p span {
        color: #662680; }
  .lesson-thumbnail .caption, .lesson-thumbnail .grades {
    overflow: hidden; }
  .lesson-thumbnail .btn {
    -webkit-border-radius: 0 4px;
    -moz-border-radius: 0 / 4px;
    border-radius: 0 / 4px;
    min-height: 40px;
    font-weight: 900;
    text-transform: uppercase;
    background-image: none !important;
    background-color: #e03716;
    color: #fff;
    padding: 14px 0 14px 0;
    border-color: #a62b18; }

.clamped {
  line-height: 1em;
  overflow: hidden; }
  .clamped:before {
    content:"";
    float: left;
    width: 5px; }
  .clamped > *:first-child {
    float: right;
    width: 100%;
    margin-left: -5px; }        
  .clamped:after {
    content: "\02026";  
    box-sizing: content-box;
    -webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    float: right; position: relative;
    top: -1em;
    left: 100%; 
    width: 3em;
    margin-left: -3em;
    padding-right: 5px;
    text-align: right;
    background-size: 100% 100%;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAgAAAAABCAMAAACfZeZEAAAABGdBTUEAALGPC/xhBQAAAwBQTFRF////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AAAA////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wDWRdwAAAP90Uk5TgsRjMZXhS30YrvDUP3Emow1YibnM9+ggOZxrBtpRRo94gxItwLOoX/vsHdA2yGgL8+TdKUK8VFufmHSGgAQWJNc9tk+rb5KMCA8aM0iwpWV6dwP9+fXuFerm3yMs0jDOysY8wr5FTldeoWKabgEJ8RATG+IeIdsn2NUqLjQ3OgBDumC3SbRMsVKsValZplydZpZpbJOQco2KdYeEe36BDAL8/vgHBfr2CvTyDu8R7esU6RcZ5ecc4+Af3iLcJSjZ1ivT0S/PMs3LNck4x8U7wz7Bv0G9RLtHuEq1TbJQr1OtVqqnWqRdoqBhnmSbZ5mXapRtcJGOc4t2eYiFfH9AS7qYlgAAARlJREFUKM9jqK9fEGS7VNrDI2+F/nyB1Z4Fa5UKN4TbbeLY7FW0Tatkp3jp7mj7vXzl+4yrDsYoVx+JYz7mXXNSp/a0RN25JMcLPP8umzRcTZW77tNyk63tdprzXdmO+2ZdD9MFe56Y9z3LUG96mcX02n/CW71JH6Qmf8px/cw77ZvVzB+BCj8D5vxhn/vXZh6D4uzf1rN+Cc347j79q/zUL25TPrJMfG/5LvuNZP8rixeZz/mf+vU+Vut+5NL5gPOeb/sd1dZbTs03hBuvmV5JuaRyMfk849nEM7qnEk6IHI8/qn049hB35QGHiv0yZXuMdkXtYC3ebrglcqvYxoj1muvC1nDlrzJYGbpcdHHIMo2FwYv+j3QAAOBSfkZYITwUAAAAAElFTkSuQmCC);
    background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), to(white), color-stop(50%, white));
    background: -moz-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);           
    background: -o-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: -ms-linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), white 50%, white); }

.clamped, .clamped:before {
  height: 1em; }

.clamped-3, .clamped-3:before {
  height: 3em; }

.clamped-5, .clamped-5:before {
  height: 5em; }

@media screen and (min-width: 768px) {
  .subject-header-container {
    height: 300px;
    padding: 50px;
    background-image: url(/static/img/subject-pattern.png); }
    .subject-header-container .subject-header {
      height: 200px;
      line-height: 200px;
      position: relative;
      vertical-align: middle; }
      .subject-header-container .subject-header .subject-header-icon, .subject-header-container .subject-header .subject-header-description {
        height: 200px; }
      .subject-header-container .subject-header .subject-header-icon {
        vertical-align: middle; }
        .subject-header-container .subject-header .subject-header-icon img, .subject-header-container .subject-header .subject-header-icon object {
          background-color: #fff;
          padding: 30px;
          margin-left: -10px;
          -webkit-border-radius: 4px;
          -moz-border-radius: 4px;
          -ms-border-radius: 4px;
          -o-border-radius: 4px;
          border-radius: 4px; }
      .subject-header-container .subject-header .subject-header-description {
        margin-top: 2px;
        -webkit-border-radius: 4px;
        -moz-border-radius: 4px;
        -ms-border-radius: 4px;
        -o-border-radius: 4px;
        border-radius: 4px;
        background-color: #fff;
        line-height: 15px;
        padding: 10px 10px 0 20px; }
        .subject-header-container .subject-header .subject-header-description h1 {
          text-transform: capitalize; }
        .subject-header-container .subject-header .subject-header-description p {
          font-size: 16px; } }

.content .container iframe {
  overflow: hidden;
  margin-left: auto;
  margin-right: auto;
  display: block; }
.content h2.lessons {
  text-align: center; }
  .content h2.lessons a {
    color: #662680; }
.content .container nav {
  text-align: center;
  margin: 20px 0; }

@media screen and (min-width: 992px) {
  .lesson-filter {
    padding: 70px 0 70px 0; }
    .lesson-filter .searchbox, .lesson-filter .select-popularity {
      padding: 5px 10px 0 0; } }
@media screen and (max-width: 992px) {
  .lesson-filter {
    padding: 10px 0 0 0; }
    .lesson-filter .select-grade, .lesson-filter .searchbox {
      padding: 10px; } }

.select-grade label {
  padding: 12px 0;
  color: #662680; }
.select-grade .btn-grade {
  background-image: none;
  background-color: #fff;
  color: #662680;
  border: 1px solid #c8c8c8;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  margin-top: 2px;
  padding: 9px 0; }
.select-grade .btn-grade:hover, .select-grade .active {
  color: white;
  background-color: #662680;
  border: none; }

.select-popularity .btn-popularity {
  background-image: none;
  background-color: #fff;
  color: #662680;
  border: 1px solid #c8c8c8; }
.select-popularity .btn-popularity:hover, .select-popularity .active {
  color: white;
  background-color: #662680;
  border: none; }

#lessons {
  margin: 0 auto; }
  #lessons .container-lessons .lesson-thumbnail {
    float: left; }
    @media screen and (min-width: 992px) {
      #lessons .container-lessons .lesson-thumbnail {
        width: 18%; } }
    @media screen and (max-width: 992px) {
      #lessons .container-lessons .lesson-thumbnail {
        width: 48%; } }
    @media screen and (max-width: 768px) {
      #lessons .container-lessons .lesson-thumbnail {
        width: 95%; } }

.newsitems {
  font-size: 16px;
  color: #595959;
  padding-bottom: 20px; }
  .newsitems h4 a {
    color: #595959; }
  .newsitems h1 a, .newsitems h2 a {
    margin-bottom: 10px;
    font-weight: 900;
    font-size: 25px; }
  .newsitems h1 a {
    padding: 10px 15px;
    color: #662680; }
  .newsitems .pagination {
    padding: 0 15px; }
    .newsitems .pagination > li > a {
      color: #662680; }
    .newsitems .pagination > li.disabled > a {
      color: #c8c8c8; }
    .newsitems .pagination > .active > a, .newsitems .pagination .pagination > .active > span, .newsitems .pagination .pagination > .active > a:hover, .newsitems .pagination .pagination > .active > span:hover, .newsitems .pagination .pagination > .active > a:focus, .newsitems .pagination .pagination > .active > span:focus {
      background-color: #662680;
      border-color: #662680;
      color: #fff; }

.newsitem {
  margin: 0 0 10px 0; }
  .newsitem h4 a {
    font-size: 16px;
    text-transform: uppercase;
    font-weight: 900; }
  .newsitem .news-footer {
    font-size: 10px;
    text-transform: uppercase;
    margin-top: 10px; }
    .newsitem .news-footer a {
      color: #e03716; }

.more_news {
  padding: 0 10px;
  display: block;
  color: #662680;
  text-transform: uppercase;
  font-weight: 900;
  font-size: 16px; }
  .more_news span.more {
    color: #e03716; }