/*   1200px  */

@media screen and (max-width: 1200px),
only screen and (max-device-width:1200px) {
    .logout-block, .main-menu > li, .logout-block > li + li, .block-login, #cartbox{
        margin-left: 20px;
    }
    .main-menu{
        margin-left: -20px;
    }
    .col-1-3{
        margin-left: 20px;
        width: calc(33.3333% - 20px);
        margin-bottom: 20px;
    }
    .col-1-2{
        margin-left: 20px;
        width: calc(50% - 20px);
        margin-bottom: 20px;
    }
    .row:not(.training_list){
        margin-left: -20px;
        margin-bottom: -20px;
    }
    .attach {
        display: block;
    }
    .sidebar-image{
        margin: -20px -20px 0;
    }
    .sidebar > *{
        padding: 20px;
    }
    .sidebar-only-image{
        margin: -20px;
    }
    .answer, .dialog_item__answer{
        margin-left: 60px;
    }
    .content-wrap, .content-courses, .lesson-sidebar-inside{
        margin-left: -20px;
    }
    .content-wrap > *, .content-courses > *, .lesson-sidebar-inside > *{
        padding-left: 20px;
    }

    body.aff-desc-page #content .maincol-inner, body.aff-page div.maincol {
        margin-left: 0!important;
        padding-left: 20px!important;
    }
    body.training-page div.maincol, body.training-page div.maincol_min,
    body.section-page div.maincol, body.section-page div.maincol_min,
    body.lesson-page div.maincol, body.lesson-page div.maincol_min,
    body.training-options-page div.maincol, body.training-options-page div.maincol_min {
        margin-left: 20px!important;
        padding-left: 0;
    }
}


/*   1024px  */

@media screen and (max-width: 1024px),
only screen and (max-device-width:1024px) {
    .contentbody .widget-header{
        font-size: 42px;
    }
    .hero-wrap h1, .hero-wrap .h1{
        font-size: 42px;
    }
    .cabinet-lk{
        padding-top: 60px;
    }
}


/*   991px  */

@media screen and (max-width: 991px),
only screen and (max-device-width:991px) {
    .open-menu {
        display: block;
    }
    header .main-menu {
        display: block;
        margin: 51px 40px 20px 40px;
    }
    header .main-menu > li {
        margin-left: 0;
        border-bottom: 1px solid #D8DAE7;
    }
    header .main-menu > li {
        padding-bottom: 6px;
        padding-top: 6px;
    }
    .main-menu > li > a {
        display: flex;
        padding: 6px 0;
        line-height: 2;
        height: auto;
        align-items: center;
    }
    header .main-menu a {
        text-decoration: none!important;
        line-height: 20px;
        font-size: 14px;
    }
    header .main-menu a:hover {
        background: none;
        color: #0772A0;
        text-decoration: none!important;
    }
    header .main-menu .submenu {
        display: none;
        padding: 0 15px;
    }
    header .main-menu .submenu.active {
        display: block;
    }
    header .main-menu .submenu li::marker{
        content: '';
    }
    header .main-menu .submenu a {
        line-height: 16px;
        padding: 6px 0;
        height: auto;
    }
    header .main-menu .icon-arrow-down {
        display: inline-block;
        margin-left: auto;
        font-size: 6px;
        padding: 7px 0 7px 7px;
    }
    header .topmenu .tm-offcanvas-close {
        top: 20px;
        right: 20px;
    }
    header .topmenu .icon-close {
        font-size: 20px;
    }
    .logo{
        margin-right: 0;
        min-width: 1px;
    }
    .col-1-3{
        width: calc(50% - 20px);
    }
    .product_img {
        margin-left: 20px;
        width: calc(35% - 20px);
    }
    .product_info {
        margin-left: 20px;
        width: calc(65% - 20px);
    }
    .product_page{
        margin-left: -20px;
    }
    /* ========================================================================
    Component: Off-canvas
    ========================================================================== */
    /*
     * This is the offcanvas overlay and bar container
     * 1. Hide by default
     * 2. Set fixed position
     * 3. Deactivate browser touch actions in IE11
     * 4. Mask the background page
     */
    .tm-offcanvas-close {
        display: block;
    }
    .uk-offcanvas {
        /* 1 */
        display: none;
        /* 2 */
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1000;
        /* 3 */
        touch-action: none;
        /* 4 */
        background: rgba(0, 0, 0, 0.1);
    }
    .uk-offcanvas.uk-active {
        display: block;
    }
    /* Sub-object `uk-offcanvas-page`
     ========================================================================== */
    /*
     * Prepares the whole HTML page to slide-out
     * 1. Fix the main page and disallow scrolling
     * 2. Side-out transition
     * 3. Needed for the transition to work instead of just letting it pop to the side
     */
    .uk-offcanvas-page {
        /* 1 */
        position: fixed;
        /* 2 */
        -webkit-transition: margin-left 0.3s ease-in-out;
        transition: margin-left 0.3s ease-in-out;
        /* 3 */
        margin-left: 0;
    }
    /* Sub-object `uk-offcanvas-bar`
     ========================================================================== */
    /*
     * This is the offcanvas bar
     * 1. Set fixed position
     * 2. Size and style
     * 3. Allow scrolling
     * 4. Side-out transition
     * 5. Deactivate scroll chaining in IE11
     */
    .uk-offcanvas-bar {
        /* 1 */
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        z-index: 1001;
        /* 2 */
        width: 270px;
        max-width: 100%;
        background: #fff;
        /* 3 */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* 4 */
        -webkit-transition: -webkit-transform 0.3s ease-in-out;
        transition: transform 0.3s ease-in-out;
        /* 5 */
        -ms-scroll-chaining: none;
    }
    .uk-offcanvas.uk-active .uk-offcanvas-bar.uk-offcanvas-bar-show {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    /* Modifier `uk-offcanvas-bar-flip`
     ========================================================================== */
    .uk-offcanvas-bar-flip {
        left: auto;
        right: 0;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    /* Offcanvase modes
     ========================================================================== */
    .uk-offcanvas-bar[mode='none'] {
        -webkit-transition: none;
        transition: none;
    }
    .uk-offcanvas-bar[mode='reveal'] {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
        clip: rect(0, 0, 100vh, 0);
        -webkit-transition: -webkit-transform 0.3s ease-in-out, clip 0.3s ease-in-out;
        transition: transform 0.3s ease-in-out, clip 0.3s ease-in-out;
    }
    .uk-offcanvas-bar-flip[mode='reveal'] {
        clip: none;
        -webkit-transform: translateX(100%);
        transform: translateX(100%);
    }
    .uk-offcanvas-bar-flip[mode='reveal'] > * {
        -webkit-transform: translateX(-100%);
        transform: translateX(-100%);
        -webkit-transition: -webkit-transform 0.3s ease-in-out;
        transition: transform 0.3s ease-in-out;
    }
    .uk-offcanvas.uk-active .uk-offcanvas-bar-flip[mode='reveal'].uk-offcanvas-bar-show > * {
        -webkit-transform: translateX(0%);
        transform: translateX(0%);
    }
    .answer, .dialog_item__answer{
        margin-left: 45px;
    }
}


/*   854px  */

@media screen and (max-width: 854px),
only screen and (max-device-width:854px) {
    .copyright, .footer-center, .soc_buttons{
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    .footer-inner > div + div{
        margin-top: 10px;
    }
}




/*   767px  */

@media screen and (max-width: 767px),
only screen and (max-device-width:767px) {
    .content-userbox, .login-userbox{
        padding: 20px 30px 30px;
    }
    .content-with-sidebar{
        width: 100%;
        margin-bottom: 40px;
    }
    body.training-page div.maincol,
    body.training-page div.maincol_min,
    body.inner-training-page div.maincol,
    body.inner-training-page div.maincol_min {
        margin-bottom: 40px!important;
    }
    .sidebar {
        width: 100%;
    }
    .textarea__righr .btn-yellow{
        padding-left: 20px;
        padding-right: 20px;
        width: auto;
    }
    .textarea__left, .textarea__righr{
        width: calc(100% - 20px);
    }
    .textarea__left{
        margin-bottom: 20px;
    }
    .tabs ul{
        flex-wrap: wrap;
        margin-bottom: 15px;
        margin-left: -15px;
        border-bottom: none;
    }
    .tabs li{
        width: calc(50% - 10px);
        margin-left: 10px;
        margin-bottom: 10px;
        flex-grow: 1;
        padding-left: 15px;
        padding-right: 15px;
        text-align: center;
        border-color: #373A4C;
        border-bottom: 1px solid #373A4C;
        border-radius: 10px;
    }
    .col-1-3, .col-1-2{
        width: calc(100% - 20px);
    }
    .offer, .cart-item, .cart-form, .catalog_item, .review_item, .maincol-inner-white{
        padding: 20px;
    }
    h1, .h1{
        font-size: 28px;
        margin-bottom: 20px;
    }
    h1.cource-head, .cource-head{
        font-size: 30px;
    }
    h2,
    .h2 {
        font-size: 25px;
        margin-bottom: 15px;
    }
    h3,
    .h3 {
        font-size: 22px;
    }
    .container-cart{
        padding-top: 40px;
        padding-bottom: 40px;
    }
    .offer:not(:last-child), .cart-item{
        margin-bottom: 30px;
    }
    .payments_list{
        margin-top: 30px;
    }
    .my-payments-date__left{
        margin-right: 20px;
        width: 100%;
        margin-bottom: 20px;
    }
    .my-payments-date{
        flex-wrap: wrap;
    }
    .totop{
        display: none !important;
    }
	.order_item-left{
        width: 70px;
        min-width: 70px;
        margin-right: 18px;
    }
    .order_item-desc{
        width: calc(100% - 88px - 60px);
    }
    .order_item-desc__payments{
        width: calc(100% - 88px);
    }
    .block-heading__click{
        padding: 15px 50px 15px 20px;
    }
    .answer, .dialog_item__answer{
        margin-left: 15px;
    }
    .contentbody .widget-header{
        font-size: 36px;
    }
    .h2-widget-header{
        font-size: 28px;
        margin-bottom: 20px;
    }
    .content-wrap{
        padding: 30px 0 30px;
    }
    .hero-wrap h1, .hero-wrap .h1{
        font-size: 34px;
    }
    .cabinet-lk{
        padding-top: 30px;
    }
    .breadcrumbs{
        margin-bottom: 0;
    }
    .open-menu, .logout-block, .main-menu > li, .logout-block > li + li, .block-login{
        margin-left: 15px;
    }
    .order_item:not(:last-child) {
        margin-bottom: 20px;
    }
    .payment-itogo{
        margin-top: 20px;
        text-align: left;
    }
    .soc_buttons ul{
        margin-left: -17px;
    }
    .soc_buttons li{
        margin-left: 17px;
    }
    .homework-top{
        padding-top: 20px;
    }
    .payment-left{
        width: 100%;
    }
    .payment-right{
        width: 100%;
        margin-top: 15px;
    }
}



/*   640px  */

@media screen and (max-width: 640px),
only screen and (max-device-width:640px) {
    .form-line label{
        padding-top: 0;
    }
    .form-line label, .form-line-input{
        width: 100%;
    }
    .create-short-link{
        flex-wrap: wrap;
    }
    .create-short-link > div{
        width: 100%;
    }
    .product_page{
        display: block;
        margin-left: 0;
    }
    .product_page:after{
        content: '';
        clear: both;
        overflow: hidden;
        visibility: hidden;
        display: block;
    }
    .product_img{
        width: 100%;
        margin-left: 0;
        margin-right: 20px;
        margin-bottom: 10px;
    }
    .product-card-page .product_img {
        max-width: 100%;
    }
    .product_info, .product-card-page .product_info{
        width: auto;
        margin-left: 0;
    }
	
	.product_info h1 {text-align:center}
    .lesson_item{
        flex-wrap: wrap;
    }
    .lesson_desc{
        width: calc(100% - 90px);
    }
    .lesson_cover {
        margin-right: 0 !important;
        width: 100% !important;
    }

    .alert-message {
        flex-wrap: wrap;
        justify-content: center;
        text-align: center;
    }
    .alert-message-right {
        margin-top: 20px;
    }
    .training-block .just-lesson{
        padding-left: 0;
    }
    .lesson_number{
        width: 90px;
    }
    .add-home-work--simple{
        position: static;
        margin-top: 15px;
    }
    .home-work-attach{
        padding-right: 0;
    }
    .home-work__title{
        padding-right: 0;
        flex-direction: column;
        align-items: flex-start !important;
    }
    .less_complete{
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        margin-top: 10px;
    }
    .small-caption{
        margin-left: 0;
    }
    .answer .add-comment-line {
        min-height: 1px;
    }

    .course_cover img, .category_cover img {
        height: auto!important;
        width: 100%;
        object-fit: fill;
    }
}



/*   480px  */

@media screen and (max-width: 480px),
only screen and (max-device-width:480px) {
    .logout-block{
        flex-direction: column;
        align-items: flex-start;
    }
    .logout-block li + li{
        margin: 10px 0 0;
    }

    .logout-block li, .logout-block a{
        width: 100%;
        text-align: center;
    }
    .client-menu__left{
        margin: 0 auto 10px;
    }
    .client-menu__right{
        margin-left: 0;
        width: 100%;
    }
    .group-button-modal > *{
        width: 100%;
        text-align: center;
    }
    .group-button-modal{
        max-width: 250px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    .cart-item-left{
        width: auto;
        padding: 0 0 15px;
    }
    .cart-item-left img {
        margin: 0;
    }
    .catalog_item_img {
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
    }
	 .catalog_item__right{
         display: flex;
         flex-direction: column;
     }
     .catalog-item__price-box{
         order: -1;
         display: flex;
         justify-content: center;
         align-items: center;
         font-size: 20px;
     }
    .catalog-item__price-box .red_price{
        color: #E04265;
    }
    .catalog_desc.intro{
        margin-top: 20px;
    }
     .catalog-item__price-box .font-bold{
         display: none;
     }
    .product_desc{
        margin-top: 12px;
        margin-bottom: 0;
    }
    .add_offer-form{
        margin-left: 0;
    }
    .logo{
        max-width: 160px;
    }
    .catalog-item__button-box{
        justify-content: center;
    }
    .order-info-container .order_item-desc {
        width: auto;
        margin-bottom: 0;
        padding-right: 15px;
    }
    .order-info-container .bottom {
        flex-wrap: wrap;
    }
    .cart-item-right, .catalog_item__right{
        width: 100%;
        padding-left: 0;
    }
    .payments_list-row{
        flex-wrap: wrap;
        margin: 0;
    }
    .payments_list-row > div{
        margin: 0;
        width: 100%;
    }
    .payments_list-row > div:first-child{
        margin-bottom: 10px;
    }
    .payments_list-row .btn-blue-small{
        width: 100%;
    }

    .form-line-inner-col{
        width: calc(100% - 20px);
    }
    .form-line-inner-col + .form-line-inner-col{
        margin-top: 10px;
    }
    .dialog:not(.dialog-2){
        padding-top: 56px;
        padding-left: 30px;
        padding-right: 30px;
    }
    .task-accepted{
        right: auto;
        left: 30px;
    }
    .assign-accept .list-questions__top{
        padding-right: 0;
    }
    .dialog_item-2 .dialog_item__left{
        display: none;
    }
    .dialog_item-2 .dialog_item__right{
        margin-left: 0;
    }
    .tabs-payments_list .order_item-desc{
        width: calc(100% - 88px);
        padding-right: 0;
    }
    .tabs-payments_list .order_item{
        flex-wrap: wrap;
    }
    .tabs-payments_list .payment_button{
        width: 100%;
        max-width: none;
        margin-top: 15px;
        text-align: center;
    }
}



/*   375px  */

@media screen and (max-width: 375px),
only screen and (max-device-width:375px) {
    
    
    
    
}

@media screen and (min-width: 480px),
only screen and (min-device-width:480px) {
    .flex-row{
        display: flex;
    }
    .flex-row > *{
        margin: 0;
    }
    .flex-row > *:first-child{
        flex-grow: 1;
        margin-right: 20px;
    }
}