/***** Common CSS for all the contest-specific landing pages *****/

/*** HEADING ***/
.contest-heading {
	background-color: #032275;
	background-image: url("/contests/images/mathcounts_heading.png");
	background-size: cover;
}

/*** HERO CAPTION ***/
.contest-landing-hero-caption {
	background-color: #f3f6f9;
	box-shadow: 0px -2px 30px #00000026;
}

/*** CALLOUTS ***/
.contest-callout {
	color: #333333;
	background-color: white;
	box-shadow: 0px 3px 24px #d0d0d0; /* fallback for IE */
	box-shadow: 0px 3px 24px #00000029;
}
.contest-callouts-title {
	margin-bottom: 65px;
	font-size: 2.2em; /* overrides font-size defined in landing.css */
}
.contest-callout-title {
	width: 65%;
	margin: 0;
	white-space: nowrap;
	top: 17%;
}
.contest-callout-description {
	margin-top: 120px;
	margin-bottom: 80px;
}
.callouts-button {
	width: 65%;
	min-width: 125px;
}

/*** EVENTS ***/
.past-events {
	border-bottom: 1px solid #333333;
}
.event {
	grid-template-columns: 3% 97%;

	/* IE stuff */
	-ms-grid-columns: 3% 97%;
}
.event > *:nth-child(1) {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}
.event > *:nth-child(2) {
	-ms-grid-row: 1;
	-ms-grid-column: 2;
}
.event-metadata {
	grid-template-columns: 9% 39% 52%;

	/* IE stuff */
	-ms-grid-columns: 9% 39% 52%;
}
.event-metadata > *:nth-child(1) {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}
.event-metadata > *:nth-child(2) {
	-ms-grid-row: 1;
	-ms-grid-column: 2;
}
.event-metadata > *:nth-child(3) {
	-ms-grid-row: 1;
	-ms-grid-column: 3;
}
.event-details-container,
.event-blurb p {
	padding-right: 15px;
}

/*** EXCERPT ***/
.contest-platform-excerpt {
	background-image: url("/contests/images/mathjazz-24.svg");
	background-repeat: no-repeat;
	background-size: 500px;
	background-position: 60% 200%;
}
.contest-platform-excerpt h2 {
	text-align: center;
	margin: 0;
	padding-top: 50px;
	font-size: 2.2em;
}
.excerpt-container {
	width: 85%;
	margin: auto;

	display: grid;
	grid-template-rows: 500px;
	grid-template-columns: 50% 50%;

	/* IE stuff */
	display: -ms-grid;
	-ms-grid-rows: 500px;
	-ms-grid-columns: 50% 50%;
}
.excerpt-container > *:nth-child(1) {
	-ms-grid-row: 1;
	-ms-grid-column: 1;
}
.excerpt-container > *:nth-child(2) {
	-ms-grid-row: 1;
	-ms-grid-column: 2;
}
.excerpt-container > div {
	display: -webkit-flex;
	display: flex;
	-webkit-align-items: center;
	        align-items: center;
}
.excerpt-container p {
	color: #333333;
	font-size: 1.2em;
	width: 80%;
	margin: auto;
}
.excerpt-container a {
	color: #333333;
	text-decoration: underline;
}
.excerpt-container a:hover {
	color: #189fad;
}
.excerpt-container img {
	margin: auto;
	width: 70%;
	max-width: 450px;
	min-width: 400px;
}

/*** SMALLER WIDTH STYLES ***/
@media (max-width: 1300px) {
	/*** EXCERPT ***/
	.contest-platform-excerpt {
		background-size: 450px;
	}
	.excerpt-container {
		width: 90%;
		grid-template-rows: 450px;

		/* IE stuff */
		-ms-grid-rows: 450px;
	}
	.excerpt-container p {
		font-size: 1.1em;
		width: 85%;
	}
}
@media (max-width: 1100px) {
	/*** EXCERPT ***/
	.contest-platform-excerpt {
		background-size: 400px;
	}
	.excerpt-container {
		width: 100%;
		grid-template-rows: 400px;

		/* IE stuff */
		-ms-grid-rows: 400px;
	}
	.excerpt-container p {
		font-size: 1em;
		width: 90%;
	}
	.excerpt-container img {
		min-width: 350px;
	}
	/*** CALLOUTS ***/
	.contest-callout-description {
		margin-bottom: 70px;
	}
}
/* excerpt switches to mobile layout */
@media (max-width: 850px) {
	/*** CALLOUTS ***/
	/*** EVENTS ***/
	.event-metadata {
		grid-template-columns: 9% 47% 44%;

		/* IE stuff */
		-ms-grid-columns: 9% 47% 44%;
	}
	/*** EXCERPT ***/
	.contest-platform-excerpt {
		background-size: 500px;
		background-position: -40% 125%;
	}
	.excerpt-container {
		grid-template-rows: auto;
		grid-template-columns: 100%;

		/* IE stuff */
		-ms-grid-rows: auto;
		-ms-grid-columns: 100%;
	}
	.excerpt-container > *:nth-child(2) {
		-ms-grid-row: 2;
		-ms-grid-column: 1;
	}
	.excerpt-container p {
		padding: 30px 0 15px;
		width: 90%;
		max-width: 450px;
	}
	.excerpt-container img {
		padding: 15px 0 80px;
		width: 90%;
		min-width: 0;
	}
}
/* callouts switch to mobile layout */
@media (max-width: 750px) {
	/*** CALLOUTS ***/
	.contest-callout {
		margin-bottom: 50px;
	}
	.full-length-callout .callouts-button {
		width: 65%;
	}
}
/* events switch to mobile layout */
@media (max-width: 700px) {
	/*** EVENTS ***/
	.event {
		grid-template-columns: 5% 95%;

		/* ie stuff */
		-ms-grid-columns: 5% 95%;
	}
}
@media (max-width: 600px) {
	/*** EXCERPT ***/
	.contest-platform-excerpt {
		background-size: 450px;
		background-position: -50% 130%;
	}
}
@media (max-width: 450px) {
	/*** EXCERPT ***/
	.contest-platform-excerpt {
		background-size: 350px;
		background-position: -40% 120%;
	}
	.contest-platform-excerpt h2 {
		font-size: 1.6em;
	}
}
@media (max-width: 350px) {
	/*** EXCERPT ***/
	.contest-platform-excerpt {
		background-position: -80px 116%;
	}
}