@media (min-width: 768px) and (max-width: 1199px) {
    .ctg{
        width: 100%;
        padding: 0 30px;
        box-sizing: border-box;
    }
    .cookie{
        right: 0;
        top: 0;
        bottom: auto;
    }
    h1{
        font-size: 25px;
    }
    header .pc, header .mob{
        display: none
    }
    header .tablet{
        display: flex;
        padding: 0 30px;
        box-sizing: border-box;
        justify-content: space-between;
        align-items: center;
    }
    header .tablet .left{
        text-align: center;
        flex: 1;
    }
    header .tablet .right{
        flex: 3;
        border-left: 1px solid #e5e5e5;
        position: relative;
    }
    header .tablet .right:after {
        content: '';
        position: absolute;
        width: 30px;
        height: 1px;
        background-color: #e5e5e5;
        right: -30px;
        top: 50px;
    }
    header .tablet .left p {
        font-size: 13px;
        color: #8d8d8d;
        letter-spacing: .04em;
        width: 110px;
        text-align: center;
        margin: auto;
    }
    header .tablet .left p, header .tablet .left a{
        position: relative;
        left: -15px;
    }
    header .tablet .left img{
        height: 21px;
    }
    header .tablet .top {
        padding: 15px 0 15px 25px;
        justify-content: space-between;
        border-bottom: 1px solid #e5e5e5;
    }
    header .tablet .bottom{
        box-shadow: none;
    }
    header .tablet .top .social{
        display: flex;
        align-items: flex-end;
    }
    header .tablet .top .social a{
        display: block;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        transition: background-image .3s;
    }
    header .tablet .top .social a:hover{
        transition: background-image .3s;
    }
    header .tablet .top .social a:not(:last-of-type){
        margin-right: 45px;
    }
    header .tablet .top .social .vk{
        background-image: url(../images/svg/vk_1.svg);
        width: 20px;
        height: 11px;
    }
    header .tablet .top .social .vk:hover{
        background-image: url(../images/svg/vk_2.svg);
    }
    header .tablet .top .social .inst{
        background-image: url(../images/svg/insta_1.svg);
        width: 14px;
        height: 14px;
    }
    header .tablet .top .social .fb{
        background-image: url(../images/svg/fb_1.svg);
        width: 7px;
        height: 15px;
    }
    header .top .phones a:not(:last-of-type) {
        margin-right: 30px;
    }
    header .top .phones a{
        font-family: 'Proxima';
    }
    header .tablet  .bottom ul{
        padding: 0 0 0 25px;
        margin: 0;
        display: flex;
        justify-content: space-between;
    }
    header .tablet  .bottom ul li{
        list-style: none;
        padding: 15px 0;
    }
    header .tablet  .bottom ul li a{
        font-size: 14px;
        font-family: 'Proxima-Bold';
        text-transform: uppercase;
    }
    header .tablet .bottom ul li.shop {
        border-left: 1px solid #e5e5e5;
    }
    header .tablet .bottom ul li.shop a:before {
        content: '';
        width: 19px;
        height: 16px;
        background: url(/assets/images/svg/basket.svg) center center / cover no-repeat;
        display: inline-block;
        margin-right: 10px;
        margin-left: 19px;
    }
    .promo .seo img{
        height: 685px;
    }
    .promo.ctg{
        width: 768px;
        margin: auto;
    }
    .promo h1 {
        font-size: 100px;
        line-height: 60px;
        letter-spacing: 0.06em;
        font-weight: 100;
        margin: 85px 0 35px -7px;
    }
    .promo .seo {
        position: absolute;
        top: -210px;
        z-index: 0;
        right: -265px;
        
    }
    .promo .seo p span{
        font-size: 18px;
        line-height: normal;
    }
    .promo .seo p {
        position: absolute;
        top: 212px;
        left: 365px;
        line-height: normal;
        width: 165px;
        font-size: 15px;
    }
    .promo .seo p:before {
        content: '“';
        font-family: 'Proxima';
        font-size: 100px;
        color: #fff;
        position: absolute;
        top: -70px;
        left: -4px;
    }
    .promo .text p {
        font-size: 20px;
        color: #fff;
        line-height: normal;
        max-width: 350px;
    }
    .promo .img {
        display: flex;
        margin: 68px 0 0;
        left: -10px;
        height: 100px;
    }
    .promo .img, .company .img{
        justify-content: flex-start;
        position: relative;
    }
    .promo .img p{
        width: 78px;
        height: 78px;
    }
    .company .img p{
        width: 109px;
        height: 109px;
    }
    .promo .img p span{
        width: 60px;
        height: 60px;
        background-size: 67%;
        margin: 9px auto 0;
    }
    .company .img p span{
        width: 82px;
        height: 82px;
        background-size: 67%;
        margin: 13px auto 0;
    }
    .promo .img p:nth-of-type(2) span, .company .img p:nth-of-type(2) span{
        background-size: 75%;
    }
    .promo .img p:nth-of-type(3) span, .company .img p:nth-of-type(3) span{
        background-size: 50%;
    }
    .promo .bg {
        position: absolute;
        top: -130px;
        left: 99%;
        transform: translate(-50%, 0);
        z-index: -1;
    }
    .courses h2 {
        font-size: 25px;
        margin-bottom: 85px;
        line-height: normal;
        max-width: 550px;
        margin: 0 auto 0;
    }
    .courses {
        margin-bottom: 320px;
        margin-top: 140px;
        display: flex;
        flex-wrap: wrap;
    }
    .courses .slider{
        order: 2;
        width: 550px;
        margin: 40px auto 0;
    }
    .courses .about{
        order: 3;
        width: 550px;
        margin: auto;
    }
    .courses .about .left {
        position: relative;
        display: none;
    }
    .slider .block{
        display: none;
    }
    .swiper-container{
        width: 100%;
    }
    .courses .slider .swiper-button-prev {
        left: 15px;
        right: auto;
    }
    .courses .slider .swiper-button-next {
        right: 15px;
        left: auto;
    }
    .courses .about .right span{
        font-size: 20px;
        margin-top: 35px;
        box-sizing: border-box;
    }
    header{
        z-index: 100;
        box-shadow: 0 5px 18px rgba(64, 34, 85, .34);
    }
    .courses .about .right p{
        font-size: 16px;
        line-height: 24px;
        box-sizing: border-box;
    }
    .courses .about .right p:last-of-type {
        margin-bottom: 30px;
    }
    .courses {
        margin-bottom: 0;
        padding: 0;
    }
    .slider .text-bg {
        font-size: 232px;
        letter-spacing: 0.06em;
        position: absolute;
        left: -130px;
        top: -135px;
        z-index: 2;
        color: #f6f5f5;
        font-family: 'Proxima-Light';
    }
    .mob_blocks {
        display: flex;
        order: 4;
        width: 100%;
        background: linear-gradient(45deg, #ca4eda, #f7a1e5);
        padding: 40px 30px 50px;
        margin-top: 35px;
        box-sizing: border-box;
    }
    .courses .mob_blocks .block{
        position: relative;
        background: none;
        text-align: center;
        padding-top: 80px;
        flex: 1;
    }
    .courses .mob_blocks .block:not(:last-of-type){
        margin-bottom: 30px;
    }
    .courses .mob_blocks .block:nth-of-type(1) img{
        height: 64px;
        
    }
    .courses .mob_blocks .block:nth-of-type(2) img{
        height: 46px;
        top: 10px;
    }
    .courses .mob_blocks .block:nth-of-type(3) img{
        height: 38px;
        top: 15px;
    }
    .courses .mob_blocks .block img{
        position: absolute;
        top: 0;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .courses .mob_blocks .block:nth-of-type(1){
        order: 3;
    }
    .courses .mob_blocks .block:nth-of-type(2){
        order: 2;
    }
    .courses .mob_blocks .block:nth-of-type(3){
        order: 1;
    }
    .materials h2{
        font-size: 25px;
        margin-top: 40px;
        margin-bottom: 30px;
    }
    .materials .first{
        display: none;
    }
    .materials .top{
        position: absolute;
        left: 50%;
        transform: translate(-50%, 0);
    }
    .materials .top img:first-of-type{
        display: none;
    }
    .materials .top img:not(:last-of-type){
        margin-right: 10px;
    }
    .materials .bottom {
        margin: 16px 0 0;
        align-items: flex-start;
        padding-top: 300px;
    }
    .materials .bottom img{
        display: none;
    }
    .materials .bottom .text{
        width: 550px;
        margin: 0 auto;
    }
    .materials .bottom .text p {
        font-size: 16px;
        line-height: 24px;
        margin: 0 0 30px;
    }
    .materials .bottom .text span {
        font-family: 'Proxima-Bold';
        font-size: 20px;
        display: block;
        margin: 35px 0 20px;
    }
    .materials .bottom .text p:last-of-type {
        margin-bottom: 30px;
    }
    .materials .add-inf{
        margin-bottom: 60px;
    }
    .materials .add-inf img{
        display: none;
    }
    .materials .add-inf .advantage {
        width: 180px;
        text-align: center;
        margin-top: 40px;
    }
    .materials .add-inf .advantage img{
        display: block;
        margin: auto;
        height: 35px;
    }
    .materials .add-inf .advantage p {
        font-family: 'Proxima-Bold';
        font-size: 15px;
        margin: 25px 0 0;
    }
    .form .wrapper {
        width: 100%;
        padding: 0 30px;
        margin: auto;
        box-sizing: border-box;
    }
    .form span{
        font-size: 25px;
        line-height: normal;
    }
    .form span strong{
        margin-bottom: 10px;
    }
    .form form{
        width: 550px;
        margin: auto;
    }
    .form .control span span.error{
        left: 66px;
    }
    .form {
        background-color: #fbf3fc;
        padding: 65px 0 65px;
    }
    footer .wrapper{
        flex-wrap: wrap;
        position: relative;
    }
    footer .wrapper .nav{
        order: 1;
    }
    footer .wrapper .social{
        order: 2;
    }
    footer .wrapper .inf{
        width: 100%;
        order: 3;
    }
    footer .wrapper .inf p{
        max-width: 100%;
        font-size: 14px;
    }
    footer .wrapper .inf p:not(:first-of-type){
        display: inline-block;
    }
    footer .wrapper .inf p:nth-of-type(2){
        margin-right: 5px;
    }
    footer .wrapper .nav .menu li:not(:last-of-type) {
        margin-right: 55px;
    }
    footer .wrapper .nav .policy {
        position: absolute;
        bottom: -70px;
            margin-bottom: 30px;
    }
    footer{
        padding: 30px 0 20px;
    }
    .courses h2 strong{
        margin-bottom: 15px;
    }
    header .tablet .bottom ul li a{
        letter-spacing: .1em;
    }
    header .tablet .bottom ul li a.active{
        color: #cc55da;
    }
    ul.breadcrumbs {
        margin: 35px 0 35px;
    }
    .training h1, .materials-p h1{
        font-size: 25px;
        line-height: normal;
    }
    .training h1 strong, .materials-p h1 strong{
        margin-bottom: 10px;
    }
    .training .inf {
        display: block;
        justify-content: space-between;
        align-items: flex-start;
    }
    .training .inf img{
        width: 45%;
        float: left;
        margin-right: 40px;
        margin-bottom: 15px;
    }
    .training .inf p, .training p, .company .type p{
        max-width: initial;
        font-size: 16px;
        line-height: 24px;
    }
    .training p{
        line-height: normal;
    }
    .training .advantages{
        margin-bottom: 35px;
    }
    .training .course .block {
        width: calc(50% - 10px);
    }
    .training h2{
        font-size: 25px;
        margin: 55px auto 5px;
    }
    .materials-p h2 {
        display: block;
        text-align: center;
        margin: 0 0 40px;
        width: calc(100% + 60px);
        position: relative;
        left: -30px;
    }
    .materials-p h1{
        margin-bottom: 30px;
    }
    .materials-p .slider, .company .content .slider, .company .type .slider, .company .proud .slider {
        position: relative;
        margin-bottom: 50px;
        width: calc(100% + 60px);
        left: -30px;
    }
    .slider .swiper-button-next {
        right: 30px;
        left: auto;
    }
    .slider .swiper-button-prev {
        left: 30px;
        right: auto;
    }
    .materials-p p{
        font-size: 16px;
        line-height: 24px;
    }
    .materials-p .advanteges p{
        font-size: 15px;
        line-height: normal;
    }
    .materials-p .advanteges {
        margin: 40px 0 20px;
    }
    .company .main h1 {
        font-size: 180px;
        line-height: 60px;
        letter-spacing: .06em;
        margin: 115px 0 80px;
    }
    .company .main p{
        font-size: 25px;
        line-height: 31px;
        max-width: 600px;
    }
    .company .img{
        justify-content: center;
    }
    .company .main .bg{
        top: -98px;
    }
    .company .content h2{
        font-size: 20px;
        margin: 40px 0 25px;
    }
    .company .content p{
        font-size: 16px;
        line-height: 24px;
    }
    .company .content .slider{
        margin: 30px 0 35px;
    }
    .company .supervisor{
        max-width: 768px;
        margin: auto;
        padding: 0 30px;
        box-sizing: border-box;
    }
    .company .supervisor .seo {
        position: relative;
        top: 0;
        z-index: -1;
        right: 0;
        margin-bottom: 20px;
    }
    .company .supervisor .seo img {
        position: absolute;
        height: 550px;
        right: -270px;
        top: -200px;
    }
    .company .supervisor .seo p{
        position: initial;
    }
    .company .supervisor .seo p:before {
        top: -21px;
        left: -4px;
    }
    .company .supervisor span{
        margin: 20px 0 80px;
    }
    .company .supervisor ul li {
        list-style: none;
        font-size: 16px;
        line-height: 24px;
        max-width: 340px;
    }
    .company .supervisor ul:nth-of-type(2) li{
        font-size: 18px;
        line-height: 30px;
        max-width: 100%;
    }
    .company .supervisor ul:nth-of-type(2){
        margin-left: 68px;
    }
    .company .supervisor .blocks {
        flex-wrap: wrap;
        margin-left: 68px;
        margin-bottom: 40px;
    }
    .company .supervisor .blocks .left, .company .supervisor .blocks .right{
        width: 100;
        flex: initial;
    }
    .company .supervisor .blocks .left{
        margin-bottom: 30px;
    }
    .company .proud span {
        display: block;
        font-size: 25px;
        font-family: 'Proxima-Bold';
        margin: 50px 0 25px;
    }
    .company .proud {
        margin-bottom: 50px;
    }
    .contact .left p{
        font-size: 25px;
        line-height: 43px;
    }
    .contact .right {
        width: 50%;
    }
    .policy p, .policy ul li{
        font-size: 16px;
        line-height: 24px;
    }
    .t_4 .ctg h1{
        font-size: 250px;
        line-height: 60px;
        letter-spacing: .06em;
        margin-bottom: 80px;
        margin-top: 100px;
    }
    .first .swiper-container, .swiper-container-second, .first .swiper-container{
        height: 220px;
    }
    .training .course .block .modal .content{
        width: calc(100% - 60px);
    }
    .training .course .block .modal .content h2, .training .course .block .modal .content h3{
        font-size: 25px;
        line-height: 40px;
    }
    .training .course .block .modal .content .close{
        width: 17px;
        height: 15px;
        padding: 25px;
        right: 0;
        top: 0;
    }
    .training .course .block .modal .content .close img{
        max-width: 100%;
    }
}