body {
  padding: 0;
  background-color: #292929;
  color:#FFFFFF;
  font-family: arial,helvetica,verdana,sans-serif;
  font-size: 75%;
  overflow-x: hidden;
}

a {
  text-decoration:none;
  font-weight: bold;
}

a:link {
  color:#909090;
  background-color: #000;
  text-decoration:underline;
}

a:hover,a:active {
  color:#B200F9;
}

.navBar a.med:hover,
.navBar a.med:active,
.navBar a.long:hover,
.navBar a.long:active,
.navBar a.short:hover,
.navBar a.short:active
{
  color:#B200F9;
}

.bannerLink:link, .bannerLink:visited {
  background-color: #00982f;
  font-family: georgia,"Times New Roman",Times,serif;
  font-size: 1.1em;
  color:#FFFFFF;
  margin: .4em 0;
  padding: 14px 30px;
  text-align: center;
  display: inline-block;
}

.bannerLink:hover, .bannerLink:active {
  background-color: #429800;
}

h1 {
  font-family: georgia,"Times New Roman",Times,serif;
  font-size: 1.2em;
  margin: .5em 0
}
h2 {
  font-family: georgia,"Times New Roman",Times,serif;
  font-size: 1.1em;
  color:#FF0000;
  margin: .4em 0;
}

h3 {
  font-size: 1.1em;
  margin: .4em;
  color:#FF0000;
}

h4 {
  font-size: 1em;
  margin: .4em;
}

header {
  display: flex;
  justify-content: center;
  background-image: url(../img/tile.jpg);
  background-repeat: repeat-x;
  background-size: cover;
}

header > div {
  width: 25%;
  margin: .8em .5em .8em .5em;
  text-align: center;
  line-height:1;
}

header > div.headerTitle {
  width: 40%;
}

header div.headerTitle .reveal,
header div.headerBook .reveal {
  display: none;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

section {
  text-align: center;
}

section .headline {
  padding-top: 1em;
  padding-bottom: 0;
  margin-bottom: 0;
}

.card {
  position: relative;
}

.card-content p {
  padding: 0 .8em;
  margin-top: 0;
  text-align: justify;
}

.content-wrap {
  padding: 0 1.5em;
}

.content-text > p {
  margin-left: 0;
  margin-right: 0;
}

.copyright {
  font-size:10px;
  line-height:1;
  color:#FFFFFF;
  text-align:center;
  margin:10px;
  padding:0px;
}

.green {
  color:#00FF00;
}

.white {
  color: #FFFFFF;
}

.isAPhone {
  display: inline;
}

.isNotAPhone {
  display: none;
}

.logo {
  width:95%;
  min-width:80px;
  max-width:200px;
  margin: .6em;
}

.navBar {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.navBar > li {
  display: inline;
}

.navBar a,
.navBar a:link {
  display: inline-block;
  background-color: #BBB;
  background-image: url(../img/tile2.jpg);
  border-radius: 25px 25px 0 0;
  text-decoration: none;
  color: #000;
  width: 70px;
  height: 34px;
  margin: -1.1em 0 0 0;
  text-align: center;
  line-height: 34px;
  font-size: .8em;
  font-family: georgia,"Times New Roman",Times,serif;
  font-weight: bold;
  border: 1px solid black;
  box-shadow: .5em 0px 0px 0px rgba(64, 64, 64, 0.5) inset;
  /*position: relative;*/
  /*top: -1.1em;*/
}

.navBar a.short,
.navBar a.short:link{
  width: 60px;
  padding-left: .5em;
  border-radius: 28px 28px 0 0;
}

.navBar a.long,
.navBar a.long:link{
  width: 96px;
  border-radius: 15px 15px 0 0;
}

.navBar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.pricing:before {
  content: "Pricing: Adults; $17 online, $20 at door or by phone. Kids; $13 online, $15 at door or by phone.";

}

#intro {
  position: relative;
  z-index: 1;
  min-height: 250px;
  max-height: 300px;
}

#intro .panorama {
  position: absolute;
  background: #333 url('../img/RichmondPanorama.jpg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity:0.30;
}

#fh-sm {
  display: inline-block;
  margin: .3em 0;
}

#fh-md {
  display: none;
  margin: .4em 0;
}

.section-about {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
  margin: 1em 10%;
  background-color: #333;
}

.about {
  margin-top: 1em;
}

.nopic {
  margin-top: 0;
}

.about > img {
  width: 50%;
  margin: auto;
}

.about > p {
  margin-left: 1.5em;
  margin-right: 1.5em;
  text-align: justify;
}


#section-info {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  padding: 1em;
}

#section-info > .qa {
  margin-left: 0;
  margin-right: 0;
  border: 2px solid #333333;
}

.qa > .question {
  padding: 0;
  margin: .5em;
  text-align: left;
  font-family: arial,helvetica,verdana,sans-serif;
}

.qa > p {
  text-align: left;
  margin: 0 .5em .5em .5em;
  padding: 0;
}

.qa > .answerList {
  text-align: left;
  padding-left: 2em;
  padding-right: 1em;
  list-style-type:circle;
}

.qa > .answerList li {
  margin-bottom: .5em;
}

#section-tours {
  padding: 1em;
}

#section-tours  ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

#section-tours  ul > li {
  margin: 0 1em 1em 1em;
  background: #333333;
  width: 290px;
}

#section-tours div.card a {
  position: absolute;
  top: 8px;
  left: 8px;
}
@media only screen and (max-width:492px) {
  .bannerLink:link, .bannerLink:visited {
      font-size:1em;
  }
}
@media only screen and (min-width:475px) {
  body {
    font-size: 100%;
  }
  .navBar {
    padding: 0 10%;
  }
  .navBar a,
  .navBar a:link {
    width: 80px;
  }
  .navBar a.long,
  .navBar a.long:link {
    width: 124px;
  }

}
@media only screen and (min-width:570px) {
  #fh-sm {
    display: none;
  }
  #fh-md {
    display: inline-block;
  }
  .bannerLink:link, .bannerLink:visited {
      font-size:1.2em;
  }
}
@media only screen and (min-width:384px) and (max-width:719px){
  .navBar {
    justify-content: flex-start;
  }
}
@media only screen and (min-width:750px){
  header div.headerTitle .reveal,
  header div.headerBook .reveal {
    display: block;
  }
  h1 {
    font-size: 1.9em;
  }
  h2 {
    font-size: 1.5em;
  }
  .content-text > p {
    margin-left: 10%;
    margin-right: 10%;
  }
  .isAPhone {
    display: none;
  }
  
  .isNotAPhone {
    display: inline;
  }
  .navBar a,
  .navBar a:link {
    height: 46px;
    line-height: 46px;
   /* margin-top: -1em;*/
  }
  #section-info > .qa {
    margin-left: 12.5%;
    margin-right: 12.5%;
  }
  .qa > p {
    margin: 0 .8em .8em .8em;
  }
}
@media only screen and (min-width:1024px){
  .content-text > p {
    margin-left: 15%;
    margin-right: 15%;
    font-size: 1.1em;
  }
  #intro {
    min-height: 300px;
  }
  #intro .panorama {
    height: 300px;
  }
  .card-content p {
    font-size: .8em;
  }  
  #section-info > .qa {
    margin-left: 20%;
    margin-right: 20%;
  }
  #section-tours  ul {
    flex-flow: row wrap;
    align-items: stretch;
  }
  .section-about {
    margin-left: 20%;
    margin-right: 20%;
  }
}
@media only screen and (min-width:1200px) {
  #section-tours  ul > li {
    align-items: flex-start;
    display: flex;
    flex: 1;
    justify-content:center;
    text-align: center;
  }
}