/* Togle Menu Style */
button.menu-toggle{font-size: 0; border: 0; outline: 0; width: 30px; height: 22px; background-color: inherit; position: fixed; cursor: pointer; display: none;}
button.menu-toggle:before{content: ""; position: absolute;  left: 0; right: 0; top: 0; height: 4px; background-color: rgba(255,255,255,1);transform: translateY(0px); opacity: 1;}
button.menu-toggle:after{content: ""; position: absolute;  left: 0; right: 0; bottom: 0; height: 4px; background-color: rgba(255,255,255,1);transform: translateY(0px); opacity: 1;}

button.menu-toggle:before,
button.menu-toggle:after{transition: all 0.4s;  transition-timing-function: cubic-bezier(.17,.35,.75,1.3);}

button.menu-toggle:hover:before{opacity: 0; height: 1px; left: 50%; right: 50%;}
button.menu-toggle:hover:after{ opacity: 0; height: 1px; left: 50%; right: 50%;}

button.menu-toggle span{position: absolute; left: 0; right: 0; top: 9px; height: 4px; background-color: inherit; display: inline-block; z-index: 1;}

button.menu-toggle span:before{content: ""; position: absolute; left: 0; right: 0; top: 0px; height: 4px; background-color: rgba(255,255,255,1); display: inline-block; z-index: 2;transition: all 0.4s;  transition-timing-function: cubic-bezier(.17,.35,.75,1.4);}
button.menu-toggle span:after{content: ""; position: absolute; left: 0; right: 0; top: 0px; height: 4px; background-color: rgba(255,255,255,1); display: inline-block; z-index: 2;transition: all 0.4s;  transition-timing-function: cubic-bezier(.17,.35,.75,1.4);}

button.menu-toggle:hover span:before{transform-origin: 50% 50%; transform: rotate(45deg);}
button.menu-toggle:hover span:after{transform-origin: 50% 50%; transform: rotate(-45deg);}
/* Togle Menu Style */


ul.primary-menu{list-style: none; margin: 0; width: 100%; font-size: 0; text-align: left; }
ul.primary-menu li{display: inline-block; }
ul.primary-menu > li > a{font-family: 'Roboto', sans-serif; display: inline-block;font-size:14px; line-height:24px; font-weight: 500; letter-spacing: 0.5px; color: #717476; text-transform: uppercase; padding: 25px 20px;  position: relative; transition: all 0.4s;  transition-timing-function: cubic-bezier(.17,.35,.75,1.3);
-webkit-animation: outmouse 0.5s reverse;
    animation: outmouse 0.5s reverse;
    }
    
ul.primary-menu > li:hover > a{ color: #001d29; 
 -webkit-animation: onmouse 0.5s alternate;
    animation: onmouse 0.5s alternate;
 }


/* this the animation (name is bounce )*/
@-webkit-keyframes outmouse {
  0%, 49%, 50%, 51%, 100% {
    	color: #717476; transform: translateY(0%); opacity: 1;
	}
  	49% {
    	color: #717476; transform: translateY(5%); opacity: 0;
	}
     50% {
    	color: #717476; transform: translateY(5%); opacity: 0;
	}
	 51% {
    	color: #000; transform: translateY(-5%); opacity: 0;
	}
  	100% {
    	color: #000; transform: translateY(0%); opacity: 1;
	}
}

@-webkit-keyframes onmouse {
  0%, 49%, 50%, 51%, 100% {
    	color: #717476; transform: translateY(0%); opacity: 1;
	}
  	49% {
    	color: #717476; transform: translateY(5%); opacity: 0;
	}
     50% {
    	color: #717476; transform: translateY(5%); opacity: 0;
	}
	 51% {
    	color: #000; transform: translateY(-5%); opacity: 0;
	}
  	100% {
    	color: #000; transform: translateY(0%); opacity: 1;
	}
}

ul.primary-menu li:hover a:before{ }


@media only screen and (min-width: 992px){	
	ul.primary-menu li{position: relative;}

	ul.primary-menu li ul{visibility: hidden; opacity: 0; transform: translateX(20px) scale(1.025,1.0); transform-origin: 0 0; transition: all 0.4s;  transition-timing-function: cubic-bezier(.17,.35,.75,1.3);}
	ul.primary-menu li:hover ul{visibility: visible; opacity: 1; transform: translateX(0px) scale(1,1);}

	ul.primary-menu li ul{position: absolute;  left: 20px; top: 100%; width: 100%; min-width: 250px; background-color: #1b1c1d; text-align: left; padding: 5px 0; }
	ul.primary-menu li ul:before{content: ""; position: absolute; left: 15px; top: -19px; display: inline-block;
		border-left: solid 10px transparent;
		border-top: solid 10px transparent;
		border-right: solid 10px transparent;
		border-bottom: solid 10px #1b1c1d;
	}
	ul.primary-menu li ul li {width: 100%; display: inline-block;}
	ul.primary-menu li ul li a{padding: 10px 20px; display: inline-block; font-family: 'Roboto', sans-serif; font-size:14px; line-height:24px; font-weight: 400; letter-spacing: 0.5px; color: #fff; }
}


@media only screen and (max-width: 991px){
	.site-header-menu ul li ul.sub-menu{margin-bottom: 20px !important;}
	.site-header-menu ul li ul.sub-menu li{position: relative;}
	.site-header-menu ul li ul.sub-menu li:before{content: ""; position: absolute; width: 7px; height: 2px; background-color: #b0b0b0; display: inline-block; left: 10px;  top: 15px;}
	.site-header-menu ul li ul.sub-menu li a{font-size: 18px !important; padding-left: 10px !important; color: #b0b0b0 !important; text-transform: uppercase;}
	.main_navigation{position: relative; height: 100%;}
	.menu-main-menu-container{position: absolute; left: 0; top: 0; bottom: 0; right: 0; overflow: auto;}

	    button.menu-toggle{display: inline-block;}
		body.open_menu .site_header{ position: fixed; z-index: 99 !important; }
		.menu_wrap{float: right !important; padding: .5rem .75rem;
				font-size: 1.25rem;
				line-height: 1;
				background: 0 0;
				border: 1px solid transparent;
				border-radius: 1.4rem;
		}

		.site-header-menu{bottom: 0; display: block;
				position: fixed;
				width: 350px !important;
				left: 0;
				bottom: 0;
				top: inherit !important;
				height: 100%;
				background-color: #1b1c1d !important;
				transform: translateX(-100%);
				transition: all 0.4s;
				transition-timing-function: cubic-bezier(.17,.35,.75,1);
				padding-top: 60px;
				z-index: 9999;
				margin-bottom: 0 !important;
		}

		body.open_menu .site-header-menu{transform: translateX(0%);}

		.menu-toggle{ display: block; position: fixed; right:25px; top: 13px; width: 30px; height: 22px;margin: 0; font-size: 0; border:0; z-index: 9999999; }
		.menu-toggle:before{content: ""; position: absolute; left: 0; right: 0; top: 0; height:4px; background-color: #000;}
		.menu-toggle:after{content: ""; position: absolute; left: 0; right: 0; bottom: 0; height:4px; background-color: #000;}
		.menu-toggle span{position: absolute; top: 9px; left: 0; right: 0; height:4px; background-color: #000;}

		.menu-toggle.toggled-on, .menu-toggle.toggled-on:hover, .menu-toggle.toggled-on:focus{background-color: rgba(255,255,255,0); outline: 0;}

		.site-header-menu ul{ border: 0 !important;}
		.site-header-menu ul li{width: 100%; border: 0; padding: 2px 15px;}
		.site-header-menu ul li a{font-size: 20px; line-height: 26px; color: rgba(215,215,215,1) !important;}


		body{overflow-x: hidden;}

		body.open_menu{overflow: hidden; height: 100%;}

		body .site-header-menu:before{content:""; position: fixed;left: inherit !important; top: 0; right: 350px; bottom: 0; background-color: rgba(255,255,255,0.0) !important; z-index: -1 !important; display: block !important; height: inherit !important; 		transition: all .8s;	  transition-timing-function: cubic-bezier(.17,.67,.35,1); width: 1000%; visibility: hidden;}

		body.open_menu .site-header-menu:before{left: inherit !important;background-color: rgba(25,30,32,0.75) !important;width: 1000%; visibility: visible; right: 350px;}
	


}