.contentcontainer.extrapadding {
	padding-top: 100px;
	padding-bottom: 100px;
}

.expand_header h3.header-button {
	padding: 1em 2em;
	border: 1px solid #ccc;
	border-radius: 5px;
	display: inline;
}



/***** GREEN BG *****/
.content .greenbg {
	background-color: #00833e;
}
	.content .fullwidth.greenbg h2, 
	.content .fullwidth.greenbg h3, 
	.content .fullwidth.greenbg h4, 
	.content .fullwidth.greenbg h5, 
	.content .fullwidth.greenbg p, 
	.content .fullwidth.greenbg a, 
	.content .fullwidth.greenbg ul li {
		color: #fff;
		border-color: #6db33f;
	}
	.content .fullwidth.greenbg a:hover {
		border-color: #fff;
	}
	.content .fullwidth.greenbg a.button.learnmore, 
	.content .fullwidth.greenbg a.button.learnmore:hover {
		border: none;
	}
	.content .fullwidth.greenbg ul.links li a {
		background-color: #00833e;
		color: #fff;
	}
		.content .fullwidth.greenbg ul.links li a:hover {
			background-color: #6db33f;
			color: #00833e;
		}


.content .charcoal {
	background-color: #333;
}
	.content .fullwidth.charcoal h2, 
	.content .fullwidth.charcoal h3, 
	.content .fullwidth.charcoal h4, 
	.content .fullwidth.charcoal h5, 
	.content .fullwidth.charcoal p, 
	.content .fullwidth.charcoal a, 
	.content .fullwidth.charcoal ul li {
		color: #fff;
		border-color: #6db33f;
	}
	.content .fullwidth.charcoal a:hover {
		border-color: #fff;
	}
	.content .fullwidth.charcoal a.button.learnmore, 
	.content .fullwidth.charcoal a.button.learnmore:hover {
		border: none;
	}
	.content .fullwidth.charcoal ul.links li a {
		background-color: #00833e;
		color: #fff;
	}
		.content .fullwidth.charcoal ul.links li a:hover {
			background-color: #6db33f;
			color: #00833e;
		}


/***** TRIMET FACTS *****/
.syspromo {
    display: block;
/*
    border: 1px solid #ccc;
    border-radius: 5px;
*/
    margin-bottom: 1em;
    padding: 0 .5em;
	text-align: center;
}
    .syspromo .boxy {
		border-radius: 5px;
		background-color: #f3f3f3;
		padding: .5em .125em .125em;
    }
    .syspromo h3 {
        font-size: 1.125em;
/*        text-transform: uppercase;*/
        font-weight: 400;
        color: #666;
        padding-bottom: .25em;
        padding-top: 0;
    }
		.syspromo h3 i {
			font-size: 150%;
		}
    .syspromo p {
        font-size: 1.25em;
        line-height: 1;
        padding-bottom: .5em;
    }
        .syspromo p b {
            font-size: 1.5em;
        }
        .syspromo p.smaller {
            font-size: 1.25em;
        }
        .syspromo p.smaller b {
            font-size: 1.25em;
        }
    .syspromo img.img {
        margin-bottom: 0;
    }
@media only screen and (min-width: 992px) { /* md screens and up */
    .syspromo {
        min-height: 190px;
    }
    .syspromo h3 {
        font-size: 1.5em;
    }
    .syspromo p {
        font-size: 1.5em;
    }
        .syspromo p b {
            font-size: 2em;
        }
        .syspromo p.smaller {
            font-size: 1.25em;
        }
        .syspromo p.smaller b {
            font-size: 1.5em;
        }

}





/***** MAIN SECTIONS *****/
.content a.sectionlink {
	padding: 1em 1.5em;
	margin: 2em 0;
	border: none;
	display: block;
}
	.content a.sectionlink:hover {
		background-color: rgba( 255,255,255,.2);
		border-radius: 10px;
	}
		.content a.sectionlink.bus:hover {
			background-color: #d3e9ff;
			border-radius: 10px;
		}
	.content a.sectionlink div {
	}
	.content a.sectionlink img.img {
		margin-bottom: 0;
	}
	.content a.sectionlink h2 {
		font-size: 250%;
		padding-bottom: 15px;
	}
	.content a.sectionlink.black p {
		color: #333;
	}
	.content a.sectionlink p.more {
		text-transform: uppercase;
		letter-spacing: 1px;
		font-style: italic;
		font-weight: 700;
		font-size: 150%;
		color: #6db33f;
	}
		.content a.sectionlink:hover p.more {
			color: #82d54b;
		}
		.content a.sectionlink p.more span {
			font-style: normal;
		}
		.content a.sectionlink.white p.more {
			color: #ddd;
		}
			.content a.sectionlink.white:hover p.more {
				color: #fff;
			}
		.content a.sectionlink.blue h2, .content a.sectionlink.blue p.more {
			color: #084c8d;
		}
			.content a.sectionlink.blue:hover p.more {
				color: #0c71d2;
			}
@media only screen and (min-width: 768px) {
		.content a.sectionlink h2 {
			font-size: 300%;
		}
}
@media only screen and (min-width: 992px) {
		.content a.sectionlink h2 {
			font-size: 350%;
			padding-top: .75em;
		}
}




/***** MAJOR PROJECTS *****/
.content a.promologo {
	transition-property: all;
	transition-duration: 0.15s;
	transition-timing-function: ease-out;
	display: block;
	border-radius: 5px;
	margin-bottom: 1em;
	padding: .75em;
/*
	border-width: 5px;
	border: 5px solid #f6f6f6;
*/
	background-color: #f6f6f6;
	background-color: #eee;
	border: 0;
	text-align: center;
}
	.content a.promologo:hover {
/*		border: 5px solid #084c8d;*/
		transition-property: all;
		transition-duration: 0.2s;
		transition-timing-function: ease-out;
		background-color: #fff;
	}
	.content a.promologo img {
		border: none;
		padding: 0;
		margin: 0;
	}
	.content a.promologo p {
		color: #333;
		line-height: 1.25;
	}
		.content a.promologo:hover p {
			color: #084c8d;
		}



/***** PROJECT LINK *****/
.content ul.projectlink li a {
	transition-property: all;
	transition-duration: 0.15s;
	transition-timing-function: ease-out;
    border: 1px solid #eee;
    border-radius: 5px;
    display: block;
    margin-bottom: 2em;
	text-align: center;
	padding: .5em;
	font-weight: 500;
}
    .content ul.projectlink li a:hover {
        background-color: #999;
		background-color: #d3e9ff;
		border-color: #084c8d;
		transition-property: all;
		transition-duration: 0.2s;
		transition-timing-function: ease-out;
		color: #084c8d;
    }
@media only screen and (min-width: 768px) { 
	.content ul.projectlink li a {
		width: 60%;
		margin: 0 auto;
	}
}
@media only screen and (min-width: 990px) { 
}


/***** MINOR PROJECTS *****/
.content a.minorproject {
	transition-property: all;
	transition-duration: 0.15s;
	transition-timing-function: ease-out;
    border: 1px solid #eee;
    padding: 7px 5px 7px 15px;
    border-radius: 10px;
    display: block;
    margin-top: 1em;
	background-color: rgba(255,255,255,.5);
}
   .content a.minorproject h2 {
        padding-top: .5em;
        padding-bottom: .25em;
 		color: #084c8d;
   }
	    .content a.minorproject.small h2 {
			padding-bottom: 0;
			font-size: 1.75em;
	    }
    .content a.minorproject p {
        padding-bottom: 0;
    }
    .content a.minorproject:hover {
        background-color: #999;
		background-color: #d3e9ff;
		border-color: #084c8d;
		transition-property: all;
		transition-duration: 0.2s;
		transition-timing-function: ease-out;
    }
		.content a.minorproject:hover h2, .content a.minorproject:hover p {
			color: #084c8d;
		}
@media only screen and (min-width: 480px) { 
	.content a.minorproject h2 {
		padding-top: 1em;
	}
	   .content a.minorproject.small h2 {
			padding-top: .5em;
	   }
}



/***** SUBPAGE HEADERS *****/
.content .mtbheader {
	background-color: #333;
}
	.content .mtbheader.max {
		background-color: #073e73;
	}
	.content .mtbheader.bus {
		background-color: #d14727;
	}
	.content .mtbheader.environment {
		background-color: #00833e;
	}
	.content .mtbheader .contentcontainer {
		padding-top: 0;
		padding-bottom: 0;
	}
		.content .mtbheader .mtb {
			display: block;
		}
		.content .mtbheader img.img {
			margin: 0;
		}
		.content .mtbheader h1, .content .mtbheader p {
			color: #fff;
		}
			.content .mtbheader h1 span {
				font-size: 150%;
			}
		.content .mtbheader p.subheader {
			text-transform: uppercase;
			letter-spacing: 1px;
			font-weight: 300;
		}

        .content .mtbheader a {
            color: #fff;
			border-color: #666;
        }
			.content .mtbheader.max a {
				border-color: #084c8d;
			}
			.content .mtbheader.bus a {
				border-color: #666;
				border-color: #eb6546;
			}
			.content .mtbheader.environment a {
				border-color: #00ab51;
			}
			.content .mtbheader a:hover {
				border-color: #fff;
			}
@media only screen and (min-width: 768px) { /* sm screens and up */
	.content .mtbheader .mtb {
		margin-top: 15%;
	}
}

@media only screen and (min-width: 480px) {
	.content h2.bustitle {
		padding-top: 0;
	}
}


/***** BUS IMPROVEMENTS LIST *****/
.content a.linklist {
	background: #fff;
    border: 1px solid #eee;
	border-radius: 5px;
    display: block;
	/* border-bottom: none; */
	/* margin-bottom: 1em; */
    padding: 1.5em;
}
	 .content a.linklist.check {
		padding-left: 80px;
	}
		.content a.linklist.check:before {
			content: "✔️";
			display: block;
			float: left;
			font-size: 40px;
			margin-left: -60px;
			margin-top: 10px;
		}
	.content a.linklist:last-child {
		border-bottom: 1px solid #eee;
	}
    .content a.linklist:hover {
        background-color: #d3e9ff;
		border-color: #084c8d;
    }
    .content a.linklist h3 {
        padding-top: 0;
        padding-bottom: 0;
		margin-bottom: .25em;
		color: #333;
		border-bottom: 1px solid #084c8d;
    	max-width: fit-content;
    }
		.content a.linklist.check h3 {
			padding-top: .25em;
		}
    .content a.linklist p {
        padding-bottom: 0;
		color: #333;
    }
		.content a.linklist:hover h3, .content a.linklist:hover p {
			color: #084c8d;
		}
    .content a.linklist img {
        border-radius: 50%;
    }
@media only screen and (min-width: 768px) { /* sm screen and up */
    .content a.linklist h3 {
		padding-top: 1em;
    }
		.content a.linklist.check h3 {
			padding-top: .25em;
		}
}

ul.improvements-list {
	margin-left: 0;
}
ul.improvements-list li {
	list-style: none;
}


/***** PROJECT STATUS LABELS *****/
h2 small:after {
	display: inline-block;
	padding: .25em .75em;
	text-align: center;
	border-radius: 5px;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-family: "Source Sans Pro";
	margin: 0 0 .75em;
	background-color: #ccc;
}
	h2 small.planning:after {
		content: "Planning";
		background-color: #ffc524;
	}
	h2 small.inprogress:after {
		content: "In Progress";
		background-color: #0f6aac;
		color: #fff;
	}
	h2 small.completed:after {
		content: "Completed";
		background-color: #028953;
		color: #fff;
	}



/* ANCHORS */
.content ul.anchor.big {
	margin-top: 4em;
	margin-bottom: 0;
}
	.content ul.anchor.big li a {
		display: inline-block;
		padding: .5em 1em;
		border-radius: 5px;
		text-align: center;
		border: 0;
		margin-bottom: 1em;
		font-size: 115%;
	}
		.content ul.anchor.big li a:hover {
			background-color: #084c8d;
			color: #fff;
		}

@media only screen and (min-width: 768px) {
	.content ul.anchor.big li a {
		font-size: 125%;
		padding: 1em 1.5em;
	}
}

.content .box.bluebg {
	background-color: #084c8d;
	border: none;
}

/***** ACCORDIONS *****/
/* Details & Summary */
:root {
    --svg-code: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' preserveAspectRatio='xMinYMid'><path fill='currentColor' d='M6 8l-1 1l5 5l5-5l-1-1l-4 4l-4-4z'/></svg>");
}

summary {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}

/* Safari webkit prefix */
summary::-webkit-details-marker {
    display: none;
}

summary.header-button {
	max-width: 66%;
	margin: 0 auto;
	padding: 1em;
	border: 1px solid #ccc;
	border-radius: 3px;
}

summary::after {
    content: '';
    mask: var(--svg-code);
    -webkit-mask: var(--svg-code);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    background-color: #000;
    height: 24px;
    width: 24px;
    min-width: 24px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: 0.5s;
}

details:hover summary::after {
    background-color: #084c8d;
    transition: 0.5s;
}

@media only screen and (min-width: 768px) {
    summary::after {
        height: 30px;
        width: 30px;
        min-width: 30px;
    }

    details:hover summary::after {
        width: 30px;
        height: 30px;
    }

	summary.header-button {
        max-width: 50%;
    }
}

details[open] > summary::after {
    transform: rotate(-180deg);
}

summary > h3 {
    display: inline;
    padding: .75em 5px;
}

summary:hover > h3 {
    color: #084c8d;
}

.detail-col-wrapper {
    box-sizing: border-box;
}