/** start header */
#header {
    position: sticky;
    top: 0;
    z-index: 2;
    box-shadow: 0 8px 8px -10px #d5d5d5;
    background-color: #ffffff;

    #promotion-bar {
        background-color: #333333;
        padding: 8px;
        
        p {
            font-size: 14px;
            line-height: 1.4em;
            font-weight: 600;
            padding: 0;
            margin: 0;

            color: #f0f0f0;
            text-align: center;

            a {
                color: #FCB903;
            }
        }
    }

    #nav {
        padding: 0.5rem 0;
        margin-bottom: 0px !important;
        .navbar-brand {
            img {
                width: 120px;
                transition: all 0.5s ease;
            }
        }
        .navbar-nav {
            position: absolute;
            right: 0;

            > li.nav-item {
                font-size: 16px;
                transition: width 0.2 ease, font-size 0.5s ease;
                width:130px;
                
            }
            

            li.nav-item {
                

                a {
                    display: inline-block;
                    padding-right: 1.3em;
                    padding-left: 1.3em;
                    cursor: pointer;
                    // transition: padding 0.5s ease;
                    color: #000;
                }
                .btn-secondary {
                    padding: 0.3rem 1.2rem 0.4rem !important;
                    color: #ffffff;
                }
                .dropdown-toggle:after {
                    display: none;
                }

                ul.dropdown-menu {
                    padding: 0.5em 0 0 1.3em;
                    

                    box-shadow:  0px 5px 8px 0px theme-color('shadow-gray'), 0px -5px 8px 0px theme-color('shadow-gray');
                    border-bottom: 5px solid theme-color('ignite-red');
                    border-radius: 0;

                    .dropdown-subtitle {
                        font-weight: 400;
                        font-size: 16px;
                        margin-top: 0.6em;
                        border-bottom: 3px solid theme-color('gray');
                        margin-bottom: 0.5em;

                        padding-bottom: 0.5em;

                    }

                    .dropdown-item {
                        padding: 0;
                        transition: background-color 200ms ease-in-out;
                        a {
                            padding: 0.4em 1.5em 0.4em 1em;
                            color: #000;
                            // padding: 0;
                            font-size: 14px;
                            display: block;
                            transition: none;;
                        }
                        a:hover {
                            text-decoration: none;
                        }
                    }
                    .dropdown-item:hover {
                        background-color: lighten(theme-color('gray'), 5%);
                        border-left:3px solid theme-color('secondary');
                            // -webkit-animation: menuitemanimation 1000ms linear  both;
                            // animation: menuitemanimation 1000ms linear  both;   
                        
                        a {
                            padding-left: calc(1em - 3px);
                            
                        }
                    }
                    .dropdown-item:active {
                        background-color: #ffffff;
                    }

                    .dropdown-item:last-child {
                        border-bottom: 5px solid theme-color('secondary');
                        padding-bottom: 1em;
                        margin-bottom: -5px;
                    }
                }
                
            }
            li.nav-item.show {
                > a.dropdown-toggle {
                    font-weight: 700;
                    
                }
            }
        }
    }
}
#header.shrink {

    #nav .navbar-nav > li.nav-item {
        // font-size: 15px !important;
        width: 120px;
    }
    

    // img {
        // width: 8rem !important;   
    // }
}

// Medium devices (tablets, less than 992px)
// @media (max-width: 991.98px) { ... }
@include media-breakpoint-down(md) {

    
    #header {
        #nav {
            .navbar-nav {
                position: relative;
                li.nav-item {
                    
                    a.btn {
                        margin-left: 1.3em;
                    }
                    
                    ul.dropdown-menu {
                        border: 0;
                        box-shadow: none;
                        margin-bottom: 2rem;
                        margin-left: 2rem;
                        border-left: 5px solid theme-color('secondary');

                        .dropdown-item:last-child {
                            border-bottom: none;
                        }
                    }
                }
            }
            
            
            .navbar-brand {
                img {
                    width: 9rem;
                }
            }
            .navbar-toggler-icon {
                i {
                    font-size: 2rem;
                }
            }
        }
    }
    #header.shrink 
        #nav .navbar-nav > li.nav-item {
            width: 100%;
        }
    

    
}