.bodymain {
	
	background-image:url(../img/backgpix.jpg);
	  background-repeat: no-repeat;
      background-attachment: fixed;
  background-size: 100% 100%;
  margin:auto 0px ;
   
}

.opa{
    opacity:0.8;
}

.style{
    margin:auto auto;

}
h1,h2,h3,h4,h5,h6 {
    color: rgb(104, 0, 0)
}
.focus {

    color: red;
    -webkit-animation-name: example; /* Safari 4.0 - 8.0 */
    -webkit-animation-duration: 2000s; /* Safari 4.0 - 8.0 */
    animation-name: example;
    animation-duration: 2000s;
  }
  
  /* Safari 4.0 - 8.0 */
  @-webkit-keyframes example {
    from {color: red;}
    to {color: blue;}
  }
  
  /* Standard syntax */
  @keyframes example {
    from {color: red;}
    to {color: blue;}
  }
#main {
    background: #C5D8A6 url(../img/page.jpeg) top center fixed;
}

.flexureMainPg{
    /* display: flex; */
    align-items: center;
    justify-content: center;
    background: #C5D8A6 url(../img/page.jpeg) top center fixed;
}

.sheetMain {
    max-width: 1000px;
    padding: 1% 2%;
    background: #8cac0e48;
    margin: 0 auto;
    box-shadow: 0 0 5px 10px rgba(0, 0, 0, 0.24);
}

.excelWords{
    background: #008b8b4b;
    border-radius: .5em;
    padding: .5em;
    margin: .5em auto;
    text-shadow: 0 0 10px #ffffff, 0 0 10px #0000FF;
}

.schoolsPic{
    transition: all .3s ease-in-out;
}

.schoolsPic:hover{
    transform:scale(1.1);
    box-shadow: 0px 10px 10px 2px rgba(0,0,0,.7);
}

.sheet {
    max-width: 1000px;
    background: #e8efcd;
    margin: 0 auto;
    box-shadow: 0 0 5px 3px rgba(0, 0, 0, 0.24);
}

.slidecontainerheader > div {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#insignia, .mySlides h3 {
    text-decoration: none;
    text-shadow: 0px 0px 10px rgba(239, 244, 230, 0.65), 0.7px 0.7px 10px rgba(239, 244, 230, 0.65), 1.4px 1.4px 11px rgba(239, 244, 230, 0.65), 2.1px 2.1px 10px rgba(239, 244, 230, 0.65), 2.8px 2.8px 10px rgba(239, 244, 230, 0.65);
}

header {
    height: 344px;
    /* height: 437px; */
    overflow: hidden;
    background: #8cac0e28;
}

.mySlides h3{
    color: darkgreen;
    max-width: 350px;
    font-weight: bold;
    font-size: xx-large;
    font-style: italic;
}

.schoolLink{
    font-size: .9em;
    font-weight: 600;
    max-width: 300px;
    position: relative;
    margin: 0 auto;
    border-radius: 0 0 1em 1em;
    padding: .3em;
}

.schoolLink a{
    text-decoration: none;
}

.blinkBtn {
    background-color: #004A7F;
    -webkit-animation: glowing 3500ms infinite;
    -moz-animation: glowing 3500ms infinite;
    -o-animation: glowing 3500ms infinite;
    animation: glowing 3000ms infinite;
}
  @-webkit-keyframes glowing {
    0% { background-color: #bbb992; -webkit-box-shadow: 0 0 3px #B20000; }
    50% { background-color: #800000; -webkit-box-shadow: 0 0 40px #FF0000; }
    100% { background-color: #bbb992; -webkit-box-shadow: 0 0 3px #B20000; }
}
  
  @-moz-keyframes glowing {
    0% { background-color: #bbb992; -moz-box-shadow: 0 0 3px #B20000; }
    50% { background-color: #800000; -moz-box-shadow: 0 0 40px #FF0000; }
    100% { background-color: #bbb992; -moz-box-shadow: 0 0 3px #B20000; }
}
  
  @-o-keyframes glowing {
    0% { background-color: #bbb992; box-shadow: 0 0 3px #B20000; }
    50% { background-color: #800000; box-shadow: 0 0 40px #FF0000; }
    100% { background-color: #bbb992; box-shadow: 0 0 3px #B20000; }
}
  
  @keyframes glowing {
    0% { background-color: #bbb992; box-shadow: 0 0 3px #B20000; }
    50% { background-color: #800000; box-shadow: 0 0 40px #FF0000; }
    100% { background-color: #bbb992; box-shadow: 0 0 3px #B20000; }
  }

.navWrap{
    background:#8a5656;
    padding: 0
}

#myNavbar, #navButton{
    background:#bbb992;
    color: #ffffff;
    font-weight: 520;
    padding: .3em;
    margin: 0;
}

#navButton{
    z-index: 4;
}

  nav b {
    font-size: large;
}


#googleMap1, #googleMap2{
    height:300px;
}

.mapPad{
    padding: 15px;
}

.govPic {
    padding: 5px; 
    display: inline-block;
    width: 25%;
    min-width: 20%;
    margin: 5px;
}

.staffPic {
    padding: 5px; 
    display: inline-table;
    width: 15%;
    margin: 5px;
}

.staffPic h4, .govPic h4{
    font-weight: 600;
    text-transform: capitalize;
    margin: 0;
}

footer {
    font-size: .9em;
    opacity: .9;
    color: #e8e8e8;
    background: #69674b;
}

footer img {
    max-width: 35px;
}

footer .contact div {
    display: flex;
    align-items: flex-start;
    margin: 5px 0;
}

footer .contact img {
    margin: 10px 15px 0 0;
}

footer .social a, #impression a {
    text-decoration: none;
}

.designerSlate{
    font-size: .9em;
}

/* BEGIN The Gallery Part */
.galleryPic img {
    width: 100%;
    border-radius: 3%;
}

.galleryContainer {
    max-height: 1650px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    align-content: center;
    margin-bottom: 15px;
}

.galleryPic {
    border-radius: 4%;
    background: #777661;
    margin: 4px;
    vertical-align: middle;
    width: 19%;
    min-width: 170px;
    padding: 3px;
    transition: all .3s ease-in-out;
}

.galleryPic:hover{
    transform:scale(1.8);
    box-shadow: 0px 10px 10px 2px rgba(0,0,0,.7);
  }

.galleryPic div {
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    font-style: italic;
    margin: 0;
}

@media screen and (max-width: 990px) {
    .galleryContainer {
        max-height: 2350px;
    }
    .galleryPic {
        width: 25%;
    }
}

@media screen and (max-width: 800px) {
    .galleryContainer {
        max-height: 2000px;
    }
    .galleryPic {
        width: 25%;
    }
}

@media screen and (max-width: 730px) {
    .galleryContainer {
        max-height: 2950px;
    }
    .galleryPic {
        width: 33.3%;
    }
    header {
        height: 300px;
    }
}

@media screen and (max-width: 550px) {
    .galleryContainer {
        max-height: 5000px;
    }
    .galleryPic {
        width: 50%;
    }
    header {
        height: 280px;
    }    
}

@media screen and (max-width: 375px) {
    .galleryContainer {
        max-height: none;
    }
    .galleryPic {
        width: 100%;
    }
    header {
        height: 250px;
    }
}

.row {
    display: -ms-flexbox; /* IE10 */
    display: flex;
    -ms-flex-wrap: wrap; /* IE10 */
    flex-wrap: wrap;
    padding: 0 4px;
}

.column {
    -ms-flex: 25%; /* IE10 */
    flex: 25%;
    max-width: 25%;
    padding: 0 4px;
}

/* Gallery Lightbox */

#overlay {
    background: rgba(0,0,0,0.7);
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999;
    /* Removes blue highlight */
    -webkit-user-select: none;
    -moz-user-select: none;    
    -ms-user-select: none; 
    user-select: none; 
  }
    #overlay img {
      margin: 0;
      width: 80%;
      height: auto;
      object-fit: contain;
      padding: 5%;
    }

  #nextButton {
    color: #fff;
    font-size: 3em;
    transition: opacity 0.8s;
  }
  
  #prevButton {
    color: #fff;
    font-size: 3em;
    transition: opacity 0.8s;
  }
  
  #exitButton {
    color: #ffffff;
    font-size: 3em;
    transition: opacity 0.8s;
    position: absolute;
    top: 15px;
    right: 15px;
  }

/* END The Gallery Part */

 /* The Modal (background) */

 .modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 5; /* Sit on top */
    padding-top: 100px; /*Location of the box*/
    left: 0;
    top: 0;
    width: 100%;
    height: 100%; 
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-image {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    border-radius:10px;
    box-shadow: 10px 10px 5px #a1af92d0;
}

.button {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: rgb(236, 236, 236);
    padding: 10px 0;
    font: 2.3em "Calibri", Monaco, monospace;
    background-color: #0066CC;
    border-radius:10px;
    box-shadow: 10px 10px 5px #a1af92d0;
}

/* The Close Button */

.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.15s;
}

.close:hover, .close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media screen and (max-width: 700px){
    .modal-image, .button {
        width: 95%;
    }
}

/* For awareness slideshow in the announcement area. */
#slideshow {
    position: relative;
    height: 370px;
  }

  #slideshow > img {
    padding-bottom: 10px;
  }

  @media screen and (max-width: 700px){
    #slideshow  {
        height: 250px;
    }
}

@media screen and (max-width: 601px){
    #slideshow  {
        height: 210px;
    }
}

@media screen and (max-width: 350px){
    #slideshow  {
        height: 120px;
    }
}

  #slideshow > div {
    position: absolute;
    width: 100%;
  }  
  #customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    
    background: #f9f9f9;
  }
  
  #customers td, #customers th {
    border: 1px solid #ddd;
    padding: 4px;
    font-size: 15px;
  }
  a{
      text-decoration:none;
      color:black;
      padding-left:3px;
      padding-right:3px;
      }
      a:hover{
              text-decoration:none;
          color:black;
          }
  #customers tr:nth-child(even){background-color: #f2f2f2;}
  
  #customers tr:hover {background-color: #ddd;}
  
  #customers th {
    padding-top: 12px;
    padding-bottom: 12px;
         font-size: 16px;  
    background-color: #339999;
    color: white;
  }

  .style38 {font-size: 11px}
.style52 {font-weight: bold}
.style53 {font-size: 9px}
.style54 {font-size: 11px; font-weight: bold; }
.style55 {font-weight: bold; font-family: Verdana;}
.style56 {font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #00CC00;}
.style57 {font-family: Arial, Verdana, Helvetica, sans-serif; font-weight: bold; color: #195B95;}
.style58 {font-family: Verdana, Arial, Helvetica, sans-serif; font-weight: bold; color: #ff3300;}
.style59 {font-size: 14px}
.style13 {font-family: Verdana; font-size: 11px; }
.style25 {color: #FFFFFF}
.style51 {color: #000000}
.style16 {color: #FFFFFF; font-weight: bold; }
.style18 {font-size: 10px}
.style19 {font-family: Verdana}
.style20 {
	font-size: 12px;
	font-weight: bold;
}
.style22 {
	font-family: Verdana;
	font-size: 12px;
	font-weight: bold;
}