﻿/*#095597*/
a,
a:link,
a:visited,
a:hover,
a:active {
  color: #FFFFFF !important;
  cursor: pointer;
  text-decoration: none !important;
}
a.mobile-restrictive-signed-out,
a:link.mobile-restrictive-signed-out,
a:visited.mobile-restrictive-signed-out,
a:hover.mobile-restrictive-signed-out,
a:active.mobile-restrictive-signed-out {
  color: #ff8100 !important;
  padding: 8px 11px!important;
}
/* adding in newer bootstrap flex property
   since this page is using OLD bootstrap*/
.gap-1 {
  gap: 0.25rem !important;
}
.gap-2 {
  gap: 0.5rem !important;
}
.gap-3 {
  gap: 1rem !important;
}
.gap-4 {
  gap: 1.5rem !important;
}
.gap-5 {
  gap: 2rem !important;
}
@media (max-width: 425px) {
  .gap-5 {
    gap: 1rem !important;
  }
}
.btn {
  cursor: pointer;
}
.bg-skwids-blue {
  background-color: #00b9f4 !important;
}
.bg-skwids-light-blue {
  background-color: #006DC6 !important;
}
.bg-skwids-dark-blue {
  background-color: #074478 !important;
}
.bg-skwids-green {
  background-color: #70cf3d !important;
}
.cl-skwids-orange {
  color: #FE8200 !important;
}
.nav-pills .nav-link.active {
  background-color: #00b9f4 !important;
}
.nav-pills .show > .nav-link {
  background-color: #00b9f4 !important;
}
@font-face {
  font-family: 'Antipasto';
  src: url('/Content/MyFonts/webfonts/Antipasto_regular.otf');
}
@font-face {
  font-family: 'Antipasto-bold';
  src: url('/Content/MyFonts/webfonts/Antipasto_extrabold.otf');
}
.font-antipasto {
  font-family: Antipasto;
}
.font-antipasto-bold {
  font-family: Antipasto-bold;
}
.font-lexend-deca {
  font-family: 'Lexend Deca', sans-serif;
}
.header-title {
  font-family: Antipasto-bold;
  letter-spacing: 3px;
  text-align: center;
}
.text-white {
  color: #FFFFFF;
}
.text-blue {
  color: #00b9f4;
}
.f-0 {
  display: none !important;
}
@media only screen and (max-width: 767px) {
  .f-0 {
    flex: 0 !important;
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .f-0 {
    flex: 0 !important;
  }
}
.f-1 {
  display: none !important;
}
@media only screen and (max-width: 767px) {
  .f-1 {
    display: flex !important;
    flex-wrap: wrap;
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .f-1 {
    display: flex !important;
    flex-wrap: wrap;
  }
}
.d-n {
  display: none !important;
}
.d-p {
  position: absolute;
  display: block !important;
}
@media only screen and (max-width: 767px) {
  .d-p {
    display: none !important;
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .d-p {
    display: none !important;
  }
}
@media (orientation: landscape) {
  .o-l-1 {
    order: 1 !important;
  }
  .o-l-2 {
    order: 2 !important;
  }
  .flex-l-column {
    flex-direction: column !important;
  }
  .flex-l-row {
    flex-direction: row !important;
  }
  .my-l-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mx-l-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
@media (orientation: portrait) {
  .o-p-1 {
    order: 1 !important;
  }
  .o-p-2 {
    order: 2 !important;
  }
  .flex-p-column {
    flex-direction: column !important;
  }
  .flex-p-row {
    flex-direction: row !important;
  }
  .my-p-auto {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }
  .mx-p-auto {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}
.content-card {
  border: 0 !important;
  cursor: pointer;
  min-width: 150px;
  max-width: 150px;
}
.content-card .card-body {
  display: flex;
  flex-direction: row;
  padding: 0.5rem !important;
  color: white;
  font-weight: bolder;
  background-color: #00b9f4;
  align-content: center;
  justify-content: center;
}
.content-card.active .card-body {
  background-color: #70cf3d;
}
.card-icon {
  width: 25px;
  height: 25px;
}
.card-playlist-icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 50px;
  height: 50px;
}
.navbar {
  background-color: #00b9f4;
  height: 75px;
}
.navbar .navbar-brand {
  margin-right: 0 !important;
}
.navbar .navbar-brand img {
  height: 40px;
}
.desktop-footer {
  height: 75px;
  display: flex !important;
}
.desktop-footer a,
.desktop-footer a:link,
.desktop-footer a:visited,
.desktop-footer a:hover,
.desktop-footer a:active {
  text-decoration: none;
  color: #FFFFFF;
}
.desktop-footer-item {
  display: none;
  text-align: center;
}
@media only screen and (max-width: 767px) {
  .desktop-footer-item {
    display: none;
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .desktop-footer-item {
    display: none;
  }
}
@media only screen and (min-width: 992px) {
  .desktop-footer-item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bolder;
    width: 110px;
    height: 110px;
    margin-top: -75px;
  }
}
.desktop-footer-item img {
  height: 100px;
  width: 100px;
}
.toggle-footer-menu {
  width: 100%;
  letter-spacing: 3px;
  text-align: center;
  font-family: Antipasto-bold;
  font-size: 22px;
  color: #FFFFFF;
  cursor: pointer;
}
@media only screen and (max-width: 767px) {
  .toggle-footer-menu {
    display: block;
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .toggle-footer-menu {
    display: block;
  }
}
@media only screen and (min-width: 992px) {
  .toggle-footer-menu {
    display: none;
  }
}
.piggy-bank-holder {
  padding-bottom: 45px;
}
.piggy-bank-holder img {
  height: 145px;
  width: 145px;
}
.piggy-bank-holder span {
  position: relative;
  top: -45px;
  text-align: center;
}
.piggy-bank-holder .lbl {
  margin-top: -25px;
}
.mobile-footer-menu {
  background-color: #074478;
  display: none;
}
@media only screen and (max-width: 767px) {
  .mobile-footer-menu {
    height: 100%;
    width: 100%;
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .mobile-footer-menu {
    height: 100%;
    width: 100%;
  }
}
.mobile-footer-menu-item {
  margin-left: -5px !important;
  display: none;
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .mobile-footer-menu-item img {
    width: 100px;
    height: 100px;
  }
}
@media only screen and (max-width: 767px) {
  .mobile-footer-menu-item img {
    width: 50px;
    height: 50px;
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .mobile-footer-menu-item img.piggy {
    width: 150px;
    height: 150px;
  }
}
@media only screen and (max-width: 767px) {
  .mobile-footer-menu-item img.piggy {
    width: 75px;
    height: 75px;
    margin-top: -25px;
  }
}
@media only screen and (max-width: 767px) {
  .mobile-footer-menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bolder;
    width: 100%;
    height: 33%;
    text-align: center;
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .mobile-footer-menu-item {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bolder;
    width: 100%;
    height: 33%;
    text-align: center;
  }
}
.house-container {
  display: flex;
  flex: 3;
  justify-content: space-around;
  align-items: center;
  width: 100%;
  height: 100%;
  margin-top: 70px;
  z-index: 1;
  padding-bottom: 150px;
}
@media only screen and (max-width: 767px) {
  .house-container {
    display: none;
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .house-container {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .house {
    display: none;
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .house img {
    width: 150px;
    height: 300px;
  }
}
@media only screen and (min-width: 992px) {
  .house img {
    width: 200px;
    height: 400px;
  }
}
@media only screen and (max-width: 767px) {
  .bar-container {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: #006DC6;
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .bar-container {
    display: flex;
    flex: 1;
    flex-direction: column;
    height: 100%;
    width: 100%;
    background-color: #006DC6;
  }
}
@media only screen and (min-width: 992px) {
  .bar-container {
    display: none;
  }
}
.bar {
  display: none;
}
@media only screen and (max-width: 767px) {
  .bar {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bolder;
    width: 100%;
    height: 20%;
    flex: 1;
    font-size: 18px;
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .bar {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bolder;
    width: 100%;
    height: 20%;
    flex: 1;
    font-size: 22px;
  }
}
.bar .bar-pic {
  height: 100%;
}
.bar .bar-pic img {
  height: 100%;
}
@media (orientation: landscape) {
  .bar .bar-pic img {
    display: none !important;
  }
}
.bar .bar-txt {
  text-align: left;
  font-family: Antipasto-bold;
  letter-spacing: 3px;
  color: #FFFFFF;
  margin: auto;
}
@media (orientation: portrait) {
  .bar .bar-txt {
    margin-left: 0;
  }
}
.bar.homer {
  background-color: #F12C12;
}
.bar.watch {
  background-color: #70cf3d;
}
.bar.play {
  background-color: #B945D6;
}
.bar.learn {
  background-color: #FE8200;
}
.bar.create {
  background-color: #006DC6;
}
.cog-container {
  padding: 5px 0 5px 0;
  background-color: #074478;
  display: none;
}
@media only screen and (max-width: 767px) {
  .cog-container {
    /*flex: 1;*/
    flex-direction: column;
    align-content: center;
    height: 100%;
    width: 100%;
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .cog-container {
    flex: 1;
    flex-direction: column;
    align-content: center;
    height: 100%;
    width: 100%;
  }
}
.cog-container a,
.cog-container a:link,
.cog-container a:visited,
.cog-container a:hover,
.cog-container a:active {
  color: #FFFFFF;
  text-decoration: none;
}
@media (orientation: landscape) {
  .cog-container.f-1 {
    display: block !important;
    overflow: auto;
  }
}
.cog-item {
  margin-left: 5%;
  display: none;
}
.cog-item .btn {
  color: #FFFFFF;
  font-size: 22px !important;
}
@media only screen and (max-width: 767px) {
  .cog-item {
    display: flex;
    /*flex: 1;*/
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .cog-item {
    display: flex;
    flex: 1;
  }
}
.avatar-container {
  background-color: #074478;
  color: #FFFFFF;
  display: none;
}
@media only screen and (max-width: 767px) {
  .avatar-container {
    height: 100%;
    width: 100%;
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .avatar-container {
    height: 100%;
    width: 100%;
  }
}
.mobile-restrictive-section header {
  margin-top: 2em !important;
}
.mobile-restrictive-section header h2 {
  font-size: 1.5rem;
}
@media (min-width: 768px) {
  .mobile-restrictive-section header h2 {
    font-size: 1.75rem;
  }
}
@media (min-width: 1024px) {
  .mobile-restrictive-section header {
    margin-top: 3em !important;
  }
  .mobile-restrictive-section header h2 {
    font-size: 2rem;
  }
}
.mobile-restrictive-section .app-store a.opacity-50 {
  opacity: 0.5;
}
.mobile-restrictive-section .app-store img,
.mobile-restrictive-section .app-store svg {
  height: 50px;
}
@media (max-width: 580px) {
  .mobile-restrictive-section .app-store img,
  .mobile-restrictive-section .app-store svg {
    height: 40px;
  }
}
@media (max-width: 475px) {
  .mobile-restrictive-section .app-store img,
  .mobile-restrictive-section .app-store svg {
    height: 30px;
  }
}
::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5;
}
::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: #F5F5F5;
}
::-webkit-scrollbar-thumb {
  background-color: #cccccc;
  background-image: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0.5, rgba(255, 255, 255, 0.2)), color-stop(0.5, transparent), to(transparent));
}
.navi {
  width: 40px;
  height: 40px;
  margin: 5px;
}
.navi-arrow {
  width: 50px;
  background: url("../Images/Navigation/back.png");
  background-size: 50px 40px;
  margin: 10px 5px;
}
.navi-home {
  background: url("../Images/Navigation/home.png");
  background-size: 40px 40px;
  margin: 10px;
}
.navi-sound {
  background: url("../Images/Navigation/sound.png");
  background-size: 40px 40px;
  margin: 10px 5px;
}
.navi-help-container {
  width: 75px;
  float: right;
}
.navi-help-container.active {
  background-color: #FFAC33;
}
.navi-help {
  background: url("../Images/Navigation/help.png");
  background-size: 40px 40px;
  margin: 10px 15px;
}
.grade-menu {
  height: 75px;
  display: flex !important;
  justify-content: center !important;
}
.grade-menu a,
.grade-menu a:link,
.grade-menu a:visited,
.grade-menu a:hover,
.grade-menu a:active {
  text-decoration: none;
  color: #FFFFFF;
}
.grade-menu-item {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bolder;
  width: 75px;
  height: 75px;
  cursor: pointer;
}
.grade {
  width: 55px;
  height: 55px;
  margin: 5px;
  cursor: pointer;
}
.grade .txt {
  margin-top: 50px;
  text-align: center;
  color: #FFFFFF;
}
.grade[data-grade='Preschool'],
.grade.preSchool {
  background: url("../Images/Curriculum/preschool_off.png");
  background-size: 55px 55px;
}
.grade[data-grade='Preschool'].active,
.grade.preSchool.active,
.grade[data-grade='Preschool']:hover,
.grade.preSchool:hover {
  background: url("../Images/Curriculum/preschool_on.png");
  background-size: 55px 55px;
}
.grade[data-grade='Kindergarten'],
.grade.kindergarten {
  background: url("../Images/Curriculum/kindergarten_off.png");
  background-size: 55px 55px;
}
.grade[data-grade='Kindergarten'].active,
.grade.kindergarten.active,
.grade[data-grade='Kindergarten']:hover,
.grade.kindergarten:hover {
  background: url("../Images/Curriculum/kindergarten_on.png");
  background-size: 55px 55px;
}
.grade[data-grade='Grade 1'],
.grade.grade1 {
  background: url("../Images/Curriculum/grade1_off.png");
  background-size: 55px 55px;
}
.grade[data-grade='Grade 1'].active,
.grade.grade1.active,
.grade[data-grade='Grade 1']:hover,
.grade.grade1:hover {
  background: url("../Images/Curriculum/grade1_on.png");
  background-size: 55px 55px;
}
.grade[data-grade='Grade 2'],
.grade.grade2 {
  background: url("../Images/Curriculum/grade2_off.png");
  background-size: 55px 55px;
}
.grade[data-grade='Grade 2'].active,
.grade.grade2.active,
.grade[data-grade='Grade 2']:hover,
.grade.grade2:hover {
  background: url("../Images/Curriculum/grade2_on.png");
  background-size: 55px 55px;
}
a.btn-skw:hover,
.btn-skw:hover {
  color: #FFFFFF;
  filter: brightness(110%);
}
.btn-skw {
  color: #FFFFFF;
  min-width: 150px;
  letter-spacing: 2px;
  font-weight: 800 !important;
  font-size: 1.3rem !important;
}
.btn-skw.mobile-restrictive {
  font-size: 12px !important;
}
.btn-register {
  background-color: #00b9f4;
  border-color: #00b9f4;
}
.btn-login {
  background-color: #52AC16;
  border-color: #52AC16;
}
.btn-account {
  background-color: #6D75FC;
  border-color: #6D75FC;
  min-width: 200px;
}
.btn-menu {
  background-color: #52AC16;
  border-color: #52AC16;
  min-width: 98%;
  margin: 3px 0 0 -4px;
}
.cog-item .btn-menu {
  margin: 3px 0 0 6px!important;
}
.btn-name {
  background-color: #006DC6;
  border-color: #006DC6;
  min-width: 200px;
}
/*#52AC16*/
/*#FFFFFF*/
/*#FFFFFF*/
/*#FFFFFF*/
/*#FFFFFF*/
.btnPrimary {
  width: 100%;
  margin: 10px 0 10px 0;
  padding: 5px 10px;
  border-radius: 20px !important;
  background-color: white !important;
  text-align: center;
  font-weight: bold;
  font-size: 24px;
  color: #ff8100 !important;
  cursor: pointer;
  border: solid 3px #ff8100 !important;
}
.btnPrimary.name,
.btnPrimary.sign-up {
  margin-right: 10px !important;
}
.btnPrimary:hover {
  filter: brightness(85%);
  /*background-color: @btnPrimary_BackgroundColor_Hover;*/
  color: #ff8100 !important;
}
.btnPrimary:focus {
  outline: 0 !important;
  color: #ff8100 !important;
}
.account-menu-container {
  z-index: 2;
  background-color: #00b9f4 !important;
}
.account-menu-container a,
.account-menu-container a:hover {
  color: #FFFFFF;
  text-decoration: none;
  font-size: 12px !important;
}
.account-menu-container ul {
  list-style: none;
  margin-left: -25px;
  color: #FFFFFF;
}
@media only screen and (max-width: 767px) {
  .account-menu-container {
    margin-top: -10px !important;
    width: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .account-menu-container {
    top: 65px !important;
    right: 8px !important;
    min-width: 200px !important;
    padding-top: 10px;
  }
  .account-menu-container.mobile-restrictive {
    right: 0px !important;
    min-width: 187px !important;
  }
}
.name-menu-container {
  background-color: #00b9f4 !important;
  text-align: center;
  color: #FFFFFF;
  z-index: 2;
}
.name-menu-container hr {
  border-bottom: 2px dotted white;
  width: 100%;
}
@media only screen and (max-width: 767px) {
  .name-menu-container {
    margin-top: -10px !important;
    width: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .name-menu-container {
    top: 65px !important;
    right: 211px !important;
    min-width: 200px;
    max-width: 200px;
    padding: 10px 5px 10px 5px;
  }
  .name-menu-container.mobile-restrictive {
    top: 65px !important;
    right: 188px !important;
    min-width: 162px;
    max-width: 162px;
  }
}
.additionalProfiles {
  cursor: pointer;
  border: solid 3px white;
  border-radius: 25%;
  background-color: #00b9f4;
}
@media only screen and (min-width: 992px) {
  .additionalProfiles {
    width: 50px;
    height: 50px;
  }
}
.additionalProfiles:hover {
  filter: brightness(110%);
  /*border: solid 3px @btnBlue;*/
  /*background-color: @white;*/
}
#btnAccount {
  margin: 10px 0 7px 0;
}
@media only screen and (max-width: 767px) {
  #btnAccount {
    display: none;
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  #btnAccount {
    display: none;
  }
}
@media only screen and (min-width: 992px) {
  #btnAccount {
    display: block;
  }
}
#btnCog {
  margin-top: 15px;
}
@media only screen and (max-width: 767px) {
  #btnCog {
    display: block;
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  #btnCog {
    display: block;
  }
}
@media only screen and (min-width: 992px) {
  #btnCog {
    display: none;
  }
}
#btnName {
  margin: 10px 5px 7px 0;
}
@media only screen and (max-width: 767px) {
  #btnName {
    display: none;
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  #btnName {
    display: none;
  }
}
@media only screen and (min-width: 992px) {
  #btnName {
    display: block;
  }
}
#btnAvatar {
  margin: 10px 10px 0 0;
}
.dropdown-toggle,
.dropdown-toggle::before,
.dropdown-toggle::after {
  border: none !important;
  content: none !important;
}
.site_selector_container {
  cursor: pointer;
  background: #00b9f4 !important;
  width: 230px;
  overflow: hidden;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 0 !important;
}
.site_selector_container li {
  margin-top: 0px;
  padding-bottom: 5px;
}
.site_selector_container li a {
  display: block;
  width: 100%;
  height: 45px;
}
.site_selector_container li a.mobile-restrictive {
  font-size: 18px;
  padding-top: 10px;
}
.site_selector_container li {
  border-bottom: 2px inset #FFFFFF;
}
.adv4K_logo {
  background: url(../Images/Logos/adv4K_white.png) no-repeat center;
}
.adv4T_logo {
  background: url(../Images/Logos/adv4T_white.png) no-repeat center;
}
.adv4L_logo {
  background: url(../Images/Logos/adv4L_white.png) no-repeat center;
}
.adv4P_logo {
  background: url(../Images/Logos/adv4P_white.png) no-repeat center;
}
.homer_logo {
  background: url(../Images/Logos/homer_white.png) no-repeat center;
  margin-top: 5px;
}
.faq,
.whats_new,
.southwestern_products {
  color: #FFFFFF !important;
  text-align: center;
}
.faq:hover,
.whats_new:hover,
.southwestern_products:hover {
  text-decoration: none;
}
.southwestern_products {
  font-size: 24px;
}
.faq,
.whats_new {
  font-size: 26px !important;
  padding-top: 4px!important;
}
.home_bg {
  background: url(../Images/Backgrounds/home_bg.png) no-repeat center;
  background-size: cover;
  height: 100% !important;
}
.home_bg-mobile-restrictive {
  background: url(../Images/Backgrounds/skwids_website_sm_bkg.png) no-repeat center;
  background-size: cover;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}
.disabled {
  opacity: 0.5;
}
/*Subject specific colors*/
.History {
  background-color: #05C677 !important;
}
.History-txt {
  color: #05C677 !important;
}
.History_bg {
  background: url(/Content/Images/Subject/Background/History.png) repeat 100% 100%;
}
.History_accent {
  background-color: #049459 !important;
}
.Math {
  background-color: #103141 !important;
}
.Math-txt {
  color: #103141 !important;
}
.Math_bg {
  background: url(/Content/Images/Subject/Background/Math.png) repeat 100% 100%;
}
.Math_accent {
  background-color: #246f93 !important;
}
.Languages {
  background-color: #F46437 !important;
}
.Languages-txt {
  color: #F46437 !important;
}
.Languages_bg {
  background: url(/Content/Images/Subject/Background/Languages.png) repeat 100% 100%;
}
.Languages_accent {
  background-color: #eb420d !important;
}
.Music {
  background-color: #CD53EA !important;
}
.Music-txt {
  color: #CD53EA !important;
}
.Music_bg {
  background: url(/Content/Images/Subject/Background/Music.png) repeat 100% 100%;
}
.Music_accent {
  background-color: #c026e4 !important;
}
.Vocabulary {
  background-color: #33CFFF !important;
}
.Vocabulary-txt {
  color: #33CFFF !important;
}
.Vocabulary_bg {
  background: url(/Content/Images/Subject/Background/Vocabulary.png) repeat 100% 100%;
}
.Vocabulary_accent {
  background-color: #009ccc !important;
}
.Stories {
  background-color: #FC4C4C !important;
}
.Stories-txt {
  color: #FC4C4C !important;
}
.Stories_bg {
  background: url(/Content/Images/Subject/Background/Stories.png) repeat 100% 100%;
}
.Stories_accent {
  background-color: #fd7e7e !important;
}
.MoveMunchMake {
  background-color: #70CF3D !important;
}
.MoveMunchMake-txt {
  color: #70CF3D !important;
}
.MoveMunchMake_bg {
  background: url(/Content/Images/Subject/Background/MoveMunchMake.png) repeat 100% 100%;
}
.MoveMunchMake_accent {
  background-color: #59ae2b !important;
}
.Science {
  background-color: #F400AB !important;
}
.Science-txt {
  color: #F400AB !important;
}
.Science_bg {
  background: url(/Content/Images/Subject/Background/Science.png) repeat 100% 100%;
}
.Science_accent {
  background-color: #ff28bf !important;
}
.modal.blue {
  color: #FFFFFF !important;
}
.modal.blue .modal-content {
  background-color: #00b9f4 !important;
}
@media only screen and (max-width: 767px) {
  .modal.blue .modal-content {
    min-width: 200px;
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .modal.blue .modal-content {
    min-width: 550px;
  }
}
@media only screen and (min-width: 992px) {
  .modal.blue .modal-content {
    min-width: 600px;
  }
}
.modal.blue .modal-header {
  border: none !important;
}
.modal.blue .modal-header .close {
  color: #FFFFFF !important;
}
.modal.blue .modal-footer {
  border: none !important;
}
@media only screen and (max-width: 767px) {
  .modal.blue .modal-img {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .active > div {
    display: none;
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .active > div {
    display: none;
  }
}
@media only screen and (max-width: 767px) {
  .active > div:first-child {
    display: block;
  }
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .active > div:first-child {
    display: block;
  }
}
.pointer {
  cursor: pointer;
}
.tab-content {
  padding-bottom: 75px;
}
@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}
@font-face {
  font-family: 'icomoon';
  src: url('../fonts/icomoon.eot?-qv6n30');
  src: url('../fonts/icomoon.eot?#iefix-qv6n30') format('embedded-opentype'), url('../fonts/icomoon.woff?-qv6n30') format('woff'), url('../fonts/icomoon.ttf?-qv6n30') format('truetype'), url('../fonts/icomoon.svg?-qv6n30#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}
[class^="icon-"],
[class*=" icon-"] {
  font-family: 'icomoon';
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
}
.glyphicon-stack {
  font-size: 11pt;
  font-weight: normal;
  position: relative;
  display: inline-block;
  width: 2em;
  height: 2em;
  line-height: 2em;
  vertical-align: middle;
  cursor: pointer;
}
.glyphicon-circle {
  border-radius: 50%;
  position: relative;
  width: 100%;
  height: auto;
  padding-top: 100%;
}
.glyphicon-stack-1x {
  line-height: inherit;
}
.glyphicon-stack-1x,
.glyphicon-stack-2x {
  position: absolute;
  left: 0;
  width: 100%;
  text-align: center;
}
.icon-addstudent:before {
  content: "\e900";
}
.icon-billingaddress:before {
  content: "\e901";
}
.icon-billinghistory:before {
  content: "\e902";
}
.icon-cancelaccount:before {
  content: "\e903";
}
.icon-connections:before {
  content: "\e904";
}
.icon-editstudent:before {
  content: "\e905";
}
.icon-membership:before {
  content: "\e906";
}
.icon-notifications:before {
  content: "\e907";
}
.icon-password:before {
  content: "\e908";
}
.icon-paymentauthorization:before {
  content: "\e909";
}
.icon-profile:before {
  content: "\e90a";
}
.icon-reactivate:before {
  content: "\e90b";
}
.icon-students:before {
  content: "\e90c";
}
.icon-bookmark:before {
  content: "\e90d";
}
.icon-contactus:before {
  content: "\e90e";
}
.icon-contents:before {
  content: "\e90f";
}
.icon-dash1:before {
  content: "\e910";
}
.icon-dash2:before {
  content: "\e911";
}
.icon-dash3:before {
  content: "\e912";
}
.icon-glossary:before {
  content: "\e913";
}
.icon-logout:before {
  content: "\e914";
}
.icon-manageusers:before {
  content: "\e915";
}
.icon-membership2:before {
  content: "\e916";
}
.icon-settings:before {
  content: "\e917";
}
.icon-cookingshow:before {
  content: "\e918";
}
.icon-podcast:before {
  content: "\e919";
}
.icon-arrow-left:before {
  content: "\e91a";
}
.icon-arrow-right:before {
  content: "\e91b";
}
.icon-article:before {
  content: "\e91c";
}
.icon-download:before {
  content: "\e91e";
}
.icon-game:before {
  content: "\e91f";
}
.icon-quiz:before {
  content: "\e920";
}
.icon-restart:before {
  content: "\e921";
}
.icon-video:before {
  content: "\e922";
}
.icon-worksheet:before {
  content: "\e923";
}
.animated-pig {
  display: block;
  width: 100px;
  height: 100px;
  line-height: 110px;
  background: url(/Content/Images/Rewards/piggy.png);
  animation: sprite-animation 2s steps(9) infinite;
  background-size: 1000px 100px;
}
.animated-pig.small {
  display: block;
  width: 70px;
  height: 70px;
  line-height: 77px;
  background: url(/Content/Images/Rewards/piggy.png);
  animation: sprite-animation 2s steps(9) infinite;
  background-size: 700px 70px;
}
.animated-flying-pig {
  display: block;
  margin: auto;
  width: 300px;
  height: 300px;
  line-height: 330px;
  background: url(/Content/Images/Rewards/flying_piggy.png);
  animation: sprite-animation 3s steps(23) 1;
  background-size: 7200px 300px;
}
@media only screen and (max-width: 767px) {
  .animated-flying-pig {
    display: block;
    margin: auto;
    width: 200px;
    height: 200px;
    line-height: 220px;
    background: url(/Content/Images/Rewards/flying_piggy.png);
    animation: sprite-animation 3s steps(23) 1;
    background-size: 4800px 200px;
  }
}
.flying_pig_container {
  position: absolute;
  width: 100%;
}
@media only screen and (max-width: 992px) and (min-width: 768px) {
  .flying_pig_container {
    bottom: 50%;
  }
}
@media only screen and (min-width: 992px) {
  .flying_pig_container {
    margin-left: 75px;
    bottom: 40%;
  }
}
.animated-house {
  width: 200px;
  height: 400px;
  line-height: 400px;
  display: block;
  animation: sprite-animation 1s steps(5) infinite;
}
.animated-house.learn {
  background: url(/Content/Images/ContentType/learn_sprite.png);
}
.animated-house.watch {
  background: url(/Content/Images/ContentType/watch_sprite.png);
}
.animated-house.create {
  background: url(/Content/Images/ContentType/create_sprite.png);
}
.animated-house.homer {
  background: url(/Content/Images/ContentType/lead_sprite.png);
}
.animated-house.play {
  background: url(/Content/Images/ContentType/play_sprite.png);
}
@keyframes sprite-animation {
  0% {
    background-position-x: 0;
  }
  100% {
    background-position-x: 100%;
  }
}
@keyframes animate-cloud {
  0% {
    margin-left: -700px;
  }
  100% {
    margin-left: 100%;
  }
}
@media only screen and (min-width: 992px) {
  .animated-cloud {
    position: fixed;
    background-image: url(/Content/Images/Backgrounds/clouds-hi.png);
    background-size: 100% 100%;
    opacity: 0.7;
    z-index: 0;
  }
  .animated-cloud.x1 {
    top: 80px;
    left: 500px;
    width: 150px;
    height: 70px;
    animation: animate-cloud 18s linear infinite;
  }
  .animated-cloud.x2 {
    top: 200px;
    left: 300px;
    width: 75px;
    height: 33px;
    animation: animate-cloud 17s linear infinite;
  }
  .animated-cloud.x3 {
    top: 120px;
    left: 200px;
    width: 200px;
    height: 100px;
    animation: animate-cloud 20s linear infinite;
  }
  .animated-cloud.x4 {
    top: 240px;
    left: 0;
    width: 150px;
    height: 80px;
    animation: animate-cloud 23s linear infinite;
  }
}
@keyframes no-show {
  0% {
    transform: rotateY(0deg);
    height: 100%;
    width: 100%;
  }
  49% {
    height: 100%;
    width: 100%;
  }
  50% {
    height: 0;
    width: 0;
  }
  100% {
    transform: rotateY(180deg);
    height: 0;
    width: 0;
  }
}
@keyframes show {
  0% {
    transform: rotateY(-180deg);
    height: 0;
    width: 0;
  }
  49% {
    height: 0;
    width: 0;
  }
  50% {
    height: 100%;
    width: 100%;
  }
  100% {
    transform: rotateY(0deg);
    height: 100%;
    width: 100%;
  }
}
.scroll-container {
  height: 275px;
  overflow: auto;
  background-color: #f5f5f5;
  border: solid 1px #f5f5f5;
  border-radius: 5%;
}
.flipper {
  position: relative;
}
.flip-card {
  background-color: #fff;
  border-radius: 5%;
  padding: 10px 0 10px 0;
  text-align: center;
  margin: 10px 0 10px 0;
  cursor: pointer;
  height: 400px;
}
.flip-header {
  height: 75px;
  margin-bottom: 5px;
  padding: 0 5px 0 5px;
}
.flip-footer {
  height: 75px;
  padding-top: 5px;
}
.front,
.back {
  position: relative;
  perspective: 1000px;
  transform-style: preserve-3d;
  perspective-origin: top center;
  animation-duration: 1s;
  animation-timing-function: linear;
  transition-property: transform;
  animation-fill-mode: forwards;
  -webkit-animation-fill-mode: forwards;
  overflow: hidden;
}
.front {
  z-index: 2;
  transform: rotateY(0deg);
  animation-name: show;
}
.flipper.active .front {
  animation-name: no-show;
}
.back {
  transform: rotateY(-180deg);
  animation-name: no-show;
}
.flipper.active .back {
  animation-name: show;
}
/*parent dashboard*/
#subject_item_container {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  justify-content: space-between;
  padding-top: 10px;
  margin: 0 !important;
}
.subject_item {
  flex: 1;
  width: 70px;
  height: 100px;
}
.subject_item img {
  width: 70px;
  height: 70px;
}
.subject_item .txt {
  font-weight: bold;
  font-size: 12px;
}
.dashboard_profile {
  background-color: #006DC6;
  padding-bottom: 20px;
}
.dashboard_content {
  background-color: #074478;
}
.dashboard_content_card {
  width: 200px;
  height: 200px;
  background-color: #00b9f4;
  border-radius: 2%;
}
.dashboard_tab {
  border-radius: 5px;
  margin-top: 15px;
}
.dashboard_profile_container {
  height: 150px;
  margin: 30px 0 10px 0;
}
.dashboard_additional_profile_container {
  height: 150px;
  border: solid 1px white;
  margin: 30px 0 10px 0;
}
.dashboard_coin_container {
  height: 100px;
  width: 80%;
  margin: auto;
  border-radius: 500px;
  padding-top: 20px;
  display: flex;
  flex-direction: row;
  justify-content: center;
}
.dashboard_count_container {
  height: 300px;
  margin: 25px 0 25px 0;
  padding-top: 25px;
  font-weight: bold;
  border-radius: 5%;
}
.dashboard_count_circle {
  width: 70px;
  height: 70px;
  border-radius: 35px;
  margin: 10px;
}
.dashboard_count_circle.create {
  background-color: #33CFFF;
}
.dashboard_count_circle.play {
  background-color: #CD53EA;
}
.dashboard_count_circle.watch {
  background-color: #70CF3D;
}
.dashboard_count_circle.learn {
  background-color: #F46437;
}
.dashboard_count_circle h3 {
  padding-top: 15px;
  font-weight: bolder;
}
.dashboard_count_circle h5 {
  margin-top: 28px;
  font-size: 14px;
  font-weight: bold;
}
/*\
 * Restore Bootstrap 3 "hidden" utility classes.
\*/
/* Breakpoint XS */
@media (max-width: 575px) {
  .hidden-xs-down,
  .hidden-sm-down,
  .hidden-md-down,
  .hidden-lg-down,
  .hidden-xl-down,
  .hidden-xs-up,
  .hidden-unless-sm,
  .hidden-unless-md,
  .hidden-unless-lg,
  .hidden-unless-xl {
    display: none !important;
  }
}
/* Breakpoint SM */
@media (min-width: 576px) and (max-width: 767px) {
  .hidden-sm-down,
  .hidden-md-down,
  .hidden-lg-down,
  .hidden-xl-down,
  .hidden-xs-up,
  .hidden-sm-up,
  .hidden-unless-xs,
  .hidden-unless-md,
  .hidden-unless-lg,
  .hidden-unless-xl {
    display: none !important;
  }
}
/* Breakpoint MD */
@media (min-width: 768px) and (max-width: 991px) {
  .hidden-md-down,
  .hidden-lg-down,
  .hidden-xl-down,
  .hidden-xs-up,
  .hidden-sm-up,
  .hidden-md-up,
  .hidden-unless-xs,
  .hidden-unless-sm,
  .hidden-unless-lg,
  .hidden-unless-xl {
    display: none !important;
  }
}
/* Breakpoint LG */
@media (min-width: 992px) and (max-width: 1199px) {
  .hidden-lg-down,
  .hidden-xl-down,
  .hidden-xs-up,
  .hidden-sm-up,
  .hidden-md-up,
  .hidden-lg-up,
  .hidden-unless-xs,
  .hidden-unless-sm,
  .hidden-unless-md,
  .hidden-unless-xl {
    display: none !important;
  }
}
/* Breakpoint XL */
@media (min-width: 1200px) {
  .hidden-xl-down,
  .hidden-xs-up,
  .hidden-sm-up,
  .hidden-md-up,
  .hidden-lg-up,
  .hidden-xl-up,
  .hidden-unless-xs,
  .hidden-unless-sm,
  .hidden-unless-md,
  .hidden-unless-lg {
    display: none !important;
  }
}