/*!
Theme Name: Bates Framework - Home
Template: b/bates-framework
Theme URI: https://bates.edu/
Description: Uses the Bates Framework parent theme.
Version: 4.1.0
Author: Bates College
Author URI: https://www.bates.edu
*/

@keyframes rotate {
  0%    { transform: rotate(0deg); }
  100%  { transform: rotate(360deg); }
}

@keyframes colorize {
	0% {
	}
	100% {
		filter: grayscale(0%) brightness(100%)
	}
}


@keyframes animateInTopCta {
	0% {
	}
	20% {
	}
	40% {
	}
	60% {
		transform: translateX(0);
	}
	70% {
		opacity: 1;
	}
	80% {
	}
	100% {
		opacity: 1;
		transform: translateX(0);
	}
}

.loading {
	position: relative;
	transition: 1s height;
	min-height: 50px;

	&:after {
		content: '';
		display: block;
		position: absolute;
		z-index: 101;
		border-radius: 50%;
		animation: rotate .8s infinite linear;

		border: 5px solid hsl(0,0%,60%);
		border-right-color: transparent !important;

		padding: 12px;
		left: calc( 50% - 12px );
		top: 30%;

		transition: .3s;
	}
}


body.home {

.body-area.wrapper {
	max-width: none;
	width: auto;
	margin: 0;
	background: hsl( 0, 0%, 13% );
}

.body-area a {
	color: hsl(350, 78%, 30%);
	text-decoration: none;
}

.js-template {
	display: none;
}

svg.double-arrow {
	height: .8em;
	width: 1.3em;
	position: relative;
	top: .08em;
	padding-left: .5em;
	opacity: .4;
	transition: .2s opacity, .2s fill;

	path {
		fill: currentColor;
		vertical-align: baseline;
	}
}
a:hover svg.double-arrow {
	opacity: 1;
}

.cta-button {
	background-color: white;
	color: hsl(350, 78%, 30%);
	border-radius: 4px;
	padding: .7em .7em .7em .9em;
	display: inline-block;
	text-decoration: none;

	font-size: 1.1em;
}

/* Switched to left position transitionsinstead of translate to prevent flickering in some browsers */
a.cta-button {
	border-bottom: none;
	position: relative;
	/*  transition: .2s transform; */
	transition: .2s left;
	left: 0;

	&:hover {
		/*  transform: translateX(3px); */
		left: 4px;
		border-bottom: none;
	}
}



a.editlink {
	display: block;
	margin: 1em;
	color: hsl(196, 78%, 85%);
	text-decoration: underline;
	border-bottom: none;
	&:hover {
		border-bottom: none;
		text-decoration: none;
	}
}

.main-message {
	z-index: 85;
	/*  padding-bottom in this case pushes the first cta section down and makes */
	/*  the header background image larger with more horizontal cropping. */
	padding: 2em 2em 10em;
	position: relative;
	text-align: left;
	font-size: 1.2rem;
	color: #fff;

	background-color: hsl(0,0%,15%);

	& * {
		position: relative;
		box-sizing: border-box;
		z-index: 50;
	}

	.site-title {
		text-shadow: 0 0 .2em hsla(0,0%,0%,.6);
		font-size: 2em;

		@media(min-width:550px) {
			font-size: 2.5em;
		}

		@media(min-width:1600px) {
			font-size: 3em;
		}

		max-width: 80%;
		transition:
			1s transform ease-in-out,
			1s opacity
		;
		opacity: 0;
		transform: perspective(100px) translate3d(20px,0,10px);

		&.js-active {
			opacity: 1;
			transform: perspective(100px) translate3d(0,0,0)
		}

		& a {
			color: inherit;
			text-decoration: none;
			border-bottom: none;
			transition: transform .2s;
			transform: translateX(0);
			display: inline-block;

			&:hover {
				transform: translateX(3px);
			}
		}

	}

	.site-description {
		text-shadow: 0 0 .2em hsla(0,0%,0%,1);
		margin: 1em 0 1.5em;
	}

	& a.cta-button {
		margin-top: 1em;

		opacity: 0;
		transform: translateX(-15px);

		/*  need this as a baseline so the transition to 3px is smooth */
		left: 0;

		&.js-active {
			animation: animateInTopCta 2s .8s forwards;
			transition: .3s left;
		}

		&:hover {
			left: 3px;
		}
	}

	@media(min-width: 800px) {
		box-sizing: border-box;
		height: 89vh;
		padding-left: 10vw;
	}

	@media(min-width:1600px){
		.cta-button {
			font-size: 1.2em;
			font-weight: 200;
		}
	}
}



/* Turn this on to hide the global nav until the initial animation is done.
 * /
#globalNav {
	transition: 1s height;
}
#globalNav:not(.js-active) {
	height: 0;
	overflow: hidden;
}
*/

.main-message-img {
	background-size: auto 100%;
	background-repeat: no-repeat;
	background-position: center center;
	position: absolute;
	top:0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 0;
	opacity: 0;
	box-shadow: 0  300px 200px -60px hsla(0, 0%, 0%, .3) inset;
	filter: grayscale(100%) brightness(43%);

	transition: 1.5s opacity;

	@media(min-width: 800px) {
		background-size: cover;
	}

	&.js-active {
		opacity: 1;
		box-shadow: 0  300px 200px -60px hsla(0, 0%, 0%, .3) inset;
	}
	&.js-colorize {
		/* animation: colorize 2s forwards; */
		animation-name: colorize;
		animation-duration: 2s;
		animation-fill-mode: forwards;
	}
}


/**
 * The angled CTA section
 */
.cta-wrap {
	position: relative;
	z-index: 90;

	* {
		position: relative;
		z-index: 50;
	}

	@media(min-width: 800px) {
		height: 500px;
	}
}

	.cta-wrap + :is(section,div,aside) {
		@media (min-width: 800px) {
			/* this removes the gray box above (under the cta-wrap ) */
			margin-top: calc(-4.7vw);
			z-index: 92;
			position: relative;
		}
	}

body.ie .cta-wrap {
	@media(min-width:800px) {
		padding-bottom: 3em;
	}
}


.cta-content, .cta-backgrounds {

	overflow: visible;
	height: 100%;

	@media(min-width: 800px) {
		display: flex;
		flex-wrap: nowrap;
		height: 100%;
	}
}


.cta-section {
	height: 500px;
	box-sizing: border-box;
	padding: 3em 1.5em 0;
	transition: 1.2s transform ease-out;

	@media(min-width: 800px) {
		width: 25%;
		padding: 1em 2em;
		box-sizing: border-box;
		height: auto;
	}
}

@media(max-width: 799px) {
	.cta1 { transform-origin:  100% 0  }
	.cta2 { transform-origin: -100% 0  }
	.cta3 { transform-origin:  300% 0  }
	.cta4 { transform-origin: -300% 0  }

	.cta2, .cta4 {
		transform: skewY(-5deg);

	}
	.cta1, .cta3 {
		transform: skewY(5deg);

	}
}

.cta-backgrounds {

	position: absolute;
	top: 0;
	left: 0;
	width: 100%;

	.cta-section {

		background-size: cover;
		background-repeat: no-repeat;
		background-position: center center;

		/* the colored overlays */
		&:after {
			position: absolute;
			top: 0;
			left: 0;
			z-index: 0;
			content: '';
			display: block;
			height: 100%;
			width: 100%;
			opacity: 1;

			transition: 1.5s opacity;
		}

		&.js-active:after {
			opacity: .8;
		}

	}

	/*  default backgrounds */
	.cta1 { background-image: url("im/lane.jpg"); }
	.cta2 { background-image: url("im/science-guys.jpg"); }
	.cta3 { background-image: url("im/aesop-night-fire.jpg"); }
	.cta4 { background-image: url("im/column-students.jpg"); }

	.cta1:after {
		background-color: var(--colorBlue_dark);
	}
	.cta2:after {
		background-color: var(--colorGreen_bright);
	}
	.cta3:after {
		background-color: var(--colorBlue_bright);
	}
	.cta4:after {
		background-color: var(--colorGarnet_dark2);
	}

	--angle: 12deg;
	--angle-third: calc( var(--angle) / 3 );

	@media(min-width: 800px) {

		.cta1 { transform-origin: 300% 0 }
		.cta2 { transform-origin: 200% 0 }
		.cta3 { transform-origin: 100% 0 }
		.cta4 { transform-origin: 0    0 }

		.cta1.skewed,.cta2.skewed,.cta3.skewed {
			transform: skewY( calc( var(--angle-third) ) );

			* {
				transform: skewY( calc( -1 * var(--angle-third) ) );
			}
		}
		.cta4.skewed {
			transform: skewY( calc( -1 * var(--angle) ) );

			* {
				transform: skewY( calc( var(--angle) ) );
			}
		}
	}

	@media(min-width: 800px){

		height: 100%;
		/*  visually hide thin strips where section don't perfectly meet */
		background: hsl(0,0%,35%);

		/*  the colored bar which hides the angled bottoms of the cta sections */
		&:after {
			display: block;
			content: '';
			background: hsl( 0, 0%, 13% );
			position: absolute;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 5vw;
			z-index: 95;
		}
	}
}

.cta-content {

	/*  outline: 2px solid green; */
	font-size: 1.3rem;

	.cta-section {
		text-align: center;
		color: #fff;
		container: ctasection / size;
	}

	.cta-section-icon {
		display: block;
		margin: 0 auto 1em;
		max-width: 75px;
	}

	h2 {
		text-transform: uppercase;
		font-size: 1em;
		font-family: var(--fontSansSerif);
		font-weight: 600;
		margin-bottom: 0;
	}
	p {
		border-top: 1px solid hsla(0,0%,100%,.5);
		margin-top: 1em;
		margin-bottom: 2em;
		padding-top: 1em;
		font-size: .9em;
		font-weight: 200;
		line-height: 1.4em;
		text-align: left;
	}


	.cta1 a.cta-button { color: var(--colorBlue_dark); }
	.cta2 a.cta-button { color: var(--colorGreen); }
	.cta3 a.cta-button { color: var(--colorBlue); }
	.cta4 a.cta-button { color: var(--colorGarnet_dark2); }

	a.cta-button:hover {
		color: hsl(0,80%,10%);
	}

	@media(max-width: 799px) {

		p {
			height: auto;
		}

		.cta2, .cta4 {
			transform: skewY(-5deg);

			.cta-content-inner {
				position: relative;
				z-index: 50;
				transform: skewY(5deg);
			}
		}
		.cta1, .cta3 {
			transform: skewY(5deg);

			.cta-content-inner {
				position: relative;
				z-index: 50;
				transform: skewY(-5deg);
			}
		}
	}

}

@media(min-width: 800px) {

	.cta-content {
		font-size: 1.1rem;
	}

	.cta-section.animater .cta-content-inner {
		opacity: 0;
		transform: translateY(20px);
		transition: .3s;
		display: grid;
		grid-template-rows: 75px 12cqh 40cqh auto;
	}

	@container ctasection (min-width: 225px) {
		.cta-content-inner {
			grid-template-rows: 75px 12cqh 35cqh auto;
		}
		}
		@container ctasection (min-width: 380px) {
		.cta-content-inner {
			grid-template-rows: 75px 10cqh 32cqh auto;
		}
	}

	.cta-section.animater.js-active .cta-content-inner {
		opacity: 1;
		transform: translateY(0);
	}
}

@media(min-width:1200px){
	.cta-content {
		font-size: 1.2rem;
	}
}

.cta-content p {
	@media(min-width:800px) {
		height: 10.5em;
	}
	@media(min-width:950px) {
		height: 9em;
	}
	@media(min-width:1024px) {
		height: 8em;
	}
	@media(min-width:1300px) {
		height: 7em;
	}
	@media(min-width:1400px) {
		height: 6.5em;
	}
}

/**
 * Key Messages
 */
.key-message-wrap {
	@media(min-width: 550px) {
		display: flex;
	}
}

.key-message {

	margin: .5em;
	padding: 3em;
	position: relative;
	box-sizing: border-box;
	background: hsl( 0, 0%, 13% );
	text-align: center;

	h1 {
		color: hsl(0,0%,100%);
		font-weight: 900;
		font-family: var(--fontSansSerif);
		margin-top: 0;
		font-size: 2.4em;
		padding: 0 .5em .5em;
		display: inline-block;
		border-bottom: 2px solid hsl(0,0%,25%);
	}

	p {
		color: hsl(0,0%,78%);
		padding: .9em 0;
		font-size: 1.2em;
	}

	.cta-button {
		color: #fff;
		background: hsl(350, 78%, 30%);
		/*  background: hsl(47, 7%, 37%); */

		&:hover {
			color: #fff;
		}
	}

	@media(min-width: 550px) {
		width: 50%;
		margin: 0 .5em 1em 1em;
	}
}

.ie10 .key-message {

	@media(min-width:550px){
		width: 48%;
	}
}

@media(min-width:800px){
	.key-message.animater {
		transition: .9s;
	}
	.key-message.animater:nth-child(1) {

		z-index: 51;

		transform: translateX(-100vw);
	}

	.key-message.animater:nth-child(2) {

		z-index: 50;

		transform: translateX( -150vw );

		/*  position: fixed; */
	}
	.key-message.animater.js-active + .key-message:not(.js-active) {
		transform: translateX( -50vw );
	}
	.key-message.animater.js-active {
		transform: translateX(0);
		/*  position: relative; */
	}
}

@media(min-width:550px){
	.key-message + .key-message {
		margin: 0 1em 1em .5em;
	}
}

.news-wrap {
	background: hsl(0, 0%, 93%);
}
.news-side-margin {
	margin-left: 2rem;
	margin-right: 2rem;
}
.news-featured-story {
	background-size: cover;
	background-position: top left;
	background-color: black;
	height: 66vw;
	box-shadow: 0 -50vw 50vw hsla(0,0%,0%,.6) inset;
	max-height: 660px;
	position: relative;

	&.animater {
		opacity: .3;
		transition: 1s;
		height: 300px;

		&.js-active {
			opacity: 1;
			height: 66vw;
		}
	}

	@media(min-width:800px) {
		box-shadow: 0 -25vw 20vw hsla(0,0%,0%,.6) inset;
	}
}
a.news-featured-text {
	display: block;
	border: none;
	&:hover {
		border: none;
	}

}
.news-featured-text {
	position: absolute;
	bottom: 0;
	/*  width: 100%; */
	left: 0;
	padding: 2em 0;
	text-shadow: 0 0 8px hsla(0,0%,0%,.4);

	p {
		font-weight: 200;
	}

	.date {
		color: hsl(49, 90%, 76%);
		text-shadow: 0 0 .2em hsla(0,0%,0%,1);
	}

	h1 {
		font-family: var(--fontSerif);
		margin: .5em 0;
		text-shadow: 0 0 .2em hsla(0,0%,0%,.6);
		color: #fff;
		border: none;
		font-size: 2em;

		@media(min-width:500px){
			font-size: 2.5em;
		}
	}
	&:hover h1 {
		color: #fff;
		border: none;
		text-decoration: underline;
	}

	.excerpt {
		display: none;
	}

	&.animater {
		transition: .7s;
		transform: translateX(-25px);
		opacity: 0;

		&.js-active {
			transform: translateX(0);
			opacity: 1;
		}
	}

	@media(min-width:550px){

		.excerpt {
			display: block;
			color: hsl(0,0%,83%);
			text-shadow: 0 0 .2em hsl(0,0%,0%);
		}
		&:hover .excerpt {
			color: #fff;
		}

	}

}

.more-news {

	padding: 2rem 0;

	h2 {
		color: hsl(0, 0%, 40%);
		font-style: italic;
		font-size: 1.5em;
		margin-top: 0;
	}
	.more-news-link-wrap {
		text-align: right;
	}
	.more-news-link {
		background: var(--colorBlue);
		color: #fff;
		display: inline-block;

		&:hover {
			/*  box-shadow: -5px 0 9px -4px hsla(0, 0%, 0%,.5); */
			color: #fff;
		}
	}

	@media(min-width: 800px) {

		h2 {
			float: left;
			padding-top: .5rem;
		}
		.more-news-link {

			&.animater {
				transform: translate( 30px, -8px );
				opacity: 0;
				transition: .3s;

				&.js-active {
					opacity: 1;
					transform: translate(0,0);
				}
			}
		}
	}
}

.news-stories {

	padding-top: 1em;
	clear: both;

	@media(min-width: 800px) {
		display: -webkit-flex;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;

		.news-story {
			width: 50%;
		}
	}

}

a.news-story {
	display: block;
	border-bottom: none;
	&:hover {
		border-bottom: none;
	}
}

.news-story {
	box-sizing: border-box;
	padding: 0 0 1.6em;

	h3 {
		color: hsl(350, 78%, 30%);
		font-family: var(--fontSansSerif);
		font-weight: 600;
		font-size: 1.2em;
	}

	.news-image {
		display: none;
	}

	@media(min-width:620px) {

		overflow: auto;

		h3 {
			padding-top: 0;
			margin-top: .5em;
		}

		.news-image {
			display: block;
			float: left;
			width: 20%;
			height: 12vw;
			margin-right: 1em;
			background-size: contain;
			background-position: top center;
			background-repeat: no-repeat;
			opacity: .9;
			transition: .2s opacity;
		}
	}

	@media(min-width:800px) {
		width: 50%;

		.news-image {
			width: 33%;
		}

		h3 {
			font-size: 1em;
		}
	}

	@media(min-width:1100px) {
		padding-right: 2em;
		padding-bottom: 0;
	}

	@media(min-width:1400px) {
		h3 {
			font-size: 1.2em;
		}
	}
}

a.news-story:hover {
	.news-image {
		opacity: 1;
	}
	h3 {
		text-decoration: underline;
	}
}


section.faculty-wrap {
	background-repeat: no-repeat;
	background-position: top;
	background-size: contain;
	background-color: white;
	contain: layout;

	._content-box {
		background: white;
		margin-block: 50vw 0;
		margin-inline: 10vw;
		padding: 2em;
	}

	& h1 {
		color: var(--colorGarnet);
		margin-block: 0 .75rem;
		font-size: 1.8rem;
	}

	._text {

	}

	._ctas {
		text-transform: uppercase;
		display: flex;
		/* justify-content: space-between; */
		justify-content: start;
		gap: 1em;
		font-size: .9em;
		font-weight: bold;
		margin-top: 1.5em;
	}
	._ctas a {
		color: var(--colorGarnet);

		&:hover {
			text-decoration: underline;
			color: var(--colorGarnet_bright);
		}
	}
	._ctas span {
		display: block;
		width: 2px;
		height: 1.5em;
		background: var(--colorGarnet);
	}

	@media( min-width: 550px ) {
		background-size: cover;
		background-position: center;

		._content-box {
			margin: 2em 0 2em 10vw;
			max-width: min( 400px, 90vw );
		}

		h1 {
			font-size: 2em;
			margin-bottom: 1.25rem;
		}

		._ctas {
			font-size: 1em;
			margin-top: 2em;
		}
	}
	
	@media (min-width: 1200px) {
		._content-box {
			margin-block: 6em;
		}
	}
}


.instagram-wrap {
	text-align: center;
	margin: 0 0 2em;
	/*  background-image: linear-gradient(black 80%, white); */
	background-image: linear-gradient(hsl(0,0%,0%), transparent);
	padding-top: 1em;
	min-height: 250px;
}

a.instagram-title {
	display: block;
	font-style: italic;
	letter-spacing: -1px;
	text-align: center;
	border: none;
	color: hsl(285,62%,52%);
	padding: 0 0 2em;
	margin: 0 !important;
	font-size: 1.1em;

	transition: .4s color;

	img {
		width: 100px;
		display: block;
		margin: 0 auto 1em;

		transition: .4s opacity;
	}

	span {
		text-shadow: 0 0 9px hsla(0,0%,0%,.8);
		transition: .2s transform ease-out;
		display: inline-block;
		transform: perspective(0) translate3d(0,0,0);
	}

	&:hover {
		color: #fff;

		img {
			opacity: .4;
		}

		span {
			transform: perspective(100px) translate3d(0, -36px, 30px);
		}
	}

}

#instagram-wall.loading {
	.feed-item
	{
		display: none;
	}
}
.instagram-wrap {

	.feed-item img { width: 100%; }

	a.feed-item {
		border: 0;
		&:hover {
			border: 0;
		}
	}

	.feed-item,
	.item-sizer,
	.masonry-stamp
	{
		position: relative;
		width: 100%;
	}

	a.masonry-stamp {
		position: absolute;
		top: 0;
		left: 0;
		box-sizing: border-box;
		margin: 0 !important;
	}

	.feed-item-overlay {
		position: absolute;
		bottom: 0;
		left: 0;
		height: 33%;
		width: 100%;
		background-image: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
		text-shadow: 0px 0px 4px rgba(0,0,0,0.6);

		display: flex;
		flex-wrap: nowrap;
		justify-content: space-around;
		align-items: flex-end;
		align-content: flex-end;

		padding: 1.5em 1em;
		box-sizing: border-box;

		outline: .5px solid transparent;
		transition: .3s;
	}

	.feed-item:hover {
		outline: 1px solid hsl(200,90%,90%);

		.feed-item-overlay {
			opacity: 0;
		}
	}

	.feed-item-meta {
		text-align:center;
		color:white;
		font-size:1.5em;
		font-weight:600;
		box-sizing: border-box;
		position:relative;
	}

	.feed-item-meta::before {
	  content: '';
	  width: 15px;
	  height: 13px;
	  display: inline-block;
	  margin-right: .5em;
	  background-image: url("im/favcom-sprite-01.png");
	  background-repeat: no-repeat;
	  background-size: cover;
	}
	.feed-item-likes::before {
		background-position:0px 0px;
	}
	.feed-item-comments::before {
		background-position:-25px 0px;
	}

	@media(max-width: 550px){
		.loading {
			min-height: 180px;

			&:after {
				top: 100%;
			}
		}
		.loading a.masonry-stamp {
			position: relative;
		}
	}

	@media(min-width:550px){

		.feed-item,
		.item-sizer,
		.masonry-stamp
		{
			width: 49%;
			margin: .5%;
			/*  Firefox needs this to do Masonry correctly. */
			/*  @see https://stackoverflow.com/q/26595515/362769 */
			float: left;
		}

		.feed-item-overlay {
			padding-bottom: 1.1em;
		}
		.feed-item-meta {
			font-size: 1.1em;
		}
	}

	@media(min-width:1000px){
		.feed-item,
		.item-sizer,
		.masonry-stamp
		{
			width: 32%;
			margin: .5%
		}
	}

	@media(min-width:1200px){
		.feed-item,
		.item-sizer,
		.masonry-stamp
		{
			width: 24%;
			margin: .5%
		}
	}

	@media(min-width:1600px){
		.feed-item,
		.item-sizer,
		.masonry-stamp
		{
			width: 19%;
			margin: .5%
		}
	}
}

/*  on windows < 550, limit to 5 items visible */
/*  (instagram logo is first one) */
@media(max-width:550px){
	#instagram-wall > a.feed-item:nth-of-type(6) ~ .feed-item {
		display: none;
	}
}

.final-call-wrap {
	@media( min-width: 550px ) {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1em;
	}

	.disclaimer {
		padding: 4em 0;
		color: white;
		font-weight: 200;
		max-width: 55ch;

		& a[href] {
			text-decoration: underline;
			color: pink;
		}

		@media( max-width: 550px ) {
			padding-inline: 1em;
			text-align: justify;
		}
	}
}

.final-call {
	text-align: center;
	color: #fff;
	padding: 4em 1em 5em;

	p {
		font-size: 1.2em;
	}

	a.cta-button {
		/* background: var(--colorBlue_bright); */
		/* color: #fff; */
		background: #fff;
		color: var(--colorGarnet);
	}
}


.js-typewriter {
	visibility: hidden;
}




}


/**
 * Collapsible banner optionally included on the homepage.
*/
.homepage-banner {
	font-size: 1.1rem;
	padding: .5em;
	text-align: center;
	position: relative;
	min-height: 1.1rem;
	cursor: pointer;

	&._expanded {
		padding: 1.2em .5em 2em .5em;
		cursor: auto;
	}
}

#homepage-banner-toggler {
	background-image: url('im/collapsible-banner-toggler.png');
	background-repeat: no-repeat;
	background-size: 101% auto;
	background-position: left bottom;
	opacity: .7;
	height: 1.3rem;
	width: 1.3rem;
	display: none;
	position: absolute;
	right: 1.4rem;
	top: 1.4rem;

	svg {
		fill: hsl(0 0% 0%);
	}

	@media (min-width: 550px) {
		display: block;
	}
}

.homepage-banner-content-expanded {
	display: none;
}

.homepage-banner._expanded #homepage-banner-toggler {
	display: block;
	background-position: left top;
}

.homepage-banner-content-collapsed {
	padding: .5rem 0;

	p {
		line-height: 1.5rem;
		font-weight: 600;
		text-decoration: underline;
		text-decoration-color: hsla(219, 33%, 50%, .5);
	}

	img {
		height: 3rem;
		margin-right: .9em;
		position: relative;
		float: left;
	}

	@media (min-width: 550px) {
		p {
			line-height: 2rem;
			text-align: inherit;
			text-decoration: none;
		}

		img {
			vertical-align: text-bottom;
			float: none;
			top: 1px;
			height: 1.5rem;
		}
	}
}

.homepage-banner-content-expanded {
	padding: 0 1rem;

	img {
		margin: 1rem 0 1rem;
		max-width: 80%;
	}

	p {
		margin: 1rem 0 2rem;
		text-align: left;
		line-height: 1.5rem;
	}

	@media (min-width: 550px) {
		max-width: 600px;
		margin: 0 auto;

		p {
			text-align: center;
		}

		img {
			max-width: 333px;
		}
	}
}

.homepage-banner-cta-group {

	a {
		text-align: center;
		border-radius: 2px;
		margin: .7em 2rem;
		border-width: 1px;
		border-style: solid;
		border-color: transparent;
		display: block;
		color: hsl(0, 0%, 95%);
		background-color: #881124;
		background-repeat: no-repeat;
		padding: .8em 1.2em;
		box-sizing: border-box;
		font-size: 1rem;
		text-transform: uppercase;
		font-weight: 700;
		text-decoration: none;

		&:hover {
			color: hsl(0, 0%, 100%);
			text-decoration: none;
		}
	}

	@media (min-width: 550px) {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
		align-items: center;
	}
}
