@media only screen and (max-width: 768px) AND (max-device-width: 768px) {
  #navigationWrap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    background: #0BA6E3;
    z-index: 999;
    }

  #nav {
    background: #0BA6E3;
    position: fixed;
    top: 40px;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    padding-top: 20px;
    }

  #nav li {
    line-height: 28px;
    width: 100%;
    display: block;
    text-align: right;
    margin: 0 0 20px 0;
    padding-right: 25px;
    }

  .navBtn {
    display: block;
    float: right;
    }

  #nav {
    display: none;
    }

  .container-wider {
    width: 100%;
    padding: 0 10px;
    }

  .column.s-col-100 {
    padding: 0;
    }

  .hiddenMobile {
    display: none !important;
    }

  .pageTop_right,
  .pageTop_left {
    width: 100%;
    float: none;
    }

  .specialTxtBlockWrap {
    margin: 0 0 30px 0;
    }

  .specialTxtBlock_content {
    padding: 0 20px 20px 20px;
    }

  .typeProgramBlockWrap {
    float: none;
    }

  .typeProgramBlock {
    margin: 0 auto;
    }

  .lessonBlock .typeProgramBlock {
    height: 120px;
    width: 120px;
    }

  .typeProgramBlockWrap.lessonBlock {
    width: 150px;
    height: 150px;
    }

  .lessonBlock .typeProgramBlock::after, .lessonBlock .typeProgramBlock::before {
    width: 130px;
    height: 128px;
    left: -5px;
    }

  .page_typeprogram h2,
  .page_exercises h2,
  .page_lessons h2 {
    text-align: center;
    }

  .page_exercises, #typeProgramBlocks,
  .page_lessons #typeProgramBlocks {
    justify-content: space-evenly;
    }

  .lessonBlock .TPB_title {
    font-size: 18px;
    line-height: 27px;
    }

  #typeSettings {
    display: none;
    }

  #TP_exerciseContainer iframe,
  #TP_exerciseContainer img {
    max-width: 100%;
    }

  #type,
  #TP_typingWrap .speechBlockAvatarWrap {
    padding: 0;
    }

  #TP_typingPadWrap h2 {
    top: 4px;
    }

  #TP_txtToType {
    padding: 25px 20px;
    }

  #TP_typingWrap .speechBlockWrap .speechBlock_content.hasBtn {
    padding: 60px 10px 200px 10px;
    }

  #TP_counters > div {
    width: 100%;
    display: block;
    }

  #hideOptions,
  #fullScreenBtn {
    display: none;
    }

  #TP_typingPad {
    height: 280px;
    }

  #progressBubbles .bubbleWrap {
    margin: 20px 0;
    }

  #main_logo {
    top: 0;
    left: 20px;
    }

  #main_logo img {
    height: 40px;
    }

  }