/* For MOE*/
.hierarchical .parallax{display:none}
.hierarchical .top-head  {  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    position: relative !important;
    z-index: 999;
    width: 100%;
    top: 0;
left: 0;    color: #777 !important;;}
.hierarchical .top-head.sticky-nav .top-nav > ul > li > a {
color: #777 !important;}

.top-head.transparent .top-nav > ul > li > a{
color: #777 !important;}
/*Now the CSS*/

.hierarchical .set-height-top{display:none}
.hierarchical .nav-subscribe{display:none}
.hierarchical footer{display:none}
.hierarchical #back-top{display:none}
.hierarchical .buttons{    position: absolute;
    bottom: -88vh;
    background: #26B7B4;
    width: 100%;
    padding: 10px;}

.hierarchical .buttons	button{ padding: 3px 10px;
     padding: 3px 10px;
    border-radius: 4px;
    background: #fff;
    font: normal 19px/22px 'Noto Naskh Arabic UI', serif;
    border: 2px solid #ccc;
    color: #009BB7;}
	

.hierarchical  .zoom-range {    display: inline-block;
    width: 150px;}
.hierarchical  .dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
.hierarchical  .main-holder	{    height: 100vh;}
.hierarchical  .footer-container	{display:none}

.hierarchical .dropdown:hover .dropdown-content {
    display: block;
}

.hierarchical .dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    bottom: 30px;
}
.hierarchical .dropdown-content a {
    color: #2B2B2B;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font: normal 18px/19px 'Noto Naskh Arabic UI', serif;
    border-bottom: 1px solid #E6E6E6;
}
/* The container <div> - needed to position the dropdown content */
.hierarchical  .dropdown {
    position: relative;
    display: inline-block;    margin-right: 40px;
}

* {margin: 0; padding: 0;}

.treeX ul {
	padding-top: 50px; position: relative;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	margin:0
}


.treeX li {
	float: left; text-align: center;
	list-style-type: none;
	position: relative;
	padding: 50px 5px 0 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}
/*.treeX .finelSection ul {
	padding-top: 50px; position: relative;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	margin:0
}


.treeX .finelSection li {
	float: none; text-align: center;
	list-style-type: none;
	position: relative;
	padding: 50px 5px 0 5px;
	
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
}

*/


/*We will use ::before and ::after to draw the connectors*/

.treeX li::before, .treeX li::after{
	content: '';
	position: absolute; top: 0; right: 50%;
	border-top: 5px solid #ccc;
	width: 50%; height: 46px;;
	
	box-sizing: initial;
}
.treeX li::after{
	right: auto; left: 50%;
	border-left: 1px solid #ccc;
}

/*We need to remove left-right connectors from elements without 
any siblings*/
.treeX li:only-child::after, .treeX li:only-child::before {
	display: none;
}

/*Remove space from the top of single children*/
.treeX li:only-child{ padding-top: 0;}

/*Remove left connector from first child and 
right connector from last child*/
.treeX li:first-child::before, .treeX li:last-child::after{
	border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.treeX li:last-child::before{
	border-right: 1px solid #ccc;
	border-radius: 0 30px 0 0;
	-webkit-border-radius: 0 30px 0 0;
	-moz-border-radius: 0 30px 0 0;
}
.treeX li:first-child::after{
	border-radius: 30px 0 0 0;
	-webkit-border-radius: 30px 0 0 0;
	-moz-border-radius: 30px 0 0 0;
}

/*Time to add downward connectors from parents*/
.treeX ul ul::before{
	content: '';
	position: absolute; top: 0; left: 50%;
	border-left: 1px solid #ccc;
	width: 0; height: 50px;
}

.treeX li p{
	border: 1px solid #FFB800;
	padding: 7px 2px;
	text-decoration: none;
	color: #333;
	    font: normal 14px/19px 'Noto Naskh Arabic UI', serif; 
	display: inline-block;
	background: #FCE098;
	border-radius: 5px;  
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
	-moz-transition: all 0.3s;
	    position: relative;
		 -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   margin:0;
       max-width: 100px;
    height: 70px;
     
   
}

/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.treeX li p:hover, .treeX li p:hover+ul li p {
	background: #ffb800; color: #000; border: 1px solid #FFBC00;
}
/*Connector styles on hover*/
.treeX li p:hover+ul li::after, 
.treeX li p:hover+ul li::before, 
.treeX li p:hover+ul::before, 
.treeX li p:hover+ul ul::before{
	border-color:  #FFBC00;
}

.showHide {       position: absolute;
    bottom: -16px;
    font-size: 23px !important;
    color: #8C6500;
    background-color: #FCE098;
    border-radius: 100%;
    width: 23px;
    height: 23px;
    cursor: pointer;
    right: 39%;    z-index: 10;}
	
.infoH{          position: absolute;
    bottom: -14px;
    font-size: 23px !important;
    color: #26B7B4;
    background-color: #FAF2FA;
    border-radius: 100%;
    width: 21px;
    height: 21px;
    cursor: pointer;
    right: 12%;
    z-index: 10;
    border: 0;}
	

.name-h{
max-width: 200px;
margin: 5px auto;
box-shadow: 0PX 1PX 6PX 0PX #B3B3B3;
border-radius: 5px;
min-height: 34px;
text-align: center;
color: #818181;
font: normal 22px/27px 'Noto Naskh Arabic UI', serif;
padding: 10px;    }

.name-h:before{   
    content: '';
    position: absolute;
    top: 52px;
    right: 50%;
    border-right: 5px solid #ccc;
    height: 58px;
} 



/*.treeX  ul li ul{ display:none}
/*Thats all. I hope you enjoyed it.
Thanks :)*/