body {
	background-color: var(--pink);
	color: var(--dark);
}

.theme_blue,
.p_home {
	background-color: var(--blue);
	color: var(--dark);
}

.theme_dark {
	background-color: var(--dark);
	color: var(--pale);
}

.theme_green,
.p_what-we-do {
	background-color: var(--green);
}

.theme_orange,
.p_about {
	background-color: var(--orange);
}
.theme_yellow,
.p_awards-and-media{
	background-color: var(--yellow);
}


#app {
	transition: var(--transition);
	min-height: 100vh;
}

@media(min-width: 768px) {
	#app {
		padding-top: 0;
	}
}

.contented {
	display: flex;
	flex-direction: column;
	gap: var(--gap);
	font-size: var(--step-2);
}

.contains {
	width: 100%;
	max-width: 960px;
	margin: auto;
	container-type: inline-size;
}

.guttered {
	display: grid;
	grid-template-columns: var(--gap-small) 1fr var(--gap-small);
}


@media(min-width: 768px) {

	/* .gutter{
		min-width: calc(2 * var(--gap));
	 }

	.guttered {
		grid-template-columns: 1fr 4fr 1fr;
	} */

}

@container (min-width: 480px) {
	.galleries_grid {
		grid-template-columns: 1fr 1fr;

	}

}

@container (min-width: 640px) {
	.galleries_grid {
		grid-template-columns: 1fr 1fr 1fr;

	}
}

.padded_block {
	padding-block: calc(1 * var(--gap));
}


header {
	display: flex;
	flex-direction: column;

	position: relative;
}

.header_text{
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	gap: 1rem;
	min-height: 200px;
	padding-inline: 16px;
}

@media(min-width: 960px){
	.header_text{
		padding-inline: 248px;
	}
}

/* .site_title_link{

    height:180px;
} */

#rezlogo {
	width: 50vw;
	min-width: 270px;
	max-width: 480px;	
	height: auto;
	transition: var(--transition);
}

.twang_zone {
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 480px;
	aspect-ratio: 80 / 49;
	margin-inline: auto;
}

.rn_logo{
	border-radius: 8px;
	background: var(--primary, #96D4CC);
width:164px;
display:flex;
align-items:center;
justify-content:center;
margin-inline:auto;
display: flex;
width: 164px;
height: 88px;
padding: 11px 32px;
justify-content: center;
align-items: center;
}

.rn_logo #rezlogo {
	width: 100px;
	min-width: 100px;
	max-width: 100px;	
	height: auto;
	transition: var(--transition);
}

.stretch {
	animation: stretchify 1s ease-in-out 0.2s forwards;
	transition: var(--transition);
}

.twang {
	animation: boingify 700ms ease-out forwards;
	transition: var(--transition);
}


@keyframes stretchify {
	0% {
		transform: scale(1, 1);
	}

	100% {
		transform: scale(1.3, 0.7);
	}
}

@keyframes boingify {
	0% {
		transform: scale(1.3, 0.7)
	}

	30% {
		transform: scale(0.8, 1)
	}

	60% {
		transform: scale(1.1, 0.90)
	}

	80% {
		transform: scale(0.95, 0.95)
	}

	100% {
		transform: scale(1, 1)
	}
}


@media(min-width: 768px) {

	.millco_layout {
		display: flex;
		flex-direction: row;
		width: 100%;
		gap: 1rem;
	}

	/* old safari doesn't support flexbox gap */
	@supports (-webkit-min-device-pixel-ratio:0) and (not(translate: none)) {

		.millco_layout {
			display: grid;
			grid-template-columns: 16% 16% 66%;
			width: 100%;
			grid-gap: 1rem;
			gap: 1rem;
		}

	}

	.millco_col_1 {
		flex: 1;
	}

	.millco_col_2 {
		display: block;
		flex: 4;
	}

	.millco_col_3 {
		flex: 1;
	}


}


.nav-container {
	position: fixed;
	top: -3000px;
	width: 100vw;
	max-height: 100vh;
	min-height: 100vh;
	background-color: var(--grey-very-light);
	transition: var(--transition);
	display: flex;
	flex-direction: column;
	z-index: 2;
}

.toggled .nav-container {
	top: 0;
	transition: var(--transition);
}

.sticky_top {
	position: sticky;
	top: 0;
}


main {
	flex: 5;
}

aside {
	flex: 3;
	padding: 1rem 1rem 1rem 0;
}

.panel {
	background-color: var(--dark);
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.panel_white {
	background-color: white;
	color: var(--dark);
}

.menu-panel {
	position: fixed;
	top: 1rem;
	right: 0;
	min-width: 140px;
	background-color: var(--theme);
	display: flex;
	align-items: center;
	z-index: 99;
	padding: 0 2rem 0 1rem;
}

.hambutt-container {
	min-width: 158px;
	padding-left: 1rem;
}

.search-container {
	display: inline-flex;
	justify-content: center;
}

.logo-container {
	width: 60px;
	height: auto;
	position: absolute;
	top: 10px;
	left: 10px;
}


@media(min-width: 768px) {

	.logo-container {
		margin-top: -10px;
		position: relative;
		/* fallback for Old Safari */
		position: sticky;
		top: -10px;
		width: auto;
	}
}


footer {
	background: var(--dark);
	color: white;
	text-align: center;
}


.footer_supporters_container {
	background-color: var(--slime);
	background: linear-gradient(90deg, rgba(242, 66, 7, 1) 0%, rgba(255, 210, 23, 1) 35%, rgba(187, 245, 15, 1) 65%, rgba(0, 119, 117, 1) 100%);
	position: relative;
	display: block
}

.footer_supporters {
	position: relative;
	display: flex;
	gap: 0.5rem;
	flex-wrap: wrap;
	justify-content: center;
	padding: 1rem;
}


.supporters {
	display: flex;
}

.supporter {
	display: flex;
	margin-right: 1.5rem;
	z-index: 1;
	max-height: 80px;
	align-items: center;
}

.supporter img {
	min-height: 50px;
	height: 100%;
	width: auto;

}

.footer_nav {
	padding: 1rem 0.5rem;
	font-size: 0.875rem;
	font-weight: var(--strong)
}

.credits {
	font-size: 0.75rem;
}