@import url('https://fonts.googleapis.com/css?family=Questrial');
/* FUNCTIONAL - Needed for the tree diagram */
div .treeDiagram .wrapper {
	 position: relative;
	 top: 0;
	 left: 0;
	 width: 100vw;
	 height: 50vh;
	 text-align: center;
	 overflow: auto;
	/*& [type="checkbox"], & .more {
		 display: none;
	}
	 & input:checked ~ ul *{
		 display: none;
	}
	 & input:checked ~ ul .more{
		 display: block;
	}
	*/
}
 .treeDiagram .wrapper ul {
	 position: relative;
	 display: block;
	 margin: 0 auto;
	 white-space: nowrap;
	 list-style: none;
}
 .treeDiagram .wrapper ul li {
	 display: inline-block;
	 vertical-align: top;
}
/* MAKE-UP - Pure esthetics*/
 .treeDiagram ::-webkit-scrollbar-button {
	 display: none;
}
 .treeDiagram ::-webkit-scrollbar {
	 width: 2px;
	 height: 2px;
}
 .treeDiagram ::-webkit-scrollbar-thumb {
	 background: #fff;
	 border: 1px solid #fff;
	 cursor: pointer;
}
 .treeDiagram ::-webkit-scrollbar-track {
	 background: transparent;
	 width: calc(2px * 2);
	 border: 2px solid rgba(26, 26, 26, 0);
}
 .treeDiagram ::-webkit-scrollbar-track-piece {
	 background: transparent;
	 width: calc(2px / 2);
	 border: 2px solid rgba(26, 26, 26, 0);
}
.treeDiagram {
	 scrollbar-face-color: white;
	 scrollbar-track-color: transparent;
}
 @media (min-width: 480px) {
	 .treeDiagram  {
		 font-size: calc(0.75rem + ((1vw - 4.8px) * 0.5556));
	}
}
 @media (min-width: 1920px) {
	 .treeDiagram  {
		 font-size: 16px;
	}
}
 .treeDiagram div, ul, li {
	 position: relative;
	 display: inline-block;
	 vertical-align: top;
	 box-sizing: border-box;
	 margin: 0;
	 padding: 0;
}
 .treeDiagram div:before, ul:before, li:before, div:after, ul:after, li:after {
	 content: '';
	 position: absolute;
	 display: block;
	 box-sizing: border-box;
}
.treeDiagram {
	 color: #212121;
	 font-family: 'Questrial', sans-serif;
	 background: #fff;
}

.treeDiagram .wrapper ul > li {
	 margin: 1em 0;
	 padding: 1em;
	 line-height: 1.5em;
	 transition: all 0.5s ease;
}
.treeDiagram .wrapper ul > li:before {
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 1px;
	 background: grey;
}
 .treeDiagram .wrapper ul > li:first-of-type:before {
	 left: 50%;
	 width: 50%;
}
.treeDiagram .wrapper ul > li:last-of-type:before {
	 width: 50%;
}
.treeDiagram .wrapper ul > li:only-of-type:before {
	 width: 10%;
	 left: 45%;
}
.treeDiagram .wrapper ul > li.noline:before {
	 background: transparent;
}
 .treeDiagram .wrapper ul > li label {
	 padding: 0.5em 1em;
	 border: 1px solid grey;
	 cursor: pointer;
}
.treeDiagram .wrapper ul [type="checkbox"] {
	 display: none;
}
.treeDiagram .wrapper ul .more {
	 opacity: 0;
	 display: block;
	 width: 0;
	 height: 0;
	 padding: 0;
	 margin-left: 50%;
	 transition: all 0.25s ease;
}
.treeDiagram .wrapper ul input:checked ~ ul * {
	 opacity: 0;
	 max-width: 1px;
	 max-height: 1px;
	 padding: 0;
}
.treeDiagram .wrapper ul input:checked ~ ul .more {
	 opacity: 1;
	 width: 100%;
	 height: 100%;
	 max-width: 100%;
	 max-height: 100%;
	 margin-left: 0;
	 transition: all 0.01s;
}
 

.treeDiagram label:hover{
    background-color: #2bae39;
    color: #fff; !important;
    transition: 250ms ease;
}

.nav-pills-custom .nav-link {
    color: #aaa; 
    background: #fff; !important;
    font-size: 0.8333rem;
    font-weight: 500; !important;
    position: relative;
}

.nav-pills-custom .nav-link.active {
    color: #2bae39; !important;
    background: #fff; !important;
}


/* Add indicator arrow for the active tab */
@media (min-width: 992px) {
    .nav-pills-custom .nav-link::before {
        content: '';
        display: block;
        border-top: 8px solid transparent;
        border-left: 10px solid #fff;
        border-bottom: 8px solid transparent;
        position: absolute;
        top: 50%;
        right: -10px;
        transform: translateY(-50%);
        opacity: 0;
    }
}

.nav-pills-custom .nav-link.active::before {
    opacity: 1;
}

.megamenu {
  position: static;
}

.megamenu .dropdown-menu {
  background: none;
  border: none;
  width: 100%;
}


#circle {
	position:relative;
	border-radius:50%;
	-moz-border-radius:50%;
	-webkit-border-radius:50%;
	border:10px solid rgba(255,255,255,.10);
	width:400px;
	height:400px;
	overflow:hidden;
	-webkit-transition: all .3s ease;
	-moz-transition: all .3s  ease;
	-o-transition: all .3s  ease;
	-ms-transition: all .3s  ease;
	transition: all .3s ease;
}
.fdw_left,
.fdw_right {
	float:left;
	width:50%;
	height:50%;
	margin:0;
	text-align:center;
	/* line-height:280px; */
	text-decoration:none;
}
.fdw_left1,
.fdw_right1 {
	float:left;
	width:50%;
	height:50%;
	margin:0;
	text-align:center;
	/* line-height:280px; */
	text-decoration:none;
}
.fdw_right {
	border-radius:0 0 0 0;
	-moz-border-radius:0 142px 142px 0;
	-webkit-border-radius:0 0 0 0;
}
.fdw_right1{
	border-radius:0 0 0 0;
	-moz-border-radius:0 142px 142px 0;
	-webkit-border-radius:0 0 0 0;
}
.fdw_left {
	background-color:grey;
	border-radius:0 0 0 0;
	-moz-border-radius:142px 0 0 142px;
	-webkit-border-radius:0 0 0 0;
	color:#1e2a2a;
	/* text-indent:-30px; */
}
.fdw_left1 {
	background-color:#727972;
	border-radius:0 0 0 0;
	-moz-border-radius:142px 0 0 142px;
	-webkit-border-radius:0 0 0 0;
	color:#1e2a2a;
	/* text-indent:-30px; */
}
.fdw_right {
	background-color:#727972;
	color:#FFFFFF;
	/* text-indent:35px; */
}
.fdw_right1 {
	background-color:grey;
	color:#FFFFFF;
	/* text-indent:35px; */
}
#circle {
	border:10px solid  rgb(221, 237, 252);
	}

#circle .icon {
	width:71px;
	height:77px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-39px auto 0 -35px;
	background: url(../img/icon_cycle.png) top center no-repeat;
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s  ease-in-out;
	-o-transition: all .3s  ease-in-out;
	-ms-transition: all .3s  ease-in-out;
	transition: all .3s ease-in-out;
}
#circle a {
	font-weight:700;
	font-family: 'Open Sans Condensed','Arial Narrow', Arial, sans-serif;
	text-decoration:none;
	text-transform:uppercase;
	font-size:20px;
	-webkit-transition: background-color .3s;
	-moz-transition: background-color .3s;
	-o-transition: background-color .3s;
	-ms-transition: background-color .3s;
	transition: background-color .3s;
}
#circle a:hover {
	/* background-color:#00b68f; */
	background-color:#2bae39;
	color:#FFF;
	}

#circle:hover {
	border:10px solid rgba(214,200,255,.5);
	}

#circle:hover .icon {
	transform: rotate(180deg);
	-ms-transform: rotate(180deg); /* IE 9 */
	-webkit-transform: rotate(180deg); /* Safari and Chrome */
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s  ease-in-out;
	-o-transition: all .3s  ease-in-out;
	-ms-transition: all .3s  ease-in-out;
	transition: all .3s ease-in-out;
	}
	
.circle_heading-top1{	
	position: relative;
    top: 90px;
	font-size:16px;
	color:#fff;
}
.circle_heading-top2{	
	position: relative;
    top: 110px;
	font-size:16px;
	    right: 8px;
}

.circle_heading-bot1{	
	position: relative;
    top: 44px;
	font-size:16px;
	color:#fff;
	
}

.circle_heading-bot2{	
	position: relative;
    top: 56px;
	right:14px;
	font-size:16px;
}	

.peopleBg {
    background: url("/images/hero-moretele.jpg");
}

.clip-circle {
  clip-path: circle(154px at center);
}

.clip-circle-lg {
  clip-path: circle(200px at center);
}

.clip-circle-sm {
  clip-path: circle(40px at center);
}


.chart{
    height:500px;
    width:500px;
}
.pie-legend {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pie-legend span {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 100%;
	margin-right: 16px;
	margin-bottom: -2px;
}
.pie-legend li {
	margin-bottom: 10px;
}


.author-archive {
  padding: 1.5rem;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  text-align: center;
  margin-bottom: 2rem;
}

h1 a {
  transition: all 0.1s;
}

h1 a:hover {
  background: var(--green);
  color: var(--white);
}

input[type="radio"] {
  position: absolute;
  left: -9999px;
}


/* FILTERS
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.filters {
  text-align: center;
  margin-bottom: 2rem;
}

.filters * {
  display: inline-block;
}

.filters label {
  padding: 0.5rem 1rem;
  margin-bottom: 0.25rem;
  border-radius: 2rem;
  min-width: 50px;
  line-height: normal;
  cursor: pointer;
  transition: all 0.1s;
}

.filters label:hover {
  background: var(--green);
  color: var(--white);
}


/* FILTERED ELEMENTS (POSTS)
–––––––––––––––––––––––––––––––––––––––––––––––––– */
.posts {
  display: grid;
  grid-gap: 1.5rem;
  grid-template-columns: repeat(8, 1fr);
}

.posts .post {
  background: #fafafa;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.posts .post-title {
  font-size: 1.3rem;
}

.posts .post-title:hover {
  text-decoration: underline;
}

.posts figcaption {
  padding: 1rem;
}

.posts .post-categories {
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
}

.posts .post-categories * {
  display: inline-block;
}

.posts .post-categories li {
  margin-bottom: 0.2rem;
}

.posts .post-categories a {
  padding: 0.2rem 0.5rem;
  border-radius: 1rem;
  border: 1px solid;
  line-height: normal;
  transition: all 0.1s;
}

.posts .post-categories a:hover {
  background: var(--green);
  color: var(--white);
}

   
/* FILTERING RULES
–––––––––––––––––––––––––––––––––––––––––––––––––– */
[value="All"]:checked ~ .filters [for="All"],
[value="Troika"]:checked ~ .filters [for="Troika"],
[value="ExCo"]:checked ~ .filters [for="ExCo"],
[value="WardCllr"]:checked ~ .filters [for="WardCllr"],
[value="PRCllr"]:checked ~ .filters [for="PRCllr"] {
  background: var(--green);
  color: var(--white);
}

[value="All"]:checked ~ .posts [data-category] {
  display: block;
}

[value="Troika"]:checked ~ .posts .post:not([data-category~="Troika"]),
[value="ExCo"]:checked ~ .posts .post:not([data-category~="ExCo"]),
[value="WardCllr"]:checked ~ .posts .post:not([data-category~="WardCllr"]),
[value="PRCllr"]:checked ~ .posts .post:not([data-category~="PRCllr"]) {
  display: none;
}


/* MQ
–––––––––––––––––––––––––––––––––––––––––––––––––– */
@media screen and (max-width: 900px) {
  .posts {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 650px) {
  html {
    font-size: 14px;
  }

  .posts {
    grid-template-columns: repeat(2, 1fr);
  }
}