/* Ensure portrait format for actual body */

@media (orientation: landscape) {
  div#main, div#hero, div#hero-lite {
    width: 100vh ;
    margin: auto ;
  }
  div#nav, div#footer {
    width: 100% ;
  }
}

@media (orientation: portrait) {
  div#main, div#hero, div#hero-lite {
    width: 98vw ;
  }
  div#nav, div#footer {
    width: 100% ;
  }
}

/* Applies to entire page */

body {
  font-family: Tahoma, sans-serif;
  margin: auto ;
  text-align: left ;
}

/* Hide Accessibility Links */
.skip {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Draft comments */
p.draft {
  background-color: yellow ;
  color: black ;
  font-weight: bold;
  font-size: 2em ;
}

div.boxes {
    margin-left: 1vmin ;
    margin-right: 1vmin ;
    display: flex ;
    flex-wrap: wrap ;
}

div.box {
  display: flex ;
  clear: both ;
  background-color: #002B5B ;
  color: #FFFFFF ;
  border-radius: 20px ;
  padding: 0 ;
  text-align: center ;
  vertical-align: middle ;
  width: 98vmin ;
  justify-content: center ;
}

div.ttl {
    font-size: 6vmin ;
    font-weight: bold ;
}

div.size1 {
    font-size: 5vmin ;
    font-weight: bold ;
}
div.size2 {
    font-size: 4vmin ;
    font-weight: bold ;
}
div.size3 {
    font-size: 2.75vmin ;
    font-weight: bold ;
}
div.size4 {
    font-size: 1.75vmin ;
    font-weight: bold ;
}

img.wideimage {
  width: 94% ;
  margin: 3% ;
}

/* Nav Specific */

div#nav {
  clear: both ;
  background-color: #002B5B ;
  color: #FFFFFF ;
  padding: 1vmin ;
  margin-bottom: 2vmin ;
  display: flex ;
  flex-wrap: wrap ;
  font-size: 2em ;
  font-weight: bold ;
  justify-content: flex-end;
  align-items: center;
  flex-direction: row;
}

div#nav img.navlogo {
  vertical-align: middle ;
  width: 1.5vmin ;
}

div#nav .navent {
}

div#nav .naventright {
  padding-right: 1vmin ;
  margin-left: auto ;
}

div#nav a:link, a:visited, a:hover, a:active {
  text-decoration: none ;
  color: white ;
  vertical-align: middle ;
  padding-left: 2vmin ;
  padding-right: 2vmin ;
  padding-top: 3vmin ;
  padding-bottom: 2vmin ;
  font-size: 3.5vmin ;
}

div#nav a.floatright {
  text-align: right ;
  padding-right: 2vmin ;
}

div#nav img.ascharacter {
    width: 3.5vmin;
    padding-top: 1vmin;
}


/* Hero Specific */

div#hero {
    margin: auto ;
    text-align: center ;
    font-size: 2.5vmin ;
    font-weight: normal ;
}

div#hero .ttl {
  padding-left: 10vmin ;
  padding-right: 10vmin ;
}

div#hero div.img-wrapper {
  margin: 2vmin ;
  max-height: 50vmin ;
    overflow: hidden ;
}

div#hero img.pic {
    display: block ;
    width: 96vmin;
    margin-left: 1vmin ;
    margin-right: 1vmin ;
    margin-top: 1vmin ;
    margin-bottom: 1vmin ;
}

div#hero div.smallbox {
  height: 18vmin ;
  width: 18vmin ;
  margin-left: 1vmin ;
  padding: 1vmin ;
}
div#hero div.largebox {
  height: 18vmin ;
  width: 74vmin ;
  margin-right: 1vmin ;
  padding: 1vmin ;
}



/* Hero-Lite Specific */

div#hero-lite {
    margin: auto ;
    text-align: center ;
    font-size: 2.5vmin ;
    font-weight: normal ;
}

div#hero-lite div.largebox {
  padding-top: 1vmin ;
  height: 13vmin ;
  width: 52vmin ;
  font-size: 3.5vmin ;
  padding-left: 2vmin ;
}

div#hero-lite div.smallimage-left {
  height: 14vmin ;
  width: 18vmin ;
}

div#hero-lite div.smallimage-right {
  height: 14vmin ;
  width: 18vmin ;
  padding-right: 7vmin ;
}


div#hero-lite img.pic {
    display: inline-block ;
    height: 100% ;
    margin: 0px ;
}

img.qrcode {
    width: 16vmin ;
    height: 16vmin ;
    position: relative;
}

img.qrcode-larger {
    width: 20vmin ;
    height: 20vmin ;
    position: relative;
}

/* Main Specific */

div#main {
    margin: auto ;
    padding: 1vmin ;
    width: 98vmin ;
    text-align: left ;
    font-size: 1.25em ;
    font-weight: normal ;
}

div#main a:visited, a:link, a:hover, a:active {
  color: blue ;
  text-decoration: none ;
  border: 0 ;
  padding: 0 ;
}

/* Main / Artist */

div#main div#artistbioframe {
  display: none ;
  color: black ;
  width: 94vmin ;
  border: 5px solid #002B5B ;
  border-radius: 3mm ;
  background:  #F0F0F0;
  padding: 2vmin ;
  align: right ;
}

div#main div#artistbioframe a.artistbioclose {
  position: absolute ;
  z-index: 100 ;
  height: 1.3em ;
  background: #002B5B ;
  padding: 0.5em ;
  margin: 0 ;
  color: white ;
}

div#main div#artistbio {
  color: black ;
}

div#main div.txt {
    font-size: 1em ;
    margin-top: 0.5em ;
    margin-bottom: 1em ;
}


div#main div#artists {
  width: 98vmin ;
  display: flex ;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

div#main div#artists div.artistlink {
  display: block ;
  width: 20% ;
  margin: 1% ;
  padding: 1% ;
  background: white ;
  text-decoration: none ;
}

div#main div#artists div.artistlink p {
  text-align: center ;
}

div#main div#artists div.artistlink img {
  width: 100% ;
}

div#main div.pictures {
  width: 98vmin ;
  display: flex ;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

div#main div.pictures div.picture {
  height: 22vmin ;
  margin: 1vmin ;
  padding: 0.2vmin ;
  border: 2px solid #002B5B ;
}

div#main div.pictures div.picture img {
  height: 100% ;
}

div#main div.twoimages {
  width: 98vmin ;
  display: flex ;
  flex-direction: row ;
  flex-wrap: wrap ;
  justify-content: center ;
}

div#main div.twoimages div.image {
  width: 45% ;
}

div#main div.twoimages div.image img {
  width: 100% ;
}

div#main img.asptext {
  height: 4vmin;
}

/* Footer Specific */

div#footer {
  background: black ;
  padding: 2vmin ;
  height: 18vmin ;
}

div#footer div.footer-wrapper {
  display: flex ;
  justify-content: space-between ;
}


div#footer div.footermenu {
  height: 14vmin ;
  padding-left: 2vmin ;
  float: left ;
}

div#footer div.footerlogo {
  height: 14vmin ;
  padding-right: 5vmin ;
  float: right ;
}

div#footer div.footerlogo img {
  height: 100% ;
}

div#footer a:link, a:visited, a:hover, a:active {
  text-decoration: none ;
  font-size: 2vmin ;
  color: white ;
}