/* ===== Small Screens ===== */

@media screen and (max-width:992px){
	.nav-cover {
		position:fixed;
		top:0px;
		left:0px;
		width:100vw;
		height:100vh;
		background:rgba(0,0,0,.5);
		z-index:1000;
		visibility:hidden;
		opacity:0;
		transition:visibility 2s, opacity .2s;	
	}
	
	.nav-menu-container { background: transparent; }
	
	.nav-menu-sm  { font-size: 0; }
	
	.nav-menu-sm .logo {
		width:90%;
		margin:10px auto 10px auto;
	}
	
	.nav-menu-sm .container {
		padding:10px;
		display:flex;
		justify-content:flex-start;
		align-items:center;
	}
	
	.nav-menu-sm:lang(ar) .container { flex-direction: row-reverse; }
	
	.nav-menu-sm .nav-button {
		float:right;
		display:flex;
		align-items:center;
		justify-content:center;
		width:35px;
		height:35px;
		background:#1b69bc;
		border-radius:3px;
		color:white;
		cursor:pointer;
		font-size:20px;
	}
	
	.nav-menu-sm .nav-button:active {
		background:#055da4;
	}
	
	.nav-menu-sm .close-nav {
		position:fixed;
		top:7px;
		left:215px;
		right:auto;
		font-size:30px;
		color:#f8f8f8;
		z-index:1000;
		cursor:pointer;
	}
	
	.nav-menu-sm:lang(ar) .close-nav { left:auto; right:215px; }
	
	.nav-menu-sm span {
		color:white;
		float:left;
		font-size:13px;
		margin-left: 10px;
		margin-right: auto;
	}
	
	.nav-menu-sm:lang(ar) span { margin-left: auto; margin-right: initial; }
	
	.nav-dropdown { margin:0; padding:0; }
	
	.nav-menu { margin:0; padding:0; }
	
	.nav-menu > li.nav-item { display:block; position:relative; }
	
	.nav-menu {
		position:fixed;
		top:0px;
		right:auto;
		left:0px;
		transform:translateX(-220px);
		width:200px;
		height:100vh;
		z-index:10000;
		background:#fefefe;
		overflow-y:auto;
		box-shadow:0px 0px 20px rgba(0,0,0,.5);
	}
	
	.nav-menu:lang(ar){ right:0px; left:auto; transform:translateX(220px); }
	
	.nav-menu-opened { transform:translateX(0px); }
	
	.nav-menu-opened:lang(ar) { transform:translateX(0px); }
	
	.nav-menu::-webkit-scrollbar { width: 0px; }
	
	.nav-menu .container { padding:7px }
	
	.nav-menu > li.nav-item > a {
		width:100%;
		display:block;
		padding:15px;
		color:#202020;
		border-top:1px solid #eee;
	}
	
	.nav-menu > li.nav-item:last-child > a {
		border-bottom:1px solid #eee;
	}
	
	.nav-menu > li.nav-item span.fa-angle-down {
		float:right;
		margin-top:4px;
		transition:transform 0.25s;
	}
	
	.nav-menu:lang(ar) > li.nav-item span.fa-angle-down {
		float:left;
	}	
	
	.nav-menu > li.nav-item:active > a, .nav-menu > li.active > a {
		background:#0664a9;
		color:#fefefe;
	}
	
	.nav-menu > li.active span.fa-angle-down {
		transform:rotate(-180deg);
	}	
	
	.nav-menu > li.active > a i {
		color:#fefefe !important;
	}
	
	.nav-menu > li.nav-dropdown-item > ul.nav-dropdown {
		display:none;
		overflow:hidden;
	}
	
	.nav-menu > li.nav-dropdown-item > ul.nav-dropdown > li > a {
		display:block;
		width:100%;
		padding:10px;
		color:#234b6e;
	}
	
	.nav-menu > li.nav-dropdown-item > ul.nav-dropdown > li:active > a {
		color:#1e405e;
	}
	
	.nav-menu > li.nav-dropdown-item > ul.nav-dropdown .menu_block i {
		margin-left:5px;
	}	
	
	.nav-menu > li.nav-item > a i {
		font-size:16px;
		color:#234b6e;
		margin:0px 10px 0px 0px;
	}
	
	.nav-menu:lang(ar) > li.nav-item > a i {
		margin:0px 0px 0px 10px;
	}	

	/* New Items */
	
	.nav-menu > li.nav-dropdown-item > ul.nav-dropdown .menu_block i {
		margin-left:5px;
	}
	
	.nav-menu > li.nav-dropdown-item > ul.nav-dropdown .menu_block {
		margin:0px 0px 5px 0px;
	}
	
	.nav-menu > li.nav-dropdown-item > ul.nav-dropdown .menu_block:last-child {
		margin:0px;
	}
	
	.nav-menu > li.nav-dropdown-item > ul.nav-dropdown .menu_block b {
		font-size:13px;
		font-weight:normal;
		display:block;
		width:100%;
		color:#505050;
		line-height:200%;
	}
	
	.nav-menu > li.nav-dropdown-item > ul.nav-dropdown .menu_block b > a {
		color:#447094 !important;
	}
	
	.nav-menu:lang(ar) > li.nav-dropdown-item > ul.nav-dropdown .menu_block b > a {
		line-height:1.75;
	}
	
	.nav-menu > li.nav-dropdown-item > ul.nav-dropdown .menu_block span > a {
		display:block;
		width:100%;
		font-size:13px;
		line-height:200%;
	}
}

/* ===== Large Screens ===== */

@media screen and (min-width:992px){
	.nav-menu-sm { display: none; }
	
	.nav-menu-container {
		background: transparent;
		font-size:14px;
	}
	
	.nav-menu { margin:0 auto 0 auto; padding:0; text-align:center; }
	
	.nav-menu > li.nav-item { display:inline-block; }
	
	.nav-menu > li.nav-item > a {
		display:block;
		padding:15px;
		color:#f8f8f8;
	}
	
	.nav-menu > li.nav-item > a i {
		font-size:16px;
		color:#f8f8f8;
		margin:0px 10px 0px 0px;
	}
	
	.nav-menu:lang(ar) > li.nav-item > a i {
		margin:0px 0px 0px 10px;
	}
	
	.nav-menu > li.nav-item:hover > a {
		border-radius:3px;
		background:rgba(255,255,255,.2);
	}
	
	.nav-menu > li.nav-item:hover > a i {
		color:#fff;
	}
	
	.nav-menu > li.nav-item:hover span.fa-angle-down {
		transform:rotate(-180deg);
		color:#fff;
	}
	
	.nav-menu > li.nav-item.special > a {
		margin-right:10px;
		background:#35a8eb;
		border-radius:3px;
		box-shadow:1px 1px 2px rgba(0,0,0,.2);
	}
	
	.nav-menu > li.nav-item.special:hover > a {
		background:#3cb7ff;
	}

	.nav-menu > li.nav-dropdown-item.hover > .nav-dropdown {
		visibility: visible;
		opacity:1;
	}
	
	.nav-menu > li.nav-dropdown-item > ul.nav-dropdown {
		position:absolute;
		z-index:1000;
		width:220px;
		overflow:hidden;
		margin:-3px auto 0 auto;
		padding:0;
		text-align:left;
		box-shadow:0px 10px 10px rgba(0,0,0,.1);
		background:rgba(255,255,255,1);
		visibility: hidden;
		opacity:0;
		transition: visibility 0s, opacity 0.2s, transform 0.2s;
		border-radius:5px;
	}
	
	.nav-menu:lang(ar) > li.nav-dropdown-item > ul.nav-dropdown { text-align:right; }
	
	/* New Items */
	
	.nav-menu > li.nav-item span.fa-angle-down {
		color:#f8f8f8;
		transition:transform 0.3s;
		margin:0 0 0 5px;
		position:relative;
		bottom:-2px;
	}
	
	.nav-menu:lang(ar) > li.nav-item span.fa-angle-down {
		margin:0 5px 0 0;
	}

	.nav-menu > li.nav-dropdown-item > ul.nav-dropdown .menu_block i {
		margin:0 5px 0 0;
	}
	
	.nav-menu:lang(ar) > li.nav-dropdown-item > ul.nav-dropdown .menu_block i {
		margin:0 0 0 5px;
	}
	
	.nav-menu > li.nav-dropdown-item > ul.nav-dropdown .menu_block b {
		font-size:13px;
		font-weight:normal;
		display:block;
		width:100%;
		color:#505050;
		line-height:200%;
	}
	
	.nav-menu > li.nav-dropdown-item > ul.nav-dropdown .menu_block b a {
		color:#505050 !important;
	}
	
	.nav-menu > li.nav-dropdown-item > ul.nav-dropdown .menu_block b a:hover {
		color:#107dbc !important;
	}
}