/*===================================================================================*/
/*---- CSS tree of central stuff ----*/
.tree{
	width:100%;
}
.tree ul {
	padding-top: 20px; 
	position: relative;
	margin:0;
	transition: all 0.15s;
	-webkit-transition: all 0.15s;
	-moz-transition: all 0.15s;
}
.tree > ul > li:first-child {
	width:100%;}
.tree li {
	float: left;
	text-align: center;
	list-style-type: none;
	position: relative;
	padding: 20px 0 0 15px;
	transition: all 0.15s;
	-webkit-transition: all 0.15s;
	-moz-transition: all 0.15s;}
.tree li::before, .tree li::after{
	content: '';
	position: absolute; top: 0; right: 50%;
	border-top: 1px solid #ccc;
	width: 50%; height: 20px;}
.tree li::after{
	right: auto; left: 50%;
	border-left: 1px solid #ccc;}
.tree li:only-child::after, .tree li:only-child::before {
	display: none;}

.tree li:only-child{
	padding-top: 0;}
.tree li:first-child::before, 
.tree li:last-child::after{
	border: 0 none;}
.tree li:last-child::before{
	border-right: 1px solid #ccc;
	border-radius: 0 5px 0 0;
	-webkit-border-radius: 0 5px 0 0;
	-moz-border-radius: 0 5px 0 0;}
.tree li:first-child::after{
	border-radius: 5px 0 0 0;
	-webkit-border-radius: 5px 0 0 0;
	-moz-border-radius: 5px 0 0 0;}
.tree ul ul::before{
	content: '';
	position: absolute; top: 0; left: 50%;
	border-left: 1px solid #ccc;
	width: 0; height: 20px;}

.tree li a{
	background:red;
	border: 1px solid #bbb;
	padding: 15px 10px;
	text-decoration: none;
	color: #444;
	font-family: arial, verdana, tahoma;
	font-size: 18px;
	display: inline-block;
	background:#f7f7f7;
	width:200px;
	height:auto;	
	transition: all 0.15s;
	-webkit-transition: all 0.15s;
	-moz-transition: all 0.15s;
}

/*Time for some hover effects*/
.tree li a:hover,
.tree li a:hover+ul li a,
.tree ul ul ul li a:hover+ul ul li a{
	color: #27A3D9;
	background: #fff;
	border-color:#27A3D9;
}

.tree li a:hover+ul ul li a{
	color: #1178A6;
	background: #eee;
	border-color:#eee;
}


.tree li a:hover+ul li::after, 
.tree li a:hover+ul li::before, 
.tree li a:hover+ul::before, 
.tree li a:hover+ul ul::before{
	border-color:  #70D3FF;
}

/* bureau styles */

.tree ul .bureau::before{
	content: '';
	position: absolute; top: 0; left: 5%;
	border: none;
	border-left: none;
	width: 3px; height: 100px;
}

.bureau{
	padding-top:5px!important;
	margin:0;
}
.bureau li {
	float:none;
	margin-left: 0;
	padding: 5px 0;}

.bureau li a{
	width:200px;
	font-size:16px;
	height:auto;
	 /*background:#BBeeFF; */
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;}

.bureau li::before,
.bureau li::after{
	content: '';
	position: absolute; 
	top: 50%; 
	left: -10%;
	border: none;
	width: 10%; height: 20px;
	margin:0;}
.bureau li::after{
	right: 0; 
	left: -10%;
	border: none;
	height:100%;}
.bureau li:only-child::after,
.bureau li:only-child::before {
	display: none;}

.bureau li:only-child{ padding-top: 0;}
.bureau li:first-child::before, 
.bureau li:last-child::after{
	border: none;
}

.bureau li:last-child::before{
	height:30%;
	border: none;
	border-radius: 0 0 0 15px;
	-webkit-border-radius: 0 0 0 15px;
	-moz-border-radius: 0 0 0 15px;
}
.bureau li:first-child::after{
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}


/* Departments styles */

.tree ul .departments{
	padding-top: 0;
}
.departments{
	margin:0;
}
.departments li {
	float:none;
	margin-right: 0;
	padding: 0;}
.departments li a{
	width:200px;
	height:auto;
	/*background:none!important;*/
	font-size: 12px;
	line-height: 14px;
	color:#888;
	padding:10px;
	border-top:none;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
}
.tree ul .departments::before,
.departments li::before,
.departments li::after,
.departments li:only-child::after,
.departments li:only-child::before,
.departments li:only-child,
.departments li:first-child::before, 
.departments li:last-child::after,
.departments li:last-child::before,
.departments li:first-child::after,
.departments ul ul::before {
	display: none;
	border:none;
	padding-top: 0;}
/*===================================================================================*/

.page-region_structure .tree > ul > li > ul{
	width:100%;
	margin-left:130px;
}
.page-region_structure .tree li a{
	width:300px;
}
.page-region_structure .tree ul ul::before{
	position: absolute; top: 0; left: 41%;}

/*===================================================================================*/

@media screen and (min-width: 1396px) and (max-width: 1635px){
	.tree li a{
		font-size:15px;
		width:170px;
	}
	.bureau li a{
		font-size:13px;
	}
	.departments li a{
		font-size:12px;
	}
	.tree{
		margin-left:-15px;
	}
	.tree > ul:first-child {
		margin-left:15px;
	}

	.page-region_structure .tree > ul > li > ul{
		width:100%;
		margin-left:20px;
	}
	.page-region_structure .tree li a{
		width:300px;
	}
	.page-region_structure .tree ul ul::before{
		position: absolute; top: 0; left: 48%;}

}


@media screen and (min-width: 768px) and (max-width: 1395px) and (-webkit-min-device-pixel-ratio: 1){
	.tree li a{
		font-size:15px;
		width:170px;
	}
	.bureau li a{
		font-size:13px;
	}
	.departments li a{
		font-size:12px;
	}
	.page-central_staff .tree{
		margin-left:-195px;
	}
	.page-central_staff .tree > ul:first-child {
		margin-left:395px;
	}

	.page-central_staff .tree > ul > li > ul > li > ul > li:nth-child(1){
		position:absolute;
		top:-160px;
	}
	.page-central_staff .tree > ul > li > ul > li > ul > li:nth-child(2){
		position:absolute;
		top:-80px;
	}
	.page-central_staff .tree > ul > li > ul > li > ul > li:nth-child(3){
		position:absolute;
		top:-80px;
		right:0;
	}
	.page-central_staff .tree > ul > li > ul > li > ul > li:nth-child(1):after{
		top:60px; left:100%;
		height:80px;
		width:20px;
		/*background: #fff;*/
		border-top:1px solid #ccc;
		border-right: 1px solid #ccc;
		border-left: 0;
		border-bottom: 0;
		border-radius: 0;
	}
	.page-central_staff .tree > ul > li > ul > li > ul > li:nth-child(1):before{
		top:60px;
		left:205px;
		height:80px;
		width:80px;
		/*background: #fff;*/
		border-bottom:1px solid #ccc;
		border-right: 0;
		border-left: 0;
		border-top: 0;
		border-radius: 0;
	}
	.page-central_staff .tree > ul > li > ul > li > ul > li:nth-child(2):after{
		top:60px;
		left:100%;
		height:0px;
		width:80px;
		/*background: #fff;*/
		border-top:1px solid #ccc;
		border-right: 0;
		border-left: 0;
		border-bottom: 0;
		border-radius: 0;
	}
	.page-central_staff .tree > ul > li > ul > li > ul > li:nth-child(2):before{
		border:none;
	}
	.page-central_staff .tree > ul > li > ul > li > ul > li:nth-child(3):after{
		top:60px;
		left:-100px;
		height:0px;
		width:115px;
		/*background: #fff;*/
		border-top:1px solid #ccc;
		border-right: 0;
		border-left: 0;
		border-bottom: 0;
		border-radius: 0;
	}
	.page-central_staff .tree > ul > li > ul > li > ul > li:nth-child(3):before{
		border:none;
	}
	.page-central_staff .tree > ul > li > ul > li > ul > li:nth-child(4):before{
		border:none;
	}

	.tree li a:hover+ul li:nth-child(1):after, 
	.tree li a:hover+ul li:nth-child(1):before,
	.tree li a:hover+ul li:nth-child(2):after,
	.tree li a:hover+ul li:nth-child(2):before,
	.tree li a:hover+ul li:nth-child(3):after,
	.tree li a:hover+ul li:nth-child(3):before
	{
		border-color:  #70D3FF;
	}
	/*****************************************************/
	.page-region_structure .tree > ul > li > ul{
		width:100%;
		margin-left:20px;
	}
	.page-region_structure .tree li a{
		width:240px;
	}
	.page-region_structure .tree ul ul::before{
		position: absolute; top: 0; left: 48%;}
	.page-region_structure .tree{
		margin-left:0px;
	}
	.page-region_structure .tree > ul:first-child {
		margin-left:40px;
	}
}

@media screen and (min-width: 1040px) and (max-width: 1207px){
	.page-central_staff .tree{
		margin-left:-100px;
	}
	.page-central_staff .tree > ul:first-child {
		margin-left:225px;
	}
	/*****************************************************/
	
	.page-region_structure .tree li a{
		width:200px;
	}
}

@media screen and (min-width: 975px) and (max-width: 1040px){
	.page-central_staff .tree{
		margin-left:-80px;
	}
	.page-central_staff .tree > ul:first-child {
		/*background: red;*/
		margin-left:162px;
	}

	.page-region_structure .tree li a{
		width:180px;
	}
}
@media screen and (min-width: 768px) and (max-width: 974px){
	.page-central_staff .tree{
		margin-left:10px;
	}
	.page-central_staff .tree > ul:first-child {
		/*background: red;*/
		margin-left:-53px;
	}
	.page-region_structure .tree li a{
		width:160px;
	}
	.page-region_structure .tree > ul:first-child {
		margin-left:-40px;
	}
}
@media screen and (min-width: 1px) and (max-width: 767px){
	.tree ul {
		padding-top: 0px;
	}
	.tree li {
		float: none;
		width:100%;
		text-align: left;
		padding: 0 0 0 25px;}
	.tree li a{
		font-size:15px;
		width:100%;
	}
	.bureau li a{
		font-size:13px;
		width:100%;
	}
	.departments li a{
		font-size:12px;
		width:100%;
	}
	.tree li::before, .tree li::after{
		border:none;
	}
	.tree > ul > li > a::before{
		position:absolute;
		top:-10px;
		background:red;
		width:20px;
		border:1px solid red;
	}
	.page-region_structure .tree > ul > li > ul{
		margin-left:20px;
	}
}