.m20 {margin-bottom: 20px;}
.ms-item {width: calc(20% - 20px);}
    .ms-item img {width: 100%; border-radius: 20px;}
.bannerHeader {padding-top: 35px;}
.titleProject {color:#fff; font-size: 34px; margin-bottom: 25px; text-transform: uppercase; font-weight: bolder; font-family: 'Roboto', sans-serif;}
.paramProject {color:#fff; font-size: 20px; line-height: 28px; font-weight: bolder; font-family: 'Roboto', sans-serif;}  

.titleBlock {font-size: 30px; color:#000; line-height: 35px; margin-bottom: 20px; text-transform: uppercase; font-family: "Proxima Nova Rg", 'Roboto'; font-weight: bolder;}
.titleBlock.white, .textBlock.white {color:#fff;}
.textBlock {font-size: 18px; color:#000; line-height: 25px;}
.textBlock ul {
    color: #1E1E1C;
    font-family: "Proxima Nova Rg", sans-serif;
    font-size: 16px;
    line-height: 25px;
    margin: 0 0 32px 20px;
}
.link_project {font-size: 28px; line-height: 36px; font-weight: 600; margin: 20px 0 50px; color:#000;}
    .link_project a { color:#000;}

.grey-bg {background: #E5E5E5;}
.lh25 {line-height: 21px;}
.hr_line_p {background: url('../img/hr_line_p.png') no-repeat center center; background-size: contain; margin: 0 auto; height: 120px;}
 .projectForm {padding: 0 0 30px; }
    .projectForm .btn-yell-block {padding: 25px 0 0 66px; position: relative; display: inline-block; margin: 0 auto 30px auto;}
    .projectForm .btn-yell-block:before {display: block; position: absolute; top: 0; left: 0; background: url('../img/yellow-arr.png') no-repeat 0 0; width: 48px; height: 66px; content: " ";}
    .projectForm .btn-yell-block .btn-yell {
        border: none;
        height: 46px;
        line-height: 46px;
        cursor: pointer;
        background-color: #FFF040;
        text-align: center!important;
        -moz-border-radius: 30px;
        -webkit-border-radius: 30px;
        border-radius: 30px;
        font-size: 18px;
        color: #000;
        padding-left: 20px!important;
        padding-right: 20px!important;
        transition: 0.3s;
        width: auto;
        min-width: 180px;
        display: inline-block;
        white-space: nowrap;
        text-decoration: none;
    }
    .projectForm .btn-yell-block .btn-yell:hover {background-color: #000; color: #fff;} 
    
.bannerHeader #breadcrumb.innerPage,.bannerHeader #breadcrumb.innerPage a{color:#fff;}
.bannerHeader #breadcrumb.innerPage a:after {fill: #fff; mix-blend-mode: normal; filter: invert(5);}

.project-param {
    display: grid;
    text-align: center;
    gap: 20px 0;
}

@media (min-width: 480px){
    .project-param {
       grid-template-columns: repeat(3, 33.33%); 
    }
}
@media (min-width: 768px){
    .link_project {font-size: 36px; font-weight: 600; margin: 40px 0 90px; color:#000;}
}
@media (min-width: 992px){
    .bannerHeader {padding-top:115px;}
    .titleProject {color:#fff; font-size: 48px; margin-bottom: 55px; text-transform: uppercase; font-weight: bolder; font-family: 'Roboto', sans-serif;}
   .project-param {
        display: grid;
        grid-template-rows: inheirit;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 0;
    } 
        .paramProject {color:#fff; font-size: 36px; line-height: 42px; font-weight: bolder; font-family: 'Roboto', sans-serif;}  
}

    #teamFace {
        text-align: center;
        margin-bottom: 30px;
    }
    #pictFace {
        background: #1E1E1C;      
        border-radius: 50%;
        height: 220px;
        width: 220px;
        align-items: end;
        justify-content: center;
        display: flex;
        overflow: hidden;
        position: relative;
        margin: 0 auto 20px auto;
    }
    #pictFace img {       
        width: 200px;    
        aspect-ratio: 1/1;      
        position: absolute;
        bottom: 0;
        margin-left: -100px;
    }
    
    #infoFace .fio, #infoFace .fio a {
        font-size: 28px;
        font-weight: 600;
        padding-bottom: 10px;
        position: relative;
        margin: 0 0 15px 0;
        color: #000;          
        text-decoration: none;   
    }
    #infoFace .fio:after {
        height: 1px;  
        background: #bbb;
        width: 100%;
        height: 1px;
        content: " ";
        bottom: 0;
        position: absolute;
        left: 0;
    }
    #infoFace .labelSpec {
        color: #bbb;
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 6px;
    } 
    #infoFace .specialnost {
        color: #000;
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 20px;
        font-weight: 550;
    } 
    #infoFace .face-btn {
        justify-content: center;
    }
@media (min-width: 768px){
    #teamFace {
        display: grid;
        grid-template-columns: 220px auto;
        gap: 0 35px;
        align-items: center;
        text-align: left;
    }
    #pictFace {
        background: #1E1E1C;      
        border-radius: 50%;
        height: 220px;
        align-items: end;
        justify-content: center;
        display: flex;
        overflow: hidden;
        position: relative;
    }
    #pictFace img {       
        width: 200px;    
        aspect-ratio: 1/1;   
        position: absolute;
        bottom: 0;
        margin-left: -100px;
    }
    
    #infoFace .fio, #infoFace .fio a {
        font-size: 28px;
        font-weight: 600;
        padding-bottom: 10px;
        position: relative;
        margin: 0 0 15px 0;
        color: #000;          
        text-decoration: none;   
    }
    #infoFace .fio:after {
        height: 1px;  
        background: #bbb;
        width: 100%;
        height: 1px;
        content: " ";
        bottom: 0;
        position: absolute;
        left: 0;
    }
    #infoFace .labelSpec {
        color: #bbb;
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 6px;
    } 
    #infoFace .specialnost {
        color: #000;
        font-size: 16px;
        line-height: 20px;
        margin-bottom: 20px;
        font-weight: 550;
    } 
    #infoFace .face-btn {
        justify-content: start;
    }
}

/*OLD style*/
#banner-develop-parent {
    background: url(../img/develop_fon.png) no-repeat center top;
    background-size: cover;
    padding: 3.75rem 0;
    font-family: "Mont";
}

/*новый баннер*/
.projectHeader {
    min-height: 390px;
    height: 50vh;     
    position: relative;
    overflow: hidden;    
    width: 100%;
    display: grid;    
}

.infoProject {
    position: relative;
    margin: 0 40px;
    max-width: 550px;
    display: grid;
    align-items: center;
}

.imageContainer {
    width: 80%;
    height: 100%;
    display: grid;
    position: absolute;
    box-sizing: border-box;
    z-index: 0;
    vertical-align: middle;
    align-items: center;
    left: 10%;           
    overflow: hidden;
}

.imageProject {
    z-index: 0;
    opacity: 0.4;
    background-size: cover;
    background-position: center center;
    position: absolute;
    width: 100%;  
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    text-align: end;
    -webkit-text-size-adjust: 100%;
}
  
.imageProject img {
    border-radius: 0px 0px 0px 0px;
    object-position: center center;
    object-fit: fill;
    max-height: 100%;
    width: 100%;
   /* width: auto;        
    border-radius: 0px 0px 0px 0px;
    object-position: center center;
    object-fit: cover;
    max-height: 320px;   */
} 

.textProject {
    display: table;    
    max-width: 300px;  
    justify-content: center;
    align-items: stretch;    
    color:#fff;
    position: relative;
    z-index: 3;
}
.beforeTXT {
    font-size: 12px;
    line-height: 24px;
    font-weight: normal; 
}
.largeTXT {
    font-size: 32px;
    line-height: 36px;
    font-weight: bolder;
}
.afterTXT {
    font-size: 16px;
    line-height: 26px; 
    font-weight: normal;
}
.afterTXT a {
    color:#fff;
    text-underline-offset: 4px;
}
.afterTXT a:hover {
    color:#fff;
    text-decoration: none;
}


@media (min-width: 667px) {
    .projectHeader {
        min-height: 430px;
    }
    .imageProject {
        text-align: end;
        opacity: 1;
    }
    .imageProject img {
        max-height: 350px;
    }
    .textProject {
        display: grid;
        gap: 20px 0;
    }
    .beforeTXT {
        white-space: nowrap;   
    }
    .largeTXT {
        max-width: 350px;
    }
}

@media (min-width: 768px) {
    .projectHeader {
        min-height: 430px;
        height: 50vh;
    }
        
    .imageProject {
        z-index: 0;
        opacity: 1;
        position: relative;
        justify-content: end;
        display: grid;
    }
    
    .infoProject {
        width: 80%;
        max-width: 620px;
        margin: auto;
    }
}

@media (min-width: 992px) {
    .projectHeader {
        min-height: 400px;
        height: 50vh;
    }
    .imageProject img {
        max-height: 405px;
    }
    .infoProject {
        max-width: 90%;
    }
    .textProject {
        display: flex;
        flex-direction: column;
        gap: 20px 0;
        justify-content: center;
        align-items: stretch;    
        color:#fff;   
        max-width: 540px;     
    }
    
    .beforeTXT {
        font-size: 16px;
        line-height: 16px;
        font-weight: normal;
    }
    .largeTXT {
        font-size: 36px;
        line-height: 44px;
        font-weight: bolder;
        max-width: 430px;
    }
    .afterTXT {
        font-size: 18px;
        line-height: 29px; 
        font-weight: normal;
    }
}

@media (min-width: 1200px) {  
    .projectHeader {
        min-height: 480px;
        height: 50vh;
    }
    .imageContainer {
        width: 60%;
        left: 30%;
    }
    .imageProject img {
        max-height: 390px;
    }
    .infoProject {
        width: 100%;
        max-width: auto;
    }
    .largeTXT {
        max-width: 600px;
    }
}
@media (min-width: 1400px) {
    .projectHeader {
        min-height: 500px;
        height: calc(56vh - 161px);
    }

    .textProject {
        display: flex;
        flex-direction: column;
        gap: 50px 0;
        justify-content: center;
        align-items: stretch;  
       /* height: 75vh;  */
        color:#fff;
        max-width: 600px;
    }

    .imageProject {
        z-index: 0;
        opacity: 1;  
        position: relative; 
        width: 100%;  
    }    
    .imageContainer {
        width: 60%;
        height: 100%;
        display: grid;
        position: absolute;
        box-sizing: border-box;
        z-index: 0;
        vertical-align: middle;
        align-items: center;
        left: 20%;
        overflow: hidden;
    }
    
    .imageProject img {
        height: 100%;
        max-height: 420px;
    }
    
    .infoProject {
        position: relative;
        display: grid;
        gap: 0 120px;
        /*grid-template-columns: minmax(600px, min-content) auto;  */
        margin: 0 auto;
        max-width: 1180px;
    }
    
    .beforeTXT {
        font-size: 18px;
        line-height: 24px;
        font-weight: normal;
    }
    .largeTXT {
        font-size: 45px;
        line-height: 56px;
        font-weight: bolder;
        max-width: 100%;
    }
    .afterTXT {
        font-size: 20px;
        line-height: 30px; 
        font-weight: normal;
    }
}