/*------------------------------------*\
    		$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;
    }





/*------------------------------------
    		$Navbar
------------------------------------*/
.navbar-container{
	border-radius: 0; 
	border: none;
	margin: 0;
	width: 100%;
}
.paddingNavbar{
	    max-width: 1610px;
	    margin: 0 auto;
	}
	.navbar-row{
		max-width: 1440px;
		/*padding-right: 15px;
		padding-left: 15px;*/
		margin: 0 auto;
		/* padding-right: 100px; */
	    /* padding-left: 30px; */
	    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);
		-webkit-transition: -webkit-transform 0.4s ease;
            -ms-transition: -ms-transform 0.4s ease;
            -moz-transition: -moz-transform 0.4s ease;
                -o-transition: -o-transform 0.4s ease;
					transition: transform 0.4s ease;*/
	}
		.navbar-brand{ padding: 0; }
		.product-logo{ display: inline-block; margin-left: 27px; }
		/*.product-logo > a > img{ width: 100%;}*/

		/*-----$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;
		}
		.nav i.fa-angle-down{float: right;}
		.nav .fa-lg{line-height: 30px;}


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





/*------------------------------------
    	$Adjust Available
------------------------------------*/
/*.navbar-container{border-bottom: 1px solid #adadad; border-color: hsla(0, 0%, 30%, 1);}*/
.bg-color-topbar{background-color: #191919;} /*topbar background color*/
	.navbar .list-menu .dropdown > a{color: #8f8f8f;} /*topbar text color*/
	.navbar .list-menu .dropdown > a:hover{color: #42d365 !important;} 
	.navbar .list-menu .dropdown > a:focus{color: #8f8f8f;}
	.open > a, .dropdown-menu{
		border: none;
		border-radius: 0;
		background-color: #393939 !important; /*topbar list background color*/
		color: #42d365 !important; /*topbar text color*/
		font-size: 1rem;
	}
	a.dropdown.open ~ .dropdown-menu {
		display: block;
	}
	 
	.dropdown-menu{ background-color: #f8f8f8 !important; width: 120%; }/*dropdown-menu background color*/
		.dropdown-menu > li > a{ color: #000 !important; } /*dropdown-menu text color*/
		.dropdown-menu > li > a:hover{ background-color: #42d365 !important; /*color: #000 !important;*/ }
		.dropdown-menu > li > a:focus{ background-color: transparent; }

	/*default button 2 with border*/
	.rl-btn-border{
		background-color: transparent;
        border: 2px solid #42d365;
        color: #42d365;
        /*line-height: normal;*/
        font-size: 1rem;
        border-radius: 0;
         transition: all 0.17s ease-in-out;
    -moz-transition: all 0.17s ease-in-out;
    -webkit-transition: all 0.17s ease-in-out;
    -o-transition: all 0.17s ease-in-out;
	}
	.rl-btn-border:hover, .rl-btn-border:active, .rl-btn-border:active:focus{
        background-color: rgba(93, 243, 57, 0.35) !important;
        border: 2px solid #42d365;
        color: #ffffff !important;
        outline:none;
    }
    .rl-btn-border:focus{
        background-color: transparent;
        border: 2px solid #42d365;
        color: #42d365;
        outline:none;
    }


.activelink { color:#42d365 !important; }
.normallink { color:#8f8f8f !important; }



@media screen and (max-width: 1100px) {
	.navbar-collapse { 
		border-top: 1px solid #adadad !important; 
		/*border-color: hsla(0, 0%, 30%, 1) !important;*/
	}
		.dropdown{ border-bottom: 1px solid #8f8f8f; border-color: hsla(0, 0%, 30%, 1) !important;}
			.dropdown-menu{	background-color: transparent; }
}





/*------------------------------------
    		$Media Query
------------------------------------*/
@media screen and (max-width: 1600px) {
	.navbar-row{ padding-right: 30px; padding-left: 30px; }
	/*.navbar-header-push{ 
		-webkit-transform: translateX(0px);
			-ms-transform: translateX(0px);
			-moz-transform: translateX(0px); 
				-o-transform: translateX(0px);
					transform: translateX(0px);
	} 
	.button-menu-push{ 
		-webkit-transform: translateX(0px);
			-ms-transform: translateX(0px);
			-moz-transform: translateX(0px); 
				-o-transform: translateX(0px);
					transform: translateX(0px);
	}*/
}


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

@media screen and (max-width: 1100px) {
	/*------------------------------------
    	$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-left: 0; padding-top: 10px; padding-bottom: 10px;}
    .collapse.in{display:block !important;}





	/*------------------------------------
    		$Hamburger Button Style
	------------------------------------*/
	.navbar-toggle { 
		 border: none; 
		 color: #aaa;
		 font-size: 1.5rem; 
		 margin-right: 0; 
	}
	.navbar-toggle:hover { 
		background-color: transparent !important;
		color: #42d365;
		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: 200px;
	    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; }

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

	.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: 500px) {
	.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;} }