/*

Theme Name: Hello Elementor Child

Theme URI: https://github.com/elementor/hello-theme/

Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team

Author: Elementor Team

Author URI: https://elementor.com/

Template: hello-elementor

Version: 1.0.1

Text Domain: hello-elementor-child

License: GNU General Public License v3 or later.

License URI: https://www.gnu.org/licenses/gpl-3.0.html

*/

/*

adding CSS from Peter 

*/



.elementor-element.sticky-title { 
	position:sticky;
	top:180px;
	height:230px;
}



.annual-reports-template-default section.elementor-top-section {
	padding: 6vh 0 8vh 0;
}

.annual-reports-template-default #main h1 { font-size: 50px; letter-spacing: 2px !important; }
.annual-reports-template-default #main h2 { font-size: 36px; letter-spacing: 1px !important;}
.annual-reports-template-default #main h3 { font-size: 30px; letter-spacing: 1px !important;}


#Hero-Video,
#Hero-Image {
	height: calc(100vh - 210px);
	max-height: 48vw;
	overflow: hidden;
	margin-top: 100 !important;  
}
.logged-in #Hero-Video,
.logged-in #Hero-Image {
 	height: calc(100vh - 210px - 32px);
}
#Hero-Image {
}

#Hero-Video .elementor-widget-video .elementor-wrapper {
	--video-aspect-ratio: none !important;
	height: calc(100vh - 210px);
	max-height: 48vw;
}


#Hero-Image .elementor-element img {
	width: 100%;
	max-height:48vw;
	height: calc(100vh - 210px);
	object-fit: cover;
	object-position: center center;
}


#Hero-Video:before,
#Hero-Image:before {
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
background: url('https://ccctx.org/wp-content/uploads/2024/08/hero-overlay.jpg') no-repeat;
	background-size:cover;
	z-index:1;
	opacity: .4;
	mix-blend-mode: soft-light;
}

#Hero-Video:after,
#Hero-Image:after {
	content:'';
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;

	z-index:1;
	background: rgb(118,73,157);
	background: -moz-linear-gradient(180deg, rgba(118,73,157,0) 40%, rgba(0,0,0,0.6) 100%);
	background: -webkit-linear-gradient(180deg, rgba(118,73,157,0) 40%, rgba(0,0,0,0.6) 100%);
	background: linear-gradient(180deg, rgba(118,73,157,0) 40%, rgba(0,0,0,0.6) 100%);
	
		mix-blend-mode: multiply;

} 


#AR-Nav {
    position: sticky;
    top: 90px;
    left: 0;
    right: 0;
    bottom: auto;
    z-index: 11;
    margin-left: calc((100vw - 1300px) / -2);
    border-top: 1px solid #FFF;
}
.logged-in #AR-Nav { top: 123px; }



#AR-Menu {
	text-align:center;
	margin:0;
	padding:0;
	display:flex;
	justify-content:center;
}
#AR-Menu li {
	padding: 16px 1vw;
	list-style: none;
	margin: 0;
	color:#FFF;
	text-transform:uppercase;
	letter-spacing: 1px;
	line-height: 1;
}
#AR-Menu li a {
	color: #FFF;
	text-decoration:none;
	border-bottom: 2px solid #FFFFFF00;
}
#AR-Menu li:hover a {
	color: #FFF;
	border-color: #FFFFFFAA;
}

#AR-Title {	
	position: absolute;
	transform: translateY(-125%);
	z-index:20;
}
#AR-Title > elementor-container {

}
#AR-Title div {
	margin:0;
	margin-block-end:0;
}.elementor-element img {
	
}

#AR-Intro {
	margin: auto;
	max-width: 800px;
}

#Timeline {}

#Timeline .elementor-section {}

#Timeline .elementor-section:nth-child(even) .elementor-container {
	flex-direction: row-reverse;
}

#Timeline .elementor-section .elementor-container .elementor-column {
	margin:4px;
	position:relative;
}

#Timeline .elementor-section .elementor-container .elementor-column:nth-child(2):before {
	content: '';
	background-image: url(https://ccctx.org/wp-content/uploads/2024/08/AR-Timeline-Arrow.png);
	background-repeat: no-repeat;
	width: 30px;
	height: 100%;
	background-size: contain;
	background-position: center;
	position: absolute;
	z-index: 1;
}
#Timeline .elementor-section:nth-child(even) .elementor-container .elementor-column:nth-child(2):before {
	right:0;
	transform:rotate(180deg);
}

#Services {}

#Services .elementor-section {}

#Services .elementor-section:nth-child(even) .elementor-container {
	flex-direction: row-reverse;
}



/* FINANCIAL CHART */
/* https://codepen.io/githiro/pen/AgZGEV?editors=1111 */

		
		
.chart-bg {
	position: relative;
    width: 100%;
	max-width: 1280px;
    height: calc(1280px * .4 * 1.45);
	margin: auto;
		}
		
.chart-bg::after {
	background-image: url('https://ccctx.org/wp-content/uploads/2024/09/CCCTX-25th-Icon-bg-trans.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: contain;
	position: absolute;
	content: '';
	top:0;right:0;bottom:0;left:0;
	pointer-events: none;
	z-index: 10;
		}

		
.chart, .chart svg {
	width: 512px;
	height: 512px;
	}
		
.chart {
  position: relative;
	
  background: radial-gradient(
      closest-side,
      white 40%,
      transparent 0 99.9%,
      white 0
    ),
    conic-gradient(
     	#ff9e18  0%,
      #fce011 48%,
      #76bc21 52%,
      #00a0df 100%
    );
    background-size: 95% 95%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
	    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
		


		
.pieTip {
  position: absolute;
  float: left;
  min-width: 30px;
  max-width: 300px;
  padding: 4px 14px 5px;
  border-radius: 4px;
  background: rgba(255,255,255,.97);
  color: #444;
  font-size: 14px;
  text-shadow: 0 1px 0 #fff;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  letter-spacing: .06em;
  box-shadow: 0 0 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.5);
  -webkit-transform: all .3s;
     -moz-transform: all .3s;
      -ms-transform: all .3s;
       -o-transform: all .3s;
          transform: all .3s;
  pointer-events: none;
	z-index: 100;
}
.pieTip:after {
      position: absolute;
      left: 50%;
      bottom: -6px;
      content: "";
      height: 0;
      margin: 0 0 0 -6px;
      border-right: 5px solid transparent;
      border-left: 5px solid transparent;
      border-top: 6px solid rgba(255,255,255,.95);
      line-height: 0;
}
.chart path { cursor: pointer; }
		
.pieCenter {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 66%;
	height: 66%;
	transform: translate(-50%, -50%);
	background: #FFF;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 1.1em;
}

		.pieContent {
			text-align: center;
			margin: 0 15%;
			line-height: 1.2;
		}
		.pieContent strong {
			font-size: 1.25em;
		}
.pieSegment {}

.lightPie {}

		
		.chart-data-container {}

		.chart-data {}
		.data-point {
			position: absolute;
			border-bottom: 1px solid #00000033;
			z-index: 20;
			text-align: left;
			font-size: 13px;
			line-height: 1.1;
			font-weight: bold;
			text-transform: uppercase;
			letter-spacing: 1px;
			left:2%;
			top:50%;
		}
		.right-col .data-point {
			left:auto;
			right:2%;
			text-align: right;
		}
		.data-point span {
			display: inline-block;
			position: relative;
			background: #FFF;
			border-right: 1px solid #00000033;
			padding: 0 5px;
			border-radius: 4px;
			transform: translateY(50%);
			width: 230px;
			text-align: right;
		}
		.right-col .data-point span {
			border:none;
			border-left: 1px solid #00000033;
			text-align: left;
		}

		#dp1 {top: 15.7%;width: 40.6%;}
		#dp2 {top: 20%;width: 34.8%;}
		#dp3 {top: 81.4%;width: 46.4%;}
		#dp4 {top: 33%; width: 30.2%;}

		#dp5 {top: 39.1%; width: 29%;}
		#dp6 {top: 46.5%; width: 28%;}
		#dp7 {top: 50%;width: 27.9%;}
		#dp8 {top: 28.7%;left: 65.9%;}
		#dp9 {top: 68.3%;width: 33%;}
		#dp10 {top: 81.3%;width: 42.9%;}
		#dp11 {top: 22%;width: 35.1%;}
		#dp12 {top: 80%;width: 39%;}
		#dp12 {top: 51%;width: 27.9%;}
		#dp13 {top: 14%;width: 40.4%;}
		#dp14 {top: 57.9%;width: 29.9%;}
		


#Tabs {}
#Tabs .elementor-tab-content.elementor-active {
	display:flex;
	justify-content: space-evenly;
	flex-wrap: wrap; 
}

#Tabs .tab-intro { 
	width: auto;
	margin: 0px 20% 30px;
	font-weight: bold;
	text-align:center;
} 

#Tabs .elementor-tab-content { padding: 40px 0 60px;}

#Tabs .elementor-tab-content div { padding: 0 10px;}

#Tabs .elementor-tabs-wrapper { text-align:center; }



@media screen and (min-width: 1025px) and (max-width: 1440px) {
	#AR-Nav { margin-left: calc((100vw - 1280px) / -2); }
}
@media screen and (min-width: 1025px) and (max-width: 1366px) {
	#AR-Nav { margin-left: calc((100vw - 1220px) / -2); }
}
	
@media screen and (min-width: 1025px) and (max-width: 1280px){
	#AR-Nav { margin-left: calc((100vw - 1140px) / -2); }
}
@media screen and  (max-width: 1140px){
	#AR-Nav { margin-left: 0; }
	
	.annual-reports-template-default #main h1 { font-size: 40px; letter-spacing: 0px !important; }
}

		
@media screen and (max-width: 1023px) {
	
	.data-point { font-size: 12px;  letter-spacing: 0;}
	
	#AR-Menu { padding: 10px 0; flex-flow: wrap; }
	#AR-Menu li { letter-spacing:0; font-size: 15px; padding: 7px 20px; }
}	


@media screen and (max-width: 980px) {
	#AR-Menu li { flex-basis: 30%; }
	#AR-Menu { text-align:left; }

	#Tabs .elementor-tab-content div { width: 50%; }
	#Tabs .elementor-tab-content div.tab-intro { width: auto;}

}

@media screen and (max-width: 770px) {
	#Hero-Image { margin-top:100px; }
	
	#Tabs .tab-intro { margin: 0 0 30px;}
		
	#Hero-Image,
	#Hero-Video,
	#Hero-Video .elementor-widget-video .elementor-wrapper { max-height: 85vw; }
	#Hero-Image .elementor-element img { max-height: 85vw; object-position: 25% 50%; }

	.annual-reports-template-default #main h1 { font-size: 30px; letter-spacing: 0px !important; }


	.elementor-element.sticky-title { 
		position:relative;
		top:auto;
		height:auto;
	}
}

@media screen and (max-width: 600px) {
	#AR-Nav {position: relative; top:0;}
	.logged-in #AR-Nav { top: 0; }
	#AR-Menu li { flex-basis: 50%; }
	#Hero-Image { margin-top:100px; }
	
	#AR-Title {	transform: translateY(-105%); }
	
	.annual-reports-template-default #main h1 { font-size: 24px;  }

	.data-point,
	.right-col .data-point { font-size: 14px;  letter-spacing: 1px;
		position:relative;
		border: 0; 
		width: auto !important;
		top: auto !important;
		left: auto !important;
		right: auto !important;
		margin: 7px 0 7px 10px;
	}
	.data-point span,
	.right-col .data-point span {
		display: block;
		border: none;
		padding: 0 5px;
		border-radius: 4px;
		transform: translateY(0%);
		width: auto;
		text-align: left;
	}
	.chart-data-container { display: flex; }
	.chart-data { width: 50%; }

}


@media screen and (max-width: 420px) {
	#AR-Menu li { flex-basis: 100%; }
	#Tabs .elementor-tab-content div { width: auto; }

}



@media (orientation: portrait) {
	.chart-bg {
		width: 100%;
		height: 98vw;
	}
			
	.chart, .chart svg {
		width: 68vw;
		height: 68vw;
	}
}	

/* 
*/

.page .entry-title {

display: none;

}