@media only screen and ( max-width: 1550px ) {
	.js-tabs-nav button {
		width: calc(49.5% - 2px);
		margin: 0 4px 4px 0;
	}

	.js-tabs-nav button:nth-chid(even) {
		margin: 0 0 4px 4px;
	}

	.js-tabs-nav button.isActive:after {
		display: none;
	}
}



@media only screen and ( max-width: 1024px ) {
	
	.site { min-width: 100%; }
	.content-area,
	.container { width: 1000px; padding-left: 18px; padding-right: 18px; }
	.grid.content-area,
	.grid.container { width: 980px; }

	.site-header { height: 75px; border-bottom: #b9b9b9 1px solid; }
	.site-header .tagline { display: none; }

	.site-main { width: 680px; }
	.site-main--wide { width: 100%; }

	.logo { top: 22px; left: 20px; }
	.link-join a.button { top: 18px; right: 80px; -webkit-transition: none; -moz-transition: none; transition: none; }

	.switch-nav-main,
	.switch-nav-main:hover { display: block; position: absolute; top: 11px; right: 12px; width: 50px; height: 50px; -webkit-box-shadow: none !important; -moz-box-shadow: none !important; box-shadow: none !important; text-indent: -9999px; border: 0; outline: none; -webkit-appearance: none; -webkit-border-radius: 0; -moz-border-radius: 0; border-radius: 0;
		/* NOTE: multiple backgrounds used to preload switch-nav-main-active.png */
		background: url('../images/switch-nav-main.png') center center no-repeat,
					url('../images/switch-nav-main.png') -999px -999px no-repeat;
		background-size: 35px auto;
	}
	.navigation-active .switch-nav-main { opacity: 0.5; }

	.navigation { display: none; right: 0; width: 60%; height: auto; bottom: auto; top: 74px;
		-webkit-box-shadow: 0 3px 4px rgba(0,0,0,.4);
		-moz-box-shadow: 0 3px 4px rgba(0,0,0,.4);
		box-shadow: 0 3px 4px rgba(0,0,0,.4);
		background: #FFF;
		background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(243,244,246,1) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(100%,rgba(243,244,246,1)));
		background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,244,246,1) 100%);
		background: -o-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,244,246,1) 100%);
		background: -ms-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(243,244,246,1) 100%);
		background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(243,244,246,1) 100%);

	}

	.navigation-active .navigation { display: block; }
	.navigation .container { width: 100%; padding: 120px 35px; overflow: hidden }

	.nav-main { overflow: hidden; /* clearfix, now that the dropdowns aren't dropdowns */ }
	.nav-main .menu > li:before { display: none; }
	.nav-main .menu > li { float: none; clear: both; }
	.nav-main .menu > li > a,
	.nav-main .menu > li > a:hover { width: auto; display: inline-block; height: auto; clear: both; font-size: 18px; color: #47428d; font-weight: 600; margin: 0; padding: 0; border: 0; line-height: 2; }
	.nav-main .menu > li > a:after { display: none; }

	.nav-main .menu > li:hover > .dropdown,
	.nav-main div.dropdown { position: relative; clear: both; width: 100%; background: transparent; padding: 0; left: auto; top: auto; opacity: 1; }

	.nav-main li div.dropdown { margin: 10px; }
	.nav-main li div.dropdown a,
	.nav-main li div.dropdown a:hover,
	.nav-main li div.dropdown ul > li > ul a:before { color: #617581; height: auto; white-space: normal; line-height: 1.2; padding-top: 6px; padding-bottom: 6px; }
	.nav-main li div.dropdown a:after { content: '\00A0\00BB'; }

	.nav-main li .dropdown .current_page_item > a { color: #617581; font-weight: bold; }

	.nav-main li .dropdown li:after { height: 1px; background: #dbdbdb; }
	.nav-main .dropdown.dropdown-multi > ul { border: 0; }

	.nav-secondary { left: 0; right: 0; top: 0; bottom: auto; }
	.nav-secondary li a { clear: both; font-size: 16px; width: 100%; height: 50px; line-height: 52px; padding: 0 0 0 75px; margin: 0; -webkit-box-shadow: 0 0 2px rgba(0,0,0,.5); -moz-box-shadow: 0 0 2px rgba(0,0,0,.5); box-shadow: 0 0 2px rgba(0,0,0,.5); }
	.nav-secondary a:before { top: 11px; left: 29px; }

	#search { display: inline; top: auto; right: auto; bottom: 65px; left: 35px; width: 100%; height: 50px; max-width: 385px; }
	#search input[name="s"] { font-size: 16px; }
	.nav-social { top: auto; right: auto; bottom: 25px; left: 35px; }

	/*
	.banner > div { height: 400px; padding: 0; }
	.banner h1 { padding-top: 0; line-height: 1; font-size: 50px; }
	.banner h2 { font-size: 36px; }
	*/
	.banner > div { padding: 0; }
	.banner nav { height: 90px; }
	.banner li { font-size: 18px; width: 135px; height: 90px; line-height: 90px; }
	.banner nav li { text-indent: 0; text-align: center; line-height: 125px; }
	.banner nav li:before { height: 40px; top: 10px; left: 50%; margin-left: -15px; }


	.entry-header h1 { padding: 25px 0; line-height: 1.1; }


	.members-scroll { width: 830px; margin-left: auto; margin-right: auto; }

	.site-footer { min-height: 140px; }
	.site-footer-info { position: absolute; left: 20px; top: 45px; }

	.nav-footer { float: left; }
	.nav-footer a { padding-left: 8px; padding-right: 6px; }
	.nav-footer li:first-child a { padding-left: 0; }
}

@media only screen and ( max-width: 1023px ) {

	.site { min-width: 100%; }
	.content-area,
	.container { width: 750px; padding-left: 35px; padding-right: 35px; }
	.grid.content-area,
	.grid.container { width: 750px; }

	.site-content { padding-bottom: 20px; }

	.site-main,
	.sidebar { width: 100%; }

	h4 { font-size: 15px; }

	

	.container-services .column { width: 100%; margin: 0; clear: both; }
	.container-services .service-articles-graph img { width: 100%; }
	.container-services div[class*="service-"] p { padding: 0; background: none; min-height: 0; width: auto; }
	.container-services div[class*="service-"] p:before { display: none; }

	.container-features li.column { width: 50%; margin-left: 0; padding-right: 25px; }
	.container-features li.column:nth-child(3n + 1) { float: left; clear: none; }
	.container-features li.column:nth-child(2n + 1) { clear: both; }

	.members-scroll {
	    padding: 0 25px;
	    width: 670px; /* (155 * 4) + padding */
    }

	/*.funders-logos li { display: block; text-align: center; margin: 30px auto; }
*/
	.funders-logos li { margin: 0; }
	.funders-logos li img {
		    margin: 6px;
    height: 28px;
	}

	/*.funders-logos li img {
		margin-top: 0;
	}
*/
	
	.entry-content .callout { font-size: 36px; }
	.profile-bio { max-width: 480px; }

	/* .entry-meta span { border: 0; padding: 0; display: block; line-height: 18px; } */
	.entry-share ul { margin-bottom: 30px; }

	.form-contact,
	.form-join,
	.form-aside { width: 100%; max-width: 100%; min-width: 0; }

	.sideblock.updates form { width: 100%; }
	.sideblock.updates input[type="text"] { max-width: 100%; width: 50%; }
	.sideblock.categories a { padding: 10px 0; /* make them a little more 'tappable' */ }

	.plans-csv-download { text-align: left; margin-bottom: 2em; }	
	.plans-mobile-sort { display: block; margin: 1em 0; }
	.plans-mobile-sort label { font-size: 0.9em; font-weight: 700; display: inline-block; margin-right: 10px; }
	.plans-mobile-sort select { width: 260px; font-size: 1rem; }

	.plans { margin-bottom: 2.5em; border: 0; }
	.plans th { display: none; }
	.plans tr { display: block; background-color: transparent !important; padding-bottom: 1.75em; border-bottom: #e1e5e6 1px solid; }
	.plans td { display: block; width: 100%; padding: 0; border: 0; }
	.plans td:first-child { padding-left: 0; }
	
	.plan__mobile-label { font-weight: bold; display: inline-block; margin-right: 4px; margin-bottom: 3px; }
	.plan__header { margin: 1.75em 0 0.75em 0; }
	.plan__title { font-size: 1.15em; }
	.plan__date-wrap { max-width: 100%; }
	.plan__repository-note { display: inline; }
	.plan__participant .fa { text-indent: 2px; }

	
	.site-footer-info { left: 32px; }
}

@media only screen and ( max-width: 750px ) {

	body { font-size: 14px; }

	.container,
	.content-area,
	.grid.content-area,
	.grid.container { width: 550px; }
	.grid .column { width: 100%; margin: 0; clear: both; }

	.site-header { height: 58px; }
	.logo { width: 115px; height: 20px; top: 20px; left: 30px; }
	.logo a { background-size: contain; }

	.link-join a.button { display:none; position: relative; right: auto; top: auto; margin: 10px 0; }

	#link-join-responsive {
		display: inline-block;
		background-color: #7e78b8;
		color: #fff;
	}
	#link-join-responsive a,
	#link-join-responsive a:hover {
		display: inline-block;
		position: absolute;
		background-color: #7e78b8;
		color: #fff;
		height: 37px;
		line-height: 37px;
		border: 0;
		right: 20px;
		top: 24px;
	}
	/* NOTE:
	because the "rubberband" plugin in init.js handles changes to the dom on different breakpoints,
	there could be flash of the purple JOIN CHORUS button and / or Twitter icon in the header (before init.js has inited).
	This prevents that.
	*/
	.site-header .link-join,
	.site-header .nav-social { visibility: hidden; }
	.navigation .link-join,
	.navigation .nav-social { visibility: visible; }

	.switch-nav-main,
	.switch-nav-main:hover { width: 58px; height: 58px; top: 0; right: 0; background-size: 25px auto; }
	.navigation-active .switch-nav-main { opacity: 1; background-color: #6e69af; background-image: url('../images/switch-nav-main-active.png'); }

	.navigation { top: 57px; width: 70%; }
	.navigation .container { padding-left: 30px; padding-right: 30px; }
	.nav-main .dropdown ul { clear: both; width: 100%; margin: 0; }
	.nav-main .dropdown.dropdown-multi > ul { padding-left: 0; }

	.banner > div { display: block; width: 100%; height: auto; min-height: 250px; }
	.banner > div > div { width: 100%; height: 250px; padding: 40px 20px; }
	.banner h1, .banner h2 { width: 100%; }
	.banner h1 { font-size: 26px; margin-bottom: 5px; padding: 0; }
	.banner h2 { font-size: 20px; margin-bottom: 20px }
	.banner h2:after { display: none; /* hiding this because it throws off line heights, which isn't noticeable when only 2 lines */ }

	.banner nav { height: auto; padding-left: 35px; padding-right: 35px; }
	.banner nav ul { max-width: 480px; margin: 0 auto; }
	.banner nav li { width: 100%; height: auto; clear: both; border: 0; border-bottom: #647c87 1px solid; }
	.banner nav li:last-child { border: 0; }
	.banner nav li:before { height: 100%; top: 0; left: 10px; margin: 0; }
	.banner nav li:after { display: none; }

	.banner nav a { height: 45px; line-height: 45px; text-align: left; padding-left: 50px; }
	.banner nav a:after { content: '\00A0\00A0\00BB'; }

	.js-tabs-nav button {
		width: 100%;
		margin: 0 0 4px 0;
	}

	.js-tabs-nav button:nth-chid(even) {
		margin: 0 0 4px 0;
	}

	.container-services .column { margin-bottom: 8px; }
	.container-features li.column { width: 100%; padding: 0; margin-bottom: 15px; }

	.members-meta span { display: none; }
	.members-meta a { font-size: 14px; color: #637783; }
	.members-scroll { display: none; }

	.entry-header h1 { font-size: 32px; }
	.entry-content .callout { font-size: 26px; }

	.entry-share ul { display: block; margin-top: 25px; }
	.entry-share li { display: block; margin: 15px 5px; }
	.entry-share li a { padding-left: 35px !important; }

	.profile { padding-bottom: 40px; }
	.profile-bio { overflow: hidden; float: none; }
	.profile-no-headshot .profile-bio { padding-left: 0; }

	.team-anchors { margin-top: -14px; margin-bottom: 0px; }

	.plans-mobile-sort select { display: block; max-width: 100%; width: 100%; margin-top: 10px; }

	/* Content Infographic ------------------------------------------------ */
	.content-infographic {
		max-width: 100%;
	}
	.content-infographic.alignright {
		float: none;
	}

	.home--section_row-top,
	.home--section_row-bottom {
		padding: 10px 0;
	}
}

@media only screen and ( max-width: 550px ) {

	.container,
	.content-area,
	.grid.content-area,
	.grid.container { width: 100%; }

	.container,
	.banner nav,
	.content-area { padding-left: 25px; padding-right: 25px; }
	.content-area { padding-top: 25px; }

	/* loooong call to action buttons run the risk of being wider than the content area */
	.content-area .call-to-action-button a,
	.content-area .button { white-space: normal; line-height: 1.45; height: auto; padding-top: 10px; padding-bottom: 10px; text-align: left; margin: 5px 0px; }

	.logo { left: 18px; top: 18px; }
	.navigation { width: 305px; }
	.nav-secondary li a { font-size: 13px; }

	.banner { margin-bottom: 15px; }
	.banner > div { padding-left: 20px; padding-right: 20px; }
	/* [ JOIN THE CHORUS COMMUNITY ] gets a little tight at 320px */
	.banner .cta.button { padding: 0 27px 0 10px; }
	.banner .cta.button:after { right: 12px; }

	.service-stats td,
	.service-stats th { padding: 20px 12px; }
	.service-stats-label { font-size: 14px; }

	.entry-header h1 { font-size: 26px; padding: 20px 0; }
	.entry-meta .posted-in { border: 0; display: block; padding: 5px 0 0 0; }
	.sideblock.updates input[type="text"] { width: 80%; }
	.sideblock.updates h4 span { padding-right: 0; }

	.profile-headshot { margin-bottom: 15px; }
	.profile-bio { width: 100%; text-align: left; }

	.events-timeline > div { padding: 20px; }
	.events-timeline .event-title { font-size: 16px; }
	.events-timeline .event-meta { font-size: 11px; }
	.events-timeline .isChorus .event-title:before { display: none; }

	.site-footer { min-height: 180px; }
	.nav-footer ul { text-align: center; }
	.nav-footer li { display: inline-block; border: 0; }
	.site-footer-info { top: 65px; padding-right: 30px; padding-left: 45px; left: 20px; }
}