/*------------------------------------*\
            $Topbar CSS 
\*------------------------------------*/
/*
    * Topbar CSS................This file
    * Common....................Common use
    * Navbar....................
        - Nav List
        - Nav Button
    * Adjust Available..........You can adjust different color style
    * Media Query...............RWD
        - Navbar to collapse sooner
        - Dropdown Menu transition animation
*/


/*------------------------------------
            $Common
------------------------------------*/
    /*-----flex: 垂直置中-----*/
    .flex-align-center{     
        display: flex;
        display: -ms-flexbox;
        -webkit-box-align: center;
        -webkit-align-items: center;
            -ms-flex-align: center;
                align-items: center;
    }
    /*-----smooth transition-----*/
    .transition{
        -webkit-transition: all 0.4s ease;
            -ms-transition: all 0.4s ease;
            -moz-transition: all 0.4s ease;
                -o-transition: all 0.4s ease;
                    transition: all 0.4s ease;
    }
    /*-----Topbar Font Size-----*/
    .rl-style nav p, .rl-style nav li{font-size: 1rem; line-height: 20px;}    
    .rl-style nav p, .rl-style nav ul{margin-bottom: 0px;}




/*------------------------------------
            $Navbar
------------------------------------*/
/*#_topnavarea_{
    padding-bottom: 60px;
}*/
.navbar-container{
    border-radius: 0; 
    border: none;
    margin: 0;
    width: 100%;
}

.navbar-nav .rl-btn-border-try:hover {
    border: 2px solid #e8380d;
}

.paddingNavbar{
        max-width: 1440px;
        margin: 0 auto;
}
    .navbar-row{
        /*max-width: 1440px;
        padding-right: 15px;
        padding-left: 15px;*/
        margin: 0 auto;
        padding-right: 15px;
        padding-left: 15px;
        width: 100%;
    }
    .navbar-header{ height: 60px; margin-right: 30px; }
    .navbar-header-push{
        float: left;
        /*-webkit-transform: translateX(-70px);
            -ms-transform: translateX(-70px);
            -moz-transform: translateX(-70px); 
                -o-transform: translateX(-70px);
                    transform: translateX(-70px);*/
    }
        .navbar-brand{ padding: 0; padding-right: 15px; }
        .product-logo{ display: inline-block; /*margin-left: 27px;*/ }


        /*-----$Nav List-----*/
        .list-menu{display: inline;}
        .button-menu-push{
            float: right; 
            /*-webkit-transform: translateX(15px);
                -ms-transform: translateX(15px);
                -moz-transform: translateX(15px); 
                    -o-transform: translateX(15px);
                        transform: translateX(15px);*/
        }
        
        .navbar .list-menu .dropdown > a{
            line-height: 30px;
            padding-top: 15px; 
            padding-bottom: 15px;
            -webkit-transition: padding 0.4s ease;
                -ms-transition: padding 0.4s ease;
                -moz-transition: padding 0.4s ease;
                    -o-transition: padding 0.4s ease;
                        transition: padding 0.4s ease;
        }
        .nav i.fa-angle-down{float: right;}
        .nav .fa-lg{line-height: 30px; color: #6a6a6a;}
        

        /*-----$Nav Button-----*/
        .button-menu > li{
            padding-left: 15px;
            padding-top: 10px; 
            padding-bottom: 10px;
        }
        .button-menu > li > a{
            display: inline-block; 
            padding: 0; 
            width: 9vw;
        }
            .navbar-button{ width: 100%; height: 40px; }





/*------------------------------------
        $Adjust Available
------------------------------------*/
.navbar-container{border-bottom: 1px solid #e1e1e1;}
.bg-color-topbar{background-color: #fff;} /*topbar background color*/
    .navbar .list-menu .dropdown > a{color: black;} /*topbar text color*/
    .navbar .list-menu .dropdown > a:hover{color: #ff4139;} 
    .navbar .list-menu .dropdown > a:focus{color: #000;}
    .open > a, .dropdown-menu{
        border: none;
        border-radius: 0;
        background-color: #f5f5f5 !important; /*topbar list background color*/
        color: #ff4139 !important; /*topbar text color*/
        font-size: 1rem; 
    }
     
    .dropdown-menu{ background-color: #272727; padding: 10px 0;}/*dropdown-menu background color*/
        .dropdown-menu > li > a{ color: black !important; padding-top: 5px; padding-bottom: 5px; padding-right: 40px; font-weight: 300;} /*dropdown-menu text color*/
        .dropdown-menu > li > a:hover{ background-color: #ff4139 !important; color: #fff !important; }
        .dropdown-menu > li > a:focus{ background-color: transparent; }



@media screen and (max-width: 1200px) {
    .navbar-collapse { border-top: 2px solid #E2E2E2; }
        .dropdown{ border-bottom: 2px solid #F3F3F4; }
            .dropdown-menu{ background-color: transparent; }
}





/*------------------------------------
            $Media Query
------------------------------------*/
@media screen and (max-width: 1500px) {
    .navbar-row{ padding-right: 30px; padding-left: 30px; }
}

@media (min-width: 1200px) and (max-width: 1300px)  {
    .navbar .list-menu .dropdown > a{ padding-left: 10px; padding-right: 10px; }
}

@media screen and (min-width: 1201px) {
    .nav i.fa-angle-down{display: none !important; float: right;}
    .button-menu > li > a{max-width: 120px;}
}

@media screen and (max-width: 1200px) {
    /*------------------------------------
        $Navbar to collapse sooner
    ------------------------------------*/
    .navbar-header {float: none;}
    .navbar-left,.navbar-right {float: none !important;}
    .navbar-toggle {display: block;}
    .navbar-collapse {
        /*box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);*/
        padding: 0;
        max-height: 100% !important; 
    }
    .navbar-fixed-top {top: 0; border-width: 0 0 1px;}
    .navbar-collapse.collapse {display: none!important;}
    .navbar-nav {float: none!important;}
    .navbar-nav>li {float: none;}
    .navbar-nav>li>a {padding-top: 10px; padding-bottom: 10px;}
    .collapse.in{display:block !important;}





    /*------------------------------------
            $Hamburger Button Style
    ------------------------------------*/
    .navbar-toggle { 
         border: none; 
         color: #5a5a5a;
         font-size: 1.5rem; 
         margin-right: 0; 
    }
    .navbar-toggle:hover { 
        background-color: transparent !important;
        color: black; 
        margin-right: 0; 
    }
    .navbar-toggle:focus { background-color: transparent !important; }
    




    .open > a, .dropdown-menu{ background-color: transparent !important; }
    .open i.fa-angle-down{
        -webkit-transform: rotate(180deg);
            -ms-transform: rotate(180deg);
            -moz-transform: rotate(180deg);
                -o-transform: rotate(180deg);
                    transform: rotate(180deg);
    }
    
    /*--------------------------------------
        $Dropdown Menu transition animation
    ---------------------------------------*/
    .dropdown .dropdown-menu {
        max-height: 0;
        display: block;
        overflow: hidden;
        opacity: 0;
        padding: 0;
        -webkit-transition: all 0.4s ease;
            -ms-transition: all 0.4s ease;
            -moz-transition: all 0.4s ease;
                -o-transition: all 0.4s ease;
                    transition: all 0.4s ease;
    }
    .open .dropdown-menu {
        max-height: 250px;
        opacity: 1;
        padding-bottom: 15px;
    }





    .dropdown-menu{
        position: static;
        float: none;
        width: auto;
        margin-top: 0;
        background-color: transparent;
        border: 0;
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .dropdown-menu > li > a { 
        padding-left: 0 !important; 
        -webkit-transition: all 0.4s ease;
            -ms-transition: all 0.4s ease;
            -moz-transition: all 0.4s ease;
                -o-transition: all 0.4s ease;
                    transition: all 0.4s ease; 
    }
    .dropdown-menu > li > a:hover{ padding-left: 15px !important;}

    .navbar-row{ padding: 0; }
        .navbar-header{ 
            padding-right: 30px;
            padding-left: 30px; 
            margin: 0; 
        }
        .rl-style .navbar-collapse{padding: 0 55px;}
            .product-logo{ margin: 0 auto; }
            .product-logo > img{ max-width: 100%; /*width: 100%;*/ }

    .list-menu,.button-menu{ width: 100%; margin: 0; }
    .navbar .list-menu .dropdown > a{ padding: 15px 0; }

    .rl-style .button-menu{margin-top: 20px; margin-bottom: 20px;}
        .button-menu > li{padding-left: 0;}
        .button-menu > li > a{width: 30%; padding: 0;}
}

@media screen and (max-width: 991px) { }

@media screen and (max-width: 768px) { .button-menu > li > a{width: 100%;} }

@media screen and (max-width: 568px) {
    .navbar-header{ padding-right: 15px; padding-left: 15px; }
        .navbar-brand{ padding-right: 5px; }
        .navbar-toggle{padding-right: 0; margin-right: 0;}
}

@media screen and (max-width: 400px) { .rl-style .navbar-collapse{padding: 0 15px;} }