/* Togle Menu Style */

button.menu-toggle{font-size: 0; border: 0; outline: 0; width: 30px; height: 23px; background-color: inherit; position:  relative; cursor: pointer; display: none; vertical-align: top; margin-top: 8px; margin-left: 15px; margin-right: 10px;}

button.menu-toggle:before{content: ""; position: absolute;  left: 3px; right: 3px; top: 3px; height: 3px; background-color: var(--primery-color);transform: translateY(0px); opacity: 1;}

button.menu-toggle:after{content: ""; position: absolute;  left: 3px; right: 3px; bottom: 3px; height: 3px; background-color: var(--primery-color);transform: translateY(0px); opacity: 1;}



button.menu-toggle:before,

button.menu-toggle:after{transition: all 0.3s var(--animation);}


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


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



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



button.menu-toggle span:before{content: ""; position: absolute; left: 0; right: 0; top: 0px; height: 3px; background-color: var(--primery-color); display: inline-block; z-index: 2;transition: all 0.3s var(--animation);}

button.menu-toggle span:after{content: ""; position: absolute; left: 0; right: 0; top: 0px; height: 3px; background-color: var(--primery-color); display: inline-block; z-index: 2;transition: all 0.3s var(--animation);}


button.menu-toggle.toggled-on span:before,
button.menu-toggle:hover span:before{transform-origin: 50% 50%; transform: rotate(45deg);}

button.menu-toggle.toggled-on span:after,
button.menu-toggle:hover span:after{transform-origin: 50% 50%; transform: rotate(-45deg);}

/* Togle Menu Style */

.main-navigation{margin: 0;}



#masthead ul.primary-menu{list-style: none; margin: 0; width: 100%; font-size: 0; text-align: center; }

#masthead ul.primary-menu li{display: inline-block; float: none; }


#masthead ul.primary-menu > li.menu-item-has-children button.dropdown-toggle{display:none; border:0 !important;}

#masthead ul.primary-menu > li.menu-item-has-children a:after{display: none;}
#masthead ul.primary-menu > li > a{display: inline-block;font-size:13px; padding: 12px 25px; font-family: var(--roboto); line-height:24px; font-weight: 400; letter-spacing: 0.75px; text-transform: uppercase;  position: relative; transition: all 0.3s var(--animation);



    }

    





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







@media only screen and (max-width: 1199px){
	#masthead ul.primary-menu{text-align: left; margin: 0 0 50px 0;}

		#masthead #site-navigation{width: 100%; display: inline-block; height: 100%; width: calc(100% + 20px); overflow-y: auto; overflow-x: hidden;}

		#masthead #site-navigation > div{width: calc(100% - 20px);  }

		#masthead #site-navigation .menu-header-menu-container #menu-header-menu{width: calc(100% - 40px);}

	

	    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; overflow: hidden;

				position: fixed;

				width: 320px !important;

				left: 0;

				bottom: 0;

				top: inherit !important;

				right: inherit !important;

				height: 100%;

				background-color: var(--primery-color) !important;

				transform: translateX(-100%);

				transition: all 0.3s var(--animation);

				padding-top: 50px;

				z-index: 9999;

				margin-bottom: 0 !important;

		}



		.site-header-menu.toggled-on{transform: translateX(0%);}



		.menu-toggle{ display: block; /*position: fixed; right:25px; top: 33px;*/ 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: var(--primery-color);}

		.menu-toggle:after{content: ""; position: absolute; left: 0; right: 0; bottom: 0; height:4px; background-color: var(--primery-color);}

		.menu-toggle span{position: absolute; top: 9px; left: 0; right: 0; height:4px; background-color: var(--primery-color);}



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



		.site-header-menu ul{ border: 0 !important;}

		.site-header-menu ul li{width: 100%; border: 0; padding: 2px 0px;}

		#masthead .site-header-menu ul li a{font-size: 22px; line-height: 26px; color: var(--white) !important; font-weight: 400; padding: 12px 25px; font-family: var(--josefin); text-align: left;text-transform: uppercase;} 





		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: 320px; bottom: 0; background-color: rgba(255,255,255,0.0) !important; z-index: -1 !important; display: block !important; height: inherit !important; 		transition: all 0.3s var(--animation); 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: 320px;}

	



}