@charset "utf-8";

/* CSS Document */

/**

 This is a theme based on the bootstrap framework



 * Table of Contents

 *

 * 1.0 - Typography

 * 2.0 - Elements

 * 3.0 - Navigation

 *   3.1 - Links

 *   3.2 - Menus

 * 4.0 - Accessibility

 * 5.0 - Content

 *    5.1 - Header

 *	  5.2 - Sections

 *    5.3 - Footer

 * 6.0 - Print

 */











/**

 * 1.0 - Typography

 */



body,

button,

input,

select,

textarea {

	color: #404040;

	font-family: 'Muli', sans-serif;

	font-weight:600;

	font-size: 16px;

	font-size: 1rem;

	line-height: 1.75;

}



h1,

h2,

h3,

h4,

h5,

h6 {

	font-family: 'Montserrat', sans-serif;

	font-weight:700;

}

h2.section-title{

	color:#007DBA;

	font-size: 8vw;

	padding-left:20px;

	padding-right:20px;

	margin-bottom: 1em;

	margin-top: 1em;

}

@media screen and (min-width:768px) {

	h2.section-title {

		font-size: 2.9vw;

		  }

}

.card-header h2 {

    font-size: 1.6rem;

}

@media screen and (min-width:1030px) {



	.card-header h2 {

		font-size: 1.7rem;

		width:100%;

	}



}

.modal-body h2 {

	color:#007DBA;

	font-size: 36px;

	font-size:2.25rem;

	line-height: 1.3;

}

.card-desc-strong

{

	font-size: 1.5rem;

	line-height: 1.6rem;

	font-family: 'Montserrat', sans-serif;

	font-weight:700;

}



/**

 * 3.0 - Elements

 */

html {



}

body {

    overflow-x: hidden;

}

body {

  padding-bottom: 1.5rem;

}

/*Remove boder - check on accessability */

a::-moz-focus-inner {

  border: 0;

}

a img {

	outline : none;

}

a {

	outline : none;

}

thead {

	background-color: #007DBA;

	color:#FFF;

	font-family: 'Montserrat', sans-serif;

	font-weight:700;

}

.table td, .table th {

    border-top: 1px none #e9ecef;

}

.table{

	margin-bottom:2em;

}

/**

 * 3.0 - Navigation

 */



/* Menu */

.navbar-dark .navbar-toggler{

	cursor: pointer !important;

}

/**

 * 4.0 - Accessibility

 */



/* Text meant only for screen readers */

.screen-reader-text {

	clip: rect(1px, 1px, 1px, 1px);

	height: 1px;

	overflow: hidden;

	position: absolute !important;

	width: 1px;

	/* many screen reader and browser combinations announce broken words as they would appear visually */

	word-wrap: normal !important;

}

/**

 * 5.0 - Content

 */

.body{

	background-color: #f2f2f2;

}

.row.unified-section .col-lg-8.mx-auto, .row.unified-section .col-lg-10.mx-auto{

	box-shadow: 0 14px 14px #c5c5c5;

	margin-bottom:4em;

	background: #0967ad;

	max-width: 100%;

}

.board-members-staff{

	display: -webkit-box;

	display: -ms-flexbox;

	display: -webkit-flex;

	display: flex;

    justify-content:space-between;

	-webkit-justify-content: space-between;

	align-items:flex-start;

	-ms-flex-align: flex-start;

	-webkit-align-items: flex-start;

	-webkit-box-align: flex-start;

	flex-direction: row;

    -webkit-flex-direction: row;

    flex-wrap:wrap;

	-webkit-flex-wrap:wrap;

}

.board-members-staff ul{

	flex: 1 0 100%;

	list-style: none;

	margin-left:0;

	padding-left:0;

}

@media screen and (min-width:768px) {

	.board-members-staff ul{

		flex: 0 1 40%;

	}

}

.board-members-staff ul li{

	margin-left:0;

	padding-left:0;

	margin-bottom: 1em;

}

.board-members-staff li p:first-of-type{

	font-size:inherit;

	color:inherit;

}

.board-members-staff li p{

	font-size:12px;

	color:#007DBA;

	margin-bottom: 0;

}

.board-members-staff li p:first-of-type{

	font-size:16px;

}

/* 5.3 Footer */

footer.bg-custom{

	background-color: #292929;

	border-top: 1px solid #292929;

	margin-top:0 !important;

}

.design-wrapper{

	padding-right: 0px;

    padding-left: 0px;

	overflow: hidden;

	border-bottom: 1px solid #292929;

}

.full-width{

    width: 100vw !important;

    left: calc(-50vw + 50%) !important;

    position: relative!important;

    height: auto !important;

    overflow: visible;

    clear: both;

}



#triangle-design {

    width: 0;

    height: 0;

    border-left: 0px solid transparent;

    border-right: 97vw solid transparent;

    border-bottom: 100px solid #292929;

}

.logos-no-copy{

	display: -webkit-box;

	display: -ms-flexbox;

	display: -webkit-flex;

	display: flex;

    justify-content:space-between;

	-webkit-justify-content: space-between;

	align-items: center;

	-ms-flex-align: center;

	-webkit-align-items: center;

	-webkit-box-align: center;

	flex-direction: row;

    -webkit-flex-direction: row;

    flex-wrap:wrap;

	-webkit-flex-wrap:wrap;

	margin-bottom: 5em;

}

.logos-no-copy img{

	flex: 0 0 20%;
    padding: 15px;

}

/*Bootsrap Elements Customized*/



.btn:focus,.btn:active {

	-webkit-box-shadow: none;

	box-shadow: none ;

}

/* Everything but the jumbotron gets side spacing for mobile first views */

.header,

.marketing,

.footer {

  padding-right: 1rem;

  padding-left: 1rem;

}



/* Custom page header */

.header {

  padding-bottom: 1rem;

  border-bottom: .05rem solid #e5e5e5;

}

/* Make the masthead heading the same height as the navigation */

.header h3 {

  margin-top: 0;

  margin-bottom: 0;

  line-height: 3rem;

}

.navbar{

	background-color: #292929;

}

.navbar-collapse{

	margin-top: 2.5em;

}

@media (min-width: 992px){

	.navbar-expand-lg>.container{

		max-width:1280px;

	}

}

@media (min-width: 992px){

nav.navbar.small-nav {

  height: 50px;

}

.navbar-collapse{

	margin-top: 0em;

}

}

nav.navbar.small-nav .navbar-brand{

	margin-top:43px;

}

nav.navbar .navbar-brand{

	margin-top:-13px;

}

nav.navbar .navbar-brand img{

	-webkit-transition: all 0.6s ease-in-out;

	-moz-transition: all 0.6s ease-in-out;

	-ms-transition: all 0.6s ease-in-out;

	-o-transition: all 0.6s ease-in-out;

	transition: all 0.6s ease-in-out;

	width:auto;

	min-height:150px;

	margin-bottom: -38px;

}

nav.navbar.small-nav .navbar-brand img{

	min-height:80px;

	width:auto;

	-webkit-transition: all 0.6s ease-in-out;

	-moz-transition: all 0.6s ease-in-out;

	-ms-transition: all 0.6s ease-in-out;

	-o-transition: all 0.6s ease-in-out;

	transition: all 0.6s ease-in-out;

	margin-bottom: -18px;

}

nav.navbar{

  background-color:#ccc;

  	-webkit-transition: all 0.6s ease-in-out;

	-moz-transition: all 0.6s ease-in-out;

	-ms-transition: all 0.6s ease-in-out;

	-o-transition: all 0.6s ease-in-out;

	transition: all 0.6s ease-in-out;

}

.jumbotron{

	padding:0;

}

.jumbotron.main-header{

	padding: 100px 0 0 0;

}

.jumbotron img{

	max-width:100%;

	height:auto;

	z-index: 0;

}

.jumbotron .header-title{

	width:100%;

	margin-top:-5rem;

	height:20rem;

	margin-bottom:5rem;

	padding-top:3rem;

	padding-bottom:3rem;

	background-position: 0% 100%;

	z-index: 999;

	color:#FFF;

}

.hero {

  width: 100%;

  max-width: 1960px;

  height: auto;

  text-align: left;

  margin: 0 auto;

  background-color: transparent;

  position: relative;

  color: #FFF;

}

.jumbotron .hero{

	max-width:78.125em;

}

.jumbotron .hero.hero-top{

	max-width:inherit;

}

.hero h1 {

    font-size: 4.5vw;

    margin: auto 0 auto 16%;

    position: absolute;

    bottom: 90px;

    left: 0;

    right: 0;

    z-index: 1;

}

.hero.trimmed h1 {

    font-size: 4vw;

    margin: auto 0 auto 16%;

    position: absolute;

    bottom: 28px;

    left: 0;

    right: 0;

    z-index: 1;

}

.hero h2 {

  font-size: 1.5em;

  margin: auto;

  position: absolute;

  top: 220px;

  left: 0;

  right: 0;

  bottom: 0;

  z-index: 1;

}

.hero img {

  max-width: 100%;

  height:auto;

}



.card-group >div, .card >div{

	border-bottom:none;

	border-top:none;

	border-left:none;

	border-right:none;

}

.card-group .card:hover{

	box-shadow: 0 14px 14px #c5c5c5;

	-webkit-transition: all 0.6s ease-in-out;

	-moz-transition: all 0.6s ease-in-out;

	-ms-transition: all 0.6s ease-in-out;

	-o-transition: all 0.6s ease-in-out;

	transition: all 0.6s ease-in-out;
}

.card-group .card.icon-card:hover, .card-group .card.logo-card:hover{

	box-shadow:none;

}

.card-group .card{

	margin-right:5px;

}

.card-group .card.logo-card{

	text-align: center;

	display: -webkit-box;

	display: -ms-flexbox;

	display: -webkit-flex;

	display: flex;

    justify-content:space-between;

	-webkit-justify-content: space-between;

	align-items: center;

	-ms-flex-align: center;

	-webkit-align-items: center;

	-webkit-box-align: center;

	flex-direction: column;

    -webkit-flex-direction: column;

    flex-wrap:nowrap;

	-webkit-flex-wrap:nowrap;



}

.card .card-header{

	background-color: #007DBA;

	color:#FFF;

	min-height:240px;

	text-align: center;

	display: -webkit-box;

	display: -ms-flexbox;

	display: -webkit-flex;

	display: flex;

    justify-content:space-between;

	-webkit-justify-content: space-between;

	align-items: center;

	-ms-flex-align: center;

	-webkit-align-items: center;

	-webkit-box-align: center;

	flex-direction: row;

    -webkit-flex-direction: row;

    flex-wrap:wrap;

	-webkit-flex-wrap:wrap;

	margin-left:20px;

	margin-right:20px;

	word-wrap: normal;



}

/*For card headers that contain an image not copy*/

.card .card-header.image{

	padding:0;

	background-color: transparent;

}

.card .card-header.image img{

	max-width:100%;

	height:auto;

}

@media all and (-ms-high-contrast:none)

     {

     .card .card-header.image img{

			max-width:220px;

			height:auto;

		}

     *::-ms-backdrop, .card .card-header.image img{

			max-width:220px;

			height:auto;

		} /* IE11 */

     }

/*cards with images in the body*/

.card.logo-card .card-header {

    background-color: transparent;

    color: inherit;

    min-height: auto;

    text-align: center;

    display: block;

    margin-left: 0px;

    margin-right: 0px;

	flex-grow: 1;

}

.card-body.card-body-image{

	padding:0;

}

.card-body.card-body-image img{

	max-width:100%;

	height:auto;

}

/*Modal*/

.modal-body .container-fluid{

	padding-left:0;

}

button.close{

	cursor: pointer !important;

}

h5.modal-title{

	font-size:32px;

	font-size:2rem;

}

.triec-blue h5.modal-title{

	color:#007DBA;

}

.triec-dkblue h5.modal-title{
    color: #0D3B70;
}

.triec-green h5.modal-title{

	color:#00A29B;

}

.triec-orange h5.modal-title{

	color:#F48F12;

}

.triec-ltorange h5.modal-title{

	color:#F6A33C;

}

.triec-ltrorange h5.modal-title{

	color:#F8B768;

}

.triec-purple h5.modal-title{

	color:#772057;

}

.sr-only-title .modal-header {

    display: -ms-flexbox;

    display: flex;

    -ms-flex-align: center;

    align-items: center;

    -ms-flex-pack: flex-end;

    justify-content: flex-end;

    padding: 15px;

    border-bottom: 1px none #e9ecef;

}

.modal-header {

    padding: 15px 15px 15px 15px;

    border-bottom: 1px none #e9ecef;

}

.modal-body img{

	max-width:100%;

	height:auto;

	margin-bottom:0.75em;

	margin-left:0;

}

.card.triec-green .card-header{

	background-color: #00A29B;

}

.card.triec-orange .card-header{

	background-color: #F48F12;

}

.card.triec-ltorange .card-header{

	background-color: #F6A33C;

}

.card.triec-ltrorange .card-header{

	background-color: #F8B768;

}

.card.triec-purple .card-header{

	background-color: #772057;

}

.card .card-header.pin-videos h2{

	width:100%;

}

.card-footer{

	background-color:transparent;

	padding-bottom: 2em;

}

.card .btn-custom{

    background-color: #FFF;

	border-radius:0;

	border:solid 4px;

	text-transform: uppercase;

	font-family: 'Montserrat', sans-serif;

	font-weight: 700;

	color: #007DBA;

    border-color: #007DBA;

}

.card .btn-custom:hover{

	color: #FFF;

	background-color: #007DBA;

}

.card .btn-custom:after{

	font-family: "Material Icons";

	content:"\e037";

	direction: ltr;

    display: inline-block;

    font-size: 150%;

    font-style: normal;

    font-weight: normal;

    letter-spacing: normal;

    line-height: 0;

    text-transform: none;

    white-space: nowrap;

    word-wrap: normal;

    -webkit-font-feature-settings: 'liga';

    -webkit-font-smoothing: antialiased;

	vertical-align: middle;

}

.card.triec-green .btn-custom {

    color: #00A29B;

    border-color: #00A29B;

}

.card.triec-green .btn-custom:hover{

	color: #FFF;

	background-color: #00A29B;

}

.card.triec-orange .btn-custom {

    color: #F48F12;

    border-color: #F48F12;

}.card.triec-orange .btn-custom:hover{

	color: #FFF;

	background-color: #F48F12;

}

.card.triec-ltorange .btn-custom {

    color: #F6A33C;

    border-color: #F6A33C;

}.card.triec-ltorange .btn-custom:hover{

	color: #FFF;

	background-color: #F6A33C;

}

.card.triec-ltrorange .btn-custom {

    color: #F8B768;

    border-color: #F8B768;

}.card.triec-ltrorange .btn-custom:hover{

	color: #FFF;

	background-color: #F8B768;

}

.card.triec-purple .btn-custom {

    color: #772057;

    border-color: #772057;

}.card.triec-purple .btn-custom:hover{

	color: #FFF;

	background-color: #772057;

}

@media (min-width: 576px){

	.card-group{

		-webkit-justify-content: center;

		justify-content: center;

	}

	.card-group .card {

		-ms-flex: 1 0 100%;

		flex: 1 0 100%;

	}

}

@media (min-width: 880px){

	.card-group .card {

		-ms-flex: 1 0 0%;

		flex: 1 0 0%;

	}

	/*to stop card in card-decks with less than 3 cards from growing */

	.card-group .card.icon-card {

		-ms-flex: 0 0 32%;

		flex: 0 0 32%;

	}

	.modal-body img{

		margin-left:0.75em;

	}

	.card-group .card.icon-card.twouplrg {

		-ms-flex: 0 0 40%;

		flex: 0 0 40%;

	}

	.twouplrg:first-child

	{margin-right:35px;}

    

    .card-group .card.icon-card.threeuplrg {

		-ms-flex: 0 0 32%;

		flex: 0 0 32%;

	}

	

}

.carousel-indicators {

  bottom:-50px;

}

.carousel-inner {

   margin-bottom:80px;

   min-height: 430px;

}

.carousel-indicators li{

	background-color: #007DBA;

	height:20px;

	width:20px;

	border-radius: 50%;

	cursor:pointer !important;

}

.carousel-indicators .active {

    background-color: #772057;

}

@media all and (max-width: 768px) {

  .hero {

    height: 60vw;

  }

.hero.trimmed {

    height: 28vw;

  }

  .bar {

    height: 26vw;

    top: 10vw;

  }

  /*.hero h1{

    font-size: 8vw;

    top: 40vw;

  }

 .hero.trimmed h1{

    font-size: 6vw;

    top: 20vw;

  }*/



.hero h1 {

    font-size: 7vw;

    top: 35vw;

}

.hero.trimmed h1 {

    font-size: 6vw;

    top: 14vw;

}	

  .hero h2 {

    font-size: 3vw;

    top: 27vw;

  }

}



/* Custom page footer */

.footer {

  padding-top: 1.5rem;

  color: #777;

  border-top: .05rem solid #e5e5e5;

}



/* Customize container */

@media (min-width: 48em) {

  .container {

    max-width: 80rem;

  }

}

.container-narrow > hr {

  margin: 2rem 0;

}

.container-narrow{

	max-width:800px;

	max-width:50rem;

}

/* Main marketing message and sign up button */

.jumbotron.top-section {

  text-align: left;

  border-bottom: .05rem solid #e5e5e5;

  box-shadow: 0 14px 14px #c5c5c5;

  transition: all 0.4s ease-in-out 0s;

}

.jumbotron .btn {

  padding: .75rem 1.5rem;

  font-size: 1.5rem;

}

.jumbotron.top-section{

	background-color:#007DBA;

	color: #FFF;

	padding:5% 10% 5% 10%;

}

.jumbotron.top-section h2{

	font-size: 40px;

	font-size: 2.5rem;

}

.jumbotron.top-section p{

	font-size: 24px;

	font-size: 1.5rem;

}

/* Supporting marketing content */

.marketing {

  margin: 3rem 0;

}

.marketing p + h4 {

  margin-top: 1.5rem;

}

/*Remove images from modals on small screen*/

@media screen and (min-width: 300px) and (max-width: 768px) {

	img.d-flex, .modal img {

		display: none !important;

	}

}

/* Responsive: Portrait tablets and up */

@media screen and (min-width: 48em) {

  /* Remove the padding we set earlier */

  .header,

  .marketing,

  .footer {

    padding-right: 0;

    padding-left: 0;

  }

  /* Space out the masthead */

  .header {

    margin-bottom: 2rem;

  }

  /* Remove the bottom border on the jumbotron for visual effect */

  .jumbotron {

    border-bottom: 0;

  }

}

/*!

 * Start Bootstrap - Scrolling Nav (https://startbootstrap.com/template-overviews/scrolling-nav)

 * Copyright 2013-2017 Start Bootstrap

 * Licensed under MIT (https://github.com/BlackrockDigital/startbootstrap-scrolling-nav/blob/master/LICENSE)

 */



header {

  padding: 113px 0 100px;

}

section {

  padding: 160px 0 0 0;

}



@media (min-width: 992px) {

  header {

    padding: 111px 0 100px;

  }

section {

  padding: 50px 0 0 0;

}

}



/* key-milestones */

#key-milestones .card { margin-bottom: 60px}

#key-milestones .card .card-header.image img { width: 290px; max-width: 100%; height: auto; margin: 0 auto; display: block;}


#outcomes .card-header.triec-dkblue { background-color: #0D3B70; }

#outcomes .card-header.triec-orange { background-color: #F39020; }

#outcomes .card-header.triec-teal { background-color: #00A29B; }

#outcomes .card-header.triec-grey { /* background-color: #2C2C2C; */ background-color: #808080; }


#outcomes .btn.btn-dkblue { border-color: #0D3B70; color: #0D3B70; }

#outcomes .btn.btn-orange { border-color: #F39020; color: #F39020; }

#outcomes .btn.btn-teal { border-color: #00A29B; color: #00A29B; }

#outcomes .btn.btn-grey { /* border-color: #2C2C2C; color: #2C2C2C; */ border-color: #808080; color: #808080; }


#outcomes .btn.btn-dkblue:hover { background-color: #0D3B70; color:#FFF}

#outcomes .btn.btn-orange:hover { background-color: #F39020; color:#FFF }

#outcomes .btn.btn-teal:hover { background-color: #00A29B; color:#FFF}

#outcomes .btn.btn-grey:hover { /* background-color: #2C2C2C; */ background-color: #808080; color:#FFF}

/* charts */

.pie-chart .pie {
		background:
			radial-gradient(
				circle closest-side,
				white 0,
				white 65%,
				transparent 65%,
				transparent 100%,
				white 0
			),
			conic-gradient(
				#4e79a7 0,
				#4e79a7 55%,
				#B9BF33 0,
				#B9BF33 80%,
				#1CA39B 0,
				#1CA39B 87%,
				#D64A27 0,
				#D64A27 90%,
				#782158 0,
				#782158 100%
		);
		position: relative;
        display: inline-block;
		width: 100%;
		min-height: 300px;
		margin: 0;
	}
    .pie-chart .pie-2 {
		background:
			radial-gradient(
				circle closest-side,
				white 0,
				white 65%,
				transparent 65%,
				transparent 100%,
				white 0
			),
			conic-gradient(
				#4e79a7 0,
				#4e79a7 32%,
				#782158 0,
				#782158 72%,
				#B9BF33 0,
				#B9BF33 86%,
				#D64A27 0,
				#D64A27 100%
		);
		position: relative;
        display: inline-block;
		width: 100%;
		min-height: 300px;
		margin: 0;
	}                                
    .pie-chart .t { display: table; width: 100%} 
    .pie-chart .tc { display: table-cell; vertical-align: middle; width: 50%; position: relative; }  
    .pie-chart .tc.tcpie { width: 40%; }
    .pie-chart .tc.tcfig { width: 60%; }
	.pie-chart figcaption {
        padding-left: 20%;
        display: block;
		position: relative;		
		font-size: smaller;
		text-align: left;
        vertical-align:middle
   
	}
	.pie-chart span:after {
		display: inline-block;
		content: "";
		width: 0.8em;
		height: 0.8em;
		margin-left: 0.4em;
		height: 0.8em;
		border-radius: 0.2em;
		background: currentColor;
	}
    .revenue { position: absolute; top: 50%; left: 0; right: 0; z-index: 1000; margin-top: -1.4rem; text-align: center; font-size: 100%; line-height: 1.2; font-weight: 600 }
    .pie-chart .percentages,
    .pie-chart-2 .percentages { position: absolute; top: 0; bottom:0; left: 0; right: 0; z-index: 2000; background: url(../img/TRIEC-FinancialGraph-Revenue-PC.png) center center no-repeat; background-size: 100% auto; }
    .pie-chart-2 .percentages  {background: url(../img/TRIEC-FinancialGraph-Expenditures-PC.png) center center no-repeat; background-size: 100% auto;}  
    
    .tc.tcfig .key.key-blue:after { background: #4e79a7; }
    .tc.tcfig .key.key-yellow:after { background: #B9BF33; }
    .tc.tcfig .key.key-teal:after { background: #1CA39B; }
    .tc.tcfig .key.key-orange:after { background: #D64A27; }
    .tc.tcfig .key.key-purple:after { background: #782158; }

.table td.expenditure, .table th.expenditure { width: 270px}
.table td.title, .table th.title  { width: 1000px}