@charset "UTF-8";

body {
    font-family: Cardo, serif;
    background: #fdfaea; 
    color: #000000;
    font-size: 16px;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -webkit-text-size-adjust: none;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility
}

body, html{
  height: 100%;
  margin:0;
  padding:0;
}
p {
	line-height: 1.65em;
	margin: 1em 0 1em 0;
}

h1 {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: bold;
}
h2 {
    font-family: 'Nunito Sans', sans-serif;
    font-weight: bold;
	color: #004d38;
}

h3, h4, h5, h6
{
    font-family: 'Nunito Sans', sans-serif;
    font-weight: regular;
    color: #004d38;
}
/*include the padding and border in an element's total width and height*/
* {
  box-sizing: border-box;
}

/* div classes */
/* Header */
.site-header {
	background-color: black; 
	padding: 0px; 
	margin 0px;
	border-bottom: 2px solid #999;
	}

.container{
  margin:0;
  padding:0;
}

.full-height {
height: 100%;
padding: 10px;
}

/* fix positions of menu bar divs at top and bottom of window */ 
.w3-top, .w3-bottom {
    position: fixed;
    width: 100%;
    z-index: 1
}

.w3-top {
    top: 0
}

.w3-bottom {
    bottom: 0
}

/* let bottom div float for mobile */
@media screen and (max-width: 600px) {
  .w3-bottom {
    position: relative; 
  }
}

.center {
display: flex;
margin-top: 0px;
padding: 10px;
align-content: center;
justify-content: center;
}


.spaceabove {padding-top: 50px; 
padding-bottom: 10px;

}

@media screen and (max-width: 992px) {
.spaceabove {padding-top: 20px; 
padding-bottom: 0px;
}
}
/* div names */
#topbar {background: #000000} 


#banner {padding: 0; 
margin-bottom: -10px
}

#navbar {
  overflow: hidden;
  background-color: black; 
  color: white; 
  margin: 0; 
  padding: 0
}

p.title {font-family: Times, serif; font-size: 36pt;}
p.display {font-family: 'Nunito Sans', sans-serif; font-size: 30pt }
p.sans {font-family:  'Nunito Sans', sans-serif; font-size: 12pt }
p.small {font-family:  'Nunito Sans', sans-serif; font-size: 10pt; }

/* Button */
.btn {
	font-family: 'Nunito Sans', sans-serif;
	font-size: 12pt;
	background-color: black;
	padding: 5px;
	margin-top: 0px;
	margin-left: 5px;
	margin-right: 5px;
	display: inline-block;
	border: 0;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	}

.btn:visited {
	color: #9fb3c6;
}

.btn:hover, .btn:focus {
  color: #ffe066;
  text-decoration: none;
}


/* Dropdown Button */
.dropbtn {
	font-family: 'Nunito Sans', sans-serif;
	font-size: 12pt;
	background-color: black;
	padding: 5px;
	display: block;
	border: 0;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	}

/* reduce font size and padding for mobile */
@media screen and (max-width: 992px) {
.dropbtn {font-size: 10pt;
padding: 2px}
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
  color: #ffe066;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
  display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: relative;
  background-color: black;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  font-family: 'Nunito Sans', sans-serif;
  color: #FFF;
  padding: 5px 5px;
  text-decoration: none;
  display: block;
}
@media screen and (max-width: 992px) {
.dropdown-content a {font-size: 10pt;
padding: 2px}
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {color: #ffe066;
text-decoration: none;}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

a:hover {text-decoration: underline;}


a.plain:link {color: white; text-decoration: none;}
a.plain:visited {color: white; text-decoration: none;}

/* Classes of link buttons with various colours */
a.b1:link {
	font-family: 'Nunito Sans', sans-serif;
	font-size: 12pt;
	background-color: black;
	padding: 10px;
	display: block;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	}

a.b1:visited {
	color: #9fb3c6;
		}
a.b1:hover {
	color: #ffe066;
	}

@media screen and (max-width: 992px) {
a.b1:link {font-size: 10pt;
padding: 2px}
}

/* Page content */
.content {
  padding: 16px;
}
a.ex1:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	background-color: #69C;
	padding: 10px;
	display: block;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	}
a.ex1:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	background-color: #69C;
	padding: 10px;
	display: block;
	color: #FFDEAD;
	text-decoration: none;
	text-align: center;
	}
a.ex1:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12pt;
	background-color: #336699;
	padding: 10px;
	display: block;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	}	
a.ex2:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	background-color: #669966;
	padding: 5px;
	display: block;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	}
a.ex2:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	background-color: #669966;
	padding: 5px;
	display: block;
	color: #FFDEAD;
	text-decoration: none;
	text-align: center;
	}
a.ex2:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	background-color: #336600;
	padding: 5px;
	display: block;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	}	
a.ex3:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	background-color: #999999;
	padding: 5px;
	display: block;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	}
a.ex3:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	background-color: #999999;
	padding: 5px;
	display: block;
	color: #FFDEAD;
	text-decoration: none;
	text-align: center;
	}
a.ex3:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	background-color: #666666;
	padding: 5px;
	display: block;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	}
a.ex4:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	background-color: #FFCC00;
	padding: 5px;
	display: block;
	color: #69C;
	text-decoration: none;
	text-align: center;
	}
a.ex4:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	background-color: #FFCC00;
	padding: 5px;
	display: block;
	color: #336699;
	text-decoration: none;
	text-align: center;
	}
a.ex4:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	background-color: #EFB402;
	padding: 5px;
	display: block;
	color: #69C;
	text-decoration: none;
	text-align: center;
	}
a.ex5:link {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	background-color: #336699;
	padding: 5px;
	display: block;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	}
a.ex5:visited {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	background-color: #336699;
	padding: 5px;
	display: block;
	color: #FFDEAD;
	text-decoration: none;
	text-align: center;
	}
a.ex5:hover {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 10pt;
	background-color: #003366;
	padding: 5px;
	display: block;
	color: #FFF;
	text-decoration: none;
	text-align: center;
	}		

/* iframe definition */
iframe.main {
frameborder:1px; 
width:100%; 
height:800px
}

/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

/* Add some top padding to the page content to prevent sudden quick movement (as the navigation bar gets a new position at the top of the page (position:fixed and top:0) */
.sticky + .content {
  padding-top: 60px;
}


a.pic1:link {
  color: black;
  padding: 15px 15px;
  width: 50%;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 21px;
  margin: 20px 20px;
  cursor: pointer;
}

@media screen and (max-width: 600px) {a.pic1:link {border-radius: 25px;
  background-image: url("EV_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  }
  }

a.pic1:visited {
color: #004d38;
}
a.pic1:hover{
  border-radius: 25px;
  background-image: url("EV_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  text-decoration: underline;
  
}
a.pic2:link {
  color: black;
  padding: 15px 15px;
  width: 50%;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 21px;
  margin: 20px 20px;
  cursor: pointer;
}

@media screen and (max-width: 600px) {a.pic2:link {border-radius: 25px;
  background-image: url("EH_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  }
  }

a.pic2:visited {
color: #004d38;
}
a.pic2:hover{
  border-radius: 25px;
  background-image: url("EH_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  text-decoration: underline;
  
}
a.pic3:link {
  color: black;
  padding: 15px 15px;
  width: 50%;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 21px;
  margin: 20px 20px;
  cursor: pointer;
}

@media screen and (max-width: 600px) {a.pic3:link {border-radius: 25px;
  background-image: url("NP_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  }
  }

a.pic3:visited {
color: #004d38;
}
a.pic3:hover{
  border-radius: 25px;
  background-image: url("NP_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  text-decoration: underline;
  
}
a.pic4:link {
  color: black;
  padding: 15px 15px;
  width: 50%;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 21px;
  margin: 20px 20px;
  cursor: pointer;
}

@media screen and (max-width: 600px) {a.pic4:link {border-radius: 25px;
  background-image: url("GE_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  }
  }

a.pic4:visited {
color: #004d38;
}
a.pic4:hover{
  border-radius: 25px;
  background-image: url("GE_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  text-decoration: underline;
  
}
a.pic5:link {
  color: black;
  padding: 15px 15px;
  width: 50%;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 21px;
  margin: 20px 20px;
  cursor: pointer;
}

@media screen and (max-width: 600px) {a.pic5:link {border-radius: 25px;
  background-image: url("JPS_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  }
  }

a.pic5:visited {
color: #004d38;
}
a.pic5:hover{
  border-radius: 25px;
  background-image: url("JPS_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  text-decoration: underline;
  
}
a.pic6:link {
  color: black;
  padding: 15px 15px;
  width: 50%;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 21px;
  margin: 20px 20px;
  cursor: pointer;
}

@media screen and (max-width: 600px) {a.pic6:link {border-radius: 25px;
  background-image: url("CCH_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  }
  }

a.pic6:visited {
color: #004d38;
}
a.pic6:hover{
  border-radius: 25px;
  background-image: url("CCH_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  text-decoration: underline;
  
}
a.pic7:link {
  color: black;
  padding: 15px 15px;
  width: 50%;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 21px;
  margin: 20px 20px;
  cursor: pointer;
}

@media screen and (max-width: 600px) {a.pic7:link {border-radius: 25px;
  background-image: url("OA_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  }
  }

a.pic7:visited {
color: #004d38;
}
a.pic7:hover{
  border-radius: 25px;
  background-image: url("OA_button.jpg");
  background-repeat: no-repeat;
  text-decoration: underline;
  
}
a.pic8:link {
  color: black;
  padding: 15px 15px;
  width: 50%;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 21px;
  margin: 20px 20px;
  cursor: pointer;
}

@media screen and (max-width: 600px) {a.pic8:link {border-radius: 25px;
  background-image: url("Hist_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  }
  }

a.pic8:visited {
color: #004d38;
}
a.pic8:hover{
  border-radius: 25px;
  background-image: url("Hist_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  text-decoration: underline;
  
}
a.pic9:link {
  color: black;
  padding: 15px 15px;
  width: 50%;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 21px;
  margin: 20px 20px;
  cursor: pointer;
}

@media screen and (max-width: 600px) {a.pic9:link {border-radius: 25px;
  background-image: url("SS_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  }
  }
a.pic9:visited {
color: #004d38;
}
a.pic9:hover{
  border-radius: 25px;
  background-image: url("SS_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  text-decoration: underline;
  
}

a.pic10:link {
  color: black;
  padding: 15px 15px;
  width: 50%;
  max-width: 300px;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 21px;
  margin: 20px 20px;
  cursor: pointer;
}

@media screen and (max-width: 600px) {a.pic10:link {border-radius: 25px;
  background-image: url("PP_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  }
  }

a.pic10:visited {
color: #004d38;
}
a.pic10:hover{
  border-radius: 25px;
  background-image: url("PP_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  text-decoration: underline;
  
}
a.pic11:link {
  color: black;
  padding: 15px 15px;
  width: 50%;
  max-width: 300px;
  font-family: 'Nunito Sans', sans-serif;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 21px;
  margin: 20px 20px;
  cursor: pointer;
}

@media screen and (max-width: 600px) {a.pic11:link {border-radius: 25px;
  background-image: url("WW_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  }
  }

a.pic11:visited {
color: #004d38;
}
a.pic11:hover{
  border-radius: 25px;
  background-image: url("WW_button.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  text-decoration: underline;
  
}

#sidebar {
float: left;
width: 200px;
padding: 10px;
}
#mainContent {
margin: 0 0 0 250px;
}

.fltlft { /* this class can be used to float an element left in your page */
	float: left;
	margin-right: 8px;
}
.clearfloat { /* this class should be placed on a div or break element and should be the final element before the close of a container that should fully contain a float */
	clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
}
img {
  max-width:100%;
  
  }


/* Background */
.bgimg-1 {
  background-color: #9fb3c6;
  }

/* add image for larger screen*/
@media screen and (min-width: 600px) {
  .bgimg-1 {
  background-position: center;
  background-size: cover;
  background-image: url("beach.jpg");
  min-height: 60%;
	}
}

.bgimg-2 {
background-position: center;
  background-size: cover;
  background-image: url("EV banner.jpg");
  max-height: 40%;
  }

/* Containers for flexboxes */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
}

.flex-item-left {
  flex: 75%;
  
}
.flex-item-right {
  flex: 25%;
}

/* Responsive layout - makes right hand column larger */
@media (max-width: 992px) {
  .flex-item-left {
    flex: 60%;
  }
  .flex-item-right {
    flex: 40%;
	}
}

/* Responsive layout - makes a one column layout (100%) instead of a two-column layout (50%) */
@media (max-width: 600px) {
  .flex-item-right, .flex-item-left {
    flex: 100%;
  }
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.menurow {
  display: flex;
  flex-wrap: wrap;
  }
  
.box {
  display: flex;
  justify-content: space-between;
}

/* Create three equal columns */
.column-3 {
  display: flex;
  flex: 33.3%;
  padding: 0px;
  flex-direction: row;     /* make main axis horizontal (default setting) */
  justify-content: center; /* center items horizontally, in this case */
  align-items: center;     /* center items vertically, in this case */
  
}
/* On screens that are 992px wide or less, go from four columns to two columns */
@media screen and (max-width: 992px) {
  .column-3 {
    flex: 50%;
  }
}  

/* Create five equal columns */
.column-5 {
display: flex;
  flex: 20%;
  padding: 0px;
  flex-direction: row;     /* make main axis horizontal (default setting) */
  justify-content: center; /* center items horizontally, in this case */
  align-items: center;     /* center items vertically, in this case */
  
}

  /* On screens that are 992px wide or less, go from five columns to three columns */
@media screen and (max-width: 992px) {
  .column-5 {
    flex: 33.3%;
  }

}
  /* On screens that are 600px wide or less, go from five columns to two columns */
@media screen and (max-width: 600px) {
  .column-5 {
    flex: 50%;
  }

}

/* Create six equal columns */
.column-6 {
display: flex;
  flex: 16.6%;
  padding: 00px;
  flex-direction: row;     /* make main axis horizontal (default setting) */
  justify-content: center; /* center items horizontally, in this case */
  align-items: center;     /* center items vertically, in this case */
  
}

  /* On screens that are 992px wide or less, go from six columns to three columns */
@media screen and (max-width: 992px) {
  .column-6 {
    flex: 33.3%;
  }

}
  /* On screens that are 600px wide or less, go from six columns to two columns */
@media screen and (max-width: 600px) {
  .column-6 {
    flex: 50%;
  }

}


.cover-pic {
margin-right: 20px;
float: left;
}

@media screen and (max-width: 992px) {
  .cover-pic {
    margin-right: 200px;
  }

}