/* IMPORTED FONTS */

@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');


/* START FLEXBOX MULTI COLUMN -------------------------------------------- */

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  background: #21522C;
  font-family: 'Fira Sans', sans-serif;
}

section {
  width: 90%;
  height: auto;
  margin: 0 auto;
  display: flex;
}

@media print {
    .pagebreak {
        clear: both;
        page-break-after: always;
    }
}

.white_column {
  margin: .5%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  position: relative;
  background-color: #FFFFFF;
  padding-top: .5vw;
  padding-left: 2vw;
  padding-bottom: .5vw;
  padding-right: 2vw; 
  height: auto;
  overflow: hidden;
  font-size: clamp(16px, 1.25vw, 22px);
  color: #000000);
}


.orange_column {
  margin: .5%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  position: relative;
  background-color: #FF6600;
  padding: .5rem;
  height: auto;
  overflow: hidden;
  font-size: clamp(16px, 1.25vw, 22px);
  color: #FFFFFF;
}

.green_column {
  margin: .5%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  position: relative;
  background-color: #039938;
  padding: .5rem;
  height: auto;
  overflow: hidden;
  font-size: clamp(16px, 1.25vw, 22px);
  color: #FFFFFF;
}

.green_column_25 {
  margin: .5%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  position: relative;
  background-color: #039938;
  padding: .5rem;
  height: auto;
  max-width: 25%;
  overflow: hidden;
  font-size: clamp(16px, 1.25vw, 22px);
  color: #FFFFFF);
}

.green_column_75 {
  margin: .5%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  position: relative;
  background-color: #039938;
  padding-top: .5vw;
  padding-left: 4vw;
  padding-bottom: .5vw;
  padding-right: 4vw; 
  height: auto;
  overflow: hidden;
  font-size: clamp(16px, 1.25vw, 22px);
  color: #FFFFFF;
}

.white_header_left {
  margin: .5%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  position: relative;
  background-color: #FFFFFF;
  padding: .5rem;
  max-width: 25%;
  height: auto;
  overflow: hidden;
  font-size: clamp(16px, 1.25vw, 22px);
  color: #000000);
}

.green_header_left {
  margin: .5%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  position: relative;
  background-color: #039938;
  padding: .5rem;
  max-width: 25%;
  height: auto;
  overflow: hidden;
  font-size: clamp(16px, 1.25vw, 22px);
  color: #000000);
}

.white_header_right {
  margin: .5%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  position: relative;
  background-color: #FFFFFF;
  padding: .5rem;
  height: auto;
  overflow: hidden;
  font-size: clamp(18px, 1.75vw, 22px);
  color: #000000);
}

.orange_header_right {
  margin: .5%;
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 0;
  position: relative;
  background-color: #FF6600;
  padding: .5rem;
  height: auto;
  overflow: hidden;
  font-size: clamp(20px, 2vw, 24px);
  color: #FFFFFF);
}


/* END FLEXBOX MULTI COLUMN -------------------------------------------- */

a:link {
	color: #00FFFF;
	font-weight: bold;
	text-decoration: none;
}
a:visited {
	text-decoration: none;
	font-weight: bold;
	color: #21522C;
}
a:hover {
	text-decoration: underline;
	font-weight: bold;
	color: #000FFF;
}
a:active {
	text-decoration: none;
	font-weight: bold;
	color: #21522C6;
}

p {
  font-family:'Fira Sans', sans-serif;
  font-size: clamp(16px, 1.25vw, 22px);
}

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

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

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


.bold_green_text {
	color: #21522C;
	font-weight: bold;
	font-size: 3vw;
}

.large_green {
     color: #039938;
	 font-size: clamp(20px, 1.75vw, 24px);
	 font-family: 'Fira Sans', sans-serif;
	 font-weight: 600;
}

.large_orange {
     color: #FF6600;
	 font-size: clamp(20px, 2vw, 24px);
	 font-family: 'Fira Sans', sans-serif;
	 font-weight: 600;
}

.extra_large_orange {
     color: #FF6600;
	 font-size: 4vw;
}

.container {
	position: relative;
	max-width: 1600px;
	width: auto;
	height: auto;
	padding: 1vw;
	background-color: #FFFFFF;
	margin-top: .3vw;
	margin-right: auto;
	margin-bottom: 0vw;
	margin-left: auto;
	font-family: 'Fira Sans', sans-serif;
	font-weight: 400;
	font-size: clamp(16px, 1.25vw, 22px);
	color: #FFFFFF;
}

.header {
	height: auto;
	width: 100%;
	background-color: #FFFFFF;
	font-family: font-family: 'Fira Sans', sans-serif;
	font-size: clamp(16px, 1.25vw, 22px);
	color: #FF6600;
	border-top: none;
	border-bottom: .4vw solid #039938;
	border-left: none;
	border-right: none;
	
}

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

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

.fluid_green_div {
    margin: .5%;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
	color: #FFFFFF;
	background: #039938;
	align: left;			/* SQUARE CORNERS LEFT JUSTIFIED */
	width: auto;
	height: auto;
	padding: .5vw;
}

.fluid_orange_div {
    margin: .5%;
    flex-grow: 1;
    flex-shrink: 1;
    flex-basis: 0;
	color: #FFFFFF;
	background: #FF6600;
	align: left;			/* SQUARE CORNERS LEFT JUSTIFIED */
	width: auto;
	height: auto;
	padding: .5vw;
}

.fluid_white_div{
	color: #000000;
	background: #FFFFFF;
	align: left;				/* SQUARE CORNERS LEFT JUSTIFIED */
	width: auto;
	height: auto;
	padding: .5vw;
}


/* START RESIZE IMAGES ---------------- */

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

.button {
  background-color: #00FF66;
  border: solid;
  color: #000000;
  padding: .5vw;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 1.2vw;
  margin: .1vw;
  cursor: pointer;
}


/* Create two unequal columns that floats next to each other */
* {
  box-sizing: border-box;
}

.column5050 {
  float: left;
  padding: 1vw;
  height: auto;
}

.left {
  width: 40%;
  height: auto;
	color: #FF6600;
	text-align: center;
	background: #FFFFFF
}

.right {
  width: 60%;
  height: auto;
	color: #FF6600;
	text-align: center;
	background: #FFFFFF
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}


/*START 3 COLOUMNS --------------------------*/
/* Create three equal columns that floats next to each other */

.column3 {
	float: left;
	width: 30%;
	padding: 1vw;
	margin-left: 1vw;
	margin-right: 1vw;
	height: auto;
	color: #FFFFFF;
	text-align: center;
	background: #FF6600;
}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column3 {
    width: 100%;
  }
/* END 3 COLUMNS -----------------------------*/



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

form {
  max-width: 550px;
  padding: 1rem;
  margin: 0 auto;
}

input, textarea {
  width: 100%;
  padding: .5rem;
  border: 1px solid silver;
}
input[type=submit] {
  padding: .5rem;
  border-radius: 5px;
  background-color: transparent;
  cursor: pointer;
}

label, small {
  font-size: small;
}

/* END CONTACT FORM -------------------------------------------- */