/* Small Desktops, iPad Pro, Tablets*/

@media screen and (max-width: 1280px) {
    .container {
        width: 960px;
    }

    .header-info {
        display: none;
    }

    .header-logo {
        margin-right: 40px;
    }

    .topics-item,
    .courses-item {
        width: calc(33.3% - 20px);
        margin-right: 30px;
    }

    .topics-item:nth-of-type(3n),
    .courses-item:nth-of-type(3n) {
        margin-right: 0;
    }

    .courses-item-name {
        font-size: 24px;
    }

    .courses-item-description {
        font-size: 14px;
    }

    .courses-item {
        padding-left: 20px;
        padding-right: 20px;
    }

    .heading {
        font-size: 24px;
    }

    .course-bonus-description br {
        display: none;
    }

    .course-bonus-description {
        max-width: 441px;
    }

    .course-bonus-inner {
        padding-right: 22px;
    }

    .topics-item {
        height: auto;
    }

    .topics-item-title {
        min-height: 82.5px;
    }

    .sidebar {
        margin-left: 20px;
    }

    .page-content {
        width: 680px;
    }

    .bonus-item-info {
        width: 450px;
    }

    .instructions-item {
        width: 180px;
    }

    .player-audio-control,
    .btn-play {
        margin-right: 12px;
    }

    .player-audio-control {
        width: 270px;
    }
}

/* Small Tablets, iPad Air */

@media screen and (max-width: 1000px) {
    .mini_search_in_kurs {
        display:none;
    }
    .container {
        width: 95%;
    }

    .header-inner {
        justify-content: space-between;
    }

    .header-logo {
        margin-right: 0;
    }

    .header-logo::after {
        display: none;
    }

    .header-inner {
        position: relative;
    }

    .header-nav {
        position: absolute;
        bottom: -8px;
        transform: translateY(100%);
        left: 0;
    }

    .main {
        padding-top: 57px;
    }

    .courses-item {
        width: calc(50% - 15px);
    }

    .courses-item:nth-of-type(n) {
        margin-right: 0;
    }

    .courses-item:nth-of-type(2n) {
        margin-left: 30px;
    }

    .course-menu {
        margin-top: 42px;
    }

    .course-menu-search {
        margin-right: 20px;
    }

    .course-menu-title {
        min-width: 245px;
    }

    .course-bonus-description {
        max-width: initial;
    }

    .breadcrumbs {
        margin-top: 23px;
    }

    .page-inner {
        flex-direction: column-reverse;
    }

    .sidebar {
        min-width: 100%;
        width: 100%;
        margin-left: 0;
    }

    .page-content {
        width: 100%;
    }

    .bonus-item-btn {
        margin-left: 20px;
        min-width: 145px;
    }

    .bonus-item-info {
        width: calc(100% - 165px);
    }

    .sidebar {
        margin-top: 0;
    }

    .grammar-item.topics-item {
        margin-right: 30px;
    }

    .grammar-item.topics-item:nth-of-type(3n) {
        margin-right: 0;
    }

    .breadcrumbs-wrap {
        padding-right: 0;
    }

    .instructions-item {
        width: 29%;
    }

    .player-audio-control,
    .player-left {
        width: 100%;
    }

    .personal-avatar {
        height: initial;
        margin-right: 35px;
    }

    .personal-info-btns .btn {
        margin-top:5px;
    }
}

/* iPad Mini */

@media screen and (max-width: 744px) {
    .heading {
        font-size: 22px;
    }

    .header-nav-link {
        font-size: 14px;
    }

    .header-inner {
        padding: 15px;
    }

    .topics-item:nth-of-type(n),
    .courses-item:nth-of-type(n) {
        margin-right: 0;
        margin-left: 0;
    }

    .topics-item:nth-of-type(2n),
    .courses-item:nth-of-type(2n) {
        margin-left: 30px;
    }

    .topics-item,
    .courses-item {
        width: calc(50% - 15px);
    }

    .course-bonus-inner {
        display: block;
    }

    .course-bonus-description,
    .course-bonus-title {
        text-align: center;
        margin-bottom: 20px;
    }

    .course-bonus-inner {
        text-align: center;
    }

    .course-menu-title {
        min-width: initial;
    }

    .course-menu-search {
        min-width: 450px;
        display: block;
        width: auto;
    }

    .course-menu-title {
        margin-bottom: 5px;
    }

    .course-menu-progress {
        display: flex;
        align-items: center;
    }

    .course-menu-progress .courses-item-progress {
        width: 100%;
    }

    .breadcrumbs-wrap {
        display: block;
    }

    .comment-message-content {
        width: 100%;
    }

    .comment-new {
        display: block;
    }

    .breadcrumbs-wrap {
        margin-bottom: 20px;
    }

    .personal-info {
        display: block;
    }

    .personal-info-item:last-of-type {
        margin-bottom: 20px;
    }

    .personal-achievement-item,
    .personal-topic {
        margin-right: 0px;
        margin-left: 0;
        width: calc(50% - 15px);
        margin-bottom: 30px;
    }

    .personal-achievement-item:nth-of-type(2n),
    .personal-topic:nth-of-type(2n) {
        /* margin-left: 30px;*/
    }
}


/* Custom Screen */

@media screen and (max-width: 610px) {

    .personal-topic .personal-topic-week {
        position:initial;
    }

    .btn.personal-topic-btn {
        width: 100%;
        height: auto;
        min-height: 32px;
        margin: 0 auto;
    }
}

/* Large Smartphones, iPhones Pro */

@media screen and (max-width: 450px) {

    .topics-item:nth-of-type(n),
    .courses-item:nth-of-type(n) {
        margin-right: 0;
        margin-left: 0;
    }

    .topics-item,
    .courses-item {
        width: 100%;
    }

    .container {
        width: calc(100% - 20px);
    }

    .header-action {
        display: block;
    }

    .header-action-link:first-of-type {
        margin-right: 0;
        margin-bottom: 3px;
    }

    .header-action-link {
        font-size: 13px;
    }

    .header-inner {
        padding: 13px 20px;
    }

    .header-nav-link {
        margin-right: 9px;
    }

    .heading {
        font-size: 25px;
        text-align: center;
    }
/*
    .heading::after {
        right: inherit;
        top: inherit;
        transform: translateX(-50%);
        bottom: -15px;
        left: 50%;
    }
*/
    .main-courses .heading {
        margin-bottom: 50px;
    }

    .courses-item-img {
        width: 44px;
        height: auto;
        margin: 0;
        margin-right: 18px;
    }

    .courses-item-img img {
        height: 100%;
        width: 100%;
        object-fit: contain;
        object-position: center;
    }

    .courses-item-info-wrap {
        display: flex;
        align-items: flex-end;
    }

    .courses-item-description {
        margin-bottom: 0;
    }

    .courses-item-name {
        font-size: 24px;
        margin-bottom: -2px;
    }

    .courses-item-description {
        font-size: 14px;
    }

    .courses-item-info-wrap {
        margin-bottom: 24px;
    }

    .courses-item {
        padding: 23px 22px 18px;
    }

    .courses-item-info {
        margin-bottom: 20px;
    }

    .courses-item-progress {
        margin-bottom: 18px;
    }

    .courses-item {
        margin-bottom: 28px;
    }

    .materials-item .courses-item-img {
        margin-left: auto;
        margin-right: auto;
    }

    .materials-item .courses-item-name {
        margin-bottom: 6px;
    }

    .materials-item .courses-item-description {
        margin-bottom: 26px;
    }

    .footer-inner {
        padding: 10px 0 8px;
    }

    .courses-item-info-wrap .courses-item-name,
    .courses-item-info-wrap .courses-item-description {
        text-align: left;
    }

    .course-menu-inner {
        flex-direction: column;
    }

    .course-menu-search {
        min-width: initial;
        margin-right: 0;
        order: 2;
    }

    .course-menu-progress {
        width: 100%;
        order: 1;
        margin-bottom: 15px;
    }

    .header-nav-link {
        font-size: 13px;
    }

    body {
        padding-top: 30px;
    }

    .course-content-top {
        flex-direction: column-reverse;
        display: flex;
        padding-top: 58px;
    }

    .header-nav {
        justify-content: center;
        width: 100%;
    }

    .course-content-info .heading-center {
        margin-bottom: 7px;
    }

    .subheading {
        font-size: 16px;
        font-weight: 400;
        position: relative;
        padding-bottom: 18px;
    }

    .subheading::after {
        width: 67px;
        height: 3px;
        background: #2E50BE;
        content: '';
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
    }

    .course-menu {
        padding-top: 21px;
        margin-top: 0;
    }

    .subheading {
        margin-bottom: 0;
    }

    .course-menu-search {
        padding: 15px 20px;
    }

    .course-menu-progress {
        padding: 13px 20px 10px;
    }

    .courses-item-progress {
        min-height: initial;
    }

    .course-menu-title {
        margin-right: 0;
        text-align: center;
        margin-bottom: 17px;
    }

    .search-bar {
        display: block;
    }

    .search-bar-input {
        width: 100%;
        margin-bottom: 8px;
        text-align: center;
    }

    .search-bar-input {
        font-size: 14px;
        font-weight: normal;
        height: 34px;
    }

    .search-bar-btn {
        width: 100%;
    }

    .course-bonus-btn {
        width: 100%;
    }

    .course-menu {
        margin-bottom: 35px;
    }

    .course-bonus-title {
        margin-bottom: 11px;
    }

    .course-bonus-inner {
        padding-bottom: 22px;
    }

    .course-bonus {
        margin-bottom: 48px;
    }

    .topics-item {
        padding-left: 20px;
        padding-right: 20px;
    }

    .topics-item-title {
        text-align: left;
        margin-bottom: 20px;
    }

    .topics-item-btn {
        /*    margin-bottom: 15px; */
    }

    .topics-item-details {
        font-size: 14px;
    }

    .topics-item {
        margin-bottom: 20px;
    }

    .topics-item:last-of-type {
        margin-bottom: 0;
    }

    .topics-item-top {
        margin-bottom: 19px;
    }

    .topics-section {
        padding-bottom: 50px;
    }

    .topics-section .heading-sm {
        margin-bottom: 25px;
        margin-left: 21px;
        font-size: 22px;
        text-align: left;
        /*padding-left: 10px;*/
    }

    .heading-sm::after {
        right: 20px;
        top: 50%;
        left: initial;
        transform: translateY(0px);
        /*bottom: initial;
        left: initial; */
        width: 60px;
    }

    .breadcrumbs-link {
        font-size: 12px;
    }

    .breadcrumbs {
        margin-bottom: 23px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .bonus-item {
        display: block;
        text-align: center;
        padding: 18px;
    }

    .bonus-item-info {
        width: 100%;
        margin-bottom: 15px;
    }

    .bonus-item-btn {
        margin-left: 0;
    }

    .sidebar .sidebar-course {
        border-radius: 15px;
        border: 2px solid #4069FF;
        background: transparent;
        padding: 10px 18px 18px;
        display: flex;
        align-items: center;
        /*justify-content: space-between;*/
        height: 83px;
    }

    .sidebar .sidebar-course-top {
        margin-bottom: 0;
        margin-right: 5px;
        /*width: 33px;*/
    }

    .sidebar .sidebar-course-img {
        margin-right: 7px;
    }

    .sidebar .sidebar-course-name {
        font-size: 26.4px;
    }

    .sidebar .courses-item-progress {
        width: 67px;
        position: relative;
        /*margin-top: 14px; */
        margin: 0 auto;
        height: 52px
    }

    .sidebar .progress-bar-text {
        /* position: absolute;
         top: 4px;
         transform: translateY(-100%); */
        position: absolute;
        top: initial;
        font-size: 12px;
        margin: 0 auto;
        width: 100%;
    }

    .sidebar-course .progress-bar {
        margin-top: -5px;
        position: absolute;
        top: 50%;
        bottom: 0;
    }

    .sidebar-course .progress-bar-text {
        color: #000000;
    }


    .sidebar-tables .sidebar-course-description {
        position: initial;
    }

    .sidebar .progress-bar-info {
        display: block;
        text-align: center;
    }

    .sidebar-schedule,
    .bonus-nav {
        display: none;
    }

    .progress-bar-value {
        /* margin-top: -5px; */
        line-height: 22px;
        transform: translateY(30px);
    }

    .sidebar-search-text {
        margin-bottom: 0;
        margin-right: 10px;
    }

    .sidebar-search-text span {
        display: none;
    }

    .sidebar-search {
        display: flex;
        align-items: center;
    }

    /* Временно отключено
.heading-center::after {
    display: block;
    width: 67px;
    height: 3px;
    background: #2E50BE;
    content: '';
    position: absolute;
    right: 50%;
    bottom: -11px;
    transform: translate(-50%, -100%);
}
     */

    .course-info-heading {
        font-size: 22px;
        margin-bottom: 20px;
    }

    .ordered-list li,
    .course-info-subheading {
        font-size: 16px;
        margin-bottom: 0;
    }

    .ordered-list li a {
        border: none;
    }

    .course-info.no-bg {
        padding-top: 0;
        padding-bottom: 0;
    }

    .grammar-item .topics-item-title {
        text-align: center;
    }

    .grammar .heading {
        margin-bottom: 32px;
    }

    .grammar-item .topics-item-btn {
        width: 100%;
    }

    .topics-item.grammar-item {
        padding: 27px 40px 16px;
    }

    .grammar {
        margin-bottom: 75px;
    }

    .breadcrumbs-nav {
        justify-content: center;
        margin-top: 17px;
    }

    .comment-heading {
        font-size: 22px;
    }

    .breadcrumbs-nav.show-mob {
        display: flex;
        margin-bottom: 22px;
    }

    .lesson-content-img {
        margin-bottom: 35px;
    }

    .comment-message {
        margin-bottom: 25px;
    }

    .comment-message:last-of-type {
        margin-bottom: 0;
    }

    .comment-dialogue {
        padding: 0;
        background: transparent;
        border-radius: 0;
        height: auto;
    }

    .comment-messages {
        max-height: initial;
        height: 100%;
        border-radius: 10.737px;
        background: #F5F5F5;
        padding: 12px 20px 16px 23px;
        overflow-y: scroll;
        height: 421px;
    }

    .comment-new {
        border-radius: 10.737px;
        background: #F5F5F5;
        padding: 12px 20px;
        text-align: center;
    }

    .comment-input-wrap {
        width: 100%;
        margin-bottom: 12px;
    }

    .page-content {
        margin-bottom: 37px;
    }

    .comment-message {
        margin-right: 0;
    }

    .btn-print {
        left: 50%;
        transform: translate(-50%, -50%);
        top: 0;
    }

    .hide-mob {
        display: none;
    }

    .breadcrumbs-nav-link.context {
        width: 120px;
    }

    .sidebar-tables {
        display: block;
        padding: 10px 14px 19px;
        padding-left: 61px;
        position: relative;
    }

    .sidebar-tables .sidebar-course-name {
        margin-bottom: -4px;
    }

    .sidebar-tables .sidebar-course-img {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        /*left: 14px;*/
    }

    .player-wrap,
    .instructions-items {
        flex-direction: column;
    }

    .player-audio {
        width: 100%;
    }

    .instructions {
        padding: 24px 29px 48px;
    }

    .instructions-heading {
        margin-bottom: 12px;
    }

    .hint-btn {
        right: 29px;
        top: 12px;
    }

    .instructions-item {
        margin-bottom: 34px;
        margin-right: auto;
        margin-left: auto;
        width: 239.077px;
    }

    .instructions-item::after {
        bottom: -5px;
        right: initial;
        top: initial;
        left: 50%;
        transform: translate(-50%, 100%) rotate(90deg);
    }

    .instructions-item:last-of-type {
        margin-right: auto;
    }

    .player-audio-time.info {
        display: none;
    }

    .player-left {
        width: 100%;
    }

    .btn-play {
        margin-right: 17px;
    }

    .player {
        padding: 12px 30px;
        width: calc(100% + 60px);
        margin-left: -30px;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        padding-bottom: 43px;
    }

    .player-audio-control {
        margin-right: 0;
    }

    .player-left {
        margin-bottom: 12px;
    }

    .player-download-audio {
        display: none;
    }

    .instructions {
        padding-bottom: 0;
    }

    .player {
        margin-bottom: 0;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .player-controls-wrap {
        width: 100%;
        justify-content: space-between;
    }

    .player-control-wrap {
        width: 125px;
    }

    .btn-speed,
    .btn-volume {
        min-width: 24px;
    }

    .btn-print {
        /*    width: 167px; */
    }

    .instructions {
        position: relative;
    }

    .btn-hide {
        display: flex;
        align-items: center;
        text-align: left;
        padding-left: 25px;
        font-size: 12px;
        font-weight: 600;
        line-height: 150%;
        position: relative;
        width: 117px;
        height: 31px;
        border-radius: 5px;
        background-color: #CCF6DE;
        position: absolute;
        left: 50%;
        top: 0;
        transform: translate(-50%, -50%);
    }

    .btn-hide::after {
        position: absolute;
        content: '';
        background-image: url(../img/icons/hide_icon.svg);
        width: 7.083px;
        height: 8.5px;
        right: 19px;
        top: 50%;
        transform: translateY(-50%);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
    }

    .instructions-teacher-img {
        display: none;
    }

    .instructions-teacher {
        padding: 34px 20px 0;
    }

    .instructions-teacher .player {
        width: calc(100% + 40px);
        margin-left: -20px;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
    }

    .lesson-content-img.selected.lesson-table {
        padding-top: 33px;
    }

    .btn-rollup {
        width: 117px;
    }

    .personal-achievement-item,
    .personal-topic {
        width: 100%;
    }

    .personal-achievement-item:nth-of-type(2n),
    .personal-topic:nth-of-type(2n) {
        margin-left: 0;
    }

    .personal .heading {
        position: relative;
    }

    .personal .heading::after {
        width: 67px;
        height: 3px;
        background: #2E50BE;
        content: '';
        position: absolute;
        left: 50%;
        bottom: -10px;
        transform: translateX(-50%);
        display: block;
    }

    .personal-avatar {
        margin-right: 17px;
        min-width: 146px;
        max-width: 146px;
        height: 189px;
        overflow: hidden;
    }

    .personal-avatar-btn {
        width: 116px;
        height: 24.794px;
        font-size: 13.282px;
        padding: 0;
    }

    .personal-info-wrap {
        flex-wrap: wrap;
    }

    .personal-info-items.personal-info-right .personal-info-right-top {
        margin-bottom: 10px;
    }

    .personal-info-btns .edit {
        margin-right: 13px;
    }

    .personal-info-item.telegram {
        float: right;
    }

    .heading-sm {
        text-align: center;
    }
    /*    Временно отключено
    .heading-sm::after {
        position: absolute;
        left: 50%;
        top: initial;
        bottom: -10px;
        transform: translateX(-50%);
        display: block;
    }

     */

    .personal-info-wrap {
        margin-bottom: 60px;
    }

    .personal-info-btns .edit {
        width: 160px;
        padding: 0;
    }

    .personal-topics {
        margin-bottom: 55px;
    }

    .personal-topic:last-of-type {
        margin-bottom: 0;
    }

    .personal-topic {
        margin-bottom: 21px;
    }

    .personal-achievement-items .sidebar-course-name {
        font-size: 25px;
    }

    .personal-info-items {
        margin-right: 0;
    }

    .personal-info-left {
        width: calc(100% - 165px);
    }

    .modal {
        /*display: block;*/
        overflow-y: scroll;
    }

    .vocab-popup {
        width: calc(100% - 28px);
        padding-left: 20px;
        padding-right: 20px;
    }

    .vocub-subheading br {
        display: none;
    }

    .vocab-word {
        display: block;
    }

    .vocab-word-input {
        width: 100%;
        margin-bottom: 17px;
    }

    .vocab-word .btn-translate {
        margin-left: auto;
        margin-right: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }


    .btn.personal-topic-btn {
        margin: initial;
        width: 215px;
    }

    .personal-topic .personal-topic-week {
        position: absolute;
    }

    .heading-sm::after {
        display: none;
    }

    .personal-achievement-item .progress-bar{
        position: relative;
    }

    .personal-achievement-item .progress-bar-value {
        transform: translateY(0px);
    }

    .courses-item-progress .progress-bar-value {
        transform: translateY(0px);
    }
    .sidebar-course .progress-bar-value {
        transform: translateY(30px)!important;
    }

    .lesson-content .sidebar .sidebar-course-top {
        margin-bottom: 0;
        margin-right: 5px;
        width: initial;
    }

    .lesson-content .sidebar .sidebar-course-top .courses-item-progress {
        width: 67px;
        position: relative;
        /* margin-top: 14px; */
        margin: 0 auto;
        height: 52px;
    }

    .lesson-content .sidebar .sidebar-course .progress-bar-value {
        transform: translateY(10px);
    }
    .lesson-content .sidebar .sidebar-course-top .progress-bar {
        margin-top: 0px;
        position: absolute;
        top: 50%;
        bottom: 0;
    }
    .lesson-content .sidebar .sidebar-course .sidebar-course-top {
        width: initial;
    }

    .sidebar-tables .sidebar-course-top {
        width: 33px;
    }

    .course-menu .courses-item-progress .progress-bar-value {
        transform: translateY(0px);
    }
}


/* Small Smartphones, iPhones */

@media screen and (max-width: 345px) {
    .header-inner {
        padding-left: 10px;
        padding-right: 10px;
    }

    .courses-item-name {
        font-size: 20px;
    }

    .courses-item-description {
        font-size: 12px;
    }

    .courses-item {
        padding-left: 15px;
        padding-right: 15px;
    }

    .sidebar .sidebar-course-name {
        font-size: 22px;
    }

    .sidebar-course-description {
        font-size: 13px;
    }

    .topics-item.grammar-item {
        padding-left: 30px;
        padding-right: 30px;
    }

    .show-answer {
        width: 95%;
    }

    .player {
        padding-left: 12px;
        padding-right: 12px;
        padding-bottom: 30px;
    }

    .personal-info-item.telegram {
        float: none;
    }

    .personal-info-btns .save,
    .personal-info-btns .edit {
        width: auto;
        padding: 0 15px;
    }

    .breadcrumbs-nav-link.prev::before, .breadcrumbs-nav-link.next::before {
        display:none;
    }

    .breadcrumbs-nav-link.prev,  .breadcrumbs-nav-link.next{
        justify-content: center;
        padding-left: initial;
    }
}