*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  margin: 0px;
  font-family: arial, 'Open Sans', 'sans-serif';
  background-color: #fff;
  color: #000000;
  background-image: url(../images/ferguson.jpg);
}
::-webkit-scrollbar {width: 1.5rem}
::-webkit-scrollbar-track {background: #124414; margin-block:0}
::-webkit-scrollbar-thumb {background: #006600; border-radius:1vw; border:solid .01em white}
::-webkit-scrollbar-thumb:hover {background: #09094b}
@supports (scrollbar-color: black white)
{
    *{scrollbar-color: green #124414;
    scrollbar-width: auto;
    }
}
@font-face {
      font-family: "stonehenge";
      src: url("/system/stonehen.ttf");
    }

h1,
p {
  margin: 0 0 1em 0;
}
h1 {
  text-align: center;
}

.wrapper {
  max-width: 940px;
  margin: 0 20px;
  /* display: grid;*/
  grid-gap: 10px;
}
/* no grid support? */

.wrapper {
  display: flex;
  flex-wrap: wrap;
}

.wrapper {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: minmax(10px, auto);
}

.wrapper div {
  color: #fff;
  border-radius: 5px;
  padding: 20px;
  font-size: 150%;
  margin-bottom: 0px;
}

.panel {
  /* needed for the flex layout*/
  margin-left: 5px;
  margin-right: 5px;
  flex: 1 1 200px;
}

a.panel {
  color: white;
  text-decoration: none;
}

.panel-title {
  text-align: center;
  font-family: stonehenge, sans-serif;
  margin: 0;
  font-size: 30px;
  letter-spacing: .1em;
}

.panel-text {
  font-size: 16px;
  text-align: center;
}

.tall-panel {
  grid-row-end: span 2;
}

.wide-panel {
  width: 100%;
  background-color: white;
  grid-column: 1 / -1;
}

.wide-panel h1 {
  color: black;
  letter-spacing: .15em;
}

.page-heading {
  text-align: center;
  font-family: stonehenge, sans-serif;
  margin: 0;
  font-size: 50px;
}

header::before {}

header,
footer {

  flex: 0 1 100%;
  grid-column: 1 / -1;
}

header {

  background: #ffffff;
  border-bottom: 1px solid #dddddd;
  padding: 0px;
  background-image: url(../images/button.jpg);
    transform: translateZ(0);
}

footer {
  background: #ffffff;
  border-bottom: 1px solid #dddddd;
  padding: 15px;
  background-image: url(../images/button.jpg);
  text-align: center;
}

footer a:link,
a:visited {
  font-size: 1em;
  color: #0B0282;
}

footer a:hover {
  font-size: 1em;
  color: green;
}


.header-text {
  font-family: stonehenge, sans-serif;
  font-size: 32px;
  text-align: center;
  font-weight: bold;
}

.header-subtext {
  font-family: sans-serif;
  font-style: normal;
  font-size: 23px;
  text-align: center;
  margin: 0 0 1em 0;
  font-weight: normal;
}

.hamburger {
  background: none;
  position: absolute;
  top: 0;
  right: 0;
  line-height: 45px;
  padding: 5px 15px 0px 15px;
  color: #999;
  border: 0;
  font-size: 1.4em;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  z-index: 1;
}

.cross {
  background: none;
  position: absolute;
  top: 0px;
  right: 0;
  padding: 7px 15px 0px 15px;
  color: #999;
  border: 0;
  font-size: 3em;
  line-height: 65px;
  font-weight: bold;
  cursor: pointer;
  outline: none;
  z-index: 10000000000000;
}

.menu {
  z-index: 1000000;
  font-weight: normal;
  background-image: url(../images/ferguson.jpg);
  background-repeat: repeat;
  position: absolute;
  text-align: center;
  font-size: 16px;
  width: 252px;
  top: 54px;
  right: 0px;
  border: 2px solid white;
  line-height: 60px;
}

.menu ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
}

.menu li {
  display: block;
  padding: 0;
}
/*.menu li:hover{display: block;    background:#ffffff; padding:15px 0 15px 0; border-bottom:#dddddd 1px solid;} */

.menu ul li a {
  text-decoration: none;
  margin: 0px;
  color: white;
  background-color: #aa0000;
  padding: 5px 40px;
  letter-spacing: .1em;
    outline: 3px solid #aa0000;
    transition: all ease-in-out 300ms;
}
/*.menu ul li a:hover {  color: #666; text-decoration:none;}*/

/* .menu a {
  text-decoration: none;
  color: #666;
} */

.menu a:hover, .menu a:focus {
  text-decoration: none;
 /* color: #666; */
    outline: 5px solid white;
    outline-offset: 3px;
}
/* We need to set the margin used on flex items to 0 as we have gaps in grid.  */

@supports (display: grid) {
  .wrapper>* {
    margin: 0;
  }
}

.panel1 {
  background-color: #0B0282;
}

.panel2 {
  background-color: #196820;
}

.panel3 {
  background-color: #0B0220;
}

.panel4 {
  background-color: #B40505;
}

.panel5 {
  background-color: #1e1b52;
}

.panel6 {
  background-color: #f00000;
}

.panel7 {
  background-color: green;
}

.hamburger-button {
  padding: 0;
  max-width: 50px;
}

.cross-button {
  padding: 0;
  max-width: 50px;
}

#title-image {
  padding: 0;
  width: 100%;
  top: 0;
  left: 0;
}

#flag {
  display: none;
  float: right;
}

.footer-links {
  display: none;
}

@media only screen and (min-width: 600px) {
  .hamburger-button {
    position: relative;
    float: right;
  }
  #title-image {
    width: 70%;
  }
  #flag {
    display: block;
    max-width: 170px;
  }
  .menu {
    top: 100%;
  }
}

@media only screen and (min-width: 800px) {
  .menu {
    top: 100%;
  }
  #flag {
    max-width: 220px;
  }
  .footer-links {
    display: block;
  }
  .footer-links a:link {
    margin-right: 20px;
    color: black;
    font-size: .65em;
  }
  .footer-links a:hover {
    margin-right: 20px;
    color: green;
    font-size: .65em;
  }
}

@media only screen and (min-width: 1200px) {
  .menu {

    right: 0px;
  }
}

main {
  grid-column: 1 / -1;
  padding: 40px 20px;
	margin-top: -10px !important;
	margin-bottom: -10px !important;
}


.script {
  font-family: "book antiqua", times, serif;
}
.top-photos {
  text-align: center;
  width: 100%;
}
@media only screen and (max-width: 500px) {
.top-photos img{
  width: 100%;
}
}
h3 {
  font-style: italic;
  font-size: 20px;
  font-weight: bold;
}
.script h3 {
  text-align: center;
}
h2 {
  color: blue;
  text-align: center;
  font-size: 18px;
}
.script h2 {
  color: black;
}
td {
  font-family: serif;
  font-size: 16px;
  color: black;
}
li {
  margin-left: 30px;
}
.contact-info {
  text-align: center;
  font-weight: bold;

}
.character {
  text-align: center;
  margin-bottom: 0px;
}
hr.plays-hr {
	width: 100%;
	border: none;
	background-color: black;
	height: 1px;
}
h1.plays-h1 {
	font-size: 3em;
	text-transform:capitalize;
}
.history-article {
	  background-color: #D9D9AE ;
}
.callout {
	width: 75%;
	border: 2px solid;
	  color: black !important;
  font-size: 1em !important;
  margin: auto auto 20px auto !important;
}

.callout p {
	margin: 0px ;
	text-align: center;
}

.term {
	color: #0000c0;
}
 .dashed-link {
  background-color: lightyellow;
  border: dashed darkred 5px;
  display: block;
  margin-bottom: 10px !important;
 }
 .dashed-link a {
   font-size: .7em !important;
 }

@media only screen and (min-width: 450px) {
  .dashed-link {
    display: inline-block;
    width: 45%;
  }
}