/* CSS Document */

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url('https://fonts.googleapis.com/css?family=Handlee');
@import url('https://fonts.googleapis.com/css?family=Sedgwick+Ave');
@import url('https://fonts.googleapis.com/css?family=Days+One');

html, body {
  height: 100%;
}


body {
  background: #AAB0EA;
  margin: 0px;
  font-size: 22px;
  line-height: 1.2em;
  color: #111111;
  word-wrap: break-word !important;
  font-family: 'Open Sans', sans-serif;
}

h1, h3, h4 {
  padding-top: 0.5em;
  text-align:center;
  line-height: 1.1em;
}

h1 {
  font-size: 2em;
}

h3 {
  font-size: 1.5em;
}

h4 {
  font-size: 1.2em;
  text-align: left;
  margin-bottom: 0;
}

h3 a {
  color: #FFF;
}

a {
  color: rgba(83, 77, 222, 1);
}

p:last-child {
  margin-bottom: 25px;
}

table {
	margin: auto;
	margin-bottom: 20px;
}

th, td {
  border-bottom: solid 1px grey;
  border-right: solid 1px grey;
  padding: 5px;
}

th {
  background: rgba(255, 255, 255, 0.8);
}

td {
  background: rgba(255, 255, 255, 0.5);
}

td img {
	vertical-align: middle;
}

.rowSpacer {
  line-height: 0.8em;
}

.invisibleCell {
  background: none;
  border: none;
}

.blockQuote {
  font-family: 'Handlee', cursive;
  font-size: 1.3em;
  line-height: 1.1em;
	margin: 10px;
	padding: 10px;
	background: rgba(255, 255, 255, 0.8);
}

.sensibleFont {
  font-family: 'Open Sans', 'sans serif';
  font-size: 1.1em;
}

.funFont {
  font-family: 'Sedgwick Ave', 'cursive';
  font-size: 1.4em;
  line-height: 1.1em;
  color: rgba(83, 77, 222, 1);
  text-align: center;
}

.blockQuote span {
	display: block;
	font-size: 0.9em;
	color: rgba(83, 77, 222, 1);
	text-align: right;
}

.mySlides {
	display: none;
	width: 100%;
}

.mySlideText {
	width: 100%;
	display: none;
	position: absolute;
  font-family: 'Handlee', 'cursive';
  font-size: 2em;
  line-height: 2em;
  color: white;
	text-align: right;
	bottom: 0em;
	right: 1em;
}

.headingFlexContainer {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.headingLogoImage {
  flex: none;
  padding: 0.5em;
}

.headingLogoImage img {
  height: 4em;
}

.headingText {
  color: white;
  font-size: 1.75em;
  text-align: left;
/*  font-family: 'Bitter', 'serif'; */
  line-height: 1.1em;
}

.subHeadingText {
  color: darkblue;
  font-size: 1.5em;
  text-align: left;
  line-height: 1.1em;
  margin-top: 0.5em;
}

.noticeBanner {
	background: rgba(255, 255, 255, 0.8);
  color: rgb(200, 8, 8);
  font-size: 1.2em;
  text-align: center;
  line-height: 1.2em;
  margin: 0.5em;
  padding: 0.5em;
}

.mainContainer {
	height: 100%;
  display: flex;
  flex-direction: column;
}

.mainHeaderBlock {
	background: #233985;
}

.envDisplayRow {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
}

.commDisplayRow {
  display: block;
  text-align: center;
}

.envPhotoColumn {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: space-between;
}

/* Does nothing by default, updated by media query as needed */
.envColumnControl {
	
}

.envContainer {
/*  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;*/
}

.envPanel {
  margin: 20px auto;
  padding: .75em;
  background: rgba(235, 235, 255, 0.8);
  border: solid 2px grey;
  border-radius: 5px;
  overflow: hidden;
}

.envTitle {
  display: inline;
  color: blue;
  font-weight: bold;
}

.envImage {
  width: 40%;
}

.envImagePanel {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-evenly;
  align-items: center;
}

.envImageFlex {
  width: 200px;
  height: auto;
  box-shadow: 5px 5px 3px #4a5fa8;
  margin: 10px;
  
}

.envImageRotate-m10-deg {
  transform: rotate(-10deg);
}

.envImageRotate-m7-deg {
  transform: rotate(-7deg);
}

.envImageRotate-m3-deg {
  transform: rotate(-3deg);
}

.envImageRotate-10-deg {
  transform: rotate(10deg);
}

.envImageRotate-7-deg {
  transform: rotate(7deg);
}

.envImageRotate-3-deg {
  transform: rotate(3deg);
}


.envFloatRight {
  float: right;
  margin-left: 10px;
}

.envFloatLeft {
  float: left;
  margin-right: 10px;
}

.floatingImage {
	display: block;
	width: 40%;
	margin-top: 22px;
}

.floatRight {
  float: right;
  margin-left: 10px;
}

.floatLeft {
  float: left;
  margin-right: 10px;
}

.mainContent {
  flex: 1 0 auto;
	background: #f7f6f0;
	margin-top: 2%;
	margin-bottom: 2%;
  margin-left: 10%;
  margin-right: 10%;
  text-align: left;
  padding-left: 2em;
  padding-right: 2em;
  border: 1px solid black;
}

.galleryContent {
	text-align: center;
}

.footer {
  background: #233985;
  font-size: 0.6em;
  color: #cccccc;
  padding: 1.2em;
}

.footer a {
	color: yellow;
}

nav {
  z-index: 500;
  margin: 0;
  width: 100%;
  background-color: #1C2D68;
/*  position: fixed; */
  top: 0px;
}

nav ul {
  display: flex;
  justify-content: center;
	padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}
  
nav ul li {
  z-index: 500;
	display:inline-block;
  background: #1C2D68;
  padding-right: 1em;
}

nav a {
  display:block;
  padding:0 10px; 
  color:#eeeeee;
  font-size: 1em;
  line-height: 1.5em;
  text-decoration:none;
}

nav a:hover { 
  background-color: #6060ff; 
}

/* Hide Dropdowns by Default */
nav ul ul {
  display: none;
  position: absolute; 
  top: 1.5em; /* the height of the main nav */
}
  
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
  display:inherit;
}
  
/* First Tier Dropdown */
nav ul ul li {
  min-width: 200px;
  min-height: 1.75em;
  float: none;
  display: list-item;
  position: relative;
  background-color: #1C2D68; 
}

/* Second, Third and more Tiers */
nav ul ul ul li {
  position: relative;
  top:-60px; 
  left:170px;
}

  
/* Change this in order to change the Dropdown symbol 
li > a:after { content:  ' <i class="fa fa-angle-down" aria-hidden="true"></i>'; }
li > a:only-child:after { content: ''; }
*/

#google-map {
	width: 600px;
	height: 450px;
}

.videoContainer {
	align: center;
}

/* Adjust everything for small screens */
@media screen and (max-width: 720px) {
   body {
       font-size: 18px;
   }

   .headingText {
     font-size: 1.5em;
   }
    .headingLogoImage {
      padding: 0.2em;
    }
    
    .headingLogoImage img {
      height: 2em;
    }
    
    .mainContent {
      margin-left: 5%;
      margin-right: 5%;
      padding-left: 0.7em;
      padding-right: 0.7em;
    }
    
	.mySlideText {
	  font-size: 1.5em;
	  line-height: 1.5em;
	  right: 0.5em;
	}
    
    .headingText {
      font-size: 1.5em;
    }
        
	/* To make embedded YouTube videos responsive */
	.videoContainer {
	  position: relative;
	  padding-bottom: 56.25%;
	  padding-top: 30px;
	  height: 0;
	  overflow: hidden;
	}
	
	.videoContainer iframe,
	.videoContainer object,
	.videoContainer embed {
	  position: absolute;
	  top: 0;
	  left: 0;
	  width: 100%;
	  max-width: 560px;
	  height: 100%;
	}
	
	#google-map {
	  width: 400px;
	  height: 300px;
	}
	
}

@media screen and (max-width: 480px) {
    body {
        font-size: 14px;
    }
    
    nav ul {
		  justify-content: space-between;
    }
    
    nav a {
		  padding:0 5px; 
		  font-size: 0.8em;
		  line-height: 1.1em;
		}

  	.mainContent {
  	  margin-left: 4%;
      margin-right: 4%;
      padding-left: 0.5em;
      padding-right: 0.5em;
  	}

	  #google-map {
	    width: 200px;
	    height: 150px;
	  }

}


/* Reduce the size of the photos for medium-sized screens */
@media screen and (max-width: 1200px) {
  .envImageFlex {
    width: 150px;
  }
}

/* Reduce the size further, and remove the right hand column */
@media screen and (max-width: 900px) {
  .envImageFlex {
    width: 110px;
  }
  .envColumnControl {
    display: none;
  }
}

/* Switch to vertically stacked for small screens */
@media screen and (max-width: 480px) {
  .envImageFlex {
    width: 100px;
  }
  .envDisplayRow {
    flex-wrap: wrap;
  }
  .envPhotoColumn {
    display: block;
    text-align: center;
  }
}