.top-miniheader{
  background-color: navy;
  width: 1100px;
  height: 30px;
  margin: 0 auto;
}
.top-miniheader-label{
  margin: 0 auto;
  color: white;
  padding: 5px;
  font-size: 12px;
  margin: auto 20px;
}
a.label1{
  color: white;
  text-decoration: none;
}
a.label2{
  color: white;
  text-decoration: none;
}
.header{
  width: 1100px;
  height: 200px;
  background-color: white;
  margin: -10px auto;
}
.header-picture{
  width: 180px;
  height: 180px;
  margin-top: 10px;
}
.header-picture-position{
  margin-left: 20px;
  margin-top: 10px;
}
.tnhs{
  font-size: 23px;
  color: navy;
  margin-left: 220px;
  margin-top: -140px;

}
.new-isabela{
  font-size: 20px;
  margin-left: 220px;
}
.zip-code{
  font-size: 15px;
  margin-left: 220px;
}
.search-bar{
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom:10px;
  font-size: 13px;
  border: 1px solid;
  width: 200px;
  border-radius: 30px 0px 0px 30px;
}
.search{
 margin-left: 760px;
 margin-top: -40px;

}
.search-button{
  padding: 11px;
  width: 100px;
  font-size: 13px;
  color: white;
  border: 1px solid;
  background-color: navy;
  border: none;
  border-radius: 0px 30px 30px 0px;
}
.search-button-position{
  
  margin-left: 973px;
  margin-top: -38px;
}
.home{
  background-color: #FFD700;
  padding-left: 10px;
  padding-top: 5px;
  padding-bottom: 22px;
  width: 1090px;
  height: 20px;
  margin: 10px auto;
  border: none;
  color: black;
   font-family: "Lucida Console", "Courier New", monospace;
}
.a-class{
  text-decoration: none;
  color: black;
}
ul{
  list-style: none;
  overflow: auto;
 margin: 220px -110px;
  
}
li{
  float: left;
}
li a{
  background-color: navy;
  padding-top: 14px;
  padding-bottom: 14px;
  padding-left: 100px;
  padding-right: 100px;
  display: block;
 max-width: 300px;
 text-decoration: none;
 color: white;
 font-size: 12px;
 font-family: "Lucida Console", "Courier New", monospace;
}
.home-icon{
  width: 20px;
  height: 20px;
}
.arrow{
  border: 10px solid white;
  padding: 3px;
  margin-left: 5px;
  border-width: 3px 3px 3px 3px; 
}
.space{
  height: 41px;
  width: 100px;
  background-color: navy;
  margin: -261px 990px;
}

.navigational-panel{
  margin-top: -248px;
  margin-left: 140px;
}
li.dropdown1{
  
display: inline-block;
}
.drop-down-about a{
  color: white;
  padding: 8px 10px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.drop-down-about {
  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;
}
.dropdown1:hover .drop-down-about {
  display: block;
}

.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 12px 12px;
  text-decoration: none;
}
li a:hover, .dropdown1:hover .dropbtn {
  background-color: lightgray;
  color: navy;
}
body{
  background-color:lightgray;
}
.page-content{
  width: 1100px;
  height: 2400px;
  background-color: white;
  margin: -10px auto;
}
.tnhs-history-video{
  height: 300px;
  margin-left: 30px;
  margin-top: 60px;
}
.tnhs-history-video:hover{
  transform: scale(1.025);
  transition: transform .5s;
  border-radius: 3px 3px 3px 3px;
}
#the-school{
  margin-left: 760px;
  margin-top: -385px;
  color: navy;
  font-family: "Arial Black", Gadget, sans-serif;
  letter-spacing: 1px;
  font-size: 30px;
}
.the-school-icon{
  width: 40px;
  height: 40px;
  margin-left: 720px;
}
.the-school-icon-position{
  margin-top: -47px;
}

#about_school_info{
  margin-left: 590px;
  margin-top: 5px;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 13px;
  color: black;
  padding-left: 20px;
  padding-right: 10px;
  padding-top: 20px;
  padding-bottom: 10px;
  width: 450px;
  background-color: #FFD700;
  border-radius: 5px 5px 5px 5px;
}
#p1{
  margin-left: 20px;
}
#p2{
  margin-left: 20px;
}
.disclaimer{
    font-family: Arial, Helvetica, sans-serif;
  font-size: 11px;
  margin-left: 55px;
  margin-top: 0px;
  padding: 10px;
}
.ab1{
  white-space: nowrap;
}
#about_school_info2{
  margin-top: 0px;
  background-color: red;
  margin-left:700px;
  font-size: 14px;
  margin-top: -320px;
    font-family: Arial, Helvetica, sans-serif;
  background-color: transparent;

}
.button1{
  width: 150px;
  padding: 10px;
  background-color: navy;
  color: white;
  border-radius: 5px 5px 5px 5px;
  margin-left: 750px;
  margin-top: 250px;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;

}
.hr1{
  width: 1040px;
}
.s-group{
  margin-left: 14px;
}
.transparency-seal{
  height: 180px;
}
.quality-assurance{
  height: 180px;
}
.i-services{
  height: 180px;
}
.transparency-seal-position{
  margin-top: 20px;
}
.quality-assurance-position{
  margin-left: 360px;
  margin-top: -215px;
}
.i-services-position{
  margin-left: 720px;
  margin-top: -215px;
}
.i-services {
  --g: 4px;     /* the gap */
  --b: 12px;    /* border thickness*/
  --c: navy; /* the color */
  
  
  padding: calc(var(--g) + var(--b));
  --_c: #0000 0 25%, var(--c) 0 50%;
  --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
  background:
    var(--_g1) var(--_p, 25%) 0   ,var(--_g2) 0    var(--_p,125%),
    var(--_g1) var(--_p,125%) 100%,var(--_g2) 100% var(--_p, 25%);
  background-size: 200% var(--b),var(--b) 200%;
  cursor: pointer;
  filter: grayscale(50%);
  transition: .3s;
}
.i-services:hover {
  --_p: 75%;
  filter: grayscale(0%);
}
.quality-assurance {
  --g: 4px;     /* the gap */
  --b: 12px;    /* border thickness*/
  --c: navy; /* the color */
  
  
  padding: calc(var(--g) + var(--b));
  --_c: #0000 0 25%, var(--c) 0 50%;
  --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
  background:
    var(--_g1) var(--_p, 25%) 0   ,var(--_g2) 0    var(--_p,125%),
    var(--_g1) var(--_p,125%) 100%,var(--_g2) 100% var(--_p, 25%);
  background-size: 200% var(--b),var(--b) 200%;
  cursor: pointer;
  filter: grayscale(50%);
  transition: .3s;
}
.quality-assurance:hover {
  --_p: 75%;
  filter: grayscale(0%);
}
.transparency-seal {
  --g: 4px;     /* the gap */
  --b: 12px;    /* border thickness*/
  --c: navy; /* the color */
  
  
  padding: calc(var(--g) + var(--b));
  --_c: #0000 0 25%, var(--c) 0 50%;
  --_g1: repeating-linear-gradient(90deg ,var(--_c)) repeat-x;
  --_g2: repeating-linear-gradient(180deg,var(--_c)) repeat-y;
  background:
    var(--_g1) var(--_p, 25%) 0   ,var(--_g2) 0    var(--_p,125%),
    var(--_g1) var(--_p,125%) 100%,var(--_g2) 100% var(--_p, 25%);
  background-size: 200% var(--b),var(--b) 200%;
  cursor: pointer;
  filter: grayscale(50%);
  transition: .3s;
}
.transparency-seal:hover {
  --_p: 75%;
  filter: grayscale(0%);
}
.news-updates-announcements{
  margin: 30px;
}
.news-updates{
  font-size: 35px;
  color: navy;
}
.announcements{
  font-size: 35px;
  color: navy;
  margin-left: 720px;
  margin-top: -40px;
}
.news-updates-1-picture{
  height: 170px;
   width:340px;
  border-radius: 2px 2px 2px 2px;
  margin-top: 10px;
}
.news-updates-1-picture-position{
  margin-top: 10px;
}
.news-updates-2-picture{
  height: 170px;
  width:340px;
  border-radius: 2px 2px 2px 2px;
}

.news-updates-1{
  margin-left: 20px;
  margin-top: -20px;
}
.news-updates-2{
  margin-left: 380px;
  margin-top: -175px;
}
.news-updates-1-content{
  background-color: #FFD700;
  margin-left: 20px;
  margin-top: -100px;
  width: 320px;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
  border-radius:  3px 3px 3px 3px;
}
.hr2{
  width: 290px;
}
.p1{
  font-size: 12px;
}
.news-updates-2-content{
  background-color: #FFD700;
  margin-left: 380px;
  margin-top:-365px ;
  width: 320px;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
  border-radius:  3px 3px 3px 3px;
}
.announcements1{
  background-color: #FFD700;
  margin-left: 740px;
  margin-top: -175px;
  width: 320px;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: justify;
  border-radius:  3px 3px 3px 3px;

}
.announcements2{
  background-color: #FFD700;
  margin-left: 740px;
  margin-top: -240px;
  width: 320px;
  padding: 10px;
  font-family: Arial, Helvetica, sans-serif;
  text-align: justify;
  border-radius:  3px 3px 3px 3px;
}
.button2{
  width: 250px;
  padding: 10px;
  background-color: navy;
  color: white;
  border-radius: 30px 30px 30px 30px;
  font-size: 14px;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}
.button2-position{
  margin-left: 65px;
  margin-top: -1px;
}
.button3-position{
  margin-left: 420px;
  margin-top: -40px;
}
.button2:hover{
  background-color: lightgoldenrodyellow;
  color: navy;
}
.button1:hover{
  background-color: lightgoldenrodyellow;
  color: navy;
}
.news-updates-1-picture:hover{
  transform: scale(1.1);
  transition: transform .2s;
}
.news-updates-2-picture:hover{
  transform: scale(1.1);
  transition: transform .2s;
}
.location-icon{
  width: 40px;
  height: 40px;
}
.location{
  margin-left: 20px;
  margin-top: 40px;
}
.location-label{
  color: navy;
  font-size: 35px;
  margin-left: 50px;
  margin-top: -40px;
}
.map{
  margin-left: 30px;
  height: 450px;
  width: 1040px;
  border: 1px solid navy;
}
.line{
  background-color: #FFD700;
  width: 1100px;
  height: 500px;
  margin-top: 10px;
}
.line2{
  background-color: navy;
  width: 1100px;
  height: 400px;
  margin-top: -320px;
}
.mission-title{
  color: #FFD700;
  margin-top: -530px;
  margin-left:20px ;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}
.vision-title{
  color: #FFD700;
  margin-top:-20px;
  margin-left:560px ;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}
.core-values-title{
  color: #FFD700;
  margin-top:-20px;
  margin-left:840px ;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}

.mission{
  color: white;
  margin-left: 10px;
  margin-top: 20px;
  text-align: justify;
  width: 500px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
}
.vision{
  color: white;
  margin-left: 280px;
  margin-top: -165px;
 text-align: justify;
  width: 250px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10px;
  letter-spacing: 3px;

}
.core-values{
  color: white;
  margin-left: 420px;
  margin-top: -150px;
 text-align: justify;
  width: 250px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
}
.e-services-title{
  color: #FFD700;
  margin-top:130px;
  margin-left:20px ;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}
.e-services{
  color: white;
  margin-left: 10px;
  margin-top: 10px;
 text-align: justify;
  width: 300px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
}
.quick-links-title{
  color: #FFD700;
  margin-top:-95px;
  margin-left:300px ;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}
.quick-links{
  color: white;
  margin-left: 300px;
  margin-top: 10px;
 text-align: justify;
  width: 300px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
}
.quick-contact-title{
  color: #FFD700;
  margin-top:-85px;
  margin-left:555px ;
  font-weight: bold;
  font-family: Arial, Helvetica, sans-serif;
}
.quick-contact{
  color: white;
  margin-left: 555px;
  margin-top: 10px;
 text-align: justify;
  width: 300px;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10px;
  letter-spacing: 3px;
}
.contact-img{
  width: 15px;
  height: 15px;
}
.phone-img{
  width: 15px;
  height: 15px;
}
.email-img{
  width: 15px;
  height: 10px;
}
.frame-3{
  margin-top: 80px;
}
.footer{
  margin-top: 30px;
  text-align: center;
  color: navy;
  font-size: 14px;
   font-family: Arial, Helvetica, sans-serif;
}
/* Login form */
#log-main{

  background-color: whitesmoke;
  padding: 20px;
  height: 550px;
  width: 800px;
  margin-top: 75px;
 display: block;
  margin-left: auto;
  margin-right: auto;
  border-radius: 30px 30px 30px 30px;
  box-shadow: 15px 15px gray;
}
#log-img{

  width: 300px;
  height: 300px;
  margin-left: -40px;
  margin-top: 100px;
}
#membership{
  margin-left: 430px;
  margin-top: -360px;
  font-family: Georgia, serif;
  text-emphasis: slateblue;

}

#side-log{

  height: 590px;
  width: 300px;
  background-color: #50C878;
  border-radius: 30px 0px 0px 30px;
  margin-top: -464px;
  margin-left: -20px;
}
#log-main{

  margin: 100px auto;
}
#log-tnhs{
  margin-left: 20px;
}
#login-text-account{
  font-size: 14px;
  width: 350px;
  height:40px;
  border-style: hidden;
  margin-left: 360px;
  margin-top: 180px;
   cursor:default;
   opacity: .5;
   border-radius: 0px 40px 40px 0px;
   padding-left: 30px;
   background-color: lightgray;
}
.login-text-password{
  font-size: 14px;
  width: 350px;
  height:40px;
  border-style: hidden;
  margin-left: 360px;
  margin-top: 10px;
   cursor: default;
    opacity: .5;
     border-radius: 0px 40px 40px 0px;
   padding-left: 30px;
   font-family: "Lucida Console";
   background-color: lightgray;
}
#login-button{
  height: 45px;
  width: 200px;
  border-radius: 40px 40px 40px 40px;
  margin-left: 430px;
  margin-top: 50px;
  cursor: pointer;
  background-color: #50C878;
  color: whitesmoke;
  font-size: 14px;
}

.login-text-password:hover{
  border-color: red;
  border-style: lightgray;
  opacity: 1;
  border-style: hidden;
 
}
#login-text-account:hover{
  border-color: red;
  border-style: lightgray;
  opacity: 1;
  border-style: hidden;
 
}
#lock-img{
  height: 50px;
  width: 50px;
}
#user-img{
  height: 50px;
  width: 50px;
}
#log-lock{
  margin-left: 295px;
  margin-top: -265px;

}
#log-user{
  margin-left: 295px;
  margin-top: -110px;

}
#login-button:hover{
  background-color: navy;
  }
  #membership{

    font-size: 45px;
    margin-top: -373px;
    margin-left: 360px;
  }
  #instruction{
     font-family: Georgia, serif;
    font-size: 12px;
    text-align: center;
    width: 420px;
    color: red;
    margin-left: 340px;
  }
  #account{
    margin-top: -59px;
  }
  #back{
    font-size: 14px;
    margin-left: 150px;
    margin-top: 220px;
  }
  #show-password{

    font-size: 12px;
    font-family: "Lucida Console";
    margin-left: 400px;
  }
  #log-home{

    width: 70px;
    height: 70px;
    margin-left: 180px;
    margin-top: -50px;
  }
  #log-home-label{
    margin-left: 400px;
    font-size: 16px;
    margin-top: -50px;
  }
  #log-tnhs-info{

    font-size: 11px;
    text-align: center;
    margin-top: -85px;
    margin-left: -20px;
    color:navy;
    width: 300px;
    height: 60px;
    padding-top: 40px;
    padding-bottom: 40px;
    background-color: navajowhite;
    border-radius: 0px  0px 0px 30px;
    font-family: "Lucida Console";
  }