
@font-face {
  font-family: brandonFont;
  src: url(https://learning.goodwillaz.org/wp-content/uploads/html/fonts/hvd_fonts_-_brandongrotesque-regular-webfont.woff);
  font-weight: 200;
}

@font-face {
  font-family: brandonFont;
  src: url(https://learning.goodwillaz.org/wp-content/uploads/html/fonts/hvd_fonts_-_brandongrotesque-medium-webfont.woff2);
  font-weight: 400;
}

@font-face {
  font-family: brandonFont;
  src: url(https://learning.goodwillaz.org/wp-content/uploads/html/fonts/hvd_fonts_-_brandongrotesque-bold-webfont.woff);
  font-weight: bold;
}


body
{
   margin: 0 0 0 0%;
   font-family: brandonFont;
   border: 0px green solid;
}

table {
  width: 70%;
  border-collapse: collapse;
  margin: 0 15% 1.5% 15%;
  text-align: center;
  /*height: 20%;*/
}

th, td {
  border: 1px solid #c8c8cc;
  color: #00838F;
  text-align: center;
  margin: 0% 0 0% 0;
  padding: 0;
  font-size: 1.8vw;
  font-weight: 600;
  transition: color .25s, background-color .25s;
}

td:hover
{
 background-color: #00838F;
 color: white;
 transition: color .5s, background-color .5s;
 /*border: 2px solid yellow;*/
 box-shadow: inset 0 0 0 4px #FF9016;
 cursor: pointer;
}

td a
{	
    display: block;        /* Make <a> a block-level element */
    width: 100%;           /* Fill the full width of the <td> */
    height: 100%;          /* Fill the full height of the <td> */
    text-decoration: none; /* Remove underline */
    color: #00838F;         /* Optional: Set text color */
    padding: 6% 0 6% 0;         /* Optional: Add padding for better spacing */
}

td:hover a {
   color: #FFF;
   text-decoration: none;
}
 
.titleTop
{
 font-size: 3.5vw;
 font-weight: 600;
 text-transform: uppercase;
 color: #002D74;
 margin: 4% 0 -.15em 0;
 padding: 0;
 text-align: center;
 border: 0px blue solid;
}

.Calen
{
	font-size: 2.35vw;
	letter-spacing: .2em;
	font-weight: 600;
	margin: .25% 15% 1.5% 15%;
 	text-align: center;
    text-transform: uppercase;
    background-color: #00838F; /*#bbbbc1; */
    padding: .05% 0 .05% 0;
    color: #FFF;
}

ol
{
	font-size: 1.05vw;
	line-height: 1.7vw;
	padding: 0 0% 0 2%;
	margin-top: 1% 0 0 0;
	font-weight: 200;
}

li
{
	font-size: 1.15vw;
	line-height: 1.85vw;
	padding: 0 0% 0 .5%;
	font-weight: 200;
}

li a
{
   color: #00838F;
   font-weight: 600;
}

li a:hover
{
   color: #002D74;
}

.safLink
{
    text-align: center;
	font-size: 2.0vw;
    margin: 2% 10% 1% 10%;
	font-weight: 400;
	border: red 0px solid;
	color: #00838F;
}

.safLink a
{
 color: #00838F;
}

.safLink a:hover
{
 color: #002D74;
}

@media screen and (max-width: 1100px) {
.safLink a
{
	font-size: 2.42vw;
	line-height: 2.4vw;
	}
}


.subHead
{
    text-align: center;
	font-size: 1.55vw;
    margin: 0 10% -.5% 10%;
	font-weight: 400;
	border: red 0px solid;
	color: #000;
}

@media screen and (max-width: 1100px) {
.subHead
{
	font-size: 2.15vw;
	}
}

.stepList
{
    text-align: left;
	font-size: .75vw;
    margin: 0 0% 0% 30%;
	font-weight: 400;
	border: red 0px solid;
	color: #000;
	width: 50%;
}

b
{
	color:#00838F;
}

@media screen and (max-width: 1100px) {
li
{
	font-size: 1.75vw;
	line-height: 2.4vw;
	}
}