body,html {
 /*root font-size: 16px;*/
  /*line-height: 1rem;*/
  height: 100%;
  /*font-family: arial, sans-serif;*/
  font-size: 16px;
}

*box-sizing{
  border-box;
   }

body {
margin: 0;
padding: 0;
overflow-x: hidden;
}

h1,
h2,
h3,
h4 {
text-align: center;
font-family: georgia, sans-serif;
font-weight: 500;
}


h1 {
  font-size: 2rem; /* 48px/16=2.5em */
}
h2 {
  font-size: 1.75rem; /*40px/16=1.875em */
}
h3 {
    font-size: 1.5rem; /*32px/16=1.875em */
}
h4 {
  font-size: 1.25rem; /*24px/16=1.875em */
}

a:link {
  color: #0808f3;
  background-color: transparent;
  text-decoration: none;
}
a:active {
  color: #0808f3;
  background-color: transparent;
  text-decoration: none;
}
a:visited {
  color: #0808f3;
  background-color: transparent;
  text-decoration: none;
}
a:hover {
  color: red;
  background-color: transparent;
  text-decoration: none;
}

p {
font-family: 'Roboto', sans-serif;
text-align: left;
}

/* FIXED -- TOP NAV BAR AREA  -  FIXED -- TOP NAV BAR AREA */
/* FIXED -- TOP NAV BAR AREA  -  FIXED -- TOP NAV BAR AREA */

/* 70PX HIGH FILLER COLOR BAR */ 
/* SITS HIDDEN UNDER NAV BAR */
.color-bar {
  background-color: #a8b12f;
  width: 100%;
  height: 67px;
   }

/* Fix Position of Nav Bar at top of Page */
.fixed-navigation-bar {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  margin: 0 auto;
  height: 70px;
   }

/* Add a background color to the top navigation */
.topnav {
  background-color: #00067c;
  overflow: hidden;
}

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

/* Add an active class to highlight the current page */
.active {
  background-color: #04AA6D;
  color: white;
}

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

/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 20px;
  border: none;
  outline: none;
  color: white;
  padding: 20px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color: #555;
  color: white;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

/* 70PX TOPIC HEADER BAR */ 
/* 70PX TOPIC HEADER BAR */  
.header{
    background-color: #08084e;
    width: 100%;
    text-align: center;
    font-family: Georgia, serif;
    font-size: 2.5rem;
    color: #ffffff;
    padding: 20px 0px 20px 0px;
}
/*  SCHOOL  PAGE  STYLING */
/*  SCHOOL  PAGE  STYLING */
div.gallery {
  border: 1px solid #ccc;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 99%;
  height: 200px;
}

div.desc {
  padding: 15px;
  text-align: center;
}
/* -------------
* {
  box-sizing: border-box;
}  ------*/

.responsive-school {
  padding: 0 6px;
  float: left;
  width: 24%;
}

@media only screen and (max-width: 700px) {
  .responsive-school {
    width: 49%;
    
    margin: 6px 0;
  }
}

@media only screen and (max-width: 500px) {
  .responsive-school {
    width: 100%;
  }
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}  












/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
  float: left;
  width: 30%;
  padding: 25px;
}

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

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.img-bar-left{
  width: 20%;
  background-color: #ffffff;
  height: 80px;
  float: left;
}
.img-bar-center{
  width: 60%;
  background-color: #ffffff;
  height: 80px;
  float: left;
}
.img-bar-right{
  width: 20%;
  background-color: #ffffff;
  height: 80px;
  float: left;
}

.title-left{
width: 20%;
background-color: #ffffff;
height: 40px;
float: left;
}

.title-center{
  background-color: #ffffff;
  width: 60%;
  text-align: center;
  color: #000000;
  padding: 10px 0px 10px 0px;
  float: left;
}

.title-right{
width: 20%;
height: 40px;
float: left;
background-color: #ffffff;
}

.chapters{
  width: 50%;
  margin: 0 auto;
  font-size: .75rem;
  font-weight: 100;
  text-align: left;
  line-height: 1rem;
  /*background-color: lightblue;*/
  }

/* ENDTIME DOCUMENT  TEXT  AREA*/ 
/* ENDTIME DOCUMENT  TEXT  AREA*/
.document{
  width: 60%;
  margin: 0 auto;
  font-family:'Roboto', sans-serif;
  font-size: 1.25rem;
  text-align: left;
  line-height: 1.75rem;
  }

  /* IMAGE STYLING FOR TEXT-AREA */
  /* IMAGE STYLING FOR TEXT-AREA */
  .responsive {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 60%;
   } 
  .responsive2 {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 40%;
   } 
/* FOOTER - STYLING  FOR  DOCUMENT-PAGE  */
/* FOOTER - STYLING  FOR  DOCUMENT-PAGE  */
   .document-footer {
    width: 100%;
    background-color: #08084c;
    font-family: "Times New Roman", serif;
    font-weight: 100;
    font-size: 1.25rem;
    color: #ffffff;
}

/*MEDIA  QUERIES  FOR   WEB-PAGE*/  
/*MEDIA  QUERIES  FOR   WEB-PAGE*/  

/*MEDIA  QUERIES  FOR  NAVIGATION   BAR*/
/*MEDIA  QUERIES  FOR  NAVIGATION   BAR*/

/* PORTRAIT IPHONE  600PX & DOWN - tomato- When the screen is less than 600 pixels wide, 
hide all links, except for the first one ("Home"). Show the link
 that contains should open and close the topnav (.icon) */
@media only screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  /* Hamburger Menu Icon*/
  .topnav a.icon {
    float: right;
    display: block;
  }
}
/* PORTRAIT IPHONE  - MAX-WIDTH 600PX & DOWN   tomato */
/* The "responsive" class is added to the topnav with JavaScript 
when the user clicks on the icon. This class makes the topnav look 
good on small screens (display the links vertically instead of horizontally) */
@media only screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive a.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
  p {
  font-size: 1rem;
  }
  .title-left{
    display: none;
    }
    .title-center{
      background-color: #ffffff;
      width: 100%;
      text-align: center;
      font-size: 1.5rem;
      /*font-weight: bold;*/
      color: #000000;
      padding: 20px 0px 20px 0px;
      /*float: left; */
    }
    .title-right{
      display: none;
    }
  .document{
    width: 90%;
    /*background-color:tomato;*/
    margin: 0 auto; 
    font-size: 1.5rem;
    text-align: left;
    line-height: 1.5rem;
   }
   .chapters { 
    width: 90%;
    margin: 0 auto;
    font-size: 10px;
    text-align: left;
    line-height: 1rem;
}
  .div-content{
    float: none;
  }
  .navigation-bar li {
    list-style-type: none;
    display: none;
    }
/* TEXT WITH  IMAGES */
.responsive {
  width: 75%;
    }    
.responsive2 {
  width: 75%;
} 
}
/* LANDSCAPE IPHONE  -- MIN 600px & Up - grey*/
/* LANDSCAPE IPHONE  -- MIN 600px & Up - grey*/
  @media screen and (min-width: 600px) {
  .document{
      width: 85%;
      font-size: .75rem;
      margin: 0 auto;
	  /*background-color: grey;*/
      line-height: 1rem;
   }
   .title-left{
    display: none;
    }
    .title-center{
      background-color: #ffffff;
      width: 100%;
      text-align: center;
      font-size: 2.5rem;
      color: #000000;
      font-weight: bold;
      padding: 20px 0px 20px 0px;
      /*float: left; */
    }
    .title-right{
      display: none;
    }
  }
/* PORTRAIT  TABLET  - MIN 768px & Up  lightgreen */   
/* PORTRAIT  TABLET  - MIN 768px & Up  lightgreen */
  @media screen and (min-width: 768px) {
  .document{
      width: 85%;
      font-size: 1.25rem;
      margin: 0 auto;
		 /* background-color: lightgreen;*/
      line-height: 1.5rem;
   } 



  }
/*LANDSCAPE TABLET  -MIN-992px & Up aqua*/  
/*LANDSCAPE TABLET  -MIN-992px & Up aqua*/
  @media screen and (min-width: 992px) {
  .document{
    width: 75%;
    font-size: 1.25rem;
    margin: 0 auto;
		/*background-color: aqua;*/
    line-height: 1.5rem;
   } 

  }
/* DESKTOP  - MIN 1200px  & Up  tan */ 
/* DESKTOP  - MIN 1200px  & Up  tan */
  @media screen and (min-width: 1200px) {
  .document{
      width: 60%;
      font-size: 1.2rem;
      margin: 0 auto;
		  /*background-color: tan;*/
      line-height: 1.5rem;
   } 
  }