.site-header.teepro-header-4 {
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, .1);
    position: relative;
    .middle-section {
        display: flex;
    }
    .main-nav-wrap {
        display: flex;
        flex: 1 1 0;
        justify-content: flex-end;
        align-items: center;
        padding: 0 60px;
    }
    .icon-header-section {
        .icon-header-wrap {
            padding-left: 0;
        }
    }
    .nb-header-sub-menu>li:last-child>a {
        padding-right: 0;
    }
    .top-section-wrap {
        .text-section {
            display: flex;
            justify-content: flex-end;
            flex: 1;
            align-items: center;
            font-size: 18px;
            .start_design {
                padding: 5px 15px;
                background: #333;
                border-radius: 5px;
                font-size: 18px;
                margin-left: 10px;
                transition: all .3s;
                font-weight: 700;
                &:hover {
                    background: #fff;
                }
            }
        }
        .header_top_right_menu {
            padding-right: 10px;
            font-size: 16px;
            @include media-breakpoint-down(sm){
                &:before{
                    display: none;
                }
            }
            ul {
                margin: 0;
                padding: 0;
            }
            .user-menu {
                right: 50%;
                transform: translateX(50%);
                &::before {
                    right: 50%;
                }
            }
        }
        .sub-navigation {
            font-size: 16px;
            .nb-header-sub-menu {
                >li {
					&:not(:first-child) {
						>a {
							border-left: 1px solid #fff;
						}
					}
                    &:not(:last-child) {
                        >a {
                            border-right: 0 none;
                        }
                    }
                }
			}
			.menu-menu-top-left-container{
				~ .WOOCS_SELECTOR{
					.dd-selected{
						vertical-align: middle;
					}
				}
			}
        }
        @include media-breakpoint-down(xs) {
            .top-section {
                justify-content: flex-end;
                .sub-navigation {
                    display: none;
                }
                .header_top_right_menu {
                    padding-right: 0px;
                }
            }
        }
    }
    &.header-mobile {
        .main-logo {
            display: flex;
            flex: 1;
            order: 1;
        }
        .main-nav-wrap {
            flex: none;
            order: 3;
            padding-left: 15px;
            padding-right: 0;
            .nb-navbar {
                margin: 0
            }
        }
        .icon-header-section {
            order: 2;
            @include media-breakpoint-down(xs) {
                padding-left: 30px;
            }
        }
        .top-section-wrap {
            .top-section {
                justify-content: center;
                .text-section {
                    display: none;
                }
            }
        }
    }
}

.home {
    .site-header.teepro-header-4 {
        &.header-desktop {
            .middle-section-wrap {
                position: absolute;
                top: 100%;
                width: 100%;
                z-index: 999;
            }
        }
    }
}