﻿.hero-area {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 10px;
	padding: 50px;
}

@media (max-width: 767px) {
	.hero-area {
		padding: 10px;
	}
}


	.hero-area div {
		align-content: center;
	}

.match-text {
	color: #213D66;
}

.hero-image {
	width: 100%;
	height: auto;
	background: gray;
	max-width: 550px;
}

.hero-image-footer {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	background-color: #ddd;
	max-width: 550px;
}

.hero-image-footer-item {
	border-left: solid 1px #ccc;
	border-right: solid 1px #ccc;
	padding: 10px;
}

.hero-image-footer-item-title {
	font-size: 20px;
	font-weight: bold;
}

.hero-image-footer-item-subtitle {
	font-size: 12px;
}

.section-title {
	font-size: 12px;
	color: #213D66;
	font-weight: bold;
}

.section-text {
	font-size: 16px;
	padding: 0 0 25px 0;
	color: #696969;
}

.section-descr
{
	font-size: 16px;
	color: #696969;
}

.banner-text {
	font-size: 93px;
	font-family: "Interstate-compressed", sans-serif;
	font-weight: 700;
	color: #101923;
	line-height: 100px;
}

.my-options-button {
	display: inline-block;
	background-color: #F6C746;
	padding: 15px;
	text-decoration: none;
	color: #101923;
	font-size: 14px;
	font-weight: bold;
}

.section2 {
	background-color: #F0F4F8;
	padding: 50px;
	border-top: solid 1px #C5D1DE;
	border-bottom: solid 1px #C5D1DE;
}

@media (max-width: 767px) {
	.section2 {
		padding: 10px;
	}
}

.section2-header {
	color: #213D66;
	font-size: 11px;
	font-weight: bold;
}

.section2-title
{
	color: #101923;
	font-family: "Interstate", serif;
	font-weight: 700;
	font-size: 42px;
	font-weight: bold;
}

.section2-text
{
	color: #696969;
	font-size: 16px;
}

.modes-block {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	background-color: #C5D1DE;
	margin-top: 10px;
}

.modes-block-area {
	border: solid 1px #C5D1DE;
	padding: 10px;
	background-color: white;
	padding: 25px;
}

	.modes-block-area > a {
		text-decoration:none;
		color: inherit;
	}

	.modes-block-title
	{
		font-size: 17px;
		font-weight: bold;
		margin-top: 20px;
	}

.modes-block-text
{
	font-size: 14px;
	color: #696969;
}

.recommended-text
{
	display: inline-block;
	background-color: #F6C746;
	padding: 6px;
	margin-left: 20px;
	font-weight: bold;
	
}

.section3 {
	padding: 50px;
	background-color: white;
}

@media (max-width: 767px) {
	.section3 {
		padding: 10px;
	}
}

.section3-header
{
	color: #213D66;
	font-size: 12px;
	font-weight: bold;
}

.section3-title
{
	color: #101923;
	font-size: 42px;
	font-family: "Interstate", serif;
	font-weight: 700;
}

.section3-header-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	margin-bottom: 20px;
}

.section3-text {
	font-size: 16px;
	color: #696969;
}

.match-schedule-item {
	display: grid;
	grid-template-columns: 100px 1fr auto;
	border: solid 1px #C5D1DE;
}

	.match-schedule-item > div {
		padding: 10px;
	}

.section3-allmatches-button
{
	display: inline-block;
	background-color: white;
	padding: 10px;
	border: solid 1px black;
	font-size: 14px;
	font-weight: bold;
	text-decoration: none;
	color: #101923;
}

.match-schedule-item-date {
	text-align: center;
}

.match-schedule-item-date-dow
{
	font-size: 10px;
	font-weight: bold;
	color: #696969;
}

.match-schedule-item-date-day {
	font-size: 32px;
	font-weight: bold;
	color: #101923;
	line-height: 30px
}

.match-schedule-item-date-month {
	font-size: 10px;
	font-weight: bold;
	color: #696969;
}

.match-schedule-item-title {
	font-size: 10px;
	font-weight: bold;
	color: #213D66;
}

.match-schedule-item-name {
	font-size: 19px;
	font-weight: bold;
	color: #101923;
}

.match-schedule-item-time {
	font-size: 12px;
	color: #696969;
}

.match-schedule-item-details {
	align-content: center;
	margin-right: 20px;
}

.match-schedule-overflow {
	text-align: center;
	border: solid 1px #C5D1DE;
	background-color: #F0F4F8;
	padding: 10px;
}

.match-schedule-url {
	text-decoration: none;
}

.section4 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	padding: 50px;
	gap: 80px;
}

@media (max-width: 767px) {
	.section4 {
		padding: 10px;
		gap: 10px;
	}
}

.section4-header {
	color: #213D66;
	font-size: 12px;
	font-weight: bold;
}

.section4-title
{
	color: #101923;
	font-size: 42px;
	font-family: "Interstate", serif;
	font-weight: 700;
}

summary {
	font-size: 15px;
	font-weight: bold;
	color: #101923;
}

details {
	padding: 20px;
	border-bottom: solid 1px black;
	font-size: 14px;
	font-weight: normal;
	color: #696969;
}

.section4-511ishere
{
	font-size: 28px;
	font-family: "Interstate", serif;
	font-weight: 700;
}

.section4-511ishere-text {
	font-size: 14px;
	color: #696969;
}

.section4-511ishere-command a {
	font-size: 15px;
	color: #101923;
	font-weight: bold;
	text-decoration: none;
}

.questions-area-need-help {
	border: solid 1px black;
	padding: 25px;
	background-color: white;
}

.questions-area-need-help-row-item {
	display: grid;
	grid-template-columns: 40px 1fr;
	align-items: center;
}

.section-texting
{
	padding-left: 50px;
	background-color: #F6C746;
}

@media (max-width: 767px)
{
	.section-texting
	{
		padding-left: 25px;
	}
}

details a {
	color: rgb(105,105,105);
}