* {
  box-sizing: border-box;
}

body { width: 100%; max-width: 1300px; margin-left:auto;  margin-right:auto; font-size: 16px;  font-family: "Montserrat Alternates", sans-serif;  color: #032b5b;  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;  border-left: 10px solid white; border-right: 10px solid white;}

				bodyOLD2 { width: 100%; max-width: 1300px; margin-left:auto;  margin-right:auto; font-size: 16px;  font-family: Arial, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica,  "sans-serif";  color: #032b5b; background-image: url("../images/backdrop5.png");  
				  background-attachment: fixed; background-position: top;  image-rendering: pixelated;
				  -ms-interpolation-mode: nearest-neighbor; border-left: 10px solid white; border-right: 10px solid white; }

				bodyOLD { width: 100%; max-width: 1300px; margin-left:auto;  margin-right:auto; font-size: 16px; padding-left: 10px; padding-right: 10px; font-family: Arial, "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica,  "sans-serif";  color: #032b5b; background-image: url("../images/backdrop4b.png"); }

/* site logos etc */
.header { margin: 0px auto 0px auto; padding-bottom: 17px; height: 70px; border-bottom: 10px solid white; }

#headertextLEFT {float: left;  max-width: 728px; }
#headertextLEFT2 {float: left;  max-width: 728px; }
#headertextLEFT3 {float: left;  max-width: 728px; }
.headertextphotobar img {width: 100%; height: auto;}

#headertextRIGHT {FLOAT: right; WIDTH: 210px; POSITION: relative; }
#headertextRIGHT2 {FLOAT: right; WIDTH: 210px; POSITION: relative; padding-bottom: 10px; padding-left: 5px}

.headertext { WIDTH: 100%; POSITION: relative; text-align:left; padding: 0px 0px 0px 0px;border: none; }

/* Top navigation bar */
.navbar { border-radius: 15px; BACKGROUND: #494696; padding: 10px; text-align: center; clear: both; color: white; font-size: 20px;}

/* Navigation bar links */
.navbar a { color: white;  text-decoration: none; }


/* Change color on hover */
.navbar a:hover { text-decoration: underline; }
/* navigation photo */
.photobar {  padding-bottom: 12px; padding-top: 12px; clear: both;}

.photobar img {border-radius: 15px; width: 100%; height: auto; }

myRandomImage

#teampic {FLOAT: right; WIDTH: 130px; POSITION: relative;  }
#teampic2 {FLOAT: right; WIDTH: 1000px; POSITION: relative; font-size: 20px;}

/* report card menu */
#reportcardLEFT {border-radius: 15px;FLOAT: left; WIDTH: 205px; POSITION: relative;  background-color: #dad8ed; padding: 5px 5px 5px 10px;}
#reportcardLEFT2 { FLOAT: left;  border-right: 10px solid white; border-bottom: 10px solid white;}

#reportcardRIGHT {border-radius: 15px;FLOAT: left; WIDTH: 205px; POSITION: relative;  background-color: #dad8ed; padding: 5px 5px 5px 10px; }

#reportcardcolumns {FLOAT: left; padding-left: 5px;}
#reportcardcolumns2 {FLOAT: left; padding: 5px 0px 0px 5px; }

#report1 { font-size: 40px; font-weight:bold; color: #032b5b; line-height: 0.9; letter-spacing: 4px;}
#report1a { font-size: 40px; font-weight:bold; color: #032b5b; line-height: 0.9; letter-spacing: 2px;}
#report1b { font-size: 40px; font-weight:bold; color: #032b5b; line-height: 0.9; letter-spacing: -2px;}
#report2 { font: 22px ; font-stretch: condensed; font-weight:bold; color: #032b5b}
#reportcardcolumns2 a { color: white;  text-decoration: none; }
#reportcardcolumns2 a:hover { color: #032b5b;  text-decoration: underline; }

.reportcardmenu { WIDTH: 100%; POSITION: relative; text-align:left; padding: 0px 0px 0px 0px; border: none; }


.main {  font-size: 16px; color: #032b5b;  padding: 2px 0px 10px 0px; clear: both; background-color: #fff;}
.main a {text-decoration: none; }
.main a:hover { text-decoration: underline; }

.fullheader {background-color: #fff;}

/* featured box */
.featureboxhomepage {border-radius: 15px; background: #dad8ed;  color: #032b5b; padding: 20px 20px 10px 20px; min-height:101px;}
.GLreportcardcolumns3 {FLOAT: left; padding-left: 5px;  min-width: 100px; padding-right: 16px;}
.GLreportcardcolumns4 {FLOAT: left; padding: 5px 0px 0px 5px; padding-left: 16px; padding-top: 10px; background: #e3aaaa; width:80%;}
#GLreport1 { font-size: 24px; font-weight:bold; color: #032b5b; line-height: 1.2; }

.featurebox {border-radius: 15px; background: #dad8ed;  color: #032b5b; padding: 20px 20px 5px 20px;}

/* bottom navigation bar */
.footerbar { text-align: center; color: #032b5b; padding: 10px; clear: both; background-color: #fff;  }

.footerbar a { color: #032b5b ; text-decoration: none; }
.footerbar a:hover { text-decoration: underline; }

div.flex-container {
  display: flex;
  flex-direction: row;
}


div.flex-container > div {
  margin: 10px;
	min-width: 33%;
}



ul li { line-height: 26px !important; }

div.flex-container2 {
  display: flex;
  flex-direction: row;
}


div.flex-container2 > div {
  margin: 10px;
	min-width: 10%;
}

/* Use media query and show the flex items vertically if screen width is less than 740px */

@media only screen and (min-width : 941px) and (max-width : 1999px) {
 /* For mobile phones: */
	.body, .fullheader, .main {
    width: 1280px; 
  }

	#headertextRIGHT2, #headertextLEFT2, #headertextLEFT3 {display: none;},
	
	

}

@media only screen and (min-width : 741px) and (max-width: 940px) {
  /* For mobile phones: */
  .main, #headertextRIGHT2, #teampic, #teampic2 {
    width: 100%; border-right: 0px
  }
	 #headertextRIGHT, #headertextLEFT2, #headertextLEFT3 {display: none;},
	
	 div.flex-container {
    flex-direction: column;
  }
	 div.flex-container2 {
    flex-direction: column;
  }
}

@media only screen and (min-width : 641px) and (max-width: 740px) {
  /* For mobile phones: */
  .main, #headertextRIGHT2, #teampic, #teampic2 {
    width: 100%; border-right: 0px
  }
	.navbar { BACKGROUND: #494696; padding: 10px; text-align: center; clear: both; color: white; font-size: 20px;}


	 #headertextRIGHT, #headertextLEFT, #headertextLEFT3 {display: none;}
	 div.flex-container {
    flex-direction: column;
  }
	 div.flex-container2 {
    flex-direction: column;
  }
}

@media only screen and (max-width: 640px) {
  /* For mobile phones: */
  .main, #headertextRIGHT2, #teampic, #teampic2 {
    width: 100%; border-right: 0px
  }
	.navbar { BACKGROUND: #494696; padding: 10px; text-align: center; clear: both; color: white; font-size: 16px;}


	 #headertextRIGHT, #headertextLEFT, #headertextLEFT2 {display: none;}
	 div.flex-container {
    flex-direction: column;
  }
	 div.flex-container2 {
    flex-direction: column;
  }
}