/*============HEADER V1 ==================*/


//** simple and lightweight mixin library for Sass **
//-- url : http://bourbon.io/docs ---
@import 'bourbon/bourbon';

//** Mixins for Rem Font Sizing **
//-- url : http://hugogiraudel.com/2013/03/18/ultimate-rem-mixin/
@import 'utilities/rem';

//** Variables for responsive design in bootstrap with sass **
//-- url : https://gist.github.com/webinfinita/11407836
@import 'utilities/bootstrap_breakpoints';

//** Makes supporting both left-to-right (LTR) and right-to-left (RTL) easy.**
//-- url : https://github.com/tysonmatanich/directional-scss
@import 'utilities/directional';

//Mixins utilities
@import 'utilities/theme_variables';
@import 'utilities/utilities';

/*===============================================
[SASS DIRECTORY ]
    
[1] BLOCK HEADER
[2] BLOCK FOOTER
    
==============================================*/

.typeheader-4{
    margin-bottom: 10px;
    // HEADER TOP
    .header-top{
        background-color: #f7f7f7;
        border-bottom: 1px solid #dddddd;
        .header-user{
            text-align: right;
            .dropdown-menu{
             left: 0 !important;
             right: auto;
         }
         > ul{
            font-size: 0;
            > li{
                display: inline-block;
                position: relative;
                &:not(:last-child){
                    margin-right: 25px;
                }
                > .lang-img{
                    margin: 0 3px 8px 0;
                    max-width: 16px;
                }
                > a{
                    font-size: 12px;
                    padding-top: 9px;
                    display: inline-block;
                    .dropdown-icon{
                        margin-left: 5px;
                    }
                }
                ul{
                    li{
                        a{
                            font-size: 12px;
                        }
                    }
                }
            }
        }
    }
    .header-hotline{
        padding: 7px 0;
        .item{
            display: inline-block;
            padding-left: 25px;
            p{
                margin: 0;
            }
            a span{
                font-weight: 700;
            }
            &:first-child{
                background: url(../../image/catalog/demo/header/talk-header.png) no-repeat left 0 top 3px;
            }
            &:last-child{
                margin-left: 35px;
                background: url(../../image/catalog/demo/header/phone.png)  no-repeat left 0 top -30px;
            }
        }
    }
}
        // HEADER TOP
        // HEADER CENTER
        .header-center{
            .logo{
                padding:31px 0 32px 0;
            }
            .header-menu{
                padding: 37px 0 37.5px 0;
            }
            .megamenu-wrapper{
                background: transparent;
            }
            ul.megamenu{
                text-align: center;
                font-size: 0;
                > li {
                    float: none;
                    display: inline-block;
                    font-size: 14px;
                    vertical-align: middle;
                    &:not(:last-child){
                        margin-right: 40px;
                    }
                    > a{
                        color: #444444;
                        font-weight: 700;
                        padding: 0;
                        height: auto;
                        position: relative;
                        line-height: 1;
                        &:hover{
                            color: $color4;
                            background-color: transparent;
                        }
                        b.caret{
                            right: -12px;
                        }
                        .menu-label{
                            top: -13px;
                            right: -27px;
                        }
                    }
                    &.active{
                        > a{
                            background-color: transparent;
                            color: $color4;
                        }
                    }
                    &.menu-home{
                        > a{
                            background-color: transparent;
                        }
                        a{
                            max-height: 131px;
                            color: $color4;
                        }
                    }
                }
                .sub-menu{
                    top: calc(100% - 5px);
                    padding-top: 20px;
                }
            }

        }
        // HEADER CENTER
        .header-center{
         .cart{
            text-align: right;
            padding: 34px 9px 34px 0;
            .cart-box{
                position: relative;
                display: inline-block;
                .quantity{
                   display: inline-block;
                   position: absolute;
                   top: -15px;
                   right: -10px;
                   background-color: #fafaf8;
                   border: 1px solid #ddd;
                   border-radius: 50%;
                   color: #404040;
                   font-weight: 700;
                   padding: 3px 2px;
                   line-height: 1;
               }
           }
           &:hover{
            .shopping-cart{
                top: calc(100% - 30px);
            }
        }
        .shopping-cart{
            top: calc(100% - 5px);
            .shopping-cart-checkout{
                border: 1px solid #ddd;
                border-top: none;
                a:hover{
                    background-color: $color4;
                }
            }
        }
    }
}
//HEADER-BOTTOM
.header-bottom{
    .header-bottom-left{
        width: 50%;
        float: left;
        &.search-form{
            .search-form-btn{
                display: none;
            }
            form{
               position: relative;
               font-size: 0;
               .icon{
                   display: inline-block;
                   padding-right: 10px;
                   position: relative;
                   line-height: 40px;
                   padding-left: 15px;
                   border: none;
                   font-size: 14px;
                   border-right: none;
                   background-color: #f7f7f7;
                   color: #999999;
                   &:after{
                    content: '';
                    position: absolute;
                    right: 0px;
                    width: 1px;
                    background: #dddddd;
                    top: 20%;
                    height: 60%;
                }
            }
            input{
                font-size: 12px;
                border: none;
                height: 40px;
                width: calc(100% - 50px);
                border: none;
                vertical-align: top;
                padding: 0 10px;
                background-color: #f7f7f7;
                &:focus{
                    outline: none;
                }
            }
            button[type='submit']{
                font-size: 12px;
                font-weight: 700;
                height: 40px;
                min-width: 50px;
                border: none;
                color: #858585;
                vertical-align: top;
                &:hover{
                    background-color: $color4;
                    color: #fff;
                }
            }
            button.hidden-lg{
                display: none;
            }
        }
    }
}
.header-bottom-right{
    width: 50%;
    text-align: right;
    float: left;
    background-color: #f7f7f7;
    ul{
        font-size: 0;
        li{
            display: inline-block;
            margin: 0 10px;
            a{
                line-height: 40px;
                font-size: 14px;
                color: #858585;
                display: inline-block;
                &:hover{
                    color: $color4;
                }
            }
        }
    }
}
}

//HEADER-BOTTOM
}