/*--This main css file contains the default rules and is geared toward the small/phone view--*/

/*----------- BODY-------*/
body {
  font-size: 16px;
  font-family: 'Roboto', sans-serif;
  color: black;
  width: 100%;
  background-color: white;
  min-width: 250px;
  max-width: 500px;
  margin: auto;
}

/*----------- HEADER-------*/
header {
  background-color: #80b8af;
  display: flex;
  color: #fff8ea;
  align-items: center;
  font-family: 'Libre Baskerville', serif;
  margin: 0;
}

.tilogo {
  min-width: 100px;
  width: 125px;
  border: 3pt solid #fff8ea;
  margin-left: -3px;
}

.tilogo > img {
  width: 80%;
  margin-left: 9%;
  margin-top: 5%;
  margin-bottom: 5%;
}

.headertext{
  width: 60%;
}

.headertext > h1 {
  margin-left: 10px;
  margin-top: 10px;
  margin-bottom: 2px;
  color: white;
  font-size: 23px;
}

#timotto {
  font-size: 14px;
  font-style: italic;
  margin-left: 10px;
}

/*----------- NAV MENU-------*/

nav {
  font-size: 18px;
  font-family: 'Roboto', sans-serif;
  font-weight: bold;
  position: absolute;
  width: 100%;
  margin: 0;
}

nav button {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 5px;
  padding-top: 5px;
  background-color: rgba(81, 154, 156, 0.705);
  width: 100%;
}

ul {
  /*hidden nav menu */
  list-style-type: none;
  background-color: rgba(81, 154, 156, 0.705);
  margin-top: 0;
  padding: 2% 0 2% 0;
  text-align: center;

}

li  a {
  /*hidden nav menu */
  display: block;
  max-width: 100%;
  margin: 2% 0 2% 0;
  color: white;
  text-decoration: none;
}


#active {
  background-color: rgba(255, 255, 255, 0.527);
  color: #80b8af;
}

#active:hover {
  color: none;
  background-color: none;
}

li:hover {
  color: black;
  background-color: rgba(247, 203, 8, 0.63);
}

.hide {
  display: none;
  margin: 0;
  padding: 0;
}

/*----------- MAIN -------*/
main {
    background-color: white;
    display: block;
    align-items: center;
    max-width: 100%;
}

/*----------- BANNER SECTION -------*/
  .hbannerImage {
    width: 100%;
    margin: 0;
  }
  .hbannerImage > img {
    width: 100%;
  }
  
/*----------- WELCOME TEXT -------*/
.welcome {
  display: flex;
  flex-direction: column;
  margin-bottom: 2%;

}
.welcomeData > h2 {
  font-family: 'Libre Baskerville', serif;
  color: orange;
  background-color: rgba(255, 166, 0, 0.301);
  text-align: center;
  padding: 5%;
  margin: 0;
}
#welcomeText {
  text-align: justify;
  background-color: rgba(245, 193, 97, 0.068);
  padding: 2%;
  margin: 0;
}

.welcomeData a {
  color: #80b8af;
  font-weight: bold;
}

/*----------- TEMPLE DATA -------*/
.locations > h3 {
  color: white;
  background-color: #80b8af;
  font-size: 30px;
  padding: 2%;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
}

.aLocation {
  color: white;
  background-color: orange;
  padding: 2%;
  max-width: 130px;
  position: relative;
  margin-bottom: -5%;
}

.locations {
  display: flex;
  flex-direction: column;
}

.cityTemple > img {
  width: 100%;
}

.cityinfo {
  margin-top: -59%;
  margin-bottom: 1%;
  color: white;
  background-color: rgba(255, 166, 0, 0.719);
  padding: 2%;
  max-width: 130px;
  font-size: 12px;
  text-align: left;
  position: relative;
}

/*----------- ACTIVITY DATA -------*/
.activities > h3 {
  color: white;
  background-color: #80b8af;
  font-size: 30px;
  padding: 2%;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
}

.activities {
  display: flex;
  flex-direction: column;
  padding: 2%;
}

.activity > img {
  width: 100%;
  margin-bottom: -5%;
}

.activityInfo {
  background-color: rgba(255, 166, 0, 0.719);
  padding: 2%;
  margin-top: 5%;
  margin-bottom: 2%;
}

.activityInfo a {
  color: white;
}  

/*----------- FOOTER -------*/
footer {
  color: white;
  display: flex;
  flex-direction: column;
  margin-top: 0;
  background-color: #80b8af;
}

.contact {
  padding: 5%;
}

#templeinnMap > iframe {
  width: 95%;
  margin-left: 2%;
}

.footer-bar {
  color: white;
  background-color: rgba(255, 166, 0, 0.918);
  padding-bottom: 2%;
  padding-top: 2%;
  text-align: center;
  font-size: smaller;
  margin: 0;
}

/*-------- TEMPLES PAGE ------*/

/*-- Temple Info Section -- */
.templeLocations > h3 {
  color: white;
  background-color: rgba(255, 166, 0, 0.822);
  font-size: 30px;
  padding: 2%;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
}

.aLocationT {
  color: white;
  background-color: rgba(255, 166, 0, 0.904);
  padding: 2%;
  max-width: 130px;
  position: relative;
  margin-bottom: -15%;
}

.templeLocations {
  display: flex;
  flex-direction: column;
  margin: 0%;
}

.allTemples {
  display: flex;
  flex-direction: column;
  margin: 2%;
}

.cityTemple > img {
  width: 96%;
  max-height: 430px; 
  margin: 2% 2% 0 2%;
}

.templeInfo {
  margin: 0 2% 5% 2%;
  color: white;
  background-color: rgba(255, 166, 0, 0.767);
  padding: 2%;
  width: 92%;
  font-size: 12px;
  text-align: left;
}

/*-------- RESERVATIONS PAGE ------*/
.reserveAll {
  background-color: rgba(102, 0, 0, 0.849);
  width: 100%;
  text-align: center;
  margin-top: 0;
}

.reserveAll > h3 {
  color: white;
  font-size: 20px;
  padding: 2%;
}

.reservations {
  margin: 0 0 5% 0;
  color: rgb(49, 5, 5);
  padding: 2%;
}

em {
  color: red;
  font-size: 30px;
  font-weight: bold;
}

.persInfo, .dateInfo, .addInfo {
  color: black;
  font-weight: bold;
  background-color: rgba(255, 238, 0, 0.151);
  margin-bottom: 5%;
}

#pi {
  font-size: 20px;
  color: white;
  background-color: rgba(102, 0, 0, 0.849);
  padding: 2%;
  margin-bottom: 5%;
  max-width: 240px;
}

label {
  color: black;
  font-size: 18px;
}

#subbutton {
  padding: 5%;
  color: white;
  background-color: orange;
  font-size: 25px;
  margin: 4% 22%;
  font-weight: bold;
  width: 50%;
  border-radius: 8px;
}

.reservationsf {
  margin: 15%;
  color: rgb(0, 128, 0);
  padding: 2%;
}

/*-------- SERVICES PAGE ------*/
.tiServices > h3 {
  color: white;
  background-color: rgba(255, 166, 0, 0.822);
  font-size: 30px;
  padding: 2%;
  text-align: center;
  margin-top: 0;
  margin-bottom: 0;
}

.servicesTitle {
  color: white;
  background-color:#80b8af;
  width: 100%;
  padding-top: 2%;
  padding-bottom: 2%;
  text-align: center;
}

.amenitiesIndex, .specialservicesIndex, .fulltimeservicesIndex, .receptionservicesIndex {
  background-color: rgb(208, 236, 235);
  margin: 2%;
}

ul.servicesList {
  list-style-type: circle;
  background-color: inherit;
  padding: 4%;
  line-height: 2em;
  font-size: 12px;
  text-align: left;
}

.servicesgoodGrid {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2px;
  padding: 2%;
}

.serveGrid > img {
  width: 100%;
}

/*-------- CONTACT US PAGE ------*/
#titleGrid {
  color: white;
  background-color: rgba(255, 166, 0, 0.651);
  padding: 2%;
  max-width: 200px;
  position: relative;
  margin-bottom: -13%;
}

.contactColumn > h3 {
  background-color: orange;
  color: white;
  padding: 2%;
  text-align: center;

}

.addressData {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 2%;
  margin: 2%;
  width: 95%;
  background-color: rgba(113, 212, 196, 0.486);
  text-align: center;
  margin-bottom: 4%;
}

.tidatagrid1, .tidatagrid2, .tidatagrid3 {
  color: black;
  padding: 3%;
}

.socials {
  display: flex;
  flex-direction: column;
  text-align: center;
  background-color: rgba(113, 212, 196, 0.486);
  margin: 2%;
  margin-bottom: 4%;
  padding: 2%;
  line-height: 1.5em;
}

.themapster {
  display: flex;
  flex-direction: column;
  text-align: center;
  margin: 2%;
  margin-bottom: 4%;
  background-color: rgba(113, 212, 196, 0.486);
  padding: 5%;
}

#cousfo {
  background-color: #80b8af;
  color: white;
  padding: 4%;
  font-size: 20px;
  font-weight: bold;
}

.contactusForm {
  margin: 2%;
}