/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:0.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace, monospace;font-size:1em}a{background-color:transparent}abbr[title]{border-bottom:none;text-decoration:underline}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace, monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-0.25em}sup{top:-0.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type="button"],[type="reset"],[type="submit"],button{-webkit-appearance:button}[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:0.35em 0.75em 0.625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type="checklist"],[type="radio"]{box-sizing:border-box;padding:0}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto}[type="search"]{-webkit-appearance:textfield;outline-offset:-2px}[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}

/* screen reader */
.sr-only {border:0;clip:rect(0, 0, 0, 0);height:1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}
.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;overflow:visible;position:static;white-space:normal;width:auto}

/* vars */
:root {
	--brand: #00205b;
	--brand2: #d62828;
	--brand3: #78232e;
	--dark: #000000;
	--dark2: #363636;
	--light: #ffffff;
	--light2: #ebebeb;
}

html {height: 100%; scroll-behavior: smooth}
body {background-color: var(--light); color: var(--dark); display: flex; flex-direction: column; font-family: sans-serif; min-height: 100%; margin: 0 auto; max-width: 120rem}
main {display: flex; flex-direction: column; flex-grow: 1}
h1, h2, h3, h4, h5, h6, ol, p, ul {margin: 1rem 0}
h1, h2, h3, h4, h5, h6 {line-height: 1; text-wrap: balance}
h1 {font-size: 2rem}
h2 {font-size: 1.5rem}
h3 {font-size: 1.25rem}
h4 {font-size: 1.125rem}
h5 {font-size: 1.0625rem}
h6 {font-size: 1rem}
li {margin: 0.5rem 0}
a {color: inherit}
img {height: auto; max-width: 100%}
[id] {scroll-margin-top: 5rem}
.container {padding: 0 1rem}
.disclaimer {font-size: 0.875rem}
.toggled {display: none}
.center {justify-content: center; text-align: center; text-wrap: balance}
.center ol, .center ul {display: inline-block; margin: 0; text-align: left}
.buttonholder {align-items: end; display: flex; flex-wrap: wrap; gap: 1rem}
.center .buttonholder {justify-content: center}
.button {background-color: var(--brand2); border: none; border-radius: 0.5rem; color: var(--light); display: inline-block; padding: 0.5rem 1rem; text-align:center; text-decoration: none; text-wrap: balance}
.img {background-color: var(--brand)}
img.img {display: block; margin: 1rem auto}
.mapwrapper {aspect-ratio: 1.618; margin: 1rem auto; max-width: 40rem; position: relative; width: 100%}
.mapwrapper iframe {height: 100%; left: 0; position: absolute; top: 0; width: 100%}
.videowrapper {margin: 1rem; max-height: 75vh; max-width: 720px}
.videowrapper:has(iframe) {aspect-ratio: 16/9; position: relative}
.videowrapper.vertical:has(iframe) {aspect-ratio: 9/16}
.videowrapper iframe {height: 100%; left: 0; position: absolute; top: 0; width: 100%}

.field {margin: 1rem 0}
.field:has(input[type="checkbox"]) {align-items: center; display: flex; gap: 0.5rem; text-align: left}
input, select, textarea {border: 1px solid var(--brand); background-color: var(--light); border-radius: 0.5rem; box-sizing: border-box; padding: 0.5rem; width: 100%}
textarea {resize: vertical}
input[type="submit"] {background-color: var(--brand2); border: none; color: var(--light); cursor: pointer; font-weight: bold; text-transform: uppercase}
input[type="checkbox"], input[type="radio"] {align-self: start; border-color: var(--brand); height: 1.25rem; width: 1.25rem}
[name="comments"] {display: none}
::placeholder {color: inherit; opacity: 1}
.sel_wrap {position: relative}
.sel_wrap::after {color: var(--brand3); content: '\25bc'; position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%)}
.sel_wrap select {appearance: none; padding-right: 2rem}
option.location[disabled] {display: none}
.deadline {font-weight: bold}

#header {background-color: var(--light); padding: 0.5rem 0; position: sticky; top: 0; z-index: 10}
#header .container {align-items: center; display: flex; gap: 2rem; justify-content: space-between}
#header a {text-decoration: none}
#header_phone {color: var(--brand); font-size: 1.25rem}
#header_phone a, #header_phone span {display: inline-block}
#header_nav {background-color: var(--brand); color: var(--light); display: none; position: absolute; right: 0; top: 100%}
#header_nav ul {list-style: none; margin: 0; padding: 0}
#header_nav a {display: block; padding: 0.5rem 1rem}
#header_nav li {margin: 0}
#header_nav li:first-child a {padding-top: 1rem}
#header_nav li:last-child a {padding-bottom: 1rem}
#header_menu_toggle {align-self: stretch; background-color: transparent; border: none; cursor: pointer; font-size: 3rem; font-weight: bold; padding: 0}
.form {text-align: center; text-wrap: balance}
.form h2 {font-size: 1.5rem; margin-bottom: 0}
.form h2 + p {margin-top: 0}

section:first-child {flex-grow: 1}
main > section {padding: 2rem 0}
main > section:nth-child(2n+1) {background-color: var(--light2)}

#hero {background-color: var(--brand); color: var(--light); display: flex; flex-direction: column; padding: 0}
#hero_content {background-image: url(../img/hero/hero_960.jpg); background-position: center; background-size: cover; color: var(--light); display: flex; flex-direction: column; flex-grow: 1; justify-content: end; min-height: 24rem; position: relative; text-align: center; text-wrap: balance}  
#hero_content::before {background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%); bottom: 0; content:''; left:0; position: absolute; right: 0; top: 0}
#hero_content hgroup {padding: 2rem}
#hero_content h1, #hero_content .content {position: relative}
#hero_content h1 {font-size: 2rem; text-shadow: 0 0.375rem 1rem #444000}
#hero_content .content {background-color: #00000080; margin: 0; padding: 1rem 2rem}
#hero_content .content >:first-child {margin-top: 0}
#hero_content .content >:last-child {margin-bottom: 0}
#hero_form {padding: 1rem 2rem}
#thanks {align-items: center; background-position: center; background-size: cover; display: flex; flex-direction: column; justify-content: center}
#thanks .container {background-color: #000000a0; border-radius: 1rem; color: var(--light); margin: 1rem; padding: 1rem 2rem}

.gridboxes .box {margin: 2rem 0}
.gridboxes .box .heading {color: var(--brand)}
.gridboxes .box .heading a {text-decoration: none}

.location h3 {margin-bottom: 0}
.location .address {margin-top: 0}

.row {margin: 2rem 0}
.row .img {aspect-ratio: 1.618; background-position: center; background-size: cover; border-radius: 1rem; margin: 1rem 0}
#why-mcc_img {background-image: url('../img/why-mcc.jpg')}

#bottom-form {background-color: var(--brand); color: var(--light)}

#footer {background-color: var(--dark2); color: var(--light); padding: 1rem 0}
@media (min-width: 60rem){
	li, p {font-size: 1.25rem}
	.container {margin: 0 auto; max-width: 80rem}
	.cols {column-count: 2; column-gap: 2rem}
	.cols3 {column-count: 3}
	.cols > * {break-inside: avoid; margin-top: 0}

	.fieldset {display: flex; gap: 1rem}
	.fieldset .field {flex-basis: 100%; margin: 0}
	input, select, textarea {font-size: 1.25rem}
	.form h2 {font-size: 1.75rem}
	.form_subhead {font-size: 1rem}
	
	#header .container {gap: 2rem}
	#header_logo {order: 1}
	#header_phone {order: 3}
	#header_nav {background-color: transparent; color: var(--brand); display: block !important; flex-grow: 1; order: 2; position: static}
	#header_nav a {display: inline; font-weight: bold; padding: 0 !important}
	#header_nav ul {display: flex; justify-content: center; gap: 0.5rem 1rem}
	#header_menu_toggle {display: none}
	
	#hero {flex-direction: row}
	#hero_content {background-image: url(../img/hero/hero.jpg)}
	#hero_content h1 {font-size: 3rem}
	#hero_content .content {font-size: 1.5rem}
	#hero_form {box-sizing: border-box; flex-basis: 30rem; flex-grow: 0; flex-shrink: 0; max-width: 40%}
	#bottom-form .container {max-width: 40rem}
	
	.gridboxes {display: flex; flex-wrap: wrap; gap: 2rem 4rem}
	.gridboxes .box {display: flex; flex-basis: calc(50% - 2rem); flex-direction: column; justify-content: space-between; margin: 0}
	.gridboxes .box .heading {margin-bottom: 0}

	.locations {align-items: start; display: flex; gap: 0 4rem; justify-content: center}
	.locations:has(.mapwrapper) {align-items: stretch; flex-wrap: wrap; gap: 2rem}
	.location:has(.mapwrapper) {display: flex; flex-basis: calc(50% - 2rem); flex-direction: column; justify-content: space-between}
	.location h3, .location .address {margin: 0}
	
	.row {align-items: center; display: flex; gap: 4rem}
	.row.rev {flex-direction: row-reverse}
	.row > * {flex-basis: 100%; margin: 0 !important}
	.row > * > :first-child{margin-top: 0}
	.row > * > :last-child{margin-bottom: 0}
	.row .imgholder {align-self: start}

	.container.videos {align-items: center; display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center}
	.videos .videowrapper {flex-basis: calc(50% - 1rem); margin: 0}
	.videos .videowrapper.vertical {flex-basis: calc(25% - 1.5rem)}
	#footer p {font-size: 1rem}	
}