//-----------------------------------
// HEADER 4
//-----------------------------------
@media screen and (min-width:1480px) {
    header.yolo-main-header.header-4 .yolo-header-nav-wrapper.nav-fullwith {
        padding-left: var(--header_4_nav_layout_padding);
        padding-right: var(--header_4_nav_layout_padding);

        .container {
            width: 100%;
        }
    }
}

@media screen and (min-width:1301px) and (max-width: 1479px) {
    header.yolo-main-header.header-4 .yolo-header-nav-wrapper.nav-fullwith {
        padding-left: 0;
        padding-right: 0;

        .container {
            width: 1320px;
            padding-left: 20px;
            padding-right: 20px;
        }
    }

}

.header-4.header-float {
    .yolo-page-title-section {
        .content-page-title {
            margin-top: calc(var(--header_4_height) / 2);
        }
    }
}

header.header-4 {

    position: relative;
    background-color: var(--header_4_nav_bg_color);
    color: var(--header_4_nav_text_color);

    .yolo-account {
        .sub-menu {
            background-color: var(--menu_sub_bg_color);
            color: var(--menu_sub_text_color);
        }
    }

    .yolo-header-nav-wrapper {
        position: relative;
        height: var(--header_4_height);
        .transition(all 0.35s ease 0s);

        .yolo-header-wrapper {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;

            .header-left-offcanvas {
                position: relative;
                z-index: 2;
                float: left;

                .canvas-menu-toggle-wrapper {
                    padding-right: 70px;
                }
            }

            .header-left {
                float: left;

                .header-logo {
                    position: relative;
                    z-index: 1;
                    display: table;
                    height: var(--header_4_height);

                    a {
                        display: table-cell;
                        vertical-align: middle;

                        img {
                            max-height: var(--header_4_height);

                            @media(max-width: @screen-md-max) {
                                max-width: 160px;
                            }
                        }
                    }
                }
            }

            .header-center {
                margin: 0 auto;
                display: flex;
                align-items: center;

                .menu-wrapper {
                    float: left;

                    .navbar-nav {
                        >li {
                            >a {
                                line-height: var(--header_4_height);
                                padding-top: 0;
                                padding-bottom: 0;
                                padding-left: var(--header_4_nav_distance);
                                padding-right: var(--header_4_nav_distance);
                                letter-spacing: 0.1em;

                                @media(max-width: 1300px) {
                                    padding: 0 15px;
                                }

                                @media(max-width: 1100px) {
                                    padding: 0 7px;
                                }
                            }
                        }
                    }
                }
            }

            .header-right {
                float: right;

                .header-customize {
                    line-height: var(--header_4_height);

                    .calling-content {
                        height: var(--header_4_height);

                    }
                }
            }
        }

        &.sticky-in {
            .transition(all 0s ease 0s);
        }

        &.sticky-on {
            height: 70px;
            box-shadow: 0 8px 20px 0 rgba(0, 0, 0, .1);

            .container {
                .yolo-header-wrapper {
                    .header-left-offcanvas {
                        .header-customize {
                            height: 70px;
                        }
                    }
                }

                .header-left {
                    .header-logo {
                        line-height: 70px;
                        height: 70px;
                    }
                }

                .header-center {
                    .menu-wrapper {
                        .navbar-nav {
                            >li {
                                >a {
                                    line-height: 70px;
                                }
                            }
                        }
                    }
                }

                .header-right {
                    height: 70px;
                    .menu-wrapper {
                        .navbar-nav {
                            >li {
                                >a {
                                    line-height: 70px;
                                }
                            }
                        }
                    }

                    .header-customize {
                        line-height: 70px;

                        .calling-content {
                            height: 70px
                        }
                    }
                }
            }
        }

        &.sticky-out {
            height: 70px;
            box-shadow: none;

            .container {
                .yolo-header-wrapper {
                    .header-left-offcanvas {
                        .header-customize {
                            height: 70px;
                        }
                    }
                }

                .header-center {
                    .menu-wrapper {
                        .navbar-nav {
                            >li {
                                >a {
                                    line-height: 70px;
                                }
                            }
                        }
                    }
                }

                .header-left {
                    .header-logo {
                        height: 70px;
                    }
                }

                .header-right {
                    .menu-wrapper {
                        .navbar-nav {
                            >li {
                                >a {
                                    line-height: 70px;
                                }
                            }
                        }
                    }

                    .header-customize {
                        line-height: 70px;

                        .calling-content {
                            height: 70px
                        }
                    }
                }
            }
        }
    }

    .yolo-sticky-wrapper.is-sticky {
        .header-sticky {
            background-color: var(--header_4_nav_bg_color);
        }
    }
}