html, body {
  height: 100%;
}

div#page-book, div#book-container {
  height: 100%;
}

div#book-container > div {
  margin-bottom: 50px;
}

div.level-change {
  margin-top: 25px;
}

p.login-error {
  display : none;
  color   : red;
}

button:focus, a:focus {outline:0 !important;}

div.dropdown.open .glyphicon-chevron-down:before {
  content: "\e113" !important;
}

div[data-control=level-change].open .glyphicon-chevron-down:before {
  content: "\e113" !important;
}

section#footer.absolute {
  position: absolute;
}

img#page_cover:hover {
  cursor: pointer;
}

div.login-container {
  width: 100%;
}

.container-fluid.modified {
  margin-right: 0;
  margin-left: 0;
  padding-left: 0;
  padding-right: 0;
}


div.book-container {
  background-color: rgba(243,243,243,1);
  position: fixed;
  width: 100%;
  z-index: 100;
  border-bottom: 1px solid rgba(187, 187, 187, 0.6);
}

.simplebox {
  outline: none;
  box-shadow:none !important;
  padding: 6px 12px;
}

.btn-border {
  border: 1px solid transparent;
}

.hover:hover {
  cursor: pointer;
}

.margin-bottom {
  margin-bottom: 2em !important;
}

#page-content, #page-content a, #page-content:hover a {
  font-size: 1.2em;
  text-decoration: none !important;
  color: black;
}

button.menu {
  width:100%;
  margin-top:2em;
  color: #5A4A42;
  font-size: 16px;
  padding: 5px 20px;
}

ul.dropdown-menu.menu {
  width: 100%;
  text-align: center;
}

ul.dropdown-menu.menu li a {
  color: #5A4A42;
  font-size: 16px;
  padding: 5px 20px;
  min-width: 200px;
}

#book-title {
  font-size: 1.5em;
  font-weight: bold;
}

img.kuaderno-logo {
  width: 100%;
  max-width: 300px;
}

div.about-content {
  margin-bottom: 20px;
}

.resp-video-wrapper {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
}

.resp-video-wrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.about-title {
  text-align: center;
}

a#go-to-classwall {
  margin-top: 15px;
  padding-left: 0px;
  margin-left: auto !important;
  margin-right: auto;
  font-size: 26px;
  font-weight: 600;
  height: 65px;
  width: 190px;
  display: block;
  color: #D1253F;
  line-height: 30px;
}

div.answer-container {
  margin-top: 25px;
}

span.answer {
  font-size: 17px;
  line-height: 2;
  text-align: justify;
  display: block;
  margin: -30px 0 0 10px;
}

.btn-all-levels { color: #395762; font-size: 20px; font-weight:300; margin-bottom: 10px; width:100%; border: 2px solid #bab9b9; background-color: #e3e3e3;font-family: 'baloo_bhaijaanregular';}
.btn-all-levels .glyphicon-chevron-down {margin-top: 4px; margin-left: 10px; font-size: 12px; font-weight: 100;}
.btn-all-levels:hover{ color: #395762; }
ul#all-levels {
  text-align: center;
  z-index: 5000;
  width: 90%;
  left: 5%;
}

a.contact-us {
  font-size: 16px;
  font-weight: bold;
}

a[data-control=logout] {
  color:#504040;
}

a[data-control=logout] > span {
  font-size: 14px;
  margin-left:4px;
}

span#options {
  font-size: 16px;
  cursor: pointer;
}

div.small-input {
  width: 60%;
  min-width: 200px;
}

div.option-list {
  padding: 0;
}

ul#login-menu li {
  margin-bottom: 10px;
}

p.secondary_question {
  color: #000;
  font-size: 24px;
  font-weight: 400;
}

div#jp_container li {
  height: 0;
}

span.avatar-arrow {
  margin-top:75px;
}

@media (min-width: 1px) and (max-width: 767px){
  div#page-book div.book-container,
  div#page-ebook div.book-container {
    min-height: 20px;
    height: 50px;
  }

  div#page-book div#book-head, div#page-book div.book-head-buttons,
  div#page-ebook div#book-head, div#page-ebook div.book-head-buttons {
    min-height: 20px;
    height: 50px;
    margin: 0;
  }

  div#page-book button.btn-quiz, div#page-book button.btn-play, div#page-book button.btn-pause,
  div#page-ebook button.btn-quiz, div#page-ebook button.btn-play, div#page-ebook button.btn-pause, div#page-ebook button.btn-ebook-index {
    height: 30px;
    font-size: 12px;
    padding: 0;
  }

  div#page-book a.back-to-bookroom,
  div#page-ebook a.back-to-bookroom {
    -webkit-transform: scale(0.5);
    -moz-transform: scale(0.5);
    -ms-transform: scale(0.5);
    -o-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -ms-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    transform-origin: 0 0;
    margin-top: 10px;
  }

  div#page-book div#book-head,
  div#page-ebook div#book-head {
    height: 100%;
  }

  div#page-book div#book-container, div#page-book div#ebook-container,
  div#page-ebook div#book-container, div#page-ebook div#ebook-container{
    margin-top: -40px;
  }

}

@media (min-width: 50px) and (max-width: 467px){
  ul#login-menu li {
    width: 40%;
  }
}

@media (min-width: 200px) and (max-width: 768px){
  .kuaderno-video {
    width: 95%;
    margin-left: 2.5%;
  }

  .about-text {
    text-align: justify;
    margin-left: 2.5%;
  }

  ul#login-menu {
    margin-top: 25px !important;
  }

}

@media (min-width: 150px) and (max-width: 388px){
  #box-login {
    margin: 70px auto 20px -100px;
  }
}

@media (min-width: 350px) and (max-width: 388px){
  #box-login {
    margin: 70px auto 20px -75px;
  }
}

@media (min-width: 389px) and (max-width: 439px){
  #box-login {
    margin: 70px auto 20px -50px;
  }
}

@media (min-width: 1px) and (max-width: 767px){
  div#student-info {
    position: absolute;
  }

  a.back-to-bookroom, a.back-to-home {
    margin-left: 0px !important;
  }

}

@media (min-width: 1px) and (max-width: 540px){
  a.back-to-home {
    margin-top: 115px !important;
  }
  a.back-to-home span {
    display: block !important;
  }
  section#classwall {
    margin-top: 0px !important;
  }
}

@media (min-width: 768px) and (max-width: 991px){
  .kuaderno-video {
    width: 100%;
  }

  .about-text {
    text-align: justify;
  }
}

@media (min-width: 1px) and (max-width: 941px){
  a#go-to-classwall {
    width: auto !important;
  }
}

@media (min-width: 992px) and (max-width:1199px){
  .kuaderno-video {
    width: 100%;
  }
  .about-text {
    text-align: justify;
    max-width: 800px;
  }
}

@media (min-width: 1200px){
  .kuaderno-video {
    width: 100%;
  }
  .about-text {
    text-align: justify;
  }
}

@media (min-width: 1200px){
  .kuaderno-video {
    width: 100%;
  }
  .about-text {
    text-align: justify;
  }
}

@media (min-width: 1px) and (max-width: 420px){
  div#user-info {
    background: none !important;
    min-height: 0px !important;
    width: 100% !important;
    margin-right: 0px !important;
    float: none !important;
  }
  div.user-points-row {
    font-size: 22px !important;
    margin-left: 0px !important;
  }
  span.points-word {
    display: none !important;
  }
  div.user-name-row {
    margin-left: 0px !important;
    margin-bottom: 10px;
  }
  span.user-name {
    font-size: 22px !important;
  }
  #user-info .user-progress-bar .progress {
    width: 100% !important;
    float: none !important;
  }
  span.welcome {
    display: none !important;
  }
  img.mobile-small-logo {
    position : absolute;
    width    : 50px;
    display  : block !important;
  }
  span.avatar-arrow {
    margin-top: 55px;
    margin-left: 50px;
  }
  div.choose-avatar {
    height: 70px;
  }
  div.book-cover {
    width: 100%;
  }
  p.teacher-parents-login {
    margin-top: 1em;
  }
}

@media (min-width: 410px) and (max-width: 445px) {
  #box-login {
    margin: 70px 0 20px -30px !important;
  }

  div.checkbox > img {
    width: 90% !important;
  }
}

@media (min-width: 1px) and (max-width: 767px) {
  div.desktop-menu {
    display: none;
  }
  div.mobile-menu {
    display: block !important;
    visibility: visible !important;
  }
}

@media (min-width: 1px) and (max-width: 409px) {
  #box-login {
    background: url('../../images/page-login/bg_box_login_xs.png') no-repeat 0 0px transparent !important;
    width: 300px !important;
  }
  input.login-input {
    margin-top: 100px !important;
    margin-left: -5px !important;
    width: 150px !important;
  }
  a.login-help {
    margin-left: -5px !important;
  }

  div.checkbox > img {
    width: 90% !important;
  }

  #box-ribbon {
    background: url('../../images/page-login/bg_ribbon_xs.png') no-repeat 0 0px transparent !important;
    width: 180px !important;
    height: 32px !important;
    margin-top: -75px !important;
  }
  #box-ribbon p {
    line-height: 35px !important;
    font-size: 8px !important;
    font-weight: normal;
  }

}

@media (min-width: 1px) and (max-width: 301px) {
  #box-login {
    margin-left: -30px !important;
    width: 290px !important;
  }
}

@media (min-width: 400px){
  div.book-cover {
    margin-left: 10px;
  }
}

@media (min-width: 768px){
  .col-sm-offset-4{
    margin-left: 0;
  }
}

/* FOOTER */

section#footer {
  position: relative;
  bottom: 0;
  width: 100%;
}

.footer
{
  padding:30px 0;
  background:#ebecee;
  background-position:bottom center;
  background-repeat:no-repeat;
}

.homepage-footer
{
  /*background:#ebecee;*/
  background-position:bottom center;
  background-repeat:no-repeat;
}

.footer-nav
{
  font-size:16px;
  color:#000;

}

  .footer-nav ul
  {
    padding:0px;
    margin:0px;
    list-style:none;
  }

  .footer-nav li
  {
    display:inline-block;
    text-align:center;
    padding: 15px;


  }

  /*.footer-nav li:after
  {
    content:'|';
    margin:0 10px;
  }*/



  .footer-nav li:last-child:after
  {
    content:'';
    margin:0px 0px;
  }


/*  .footer-nav a
  {
    color:#000;
    text-decoration:none;


  }

  .footer-nav a:hover
  {
    color:#f87c45;
  }

*/

.homepage-footer a{
    text-decoration: none;
    color:black!important;
  }

.homepage-footer a:hover
{
  color:#56b9e5 !important;
}
.homepage-footer li {
  padding: 15px 15px 5px 15px;
}


.footer a{
    text-decoration: none;
    color:black!important;
  }

  .footer a:hover
  {
    color:#56b9e5 !important;
  }

.social-icons
{
  font-size:20px;
  padding:15px 0;

}

  .social-icons ul
  {
    padding:0px;
    margin:0px;
    list-style:none;
  }

  .social-icons li
  {
    display:inline-block;
    margin:0 10px;



  }



  .social-icons li:last-child
  {
    margin:0px 0px;
  }

  .social-icons a
  {
    color:#b2b2b3;
    text-decoration:none;


  }

  .social-icons a:hover
  {
    color:#f87c45;
  }

.copyright
{
  font-size:16px;
  color:#777;
  text-align:center;
}

.big-margin-bottom {
  margin-bottom: 100px;
}

.large-margin-bottom {
  margin-bottom: 200px !important;
}

.row-centered {
  text-align:center;
}
.col-centered {
  display:inline-block;
  float:none;
  /* reset the text-align */
  text-align:left;
  /* inline-block space fix */
  margin-right:-4px;
}

div#contact-us {
  opacity: 0;
  position:fixed;
  top: 30px;
  right: 10px;
  font-size:18px;
  font-weight:bold;
  background-color: #fffcf9;
  height: 50px;
  width: 150px;
  border: 1px solid #c0c0c0;
  border-radius: 10px;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  -webkit-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.15);
  -moz-box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.15);
  box-shadow: 3px 3px 5px 0px rgba(0,0,0,0.15);
}

#contact-us a.contact:link,
#contact-us a.contact:hover,
#contact-us a.contact:active,
#contact-us a.contact:visited
{
  line-height: 50px;
  color: #ff2f00;
}

span.close {
  float: right;
  color:#979797;
  margin-right: 8px;
  margin-top: 3px;
  font-size: 15px;
}

@media (max-width: 670px){
  #contact-us {
    display: none;
  }
}

#subscription-payment img.sub-badge {
  max-height: 150px;
}

#payment-title {
  margin-top: 25px;
}

#payment-title h1 {
  font-size: 45px;
  font-weight: bold;
}

.pay-section{
  display: none;
  margin-top: 50px;
  outline: none;
}

.pInfo {
  font-size: 16px;
}

input.invalid {
  outline: none;
  border-color: rgba(255,0,0,0.5);
}

.stripe-errors {
  color: red;
  font-style: italic;
  text-align: center;
}

#pay-done{
  margin-top: 40px;
}

@media (max-width: 767px){
  #payment-title {
    text-align: center;
  }

  .pay-section {
    margin-top: 10px;
  }

  #card-logos{
    margin-bottom: 25px;
  }
}

.payment-form-title {
  background-color: #f3203e;
  width: 100%;
  height: 60px;
  border-radius: 10px 10px 0px 0px;
  color: #fff;
  padding: 10px;
  font-size: 28px;
}

.payment-form-content {
  background-color: #dcdcdc;
  width: 100%;
  margin-top: 4px;
  margin-bottom: 20px;
}

.family-plan-price {
  font-size: 20px;
  font-weight: bold;
}

.family-plan-block {
  padding: 10px;
}

.family-plan {
  padding: 10px;
  box-sizing: border-box;
  cursor: pointer;
}

.family-plan-selected {
  background-color: #9ddef5;
  -webkit-box-shadow: 6px 6px 5px 0px rgba(0,0,0,0.45);
  -moz-box-shadow: 6px 6px 5px 0px rgba(0,0,0,0.45);
  box-shadow: 6px 6px 5px 0px rgba(0,0,0,0.45);
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

.family-checkbox-child {
  -webkit-transform: scale(1) !important;
  -moz-transform: scale(1) !important;
  -ms-transform: scale(1) !important;
  -o-transform: scale(1) !important;
  transform: scale(1) !important;
  margin: 10px !important;
  padding: 0 !important;
  height: 14px !important;
  border: 1px solid #000 !important;
  background-color: #fff !important;
}

.student-license{
  height: 30px;
  display: block;
  cursor: pointer;
}

button.family-payment-continue {
  height: 50px;
  background-color: #fec100;
  font-weight: bold;
  font-size: 26px;
  border: 1px solid #c0c0c0;
  padding: 10px 20px;
  line-height: 26px;
}

button.family-payment-continue:hover {
  background-color: #fecf16;
}

button.family-payment-continue:disabled {
  background-color: #c0c0c0;
}

button.family-payment-continue:active {
  background-color: #ffd72a;
  border: 1px solid #000;
}

.green-tag {
  color: #78ff79;
}

.red-tag {
  color: red;
}

.gray-tag {
  color: #adbabf;
}