@import url(/bootstrap/3.3.6/css/bootstrap.min.css);
@import url(https://fonts.googleapis.com/css?family=Fredoka+One);
h1 {
  font-size: 32px;
  color: #222; }

h2 {
  font-size: 24px;
  color: #888; }

h3 {
  font-size: 24px;
  margin: 1.24em 0 0; }

h4 {
  font-size: 16px;
  margin: 0 0 1.24em;
  color: #929fa7; }

h5 {
  font-weight: bold;
  font-size: 16px; }

h6 {
  font-size: 12px; }

#bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: -1;
  -webkit-filter: blur(4px);
  -moz-filter: blur(4px);
  -o-filter: blur(4px);
  -ms-filter: blur(4px);
  filter: blur(4px); }

body {
  line-height: 1;
  padding: 51px 0 0;
  font-size: 16px;
  background-color: #0062a6;
  background-position: center 0;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #fff;
  background-image: url("/media/images/bkg.svg");
  background-position: center center;
  background-size: cover; }

.blue {
  background-image: url("/media/images/loony_bkg.svg");
  background-position: center center;
  background-size: cover; }

a {
  color: #eaba3f; }
  a:hover {
    color: #f6c343;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.06);
    text-decoration: none; }

input, textarea, select {
  color: #00111e;
  box-shadow: none; }

input[type='radio'], input[type='radio']:active {
  box-shadow: none;
  outline: none; }

input:focus {
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(0, 98, 166, 0.62); }

input.error, textarea.error, textarea.error.form-control, select.error {
  border: 1px solid #ff1818; }

.form-group {
  margin: 1em; }
  .form-group .btn {
    margin: 0 0.62em 0.25em 0; }
  .form-group .loading {
    position: relative;
    width: 100%;
    text-align: center;
    display: block;
    height: 0px;
    font-size: 162%; }

.result {
  border-radius: 8px;
  margin: 8px 0 16px; }
  .result.error, .result.success {
    padding: 0.6em 1em;
    border: 1px solid rgba(255, 255, 255, 0.38);
    font-size: 16px;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.62);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08); }
  .result.error {
    color: red;
    background-color: rgba(255, 200, 200, 0.6);
    border: 1px solid rgba(255, 200, 200, 0.6); }
  .result.success {
    color: #065d06;
    background-color: rgba(200, 255, 200, 0.6);
    border: 1px solid rgba(200, 255, 200, 0.6); }

.btn {
  box-shadow: 0 0.05em 0.14em rgba(0, 0, 0, 0.16); }
  .btn svg, .btn img {
    height: 1.62em;
    width: 1.62em;
    margin: -0.06em 0.5em -0.25em 0;
    float: left; }
  .btn i.fa {
    margin: 0 0.24em -0.25em 0; }

.btn-golden {
  color: #342502;
  background-color: #fdd87c;
  border-color: #c4940d;
  box-shadow: 0 0.05em 0.14em rgba(0, 0, 0, 0.15); }
  .btn-golden .fa {
    color: #503904; }
  .btn-golden:hover, .btn-golden:focus, .btn-golden:active, .btn-golden .active {
    color: #1F1702;
    background-color: #eac25c;
    border-color: #B59C5E; }
  .btn-golden .disabled, .btn-golden:disabled, .btn-golden .disabled:hover {
    background-color: #FFCB45;
    border-color: #B59C5E; }

.btn-default-blue {
  color: #0062A6;
  border-color: #5ea5d4;
  box-shadow: 0 0.05em 0.14em rgba(0, 0, 0, 0.15); }
  .btn-default-blue .fa {
    color: #001829; }
  .btn-default-blue svg {
    fill: #001829; }

.btn-light-blue {
  color: rgba(9, 53, 83, 0.94);
  background-color: rgba(160, 214, 250, 0.86);
  font-weight: bold;
  text-decoration: 0 1px 1px rbga(0, 0, 0, 0.24);
  border-color: rgba(0, 52, 90, 0.24); }
  .btn-light-blue i {
    color: #fff;
    font-size: 20px;
    margin: -0.16em 0.38em 0 0;
    float: left;
    display: inline-block;
    width: 1em;
    text-align: center;
    text-shadow: 0 0.02em 0.04em rgba(0, 0, 0, 0.38); }
  .btn-light-blue:hover, .btn-light-blue:focus, .btn-light-blue:active, .btn-light-blue .active {
    color: #093553;
    background-color: rgba(160, 214, 250, 0.96);
    border-color: rgba(0, 52, 90, 0.24); }

.btn-edit {
  float: right;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif !important; }

img.flag {
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.94);
  height: 1.16em;
  width: 1.16em; }

.title {
  width: 100%;
  min-height: 5.85em;
  margin: 0 0 1em;
  display: table; }
  .title h1 {
    font-size: 423%;
    margin: 0.38em 0 0.12em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.38);
    line-height: 110%;
    font-family: "Fredoka One", 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: normal; }
  .title h2 {
    font-size: 32px;
    margin: 0 0 0.3em;
    min-height: 0.62em;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    font-family: "Fredoka One", 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: normal; }
  .title .hasTransliterations h2 {
    text-align: right;
    color: #a7c4da;
    font-size: 320%; }
  .title img.icon {
    width: 11em;
    height: 11em;
    margin: 0 1em 0 0;
    display: inline-block;
    padding: 0;
    float: left; }
    .title img.icon.flag {
      margin: 28px 28px 28px -4px;
      border: 2px solid white; }
  .title .photo {
    float: left;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(0, 49, 83, 0.1);
    background-color: rgba(255, 255, 255, 0.8);
    height: 144px;
    width: 144px;
    margin: 0 20px 24px -4px; }
  .title i.icon {
    margin: 24px 24px 24px 0;
    display: inline-block;
    padding: 0;
    float: left;
    font-size: 128px;
    height: 148px; }

.title-blue {
  width: 100%;
  min-height: 5.85em;
  margin: 0 0 1em;
  display: table; }
  .title-blue h1 {
    color: rgba(255, 255, 255, 0.98); }
  .title-blue h2 {
    color: rgba(255, 255, 255, 0.62);
    margin: 0 0 24px; }
  .title-blue h3 {
    color: rgba(255, 255, 255, 0.98); }
  .title-blue h4 {
    color: rgba(255, 255, 255, 0.62);
    margin: 0 0 24px; }
  .title-blue .hasTransliterations h2 {
    color: #a7c4da; }
  .title-blue img.icon {
    margin: 16px 8px 0; }

.content {
  color: #333;
  padding: 0;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25);
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.95));
  overflow: hidden;
  min-height: 674px; }

.footer {
  background-image: linear-gradient(to bottom, rgba(33, 123, 186, 0.8), #0062a6);
  margin-bottom: 0;
  padding: 1.6em 0; }
  .footer .social_link {
    background-color: rgba(255, 255, 255, 0.38);
    display: inline-block;
    padding: 0.5em;
    margin: -0.5em 0;
    border-radius: 50%;
    height: 2.38em;
    width: 2.38em;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap; }
    .footer .social_link i {
      font-size: 22px;
      color: rgba(255, 255, 255, 0.85); }
  .footer .stuff {
    display: block;
    color: rgba(255, 255, 255, 0.38);
    margin: 1em 0; }
    .footer .stuff a {
      color: rgba(255, 255, 255, 0.85);
      font-weight: normal; }
    .footer .stuff a:hover {
      color: #fff; }
  .footer .stuff-right {
    text-align: right; }

.bubble, .apply-preview {
  background-color: rgba(255, 255, 255, 0.96);
  border-radius: 0.62em;
  box-shadow: 0 0.05em 0.25em rgba(0, 0, 0, 0.25);
  margin: 0 0 2em 0;
  padding: 0;
  overflow: hidden;
  color: rgba(14, 22, 30, 0.98);
  text-shadow: none; }

.blue .bubble, .blue .apply-preview {
  box-shadow: 0 0.2em 0.5em rgba(0, 0, 0, 0.15); }

.ad {
  margin: 0 auto 16px; }

.notLoggedIn .photo {
  float: left;
  height: 80px;
  width: 80px;
  margin: -4px 12px 0 0; }

.notLoggedIn .btn {
  margin: 8px 8px 0 0; }

@media (max-width: 1199px) {
  .title img.icon {
    width: 128px;
    height: 128px; } }

@media (max-width: 1024px) {
  .navbar .container {
    width: auto; }
  .title img.icon {
    width: 128px;
    height: 128px; }
    .title img.icon.flag {
      margin: 16px 16px 16px -8px; }
  .title i.icon {
    margin: 16px 16px 16px 0;
    display: inline-block;
    padding: 0;
    float: left;
    font-size: 96px;
    height: 96px; }
  .title-blue {
    min-height: auto; }
    .title-blue h1 {
      font-size: 262%;
      margin: 20px 0 0; }
    .title-blue h2 {
      margin: 0 0 12px; } }

@media screen and (max-width: 512px) {
  body {
    padding: 51px 0 0; }
  h3 {
    font-size: 20px; }
  h4 {
    font-size: 16px; }
  .content h3 {
    margin: 16px 12px 0; }
  .content h4 {
    margin: 0 12px 16px; }
  .title-blue {
    min-height: auto;
    margin: 0.5em 0; }
    .title-blue h1 {
      font-size: 161%;
      margin: 0.38em 0 0; }
    .title-blue h2 {
      font-size: 25px;
      margin: 0 0 12px;
      min-height: 0.62em; }
    .title-blue .hasTransliterations h2 {
      text-align: right;
      font-size: 161%; }
    .title-blue img.icon {
      width: 4em;
      height: 4em;
      margin: 0.25em 0 0 16px; }
    .title-blue i.icon {
      margin: 4px 12px 0 0;
      display: inline-block;
      padding: 0;
      float: left;
      font-size: 48px;
      height: auto; }
  .bubble, .apply-preview {
    border-radius: 8px;
    margin: 12px; }
  .container .bubble {
    margin: 12px 0; }
  .footer .stuff {
    text-align: center; }
  .footer .stuff-right {
    text-align: center; } }

.search-results {
  position: absolute;
  z-index: 10;
  margin: 0 13px;
  padding: 0 6px; }
  .search-results > * {
    display: block;
    cursor: pointer;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid rgba(0, 98, 166, 0.62);
    border-left: 1px solid rgba(0, 98, 166, 0.62);
    border-bottom: 1px solid rgba(0, 98, 166, 0.55);
    background-color: rgba(255, 255, 255, 0.99);
    white-space: nowrap;
    text-shadow: 0 1px 1px #fff;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2);
    font-weight: normal; }
  .search-results a {
    color: #0062A6; }
  .search-results .translation {
    color: rgba(0, 0, 0, 0.9); }
  .search-results .translation::after {
    content: " / "; }
  .search-results .translation:last-child::after {
    content: ""; }
  .search-results a:last-child, .search-results p {
    border-bottom: 1px solid rgba(0, 98, 166, 0.62);
    color: #0062A6;
    -moz-border-radius-bottomright: 10px;
    border-bottom-right-radius: 10px;
    -moz-border-radius-bottomleft: 10px;
    border-bottom-left-radius: 10px; }
    .search-results a:last-child .fa-spin, .search-results p .fa-spin {
      color: gray; }
  .search-results a:hover {
    text-decoration: none; }
    .search-results a:hover b {
      text-decoration: underline; }

div.navbar {
  border-radius: 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  background-image: linear-gradient(to top, rgba(93, 183, 246, 0.62) 0%, rgba(107, 194, 252, 0.55) 100%);
  white-space: nowrap;
  overflow-y: scroll;
  box-shadow: 0 0.07em 0.14em rgba(0, 0, 0, 0.1); }
  div.navbar .container a {
    float: left; }
  div.navbar a {
    margin: 0;
    color: #0062a6;
    color: rgba(255, 255, 255, 0.86);
    padding: 1em;
    text-shadow: 0 0.06em 0.1em rgba(0, 0, 0, 0.38); }
    div.navbar a.lang_home {
      background-color: rgba(255, 255, 255, 0.1);
      color: #fff;
      border-top: 1px solid rgba(255, 255, 255, 0.05);
      border-left: 1px solid rgba(255, 255, 255, 0.1);
      border-right: 1px solid rgba(255, 255, 255, 0.1);
      padding: 1em 1.25em;
      font-weight: bold; }
      div.navbar a.lang_home img {
        height: 24px;
        width: 24px; }
    div.navbar a:hover {
      background-color: rgba(255, 255, 255, 0.1);
      color: #fff; }

.navbar {
  color: #0062A6;
  box-shadow: 0 0.05em 0.08em rgba(0, 0, 0, 0.24);
  background-image: linear-gradient(to top, #80c4f4, rgba(152, 212, 255, 0.98));
  border-bottom: 1px solid rgba(0, 41, 71, 0.06);
  box-shadow: 0 0.07em 0.14em rgba(0, 0, 0, 0.1);
  margin: 0;
  height: 51px !important; }
  .navbar li > a {
    color: #0062A6;
    font-weight: normal;
    min-height: 52px; }
    .navbar li > a:hover {
      background-color: rgba(255, 255, 255, 0.38); }
  .navbar .profile-link img {
    background-color: rgba(255, 255, 255, 0.4); }
  .navbar .profile-link .name {
    display: inline-block;
    max-width: 128px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    margin: 0 0 -5px 4px; }
  .navbar .dropdown-menu > li.contact > a {
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0.38em 3.33em 0.62em 0.62em;
    margin: 0;
    display: block;
    background-color: rgba(255, 255, 255, 0.94);
    color: rgba(0, 98, 166, 0.96);
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.38);
    min-height: 2em; }
    .navbar .dropdown-menu > li.contact > a:hover {
      color: #333; }
      .navbar .dropdown-menu > li.contact > a:hover img.photo {
        border: 1px solid rgba(0, 0, 0, 0.5); }
    .navbar .dropdown-menu > li.contact > a img.photo {
      height: 2em;
      width: 2em;
      margin: 0.25em 0.6em 0em 0;
      float: left;
      border: 1px solid rgba(0, 98, 166, 0.5); }
    .navbar .dropdown-menu > li.contact > a .name {
      white-space: nowrap; }
    .navbar .dropdown-menu > li.contact > a .date {
      font-weight: normal;
      color: rgba(0, 0, 0, 0.38);
      font-size: 90%;
      margin: -0.1em 0 0;
      display: block; }
  .navbar .dropdown-menu > li.unread > a {
    font-weight: bold; }
  .navbar button {
    background-color: rgba(255, 255, 255, 0.38); }
    .navbar button .icon-bar {
      background-color: #fff; }
  .navbar .container li a {
    padding: 1em; }
    .navbar .container li a .unread_count {
      color: #0061a6;
      background-color: #fff;
      box-shadow: 0 0.1em 0.24em rgba(0, 0, 0, 0.15);
      padding: 0.08em 0.62em 0.15em;
      margin: -0.25em 0 -0.25em 0.15em;
      border-radius: 1em; }
  .navbar .container li a.logout {
    color: #d76868; }
  .navbar .container li a img.photo {
    height: 2em;
    width: 2em;
    float: left;
    margin: -5px 0.15em -7px 0;
    display: inline;
    border: 1px solid rgba(255, 255, 255, 0.85);
    border-radius: 1em; }
  .navbar .lang_home img {
    border-radius: 1em;
    margin: -9px 0.2em -7px 0;
    border: 1px solid #fff;
    height: 2em;
    width: 2em; }

.navbar-brand {
  font-family: "Fredoka One", 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-weight: normal;
  font-size: 150%;
  text-shadow: 0 1px 2px rgba(0, 98, 166, 0.25); }
  .navbar-brand a {
    color: #fff; }
  .navbar-brand img {
    margin: -0.26em 0.2em -0.2em 0.2em;
    width: auto;
    height: 1.6em; }

#search-form {
  padding: 9px 0 0 0;
  margin: 0; }
  #search-form input {
    width: 300px;
    margin: 0px;
    box-shadow: 0 0.05em 0.1em rgba(0, 0, 0, 0.16);
    padding: 6px 10px;
    margin: 0 15px;
    border-radius: 0.38em;
    background-color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(0, 98, 166, 0.62); }
    #search-form input:focus {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.24);
      outline: none;
      background-color: white; }

.navbar .container li .search-results > * {
  width: 290px;
  padding: 6px 0 7px 8px; }

.blue .container .navbar a.btn {
  padding: 6px 12px; }

.blue .navbar a.lang_home img {
  border-radius: 1em;
  margin: -9px 0.2em -7px 0;
  border: 1px solid #fff; }

.blue .navbar a:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff; }

.blue .navbar a.lang_home:hover {
  background-color: rgba(255, 255, 255, 0.16);
  color: #fff; }

.blue .navbar a img {
  height: 1.6em;
  width: 1.6em;
  display: inline;
  margin: -8px 0.6em -5px 0; }

.blue .navbar a, .blue .navbar b {
  display: inline-block; }

.nav .open > a, .nav .open > a:focus, .nav .open > a:hover {
  background-color: #e1f1fd; }

.blue .container .navbar a {
  display: block; }

.blue .container .navbar a:first-child {
  margin: 0 -0.3em 0;
  color: #0062a6;
  color: rgba(255, 255, 255, 0.86);
  padding: 0.95em 1.3em 1em 1.3em; }

@media (max-width: 767px) {
  .navbar-fixed-top .navbar-collapse {
    background-color: #80c4f4;
    box-shadow: 0 0.07em 0.14em rgba(0, 0, 0, 0.1); }
    .navbar-fixed-top .navbar-collapse.in {
      background-color: #80c4f4; } }

@media (min-width: 768px) {
  .navbar {
    border-radius: 0; }
  .navbar-collapse.collapse {
    height: 51px; }
  #search-form input {
    width: 264px; }
  .navbar .container li .search-results > * {
    width: 254px; } }

@media screen and (max-width: 1024px) {
  #search-form input {
    margin: 0 0 0 15px; } }

.lang-selector {
  text-align: right;
  background-color: rgba(86, 168, 226, 0.5);
  padding: 1em 0;
  border-top: 1px solid rgba(255, 255, 255, 0.38);
  border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  box-shadow: 0 0.09em 0.14em rgba(0, 0, 0, 0.2); }
  .lang-selector img {
    border-radius: 50%;
    height: 1.6em;
    width: 1.6em;
    border: 1px solid #fff;
    margin: -3px 0; }
  .lang-selector a {
    padding: 0 0.62em;
    font-weight: bold; }
  .lang-selector span {
    color: rgba(255, 255, 255, 0.85);
    padding: 0 0.38em; }

@media screen and (max-width: 991px) {
  .lang-selector {
    text-align: left; }
    .lang-selector a, .lang-selector span {
      display: block;
      padding: 0.62em 0.38em; } }

.user-options a {
  display: block;
  padding: 8px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  white-space: nowrap;
  height: 64px; }
  .user-options a:first-child {
    border-top: none; }
  .user-options a .speak {
    margin: 6px 0 2px;
    display: block; }
  .user-options a .learn {
    display: block;
    color: #aaa; }
  .user-options a:hover .speak {
    text-decoration: underline; }
  .user-options a .img-container {
    height: 48px;
    width: 48px;
    display: inline-block;
    text-align: center;
    float: left;
    margin: 0 16px 0 0; }
    .user-options a .img-container img, .user-options a .img-container svg, .user-options a .img-container i.fa {
      width: 100%;
      height: 100%; }
    .user-options a .img-container svg {
      fill: #0062a6; }
    .user-options a .img-container i.fa {
      font-size: 40px;
      color: #0062a6; }

.user-options.no-learn-lang a {
  height: 48px; }
  .user-options.no-learn-lang a .speak {
    margin-top: 8px; }
  .user-options.no-learn-lang a .img-container {
    height: 32px;
    width: 32px;
    margin: 0 8px -8px 0; }
    .user-options.no-learn-lang a .img-container i.fa {
      font-size: 28px; }

.lesson {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.8), white);
  text-align: left;
  font-weight: normal;
  display: block;
  height: 8.5em;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 0 0.03em 0.2em rgba(0, 0, 0, 0.15);
  border-radius: 1em;
  margin: 1em 0;
  transition: box-shadow 0.2s; }
  .lesson:hover {
    background-color: white;
    box-shadow: 0 0.05em 0.5em rgba(0, 0, 0, 0.15); }
    .lesson:hover .lesson-icon img.icon {
      width: 7.7em;
      height: 7.7em;
      margin: 0.4em; }
  .lesson:active {
    text-decoration: none; }
  .lesson .lesson-icon {
    float: left;
    width: 8.5em;
    height: 8.5em;
    padding: 0;
    margin: 0 1.38em 0 0;
    background-color: rgba(0, 98, 166, 0.9);
    background-image: radial-gradient(rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0));
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.25);
    border-bottom-left-radius: 1em;
    border-top-left-radius: 1em; }
    .lesson .lesson-icon img.icon {
      transition: width 0.1s, height 0.1s, margin 0.1s;
      width: 7.3em;
      height: 7.3em;
      margin: 0.6em; }
  .lesson .flag {
    float: left;
    position: absolute;
    width: 32px;
    height: 32px;
    margin: -6px 0 0 -6px;
    box-shadow: 0 0.03em 0.2em rgba(0, 0, 0, 0.15); }
  .lesson div.speak {
    font-size: 200%;
    margin: 0 0.38em 0 0;
    color: rgba(0, 0, 0, 0.76);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 138%; }
  .lesson div.learn {
    font-size: 24px;
    color: rgba(0, 0, 0, 0.4);
    margin: -0.24em 0.62em 0 0;
    font-weight: 400;
    line-height: 138%;
    text-shadow: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; }
  .lesson .games {
    display: block;
    text-align: right;
    margin: 0 16px -8px 0;
    padding: 0.38em 0 0; }
    .lesson .games img {
      height: 1.62em;
      width: 1.62em;
      padding: 0;
      margin: -16px 0 0 0; }
    .lesson .games img.check {
      border: 0;
      background: transparent;
      padding: 0; }
    .lesson .games svg {
      height: 1.62em;
      width: 1.62em;
      padding: 0;
      margin: 0 0 0 3px; }
    .lesson .games path, .lesson .games g {
      fill: rgba(157, 169, 177, 0.85); }

@media screen and (max-width: 768px) {
  .lesson {
    height: 5em;
    border-radius: 0.5em;
    margin: 12px 0;
    font-size: 16px; }
    .lesson:hover {
      box-shadow: 0 0.03em 0.24em rgba(0, 0, 0, 0.2); }
      .lesson:hover .lesson-icon img.icon {
        width: 4.4em;
        height: 4.4em;
        margin: 0.3em; }
    .lesson .flag {
      width: 24px;
      height: 24px; }
    .lesson .lesson-icon {
      width: 5em;
      height: 5em;
      margin: 0 1em 0 0;
      border-bottom-left-radius: 0.5em;
      border-top-left-radius: 0.5em; }
      .lesson .lesson-icon img.icon {
        width: 4.4em;
        height: 4.4em;
        margin: 0.3em; }
    .lesson div.speak {
      font-size: 16px;
      margin: 0 0.38em 0 0;
      line-height: 138%; }
    .lesson div.learn {
      font-size: 16px;
      margin: -0.24em 0.62em 0 0;
      font-weight: 400;
      line-height: 138%; }
    .lesson .games {
      margin: 0 0.62em -0.38em 0;
      padding: 0.38em 0 0; }
      .lesson .games img {
        height: 16px;
        width: 16px; }
      .lesson .games img.check {
        border: 0;
        background: transparent;
        padding: 0; }
      .lesson .games svg {
        height: 16px;
        width: 16px;
        margin: 0 0 0 2px; }
      .lesson .games path, .lesson .games g {
        fill: rgba(157, 169, 177, 0.85); } }

/*
.bubble a.lesson:hover { color:rgba(244, 249, 252, 0.92); }
.lesson:last-child { border-bottom:none; }


.lesson img.flag { position:absolute; float:left; margin:-0.38em 0 0 -0.38em; box-shadow:0 1px 3px rgba(0,0,0,0.38); }
d.hasTransliterations .lesson div.learn { text-align:right; font-size:24px; }
.hasTransliterations .secondary .lesson div.learn { font-size:115%; }

a.lesson:hover .speak { color:rgba(0, 98, 166, 0.92); }

a.lesson:hover .lesson-icon, a.game:hover img { box-shadow:0 0.1em 0.25em rgba(0,0,0,0.2); }
a.lesson:active .lesson-icon, a.game:active img { background-image:linear-gradient(to bottom, rgba(255,255,255,0.2), rgba(255,255,255,0)); }
a.lesson:hover, a.game:hover { text-decoration:none; color:rgba(0,49,83,1); text-shadow:none; }
.lesson img.check, .check { opacity:1; background-color:rgba(255,255,255,0.94); border-radius:50%; border:2px solid rgba(0,98,166,0.38); padding:2px; }
.lesson img.check, .check { opacity:1; background-color:rgba(255,255,255,0.94); border-radius:50%; border:2px solid rgba(0,98,166,0.38); padding:2px; }

.secondary .lesson { height:96px; border-radius:0.62em; }
.secondary .lesson svg { height:1em; width:1em; padding:0; }
.secondary .lesson .games img { height:1em; width:1em; }
.secondary .lesson-icon { width:96px; height:96px; margin:0 1em 0 0; border-bottom-left-radius:0.62em; border-top-left-radius:0.62em; }
.secondary .lesson-icon img.icon { width:88px; height:88px; margin:4px; }
.secondary .lesson div.speak { font-size:24px; }
.secondary .lesson div.learn { font-size:16px; }
*/
.video {
  border-bottom: 1px solid rgba(0, 0, 0, 0.16);
  margin: 0 0 -1px;
  display: block;
  padding: 0.81em 1em;
  background-color: rgba(255, 255, 255, 0.62); }
  .video .flag {
    float: left;
    margin: -4px -24px 0 -4px;
    z-index: 100;
    position: absolute; }
  .video img.icon {
    float: left;
    margin: 0 0.62em 0 0;
    box-shadow: 0px 0.07em 0.1em rgba(0, 0, 0, 0.15);
    height: 72px;
    width: 96px;
    padding: 0;
    border-radius: 3px;
    background-color: rgba(0, 98, 166, 0.24); }
  .video .title {
    font-size: 16px;
    color: rgba(0, 98, 166, 0.96);
    margin: 0 8px 4px 0;
    width: auto;
    height: auto;
    min-height: auto;
    display: block;
    font-weight: bold; }
  .video .name {
    font-size: 14px;
    line-height: 16px; }
  .video .ambassador-link {
    margin: 1em; }
  .video .status {
    color: #aaa;
    float: right; }

.video-thumbnail {
  margin: 0 0 -1px;
  display: block;
  padding: 16px; }
  .video-thumbnail .info {
    min-height: 3.5em; }
  .video-thumbnail .name {
    color: #aaa;
    overflow: hidden;
    text-overflow: ellipsis; }
  .video-thumbnail .flag {
    margin: -4px 4px 0;
    width: 16px;
    height: 16px; }
  .video-thumbnail .img-container {
    width: 100%;
    padding: 75% 0 0 0;
    margin: 0 0 4px 0; }
    .video-thumbnail .img-container .controls {
      position: absolute;
      margin: -50% 0 0;
      padding: 12px 32px 16px 0;
      text-align: center;
      width: 100%; }
      .video-thumbnail .img-container .controls .fa {
        font-size: 48px;
        color: rgba(255, 255, 255, 0); }
    .video-thumbnail .img-container:hover .controls .fa {
      color: #fff;
      text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); }
  .video-thumbnail img.icon {
    margin: -75% 0 0 0;
    width: 100%;
    border-radius: 3px;
    background-color: rgba(0, 98, 166, 0.24);
    box-shadow: 0 0.05em 0.2em rgba(0, 0, 0, 0.2); }
  .video-thumbnail .title {
    font-size: 16px;
    color: rgba(0, 98, 166, 0.96);
    margin: 0 8px 4px 0;
    width: auto;
    max-height: 32px;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: auto;
    display: block;
    font-weight: bold; }
  .video-thumbnail .name {
    font-size: 14px;
    line-height: 16px;
    white-space: nowrap; }
  .video-thumbnail .ambassador-link {
    margin: 1em; }
  .video-thumbnail .status {
    color: #aaa;
    float: right; }

@media screen and (max-width: 768px) {
  .video-thumbnail {
    padding: 8px; } }

.courses-container {
  border-bottom: 1px solid #ddd; }

.courses {
  padding: 0 16px;
  margin: 0 0 16px; }

.course {
  text-align: center;
  font-weight: normal;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  padding: 8px; }
  .course:active {
    text-decoration: none; }
  .course .course-icon {
    width: 80%;
    height: 100%;
    padding: 8px 24px;
    margin: 0 auto; }
    .course .course-icon svg {
      fill: #0062a6; }
  .course div.speak {
    font-size: 16px;
    margin: 0 0;
    color: rgba(0, 0, 0, 0.76);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 138%;
    white-space: nowrap; }
  .course div.learn {
    font-size: 16px;
    color: rgba(0, 0, 0, 0.4);
    margin: 0 0 4px;
    font-weight: 400;
    line-height: 138%;
    text-shadow: none;
    white-space: nowrap; }

@media screen and (max-width: 768px) {
  .courses {
    padding: 0 8px;
    margin: -8px 0 16px; }
  .course-icon {
    padding: 0; }
  .course {
    padding: 0; }
    .course div.speak {
      font-size: 16px;
      line-height: 100%;
      margin: -8px 0 0; }
    .course div.learn {
      font-size: 12px;
      line-height: 100%;
      margin: 0 0 4px; } }

.sessions .session {
  border-bottom: 1px solid #ddd;
  margin: 0 0 -1px;
  display: table;
  padding: 12px;
  background-color: rgba(255, 255, 255, 0.1);
  min-height: 88px;
  width: 100%; }
  .sessions .session a img.photo {
    float: left;
    margin: -4px 8px 0 0;
    box-shadow: 0px 0.07em 0.1em rgba(0, 0, 0, 0.15);
    height: 72px;
    width: 72px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid #0062a6;
    background-color: rgba(255, 255, 255, 0.24); }
  .sessions .session a .name {
    font-size: 16px;
    color: rgba(0, 98, 166, 0.96);
    margin: 0 8px 4px 0;
    width: auto;
    height: auto;
    min-height: auto;
    display: block;
    font-weight: bold;
    font-size: 24px;
    font-weight: normal; }
  .sessions .session a:hover .name {
    text-decoration: underline; }
  .sessions .session a .time {
    color: #222; }
  .sessions .session a .date {
    color: #222; }
  .sessions .session button {
    outline: none; }
  .sessions .session .options {
    float: right;
    margin: -11px -12px 0 0; }
    .sessions .session .options > * {
      float: left;
      clear: left;
      width: 100%;
      text-align: left;
      padding: 6px 8px; }
    .sessions .session .options button, .sessions .session .options .price {
      border-radius: 0;
      border-top: 0;
      border-right: 0;
      border-bottom: 1px solid #ddd;
      border-left: 2px solid #86c8f6;
      background-color: white;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      .sessions .session .options button:hover, .sessions .session .options .price:hover {
        background-color: rgba(134, 200, 246, 0.1);
        color: #0062a6; }
      .sessions .session .options button.selected, .sessions .session .options .price.selected {
        background-color: rgba(0, 98, 166, 0.1); }
      .sessions .session .options button .fa, .sessions .session .options .price .fa {
        color: #0062a6; }
    .sessions .session .options .status {
      color: #aaa;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis; }
      .sessions .session .options .status.active {
        color: green; }
  .sessions .session .student-link {
    padding: 2px 0 0;
    color: #999; }
    .sessions .session .student-link img {
      margin: -2px 4px 0;
      box-shadow: 0px 0.07em 0.1em rgba(0, 0, 0, 0.15);
      height: 16px;
      width: 16px;
      padding: 0;
      border-radius: 50%;
      border: 1px solid #0062a6;
      background-color: rgba(255, 255, 255, 0.24); }
  .sessions .session .feedback, .sessions .session .complaint {
    margin: 8px 8px 8px 80px; }
    .sessions .session .feedback div, .sessions .session .complaint div {
      display: inline-block;
      border-top: 1px solid #eee;
      color: #999;
      padding: 8px 0; }
    .sessions .session .feedback .tags span, .sessions .session .complaint .tags span {
      background-color: #0062a6;
      color: white;
      border-radius: 3px;
      padding: 2px 6px;
      margin: -2px 8px; }
  .sessions .session form {
    border-top: 1px solid #eee;
    display: block;
    margin: 18px 0 0 80px;
    padding: 8px 8px 8px 0; }
    .sessions .session form h3 {
      margin: 0 0 8px; }
    .sessions .session form label {
      display: block;
      margin: 16px 0 8px; }
    .sessions .session form .form-group {
      margin: 0; }
    .sessions .session form .cancel {
      display: inline-block;
      padding: 8px 0; }
    .sessions .session form .rating {
      border: 1px solid rgba(0, 98, 166, 0.38);
      border-radius: 4px;
      display: inline-block;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
      overflow: hidden;
      color: rgba(0, 0, 0, 0.24); }
      .sessions .session form .rating button {
        float: left;
        border: 0;
        border-right: 1px solid rgba(0, 98, 166, 0.38);
        padding: 6px 8px;
        background-color: rgba(0, 98, 166, 0.02); }
        .sessions .session form .rating button:last-child {
          border-right: 0; }
        .sessions .session form .rating button:hover {
          background-color: rgba(0, 98, 166, 0.24); }
          .sessions .session form .rating button:hover i.fa {
            color: #0062a6; }
        .sessions .session form .rating button.hover {
          background-color: rgba(0, 98, 166, 0.16); }
        .sessions .session form .rating button.selected {
          background-color: rgba(0, 98, 166, 0.1); }
          .sessions .session form .rating button.selected i.fa {
            color: rgba(0, 98, 166, 0.6); }

@media screen and (max-width: 512px) {
  .sessions .session a img.photo {
    margin: -4px 8px 32px 0;
    height: 48px;
    width: 48px; }
  .sessions .session a .name {
    font-size: 16px; }
  .sessions .session form {
    margin: 16px 0 0; }
  .sessions .session .options {
    max-width: 40%; } }

.apply-preview {
  margin: 2.6em 0;
  padding: 0 16px 32px; }
  .apply-preview h1 {
    font-weight: normal;
    font-family: "Fredoka One", 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 0;
    opacity: 0.9;
    text-shadow: 0 0.07em 0.1em rgba(0, 0, 0, 0.16);
    font-size: 24px; }
  .apply-preview h2 {
    font-weight: normal;
    font-family: "Fredoka One", 'Helvetica Neue', Helvetica, Arial, sans-serif;
    opacity: 0.4;
    margin: -8px 0 16px;
    padding: 0;
    font-size: 16px;
    text-shadow: 0 0.07em 0.1em rgba(0, 0, 0, 0.16); }
  .apply-preview a {
    display: block;
    border: 1px solid #ddd;
    background-color: #eee;
    padding: 8px;
    margin: 8px 0;
    border-radius: 4px;
    color: #0062a6; }

@media (max-width: 991px) {
  .apply-preview {
    margin: 0 0 32px; } }

.passport-preview {
  margin: 24px 0 24px;
  padding: 8px; }
  .passport-preview img {
    float: left;
    height: 11em;
    margin: 8px 0 16px -16px; }
  .passport-preview h1 {
    font-weight: normal;
    font-family: "Fredoka One", 'Helvetica Neue', Helvetica, Arial, sans-serif;
    padding: 0;
    opacity: 0.9;
    text-shadow: 0 0.07em 0.1em rgba(0, 0, 0, 0.16);
    font-size: 24px;
    color: white; }
  .passport-preview h2 {
    font-weight: normal;
    font-family: "Fredoka One", 'Helvetica Neue', Helvetica, Arial, sans-serif;
    opacity: 0.4;
    margin: -8px 0 8px;
    padding: 0;
    color: white;
    font-size: 16px;
    text-shadow: 0 0.07em 0.1em rgba(0, 0, 0, 0.16); }
  .passport-preview a.link {
    padding: 8px;
    margin: 8px 0;
    text-shadow: 0 0.07em 0.1em rgba(0, 0, 0, 0.16);
    color: #eaba3f;
    white-space: nowrap;
    display: inline-block; }

@media (max-width: 991px) {
  .passport-preview {
    margin: 0 0 16px;
    padding: 16px 0; }
    .passport-preview img {
      float: left;
      height: 11em;
      margin: 16px 0 8px -16px; }
    .passport-preview a.link {
      padding: 8px 0 0; } }

@media (max-width: 512px) {
  .passport-preview img {
    float: left;
    height: 8em;
    margin: 16px 0 8px -16px; } }

body {
  background-image: url(/media/images/bkg_homepage.svg) !important; }

nav.navbar-homepage {
  background-image: url(/media/images/bkg_homepage.svg);
  background-position: center 0;
  background-attachment: fixed;
  background-size: cover;
  background-repeat: no-repeat;
  box-shadow: none;
  border: 0; }
  nav.navbar-homepage .navbar-header {
    color: white;
    white-space: nowrap; }
  nav.navbar-homepage a {
    color: white; }
  nav.navbar-homepage .dropdown-menu a {
    color: #0062a6; }
  nav.navbar-homepage .nav .open > a, nav.navbar-homepage .nav .open > a:focus, nav.navbar-homepage .nav .open > a:hover {
    color: #0062a6; }

.polly-dialogue-container {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
  min-height: 768px; }
  .polly-dialogue-container .bubble {
    box-shadow: none; }

.polly-container {
  float: left;
  width: 20%;
  text-align: center;
  filter: drop-shadow(0 -1px 16px rgba(255, 255, 255, 0.3)); }
  .polly-container h1 {
    color: white;
    font-family: "Fredoka One", 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: normal;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); }
  .polly-container #bubble-hook {
    float: right;
    height: 31px;
    width: 12%;
    margin-top: -66%; }
  .polly-container #polly-img {
    width: 100%;
    position: relative;
    left: -8px;
    top: 8px;
    float: left;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2)); }

.polly-dialogue .greeting {
  padding: 24px;
  border-bottom: 1px solid #ddd;
  font-size: 24px; }
  .polly-dialogue .greeting .learn {
    color: #aaa;
    font-size: 20px;
    margin-top: 4px; }
    .polly-dialogue .greeting .learn.rtl {
      direction: rtl; }

.polly-dialogue h2 {
  color: #111;
  margin: 16px 24px;
  font-size: 24px;
  font-weight: normal; }
  .polly-dialogue h2 .learn {
    color: #aaa;
    font-size: 20px; }
    .polly-dialogue h2 .learn.rtl {
      direction: rtl; }

.polly-dialogue .languages {
  margin: 0 0 16px; }

.polly-dialogue .language-link {
  text-align: center;
  display: block;
  padding: 8px 0; }
  .polly-dialogue .language-link .flag {
    float: none;
    width: 48px;
    height: 48px;
    margin-bottom: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); }
  .polly-dialogue .language-link .speak {
    display: block;
    color: #0062a6;
    margin-bottom: 2px; }
  .polly-dialogue .language-link .learn {
    display: block;
    color: #aaa;
    font-size: 12px; }

.polly-dialogue .sessions > div:first-child {
  border-top: 1px solid #ddd; }

.polly-dialogue .lessons-container {
  border-bottom: 1px solid #ddd; }
  .polly-dialogue .lessons-container .lessons {
    padding: 0 24px 8px; }

.polly-dialogue .loading {
  text-align: center;
  font-size: 48px;
  padding: 96px;
  color: #aaa; }

.polly-dialogue > div:last-child {
  border-top: 1px solid #ddd; }

.polly-dialogue #see-all-languages {
  display: block;
  font-size: 24px;
  text-align: center;
  padding: 12px;
  color: #0062a6;
  border-top: 1px solid #ddd; }
  .polly-dialogue #see-all-languages i.fa {
    font-size: 20px; }

.videos-container {
  padding: 16px 8px; }
  .videos-container h1 {
    font-family: "Fredoka One", 'Helvetica Neue', Helvetica, Arial, sans-serif;
    margin: 24px 8px 8px; }
  .videos-container p {
    margin: 8px 8px; }

#passport {
  background-image: url(/media/images/passport_background.png);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  height: 69%;
  color: #191919;
  overflow: hidden;
  margin: 32px 0 32px; }
  #passport .photo-container {
    float: right;
    width: 50%;
    padding: 8px;
    background-color: white;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    border-radius: 2px; }
    #passport .photo-container .photo {
      width: 100%;
      background-position: center;
      background-size: contain; }
  #passport .info-container {
    margin: 0 0 16px; }
    #passport .info-container label {
      font-weight: normal; }
    #passport .info-container > div {
      font-weight: bold; }
    #passport .info-container a {
      display: block;
      margin: 0 0 4px;
      font-weight: bold; }
  #passport .languages-info-container a {
    color: #111; }
    #passport .languages-info-container a .flag {
      margin-right: 8px; }
  #passport .page {
    padding: 32px;
    width: 50%;
    height: 99%;
    display: block;
    overflow: hidden;
    float: left; }
  #passport .awards p {
    text-align: center;
    margin: 48% 0; }
  #passport .awards a {
    text-transform: capitalize;
    color: rgba(0, 97, 166, 0.62);
    border: 2px solid rgba(0, 97, 166, 0.38);
    text-align: center;
    line-height: 100%;
    border-radius: 1em;
    padding: 4px;
    height: 6.8em;
    margin: 0 0 24px; }
    #passport .awards a:nth-child(odd) {
      margin: 0 0.8em 1.5em -0.8em; }
    #passport .awards a .course-name {
      padding-top: 1em; }
    #passport .awards a .date {
      color: rgba(255, 32, 32, 0.8); }
    #passport .awards a img {
      height: 3em;
      width: 3em;
      margin: 0;
      padding: 0;
      background-color: rgba(0, 97, 166, 0.38);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center center;
      object-fit: contain; }
    #passport .awards a.v0 {
      -webkit-transform: rotate(-5deg);
      transform: rotate(-5deg); }
      #passport .awards a.v0 img {
        height: 100%;
        width: 38%;
        border-top-left-radius: 0.6em;
        border-bottom-left-radius: 0.6em;
        border: 6px solid rgba(0, 97, 166, 0);
        float: left; }
    #passport .awards a.v1 {
      -webkit-transform: rotate(4deg);
      transform: rotate(4deg); }
      #passport .awards a.v1 img {
        height: 100%;
        width: 38%;
        border-top-right-radius: 0.6em;
        border-bottom-right-radius: 0.6em;
        border: 6px solid rgba(0, 97, 166, 0);
        float: right; }
    #passport .awards a.v2 {
      -webkit-transform: rotate(-3deg);
      transform: rotate(-3deg); }
      #passport .awards a.v2 img {
        height: 38%;
        width: 100%;
        border-top-left-radius: 0.6em;
        border-top-right-radius: 0.6em;
        border: 2px solid rgba(0, 97, 166, 0);
        clear: right;
        float: right;
        margin-bottom: 0.4em; }

@media screen and (min-width: 768px) {
  nav.navbar-homepage .navbar-header {
    width: 20%;
    text-align: center;
    color: white; }
    nav.navbar-homepage .navbar-header .navbar-brand {
      float: none;
      display: inline-block; } }

@media screen and (max-width: 768px) {
  .navbar-fixed-top .navbar-collapse {
    box-shadow: none; }
  .polly-dialogue .greeting {
    padding: 16px;
    font-size: 20px; }
    .polly-dialogue .greeting .learn {
      font-size: 20px; }
  .polly-dialogue h2 {
    margin: 16px 16px;
    font-size: 20px; }
  .polly-dialogue .lessons-container .lessons {
    padding: 0 16px 8px; }
  .polly-dialogue #see-all-languages {
    font-size: 16px;
    padding: 12px; }
    .polly-dialogue #see-all-languages i.fa {
      font-size: 12px; }
  #passport {
    font-size: 10px; }
    #passport .photo-container {
      padding: 4px;
      width: 40%; }
    #passport .info-container {
      margin: 0 0 5px; }
      #passport .info-container label {
        margin: 0 0 2px; }
      #passport .info-container a .flag {
        margin-right: 4px; }
    #passport .page {
      padding: 16px; } }

@media screen and (max-width: 512px) {
  .videos-container h1 {
    font-size: 24px;
    margin: 8px; }
  #passport {
    font-size: 8px; }
    #passport .photo-container {
      padding: 2px;
      width: 33%; }
    #passport .info-container {
      margin: 0 0 5px; }
      #passport .info-container label {
        margin: 0 0 2px; }
      #passport .info-container a .flag {
        margin-right: 2px; }
    #passport .page {
      padding: 8px; } }