/*ПК-ВЕРСИЯ*/
@media(min-width:1050px) {
    .header-mobile{
        display: none;
    }
    .mobile-img-baner{
        display: none;
    }
    

}
/*БОЛЬШОЙ ПЛАНШЕТ*/
@media(max-width:1200px) {
    body>section, body>div,.wrapper{
        width: 90%;
    }
    .icon-map-marker.flex.align-center{
        display: none;
    }
    /*3 колонки*/
    #advantages ul li{
        display: grid;
        align-items: end;
        justify-items: start;
    }
    /*О нас*/
    #about{
        grid-template-columns: 1fr 380px;
    }
    #about::before{
        bottom: 0;
    }
    /*Услуги*/
    #services .servic-list{
        grid-template-columns: 1fr 1fr;
    }
    /*Работа*/
    #worck {
        grid-template-columns: 1fr;
    }
    .proccess-list {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
    }
    /*прогресс*/
    .experiance-block {
        grid-template-columns: 1fr;
    }
    /*Отзывы*/
    .wslider-inner {
        grid-template-columns: 1fr 1fr;
        height: 390px;
        overflow: hidden;
    }
    /*Акцентный*/
    #book .two-columns {
        grid-template-columns: 1fr 325px;
    }
    /*Блог*/
    #blog .two-columns {
        grid-template-columns: 1fr;
    }
    /*Контакты*/
    #contacts{
        grid-template-columns: 1fr;
        gap: 30px;
    }
    #contacts>section{
        width: 100%;
    }
   .contact-list{
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        align-items: start;
   }
   .footer-nav-block,
   .footer-adres-block{
       margin-left: 30px;
   }
    #footer>section{
    display: grid;
    grid-template-columns: 2fr 1fr 2fr;;
    }
}














/*МАЛЕНЬКИЙ ПЛАНШЕТ*/
@media(max-width:1050px) {
    body>section, body>div,.wrapper{
        width: 90%;
    }


    /*ШАПКА*/
    .header-top,.header-main.fly{
        display: none;
    }
    .fly{
        top: 0;
    }
    .mobile-tel::before {
        content: "";
        display: inline-block;
        width: 30px;
        height: 30px;
        background-image: url('../img/icon-header-phone.svg');
        background-color: #FA0026;
        border-radius: 50%;
        background-position: center;
        background-repeat: no-repeat;
        background-size: 18px;
        margin-right: 12px;
    }
    .time-mobile::before, .adres-mobile::before{
        content: "";
        display: inline-block;
        width: 18px;
        height: 18px;
        margin-right: 18px;
        background-position: center;
        background-size: contain;
        background-repeat: no-repeat;
    }
    .time-mobile::before{
        background-image: url('../img/icon-clock.svg');
    }
    .adres-mobile::before{
        background-image: url('../img/icon-map-marker.svg');
    }
    .mobile-menu{
        background-color: #fff;
        width: 80vw;
        padding: 20px 40px 40px 50px;
        position: absolute;
        z-index: 5;
        top: 0;
        left: -1000%;
    }
    .close-mobile-menu{
        position: absolute;
        top: 30px;
        left: 85vw;
        width: 20px;
        background-color: #fff;
        height: 20px;
        border: none;
        background-image: url('../img/close-mobile-menu.svg');
        background-size: cover;
        background-repeat: no-repeat;
    }
    .mobile-menu img{
        width: 30vw;
        height: auto;
        margin-bottom: 30px;
    }
    .mobile-menu .nav-mobile{
        list-style: circle;
        margin-left: 20px;
    }
    .mobile-menu .nav-mobile li{
        margin-bottom: 20px;
    }
    .mobile-adres{
        margin-top: 50px;
        margin-bottom: 35px;
    }
    .mobile-adres li {
        margin-bottom: 20px;
    }
    .mobile-tel{
        background-color: #F3F3F3;
        font-weight: 600;
        padding: 10px ;
        border-radius: 30px;
        display: inline-flex;
        align-items: center;
    }
    .mobile-menu .active{
        color: red;
    }
    .mobile-menu .social-icon-list{
        margin-top: 30px;
        display: block;
    }
    .mobile-menu .social-icon-list li {
        display: inline-block;
    }
    .mobile-menu .social-icon::before{
        width: 30px;
        height: 30px;
    }
    .mobile-menu .instagram::before {
        background-image: url('../img/b-Instagram.svg');
    }
    .mobile-menu .fasebook::before {
        background-image: url('../img/b-Facebook.svg');
    }
    .mobile-menu .twitter::before {
        background-image: url('../img/b-Twitter.svg');
    }
    .mobile-menu .linkedin::before {
        background-image: url('../img/b-Linked-In.svg');
    }
    .header-mobile{
        background-color: #fff;
        border-bottom: 1px solid lightgrey;
        padding: 11px 0;
        position: fixed;
        z-index: 3;
        width: 100%;
        top: 0;
    }
    .header-mobile>div {
        width: 90%;
        margin: 0 auto;
        position: relative;
    }
    .header-mobile>div>img{
        width: 20vh;
        height: auto;
    }
    .language-selection{
        font-size: 14px;
        margin-right: 45px;
    }
    .language-list li {
        padding: 9px 24px 9px 24px;
    }
    .header-mobile .language-selection{
        margin-left: auto;
    }
    .header-mobile .language-name{
        transform: translate(-50%, -50%);
    }
    .header-mobile .language-selection::after{
        background-color: #fff;
    }
    .header-mobile .language-name::after{
        background-image:url('../img/icon-lang-after-mobile.svg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 8px;
    }  
    .header-mobile>img{
        width: 40%;
    }
    .burger-menu{
        width: 32px;
        height: 32px;
        background-image: url('../img/burger.svg');
        background-size: contain;
        background-repeat: no-repeat;
        background-color: #fff;
        border: none;
    }
    .close{
        left: -10%;
        transition-duration: 0.3s;
    }


    /*Банер*/
    #baner>section>div {
        width: 545px;
        background-color: #011933ba;
        position: relative;
        z-index: 1;
        outline: #011933ba;
    }
    .banner-image {
        height: 87%;
        width: 95%;
    }

    /*ТРИ КОЛОНКИ*/
    .three-columns {
        grid-template-columns: 1fr;
    }
    #advantages ul li{
        padding: 115px 40px 30px 40px;
    }
    #advantages ul li:nth-child(1){
        background-position: 0 -280px;
    }
    #advantages ul li:nth-child(2),
    #advantages ul li:nth-child(3) {
        background-position: 0 -222px;
    }




    /*О НАС*/
    #about {
        grid-template-columns: 1fr;
        gap: 50px;
    }
    #about::before {
        display: none;
    }
    #about img {
        order: -1;
    }

    /*Услуги*/
    #services .servic-list {
        grid-template-columns: 1fr;
    }

    /*ПРОГРЕСС*/
    .proccess-list {
        grid-template-columns: 1fr;
    }

    /*Отзывы*/
    .wslider-inner {
        grid-template-columns: 1fr;
        height: 350px;
    }

    /*Акцентный*/
    #book>div::before{
        display: none;
    }
    #book{
        grid-template-columns: 1fr;
        gap: 50px;
        padding: 45px 40px;
    }
    #book>div{
        order:-1;
        height: auto;
    }

    /*Блог*/
    #blog header{
        flex-direction: column;
    }

    /*Контакты*/
    .contact-list {
        grid-template-columns: 1fr;
    }

    /*Футер*/
    #footer>section {
        display: grid;
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .footer-logo-block {
        border-right: 0px;
    }

}




















/*МОБИЛЬНАЯ ВЕРСИЯ*/
@media(max-width:560px) {
    body>section, body>div,.wrapper{
        width: 90%;
    }
    img{
        max-width: 100%;
        height: auto;
        object-fit: cover;
    }
    h2, h2 span, .js-title {
        font-size: 22px;
        font-weight: 400;
        line-height: 24px;
    }
    h3, h3 span, .service-sub-title {
        font-family: 'Charter';
        font-size: 16px;
        font-weight: 700;
        line-height: 18.56px;
    }
    p, .js-descript{
        font-size: 12px;
        line-height: 16.8px;
    }
    .blue-title{
        font-size: 10px;
        font-weight: 400;
        line-height: 14px;
        letter-spacing: 0.14em;
    }
    .br-pc{
        display: none;
    }
    .none-mobile{
        display: none;
    }
    /*ШАПКА*/
    .mobile-menu img{
        width: 38vw;
        height: auto;
        margin-bottom: 30px;
    }
    
    /*БАНЕР*/
    #baner{
        height: auto;
        margin-top: 67px;
    }
    .banner-image {
        display: none;
    }
    #baner>section>div{
        width: auto;
        padding: 30px 0 60px 0;
        background-color: #01193300;
        margin-top: 15px;
        outline: 0;
    }
    #baner::before{
        bottom: 60px;
        background-size: 150px;
    }
    .mobile-img-baner{
        display: block;
        position: relative;
        order: -1;
        width: 100%;
        height: auto;
    }
    #baner h1 {
        font-weight: 400;
        font-size: 24px;
        line-height: 26.4px;
        margin-bottom: 15px;
    }
    #baner>section>div>p{
        font-weight: 400;
        font-size: 12px;
        line-height: 16.8px;
    }
    .button-baner{
        font-weight: 600;
        font-size: 14px;
        line-height: 22.4px;
    }
    .button-baner::before{
        width: 30px;
        height: 30px;
        background-size: 20px;
    }
    .naming{
        font-size: 14px !important;
    }
    .cite{
        font-size: 12px !important;
    }

    /*ТРИ КОЛОНКИ*/
    #advantages ul{
        margin-top: 40px;
    }
    .three-columns{
        grid-template-columns: 1fr;
    }
    #advantages ul li {
        padding: 180px 45px 30px 45px;
        background-position: center;
    }
    #advantages ul li:nth-child(3){
        background-position: center;
    }
    .three-descript{
        font-size: 12px;
    }
    .advantages-list button{
        font-size: 14px;
        font-weight: 600;
        line-height: 10px;
        height: 42px;
    }
    #advantages ul li:nth-child(3){
        background-size: cover;
    }
    #advantages ul li:nth-child(1), #advantages ul li:nth-child(2){
        background-position: top;
    }




    /*О НАС*/
    #about{
        grid-template-columns: 1fr;
        padding-top: 60px;
        margin-bottom: 60px;
    }       
    #about::before{
        left: 0;
    }
    #about img{
        order: -1;
        width: 80%;
        margin-left: auto;
    }
    #about::before{
        width: 150px;
        height: 150px;
        top: 58vw;
        background-size: contain;
    }
    .dl-ka {
        display: flex;
        gap: 5%;
    }
    #about dl{
        width: 45%;
        margin: 40px 0;
        text-align: center;
    }
    #about dt{
        font-size: 24px;
        font-weight: 600;
        line-height: 26px;
    }
    #about dd{
        font-size: 12px;
        font-weight: 500;
        line-height: 17px;
    }
    #about button{
        font-size: 14px;
        font-weight: 600;
        line-height: 13px;
        height: 42px;
    }
    #about dl:first-child{
        margin-right: 0;
    }
    /*УСЛУГИ*/
    #services {
        padding: 60px 0;
    }
    .servic-list li::before{
        margin-bottom: 10px;
    }
    .servic-list li{
        padding: 30px;
    }
    .more{
        font-size:12px;
        padding: 12px 30px 12px 30px;
    }
    /*РАБОТА*/
    #worck{
        grid-template-columns: 1fr;
        padding-top: 60px;
        gap: 40px;
    }
    .two-columns {
        grid-template-columns: 1fr;
    }
    .proccess-list li{
        grid-template-columns: 38px 1fr;
    }
    .proccess-list li::before{
        width: 38px;
        height: 38px;
        font-size: 22px;
        font-weight: 600;
        line-height: 26px;
    }
    .growing-list li::before {
        width: 42px;
        height: 42px;
        background-position: center;
        background-size: 100%;
        background-repeat: no-repeat;
        margin-bottom: 10px;
    }
    .growing-list h3{
        font-size: 18px;
        font-weight: 700;
        line-height: 21px;
    }
    /*ПРОГРЕСС*/
    #experiance{
        margin-top: 60px;
        padding: 60px 0;
    }
    .experiance-block{
        grid-template-columns: 1fr;
    }
    .proccess-list{
        width: 100%;
        grid-template-columns: 1fr;
    }
    #experiance::before, #experiance::after {
        display: none;
    }
    #proccess h3{
        font-size: 18px;
        font-weight: 700;
        line-height: 21px;
    }
    #experiance>section>div>p{
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        margin-top: 10px;
    }
    #experiance dt{
        font-size: 32px;
        font-weight: 500;
        line-height: 37px;
    }
    #experiance dd{
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
    }
    /*ОТЗЫВЫ*/
    #reviews{
        padding-top: 60px;
    }
    .wslider-inner{
        grid-template-columns: 1fr;
        height: 300px;
        overflow: hidden;
    }
    .reviews-list li{
        height: 300px;
    }
    .author-reviews cite{
        font-size: 16px;
        font-weight: 400;
        line-height: 19px;
    }
    .author-reviews::before {
        width: 62px;
        height: 62px;
        background-size: cover;
    }
    .reviews-list li {
        padding: 20px;
    }
    #reviews blockquote{
        padding: 20px;
        font-family: Lato;
        font-size: 12px;
        font-weight: 400;
        line-height: 17px;
    }
    #reviews blockquote::after {
        width: 38px;
        height: 38px;
        background-size: 16px;
    }
    .wslider-arrow{
        width: auto;
        background-color: #fff;
        border: 1px solid #C1C1C1;
    }
    
    .wslider-arrow.next::before{
        margin-right: 0;
        background-color: #fff;
        border: none;
        background-image: url('../img/arrow.svg');
        transform: rotate(0deg);
    }
    .wslider-arrow.prev::after{
        margin-left: 0;
        background-color: #fff;
        border: none;
        background-image: url('../img/arrow.svg');
        transform: rotate(180deg);
    }
    .wslider-arrow.next:hover::before, 
    .wslider-arrow:hover.prev::after {
        background-color: #FA0026;
        background-image: url('../img/arrow-active.svg');
    }
    .wslider-arrow.next:hover::before{
        transform: rotate(180deg);
    }
    .wslider-arrow:hover.prev::after{
        transform: rotate(0deg);
    }
    .wslider-arrow.next {
        left: 30%;
        padding-right: 8px;
    }
    .wslider-arrow.prev {
        right: 30%;
        padding-left: 8px;
    }
    /*АКЦЕНТНЫЙ БЛОК*/
    #book{
        padding: 40px 30px;
        margin-top: 60px;
        margin-bottom:60px;
    }
    #book>div{
        height: auto;
    }
    #book>div>img{
        width: 87%;
    }
    #book>div::before{
        width: 200px;
        height: 200px;
        top: -40px;
    }

    #book section a::before{
        background-size: 20px;
    }
    #book section a{
        font-size: 14px;
        font-weight: 600;
    }
    #book section p {
        margin-top: 15px;
    }
    /*БЛОГ*/
    #blog{
        padding: 60px 0;
    }
    .blog-link{
        position: absolute;
        top: -44px;
        right: 0%;
        font-size: 14px;
        font-weight: 600;
        line-height: 12px;
        height: 42px;
        margin-top: 0px;
    }
    #blog .flex{
        flex-direction:column;
        position: relative;
    }
    #blog .flex h2 {
        margin-top: 20px;
    }
    .blog-list li article>img {
        margin: 20px 0 28px 0;
    }
    
    #blog h3{
        font-size: 16px;
        font-weight: 500;
        line-height: 19px;
    }
    .article-info{
        margin-top: 15px;
    }
    .author-photo {
        width: 38px;
        height: 38px;
    }
    .author-name{
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
        margin-right: 35px;
    }

    .article-info.flex.align-center {
        display: grid;
        grid-template-columns: 15% 1fr 1fr;
    }
    .article-link{
        grid-column: 2 span;
        margin-left: 0;
        margin-right: auto;
        margin-top: 20px;
        font-size: 14px;
        font-weight: 600;
        line-height: 13px;
        height: 42px;
    }
    time{
        font-size: 12px;
        font-weight: 400;
        line-height: 18px;
    }
    /*КОНТАКТЫ*/
    #contacts{
        grid-template-columns: 1fr;
        padding-top: 60px;
        gap: 60px;
    }
    .contact-info{
        font-size: 16px;
        font-weight: 600;
        line-height: 18px;
    }
    .contact-list li:not(:last-child) {
        margin-bottom: 35px;
    }
    .contact-list {
        grid-template-columns: 1fr;
    }

    #contacts .grid.two-columns.form_box {
        display: block;
        width: 95%;
    }
    input, textarea{
        margin-bottom: 20px;
    }
    #contacts>section{
        width: 90%;
    }
    /*ФУТЕР*/
    footer {
        margin-top: 60px;
    }
    .footer-logo-block img{
        width: 80%;
    }
    #footer .flex{
        display: flex;
        flex-direction:column;
    }
    .footer-nav-list li {
        margin-bottom: 4px;
        font-size: 16px;
        font-weight: 400;
        line-height: 22px;
        margin-bottom: 12px;
    }
    .footer-adres-list{
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
    }
    .footer-logo-block{
        border-right: none;
        border-bottom: 1px solid #707070;
        padding-bottom: 20px;
        margin-bottom: 40px;
        width: 90%;
    }
    .footer-nav-block{
        margin-left: 0;
    }
    .footer-adres-block{
        margin-left: 0;
        margin-top:40px;
    }
    .footer-adres-block button{
        margin-top: 20px;
        font-size: 14px;
        font-weight: 600;
        line-height: 22px;
    }
    /*МОДАЛЬНОЕ ОКНО*/
    .modal-box{
        max-width: 90%;
        height: auto;
        padding:30px;
    }
    .modal-form input{
        max-width: 100%;
    }
    .modal-button-submit{
        margin-right: 0;
    }
    .modal-one-row {
        gap: 0px;
        flex-direction: column;
    }
    .modal-box h2{
        padding-right: 60px;
        font-size: 18px;
        line-height: 20px;
    }
    .modal-close-button{
        top: 15px;
        right: 15px;
    }
    .modal-form label{
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }
    .modal-form input::placeholder, .modal-form textarea::placeholder{
        font-size: 14px;
    }
    .modal-form input{
        margin-bottom: 10px;
    }
    .modal-button-submit{
        margin-top: 0;
    }

    #aboutimg::before {
        width: 50vw;
        height: 50vw;
        background-size: contain;
        top: 23vw;
        left: 40vw;
    }
}