@media (max-width: 1580px) {

    #container {
        min-width: 980px;
        width: auto;
        margin: 0 auto;
        overflow-x: hidden;
    }

    .map span{
        left: 50px;
        font-size: 40px;
        line-height: 40px;
        top: 40px;
    }

    .map span img{
        width: 20px;
        height: auto;
    }

}

@media (max-width: 1279px){
    .anim-block{
        display: none !important;
    }
}

@media (max-width: 1080px) {
    .articles .items {
        width: auto;
    }

    .articles .item.item-small {
        width: auto;
    }

    .tal {
        margin-left: 0;
    }

    .tar {
        margin-left: 0;
    }
}

@media (max-width: 767px) {


    #container {
        min-width: inherit;
        max-width: inherit;
        width: auto;
    }

    .container {
        min-width: inherit;
        max-width: 640px;
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin: 0 auto;
    }

    .about-us .container {
        padding-top: 40px;
        padding-bottom: 40px;
    }

    .portfolio .triple-item {
        width: auto;
    }

    .portfolio .triple-item img {
        max-width: 100%;
    }



    .header .telegram {
        margin-right: 18px;

    }

    .title .cls-1, .title .cls-3 {
        font-size: 60px !important;
    }

    .title {
        min-height: 80px;
        margin-left: 0;
    }

    .clients .title {
        margin-bottom: 30px;
    }

    .clients .container .item {
        width: 33.33%;
    }

    .portfolio .container {
        padding-bottom: 20px;
    }

    .portfolio .title{
        margin-bottom: 5px;
        margin-top: -43px;
    }

    .contacts .title {
        margin-bottom: -10px;
    }

    .contacts .container {
        padding-top: 30px;
        padding-bottom: 0;
    }

    .about-agency .left-part {
        float: none;
        width: auto;
        padding-left: 0;
    }

    .about-agency .right-part {
        margin-left: 0;
        padding-top: 40px;
    }

    .about-agency .container {
        padding-top: 0;
    }

    .about-agency .desc {
        padding-left: 0;
    }

    .double-title {
        position: relative;
    }

    .agency-clients .item img + img, .agency-clients .item img {
        margin-left: 0 !important;
        margin-right: 8% !important;
        margin-bottom: 35px;
        max-width: 25%;
        height: auto;
    }

    .agency-clients .item {
        font-size: 0;
    }

    .agency-clients .item span {
        font-size: 12px;
    }

    .agency-clients .item {
        margin-left: 0;
        padding-left: 50px;
    }

    .agency-clients .item + .item {
        margin-top: 10px;
    }

    .statistic-block .block + .block {
        margin-left: 28px;
    }

    .statistic-block .container {
        text-align: left;
        padding: 0 20px 30px !important;
        overflow: auto;
        margin-top: -15px;
    }

    .statistic-block svg .cls-1 {
        font-size: 60px;
    }

    .statistic-block svg {
        left: -10px;
    }

    .statistic-block .item .block, .statistic-block .item .block + .block {
        font-size: 13px;
        line-height: 15px;
        width: 50%;
        margin-bottom: 0;
        margin-left: 0;
        display: block;
        float: left;
    }

    .statistic-block .item .block:nth-child(1) {
        padding: 65px 0 0 27px;
    }

    .statistic-block .item .block:nth-child(2) {
        padding: 65px 0 0 90px !important;
    }

    .statistic-block .item .block:nth-child(3) {
        padding: 45px 0 0 27px !important;
    }

    .statistic-block .item .block:nth-child(5) {
        padding: 45px 0 0 27px !important;
    }

    .statistic-block .item .block:nth-child(5) {
        padding: 45px 0 0 27px !important;
    }

    .statistic-block .item .block:nth-child(6) {
        padding: 45px 0 0 27px !important;
        width: 60%;
    }

    .about-agency h2 + p {
        margin-bottom: 30px;
    }

    .hide767 {
        display: none !important;
    }

    .show767 {
        display: block;
    }

    .agency-clients .container {
        padding-top: 0;
        padding-bottom: 0;
    }

    .agency-clients .title svg{
        top: -20px;

    }

    .agency-clients .show767 {
        margin-bottom: -110px;
    }

    .about-agency .right-part {
        width: auto;
    }

    .about-agency .right-part .item svg .cls-1 {
        font-size: 40px;
    }

    .about-agency .right-part .item svg {
        left: -10px !important;
        top: -30px;
    }

    .about-agency .right-part .item {
        font-size: 15px;
        line-height: 21px;
        padding-left: 20px;
    }

    .videos .title {
        margin-bottom: 40px;
        margin-left: 15px;
    }

    .articles .container {
        padding-top: 40px;
    }

    .articles .items.tar .item + .item {
        margin-left: 0;
    }

    .about-kate .education img {
        width: 120px;
        height: auto;
        max-width: 50%;
    }

    .about-kate .education img:nth-of-type(2){
        width: 80px;
    }

    .about-kate .img {
        float: none;
    }

    .about-kate .desc {
        width: auto;
        max-width: inherit;
        margin-left: 0;
        padding-top: 25px;
    }

    .education img + img, .awards img + img, .education img, .awards img {
        margin: 0 15px 30px;
    }

    .projects .items a + a, .projects .items a {
        margin: 0 15px 30px;
    }

    .awards {
        padding-top: 30px;
    }

    .writers h3 {
        text-align: right !important;
    }

    .writers .item {
        margin-left: 215px;
    }

    .writers {
        padding-top: 30px;
    }

    .articles .container {
        padding-bottom: 0;
    }

    .videos .container {
        padding-bottom: 50px;
    }

    .about-kate .container {
        padding-bottom: 30px;
    }

    .services .title {
        margin-bottom: 60px;
    }

    .comprises .right-part > span {
        padding-left: 0;
    }

    .comprises .left-part:after {
        width: 85px;
        right: -65px;
    }

    .comprises .right-part {
        margin-left: 280px;
    }

    .services .new-title + p {
        margin-bottom: 50px;
    }

    .services .container {
        padding-top: 10px;
    }

    .comprises .container {
        padding: 50px 0;
    }

    .write-us .container {
        padding: 50px 0;
    }


    .about-kate .container {
        padding-top: 46px !important;
    }




    .contact-info .img {
        float: none;
        width: auto;
        padding-left: 0;
        margin: 0 -15px;
    }

    .contact-info .img img {
        width: 100%;
        height: auto;
    }

    .contact-info .info {
        float: none;
        width: auto;
    }

    .contact-info .container {
        position: relative;
        padding-top: 40px;
    }

    .contact-info .title {
        margin-bottom: 40px;
    }

    .contact-info .container > span {
        margin-bottom: -30px;
    }

    .brand-development .desc {
        margin-left: 0;
    }

    .brand-development .container {
        padding-top: 10px;
    }

    .brand-development .title {
        margin-bottom: -95px;
    }

    .brand-development .double-title{
        margin-bottom: -60px;
    }

    .brand-development .desc {
        max-width: inherit;
    }

    .brand-development .container {
        padding-bottom: 50px;
    }

    .services-menu br {
        display: none;
    }

    .brand-development.communications .double-title, .brand-development.marketing-consult .double-title {
        width: auto;
    }

    .brand-development.design .title {
        margin-bottom: 60px;
    }

    .respondes .item-big {
        padding-left: 0;
    }

    .respondes .item .inf {
        width: auto;
        margin-left: 0;
        padding-top: 20px;
    }

    .respondes .item .inf img {
        margin-bottom: 20px;
    }

    .respondes .item img {
        display: block;
    }

    .articles .item-big {
        width: auto;

    }

    .articles .item-big {
        margin-left: 0;
    }

    .articles .item-big .img {
        max-width: 453px;
        height: 358px;
    }

    .opinions .items.tal {
        margin-bottom: 0;
    }

    .opinions .container {
        padding-bottom: 50px;
    }

    .opinions .items:last-of-type {
        padding-bottom: 0;
    }

    .opinions-menu {
        margin: 0 0 30px;
        padding: 0 15px;
    }

    .articles.opinions .title {
        margin-bottom: -40px;
    }

    .opinions-menu {
        font-size: 21px;
        line-height: 25px;
    }

    .see-all {
        position: relative;
        display: block;
        margin-bottom: 20px;
        left: auto;
        top: auto;
    }

    .article-wrap .container {
        padding-left: 0;
    }

    .article .text {
        width: auto;
        float: none;
    }

    .text img {
        margin-bottom: 30px;
    }

    .article h1 {
        margin-bottom: 20px;
        font-size: 21px;
        line-height: 25px;
    }

    .other-news {
        width: auto;
        float: none;
        padding-top: 40px;
    }

    .top-slider .item{
        height: 480px;
    }

    .nav-container{
        width: 100%;
        margin-left: 0;
        left: 0;

    }

    .case .left-part{
        float: none;
        width: auto;
    }

    .case .right-part{
        margin-left: 0;
    }

    .case .left-part .services-slider{
        width: auto;
        margin-left: 0;
    }

    .case h1, .case .desc{
        font-size: 33px;
        line-height: 38px;
    }

    .case .desc br{
        display: none;
    }

    .works .item-big{
        width: 100%;
        display: block;

    }

    .we-create img{
        width: auto;
        height: auto;
        max-width: 100%;
    }

    .works .opinions-menu{
        padding-bottom: 0;
        line-height: 25px;
    }

    .works .item{
        margin-bottom: 15px;
    }


    .works .item-small{
        width: 48%;
    }

    .works .item-small + .item-small{
        margin-left: 4%;
    }

    .works .item span{
        font-size: 14px;
        line-height: 18px;
        padding:  0 30px 15px 15px;
    }

    .header .phone, .header .search-wrap, .header .telegram, .header .lang {
        display: none;
    }

    .brand-path span {
        display: block;
        max-width: 215px;
        margin: 0 auto;
        text-align: left;
    }

    .brand-path span + span {
        margin-top: 20px;
    }

    .clients .container .item img {
        max-width: 70%;
        width: auto;
        height: auto;
    }

    .menu {
        width: 320px;
        right: -320px;
    }

    .portfolio .item strong {
        font-size: 21px;
    }

    .contacts .adr {
        margin-right: 65px;
    }

    .hide-block {
        display: block;
        padding-bottom: 20px;
    }

    .hide-block a + a {
        margin-top: 15px;
    }

    .statistic-block .clr {
        display: none;
    }

    .statistic-block .container {
        padding-bottom: 30px;
    }

    .writers h3 {
        font-size: 21px;
    }

    .writers .block50 {
        width: 290px;
        float: none;
        margin: 0 auto;
    }

    .writers .block50 + .block50 {
        margin-top: 20px;
    }

    .writers h3 {
        width: 145px;
    }

    .writers .item {
        margin-left: 165px;
    }

    .writers .clr {
        padding-bottom: 20px;
    }

    .comprises .left-part:after {
        display: none;
    }

    .comprises .right-part {
        max-width: 210px;
        margin: 0 auto;
    }

    .comprises .item a {
        font-size: 21px;
        line-height: 25px;
    }

    .comprises .container {
        position: relative;
        padding-top: 65px;
    }

    .comprises .right-part > span {
        position: absolute;
        top: 50px;
        left: 0;
        width: 100%;
        text-align: center;
    }

    .comprises .left-part {
        float: none;
        max-width: 210px;
        margin: 0 auto 20px;
        font-size: 21px;
        display: block;
        line-height: 25px;
        border-bottom: 1px solid #000;
    }

    .write-us span {
        font-size: 21px;
        line-height: 25px;
    }

    .services .new-title + p {
        font-size: 21px;
        line-height: 25px;
        max-width: 295px;
        margin: 0 auto 50px;
    }

    .services .container {
        padding-top: 0;
        padding-bottom: 50px !important;
    }

    .services .new-title + p br, .services .brand-path + p br {
        display: none;
    }

    .case .left-part .services-slider {
        margin: 0 -15px;

    }


    .services-slider img {
        width: 100%;
        max-width: inherit;
    }

    .development-services span {
        font-size: 21px;
        line-height: 25px;
        margin-bottom: 20px;
    }

    .services-list a, .services-menu a {
        font-size: 18px;
        margin: 0 15px 5px;
        line-height: 24px;
    }

    .communications .title .cls-1, .communications .title .cls-3 {
        font-size: 50px !important;
    }

    .article img {
        width: 100%;
        height: auto;

    }

    .article .vi img{
        width: 30px;
    }

    .article .img {
        margin-left: -15px;
        margin-right: -15px;
    }

    .works .items{
        margin: 0 -15px;
    }

    .map span{
        font-size: 18px;
        left: 20px;
        top: 15px;
        line-height: 18px;
    }

    .map span img{
        width: 16px;
    }

    .title .cls-1, .title .cls-3 {
        font-size: 44px !important;
        stroke-width: 0.5px !important;
    }


    .flex-container{
        display: flex;
        flex-wrap: wrap;
        padding-bottom: 35px;
    }

    .contact-info .flex-container span{
        width: 100%;
        order: 2;
        font-size: 21px;
        line-height: 28px;
    }

    .flex-container .title{
        order: 1;
        width: 100%;
        margin-bottom: -10px;
    }

    .contact-info .container{
        padding-top: 0;
    }

    .new-title{
        margin-left: 0 !important;
    }


    .portfolio + .clients .container{
        padding-top: 0;
    }

    .t2 {
        max-width: 240px;
        position: relative;
        left: 20px;
        bottom: 0;
        z-index: 3;
    }

    .t3{
        max-width: 189px;
        margin-left: 0;
    }

    .t5{
        max-width: 220px;
        margin-left: 0;
        margin-top: 0;
        margin-bottom: 0;
        position: relative;
        top: 15px;
    }


    .t6{
        max-width: 354px;
    }

    .t7{
        max-width: 345px;
        margin-left: 15px !important;
    }

    .t1{
        max-width: 167px;
    }

    .t4{
        max-width: 351px;
    }

    .contacts .container{
        padding-bottom: 50px;
    }

    .t10{
        max-width: 228px;
        margin-bottom: 30px;
    }

    .t9{
        max-width: 202px;
        margin-bottom: 30px;
    }

    .t8{
        max-width: 416px;
    }

    .t13{
        max-width: 390px;
        margin: 0 auto 30px !important;
    }


    .t11{
        max-width: 404px;
        margin: 0 auto 30px;
    }


    .t12{
        max-width: 403px;
        margin: 0 auto 30px;
    }


    .t14{
        max-width: 225px;
        margin-left: 15px !important;
    }

    .articles .t6{
        margin-left: 15px !important;
    }

    .videos .container{
        padding-top: 40px;
    }

    .contact-info .t5{
        margin-bottom: 0;
    }

    .services .container{
        padding-top: 40px !important;
    }

    .brand-development .container, .works .container, .about-agency .container{
        padding-top: 40px !important;
    }


    .portfolio .inner {
        display: flex;
        flex-wrap: wrap;
        margin: 0;
        justify-content: space-between;
    }

    .portfolio .container {
        max-width: 464px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .portfolio .item {
        display: block;
        margin: 0;
        position: relative;
        vertical-align: top;
        overflow: hidden;
        margin-bottom: 20px;
    }

    .portfolio .single-item {
        width: calc(50% - 10px);
        height: auto;
    }

    .portfolio .item img {
        display: block;
        max-width: 100%;
    }

    .portfolio .triple-item img {
        max-width: calc(100% + 200px);
        margin-right: -100px;
        margin-left: -100px;
    }

    .portfolio .item.it1,
    .portfolio .item.it2 {
        order: -2;
    }

    .portfolio .item.it4 {
        order: -1;
    }

    .portfolio .item strong.top {
        bottom: 20px;
        top: auto;
    }

    .header .container {
        padding: 16px 0;
    }

    .header .logo img {
        max-width: 160px;
    }

    .header .right-part {
        padding-top: 2px;
    }

    .contacts {
        background: url(../images/contacts-bg-mob.jpg) no-repeat center center;
        background-size: cover;
    }

    body .works .t2 {
        max-width: 228px;
        position: relative;
        left: 0;
        bottom: 0;
    }




}

@media (max-width: 540px) {
    .articles .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .articles .item img, .articles .item.item-small img {
        width: 100%;
        height: auto;
        max-width: inherit;
        display: block;
    }

    .articles .item .img, .articles .item.item-small .img {
        width: auto;
        height: auto;
        display: block;
        max-width: inherit;
    }

    .articles .item {
        width: auto;
        display: block;
    }

    .articles .item + .item {
        margin-left: 0;
    }

    .articles .item {
        padding-bottom: 0;
        margin-bottom: 0;
        position: relative;
    }

    .tags {
        bottom: 105px;

    }

    .articles .item .date {
        position: absolute;
        left: 10px;
        top: auto;
        bottom: 95px;
        z-index: 100;
    }

    .articles .item .name {
        min-height: 70px;
    }

    .articles .double-title {
        margin-left: 15px;
    }

    .articles .items .item:last-of-type .date {
        margin-left: 0;
    }

    .brand-development .container {
        padding-top: 0;
    }

    .arr{
        top: 130px;
        margin-top: 0;
        line-height: 20px;

    }

    .arr.prev{
        left: 0;
        width: 125px;
        text-align: left;
        padding-left: 25px;
    }

    .arr.next{
        right: 0;
        width: 110px;
        padding-right: 15px;
        text-align: left;
    }

    .arr.prev:before, .arr.next:after{
        display: block;
        position: absolute;
        top: 3px;
    }

    .arr.next:after{
        right: 0;
    }

    .arr.prev:before{
        left: 0;
    }

    .top-slider .item{
        height: 220px;

    }

    .title .cls-1, .title .cls-3 {
        font-size: 44px !important;
    }

    .about-us h2 + p{
        font-size: 19px;
        line-height: 22px;
        max-width: 280px;
        margin: 0 auto 35px;
    }

    .about-us h2 + p br{
        display: none;
    }
}

@media (max-width: 479px) {

    .contacts .item {
        max-width: 240px;
        margin: 0 auto;
        float: none;
    }

    .contacts .item + .item {
        margin-top: 40px;
    }

    .title .cls-1, .title .cls-3 {
        font-size: 44px !important;
    }

    .contacts {
        min-height: inherit;
        padding-bottom: 40px;
    }

    .portfolio .title {
        min-height: 85px !important;
    }

    .about-us .container {
        padding-bottom: 20px;
    }

    .popup {
        width: 290px;
    }

    .about-agency .container {
        padding-bottom: 50px;
    }

    .agency-clients .container {
        padding-top: 10px;
    }

    .about-kate .container {
        padding-top: 0;
    }

    .about-kate .img {
        margin: 0 -15px;
    }

    .brand-development .double-title svg {
        left: -10px;
    }

    .communications .title .cls-1, .communications .title .cls-3 {
        font-size: 34px !important;
    }

    .articles.opinions .title {
        margin-bottom: -55px;
    }


}


@media (max-width: 639px) {

    .projects-2 .projects-list .item {
        width: 100%;
    }

}