/* -------------    FONTS     ------------------------

font-family: 'Merriweather', serif;
font-family: 'ZCOOL XiaoWei', serif;
font-family: 'Lato', sans-serif;
---------           Colors    -------------------------
blue                   color: #014f67;
old light blue         color:#0182ab;
light blue             color:#adeafe;
dark blue              color: #003546;
en space  em dash  en space        — 
/*-----------------------------------------------------*/


/* ---------------------------
/*         BASIC SETUP
-----------------------------*/
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  background-color: #fff;
  color: #393737;
  font-family: "Lato", "Arial", sans-serif;
  font-size: 20px;
  font-weight: 300;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

clearfix {
  zoom: 1;
}

.clearfix:after {
  content: ".";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

.underline {
  text-decoration: underline;
}

#header {
  position: fixed;
  margin-top: 0%;
  width: 100%;
}

/*---------------------------------------
                 TOP NAV
________________________________________*/

/* Add a black background color to the top navigation */
.topnav {
  background-color: #003546;
  overflow: hidden;
  position: fixed;
  width: 100%;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: rgba(189, 196, 198, 0.75);
  color: black;
}

/* Add an active class to highlight the current page */
.topnav a.active {
  background-color: rgb(247, 253, 255);
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}

/* ---------------------------
/*          TOP PANEL
-----------------------------*/
.topPanel {
  width: 100%;
  background-color: #003546;
  padding-top: 49px;
}

.topPanel img {
  width: 100%;
}

/* ---------------------------
/*     HEADINGS
-----------------------------*/
h1 {
  font-family: "ZCOOL XiaoWei", serif;
  font-size: 200%;
  font-weight: 400;
  margin-top: 0px;
  margin-bottom: 20px;
  color: #fff;
  letter-spacing: 1px;
  word-spacing: 3px;
  text-align: center;
  padding-bottom: 15px;
}

h2 {
  font-family: 'Merriweather', serif;
  font-size: 160%;
  font-weight: 400;
  word-spacing: 2px;
  text-align: center;
  margin-bottom: 20px;
  letter-spacing: 1px;
  word-spacing: 3px;
  padding-bottom: 15px;
}

h2:after {
  display: block;
  height: 2px;
  background-color: #d35400;
  content: " ";
  width: 150px;
  margin: 0 auto;
  margin-top: 10px;
}

h3 {
  font-family: 'Merriweather', serif;
  font-size: 140%;
  font-weight: 400;

}

h4 {
  font-family: 'Merriweather', serif;
  font-size: 120%;
  font-weight: 400;

}

h5 {
  font-family: 'Lato', sans-serif;
  font-size: 120%;
  font-weight: 400;
}

p {
  font-family: 'Lato', sans-serif;
  font-size: 100%;
  font-weight: 300;
  line-height: 120%;
  padding-bottom: 10px;
}

td {
  padding-top: 10px;
  padding-bottom: 10px;
}

a {
  color: #362b12;
}

li {
  margin-left: 40px;
}

/*-----------------------------------------
        VARIOUS TAGS
-----------------------------------------*/

.bold {
  font-weight: 700;
}

.italic {
  font-style: italic;
}

.center {
  text-align: center;
}

.left {
  text-align: left;
}

.right {
  text-align: right;
  align-content: right;
}

.roundCorner {
  border-radius: 25px;
}

.minHeight {
  min-height: 100vh;
}

.goldPulse {
  font-size: 120%;
  color: #bf8604;
}

.whitePulse {
  font-size: 120%;
  color: #fff;
}

/*---------- DIV WIDTHS -----------*/
.width90 {
  padding-left: 5%;
  padding-right: 5%;
}

.width80 {
  padding-left: 10%;
  padding-right: 10%;
}

.width70 {
  width: 100%;
  padding-left: 15%;
  padding-right: 15%;
}

.width60 {
  width: 100%;
  padding-left: 20%;
  padding-right: 20%;
}

.width50 {
  padding-left: 25%;
  padding-right: 25%;
}

.width40 {
  padding-left: 30%;
  padding-right: 30%;
}

/*-------- COLORS ---------*/
.lightBlue {
  color: #14f5f5;
}

.darkPurple {
  color: #003546;
  font-weight: 700;
}

.red {
  color: red;
}

.white {
  color: #fff;
}

.yellow {
  color: yellow;
}

/*------ ADDITIONAL SPACE ----------*/
.top10px {
  padding-top: 10px;
}

.top20px {
  padding-top: 20px;
}

.top30px {
  padding-top: 30px;
}

.bottom10px {
  padding-bottom: 10px;
}

.bottom20px {
  padding-bottom: 20px;
}

.bottom30px {
  padding-bottom: 30px;
}

.left20px {
  padding-left: 20px;
}

.left40px {
  padding-left: 40px;
}

/*-------- FONT SIZES -------*/
.p70 {
  font-size: 70%;
}

.p80 {
  font-size: 80%;
}

.p90 {
  font-size: 90%;
}

.p105 {
  font-size: 105%;
}

.p110 {
  font-size: 110%;
}

.p120 {
  font-size: 120%;
}

.merriweatherYellow110 {
  font-family: "Merriweather", serif;
  font-size: 110%;
  color: #fdfd00;
}

.merriweatherWhite110 {
  font-family: "Merriweather", serif;
  font-size: 110%;
  color: #fff;
}

/*------- IMAGE SIZES -----------*/
.pic20 {
  width: 20%;
  height: auto;
}

.pic30 {
  width: 30%;
  height: auto;
}

.pic40 {
  width: 40%;
  height: auto;
}

.pic50 {
  width: 50%;
  height: auto;
}

.pic60 {
  width: 60%;
  height: auto;
}

.pic70 {
  width: 70%;
  height: auto;
}

.pic80 {
  width: 80%;
  height: auto;
}

.pic90 {
  width: 90%;
  height: auto;
}

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

.pic110 {
  width: 110%;
  height: auto;
}

.pic120 {
  width: 120%;
  height: auto;
}

.video50 {
  width: 50%;
  margin-bottom: 30px;
}

.flierJPG {
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  border-color: #797c7c;
  border-style: ridge;
  border-width: 6px;
}

/* ---------------------------
/*      Section White
-----------------------------*/
.whiteSection {
  background-color: #fff;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  margin-top: 10px;
  padding-bottom: 30px;
  text-align: center;
}

.whiteSection h1 {
  color: #14071c;
}

.whiteSection h2 {
  color: #14071c;
}

.whiteSection h3 {
  color: #14071c;
}

.whiteSection h4 {
  color: #14071c;
}

.whiteSection p {
  color: #14071c;
}

.whiteSection a {
  color: #14071c;
}

.whiteSection td {
  color: #14071c;
}

/* ---------------------------
/*      Section Light
-----------------------------*/
.lightSection {
  background-color: #adeafe;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  margin-top: 10px;
  padding-bottom: 30px;
  text-align: center;
}

.lightSection h1 {
  color: #14071c;
}

.lightSection h2 {
  color: #14071c;
}

.lightSection h3 {
  color: #14071c;
}

.lightSection h4 {
  color: #14071c;
}

.lightSection p {
  color: #14071c;
}

.lightSection a {
  color: #14071c;
}

.lightSection td {
  color: #14071c;
}

/* ---------------------------
/*      Section Dark
-----------------------------*/
.darkSection {
  background-color: #003546;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-top: 10px;
  margin-top: 10px;
  padding-bottom: 30px;
}

.darkSection h1 {
  color: #fff;
}

.darkSection h2 {
  color: #fff;
}

.darkSection h3 {
  color: #fff;
}

.darkSection h4 {
  color: #fff;
}

.darkSection p {
  color: #fff;
}

.darkSection a {
  color: #fff;
}

.darkSection td {
  color: #fff;
}

/* ---------------------------
/*       PIC BORDERS
-----------------------------*/
.picBorderWhite {
  border-color: #fff;
  border-style: ridge;
  border-width: 6px;
  width: 90%;
  height: auto;
}

.picBorderBrown {
  color: #362b12;
  border-style: ridge;
  border-width: 6px;
  height: auto;
}

.picBorderAqua {
  border-color: #99ccff;
  border-style: ridge;
  border-width: 6px;
  width: 90%;
  height: auto;
}

.picBorderMaroon {
  border-color: #880505;
  border-style: ridge;
  border-width: 8px;
  width: 90%;
  height: auto;
}

.picBorderOrange {
  border-color: #e67e22;
  border-style: ridge;
  border-width: 6px;
  width: 90%;
  height: auto;
}

.picBorderGrey {
  color: #023d04;
  border-style: ridge;
  border-width: 6px;
  width: 90%;
  height: auto;
}

.picBorderGreen {
  color: #023d04;
  border-style: ridge;
  border-width: 6px;
}

.picBorderPurple {
  border-color: #a151d1;
  border-style: ridge;
  border-width: 6px;
  width: 90%;
  height: auto;
}

/*------------ ICONS --------------*/

.iconWhite30px {
  display: inline-block;
  /* width: 30px; */
  text-align: center;
  color: #fff;
  font-size: 120%;
  /* margin-right: 10px; */
}

.iconGreen30px {
  display: inline-block;
  width: 30px;
  text-align: center;
  color: #023d04;
  font-size: 120%;
  margin-right: 10px;
}

.iconMaroon30px {
  display: inline-block;
  width: 30px;
  text-align: center;
  color: #6b0202;
  font-size: 120%;
  margin-right: 10px;
}

.iconWhite300px {
  font-size: 300%;
  color: #fff;
}

/*------------------------------
         Lists
-------------------------------*/
.darkListItem {
  background-color: #003546;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  margin-bottom: 20px;
  border-radius: 25px;
  width: 90%;
}

.darkListItem a {
  margin-bottom: 10px;
  color: #fff;
}

.lightListItem {
  background-color: #adeafe;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 10px;
  margin-bottom: 20px;
  border-radius: 25px;
  width: 90%;
}

.lightListItem a {
  margin-bottom: 10px;
  color: #003546;
}

/*------- TABLES -------------*/
.table50 {
  width: 50%;
  margin-left: 25%;
  margin-right: 25%;
  border-spacing: 0px;
}

.table60 {
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
  border-spacing: 0px;
}

.table70 {
  width: 70%;
  margin-left: 15%;
  margin-right: 15%;
  border-spacing: 0px;
}

.table80 {
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
  border-spacing: 0px;
}

.table90 {
  width: 80%;
  margin-left: 5%;
  margin-right: 5%;
  border-spacing: 0px;
}

.tableRowGray {
  background-color: #e2dfdf;
  padding-top: 15px;
  padding-bottom: 15px;
  padding-left: 10px;
}

.tableRowWhite {
  background-color: #fff;
  padding-top: 10px;
  padding-bottom: 15px;
  padding-left: 15px;
}

/* ------- Animations ------------------- */
.Flash-4s {
  animation-duration: 0.75s;
  animation-delay: 0.5s;
  animation-iteration-count: 4;
  animation-name: flash;
  -webkit-text-decoration: underline #807979;
  text-decoration: underline #807979;
}

.Flash-2s {
  animation-duration: 2s;
  animation-delay: 0.5s;
  animation-iteration-count: 1;
  animation-name: flash;
  -webkit-text-decoration: underline #807979;
  text-decoration: underline #807979;
}

/*-------- BUTTONS --------------*/
.darkButton {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 10px;
  background-color: #033e4f;
  text-decoration: none;
  font-size: 90%;
  color: #fff;
  border-radius: 200px;
  width: 200px;
}

.darkButton:hover {
  background: #fccc60;
  color: #000;
}

.lightButton {
  display: inline-block;
  margin-top: 5px;
  margin-bottom: 5px;
  padding: 10px;
  background-color: #adeafe;
  text-decoration: none;
  font-size: 90%;
  color: #000;
  border-radius: 200px;
  width: 200px;
}

.lightButton a {
  color: #000;
}

.lightButton:hover {
  background: #fccc60;
  color: #000;
}

.goldButton {
  display: inline-block;
  margin-top: 15px;
  margin-bottom: 15px;
  padding: 5%;
  background: #bf8604;
  text-decoration: none;
  font-size: 90%;
  color: #fff;
  border-radius: 200px;
  width: 200px;
}

.goldButton:hover {
  background: #fccc60;
  color: #000;
}

.uploadFiles {
  text-align: center;
  margin-left: 20%;
}