* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* This changes all the animations globally */
:root {
/*   scrolling-behavior: smooth; */
  --animate-duration: 1000ms;
  --animate-delay: 2s;
  scrolling-behavior: smooth;
  -webkit-fill-available;
}
#one{
  position: relative;
  top: 5vh;
  height: 108vh;
  background-image: url("AU.images/GoldBckgrnd.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  overflow: hidden;
  z-index: 3;
}
aside{
  display: none;
}
#hMenuIcon{
  display: none;
}
#nav-top{
  display: inline-block;
  position: fixed;
  top: 0;
  height: 8vh;
  width: 100%;
  background-color: rgb(228,2,43);
  z-index: 30;
}
#top, .navbtn{
  display: flex;
  height: 8vh;
  width: 100%;
  justify-content: space-evenly;
  align-items: center;
}
#top li{
  list-style-type: none;
} 
#top li a{
  text-decoration: none;
  color: rgb(226,215,90);
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 1.2em;
}
.navbtn {
  border: none;
  color: rgb(226,215,90);
  padding: 4px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 1.2em;
  width: 6.5vw;
  /*border: solid blue;*/
}
.eNavbtn{
  padding-top: 2.5vh;
  /*border: solid blue;*/
}
.auNavbtn{
  padding-top: 1.25vh; 
  /*border: solid blue;*/
}
.yesNavbtn{
  padding-top: 1.25vh
}
.ayNavbtn{
  padding-top: 1.25vh
}
.dropdown{
  display: none;
  position: absolute;
  min-width: 160px;
  line-height: 50px;
  padding: 5px;
  text-justify: left;
  font-family: 'Noto Sans Display', sans-serif;
  border: solid rgb(242, 205, 0);
  border-width: 2px;
  top: 8vh;
}
.dropdown a{
  text-decoration: none;
  color: black;
  font-size: 16px;
  padding: 15px 20px;
}
#YES:hover .dropdown{
  display: block;
  box-shadow: 0px 8px 16px 0px rgb(0,0,0,0.2);
  background-color: #f1f1f1;
  z-index: 1;
}
#AU:hover .dropdown{
  display: block;
  box-shadow: 0px 8px 16px 0px rgb(0,0,0,0.2);
  background-color: #f1f1f1;
  z-index: 1;
  border: solid dark khaki;
}
#eventsMenu:hover .dropdown{
  display: block;
  box-shadow: 0px 8px 16px 0px rgb(0,0,0,0.2);
  background-color: #f1f1f1;
  z-index: 1;
}
#adultYouthMenu:hover .dropdown{
  display: block;
  box-shadow: 0px 8px 16px 0px rgb(0,0,0,0.2);
  background-color: #f1f1f1;
  z-index: 1;
}
.dropdown a:hover{
  color: rgb(228,2,43);
}
#AULocal{
  display: block;
}
#natSor{
  position: absolute;
  top: 22vh;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75vw;
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 2.5em;
  /* border: solid blue; */
  text-align: center;
}
#Welcome{
  position: absolute;
  top: 24vh;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1.2em;
  color: rgb(228,2,43);
  text-align: center;
}
#aboutus{
  position: absolute;
  top: 31vh;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 2em;
  color: rgb(228,2,43);
  text-align: center;
}
#midtext{
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Open Sans Condensed', sans-serif;
  top: 50vh;
  border: double #000;
  box-shadow: 3px 4px 2px gray;
  /* background-color: rgb(228,2,43); */
  color: #000;
  font-size: .8em;
  text-align: justify;
  text-align-last: center;
  margin: auto;
  padding: 10px;
  width: 80%;
}
#purpose{
  position: absolute;
  top: 69vh;
  left: 50%;
  margin: 0;
  padding:0;
  transform: translate(-50%, -50%);
  font-family: 'Open Sans Condensed', sans-serif;
  width: 95vw;
  font-size: 1.55em;
  color: rgb(228,2,43);
  text-align: center;
}
#maintext{
  top: 12vh;
  height: 20vh;
  color: rgb(228,2,43);
  font-size: 1.75em;
}
#lst{
  position: absolute;
  top: 84vh;
  width: 80vw;
  text-align: center;
  list-style-type: none; 
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: .8em;
  color: #000;
  left: 50%;
  margin: 0;
  padding:0;
  transform: translate(-50%, -50%);
  line-height: 82%;
  white-space: nowrap;
  /* border: solid blue; */
}
#AULocal{
  position: absolute;
  bottom: 15vh;
  right:  4vw;
  height: 14vh;
  width: 10vw;
  padding: 3px;
/*   background-color: rgb(201,153,205); */
  border: solid 2px rgb(228,2,43);
  box-shadow: 2px 2px 2px #7e0202;
  border-radius: 6px;
/*   border: groove 2px gold; */
}
#AULocalNav ul{
  text-align: right;
/*   background-color: medium pink; */
}
#AULocalNav ul li{
  list-style-type: none;
}
#AULocalNav ul li a{
  text-decoration: none;
  text-shadow: 1px 1px 1px #837e7c;
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 0.9em;
  color: rgb(228,2,43);
  padding: 2px;
}
#photocred{
  position: absolute;
  bottom: 2vh;
  left: 1.5vw;
  color: #000;
  font-family: 'Noto Sans Display', sans-serif;
  font-size: .3em;
}
#qrCode{
  position: absolute;
  height: 90vh;
  width: 50vw;
  left: -13vw;
  top: 36vh;
  transform: scale(0.5, 0.5);
  /*border: solid 6px black;*/
}
#qrCodeText{
  position: absolute;
  left: 1.70vw;
  width: 21%;
  color: #000;
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 1em;
  text-align: center;
  text-decoration: none;
  bottom: 6vh;
}
#qrCodeTextMobile{
  display: none;
}
#BOO{
  position: relative;
  height: 100vh;
  width: 100vw;
}
#BOOh2{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 16vh;
  height: 14vh;
  width: 70vw;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 5em;
  margin: 0;
  color: rgb(228,2,43);
/*   background-color: #d5b7fb; */
  border-radius: 6px;
  font-family: 'Train One', cursive;
/*   border: double 3px black;
  box-shadow: 1px 2px 2px rgb(111, 6, 25); */
  text-align: center;
  text-shadow: 2px 4px 2px rgb(101, 6, 23);
}
#BOOVid{
  display: block;
  position: absolute;
  top: 2.01vh;
  height: 113vh;
  width: 100vw;
  bottom: 0;
  overflow: hidden;
  /*transform: scale(1, 1.04);*/
  opacity: 0.7;
}
#ipadBack{
  display: none;
}
#titleBOO p{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 28vh;
  left: 50%;
  transform: translate(-50%, -50%);
  border: double 2px black;
  border-radius: 6px;
  background-color: rgb(228,2,43);
  box-shadow: 1px 2px 2px rgb(145, 3, 29);
  text-shadow: 2px 2px 2px rgb(163, 166, 8);
  height: 7vh;
  width: 40vw;
  font-size: 1.5em;
  color: rgb(226,215,90);
  font-family: 'Open Sans Condensed', cursive;
}
#text{
  position: absolute;
  top: 66vh;
  width: 36vw;
  height: 64vh;
  left: 50%;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 1.15em;
  text-align: center;
  color: black;
  padding-top: 8px;
  padding-right: 3px;
  padding-left: 3px;
  background-color: rgb(226,215,90);
  box-shadow: 3px 6px 6px rgb(204, 182, 54);
  /*text-shadow: 1px 2px 2px #787878;*/
  border: double rgb(228,2,43);
  border-radius: 6px;
  z-index: 5;
}
#vidCred{
  position: absolute;
  bottom: 3vh;
  left: 1vw;
  color: #000;
  font-family: 'Noto Sans Display', sans-serif;
  font-size: .3em;
}
#booLocal{
  position: absolute;
  bottom: 3vh;
  right: 4vw;
  height: 14vh;
  width: 10vw;
  padding: 3px;
/*   background-color: rgb(201,153,205); */
  border: solid 2px gold;
  box-shadow: 2px 2px 2px #826f03;
  border-radius: 6px;
/*   border: groove 2px gold; */
}
#booLocalNav ul{
  text-align: right;
/*   background-color: medium pink; */
}
#booLocalNav ul li{
  list-style-type: none;
}
#booLocalNav ul li a{
  text-decoration: none;
  text-shadow: 1px 2px 2px #8b8604;
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 0.9em;
  color: gold;
  padding: 2px;
}
#Hist{
  position: relative;
  height: 120vh;
  width: 100vw;
  overflow: hidden;
}
#histVid{
  position: absolute;
  top: 0;
  height: 120vh;
}
img{
  position: absolute;
  height: 39vh;
  top: 46vh;
  left: 50%;
  transform: translate(-50%, -50%) scale(2, 2);
  margin: 0;
  padding: 0;
  z-index: 2;
/*   border: solid blue; */
}
#phihist{
  position: absolute;
  top: 43vh;
  width: 40vw;
  left: 50%;
  margin: 0;
  padding: 0;
  transform: translate(-50%, -50%);
  text-align: center;
  font-family: 'Train One', cursive;
  font-size: 2.3em;
  color: #fff;
  z-index: 4;
}
#text1{
  position: absolute;
  left: 3vw;
  top: 18vh;
  width: 25vw;
  height: 20.5vh;
  font-size: 0.5em;
  text-align: center;
  font-family: 'Noto Sans Display', sans-serif;
  padding-top: 10px;
  padding-left: 7px;
  padding-right: 7px;
  color: black;
  border: double rgb(228,2,43);
  border-radius: 6px;
  box-shadow: 3px 4px 2px rgb(173, 148, 5);
  background-color: rgb(226,215,90);
}
#sor3_17{
  position: absolute;
  left: 3vw;
  top: 44vh;
  width: 25vw;
  height: 16.5vh;
  font-size: 0.5em;
  font-family: 'Noto Sans Display', sans-serif;
  padding-top: 10px;
  padding-left: 7px;
  padding-right: 7px;
  color: black;
  text-align: center;
  border: double rgb(228,2,43);
  border-radius: 6px;
  box-shadow: 3px 4px 2px rgb(173, 148, 5);
  background-color: rgb(226,215,90);
}
#shirley{
  position: absolute;
  top: 50vh;
  height: auto;
  width: 100%;
  left: 50%;
  margin: 0;
  padding: 10px;
  transform: translate(-50%, -50%) scale(.6, .6);
  border: inset 6px rgb(253, 219, 23);
  box-shadow: 1px 2px 2px rgb(173, 148, 5);
  z-index: 6;
}
.overlay{
  position: absolute;
  top: 0;
  height: 120vh;
  width: 100vw;
  background-color: rgba(253, 252, 252, 0.432);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(4px);
  z-index: 5;
  /* border: solid red; */
}
#honorShirley{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: top;
  height: 8vh;
  width: 40vw;
  top: 87vh;
  left: 27%;
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 0.9em;
  color: rgb(228,2,43);
  text-shadow: 1.5px 1.5px 2px #000;
  /* z-index: 3; */
}
#createOver{
  position: absolute;
  height: 3vh;
  width: 6vw;
  background-color: rgb(151,1,1);
  color: white;
  top: 88vh;
  right: 32vw;
  border: solid 1px gold;
  border-radius: 35%;
  cursor: pointer; 
}
.btn{
  position: absolute;
  top: 74.5vh;
  right: 23vw;
  transform: scale(5, 5);
  background-color: transparent;
  cursor: pointer;
  border: none;
  z-index: 11;
}
#histLocal{
  position: absolute;
  bottom: 24vh;
  right:  4vw;
  height: 15vh;
  width: 13vw;
  margin-top: 0;
  padding: 1px;
/*   background-color: rgb(201,153,205); */
  border: groove 2px rgb(228,2,43);
  box-shadow: 2px 2px 2px #830202;
  border-radius: 6px;
/*   border: groove 2px gold; */
}
#histLocalNav ul{
  text-align: right;
/*   background-color: medium pink; */
}
#histLocalNav ul li{
  list-style-type: none;
}
#histLocalNav ul li a{
  text-decoration: none;
  text-shadow: 1px 2px 2px #8b8604;
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 0.48em;
  color: #fff;
  padding: 2px;
}
#scPic{
  position: absolute;
  bottom: 1vh;
}
#pageTopIcon{
  position: absolute;
  bottom: 25vh;
  right: 6vw;
  transform: scale(.22, .22);
}
span a{
  text-decoration: none;
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 1.75em;
  color: red;
}
.hidden{
  display: none;
}
#Found{
  position: relative;
  height: 150vh;
}
#founderVid{
  position: absolute;
  height: 150vh;
  width: 100vw;
  overflow: hidden;
}
#PDK{
  position: absolute;
  top: 14vh;
  font-family: 'Train One', cursive;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  font-size: 3.5em;
  margin: 0;
  padding:0;
  z-index: 2;
  color: rgba(242, 205, 0);
  text-align: center;
/*   border: solid green; */
}
#foundH2{
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  top: 26vh;
  margin: 0;
  padding:0;
  z-index: 2;
  color: rgba(242, 205, 0);
  text-align: center;
  font-size: 4em;
  font-family: 'Train One', cursive;
}
/* Created by Ryan,"just another web developer" */
.topText {
    position: absolute;
    top: 50%; 
    right: 50%;
    transform: translate(50%,-50%);
    text-transform: uppercase;
    font-family: verdana;
    font-size: 12em;
    font-weight: 700;
    color: #f5f5f5;
    text-shadow: 1px 1px 1px #919191,
        1px 2px 1px #919191,
        1px 3px 1px #919191,
        1px 4px 1px #919191,
        1px 5px 1px #919191,
        1px 6px 1px #919191,
        1px 7px 1px #919191,
        1px 8px 1px #919191,
        1px 9px 1px #919191,
        1px 10px 1px #919191,
    1px 18px 6px rgba(16,16,16,0.4),
    1px 22px 10px rgba(16,16,16,0.2),
    1px 25px 35px rgba(16,16,16,0.2),
    1px 30px 60px rgba(16,16,16,0.4);
}
#founders{
  position: absolute;
  top: 65vh;
  left: 50%;
  margin: 0;
  padding:0;
  transform: translate(-50%, -50%) scale(1.5, 1.5);
  box-shadow: 5px 7px 8px rgb(128, 128, 128, 0.555);
  border: double 4px gold;
  border-radius: 6px;
}
#namesOfFounders{
  position: absolute;
  top: 97.5vh;
  left: 50%;
  transform: translate(-50%, -50%);
}
#namesOfFounders a{
  text-decoration: none;
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 1.3em;
  color: gold;
}
#foundnames{
  position: absolute;
  height: 55vh;
  width: 49vw;
  border:double black;
  background-image: linear-gradient(to right, rgb(76,0,0),                rgb(253,2,0), rgb(76,0,0));
  top: 123vh;
  right: -25vw;
  margin: 0;
  padding:10px;
  transform: translate(-50%, -50%) scale(.75, .75);
  font-family: 'Noto Sans Display', sans-serif;
  color: rgba(242, 205, 0);
  font-size: 2em;
  text-align: center;
  box-shadow: 5px 7px 8px rgb(128, 128, 128, 0.555);
  border: double 4px gold;
  border-radius: 6px;
}
#describe{
  position: absolute;
  top: 121vh;
  left: 24vw;
  height: 30vh;
  width: 49vw;
  border:double black;
  background-image: linear-gradient(to right, rgb(76,0,0),                rgb(253,2,0), rgb(76,0,0));
  padding: 50px 10px 10px;
  transform: translate(-50%, -50%) scale(.75, .75);
  font-family: 'Noto Sans Display', sans-serif;
  color: rgba(242, 205, 0);
  font-size: 1.3em;
  text-align: center;
  box-shadow: 5px 7px 8px rgb(128, 128, 128, 0.555);
  border: double 4px gold;
  border-radius: 6px;
}
#foundLocal{
  position: absolute;
  bottom: 56vh;
  right: 4vw;
  height: 14vh;
  width: 10vw;
  padding: 3px;
  border: solid 2px gold;
  box-shadow: 2px 2px 2px #7e6b02;
  border-radius: 6px;
}
#foundLocalNav ul{
  text-align: right;
}
#foundLocalNav ul li{
  list-style-type: none;
}
#foundLocalNav ul li a{
  text-decoration: none;
  text-shadow: 1px 2px 2px #8b8604;
  
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 0.9em;
  color: gold;
  padding: 2px;
}
#bottom{
  position: absolute;
  left: 50%;
  transform: translateX(-50%, -50%);
  height: 2vh;
  width: 2vw;
  bottom: 2vh;
}
#nofTop{
  position: absolute;
  bottom: 2vh;
  left: 48%;
}
#nofTop a{
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 1.3em;
  color: gold;
  text-decoration: none;
}
#posthumous{
  position: absolute;
  bottom: -1vh;
  left: 50%;
  margin: 0;
  padding:0;
  transform: translate(-50%, -50%) scale(.75, .75);
  font-family: 'Noto Sans Display', sans-serif;
  font-size: .8em;
  color: rgba(242, 205, 0);
}
#footer{
  position: relative;
  display: grid;
  justify-content: space-between;
  grid-template-columns: 16.5vw 39.75vw 43.75vw;
  column-gap: 0.5px;
  grid-template-areas:
  "one" "two" "three";
  height: 15vh;
  border-top: ridge 5px rgb(241,231,139);
  border-right: solid 3px rgb(242,205,0);
  box-shadow: 2px 2px 4px 2px maroon inset;
  overflow: hidden;
}
#footerOne{
  min-height: 0;
  min-width: 0;
  height: 15vh;
  background-color: rgba(188,128,193, 0.8);
}
#footerNavOne{
  position: absolute;
  top: 1vh;
  left: 3vw;
/*   border: solid blue; */
}
#footerNavOne ul li{
  list-style-type: none;
}
#footerNavOne ul li a{
  text-decoration: none;
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 0.9rem;
  color: #fff;
}
#footerTwo{
  min-height: 0;
  min-width: 0;
  background-color: rgba(188,128,193, 0.8);
}
#footerNavTwo{
  position: absolute;
  top: 1vh;
  left: 20vw;
}
#footerNavTwo ul li{
  list-style-type: none;
}
#footerNavTwo ul li a{
  text-decoration: none;
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 0.9rem;
  color: #fff;
}
#footerThree{
/*   border: solid orange; */
  height: 15vh;
  background-color: rgba(188,128,193, 0.8);
}
#nspdkCred p{
  position: absolute;
  top: 6.5vh;
  left: 37.5vw;
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 0.8rem;
  text-shadow: 1px 1px 1px red;
  color: rgb(242,205,0);
  z-index: 4;
}
#nspdkDelta{
  position: absolute;
  top: 2.25vh;
  left: 42vw;
  transform: scale(0.095, 0.095);
  z-index: 3;
  border: solid black;
}
#facebookIcon{
  position: absolute;
  top: 6vh;
  right: 21%;
  transform: scale(.05, .05);
}
#copyright{
  position: absolute;
  top: 11.75vh;
  left: 66vw;
  width: 30vw;
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 0.8rem;
  color: #fff;
  /* border: solid 6px blue; */
}
.turn, .turn p, .turn1, .turn1 p, .turn2, .turn2 p, .turn3, .turn3 p{
  display: none;
}
.navList ul:hover .aList {
  opacity: 0.5;
}
.navList ul:hover .aList:hover {
  opacity: 1;
}
.navList ul li a {
  display: block;
}










  /* //////////// Laptop Properties End //////////// */







/* //////////// iPhone/Android Properties //////////// */










@media (min-device-width: 360px) and (max-device-width: 640px){
  
/* (A) WRONG ORIENTATION - SHOW MESSAGE HIDE CONTENT */
@media only screen and (orientation:landscape) {
  .turn, .turn p, .turn1, .turn1 p, .turn2, .turn2 p, .turn3, .turn3 p { display:block; }
  #container { display:none; }
}
 /* (B) CORRECT ORIENTATION - SHOW CONTENT HIDE MESSAGE */
@media only screen and (orientation:portrait) {
  .turn, .turn p, .turn1, .turn1 p, .turn2, .turn2 p, .turn3, .turn3 p { display:none; }
  #container { display:block; }
}
#nav-top, #yesFirstLocal, #youthLocal, #educateLocal, #perpLocal, #servLocal, #footer, #AULocal, #BOOVid, #nspdkDelta, #honorShirley, #createOver, #btnHide{
  display: none;
}
.turn, .turn2, .turn3{
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: black;
  z-index: 100;
}
.turn p, .turn2 p, .turn3 p{
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  top: 45%;
  width: 90%;
  font-family: 'Open Sans', sans-serif;
  font-size: 3em;
  text-align: center;
  color: red;
/*   border: solid blue; */
}
.turn1{
    position: absolute;
    height: 100%;
    width: 100%;
    background-color: black;
    z-index: 100;
}
.turn1 p{
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
    top: 40%;
    width: 90%;
    font-family: 'Open Sans', sans-serif;
    font-size: 3em;
    text-align: center;
    color: red;
/*   border: solid blue; */
}
#turnFound{
  height: 158vh;
}
#turnFound p{
  top: 50%;
}
sidebartext{
  display: block;
}
#one{
  top: 0;
}
#BOO{
  background-color: rgb(226,215,90)
}
#hMenuIcon{
  display: block;
}
#hMenuIcon:hover{
  opacity: 0.7;
}
.nav-sidebar{
  position: fixed;
  display: block;
  height: calc(100vh - 8vh);
  width: 8vw;
  top: 8vh;
  bottom: 0;
  margin-left: 0;
  background-color: rgb(228,2,43);
  opacity: 0;
  border-top-right-radius: 25px;
  z-index: 25;
  transition: all 0.4s ease-in-out;
}
.nav-sidebar:hover{
  background-color: rgb(231, 64, 95);
}
.nav-sidebar ul{
  padding-top: 5px;
  overflow: hidden;
  visibility: hidden;
  margin-left: 0;
}
.nav-sidebar li{
  line-height: 2.75;
  list-style: none;
}
.nav-sidebar a{
  display: block;
  padding: 0 10px;
  font-family: 'Noto Sans Display', sans-serif;
  text-decoration: none;
  font-size: 16px;
  color: rgb(242,205,0);
  white-space: nowrap;
  opacity: 0;
  transition: all 0.4s ease-in-out;
}
.nav-sidebar a:hover{
  color: rgb(190, 163, 6);
}
 /* Fixed sidenav, full height */
.sidenavDrop {
  height: 100%;
  width: 200px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #111;
  overflow-x: hidden;
  padding-top: 20px;
}

/* Style the sidenav links and the dropdown button */
.sidenavDrop a, .dropdownSide-btn {
  padding: 6px 8px 6px 16px;
  text-decoration: none;
  font-size: 18px;
  color: rgb(242,205,0);
  display: block;
  border: none;
  background: none;
  width:100%;
  text-align: left;
  cursor: pointer;
  outline: none;
  line-height: 2.75;
}
.dropdownSide-container a{
  line-height: 2;
  color: black;
  font-size: 14px;
}

/* On mouse-over */
.sidenavDrop a:hover, .dropdownSide-btn:hover {
  color: black;
}

/* Main content */
.mainSide {
  margin-left: 200px; /* Same as the width of the sidenav */
  font-size: 18px; /* Increased text to enable scrolling */
  padding: 0px 10px;
}

/* Add an active class to the active dropdown button */
.activeSide {
  background-color: rgb(140, 151, 140);
}

/* Dropdown container (hidden by default). Optional: add a lighter background color and some left padding to change the design of the dropdown content */
.dropdownSide-container {
  display: none;
  background-color: rgb(226,215,90);
  padding-left: 8px;
}

/* Optional: Style the caret down icon */
.fa-caret-down {
  float: right;
  padding-right: 8px;
}
.ayLineHeight{
  line-height: 1;
}
#nav-top{
  display: none;
}
/*Hamburger Menu Button*/
.btn-toggle-nav{
  display: block;
  position: fixed;
  text-align: center;
  z-index: 20;
  top: 1vh;
  left: 4vw;
  cursor: pointer;
  background-image: url("images/hMenuIcon.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 6vh;
  width: 10vw;
  transition: all 0.4s ease-in-out;
}
#natSor{
  top: 12vh;
  width: 75vw;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Open Sans Condensed', sans-serif;
  font-size: 1.25em;
  text-align: center;
}
#midtext{
  top: 44vh;
  font-size: .5em;
  text-align: justify;
  text-align-last: center;
  width: 80%;
}
#purpose{
  top: 69vh;
  width: 95vw;
  font-size: 1em;
}
.commonFF{
  text-align: center;
}
#maintext h3{
  color: rgb(228,2,43);
  font-size: 1.5em;
}
#lst{
  line-height: .9em;
  font-size: .51em;
  top: 79vh;
  width: 90vw;
  text-align: center;
  text-align-last: center;
}
#qrCode{
  display: none;
}
#qrCodeText{
  display: none;
}
#qrCodeTextMobile{
  display: block;
  position: absolute;
  top: 94vh;
  left: 50%;
  width: 80%;
  transform: translate(-50%, -50%);
  font-family: 'Open Sans Condensed', sans-serif;
  font-weight: 700;
  color: red;
  text-align: center;
  text-decoration: none;
  font-size: 1.3em;
  border: ridge 2px black;
  border-radius: 6px;
}
#photocred{
  bottom: 1.5vh;
}
#BOO{
  background-image: url("images/booBackIpad.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#ipadBack{
  display: none;
}
#BOOh2{
  top: 15vh;
  height: 14vh;
  width: 90vw;
  font-size: 3em;
}
#titleBOO p{
  top: 29vh;
  height: 4vh;
  width: 90vw;
  font-size: 1em;
}
#text{
  top: 66vh;
  width: 92vw;
  height: 63vh;
  left: 50%;
  margin: 0;
  padding: 0;
  font-size: 1em;
  padding-top: 8px;
  padding-right: 3px;
  padding-left: 3px;
  z-index: 5;
}
#text p{
  font-size: 0.9em;
}
#vidCred{
  display: none;
}
#booLocal{
  display: none;
}
#Hist{
  background-color: gold;
  /*border: solid blue;*/
}
img{
  height: 39vh;
  top: 12vh;
  left: 7vh;
  margin: 0;
  padding: 0;
  z-index: 2;
  transform: scale(1.5, 1.5);
/*   border: solid blue; */
}
#phihist{
  top: 32vh;
  width: 90vw;
  left: 50%;
  font-size: 1.3em;
  z-index: 4;
}
#text1{
  top: 73vh;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  height: 33vh;
  font-size: 0.6em;
}
#sor3_17{
  top: 105vh;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90vw;
  height: 25vh;
  font-size: 0.6em;
}
#shirley{
  top: 65vh;
  width: 100%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5, 1.5) rotate(90deg);
}
#honorShirley{
  height: 6vh;
  width: 95vw;
  top: 99vh;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 0.7em;
  color: white;
}
#createOver{
  height: 8vh;
  width: 40vw;
  top: 105vh;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1em;
}
#btnHide{
  display: none;
}
#histLocal{
  display: none;
}
#scPic{
  position: absolute;
  bottom: 1vh;
}
#pageTopIcon{
  position: absolute;
  bottom: 25vh;
  right: 6vw;
  transform: scale(.22, .22);
}
span a{
  text-decoration: none;
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 1.75em;
  color: red;
}
.hidden{
  display: none;
} 
#PDK{
  top: 12.75vh;
  width: 100%;
  font-size: 2em;
}
#foundH2{
  width: 100%;
  top: 30.75vh;
  font-size: 2.25em;
}
#founders{
  position: absolute;
  top: 62vh;
  left: 50%;
  margin: 0;
  padding:0;
  transform: translate(-50%, -50%) scale(0.9, 0.9);
  box-shadow: 5px 7px 8px rgba(128, 128, 128, 0.555);
  border: double 4px gold;
  border-radius: 6px;
}
#namesOfFounders{
  top: 84vh;
  width: 40vw;
}
#namesOfFounders a{
  text-decoration: none;
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 1em;
  color: gold;
}
#describe{
  top: 99vh;
  left: 50%;
  padding: 5px 5px 5px;
  transform: translate(-50%, -50%);
  height: 21vh;
  width: 83vw;
  font-size: 0.9em;
}
#foundnames{
  height: 28vh;
  width: 75vw;
  top: 126vh;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1em;
}
#foundLocal{
  display: none;
}
#bottom{
  position: absolute;
  left: 50%;
  transform: translateX(-50%, -50%);
  height: 2vh;
  width: 2vw;
  bottom: 2vh;
}
#nofTop{
  position: absolute;
  bottom: 2vh;
  left: 48%;
}
#nofTop a{
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 1em;
  color: gold;
  text-decoration: none;
}
#posthumous{
  position: absolute;
  bottom: -1vh;
  left: 50%;
  margin: 0;
  padding:0;
  transform: translate(-50%, -50%) scale(.75, .75);
  font-family: 'Noto Sans Display', sans-serif;
  font-size: .8em;
  color: rgba(242, 205, 0);
}
}






/* //////////// iPhone/Android properties end //////////// */





  /* //////////// iPad landscape properties //////////// */






@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
#one{
  height: 92vh;
}
#top, .navbtn{
  display: flex;
  height: 8vh;
  width: 100%;
  justify-content: space-evenly;
  align-items: center;
}
.eNavbtn{
  position: relative;
  top: -0.9vh;
}
.auNavbtn{
  position: relative;
  top: -0.25vh; 
}
.yesNavbtn{
  position: relative;
  top: -0.25vh; 
}
.ayNavbtn{
  position: relative;
  top: -0.25vh; 
  text-align: center;
}
#natSor{
  position: absolute;
  top: 17vh;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 75vw;
  font-size: 2em;
}
#midtext{
  top: 40vh;
  font-size: .7em;
  width: 80%;
  text-align: center;
}
#purpose{
  top: 58vh;
  width: 95vw;
  font-size: 1.3em;
}
#maintext{
  top: 19vh;
  height: 20vh;
  color: rgb(228,2,43);
  font-size: 1.75em;
}
#lst{
  top: 70vh;
  width: 80vw;
  font-size: 0.7em;
}
#AULocal{
  bottom: 5vh;
  right: 4vw;
  height: 16vh;
  width: 15vw;
}
#qrCodeTextMobile{
  display: none;
}
#qrCode{
  position: absolute;
  top: 22vh;
}
#qrCodeText{
  top: 85vh;
  font-size: 0.8em;
  text-align: center;
}
#photocred{
  bottom: 2vh;
  left: 50%;
  transform: translate(-50%,-50%);
  font-size: 0.7rem;
}
#BOO{
  background-image: url("AU.images/booBackIpad.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#BOOVid{
  display: none;
}
#BOOh2{
  top: 14vh;
  height: 14vh;
  width: 90vw;
  font-size: 4em;
}
#titleBOO p{
  top: 24vh;
  height: 5.5vh;
  width: 55vw;
  font-size: 1.7em;
}
#text{
  top: 59vh;
  width: 57.5vw;
  height: 58vh;
  font-size: 1em;
}
#vidCred{
  bottom: 10vh;
  left: 1vw;
  font-size: 0.7rem;
}
#booLocal{
  bottom: 12vh;
  right:  4vw;
  height: 18vh;
  width: 15vw;
}
#Hist{
  background-image: url("images/histBackIpad.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
img{
  height: 39vh;
  top: 50vh;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.75, 1.75);
/*   border: solid blue; */
}
#phihist{
  top: 50vh;
  width: 45vw;
  font-size: 1.7em;
}
#text1{
  left: 2vw;
  top: 18vh;
  width: 25vw;
  height: 28vh;
  font-size: 0.5em;
}
#sor3_17{
  left: 1vw;
  top: 59vh;
  width: 27vw;
  height: 20vh;
  font-size: 0.5em;
}
#createOver, #honorShirley{
  display: none;
}
#histLocal{
  bottom: 30vh;
  right:  4vw;
  height: 15vh;
  width: 13vw;
}
#Found{
  background-image: url("images/foundBackIpad.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#PDK{
  top: 12vh;
  width: 100%;
  font-size: 2.2em;
}
#foundH2{
  top: 23.5vh;
  width: 60vw;
  font-size: 2.4em;
}
#founders{
  top: 59vh;
  transform: translate(-50%, -50%) scale(1.25, 1.25);
}
#namesOfFounders{
  top: 87vh;
  width: 40vw;
  text-align: center;
/*   border: solid blue; */
}
#namesOfFounders a{
  text-decoration: none;
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 1em;
  color: rgb(242, 205, 0);
}
#describe{
  top: 105vh;
  left: 50%;
  padding: 5px 5px 5px;
  transform: translate(-50%, -50%);
  height: 11vh;
  width: 75vw;
  font-size: 0.9em;
  color: rgb(242, 205, 0);
}
#foundnames{
  height: 30vh;
  width: 55vw;
  top: 128vh;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.1em;
  color: rgb(242, 205, 0);
}
#foundLocal{
  bottom: 62.5vh;
  right: 3.5vw;
  height: 16vh;
  width: 15vw;
}
#bottom{
  position: absolute;
  left: 50%;
  transform: translateX(-50%, -50%);
  height: 2vh;
  width: 2vw;
  bottom: 2vh;
}
#nofTop{
  position: absolute;
  bottom: 2vh;
  left: 48%;
}
#nofTop a{
  font-family: 'Noto Sans Display', sans-serif;
  font-size: 1em;
  color: rgb(242, 205, 0);
  text-decoration: none;
}
#posthumous{
  position: absolute;
  bottom: -1vh;
  left: 50%;
  margin: 0;
  padding:0;
  transform: translate(-50%, -50%) scale(.75, .75);
  font-family: 'Noto Sans Display', sans-serif;
  font-size: .8em;
  color: rgb(242, 205, 0);
}
#footer{
  height: 1fr;
  overflow: hidden;
  width: 100%;
}
#copyright{
  top: 10.75vh;
  left: 61vw;
  width: 55vw;
  font-size: 0.8rem;
}
#facebookIcon{
  top: 6vh;
  left: 77.5%;
}
#nspdkCred p{
  top: 6.5vh;
  left: 42.75vw; 
}
#nspdkDelta{
  position: absolute;
  top: 2vh;
  left: 49%;
}
#footerNavOne{
  position: absolute;
  top: 0.25vh;
  left: 3vw;
}
#footerNavTwo{
  top: 0.25vh;
}
}





/* //////////// iPad landscape properties end //////////// */






 /* //////////// iPad portrait properties //////////// */
  

  
  
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
#top, .navbtn{
  display: flex;
  height: 8vh;
  width: 100%;
  padding: 0;
  justify-content: space-evenly;
  align-items: center;
  font-size: 0.8em;
}
.eNavbtn{
  position: relative;
  width: 10vw;
  font-size: 1.2em;
}
.auNavbtn{
  position: relative;
  width: 10vw;
  font-size: 1.2em;
}
.yesNavbtn{
  position: relative;
  width: 10vw;
  font-size: 1.2em;
}
.ayNavbtn{
  position: relative;
  width: 11vw;
  font-size: 1.2em;
}
#natSor{
  top: 15vh;
  width: 85vw;
  font-size: 2em;
}
#midtext{
  top: 37vh;
  font-size: .7em;
  width: 80%;
  text-align: center;
}
#purpose{
  top: 53vh;
  width: 95vw;
  font-size: 1.1em;
}
#lst{
  top: 61vh;
  width: 80vw;
  font-size: 0.7em;
}
#AULocal{
  bottom: 26vh;
  right:  5vw;
  height: 12vh;
  width: 20vw;
}
#qrCode{
  top: 34vh;
  left: -10.5vw;
  transform: scale(0.35, 0.35)
}
#qrCodeTextMobile{
  display: none;
}
#qrCodeText{
  top: 84vh;
  left: 1vw;
  width: 28vw;
  font-size: 0.8em;
  text-align: center;
}
#photocred{
  bottom: 1vh;
}
#ipadBack{
  height: 100%;
  width: 100%;
}
#BOO{
  background-image: url("AU.images/booBackIpad.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
#BOOVid{
  display: none;
}
#BOOh2{
  top: 17vh;
  height: 14vh;
  width: 90vw;
  font-size: 4em;
}
#titleBOO p{
  top: 30vh;
  height: 4vh;
  width: 70vw;
  font-size: 1.5em;
}
#text{
  top: 57vh;
  width: 65vw;
  height: 43vh;
  font-size: 1em;
}
#vidCred{
  bottom: 7vh;
  left: 1vw;
}
#booLocal{
  bottom: 7.75vh;
  right:  4vw;
  height: 12vh;
  width: 20vw;
}
img{
  height: 67vh;
  top: 35vh;
  margin: 0;
  padding: 0;
  z-index: 2;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.8, 0.8);
/*   border: solid blue; */
}
#phihist{
  top: 37vh;
  width: 90vw;
  left: 50%;
  font-size: 1.3em;
  z-index: 4;
}
#text1{
  top: 66vh;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92vw;
  height: 11vh;
  font-size: 0.6em;
}
#sor3_17{
  top: 78vh;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92vw;
  height: 9vh;
  font-size: 0.6em;
}
#honorShirley{
  height: 8vh;
  width: 55vw;
  top: 88vh;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.9em;
}
#shirley{
  top: 50vh;
  width: 100%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.06, 1.06) rotate(90deg);
}
#createOver{
  height: 3vh;
  width: 6vw;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.8, 1.8);
  top: 90vh;
}
#histLocal{
  top: 12vh;
  width: 20vw;
  height: 12vh;
}
#PDK{
  top: 12vh;
  width: 100%;
  font-size: 2.4em;
}
#foundH2{
  top: 21vh;
  width: 60vw;
  font-size: 2.6em;
}
#founders{
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%, -50%) scale(.65, .65);
}
#foundLocal{
  bottom: 60vh;
  right: 3.5vw;
  height: 13vh;
  width: 20vw;
}
#namesOfFounders{
  top: 75vh;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40vw;
  text-align: center;
}
#namesOfFounders a{
  font-size: 1.5em;
}
#describe{
  top: 99vh;
  left: 50%;
  padding: 5px 5px 5px;
  transform: translate(-50%, -50%);
  height: 11vh;
  width: 75vw;
  font-size: 1em;
  color: rgb(242, 205, 0);
}
#foundnames{
  height: 30vh;
  width: 55vw;
  top: 126vh;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 1.5em;
  color: rgb(242, 205, 0);
}
#footer{
  height: 1fr;
  overflow: hidden;
  width: 100%;
}
#footerNavOne ul li a, #footerNavTwo ul li a{
  font-size: 1rem;
}
#copyright{
  top: 9vh;
  left: 56.5%;
  width: 44vw;
  font-size: 0.7rem;
/*   border: solid blue; */
  text-align: center;
}
#facebookIcon{
  top: 5vh;
  left: 76%;
}
#nspdkCred p{
  top: 5.15vh;
  left: 38vw; 
}
#nspdkDelta{
  top: 2vh;
  left: 45.75vw;
}
}
 

 /* //////////// iPad portrait properties end //////////// */