@charset "utf-8";
/* CSS Document */

/* Div Container */

.maincontainer {
	width: 100%;
	height:auto;
	background-color:white;
	margin:auto;
	padding:10px;
}

.subcont1 {
	width:100%;
	margin:auto;
	padding:10px;
}

.tinybox {
	/* width:320px; */
	/* width:16.66%; */
	height:50px;
	border-color:#000000;
	display:block;
	padding: 2px 0px 2px 0px;
	overflow:none;
	float:left;
}

/* Show More Button */

#more {
	display: none;
}

/* Splash Page Pop Up */
.alert {
  padding: 20px;
  background-color: #f44336;
  color: white;
  opacity: 1;
  transition: opacity 0.6s;
  margin-bottom: 15px;
}

.alert.info {
	background-color: #2196F3;
	position:absolute;
	top:65px;
	font-family:nasalization, Times New Roman, Georgia, Garamond;
	font-size:20px;
	text-align:center;
}

.closebtn {
  margin-left: 15px;
  color: white;
  font-weight: bold;
  float: right;
  font-size: 30px;
  line-height: 20px;
  cursor: pointer;
  transition: 0.3s;
}

.closebtn:hover {
  color: black;
}

/* Dark Mode/Light Mode Button */

.light-mode{
  background-color: white;
  color: black;
}

.lightbox {
	width:50;
	height:50px;
	border-color:#000000;
	padding: 2px 0px 2px 0px;
	overflow:none;
	float:right;
}

button {
	background-color:black;
	color:black;
	border:none;
	width:72px;
	height:55px;
}

button.lm {
	background-color:black;
	color:black;
	border:none;
	width:72px;
	height:55px;
}

@media screen and (max-width: 1775px) {
	
	button.lm {
		max-width:57px;
		max-height:57px;
	}
}

@media screen and (max-width: 1632px) {
	
	button.lm {
		max-width:55px;
		max-height:55px;
	}
}

@media screen and (max-width: 1258px) {
	
	button.lm {
		max-width:33px;
		max-height:33px;
	}
}

@media screen and (max-width: 747px) {
	
	button.lm {
		max-width:25px;
		max-height:25px;
	}
}

@media screen and (max-width: 600px) {
	
	button.lm {
		max-width:72px;
		max-height:55px;
	}
}


/* Body Tags */

html {
	scroll-behavior: smooth;
}

body {
	background-color:black;
	color:white;
	max-width: 100%;
	max-height:1080px;
}

h1 {
	font-size:32px;
}

h1, h2, h3 {
	font-family: Verdana, sans-serif;
	text-align:center;
}

h3, p {
	text-decoration: none;
	font-weight:normal;
}

h2 {
	z-index: 0;
}

h5 {
  color:white;
}

p {
	font-family:Verdana, sans-serif;
	font-size:16px;
}

table {
	max-width:100%;
	max-height:480px;
}

th  {
	max-width:979px;
	height:auto;
}
td, th { 
  text-align: left; 
}

@media screen and (max-width:390px) {
	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr { 
		display: block; 
	}
		table {
	  border-collapse: collapse;
	  width: 100%;
	}
	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr { 
		position: absolute;
		top: -9999px;
		left: -9999px;
	}
	
	tr { border: 1px solid #ccc; }
	
	td { 
		/* Behave  like a "row" */
		border: none;
		border-bottom: 1px solid #eee; 
		position: relative;
		padding-left: 50%; 
	}
	
	td:before { 
		/* Now like a table header */
		position: absolute;
		/* Top/left values mimic padding */
		top: 6px;
		left: 6px;
		width: 45%; 
		padding-right: 10px; 
		white-space: nowrap;
	}
	
	/*
	Label the data
	*/
	td:nth-of-type(1):before { content: "First Name"; }
	td:nth-of-type(2):before { content: "Last Name"; }
}

main {
	max-width: 1200px;
	margin:auto;
}

img {
	content-visibility:auto;
}

.imgL {
	float:left;
	padding:5px;
	margin: 0px 10px 10px 10px;
	max-width:100%;
	height:auto;
}

.imgR {
	float:right;
	padding:5px;
	margin: 0px 10px 10px 10px;
	max-width:100%;
	height:auto;
}

.ML {
	float:left;
	max-width:100%;
	height:auto;
	padding:0% 10% 0% 10%;
}

.MR {
	float:right;
	max-width:100%;
	height:auto;
	padding:0% 15% 0% 10%;
}

h6 {
	opacity:0%;
}

footer {
	max-width:100%;
  background-color:#333333; 
	z-index:-1;;
  padding-left:4vw;
}

/*Table Borders/Separations*/
 table, th {
	border: solid #bb0717 3px;
	text-align: left;
	max-height:480px; 
}

.marsfont {
	font-family:nasalization;
}

/* Responsive */

.responsive {
	max-width:100%;
	height:auto;
}

#responsive2 {
	max-width:100%;
	height:auto;
}

.mapL {
  float:left;
  margin:4px;
  position:absolute;
  
}

/* Alignment */

.imgcenter {
 display: block;
  margin-left: auto;
  margin-right: auto;
 padding-left:25vw;
}

.center {
  display: flex;
  flex-wrap:wrap;
  margin-left: auto;
  margin-right: auto;
  padding-left:8vw;
  width:100%;
}

.tcen {
  margin-left: auto;
  margin-right: auto;
  padding-right: 1.5vw;
  max-width:250px;
  max-height:150px;
}

.awc {
  display: flex;
  flex-wrap:wrap;
  margin-left: auto;
  margin-right: auto;
  width:100%;
  position:relative;
  top:7%;
  left:7%;
}

.awcinner {
  display: flex;
  flex-wrap:wrap;
  margin-left: auto;
  margin-right: auto;
  width:100%;
  position:relative;
  top:16.5%;
  left:16.5%;
}
.awcshelf {
  display: flex;
  flex-wrap:wrap;
  margin-left: auto;
  margin-right: auto;
  width:100%;
  position:relative;
  /* text-outline: 18px; */
  left:23.5%;
}

@media screen and (max-width: 600px) {
	
	.awcshelf img {
		/*  display: flex;
  		flex-wrap:wrap;
  		margin-left: auto;
 		margin-right: auto;
  		width:100%;
  		position:relative;
  		text-outline: 18px;
  		left:23.5%; 
  		content:url("resources/AwardShelf.png");  */
		max-width:70%;
		max-height:100%;
	}
}
.straightcenter {
  display: flex;
  flex-wrap:wrap;
  margin-left: auto;
  margin-right: auto;
  width:100%;
  padding-left:2vw;
}

.straightcenter2 {
  display: table-row;
  flex-wrap:wrap;
  margin-left: auto;
  margin-right: auto;
  padding-left:2vw;
}

.pad1 {
	padding:0vw 18vw;
}

.vl {
  border-left: 6px solid #bb0717;
  height: 480px;
  position: absolute;
  left: 50%;
  margin-left: -3px;
  top: 600;
}

.ctR {
  max-height: 480px;
  max-width: 500px;
  /* position: absolute; */
  right: 52.5%;
  margin-right: 10px;
  top: 600;
  z-index:-1;	 		
}

.ctL {
  max-height: 480px;
  max-width: 500px;
 /*  position: absolute; */
  left: 52.5%;
  margin-right: 10px;
  top: 600;
  z-index:-1;	
}

.frc-link {
	color:blue;
}

body:not(.light-mode) .frc-link {
	color: #00bfff;
}
/*
#backrgound_img {
	margin: 0px 0px 0px 0px;
	padding: 0px 0px 0px 0px;
	display:block;
	background-position: left top;
	background-position: center top;
	background-size: 100% auto;
	background-attachment: fixed;
}
*/ 

/* Navbar */

.topnav {
  overflow: hidden;
  background-color: black;
  z-index: 2;
}

.topnav a {
  float:left;
  display: flex;
  color: white;
  background-color:black;
  margin: 0px 18px;
  padding:8px 0px;
  text-decoration: none;
  font-family:nasalization, Times New Roman, Georgia, Garamond;
  font-size: 55px;
  /* max-width:19%; */
  height:80px;
}

.topnav a:hover {
  background-color: darkred;
  color: red;
  font-style:bold;
}

.topnav a.active {
  background-color: darkred;
  color: red;
}

.tsize {
	font-size: 64px;
	font-family:nasalization;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {display: none;}
  .topnav a.icon {
    float: right;
    display: block;
  }

  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
}

@media screen and (max-width: 1776px) {
	
	.topnav a {
		font-size: 50px;
	}
}

@media screen and (max-width: 1632px) {
	
	.topnav a {
		font-size: 48px;
	}
}

@media screen and (max-width: 1592px) {
	
	.topnav a {
		font-size: 36px;
	}
}

@media screen and (max-width: 1271px) {
	
	.topnav a {
		font-size: 24px;
	}
}

@media screen and (max-width: 949px) {
	
	.topnav a {
		font-size: 12px;
	}
}

@media screen and (max-width: 627px) {
	
	.topnav a {
		font-size: 48px;
	}
}

/* Sticky Nav */

.sticky {
	position:fixed;
	top:0;
	width:100%;
	z-index:1;
}

/* Link Positioning  */

.imgLayer {
	z-index: -1;
	margin: 0vw 20vw;
}

.img_box {
/*	width:473px; */
	max-width:100%;
	height:75px;
	overflow:none;
	margin:0vw 2vw;
}

.img_BL {
	max-width:200px;
	height:auto;
	float:left;
	display: flex;
  flex-wrap:wrap;
	margin-left:3vw;
}

.img_border {
	max-width:200px;
	height:auto;
	float:left;
	display: flex;
  flex-wrap:wrap;
	margin-left:2vw;
}

.img_border2 {
	max-width:200px;
	height:auto;
	float:left;
	display: flex;
  flex-wrap:wrap;
	margin-left:12vw;
}

#AbsPos {
	position:absolute; 
	display: block;
	flex-wrap: nowrap;
	justify-content: center;
	flex-direction:row;
}

@media screen and (max-width:1200px) {

  .img_BL {
    margin-left:4vw;
  }
  .img_border2 {
    margin-left:12.2vw;
  }
}

@media screen and (max-width:1030px) {

  .img_BL {
    margin-left:2vw;
  }

  .img_border2 {
    margin-left:2vw;
  }
}

/* Default Link Animation */

.link_anim {
	-webkit-transition: opacity 0.3s ease 0s;
	transition: opacity 0.3s ease 0s;
}

.link_anim:hover {
	opacity: 0.5;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
}

/* Collapsable Sections */

.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 0px 18px;	
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 40px;
  font-family:nasalization, Times New Roman, Georgia, Garamond;
}

.active, .collapsible:hover {
  background-color: #555;
}

.collapsible:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease-out;
}

.scol {
	display: block;
	margin: 0vw 12vw;
}

.scolL {
	margin-right:1vw;
}

.slink {
	max-width:1290px;
	height:auto;
	display:block;
}

.scolR {
	margin-right:6vw;
}

.collapsible2 {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 0px 18px;	
  width: 100%;
  border: none;
  text-align: center;
  outline: none;
  font-size: 40px;
  font-family:nasalization, Times New Roman, Georgia, Garamond;
}

.active, .collapsible2:hover {
  background-color: #555;
}

.collapsible2:after {
  content: '\002B';
  color: white;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.collapsible3 {
  background-color:darkgrey;
  color: white;
  cursor: pointer;	
  width:40%;
  height:32px;
  text-align: center;
  margin-left: 18vw;
  font-size: 30px;
  font-family:nasalization, Times New Roman, Georgia, Garamond;
}

@media screen and (max-width:509px) {
	.collapsible2 {
		font-size:25px;	
	}
}

@media screen and (max-width:509px) {
	.collapsible3 {
		font-size:15px;	
	}
}
/* Flipcards */

.flip-card {
  background-color: transparent;
  perspective: 1000px; 
  width:339px;
  height:480px;
  z-index:-1;	
}

.flip-card-inner {
/*  position: relative; */
  width: 100%;
  height: 100%;
  margin-left: 2.75vw;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute; 
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.flip-card-front {
  color: black;
}

.flip-card-back {
  color: white;
  transform: rotateY(180deg);
}

.cardR {
	float:center;
	padding:5px;
	margin: 0px 10px 10px 10px;
}

.cardL {
	float:center;
	padding:5px;
	margin:10px;
}

.cardF {
  border: solid 2px pink;
  margin:auto; 
  width:339px;
  height:480px;
  position:absolute;
}
/*Tables (1035px)*/
@media screen and (max-width: 1035px) {
	.flip-card {
		width:200px;
  	height:283px;
	}
  .flip-card-inner { 
     margin-left: 1.33vw;
     margin-top: 5vw;
  }
	div.desc {
		font-size:8px;
	}
}

/* Phones (600px) */
@media screen and (max-width: 600px) {
	.flip-card {
		width:344px;
  	height:536px;
	}
  .flip-card-inner { 
     margin-left: 14vw;
     margin-top: 5vw;
  }
	div.desc {
		font-size:4px;
	}
}

/* Phones (390px) */
@media screen and (max-width: 390px) {
	.flip-card {
		width:344px;
  	height:536px;
	}
  .flip-card-inner { 
     margin-left: 1.75vw;
     margin-top: 5vw;
  }
	div.desc {
		font-size:4px;
	}
}

/* Gallery CSS */

div.gallery2 img {
  max-width: 100%;
  height: auto;
}

div.desc2 {
  text-align: center;
  font-size:17px;	
}

* {
  box-sizing: border-box;
}

.responsivedos {
  padding: 0 6px;
  float: left;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}
/* Extra Text 
@media screen and (max-width: 1435px) {
	div.desc2 {
		font-size:12px;
	}
}

@media screen and (max-width: 1035px) {
	div.desc2 {
		font-size:8px;;
	}
}

@media screen and (max-width: 600px) {
	div.desc2 {
		font-size:4px;
	}
}
*/
/* Tooltip */
.tooltip {
  position: relative;
  display: inline-block;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  height:40px;
  background-color: white;
  color: black;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  /* Position the tooltip */
  position: absolute;
  z-index: 1;
  top: 1vw;
  left: 105%;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  bottom: 150%;
  left: 85%;
  margin-left: -4vw;
}

/* Past Year Video Tooltips */

.tooltip2 {
  position: relative;
  display: inline-block;
  border-bottom: 1px grey;
}

.tooltip2 .tooltiptext2 {
  visibility: hidden;
  width: 560px;
  height:315px;
  background-color: grey;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 55%;
  margin-left: -285px;
    opacity: 0;
  transition: opacity 1s;
}

.tooltip2 .tooltiptext2::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent grey transparent;
}

.tooltip2:hover .tooltiptext2 {
  visibility: visible;
    opacity: 1;
}

/* Responsive Img Gallery */
.row {
  display: -ms-flexbox; /* IE10 */
  display: flex;
  -ms-flex-wrap: wrap; /* IE10 */
  flex-wrap: wrap;
  padding: 0 4px;
}

/* Create four equal columns that sits next to each other */
.column {
  -ms-flex: 25%; /* IE10 */
  flex: 25%;
  max-width: 25%;
  padding: 0 4px;
}

.column img {
  margin-top: 8px;
  vertical-align: middle;
  width: 100%;
}

/* Responsive layout - makes a two column-layout instead of four columns */
@media screen and (max-width: 800px) {
  .column {
    -ms-flex: 50%;
    flex: 50%;
    max-width: 50%;
  }
}

/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    -ms-flex: 100%;
    flex: 100%;
    max-width: 100%;
  }
}

/* Base styles for all screen sizes */
.table-container {
    display: flex;
    flex-direction: column; /* Stacks rows by default on small screens */
    width: 100%;
}

.table-row {
    display: flex;
    flex-direction: column; /* Stacks cells by default on small screens */
    border: 1px solid #ccc;
    margin-bottom: 10px;
}

.table-cell {
    padding: 10px;
    border-bottom: 1px solid #eee;
    font-family: nasalization, sans-serif, Arial ;
    text-align: center;
}

/* Media query for larger screens (e.g., 768px and up) */
@media screen and (min-width: 768px) {
    .table-container {
        flex-direction: column; /* Rows stay stacked as columns for the container */
    }

    .table-row {
        flex-direction: row; /* Cells go side-by-side as a row */
        border: solid #bb0717 3px;
        margin-bottom: 0;
    }

    .table-cell {
        flex: 1; /* Distribute space equally among columns */
        border: solid #bb0717 3px;
    }
}