/*
oswald: 300,400,600
source: 300,300i,400,400i,600,600i
*/


body {
    font-size: 18px;
    font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, "sans-serif";
    font-weight: 400;
}
b {
    font-weight: 600;
}

a, a:hover {
	color: #00833e;
}

a.pdf {
    font-weight: 300;
    padding: 5px 15px 5px 50px;
    margin: 0 0 10px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
    border: 1px solid #eee;
    line-height: 1.25;
    background: url("/global/img/icon-pdf.png") 10px 12px no-repeat #f6f6f6;
    background-size: 30px 30px;
    color: #333;	
    min-height: 55px;
    cursor: pointer;
    text-decoration: none;
	display: block;
/*	display: inline-block;*/
}
    a.pdf:hover {
        border-color: #ccc;
        background-color: #dbdbdb;
        color: #333;
    }

p.big {
    font-size: 21px;
    line-height: 1.5;
}
p.caption {
    font-size: .8em;
    text-transform: uppercase;
}
.modal-dialog {
    margin-top: 25vh;
}

/***** HEADINGS *****/
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    line-height: 1.25;
    font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
h1 {
    color: #fff;
    padding: .5em 0 1em;
    text-transform: uppercase;
	letter-spacing: .5px;
	font-weight: 600;
    font-size: 2.5em;
}
    .design .content-header.headerimg h1 {
        padding: 0;
    }
    h1 a {
        color: #fff;
    }
        h1 a:hover {
            color: #fff;
        }
h2 {
    font-size: 1.5em;
	font-weight: 300;
    text-transform: uppercase;
	letter-spacing: .5px;
	border-width: 0 0 3px 0;
	border-color: #00833e;
	border-style: dotted;
	color: #00833e;
	padding-bottom: .5em;
	margin-bottom: .625em;
}
h3 {
    font-size: 21px;
	color: #333;
	font-weight: 300;
}
h4 {
    font-size: 16px;
    font-weight: 400;
    margin: 1em 0 .5em;
	text-transform: uppercase;
	color: #666;
}
@media only screen and (min-width: 768px) {
    h1 {
		font-size: 3em;
        padding: .75em 0 1.25em;
    }
    h2 {
		font-size: 2em;
    }
    h3 {
		font-size: 1.5em;
    }
}
@media only screen and (min-width: 992px) { /* md screens and up */
    h1 {
		font-size: 4em;
    }
    h2 {
        font-size: 2.5em;
    }
    h3 {
        font-size: 28px;
    }
    h4 {
        font-size: 18px;
    }
}


h1 small, h2 small, h3 small, h4 small, h5 small {
    color: inherit;
}


.feedback {
    position: fixed;
    z-index: 999;
    bottom: 0;
    width: 190px;
    height: auto;
    right: 0;
    text-align: center;
}

.circle {
    background-color: #008344;;
    border-radius: 50%;
    width: 1.5em;
    height: 1.5em;
    display: inline-block;
    text-align: center;
    color: #fff;
    padding-top: .125em;
    margin-top: .5em;
}



.fullwidth {
    margin-left: auto;
    margin-right: auto;
	padding: 0;
}
	.container {
		margin-left: auto;
		margin-right: auto;
		padding-left: 15px;
		padding-right: 15px;
	}

/****** LINK LISTS ******/
ul.links {
    margin-left: 0;
    padding-left: 0;
    margin-bottom: 1em;
}
    ul.links li {
        list-style: none;
    }
    ul.links a, ul.links li.pending {
        border: 1px solid #eee;
        padding: 7px 15px;
        border-radius: 5px;
        display: block;
        margin-bottom: 10px;
		text-decoration: none;
    }
        ul.links li.pending {
            background-color: #eee;
        }
    ul.links a:hover {
        background-color: #008344;
        border-color: #008344;
		color: #fff;
    }

    .box ul.links.stations a {
        background-color: #00833e;
        border-color: #00833e;
        color: #fff;
    }
        .box ul.links.stations a:hover {
            background-color: #9fbc2e;
            border-color: #9fbc2e;
            color: #fff;
        }

/****** PROMO IMG ******/
a.img-promo {
    display: block;
    border-radius: 3px;
    
    box-shadow: 0 0 0 2px rgba(0,0,0,.4);
    transition-property: box-shadow;
    transition-duration: .15s;
    transition-timing-function: ease-out;
}
        a.img-promo:hover {
            box-shadow: 0 0 0 5px rgba(0,131,68,1);
            transition-property: box-shadow;
            transition-duration: .2s;
            transition-timing-function: ease-out;
        }
        a.img-promo img {
            border-radius: 3px;
        }



/****** EMAIL SUBSCRIBE FORM ******/
form.getemailupdates {
    text-align: center;
    display: inline-block;
}
    form.getemailupdates input {
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        border-radius: 5px;
        padding: 8px 15px;
    /*    border: 2px solid #ccc;*/
        font-size: 18px;
        line-height: 1.4;
        margin-bottom: 15px;
        -webkit-appearance: none;   /* removes default safari formatting */
    }
    form.getemailupdates .top-label span {
        display: block;
        text-align: left;
    }
    form.getemailupdates input#email {
        padding-top: 9px;
        padding-bottom: 9px;
        width: 100%;
    }
    form.getemailupdates input.submit {
        font-weight: bold;
        display: inline-block;
        color: #fff;
        text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
        text-align: center;
        vertical-align: baseline;
        background-color: #62a038;
        border: 2px solid #62a038;
        cursor: pointer;
    }
        form.getemailupdates input.submit:hover {
            background-color: #568d32;
            border-color: #568d32;
        }

    @media only screen and (min-width: 768px) { /* sm screen and up */
        form.getemailupdates select {
            width: auto;
        }
        form.getemailupdates input#email {
            margin-right: 10px;
            width: 400px;
        }
    }


/***** DRAGSCROLL *****/
.mapnav p {
	background-color: rgba(255,255,255,0.75);
	padding: .25em 0 0;
	width: 180px;
	height: 32px;
	margin: 0 auto;
	z-index: 1000;
	text-align: center;
	position: absolute;
	top: 10px;
	right: 10px;
	border-radius: 10px;
	color: #333;
}

.dragscroll {
    overflow: auto;
    cursor: grab;
    height: 400px;
    z-index: 100;
}
    .dragscroll::-webkit-scrollbar { 
        width: 0 !important;
    }
        .dragscroll img {
            display: block;
            width: auto;
            height: 100%;
            margin: 0 auto;
        }
@media only screen and (min-width: 768px) { /* sm screen and up */
	.dragscroll {
		height: 500px;
	}
}
@media only screen and (min-width: 992px) { /* md screens and up */
	.dragscroll {
		height: 500px;
	}
	#areas .dragscroll {
		height: 578px;
	}
}
@media only screen and (min-width: 1600px) {
	.dragscroll {
		height: auto;
		cursor: auto;
	}
		.dragscroll img {
			display: block;
			width: 100%;
			height: auto;
		}
	.mapnav p {
		display: none;
	}
	#areas .dragscroll {
		height: 578px;
	}
}









.header-page {
    background-color: #5e9f41;
    padding-top: 0;
    padding-bottom: 1em;
    margin-top: 50px;
}
    .header-page.nopadding {
        margin-top: 0;
    }
    .header-page h1 {
        color: #fff;
    }
    .gt {
        padding-top: 0;
        display: block;
    }
@media only screen and (min-width: 768px) { /* sm screen and up */
    .header-page {
        padding-top: 1.5em;
        padding-bottom: 2em;
    }
   .gt {
        padding-top: 24px;
       text-align: right;
    }
}






/***** NAV BAR *****/
.navbar-fixed-top {
    z-index: 55000;
}
.navbar {
}
    .navbar-inverse {
        background-image: -webkit-linear-gradient(top,#3c3c3c 0,#222 100%);
        background-image: -o-linear-gradient(top,#3c3c3c 0,#222 100%);
        background-image: -webkit-gradient(linear,left top,left bottom,from(#3c3c3c),to(#222));
        background-image: linear-gradient(to bottom,#3c3c3c 0,#222 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
        filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
        background-repeat: repeat-x;
    }
    .navbar-toggle .icon-bar {
        background-color: #fff;
    }
    .navbar-brand {
        font-weight: 600;
        color: #fff;
    }
    .navbar-inverse .navbar-nav > li > a {
        color: #ccc;
		font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, "sans-serif";
		letter-spacing: .5px;
		text-transform: uppercase;
    }
		.navbar a.swcorridorlogo img {
			height: 50px;
		}
    .nav .open > a, .nav .open > a:hover, .nav .open > a:focus {
        background-color: #222;
    }
    .nav > li > a:hover, .nav > li > a:focus {
        background-color: #333;
	}
    @media (min-width: 768px) {
 		.navbar-inverse .navbar-nav > li > a {
			font-size: 15px;
		}
       .navbar .navbar-nav {
            display: inline-block;
            float: right;
            vertical-align: top;
        }

        .navbar .navbar-collapse {
            text-align: center;
        }
		
    }
    @media (min-width: 992px) {
		.navbar-inverse .navbar-nav > li > a {
			font-size: 18px;
		}
	}




/***** HEADER STRATA *****/
.header-bg {
    background: url("/swcorridor/img/header.jpg") center top no-repeat #fdf6da;
	background-size: auto 100%;
/*    margin-top: 51px;*/
	min-height: 200px;
}
@media only screen and (min-width: 410px) {
    .header-bg {
        background-size: auto 100%;
        min-height: 300px;
    }
}

@media only screen and (min-width: 610px) {
    .header-bg {
        background-size: 100% auto;
        min-height: 300px;
	}
    .nav > li > a {
        padding-left: 10px;
        padding-right: 10px;
    }
}
@media only screen and (min-width: 992px) { /* md screens and up */
    .header-bg {
        min-height: 490px;
    }
    .nav > li > a {
        padding-left: 10px;
        padding-right: 10px;
    }
}
@media only screen and (min-width: 1200px) { /* lg screens and up */
    .header-bg {
        min-height: 550px;
    }
}

.announcement {
    background-color: #ffc;
	margin-top: 51px;
}
	.announcement h3 {
		font-size: 2em;
	}
	.announcement p {
		font-size: 1.25em;
	}
.swclrp {
    background-color: #00833e;
}


.content-header {
    background-color: #00833e;
/*    margin-top: 51px;*/
}
    .content-header.headerimg {
        background: url("/swcorridor/img/header-route.jpg") 0 center no-repeat #00833e;
        background-size: auto 100%;
        min-height: 200px;
        padding: 10% 0;
    }
	.content-header.headerimg.route {
        background-image: url("/swcorridor/img/header-route-alt.jpg");
    }
	.content-header.headerimg.getinvolved {
		background-image: url("/swcorridor/img/header-getinvolved.jpg");
	}
	.content-header.headerimg.library {
		background-image: url("/swcorridor/img/header-library.jpg");
	}
	.content-header.headerimg.ecobenefits {
		background-image: url("/swcorridor/img/header-ecobenefits.jpg");
	}
	.content-header.headerimg.tod {
		background-image: url("/swcorridor/img/header-tod.jpg");
	}
	.content-header.headerimg.stations {
		background-image: url("/swcorridor/img/header-stations.jpg");
	}
	.content-header.headerimg.preconstruction {
		background-image: url("/swcorridor/img/header-preconstruction.jpg");
	}
	/*	Stations*/
	.content-header.headerimg.gibbs {
		background-image: url("/swcorridor/img/design/gibbs-rendering-header.jpg");
	}
	.content-header.headerimg.thirteenth {
		background-image: url("/swcorridor/img/design/13th-rendering-header.jpg");
	}
	.content-header.headerimg.nineteenth {
		background-image: url("/swcorridor/img/design/19th-rendering-header.jpg");
	}
	.content-header.headerimg.thirtith {
		background-image: url("/swcorridor/img/design/30th-rendering-header.jpg");
	}
	.content-header.headerimg.barbur {
		background-image: url("/swcorridor/img/design/BTC-rendering-header.jpg");
	}
	.content-header.headerimg.fiftithird {
		background-image: url("/swcorridor/img/design/53rd-rendering-header.jpg");
	}
	.content-header.headerimg.sixtieigth {
		background-image: url("/swcorridor/img/design/68th-rendering-header.jpg");
	}
	.content-header.headerimg.elmhurst {
		background-image: url("/swcorridor/img/design/elmhurst-rendering-header.jpg");
	}
	.content-header.headerimg.hall {
		background-image: url("/swcorridor/img/design/68th-rendering-header.jpg");
	}
	.content-header.headerimg.bonita {
		background-image: url("/swcorridor/img/design/68th-rendering-header.jpg");
	}
	.content-header.headerimg.upperboonesferry {
		background-image: url("/swcorridor/img/design/68th-rendering-header.jpg");
	}

	.content-header.headerimg.bridgeport {
		background-image: url("/swcorridor/img/design/68th-rendering-header.jpg");
	}

        .content-header.headerimg h1 {
            text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
            margin: 0;
            padding: 10% 0;
            text-align: center;

        }
@media only screen and (min-width: 400px) {
    .content-header.headerimg {
        background-size: 100% auto;
    }
}
@media only screen and (min-width: 992px) { /* md screens and up */
    .content-header.headerimg {
        min-height: 400px;
        background-size: 100% auto;
        padding: 5% 0;
    }
}



.fullwidth.lightgray {
    background-color: #f0f0f0;
}
    .fullwidth.lightgray ul.links a {
        background-color: #ddd;
        border: none;
    }
        .fullwidth.lightgray ul.links a:hover {
            background-color: #00833e;
            color: #fff;
        }
.fullwidth.gray {
    background-color: #e0e0e0;
}


a.button {
    font-weight: 400;
    padding: 5px 10px;
    border-radius: 5px;
    display: inline-block;
    color: #fff;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
    text-align: center;
    vertical-align: top;
    background-color: #008344;
    border: 2px solid #008344;
    margin-bottom: 15px;
}
    a.button:hover {
        background-color: #006936;
        border-color: #006936;
    }
    a.button.light {
        background-color: #337ab7;
        border: 2px solid #337ab7;
        margin-top: 15px;
    }
        a.button.light:hover {
            background-color: #296192;
            border: 2px solid #296192;
        }
    a.button.dark {
        background-color: #666;
        border: 2px solid #666;
        margin-top: 15px;
        color: #fff;
    }
        a.button.dark:hover {
            background-color: #999;
            border: 2px solid #999;
        }




/***** INTRO STRATA *****/
.homeintro .icons h3 {
    font-size: 115%;
    margin-top: 0;
}
@media only screen and (min-width: 768px) { /* sm screen and up */
    .homeintro .icons h3 {
        margin-top: inherit;
    }
}


/***** ROUTE STRATA *****/
.route {
    background-color: #e5e5e5;
    padding: 1em 0 0;
	background: url("/swcorridor/img/routemap-bg.png") center 150px no-repeat #e5e5e5;
	background-size: 130% auto;
}
	.route .map {
		min-height: 600px;
	}
	@media only screen and (min-width: 400px) {
		.route .map {
			min-height: 650px;
		}
	}
	@media only screen and (min-width: 430px) {
		.route .map {
			min-height: 640px;
		}
	}
	@media only screen and (min-width: 450px) {
		.route .map {
			min-height: 650px;
		}
	}
	@media only screen and (min-width: 480px) { /* ms screen and up */
		.route .map {
			min-height: 690px;
		}
	}
	@media only screen and (min-width: 500px) {
		.route .map {
			min-height: 715px;
		}
	}
	@media only screen and (min-width: 520px) {
		.route .map {
			min-height: 740px;
		}
	}
	@media only screen and (min-width: 550px) {
		.route .map {
			min-height: 780px;
		}
	}
	@media only screen and (min-width: 570px) {
		.route {
			background-position: center 0;
		}
		.route .map {
			min-height: 650px;
		}
	}
	@media only screen and (min-width: 600px) {
		.route .map {
			min-height: 700px;
		}
	}
	@media only screen and (min-width: 650px) {
		.route .map {
			min-height: 730px;
		}
	}
	@media only screen and (min-width: 670px) {
		.route .map {
			min-height: 785px;
		}
	}
	@media only screen and (min-width: 730px) {
		.route .map {
			min-height: 850px;
		}
	}
	@media only screen and (min-width: 768px) { /* sm screen and up */
		.route .map {
			min-height: 910px;
		}
	}
	@media only screen and (min-width: 830px) {
		.route .map {
			min-height: 995px;
		}
	}
	@media only screen and (min-width: 900px) {
		.route {
			background-size: 1200px auto;
		}
		.route .map {
			min-height: 1050px;
		}
	}



/***** CONNECTING STRATA *****/
.connecting {
	background: url("/swcorridor/img/connecting-bg.png") center bottom no-repeat #008344;
	background-size: 1200px auto;
}
	.connecting h2, .connecting h3, .connecting p {
		color: #fff;
		border-color: #fff;
	}
		.connecting h3 {
			margin: .25em 0 0;
		}

.row.nopadding {
	margin-bottom: 0;
}
	.connecting .icons img {
        display: none;
    }
@media only screen and (min-width: 480px) {
	.connecting .icons img {
		width: 60px;
		height: auto;
		margin: 0 0 0 -70px;
		position: absolute;
        display: block;
	}
}
@media only screen and (min-width: 768px) {
    .connecting .icons img {
        margin-top: 10px;
    }
    .row.nopadding {
        margin-bottom: 1.5em;
    }
}
@media only screen and (min-width: 990px) {
	.connecting .icons img {
		width: 80px;
		margin: 0 0 0 -100px;
	}
}


/***** TIMELINE *****/
.mapnav img.arrow {
    height: 1em;
    width: auto;
    display: inline;
    margin: auto;
}
@media only screen and (min-width: 990px) {
	.timeline {
		background: url("/swcorridor/img/timeline-bg.png") -100px bottom no-repeat #fff;
		background-size: 1200px auto;
		padding-bottom: 4em;
	}
}
.timeline-chart {
	text-align: left;
	margin-bottom: 2em;
	position: relative;
}
.timeline-chart .dragscroll {
	height: 320px;
	padding-top: 1em;
	display: block;
}
	.timeline-chart .mapnav p {
		left: 0;
		display: inline-block;
        margin-top: -1.5em;
	}
	.timeline-chart .bar {
		width: 800px;
        clear: both;
	}
		@media only screen and (min-width: 990px) {
            .timeline-chart .dragscroll {
                height: 330px;
            }
			.timeline-chart .mapnav p {
				display: none;
			}
			.timeline-chart .bar {
				width: 100%;
			}
		}


		.timeline-chart .segment {
			display: inline-block;
			padding: .25em .25em .25em .5em;
			margin: 0 -4px .5em 0;
			border-right: 4px solid #fff;
			color: #fff;
            text-transform: none;
		}        
			.timeline-chart .segment.planning {
				background-color: #9ebc2e;
				width: 10.333%;
			}
			.timeline-chart .segment.design {
				background-color: #0c884c;
				width: 33.333%;
			}
			.timeline-chart .segment.constructionlight {
				background-color: #81a6c0;
				width: 8%;
                margin-left: 7%;
                border-right: 0;
                background: repeating-linear-gradient(
                  135deg,
                  #81a6c0,
                  #81a6c0 1px,
                  #fff 1px,
                  #fff 3px
                );
			}
			.timeline-chart .segment.construction {
				background-color: #81a6c0;
				width: 35.41666%;
			}
			.timeline-chart .segment.testing {
				background-color: #58585a;
                margin-left: 34.666%;
				width: 4.666%;
                margin-right: 1.666%;
			}
			.timeline-chart .segment.service {
				width: 100%;
				color: #0c884c;
				text-align: right;
				position: relative;
				padding-right: 50px;
			}
				.timeline-chart .segment.service .pointer {
					background: url("/swcorridor/img/timeline-pointer.png") right 0 no-repeat;
					background-size: auto 100%;
					position: absolute;
					width: 45px;
					height: 65px;
					right: 0;
					bottom: 0;
			  }
			.timeline-chart .segment.envreview {
				background-color: #a12564;
				width: 44%;
				margin-left: 10.333%;
			}
			.timeline-chart .segment.funding {
				background-color: #102694;
				width: 16.333%;
				margin-left: 27%;
				margin-right: 56.666%;
			}

        .timeline-chart .segment.year {
            background-color: #939598;
            width: 8.333%;
        }
            .timeline-chart .segment.year.arrow {
                background: url("/swcorridor/img/timeline-arrow.png") right 0 no-repeat #939598;
                background-size: auto 100%;
                width: 6.333%;
            }
            .timeline-chart .segment.year.range {
                width: 10.333%;
            }


        .timeline-chart .callout {
			display: block;
            float: left;
			padding: .25em;
			margin: 0 -4px .5em 0;
            text-transform: none;
            color: #666;
            z-index: 10000;
            position: relative;
        }
            .timeline-chart .callout.rightborder:before {
                content: " ";
                position: absolute;
                z-index: -1;
                top: 0;
                right: -2px;
                bottom: 0;
                left: 0;
                border-right: 1px solid #fff;
            }
            .timeline-chart .callout.leftborder:before {
                content: " ";
                position: absolute;
                z-index: -1;
                top: 0;
                right: 0;
                bottom: 0;
                left: -2px;
                border-left: 1px solid #fff;
            }
        .timeline-chart .callout.conceptualdesign-draft {
                width: 36%;
                padding-top: 1.5em;
                margin-top: -1.5em;
                border-left: none;
                border-right: 1px solid #0a6e3d;
                text-align: right;
                color: #108740;
            }
            .timeline-chart .callout.conceptualdesign-final {
                margin-left: 3.25%;
                width: 60.75%;
                padding-top: 1.5em;
                margin-top: -1.5em;
                border-left: 1px solid #0a6e3d;
                color: #108740;
            }
            .timeline-chart .callout.regionalfunding {
                margin-left: 42%;
                width: 15.25%;
                padding-top: 1.5em;
                margin-top: -1.5em;
                border-left: 1px solid #0c1d70;
                color: #102694;
           }
            .timeline-chart .callout.federalfunding {
                width: 20.033%;
                padding-top: 1.5em;
                margin-top: -1.5em;
                border-left: 1px solid #0c1d70;
                color: #102694;
           }
            .timeline-chart .callout.servicebegins {
                width: 20.766%;
                width: 21%;
                margin-right: 2.333%;
                padding-top: 6.75em;
                margin-top: -8.75em;
                border-left: none;
                border-right: 1px solid #9ebc2e;
                text-align: right;
                color: #9ebc2e;
            }
            .timeline-chart .callout.testingtitle {
                width: 95.5%;
                width: 93.25%;
                margin-right: 4.5%;
                padding-top: 3.5em;
                margin-top: -5.5em;
                border-left: none;
/*                border-right: 1px solid #333;*/
                text-align: right;
                color: #333;
            }


/***** PARTNERSHIPS *****/
.partnerships {
	background-color: #333;
}
	.partnerships h2, .partnerships h3, .partnerships p {
		color: #fff;
		border-color: #fff;
	}
.partnerships .box p {
    color: #333;
}
.partnerships ul.links li a {
	background-color: #aaa;
    color: #fff;
    border: none;
}
    .partnerships ul.links li a:hover {
        background-color: #dbdbdb;
        border: none;
    }
    .partnerships a.pdf {
        border: none;
        text-decoration: none;
    }
        .partnerships a.pdf:hover {
            border: none;
            text-decoration: none;
}



/***** LEARN MORE *****/
.comments {
	background-color: #f0f0f0;
}




/***** INTRO *****/
.intro {
	background-color: #f0f0f0;
}


/***** PARTNERSHIPS *****/
.greenbg {
	background-color: #008344;
}
	.greenbg h2, .greenbg h3, .greenbg p, .greenbg li {
		color: #fff;
		border-color: #fff;
	}
        .greenbg h3.green {
            color: #008344;
        }
    .greenbg a.pdf {
        border-color: #006e39;
        background-color: #006e39;
        color: #fff;
    }
        .greenbg a.pdf:hover {
            border-color: #fff;
            background-color: #fff;
            color: #333;
        }


/***** DESIGN *****/
ul.benefit {
    padding-left: 2em;
    margin-bottom: 2em;
}
    ul.benefit li {
        list-style: none;
        margin-bottom: .75em;
        padding-left: 1.5em;
        line-height: 1.25;
    }
    ul.benefit li:before {
        content: '';
        display: inline-block;
        height: 1em;
        width: 1.5em;
        background-image: url('/swcorridor/img/check.png');
        background-size: contain;
        background-repeat: no-repeat;
        margin-left: -1.5em;
    }

.principle {
/*    text-align: center;*/
}
    .principle h3 {
        margin: 0 0 .5em;
        display: inline-block;
    }
    .principle img {
        display: inline-block;
        height: 1.75em;
        width: auto;
        margin: -.9em .25em 0 0;
    }


/***** FOOTER *****/
.partners {
    padding-top: 2em;
    padding-bottom: 1em;
}
    .partners img {
        height: 30px;
        margin: 0 10px;
		display: inline-block;
    }

.footer {
    background-color: #000;
	padding-top: .5em;
	padding-bottom: .25em;
}
    .footer p, .footer a {
        color: #666;
    }
    .footer a:hover {
        color: #fff;
    }

@media only screen and (min-width: 768px) { /* sm screens and up */
    .partners img {
        height: 60px;
    }
}




/****** STANDARD SHOW/HIDE (FAQ) *****/
.expand_content_container {
    height: 0;
    overflow: hidden;
    padding: 0;
}
    .expand {
    }
        .expand_header {
            display: inline-block;
            cursor: pointer;
            width: 100%;
        }
            .library .expand_header {
                padding-bottom: 1em;
            }
        .expand_content {
            padding: 0 0 1.5em 0;
            margin: 0;
        }
            @media only screen and (min-width: 768px) { /* sm screens and up */
                .expand_content {
                    margin-left: 38px;
                    margin-left: 0;
                }
            }

            .expand_content ul {
                margin-left: 16px;
                margin-left: 0;
            }
                .expand_content ul.links {
                    margin-left: 0;
                }
            
        .expand_header h3 {
            color: #333;
            padding: 0;
            margin-top: -5px;
            margin-top: 1em;
            display: inline-block;
        }
            .expand_header h4 {
                margin-top: 0;
            }
            .expand_header h3:hover, .expand_header h4:hover {
                color: #5e9f41;
            }
                .expand_header h3 span, .expand_header h4 span {	/* set positioning and show gray '+' icon  */
                    background: url("/swcorridor/img/expand.png") 0 -4px no-repeat;	
                    background-size: 16px 192px;
                    width: 26px;
                    height: 26px;
                    display: inline-block;
                    margin-left: 12px;
                }
                    .expand_header h4 span {
                        margin-top: -10px;
                    }
                    .expand_header h3:hover span, .expand_header h4:hover span {	/* show blue + icon on hover */
                        background-position: 0 -52px;
                    }
                .open .expand_header h3 span, .open .expand_header h4 span {	/* show gray 'X' icon */
                    background-position: 0 -100px;
                }
                    .open .expand_header h3:hover span, .open .expand_header h4:hover span {	/* show blue 'X' icon */
                        background-position: 0 -148px;
                    }

/* Begin global Details & Summary HTML styles */
: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::after {
    background-color: #000;
    content: '';
    mask: var(--svg-code);
    -webkit-mask: var(--svg-code);
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    height: 24px;
    width: 24px;
    min-width: 24px;
    border-radius: 50%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: 0.5s;
}

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

summary {
    justify-content: start;
    padding: 0 0 .75em;
}

summary::after {
    margin-left: 1em;
}

summary h3 {
    margin-bottom: 0;
    margin-top: 0;
}

summary h4 {
    margin: .5em 0;
}

summary:focus>h3,
summary:hover>h3,
summary:active>h3,
summary:focus>h4,
summary:hover>h4,
summary:active>h4 {
    color: #00833e;
}

details:focus summary::after,
details:hover summary::after,
details:active summary::after {
    background-color: #00833e;
    transition: 0.5s;
}

/* Equal height column fix:
https://medium.com/wdstack/bootstrap-equal-height-columns-d07bc934eb27#892f
*/
@media only screen and (min-width: 768px) {
    #events .detail-col-wrapper {
        display: flex;
        flex-wrap: wrap;
    }
    #events .detail-col-wrapper [class*='col-sm-6'] {
        display: flex;
        flex-direction: column;
    }
}
    


/****** ANCHOR MENU ******/	
ul.anchor {
    text-align: center;
    margin: 30px 0 2em;
    padding: 0;
    list-style: none;
    clear: both;
}
    ul.anchor.tight {
        margin: 0 0 1em;
    }
    ul.anchor li {
        display: inline-block;
        padding: 0;
    }
        ul.anchor li a {
            padding: 5px 20px;
            margin: 0 5px 10px;
            display: block;
            color: #333;
            border-radius: 5px;
            background-color: #f6f6f6;
            border: 1px solid #eee;
            font-weight: 400;
            line-height: 1.25;
            font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, "sans-serif";
        }
			ul.anchor li a:hover {
				background-color: #008344;
				border-color: #008344;
				text-decoration: none;
                color: #fff;
			}
        ul.anchor li b {
            font-weight: 600;
        }
            ul.anchor li a.action {
                color: #333;
                background-color: #ffc;
            }
ul.anchor.side {
	text-align: left;
	margin-top: 0;
}
	ul.anchor.side li {
		display: block;
	}
		ul.anchor.side li a {
			margin: 0 0 10px;
		}
.anchorspacer {
    height: 51px;
}
@media only screen and (min-width: 768px) { /* sm screens and up */
    ul.anchor {
        margin-bottom: 5em;
    }
    .anchor-header {
        margin-top: 0;
    }
}

/****** BOXES *****/
.box {
    background-color: #f0f0f0;
    padding: .125em 1em 1em;
    border-radius: 5px;
    margin: 0 0 1em;
    clear: both;
}
    .box a {
        border: none;
        text-decoration: underline;
        text-decoration-color: #bbd4ee;
    }
        .box a.button {
            text-decoration: none;
        }
		.box a:hover {
			text-decoration-color: #00833e;
		}
		.box ul.links a {
			background-color: #ddd;
            border: none;
		}
			.box ul.links a:hover {
				background-color: #00833e;
				color: #fff;
			}


.box.reverse {
    background-color: #9fbc2e;
	border-radius: 10px;
}
    .box.reverse p, .box.reverse h3 {
		color: #fff;
	}
/*
    .box.reverse a {
		color: #fff;
        text-decoration-color: #bcd06d;
	}
        .box.reverse a:hover {
            text-decoration-color: #fff;
        }
*/
    .box.reverse h4 {
		color: #fff;
		padding-top: 1em;
	}
	.box.reverse input {
		border: 1px solid #fff;
	}
	.box.reverse input.submit {
		text-decoration: none;
		background-color: #555;
		border-color: #555;
		color: #fff;
	}
		.box.reverse input.submit:hover {
			background-color: #008344;
			border-color: #008344;
		}

a.box.partner {
	background-color: #9fbc2e;
    display: block;
}
    a.box.partner h3, a.box.partner h4, a.box.partner p {
		color: #333;
	}
    a.box.partner {
		text-decoration: none;
		color: #fff;
	}
		a.box.partner:hover {
			background-color: #fff;
		}

    a.box.partner.cdr {
        padding-top: 1em;
        padding-bottom: 1em;
    }
        a.box.partner.cdr h3, a.box.partner.cdr h4, a.box.partner.cdr p {
            padding: 0;
            margin: 0;
        }
		a.box.partner.cdr:hover {
			background-color: #008344;
		}
		a.box.partner.cdr:hover h3, a.box.partner.cdr:hover p {
            color: #fff;
			background-color: #008344;
		}
    a.cdr-link {
        margin-bottom: 1em;
        display: block;
    }
.box.white {
    background-color: #fff;
}

.box.benefit {
	background-color: #9fbc2e;
	text-align: center;
	
}
	.box.benefit h3 {
		color: #fff;
		text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
	}


.surveycheck {
    width: 2em;
    height: 1.5em;
    background: url("/swcorridor/img/check-white.png") 0 -.125em no-repeat;
    background-size: 110% auto;
    float: right;

    display: none;
}



h2.spanish {
	position: relative;
}
	h2.spanish .spanishlink {
		position: absolute;
		top: -2em;
		right: 15px;
		text-transform: none;
		font-size: 50%;
	}




.planning, .design, .engineering, .construction {
	text-align: center;
}
	.planning p, .design p, .engineering p, .construction p {
		text-align: left;
	}
		.design p.hcenter {
			text-align: center;
		}

.years {
	color: #fff;
	text-align: center;
	display: block;
	padding: .25em 0;
}
	.planning .years {
		background-color: #9ebb3c;
	}
	.design .years{
		background-color: #9f2963;
	}
	.engineering .years {
		background-color: #303889;
	}
	.construction .years {
		background-color: #80a6bf;
	}

.title {
	background: url("/swcorridor/es/img/icon-planning.png") 0 -.125em no-repeat;
	background-size: 1.5em auto;
	padding-left: 1.75em;
	padding-right: .5em;
	text-align: center;
	display: inline-block;
	margin-top: .25em;
}
	.planning .title {
		color: #9ebb3c;
		background-image: url(/swcorridor/es/img/icon-planning.png);
	}
	.design .title {
		color: #9f2963;
		background-image: url(/swcorridor/es/img/icon-design.png);
	}
	.engineering .title {
		color: #303889;
		background-image: url(/swcorridor/es/img/icon-engineering.png);
	}
	.construction .title {
		color: #80a6bf;
		background-image: url(/swcorridor/es/img/icon-construction.png);
	}




/****** LAYOUT ******/
.padding {
    padding-top: 2em;
    padding-bottom: 2em;
}
@media only screen and (min-width: 768px) { /* sm screens and up */
    .padding {
        padding-top: 3em;
        padding-bottom: 3em;
    }
}
.img {
    display: block;
    height: auto;
    max-width: 100%;
}
.img-left, .img-right {
    display: block;
    max-width: 100%;    
    height: auto;
    margin: 0 0 15px 0;
}
.img.border {
    border: 1px solid #666;
    border-radius: 8px;
}

.caption {
    margin-bottom: 1em;
}
    .caption img {
        margin: 0;
        padding: 0;
    }
        .caption.img-right img, .caption.img-left img,
        .caption.icon-right img, .caption.icon-left img {
/*            margin-bottom: -8px;*/
        }
    .caption small {
        display: block;
        padding: 5px 10px;
        background-color: #404040;
        color: #fff;
        width: 100%;
        line-height: 1.25;
    }
    .caption a, .caption a:hover {
        color: #ccc;
        border: none;
    }
        .caption a:hover {
            color: #fff;
            text-decoration: underline;
        }




.hcenter {
    text-align: center;
}



.xs-only {
    display: none;
}
@media only screen and (max-width: 768px) { /* xs screen only */
    .xs-only {
        display: block;
    }
    .xs-hide {
        display: none;
    }
}



.col-ms-1, .col-ms-2, .col-ms-3, .col-ms-4, .col-ms-5, .col-ms-6, .col-ms-7, .col-ms-8, .col-ms-9, .col-ms-10, .col-ms-11, .col-ms-12 {
    position: relative;
    min-height: 1px;
    padding-left: 15px;
    padding-right: 15px; 
}
@media (min-width: 480px) and (max-width: 767px) {
.col-ms-1,
.col-ms-2,
.col-ms-3,
.col-ms-4,
.col-ms-5,
.col-ms-6,
.col-ms-7,
.col-ms-8,
.col-ms-9,
.col-ms-10,
.col-ms-11 {
float: left; }
 
.col-ms-1 {
width: 8.33333%; }
 
.col-ms-2 {
width: 16.66667%; }
     
.col-ms-3 {
width: 25%; }
 
.col-ms-4 {
width: 33.33333%; }
 
.col-ms-5 {
width: 41.66667%; }
 
.col-ms-6 {
width: 50%; }
 
.col-ms-7 {
width: 58.33333%; }
 
.col-ms-8 {
width: 66.66667%; }
 
.col-ms-9 {
width: 75%; }
 
.col-ms-10 {
width: 83.33333%; }
 
.col-ms-11 {
width: 91.66667%; }
 
.col-ms-12 {
width: 100%; }
 
.col-ms-push-1 {
left: 8.33333%; }
 
.col-ms-push-2 {
left: 16.66667%; }
 
.col-ms-push-3 {
left: 25%; }
 
.col-ms-push-4 {
left: 33.33333%; }
 
.col-ms-push-5 {
left: 41.66667%; }
 
.col-ms-push-6 {
left: 50%; }
 
.col-ms-push-7 {
left: 58.33333%; }
 
.col-ms-push-8 {
left: 66.66667%; }
 
.col-ms-push-9 {
left: 75%; }
 
.col-ms-push-10 {
left: 83.33333%; }
 
.col-ms-push-11 {
left: 91.66667%; }
 
.col-ms-pull-1 {
right: 8.33333%; }
 
.col-ms-pull-2 {
right: 16.66667%; }
 
.col-ms-pull-3 {
right: 25%; }
 
.col-ms-pull-4 {
right: 33.33333%; }
 
.col-ms-pull-5 {
right: 41.66667%; }
 
.col-ms-pull-6 {
right: 50%; }
 
.col-ms-pull-7 {
right: 58.33333%; }
 
.col-ms-pull-8 {
right: 66.66667%; }
 
.col-ms-pull-9 {
right: 75%; }
 
.col-ms-pull-10 {
right: 83.33333%; }
 
.col-ms-pull-11 {
right: 91.66667%; }
 
.col-ms-offset-0 {
margin-left: 0; } 

.col-ms-offset-1 {
margin-left: 8.33333%; }
 
.col-ms-offset-2 {
margin-left: 16.66667%; }
 
.col-ms-offset-3 {
margin-left: 25%; }
 
.col-ms-offset-4 {
margin-left: 33.33333%; }
 
.col-ms-offset-5 {
margin-left: 41.66667%; }
 
.col-ms-offset-6 {
margin-left: 50%; }
 
.col-ms-offset-7 {
margin-left: 58.33333%; }
 
.col-ms-offset-8 {
margin-left: 66.66667%; }
 
.col-ms-offset-9 {
margin-left: 75%; }
 
.col-ms-offset-10 {
margin-left: 83.33333%; }
 
.col-ms-offset-11 {
margin-left: 91.66667%; }
}