/* =============================================
   RESPONSIVE — index.html only
   ============================================= */


/* --- 1220px: Scale down header type --- */
@media (max-width: 1220px) {

	.header_logo {
		margin-top: 28px;
	}

	.home_tagline {
		margin-top: 22px;
	}


}


/* --- 870px: Further header scaling --- */
@media (max-width: 870px) {

	.header_logo {
		margin-top: 14px;
	}

	.home_tagline {
		margin-top: 5px;
	}

}


/* --- 680px: Stack header, flip case study to column --- */
@media (max-width: 680px) {

	/* Slide-down navbar: hide name, center links */
	#navbar .navbar_left {
		display: none;
	}

	#navbar .navbar_inner {
		justify-content: center;
	}

	/* Header: switch grid to flex column so we can reorder */
	.grid_header {
		display: flex;
		flex-direction: column;
		padding-bottom: 20px;
	}

	.header_logo {
		order: 1;
		margin-top: 20px;
		text-align: center;
	}

	.header_tagline {
		order: 2;
		max-width: 100%;
		text-align: center;
	}

	.header_nav {
		order: 3;
		justify-content: center;
		gap: 24px;
		margin-top: 20px;
		margin-bottom: 0;
	}

	/* Case study: image on top, info below */
	.case_study {
		flex-direction: column;
		margin-bottom: 50px;
	}

.project_image {
		order: -1;
		width: 100%;
	}

	.project_info {
		width: 100%;
		padding-right: 0;
		padding-top: 24px;
	}

	.project_text {
		display: grid;
		grid-template-columns: 4fr 8fr;
		grid-template-rows: auto auto;
		gap: 0 20px;
		height: auto;
		align-items: start;
	}

	.project_text .logo,
	.project_text .logo2 {
		grid-column: 1;
		grid-row: 1 / 3;
		margin-bottom: 0;
	}

	.project_text_body {
		grid-column: 2;
		grid-row: 1;
		flex: none;
		justify-content: flex-start;
	}

	.button_group {
		grid-column: 2;
		grid-row: 2;
		align-self: start;
		justify-self: start;
		margin-top: 16px;
	}

	.button_group .pill-button,
	.project_text > .pill-button {
		width: auto;
		padding-left: 15px;
		padding-right: 15px;
	}

	.project_text > .pill-button {
		grid-column: 2;
		grid-row: 2;
		justify-self: start;
		align-self: start;
		margin-top: 16px;
	}

}


/* --- 540px: Small phones --- */
@media (max-width: 540px) {


	.home_tagline {
		margin-top: 5px;
	}


}


/* --- 400px: Very small phones --- */
@media (max-width: 400px) {

}


/* =============================================
   FOOTER padding adjustments
   ============================================= */

@media (max-width: 1780px) {
	.footer_wrapper:after { padding-bottom: 16%; }
}

@media (max-width: 1000px) {
	.footer_wrapper:after { padding-bottom: 28%; }
}

@media (max-width: 840px) {
	.footer_wrapper:after { padding-bottom: 36%; }
}

@media (max-width: 660px) {
	.footer_wrapper:after { padding-bottom: 45%; }
}

@media (max-width: 440px) {
	.footer_wrapper:after { padding-bottom: 48%; }
}