/* IMPORTED FONTS */

@import url('https://fonts.googleapis.com/css?family=Tangerine');
@import url('https://fonts.googleapis.com/css?family=Baumans');
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,300;0,400;0,600;0,800;1,300;1,400;1,600;1,800&display=swap');



.accent_font_1 {
  font-family: 'Baumans', sans-serif;
  color: #55CCFF;
  font-weight: 400;
  line-height: 1.58;
  font-size: 20px;
  padding: 70px;
}

.accent_font_2 {
  font-family: 'Tangerine', serif;
  font-weight: 700;
  font-style: bold;
  font-size: 120px;
  color: #0000BB;
  padding: 10px;
}

.accent_font_3 {
  font-family: 'Tangerine', serif;
  font-weight: 700;
  font-style: bold;
  font-size: 60px;
  color: #0000BB;
  padding: 5px;
}

html {
  font-family: font-family: 'Fira Sans', sans-serif;
  font-size: clamp(12px, .9vw, 18px);
}

p {
  font-family: font-family: 'Fira Sans', sans-serif;
  font-size: clamp(12px, .9vw, 18px);
}

h1 {
  font-family: font-family: 'Fira Sans', sans-serif;
  font-size: clamp(32px, 2.5vw, 42px);
  font-weight: 800;
  text-align: center;
}

h2 {
  font-family: font-family: 'Fira Sans', sans-serif;
  font-size: clamp(20px, 1.5vw, 28px);
  font-weight: 600;
  text-align: center;
}

h3 {
  font-family: font-family: 'Fira Sans', sans-serif;
  font-size: clamp(15px, 1vw, 18px);
  font-weight: 600;
  text-align: center;
}

body {
	background-color: #0000BB;
	font-family: font-family: 'Fira Sans', sans-serif;
}

tbody {
		font-family: font-family: 'Fira Sans', sans-serif;
		font-size: clamp(12px, .8vw, 16px);
		</div>
}

/* ------TABLE STRIPES--------------- */

table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  text-align: left;
  padding: .3vw;
}

tr:nth-child(even) {background-color: rgba(75, 220, 255, 0.3) 
}
/* ------END STRIPES----------------- */

.container {
	position:relative;
	max-width: 1600px;
	width: auto;
	border: .6vw solid #55CCFF;
	height: auto;
	padding: 0vw;
	background-color: #0000BB;
	margin-top: .3vw;
	margin-right: auto;
	margin-bottom: 0vw;
	margin-left: auto;
	font-family: 'Fira Sans', sans-serif;
	font-weight: 400;
	color: #FFFFFF;
}

.container_white {
	position:relative;
	max-width: 1600px;
	width: auto;
	border: .6vw solid #55CCFF;
	height: auto;
	padding: 0vw;
	background-color: #FFFFFF;
	margin-top: .3vwx;
	margin-right: auto;
	margin-bottom: 0vw;
	margin-left: auto;
	color: #0000BB;
}	

.fluid_container {
	position:relative;
	max-width: 1600px;
	width: auto;
	border: 0px solid #55CCFF;
	height: auto;
	padding: 0px;
	margin-top: 5px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
 	
.wrapper{
	position: relative;
	max-width: 1600px;
	width: auto;
	border: .6vw solid #55CCFF;
	height: auto;
	padding-top: 0vw;
	padding-bottom: 0vw;
	padding-left: 0px;
	padding-right: 0vw;
	margin-right: auto;
	margin-left: auto;
}

.header {
	height: auto;
	width: 100%;
}

.navframe {
	background-color: #0000BB;
	height: auto;
	width: 100%;
	padding-top: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	font-weight: bold;
	padding-right: 0px;
	background-color: 0000BB;
}

.fullframe {
	height: auto;
	width: auto;
	background-color: #FFFFFF;
	font-family: font-family: 'Fira Sans', sans-serif;
 	font-size: clamp(12px, .9vw, 18px);
	color: #0000BB;
	font-size: 1vw;
	text-align: center;
	padding-bottom: 1.5vw;
	padding-top: .3vw;
	padding-left: 1.5vw;
	padding-right: 1.5vw;
}

.leftframe {
	width: 82%;
	height: auto;
	font-size: 1vw;
	color: #0000BB;
	float: left;
	margin: 0vw;
	background-color: #FFFFFF;
	padding-top: .3vw;
	padding-right: .9vw;
	padding-bottom: 1.2vw;
	padding-left: .9vw;
}

.rightframe {
	width: 14%;
	color: #0000BB;
	font-size: 1vw;
	float: right;
	margin: 0vw;
	height: auto;
	background-color: #FFFFFF;
	text-align: center;
	padding: .1vw;
}

.footer {
	clear: both;
	height: auto;
	color: #55CCFF;
	width: auto;
	height: auto;
	text-align: right;
	font-size: .7vw;
	margin: .2vw;
}

.title_div {
	background-color: #0000BB;
	color: #FFFFFF;
	text-align: center;
	padding: 0vw;
	height: auto;
	width: auto;
}

.rddivroyal {				/* ROUNDED CORNERS  */
	border-radius: 3vw;
	background: #0000BB;
	color: #FFFFFF;
	width: auto;
	height: auto;
	margin-bottom: 1.25vw;
	padding-top: .8vw;
	padding-bottom: 1.5vw;
	padding-left: 1.5vw;
	padding-right: 1.5vw;
}

.rddivblue {				/* ROUNDED CORNERS  */
	border-radius: 3vw;
	background: #55CCFF;
	color: #0000BB;
	padding: 1.5vw;
	width: auto;
	height: auto;
	padding-top: .8vw;
	padding-bottom: 1.5vw;
	padding-left: 1.5vw;
	padding-right: 1.5vw;
}

.rddivwhite{				/* ROUNDED CORNERS  */
  	border-radius: 3vw;
 	background: #FFFFFF;
	color: #0000BB;
 	width: auto;
  	height: auto;
	width: auto;
	height: auto;
	padding-top: .8vw;
	padding-bottom: 1.5vw;
	padding-left: 1.5vw;
	padding-right: 1.5vw;
}

.fluid_royal_div {
	color: #FFFFFF;
	background: #0000BB;
	align: left;				/* SQUARE CORNERS LEFT JUSTIFIED */
	width: auto;
	height: auto;
	margin-bottom: 1.25vw;
	padding-top: .5vw;
	padding-bottom: 1.5vw;
	padding-left: 1.5vw;
	padding-right: 1.5vw;
}

.fluid_blue_div {
	color: #0000BB;
	background: #55CCFF;
	align: left;				/* SQUARE CORNERS LEFT JUSTIFIED */
	width: auto;
	height: auto;
	margin-bottom: 1vw;
	padding-top: .5vw;
	padding-bottom: 1.5vw;
	padding-left: 1.5vw;
	padding-right: 1.5vw;
}

.fluid_white_div{
	color: #0000BB;
	background: #FFFFFF;
	align: left;				/* SQUARE CORNERS LEFT JUSTIFIED */
	width: auto;
	height: auto;
	margin-bottom: 1vw;
	padding-top: .5vw;
	padding-bottom: 1.5vw;
	padding-left: 1.5vw;
	padding-right: 1.5vw;
}

.fluid_royal_center_div{
	color: #FFFFFF;
	background: #0000BB;
	align: center;				/* SQUARE CORNERS CENTER JUSTIFIED */
	width: auto;
	height: auto;
	padding-top: .5vw;
	padding-bottom: 1vw;
	padding-left: 1.5vw;
	padding-right: 1.5vw;
}

.fluid_blue_center_div{
	color: #0000BB;
	background: #FFFFFF;
	align: center;				/* SQUARE CORNERS CENTER JUSTIFIED */
	width: auto;
	height: auto;
	padding-top: .5vw;
	padding-bottom: 1vw;
	padding-left: 1.5vw;
	padding-right: 1.5vw;
}

.fluid_white_center_div{
	color: #0000BB;
	background: #FFFFFF;
	align: center;				/* SQUARE CORNERS CENTER JUSTIFIED */
	width: auto;
	height: auto;
	padding-top: .5vw;
	padding-bottom: 1vw;
	padding-left: 1.5vw;
	padding-right: 1.5vw;
}

.xxlarge_Script_text {
	font-family: 'Tangerine', serif;
	font-size: clamp(50px, 4.5vw, 130px);
	font-weight: bold;
	color: #0000BB;
}

.royal_text {
	color: #0000BB;
	font-family: 'Fira Sans', sans-serif;
	font-weight: 400;
	font-size: 1vw
}

.large_royal_text {
	font-family: 'Fira Sans', sans-serif;
	font-size: 1.2vw;
	font-weight: 600;
	color: #0000BB;
}

.xlarge_royal_text {
	font-family: 'Fira Sans', sans-serif;
	font-size: 1.5vw;
	font-weight: 600;
	color: #0000BB;
}

.xxlarge_royal_text {
	font-family: 'Fira Sans', sans-serif;
	font-size: 2.5vw;
	font-weight: 800;
	color: #0000BB;
}

.blue_text {
	color: #55CCFF;
	ffont-family: 'Fira Sans', sans-serif;
	font-weight: 400;
	font-size: clamp(14px, .9vw, 16px);
}

.large_blue_text {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 1.2vw;
	font-weight: 600;
	color: #055CCFF;
}

.xlarge_blue_text {
	font-family: 'Fira Sans', sans-serif;
	font-size: 1.5vw;
	font-weight: 600;
	color: #55CCFF;
}

.xxlarge_blue_text {
	font-family: 'Fira Sans', sans-serif;
	font-size: 2.5vw;
	font-weight: 800;
	color: #55CCFF;
}

.white_table_header {
	color: #FFFFFF;
	font-family: 'Fira Sans', sans-serif;
	font-weight: 600;
	font-size: .8vw
}

/* ----------- MULTI IMAGE SLIDER ------------ */
  /* Slideshow container */
            .slideshow-container{
                max-width: 15em;
                position: relative;
                margin: auto;
            }
            .mySlides{
                background-color: #FFFFFF;
            }


/* START SLIDES ----------------------- */

.Slides {
	display:none;
	height: auto;
	width: auto;
}

/* END SLIDES ------------------------- */

/* START RESIZE IMAGES ----------------
 */
img {
    max-width: 100%;
	height: auto;
    width: auto\9; /* ie8 */
}
/* END RESIZE IMAGES ----------------- */


/*------------------------------------ START 2 COLUMN PAGE LAYOUT ----------------------------------------------*/ 
/* used for main flexi page layout 2 column right column drops under left column*/

.left_column {
  flex: 5;  
}  

.right_column {
  flex: 1;  
}

/* Responsive: */

@media only screen and (min-width: 900px) {
  .page {
    display: flex;
  }
}

/* COLUMNS */

.column_wrapper {
  max-width: 1600px;
  margin-right: auto;
  margin-left: auto;
}

.column {
  padding: .85vw;
  margin: .35vw;
  background: #;
}

/*-------------------------------------- END 2 COLUMN PAGEE LAYOUT --------------------------------------------------*/

 
/* --------- START FLEX BOX COLUMN -----------------*/
/* used for sponsors and premiership photos */

.flex_container {
  /* We first create a flex layout context */
  display: flex;
  
  /* Then we define the flow direction
     and if we allow the items to wrap 
   * Remember this is the same as:
   * flex-direction: row;
   * flex-wrap: wrap;
   */
  flex-flow: row wrap;
  
  /* Then we define how is distributed the remaining space */
  justify-content: space-around;
  
  padding: 0;
  margin: 0;
  list-style: none;
}

.flex_item {
  background: #FFFFFF;
  padding: .9vw;
  width: 18vw;
  height: auto;
  margin-top: 0vw;
  line-height: 3vw;
  color: white;
  font-weight: bold;
  font-size: .9vw;
  text-align: center;
}
/* END FLEX BOX COLUMN ------------------------------------------*/

/* START FLEX BOX UNEVEN COLUMN ------------------------------------------*/
.col_wrapper{
  display: flex;
  flex-direction: column;
  padding: 0px;
}
.col_content {
  display: flex;
  flex: 1; 
  justify-content: space-around;
}
.col{
  display: flex;
  flex:1;
}
.col_middle{
  flex: 1;
  order: 2;
  background: #FFFFFF;
  text-align: center; 
}
.col_left{
  width: 80%;
   height: auto;
  background: #FFFFFF;
  text-align: center; 
  order: 1;
}
.col_right{ 
  width: 15%;
  height: auto;
  order: 3;
  background: #FFFFFF;
  text-align: center; 
}
/* END FLEX BOX UNEVEN COLUMN ------------------------------------------*/


/* START NAV BAR -------------------------------------------- */

.topnav {
	overflow: hidden;
	font-family: 'Fira Sans', sans-serif;
	font-weight: 400;
	background-color: #0000BB;
	padding: 0px;
	margin: 0px;
}

.topnav a {
  float: left; 
  display: block;
  color: #55CCFF;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #FFFFFF;
  color: #0000BB;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: #55CCFF;
  padding: 14px 16px;
  background-color: inherit;
  font-family: 'Fira Sans', sans-serif;
  margin: 0;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #0000BB;
  min-width: 170px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: #FFFFFF;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: center;
}

.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #0000BB;
  color: #FFFFFF;
}

.dropdown-content a:hover {
  background-color: #55CCFF;
  color: #FFFFFF;
}

.dropdown:hover .dropdown-content {
  display: block;
}

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

@media screen and (max-width: 680px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}

/* END NAV BAR -------------------------------------------- */


/* START CONTACT FORM -------------------------------------------- */

* {box-sizing: border-box;}

input[type=text], select, textarea {
  width: 100%;
  padding: 1vw;
  border: 1px solid #ccc;
  border-radius: 4px;
  box-sizing: border-box;
  margin-top: .5vw;
  margin-bottom: 1vw;
  resize: vertical;
}

input[type=submit] {
  background-color: #04AA6D;
  color: white;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

input[type=submit]:hover {
  background-color: #45a049;
}

.form_container {
  border-radius: 3vw;
  background-color: #f2f2f2;
  padding: 2vw;
}

/* START CONTACT FORM -------------------------------------------- */

/* ------------ START FLEXBOX SPONSOR PANELS -------------------*/
* {
  box-sizing: border-box;
 }

.flex_panelbox {
  font-family: font-family: 'Fira Sans', sans-serif;
  font-size: clamp(11px, .8vw, 16px);	
  display: flex;
  padding: 1em;
}

.flex_panel {
  flex: 1;
  width: 0;
}

/*.flex-panel:not(:last-child) {
  margin-right: 1em;
}*/

.sponsor {
  border: 1px solid #eee;
  list-style-type: none;
  margin: 0;
  padding: 0;
  transition: 0.25s;
}

.sponsor:hover {
  box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.2);
  transform: scale(1.025);
}

.sponsor .sponsor_header {
	background-color: #0000BB;
	color: #FFFFFF;
	font-size: 1.2rem;
}

.sponsor .highlight {
  background-color: #55CCFF;
  color: #FFFFFF;
	font-size: 1.2rem;
}

.sponsor li {
  background-color: #FFFFFF;
  border-bottom: 1px solid #eee;
  padding: 1em;
  text-align: center;
}

.sponsor .gray {
	background-color: #eee;
	font-size: 1em;
}

button {
  background-color: #55CCFF;
  border: none;
  border-radius: .15em;
  color: #FFFFFF;
  cursor: pointer;
  padding: .75em 1.5em;
  font-size: 1rem;
}

@media only screen and (max-width: 900px) {
  button {
    padding: .75em;
  }
}

@media only screen and (max-width: 600px) {
  .flex_panelbox {
    flex-wrap: wrap;
  }

  .flex_panel {
    flex: 0 0 100%;
    margin-bottom: 1em;
    width: 100%;
  }

  .sponsor:hover {
    box-shadow: none;
    transform: none;
  }

  button {
    padding: .75em 1.5em;
  }
/* ------------ END FLEXBOX SPONSOR PANELS -------------------*/