/* main navigation */
.main_nav{ float: right; position: relative; width: 75%;}

/* .sticky .main_nav{ top: 14px;} */

#mainnav{ font-family: 'Muli', sans-serif;}
ul#topnav{ margin: 0; padding: 0; list-style: none; text-align: right;}
ul#topnav li{ display: inline-block; padding: 0px 20px 20px;}
ul#topnav li:last-child{ padding-right: 0px;}
ul#topnav li a{ color: #fff; font-weight: 700; font-size: 16px; text-shadow: 2px 1px 2px #000;}
ul#topnav li .drop_level2_wrapper{ display: none; position: absolute; width: 100%; top: 30px; right: 0px; float:right; background-color: #e4e4e4; background-image: url(custom/images/dropdown_bg.png); background-size: cover; background-repeat: no-repeat; background-position: center; border-bottom: 6px solid #b22534; padding: 25px 0px;}
ul#topnav li:hover .drop_level2_wrapper{ display: block;}

ul#topnav li .drop_level2_wrapper .nav_drop_left{ float: left; width: calc(40% - 60px); padding: 0px 35px 0px 25px;}
ul#topnav li .drop_level2_wrapper .nav_drop_left ul{ list-style: none; margin: 0; padding: 0; text-align: left; column-count: 2;}
ul#topnav li .drop_level2_wrapper .nav_drop_left ul li{ padding: 10px 0px; text-align: left; display: block;}
ul#topnav li .drop_level2_wrapper .nav_drop_left ul li a{ font-size: 16px; color: #000; letter-spacing: 0px; font-family: 'Muli', sans-serif; /* padding: 10px; */ text-shadow: none;}
ul#topnav li .drop_level2_wrapper .nav_drop_left ul li a:hover{ color: #b22534;}


ul#topnav li .drop_level2_wrapper .nav_drop_right{ float: right; width: calc(60% - 60px ); padding: 0px 25px 0px 35px;}
ul#topnav li .drop_level2_wrapper .nav_drop_right .nav_img{ width: 35%; float: left;}

ul#topnav li .drop_level2_wrapper .nav_drop_right .nav_text{ float: left; width: 60%; text-align: left;}
ul#topnav li .drop_level2_wrapper .nav_drop_right .nav_text p{ color: #000; font-family: 'Muli', sans-serif; font-size: 16px; text-align: left; line-height: 115%; font-weight: 400; padding:0; margin: 0px; padding-left: 20px;}
ul#topnav li .drop_level2_wrapper .nav_drop_right .nav_text a{ color: #fff; font-family: 'Tajawal', sans-serif; font-size: 10px; text-align: left; letter-spacing: 1px; padding: 10px 25px; background: #b22534; display: inline-block; margin-top: 25px; margin-left: 20px; text-shadow: none; text-transform: uppercase;}
ul#topnav li .drop_level2_wrapper .nav_drop_right .nav_text a:hover{ background: #3f3f3f;}

.togglemenu{ display: none; color: #fff; font-size: 24px; float: right;}
ul#topnav li.mobile_nav_item{display: none;}

/* sticky nav */
.sticky ul#topnav li{ padding: 0px 20px;}
/* .sticky ul#topnav li a{ position: relative;} */
.sticky ul#topnav li:hover::after{ content: ""; position: absolute; width: 100%; height: 35px; left: 0px; right: 0px; top: 100%;}
.sticky ul#topnav li::after:hover .drop_level2_wrapper{ display: block;}
.sticky ul#topnav li .drop_level2_wrapper{ top: 49px;}

/* mmenu */
#mm-mainnav{ z-index: 9999; font-family: 'Muli', sans-serif; background: #b22534;}
#mm-mainnav::after{ content:"\f00d"; color: #fff; position: absolute; left: 100%; top: 20px; background: #b22534; padding: 3px; font-size: 35px; font-family: fontawesome;}

#mm-mainnav .nav_img{ height: 126px; text-align: left; margin-top: 15px;}
#mm-mainnav .nav_text p{ color: #fff; padding: 15px 0px 0px 0px; margin: 0px;}
#mm-mainnav .nav_text a{ color: #fff; font-family: 'Tajawal', sans-serif; font-size: 10px; text-align: left; letter-spacing: 1px; padding: 10px 25px; border: #fff solid 2px; display: inline-block; margin-top: 15px; text-decoration: none;}

@media only screen and ( min-width: 1400px){
	ul#topnav li .drop_level2_wrapper .nav_drop_left ul li a, ul#topnav li a, ul#topnav li .drop_level2_wrapper .nav_drop_right .nav_text p{ font-size: 19px;}
}
@media only screen and ( max-width: 1200px){
	ul#topnav li{ padding: 0px 10px 20px;}
	.sticky ul#topnav li{ padding: 0 10px;}
}
@media only screen and ( max-width: 1100px){
	ul#topnav li{ padding: 0px 6px 20px;}
	.sticky ul#topnav li{ padding: 0 6px;}
}

@media only screen and ( min-width: 960px){
	ul#topnav li .drop_level2_wrapper .nav_drop_left ul li .drop_level2_wrapper{ display: none;}
}

@media only screen and ( max-width: 960px){
	.togglemenu{ display: inline-block;}
	.togglemenu i.toggle_open{ display: inline-block;}
	.togglemenu i.toggle_close{ display: none;}
	.mm-opened .togglemenu i.toggle_open{ display: none;}
	.mm-opened .togglemenu i.toggle_close{ display: inline-block;}
	.mm-opened .togglemenu{ position: absolute; right: 0px; top: 0px; z-index:9999; background:#b22534; padding:  10px 15px; box-shadow: 0px 4px 4px rgba(0,0,0,0.4);}
	.mm-opened{ background: #000;}
	.mm-opened #main_sec{ opacity: 0.5; }
	
	#mainnav{ display: none;}
	.main_nav{ width: auto;}
	ul#topnav li .drop_level2_wrapper{ display: block;}
	ul#topnav li.mobile_nav_item{display:block;}
}

@media only screen and ( max-width: 640px){
	.togglemenu.tablet{ display: none;}
	#mm-mainnav::after{ top: 5px;}
}