/* 480-640px */
a {
  font-size: 18px;
}

.med-mob-hide {
  display: none !important;
}

.only-mob {
  display: inherit;
}

.all-mob-visible {
  display: inherit;
}
 
.wrapper {
  width: 96%;
}

header nav ul {
  margin-top: 28px;
}

header nav ul li {
  margin-right: 20px;
}

header nav #home-link {
  display: none;
}

.home-header-buttons {
  width: 100%;
}

.home-header-buttons a {
  width: 49%;
}

.home-header-buttons .login {
  margin-left: 2%;
}

header.secondary-nav h1 {
  float: none;
}

header.secondary-nav a, header.secondary-nav button, header.secondary-nav > span.mob {
  float: none;
}

.secondary-nav .search-box {
  float: none;
  width: 100%;
  margin-top: 39px;
  margin-bottom: -11px;
}

main.lessons {
  position: unset;
}

.lessons nav.lesson {
  top: 250px;
  left: 2%;
}

nav.lesson.opened {
  left: -6%;
  top: 0;
}

.mail-info i.fa-arrow-circle-left {
  margin-left: 0px;
}

.mail-preview p {
  line-height: 30px;
}

.mail-preview a {
  font-size: inherit;
}

section.page-form, div.page-form, div.page-form.new-msg {
  padding: 5%;
}

.courses-container {
  margin-top: 25px;
}

.courses-container .course-box.with-progress > div {
  width: 100%;
  padding-left: 0;
  padding-right: 0;
}

.courses-container .course-box div.course-icon,
.courses-container .course-box.with-progress div.course-icon {
  padding: 0 10px;
}

.courses-container .course-box div {
  line-height: 1.5em;
}

.courses-container .course-box > div {
  padding-right: 7px;
  padding-left: 7px;
}

.courses-container .course-box.with-progress div > div {
  padding-right: 7px;
  padding-left: 7px;
}

.courses-container .course-box a {
  font-size: 22px;
}

.courses-container .course-box .p-dark a {
  font-size: 0.95em;
}

.courses-container .course-box div p {
  margin-top: 15px;
}

.empty-course-info {
  float: none;
  margin-top: 60px;
}

.home-center-text p {
  line-height: 1.5em;
}

.column.col-2.form {
  margin-top: 83px;
}

.column.col-2.form.allmob-top-0 {
  margin-top: 0;
}

.column.width-560.form .select-items div, .column.width-560.form .select-selected {
  width: 90%;
}

.column.width-560.form .select-items div {
  margin-bottom: 0;
}

.form div {
  margin-bottom: 51px;
}

.form .main-instructions {
  margin-left: 0;
  display: block;
  font-size: 18px;
  line-height: 18px;
  margin-top: 10px;
}

.form p {
  margin-bottom: 20px;
}

.form label {
  font-size: 24px;
}

.form input,
.form textarea {
  margin-bottom: 0px;
}

.form .second-instructions {
  letter-spacing: -0.025em;
  display: block;
  margin-top: 10px;
}

.form span.input-error-msg {
  display: block;
  position: inherit;
  top: 0;
  margin-top: 5px;
  left: 0;
  background-color: inherit;
  font-size: 18px;
  font-weight: normal;
  line-height: 1.5em;
}

.form span.input-error-msg span {
  font-weight: bold;
}

.form .inside-input, .form span.input-error-msg.inside-input {
  bottom: 17px;
  position: absolute;
  padding: 0;
  margin: 0;
  top: inherit;
  left: inherit;
}

.form textarea + .input-error-msg.inside-input {
  top: 50px;
  bottom: unset;
}

.form .show-pwd {
  top: 24px;
  height: 25px;
}

.form .inp-wr {
  display: block; 
  position:relative;
}

.under-btn a {
  display: block;
}

section#are-you-teacher > h3 {
  line-height: initial;
}

section.lesson ul, .static article ul.ul-left-indent {
  display: inherit;
  padding-left: 0;
  margin-left: 0;
}

section.lesson ul li, .static article ul.ul-left-indent li {
  padding-left: 0;
  position: relative;
  left: 1em;
  width: 95%;
}

.lesson .example {
  width: 100%;
  margin: 0;
}

section.lesson .example > * {
  display: block;
  margin: 30px auto 0;
}

.mob-clear {
  clear: both;
}

section.lesson .mob-bottom-0, section.lesson figure.mob-bottom-0 {
  margin-bottom: 0;
}

section.lesson .mob-bottom-50, section.lesson figure.mob-bottom-50 {
  margin-bottom: 50px;
}

section.lesson .mob-top-50, section.lesson p.mob-top-50 {
  margin-top: 50px;
}

section.lesson p.mob-top-0, section.lesson figure.mob-top-0 {
  margin-top: revert;
}

section.lesson .mob-right-0, section.lesson figure.mob-right-0 {
  margin-right: 0;
}

.figure-4 img:first-child {
  margin: 0;
}

section.lesson .mob-center {
  float: none;
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 29px 0 0 0;
}

.figure-w-135 {
  margin-right: 15px;
}

.lessons .activity textarea.medium-txt-area2 { 
  width: calc(100vw - 5vw - 171px);
}

.inside-txt-img-right.figure-6,
.inside-txt-img-right.figure-7 { 
  float: none;
  margin-left: 0;
  text-align: center;
}

#sm-lesson-8 .inside-txt-img-right.figure-6 {
  float: right;
}

.inside-txt-img-right.figure-7 {
  margin-top: 29px;
}

.balloon p {
  float: none;
}

.balloon figure {
  margin-top: -20px;
}

.width-600 {
  width: 100%;
}

.img-m-left {
  margin-left: 0px;
}

.radio-container.dwo-columns,
.checkbox-container.dwo-columns {
  -webkit-column-count: inherit;
  -moz-column-count: inherit;
  column-count: inherit;
}

.lesson .overwrite-answ {
  width: 100%;
}

.lesson .overwrite-answ .overwrite-line {
  display: flex;
  align-items: center;
  line-height: initial;
  justify-content: space-between;
}

.lesson .overwrite-answ .overwrite-line :last-child {
  float: none;
  white-space: nowrap;
}

.activity.calculate-total input.len-2 {
  padding: 0 2px;
}

.activity.calculate-total-big p.exercise > *, 
.activity.calculate-total-big p.tbl-caption > * {
  margin: 0;
}

.activity.calculate-total-big #times-per-month {
  text-align: right;
}

.activity.calculate-total-big p.exercise label {
  white-space: nowrap;
}

.activity.button-like-radio {
  min-width: unset;
}

.activity.sortable-large {
  margin: 0 auto;
  width: 96%;
}

table.les-45 {
  width: 100%;
}

figure.doll-coin img {
  width: 100%;
}

.mob-flex-in-column {
  flex-direction: column;
}

/*----------------------------------------------*/
.learn-container.container {
  margin-top: 27px;
  padding: 50px 10px;
}

.learn-container.container ul {
  margin-bottom: 36px;
}

.learn-container.container ul li {
  font-size: 22px;
  line-height: 30px;
  margin: 0 0 30px;
}

.learn-container.container ul li .fa {
  float: left;
  margin-top: 3px;
  margin-bottom: 17px;
}

.learn-container.container ul.fa-ul span.multi-line {
  top: 0;
}

.static article > p, .static article li, .static article a {
  font-size: 22px;
}

.static figure img {
  margin: 0 10px 30px;
}

.med-mob-max-img img{
  max-width: 100%;
}

.mob-normal-line, section.lesson .mob-normal-line {
  line-height: initial;
}

.med-mob-width-300, .lessons section.lesson div.med-mob-width-300 {
  width: 300px;
}

.str-with-buttons > span {
  max-width: 46%;
}

#sm-lesson-41-2 .str-with-buttons > span.text-normal,
#sm-lesson-41-3 .str-with-buttons > span.text-normal {
  max-width: 80%;
  width: 80%;
}

/*--------course 29 --------------*/
.course-les-29-3 .str-with-buttons > span {
  max-width: 52%;
  line-height: 1.5em;
  white-space: normal;
}

.content-two-column {
  flex-wrap: wrap;
}

.content-two-column > div {
  width: 100%;
}

/*--------------course 34 ----------------------*/
.multiple-in-column.course-les-34-4.width-600 {
  max-width: 400px;
}

.multiple-in-column.course-les-34-4 .abt {
  padding-bottom: 28px;
}

.multiple-in-column.course-les-34-4 .col-2 {
  text-align: right;
  line-height: 1.15em;
}

/*--------------- course 38 ------------------*/
section#sm-lesson-38-4 .activity.img-radio-container.digital-devices {
  gap: 40px;
}

/*-------------course 43---------------------*/
#sm-lesson-43-3 .big-cols .col-20 {
  width: 30%;
}

#sm-lesson-43-3 .big-cols .col-80 {
  width: 70%;
}

/*--------------- pattern styles ----------------------*/
/*----------------- course 48 ---------------------------*/
#canvas-colours-pattern {
  width: 365px;
  height: 770px;
}

#sm-lesson-48-2 .content-two-column {
  max-height: 575px;
  overflow-y: hidden;
}

#sm-lesson-49-7 .content-two-column {
  max-height: 635px;
  overflow-y: hidden;
}

#sm-lesson-48-2 .content-two-column img,
#sm-lesson-49-7 .content-two-column img {
  max-width: 100%;
}

.coins-pattern-imgs {
  justify-content: flex-end;
  flex-wrap: wrap;
  width: min-content;
  row-gap: 35px;
  margin-top: 29px;
}

.coins-pattern-imgs > picture:first-child {
  flex-basis: 100%;
}

#sm-lesson-48-5 .activity.coins-pattern-imgs {
  width: 286px;
}

#sm-lesson-48-5 .activity.coins-pattern-imgs > div {
  flex-basis: 100%;
  justify-content: flex-end;
  column-gap: 30px;
  align-items: flex-end;
}

#sm-lesson-48-5 .activity.coins-pattern-imgs picture {
  align-items: flex-end;
}

.dots-pattern-imgs {
  column-gap: 45px;
}

.activity.sketch .canvas-with-pattern-dots {
  width: 300px;
  background: url("../img/draw_background_pattern_dots_mobile_1.png") no-repeat center center #dedede;
}

.activity.sketch .canvas-with-array-dots {
  width: 306px;
  background: url("../img/draw_bg_array_dots_mobile_small.png") no-repeat center center #dedede;
}

.activity.sketch .canvas-with-array-circles {
  width: 306px;
  height: 130px;
  background: url("../img/draw_bg_array_circles_mobile_small.png") no-repeat center center #dedede;
}

.activity.sketch .canvas-another-array-dots {
  max-width: 306px;
  height: 306px;
  background: url("../img/draw_bg_another_dots_mobile_small.png") no-repeat center center #dedede;
}

.activity.sketch .canvas-stacked-wood {
  max-width: 450px;
  height: 360px;
  background: url("../img/stacked_wood_mobile.png") no-repeat center center #dedede;
}

.activity.sketch .canvas-stacked-wood.crowd {
  background: url("../img/crowd_mobile.png") no-repeat center center #dedede;
}

.activity.sketch .canvas-stacked-wood.peas {
  background: url("../img/peas_mobile.png") no-repeat center center #dedede;
}

.activity canvas.canvas-probability-grid {
  width: 460px;
  height: 580px;
}

#canvas-flip-coin.canvas-probability-grid {
  height: 540px;
}

#canvas-flip-coins.canvas-probability-grid {
  height: 540px;
}

#sm-lesson-61-4 .activity.random-img + .activity.pattern {
  margin-top: -28px;
}

.activity.drag-and-drop-match .terms-column {
    margin-right: 5%;
}

.activity.drag-and-drop-match .drop-arrow-column {
    margin-right: 2%;
}

.activity.drag-and-drop-match .droppable-target::before {
    background-size: 50%;
}

.draggable-item, .definition-item, .droppable-target {
    font-family: "Roboto Condensed", sans-serif;
}
.activity.drag-and-drop-match .draggable-item, .drag-and-drop-match-parent .activity.drag-and-drop-match .draggable-item {
    font-size: 18px;
    font-weight: 700;
    padding: 10px;
}
.activity.drag-and-drop-match .definition-item,
.drag-and-drop-match-parent .activity.drag-and-drop-match .definition-item {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1em;
}

#sm-lesson-69-3 .table-scroll {
  overflow-x: auto;
}

@media screen and (max-width: 520px) and (min-width: 481px)  {
  ol .canvas-probability-grid {
    margin-left: -30px;
  }

  ol .random-img {
    margin-left: -30px;
  }
}

/*------------------------------------------------*/
.pop-up {
  max-height: 100%;
  overflow-y: scroll;
}

.pop-up a, .lesson p a, .lesson ul a, .lesson ol a {
  font-size: inherit;
}

/*-----------------------*/
.see-answer-link {
    font-size: inherit;
}

.see-answer-pop-up {
    width: 300px;
}

.see-answer-pop-up section {
    padding: 32px 38px 32px 38px;
}

.see-answer-pop-up .close {
    top: 13px;
    right: 13px;
}

body > footer * {
  font-size: 16px;
}

footer a#privacy-policy {
  display: inline-block;
}
