.header{
    @include flexbox();
    @include align-items(center);
    border-bottom:1px solid #E2E2E2;
    height: 80px;
    z-index: 10;
    background: white;
    position: relative;
    .container{
        @include flexbox();
        @include justify-content(space-between);
        @include align-items(center);
    }
    .logo{
        max-width: 120px;
        img{
            width: 100%;
        }
    }
    .menu{
        ul{
            @include flexbox();
            @include justify-content(space-between);
            li{
                margin:0 20px 0 0;
                a{
                    font-size:1.2rem;
                    font-weight: 500;
                    text-transform: uppercase;
                    color:$black;
                    letter-spacing: 1px;
                    cursor: pointer;
                    i{
                        color:$yellow;
                    }
                    &:hover{
                        color:$yellow;
                    }
                }
                &:last-child{
                    margin-right:0;
                }
                &.sub{
                    position: relative;
                    ul{
                        padding-top:20px;
                        position: absolute;
                        top:100%;
                        display: none;
                        background: #fff;
                        z-index: 9;
                        width: 350px;
                        li{
                            border-bottom:1px solid $gray;
                            margin-right: 0;
                            a{
                                display: block;
                                font-size: 1.4rem;
                                padding:12px;
                                text-transform: none;
                                &:hover{
                                    i{
                                        color:#000!important;
                                    }
                                }
                            }
                            &:last-child{
                                border-bottom:0;
                            }
                        }
                    }
                    &:hover{
                        > ul{
                            display: block;
                        }
                    }
                }
                &.sub-double{
                    position: relative;
                    a {
                        .icon-down-dir {
                            color:$yellow;
                        }
                    }
                    ul{
                        padding-top:0;
                        position: absolute;
                        top:100%;
                        left: 0;
                        display: none;
                        background: #fff;
                        z-index: 9;
                        width: 350px;
                        max-height: 200px;
                        overflow-x: hidden;
                        overflow: auto;
                        li{
                            border-bottom:1px solid $gray-light;
                            a{
                                display: block;
                                font-size: 1.4rem;
                                padding:10px;
                                text-transform: none;
                            }
                            &:last-child{
                                border-bottom:0;
                            }
                        }
                    }
                    &:hover{
                        > a {
                            background: #f4f4f4;
                            color:$black;
                            .icon-down-dir {
                                color:$yellow;
                            }
                        }
                        > ul{
                            display: block;
                        }
                    }
                    @media (min-width: 768px) {
                        a {
                            .icon-down-dir {
                                float: right;
                                &:before {
                                    transform: rotate(-90deg);
                                }
                            }
                        }
                        ul {
                            top:0;
                            left: 100%;
                        }
                    }
                }
            }
        }
        .contact-info{
            display: none;
        }
    }
    .contact-info{
        @include flexbox();
        @include justify-content(space-between);
        @include align-items(center);
        i{
            background: $yellow;
            color:$white;
            margin-right: 15px;
            font-size: 2.2rem;
        }
        a{
            font-size: 1.2rem;
            color:$black;
            font-weight: 500;
        }
        .btn-open {
            width: 20px;
            height: 14px;
            display: none;
            cursor: pointer;
            @include transition();
            position: relative;
            margin-left: 30px;
            span {
              display: block;
              position: absolute;
              height: 2px;
              width: 20px;
              background: $black;
              opacity: 1;
              overflow: hidden;
              @include transition();
              &:nth-child(1) {
                top: 0px;
              }
              &:nth-child(2){
                top: 6px;
              }
              &:nth-child(3) {
                bottom:0;        
              }
            }
        }
    }
    .btn-close{
        display: none;
    }
}

.overlay {
    display: none;
    z-index: 8;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0,0,0,0.6);
}

@include breakpoint(768px){
    .header{
        .menu{
            position: fixed;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background:$white;
            z-index:999;
            @include transition();
            .btn-close{
                display: inline-block;
                margin:30px 18px 20px;
                color:$black;
                transform: rotate(180deg);
            }
            ul{
                display: block;
                &.menu-list{
                    height: 75vh;
                    overflow: scroll;
                }
                li{
                    padding:10px 15px;
                    border:none;
                    margin-right: 0;
                    &:first-child{
                        border-top:0;
                    }
                    &.sub{
                        ul{
                            position: relative;
                            width: 100%;
                            padding:10px 0 0px 0;
                            left: 0;
                            li{
                                background:$white;
                                padding:0;
                                border-bottom:1px solid #E2E2E2;
                                a{
                                    color:#898989;
                                }
                                ul{
                                    padding:0;
                                    li{
                                        a{
                                            background: $white;
                                            color:#898989;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .contact-info{
                width:130px;
                display: flex;
                margin:20px 15px;
            }
            &.open{
                left: 0;
            }
        }
        .contact-info{
            .btn-open{
                display: block;
            }
        }
    }
}

@include breakpoint(580px){
    .header{
        padding:10px 0;
        height: 60px;
        .logo{
            width: 38px;
            overflow: hidden;
            img{
                max-width: 80px;
                width: 80px;
            }
        }
        .menu{
            .contact-info{
                a{
                    display: block;
                }
            }
        }
        .contact-info{
            a{
                display: none;
            }
            .btn-open{
                margin-left: 20px;
            }
        }
    }
}