.header {
    display: flex;
    position: sticky;
    top: -43px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, .136);
    transition: all 0.3s;
    z-index: 4;
}

.mainMenuContainer {
    display: flex;
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100px;
    justify-content: space-between;
    align-items: flex-start;
    padding: 0px 24px 0px 24px;
}

.headerContainer {
    display: flex;
    position: relative;
    width: 100%;
    max-width: var(--saitMaxWidth);
    height: 100px;
    justify-content: center;
}

.menuLogoLink {
    display: flex;
    flex-direction: column;
    /*position: fixed;*/
    /*top: 0px;*/
    min-width: 75px;
    max-width: 75px;
    height: 85px;
    cursor: pointer;
    z-index: 1;
}

.menuLogo {
    display: flex;
    width: 75px;
    height: 85px;
}

.banner {
    display: flex;
    position: relative;
    width: 100%;
    max-height: 500px;
    justify-content: center;
    overflow: hidden;
}

.bannerBoxImg {
    display: flex;
    position: absolute;
    width: 80%;
    height: 100%;
    justify-content: center;
}

.bannerImg {
    object-fit: cover;
    object-position: -336px 0px;
    height: 430px;
}

.headerImg {
    object-fit: cover;
    width: var(--saitMaxWidth);
}

.bannerBoxText {
    display: flex;
    position: absolute;
    width: 100%;
    height: 100%;
    justify-content: center;
}

.bannerTextContainer {
    display: flex;
    width: 100%;
    justify-content: center;
}

.bannerText {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 23px 20px 20px 20px;
}

.bannerHead {
    display: flex;
    color: #fff;
    font-size: 27px;
    font-weight: bold;
    padding: 20px 0px 0px 0px;
    justify-content: center;
}

.bannerInfo {
    display: flex;
    color: #eaeaea;
    padding: 30px 0px 0px 0px;
    font-size: 17px;
    font-weight: 100;
    justify-content: center;
    text-align: center;
}

.bannerInfoDown {
    display: flex;
    color: #eaeaea;
    padding: 208px 0px 0px 0px;
    font-size: 19px;
    font-weight: 100;
    text-align: center;
}

.iconBurger {
    display: flex;
}

/* Small devices (landscape phones, 576px and up)*/
@media (min-width: 576px) {

}
/* Medium devices (tablets, 768px and up)*/
@media (min-width: 768px) {
    .header {
        display: flex;
        position: sticky;
        top: -43px;
        box-shadow: 0 1px 5px rgba(0, 0, 0, .136);
        transition: all 0.3s;
        z-index: 4;
    }


    .bannerImg {
        object-fit: cover;
        object-position: -91px 0px;
        height: 584px;
    }
}

/* Large devices (desktops, 992px and up)*/
@media (min-width: 992px) {
 
    .menuLogoLink {
        display: flex;
        position: fixed;
        top: 0px;
        cursor: pointer;
        z-index: 1;
    }

    .mainPhone {
        display: flex;
        color: #bfbfbf;
        font-size: 25px;
    }
    
    .mainAddress{
        display: flex;
        color: #bfbfbf;
        font-size: 16px;
    }

    .menuLogo {
        display: flex;
        /*position: absolute;*/
        top: 0px;
        left: 20px;
        width: 100px;
        height: 107px;
    }

    .bannerBoxText {
        display: flex;
        position: absolute;
        width: 100%;
        height: 500px;
        justify-content: center;
    }
    
    
    
    .bannerHead {
        display: none;
        color: #fff;
        font-size: 50px;
        font-weight: bold;
        padding: 20px 0px 30px 0px;
        justify-content: start;
    }

    .circleBurger {
        display: none;
        position: absolute;
        top: 20px;
        right: 20px;
    }

    .circleBurger:hover svg g g path{
        stroke: #fff;
    }


/*================================================ Меню перенести в другой файл ======================================*/

    .mainMenu-template-container {
        display: flex;
        align-items: center;
        color: #bfbfbf;
        z-index: 2;
    }

    .userNameContainer {
        display: flex;
        flex-direction: column;
    }

    .userNameHeader {
        display: flex;
        justify-content: end;
        align-items: center;
        text-align: center;
        color: #fbfbfb;
        padding: 3px 0px 25px 0px;
    }

    .mainMenu {
        display: flex;
        flex-direction: row;
    }

    .mainMenu a {
        display: flex;
        padding: 3px 25px 3px 25px;
    }

    .mainMenu a:hover {
        color: #fff;
    }



    .root-item-parent-selected {
        color: #fff;
        border-bottom: 1px solid #ec1000;
    }

    .linkPerson {
        display: flex;
        width: 16px;
        height: 16px;
        justify-content: center;
        align-items: center;
    }

    .linkPerson:hover i svg path{
        fill: #fff;
    }

    .sub-mainMenu {
        display: none;
        flex-direction: column;
        position: absolute;
    }

    .headerContainer li.mainMenu-item:hover ul.sub-mainMenu .sub-menu-item {
        display: flex; 
        padding: 5px 0px 5px 0px;
    }

    .headerContainer li.mainMenu-item:hover ul.sub-mainMenu {
        display: flex;
        background-color: rgba(255, 255, 255, 0.99);
        color: #222;
    }

    
    .headerContainer li.mainMenu-item:hover ul.sub-mainMenu .root-mainItem:hover,
    .headerContainer li.mainMenu-item:hover ul.sub-mainMenu .root-mainItem-selected:hover {
        display: flex;
        background-color: rgba(255, 255, 255, 0.99);
        color: #ec1000;
    }
    
    .root-mainItem-parent-selected {
        border-bottom: 1px solid #ec1000;
    }

    .back, .double_parent {
        display: none;
    }

    .mainMenu-item {
        
    }

}


/* X-Large devices (large desktops, 1200px and up)*/
@media (min-width: 1200px) {
    .bannerImg {
        object-fit: cover;
        object-position: 0px -93px;
        height: 718px
    }
}

/* XX-Large devices (larger desktops, 1400px and up)*/
@media (min-width: 1400px) {
    .bannerImg {
        object-fit: cover;
        object-position: -174px -364px;
        height: 1070px;
    }
}

/* XX-Large devices (larger desktops, 1600px and up)*/
@media (min-width: 1600px) {
    .bannerImg {
        object-fit: cover;
        object-position: -174px -364px;
        height: 1070px;
    }
}

/* XX-Large devices (larger desktops, 1800px and up)*/
@media (min-width: 1800px) {
    .bannerImg {
        object-fit: cover;
        object-position: -174px -364px;
        height: 1070px;
    }
}