.c-hamburger span {
    display: block;
    position: absolute;
    top: 14px;
    left: 0px;
    height: 2px; 
    width: 100%;
    background: linear-gradient(-47deg, #017AE8 0%, #42E6DE 66%);
    
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
}
 
.c-hamburger span::before,
.c-hamburger span::after {
    position: absolute;
    display: block;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(-47deg, #017AE8 0%, #42E6DE 66%);;
    content: " ";
    
    
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;    
}
 
.c-hamburger span::before {
    top: -10px;
}
 
.c-hamburger span::after {
  bottom: -10px;
}
.c-hamburger--htx {
  background-color: #E5088700;
}
 
.c-hamburger--htx span {
  transition: background 0s 0.2s;
}
 
.c-hamburger--htx span::before,
.c-hamburger--htx span::after {
  transition-duration: 0.2s, 0.2s;
  transition-delay: 0.2s, 0s;
}
 
.c-hamburger--htx span::before {
  transition-property: top, transform;
}
 
.c-hamburger--htx span::after {
  transition-property: bottom, transform;
}
 
/* состояние active при открытом меню  */
.c-hamburger--htx.is-active {
  background-color: #E5088700;
}
 
.c-hamburger--htx.is-active span {
  background: none;
}
 
.c-hamburger--htx.is-active span::before {
  top: 0;
  transform: rotate(45deg);
}
 
.c-hamburger--htx.is-active span::after {
  bottom: 0;
  transform: rotate(-45deg);
}
 
.c-hamburger--htx.is-active span::before,
.c-hamburger--htx.is-active span::after {
  transition-delay: 0s, 0.3s;
}





@media screen and (max-width: 1020px) {
    .headerMenu {
        width: 380px;    
    }
}

@media screen and (max-width: 920px) {
    .headerMenu {
        position: fixed;
        top: 50px;
        left: 0px;
        width: 100%;
        z-index: 20;
        flex-direction: column;
    }
    .headerMenu a {
        padding: 15px 0px;
    }
    .headerButton {
        position: fixed;
        bottom: 50px;
        left: 0px;
        right: 0px;
        margin: auto;
        z-index: 20;
        display: block;
        width: 190px;
    }
    .c-hamburger {
        display: block;
    }  
    .headerMenu, .headerButton, .backgroundMenu { 
        visibility: hidden;
        opacity: 0;
        
        
        transition: opacity .2s cubic-bezier(0.250, 0.460, 0.450, 0.940), visibility .2s cubic-bezier(0.250, 0.460, 0.450, 0.940); 
    }
}


@media screen and (max-width: 1150px) {
    .bannerText {
        font-size: 48px;
        line-height: 56px;
        max-width: 680px;
        margin-top: 0px;
    }
    .bannerBrief {
        font-size: 16px;
        margin-top: 20px;
    }
    .bannerButton {
        margin-top: 20px;
    }
    .bannerLayer {
        background: url(../img/banner.png) 30% 50% no-repeat;
        background-size: cover;
    }
        
}
@media screen and (max-width: 750px) {
    .bannerText {
        font-size: 24px;
        line-height: 32px;
        width: 60%;
        margin-top: 0px;
        margin-top: 180px;
    }  
    .bannerBrief {
        font-size: 14px;
        margin-top: 20px;
        max-width: 60%;
    }
    .bannerLayer .layer {
        align-items: flex-start;
    }
    .bannerLayer {
        min-height: 100%;
    }
    .bannerLayer:after {
        height: 80px;    
    }
    .bannerLayer {
        background: url(../img/banner.png) 50% 50% no-repeat;
        background-size: cover;
    }
}
@media screen and (max-width: 500px) {
    .bannerLayer .layer {
        align-items: flex-start;
    } 
    
    .bannerTextLayer {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start; 
        flex-wrap: nowrap;  
        height: 100%;
    }
     
    .bannerText {
        width: 80%; 
        margin-top: 160px; 
            
    }
    .bannerBrief {
        width: 80%;    
        max-width: 80%;
    }
    .bannerLayer {
        background: url(../img/banner.png) 52% 0% no-repeat;
        background-size: 340%;
    }
    .bannerLayer:after {
        height: 120px;    
    }
}

@media screen and (max-height: 500px) {
    .bannerText {
        font-size: 32px;
        line-height: 40px;
        max-width: 60%;
        margin-top: 90px;
    }
    .bannerBrief {
        font-size: 14px;
        margin-top: 20px;
    }
    .bannerButton {
        margin-top: 20px;
    }
    

    .headerMenu a {
        padding: 5px 0px;
    }
    .bannerLayer .layer {
        align-items: flex-start;
    }

}

@media screen and (max-width: 1600px) {
    .aboutManImg {
        overflow: hidden;
    }
    .aboutManImg img {
        width: 130%;
        max-width: 130%;
        transform: translate(-12.5%, 0);
    }    
    .aboutAttention {
        bottom: 21%;
        left: 42%;
        margin: auto;
        width: 39%;
        font-size: 14px;
    }
    .aboutManImg:after {
        height: 100px;
    }
}
@media screen and (max-width: 950px) {
    .aboutManImg {
        overflow: hidden;
    }
    .aboutManImg img {
        width: 170%;
        max-width: 170%;
        transform: translate(-20.5%, 0);
    }    
    .aboutAttention {
        bottom: 21%;
        left: 43%;
        margin: auto;
        width: 54%;
        font-size: 14px;
    }
    .aboutManImg:after {
        height: 100px;
    }
}

@media screen and (max-width: 730px) {
    .aboutManImg img {
        width: 160%;
        max-width: 160%;
        transform: translate(-18.5%, 0);
    }    
    .aboutAttention {
        bottom: 21%;
        left: 42%;
        margin: auto;
        width: 47%;
        font-size: 12px;
    } 
}
@media screen and (max-width: 680px) {
       
    .aboutAttention {
        bottom: 15%;
    }
    
    .aboutManImg:after { 
        height: 50px;    
    }
}

@media screen and (max-width: 680px) {
    .aboutAttention {
        top: 0%;
        bottom: inherit;
        left: 30px;
        margin: auto;
        width: calc(100% - 60px);
        font-size: 14px;
        text-align: center;
    }    
    .aboutManImg:after { 
        height: 80px;    
    }     
}

@media screen and (max-width: 1150px) {
    .aboutText { 
        font-size: 14px; 
    } 
    .aboutTitle {
        top: -28px;
    }
    .h2 {
        font-size: 48px;
        line-height: 56px;
    }   
}

@media screen and (max-width: 750px) {
    .aboutText { 
        font-size: 14px; 
    } 
    .aboutTitle {
        top: -23px;
        left: 40px;
    }
    .h2 {
        font-size: 40px;
        line-height: 48px;
    }  
    .aboutLayer {
        padding: 40px;
    } 
}
@media screen and (max-width: 500px) {
    
    .aboutTitle {
        top: -16px;
        text-align: center;
        width: 100%;
        left: 0;
        
    }
    .h2 {
        font-size: 28px;
        line-height: 36px;
    }   
    .aboutLayer {
        padding: 30px 40px;
        
        transform: translate(0, -5px);
        border-radius: 32px;
    } 
    .aboutLayer::before, .aboutLayer::after {
        border-radius: 32px;
    }
    .aboutManImg:before {
        height: 40px;
    } 
}


@media screen and (max-width: 1150px) {
    .advLayer {
        margin-top: 60px;
    } 
    .advH3 {
        margin-bottom: 60px;
    }   
}
@media screen and (max-width: 950px) {
    .advLine span {
        font-size: 16px;
    }    
}
@media screen and (max-width: 750px) {
    .advList>div {
        width: 100%;
        padding-bottom: 30px;
    }   
    .advRight {
        margin-top: 70px;
    } 
    .advH3 {
        font-size: 16px;
    }
}


@media screen and (max-width: 1150px) {
    .forItem {
        padding: 20px 20px 20px 76px;
        font-size: 12px;
    }    
    .forItem::after {
        left: 18px !important;
    }
    .forItem img  {
        left: 20px !important;    
    }
    .forItem {
        width: calc((100% - 30px) / 3);
    }
    
    .forLayer {
        margin-top: 40px;
    }
    .forTitle {
        margin-bottom: 20px;
    }
    .forBrief {
        margin-bottom: 20px;
    }
}

@media screen and (max-width: 750px) {
    .forItem {
        padding: 10px 10px 10px 46px;
        font-size: 12px;
        font-weight: 300;
    }   
       
    .forItem::after {
        left: 22px !important;
        zoom: 0.5;
    }
    .forItem img  {
        left: 24px !important;   
        zoom: 0.5; 
    }

    .forLayer {
        margin-top: 40px;
    }
    .forTitle {
        font-size: 24px;
        margin-bottom: 10px;
    }
    .forBrief {
        font-size: 14px;
        margin-bottom: 20px;
    }
}
@media screen and (max-width: 550px) {
     .forItem {
        width: 100%;
        margin-bottom: 20px;
        padding: 30px 20px 30px 76px;
        font-size: 14px;
        font-weight: bold;
    }     
    .forItem::after {
        left: 18px !important;
        zoom: 1;   
    }
    .forItem img  {
        left: 20px !important;
        zoom: 1;     
    }
}

@media screen and (max-width: 1180px) {
    .twoImg img {
        max-width: 100%;
    } 
    .twoImg {
        width: calc(100% - 465px);
    }   
}

@media screen and (max-width: 1050px) {
    .twoText {
        width: 260px;
    }
    .twoText div {
        font-size: 22px;
        line-height: 38px;
    }
    .twoText span {
        font-size: 14px;
    }
    .twoImg {
        width: calc(100% - 280px);
    }
    .twoLayer {
        height: 525px;
    }
}
@media screen and (max-width: 950px) {
    .twoLayer { 
        margin-top: 60px;
    }        
}

@media screen and (max-width: 750px) {
      
    .twoImg {
        width: calc(80%);
    }  
    
    .twoLayer {
        position: relative;
       
        height: 0;
        padding-bottom: 110%;
    }
    

    .twoImg1 {
        top: 110px;
        right: 0px;
    }
    .twoImg2 {
        bottom: 110px;
        left: 0px;
    }
    .twoText {
        width: 100%;
    }
    
    .twoImg {
        padding: 8px;    
    }
    .twoLayer { 
        margin-top: 40px;
    }        
}
@media screen and (max-width: 1150px) {
    .solH3 {
        font-size: 18px;
    }    
    .solBrief {
        font-size: 16px;
        margin-bottom: 60px;
    }  
    .solLayer {
        margin-top: 120px;
    }  
}
@media screen and (max-width: 750px) {
    .solH3 {
        font-size: 16px;
    }    
    .solBrief {
        font-size: 14px;
    }  
    .solLayer {
        margin-top: 60px;
    }
    .itemTitle {
        font-size: 18px;
    }  
}
@media screen and (max-width: 700px) {  
    .itemTitle {
        margin-top: 0px;
        margin-left: 65px;
        margin-bottom: 25px;
        min-height: 46px;
        
        
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center; 
        flex-wrap: nowrap;  
    }  
}


@media screen and (max-width: 1150px) { 
    
    .peopleItem {
        width: calc((100% - 55px) / 2);
        
    }   
    .peopleLayer {
        margin-top: 120px;
    }  
    .peopleTitle {
        top: -28px;
        left: 40px;
    } 
    .peopleLayer {
        padding: 40px;
    } 
}

@media screen and (max-width: 750px) {
    .peopleTitle {
        top: -22px;
        left: 40px;
    } 
    .peopleLayer {
        padding: 40px;
        padding-top: 80px;
    } 
    .peopleLayer {
        margin-top: 80px;
    }
    
    .peopleItem {
        width: 100%;
        padding-bottom: 30px;
        
    } 
      
}
@media screen and (max-width: 500px) {
    
    .peopleTitle {
        top: -16px;
        text-align: center;
        width: 100%;
        left: 0;
        
    }  
    .peopleLayer {
        padding: 30px 40px;
        padding-top: 60px;
        
        transform: translate(0, -5px);
        border-radius: 32px;
        
    } 
    .peopleLayer::before, .peopleLayer::after {
        border-radius: 32px;
    }  
}
@media screen and (max-width: 1150px) {
    .beginTitle {
        font-size: 54px;
        line-height: 65px;
    }    
}
@media screen and (max-width: 750px) {
    .beginTitle {
        font-size: 40px;
        line-height: 52px;
    }   
    .beginBrief {
        font-size: 16px;
    } 
    .beginLayer {
        margin-top: 120px;
        padding: 40px 20px;
    }
}
@media screen and (max-width: 550px) {
    .beginTitle {
        font-size: 28px;
        line-height: 32px;
        margin-bottom: 20px;  
    }   
    .beginBrief {
        font-size: 14px;
        padding: 0px 20px;
    } 
}
@media screen and (max-width: 1150px) {
    .footerLeft {
        width: 605px;
    }    
}
@media screen and (max-width: 950px) {
    .footerLayer {
        flex-direction: column;
        margin-top: 80px;
    }    
    .footerLeft {
        margin-bottom: 40px;
    }
}

@media screen and (max-width: 750px) {
    .footerLeft {
        flex-direction: column;
        width: auto;    
    }     
    .footerDelimetr {
        width: 310px;
        height: 1px;
        margin: 20px 0px;
    }   
}

@media screen and (max-width: 900px) {
    .c1 { 
        right: 50%;
    }    
}
@media screen and (max-width: 550px) {
    .c1 { 
        right: 70%;
    }    
}

@media screen and (max-width: 1150px) {
    .c2 { 
        left: 45%;
        top: 0px;
    }         
}
@media screen and (max-width: 750px) {
    .c2 { 
        left: 35%;
        top: 25%;
    }         
}
@media screen and (max-width: 550px) {
    .c2 { 
        left: 15%;
        top: 25%;
    }         
}
@media screen and (max-width: 900px) {
    .c3 { 
        right: 75%;
    }    
}

@media screen and (max-width: 650px) {
    .c3 { 
        right: 60%;
    }    
}


@media screen and (max-width: 900px) {
    .c4 { 
        left: 80%;
        opacity: 0.8;
    }    
}
@media screen and (max-width: 600px) {
    .c4 { 
        left: 60%;
        opacity: 0.8;
    }    
}

@media screen and (max-width: 1150px) {
    .c5 { 
        left: -30%;
    }    
}
@media screen and (max-width: 900px) {
    .c5 { 
        left: 0%;
        right: 0%;
        max-width: 100%;
        max-height: 100%;
        bottom: -45%;
    }    
}


@media screen and (max-width: 900px) {
    .popupLayer {
        max-width: 770px;
        width: 90%;
    }    
}
@media screen and (max-width: 750px) {
    .popupLayer {
        padding: 30px 48px;
    }    
    .popupTitle {
        font-size: 32px;
        line-height: 40px;
        margin-bottom: 20px;
    }
    .popupSend {
        margin-top: 20px;
    }
}
@media screen and (max-width: 550px) {
    .popupLayer {
        padding: 30px 20px;
        border-radius: 20px;
    }    
    .popupTitle {
        font-size: 32px;
        line-height: 40px;
        margin-bottom: 20px;
    }
    .popupSend {
        margin-top: 20px;
    }
}
@media screen and (max-width: 1150px) {
    .staticBrief {
        margin-top: -20px;
    }    
    .staticBrief {
        font-size: 20px;   
    }
    .staticPage {
        margin-bottom: 0px;
        margin-top: 180px;
    }     
}
@media screen and (max-width: 750px) {
    .staticPage {
        margin-bottom: 0px;
        margin-top: 120px;
    }      
    .staticText {
        font-size: 14px;   
    }
}