:root {
	--hero_height: 600px;
	--purple: #639;
	--lpurple: #9164cc;
	--dpurple: #3b0d6a;
	--grey: #999;
	--lgrey: #F2F2F2;
	--dgrey: #666;
	--gold: #FC0;
}

@font-face {
    font-family: 'open_sans_condensedbold';
    src: url('css/OpenSans-CondBold-webfont.woff') format('woff');
}

#content h1 { 
	font-size: clamp(2rem, 3vw, 3rem);
	position: absolute;
	left: auto;
	bottom: 0;
	background: #639E;
	color: #FFF;
	padding: 1rem 2rem;
	width: fit-content;
	height: fit-content;
	box-sizing:border-box;
}

#content h2 {
	color: #000;
	font-weight: bold;
	padding: 0.5em 0;
	font-size: 1.7em;
	position: initial !important;
	width: auto !important;
	height: auto !important;
	overflow: auto !important;
	line-height:120%;
	font-size:1.5em;
}

#content h3 {
	color: #3B0D6A;
	font-weight: bold;
	padding: 0.5em 0;
	font-size: 1.35em;
}

.block h2, .block h3{
	padding-top:0 !important;
}

#content p, #content li {
	font-size:1.2rem;
}

div.quote p {
	font-style: italic;
	font-size: 1.8rem !important;
}

div#main_content {
	margin:0 15%;
}

div.half>div
{
	flex:1 1 50%;
}

div.block {
	margin-top:2.5rem;
}

.grey {
	background:var(--lgrey);
	padding:2rem !important;
}

.purple {
	background:var(--purple);
	padding:2rem !important;
	color:#FFF !important;
}
.purple h2 { color:#FFF !important; }

.gold {
	background:--gold;
	padding:2rem !important; 
}

.bigbox {
	font-weight:bold;
}

.bigbox>p {
	flex:1;
	font-size:2rem !important;
	text-align:center;
}

.flex { display:flex; }

.half {
	gap:1rem;
}

.thirds {
	gap:3rem;
	justify-content:space-between;
}

.fifths {
	gap:1rem;
	flex-wrap:wrap;
}

.flex .panel {
	flex:1 1 10%;
	border-radius:10px;
}

.buttons {
	flex-wrap:wrap;
	gap:1rem;
	align-items:flex-start;
	justify-content:center;
}

a.button {
    background-color: var(--dpurple);
    border-radius: 10px;
    font-weight:bold !important;
    color: #FFF !important;
	width:fit-content;
    min-width: 200px;
    padding: 10px;
    text-decoration: none!important;
    display: inline-block;
    font-size: 1.2rem;
    margin: 1vw .5vw;
    transition-duration: 0.2s;
    cursor: pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
}

a.button:hover {
	color:--gold !important;
}

.gridbuttons {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-template-rows: repeat(2, 1fr);
}
.lastbutton {
	margin: 20px auto !important;
}

a.goldbutton {
	background-color: var(--gold);
	border-radius: 10px;
	font-weight:bold !important;
	color: #000 !important;
	width:fit-content;
	min-width: 200px;
	padding: 10px;
	text-decoration: none!important;
	display: inline-block;
	font-size: 1.2rem;
	margin: 1vw .5vw;
	transition-duration: 0.2s;
	cursor: pointer;
	display:flex;
	align-items:center;
	justify-content:center;
	text-align:center;
}

@media only screen and (max-width:550px){
	.gridbuttons { display: block; }
	.gridbuttons a.button { justify-self: start !important; }
	.lastbutton { margin: 0 !important;}
}

@media only screen and (max-width:1024px){
	div#main_content { margin:0 10%; }
	div.half { 
		flex-direction:column; 
		align-items:center;
	}
	div.reverse div.photo { order: 2; }
	div.thirds {
		flex-direction:column;
		align-items:center;
		gap:0;
	}
	div.thirds>p { width:100%; }
}

@media only screen and (max-width:767px){
	div#main_content { margin:0 5%; }
}

@media only screen and (max-width:500px){
	div#main_content { margin:0 2%; }
}

/* Accordion Section */
.accordion-item {
  margin: 1rem 0;
}

.accordion-header {
  padding: 10px;
  background-color: var(--lgrey);
  cursor: pointer;
  position: relative;
  border-radius: 10px;
}

.accordion-header h3 {
	padding:1rem !important;
}

.accordion-header i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color:var(--purple) !important;
}

.accordion-content {
  padding: 10px;
  display: none;
}

table#deadlines {
	width:100%;
	/*border-collapse: inherit;*/
	/*border-spacing: 10px;*/
}

table#deadlines, table#deadlines th, table#deadlines td {
	border:0;
	text-align:center;
}

table#deadlines th, table#deadlines td {
	padding: 1.5rem;
}

table#deadlines tr {
	color:#FFF;
}

table#deadlines th 			{ background: --gold; color:#000 !important;}
table#deadlines tr.purp 	{ background: var(--purple);}
table#deadlines tr.lpurp	{ background: var(--lpurple);}
table#deadlines tr.gry		{ background: var(--grey);}
table#deadlines tr.dgry		{ background: var(--dgrey);}
table#deadlines tr.lgry		{ background: var(--lgrey);}
table#deadlines tr.dpurp	{ background: var(--dpurple);}

table#deadlines tr.gry, table#deadlines tr.lgry {
	color: #000;
}

table#deadlines tr:hover {
	background: var(--dpurple);
	color:#FFF !important;
}

@media only screen and (max-width:575px){
	/*table#deadlines { border-collapse: collapse; }*/
	table#deadlines th, table#deadlines td { padding: 1rem 3px; }
}

div#router_grid {
	display: flex;
	flex-wrap: wrap;
	gap: 3rem;
	justify-content: center;
}

div#router_grid div.panel {
	flex:1 1 300px;
	max-width: 300px;
	background: var(--lgrey);
}

div#router_grid div.panel div.text {
	padding:1rem 0.5rem;
	color:#000 !important;
}

/* Hero Image */

div#hero {
	position: relative;
	color: white;
	margin-bottom: 1.5rem;
	display: flex;
	justify-content: center;
}

div#hero_front {
	position: absolute;
	top: 0;
	display: flex;
}

div#hero_front_sub {
	display:flex;
}

div#hero_form {
	background:var(--purple);
	padding:1rem;
}

div#hero_form form {
	display:flex;
	flex-direction:column;
}

div#hero_form h4 {
	color:#FFF !important;
	font-size:1.5rem !important;
}

div#hero_form label {
	color:#FFF !important;
}

div#hero_form input[type=text], div#hero_form input[type=email] {
	width:225px;
	padding: 5px;
	margin: 8px 0;
	border: 0;
}

div#hero_form select {
	width:235px;
	padding: 5px;
	margin: 8px 0;
	border: 0;
}

div#hero_form input[type=submit] {
	margin: 2rem auto;
	font-size: 1.3rem;
	padding: 5px 30px;
	background: --gold;
	border: none;
	border-radius: 5px;
	cursor: pointer;
}

div#hero_front img {
	max-height: var(--hero_height);
}

div#hero_back {
	max-height: var(--hero_height);
	width: 100%;
	overflow: hidden;
	display: flex;
	align-items: center;
}

div#hero_back img {
	filter: blur(5px);
	width: 100%;
}

@media only screen and (max-width:1224px){
	#content h1 {
		text-align:center;
		width:100%;
	}
	
	div#hero_back {
		display:none;
	}
	
	div#hero_front {
		position: initial;
	}

	div#hero_front_sub {
		flex-direction: column;
		align-items:center;
		max-width:100%;
	}

	div#hero_form form {
		flex-direction:row;
		gap:1rem;
		flex-wrap: wrap;
		align-items: end;
	}

	div#hero_form input[type=submit] {
		margin: 0 !important;
	}
}