html, body {  }
body  { color: #fff; background-image: linear-gradient(#300000,#734D1D); margin: 0; padding: 0; }
body, p, td, li, ul, ol, h1, h2, h3, h4, h5, h6  {
  font-family: "Bubbler One", sans-serif;
}

h1 { display:block; background-image: linear-gradient(#E6901F, #FEAF46);color: #000000; font-size: 2.0em; text-align:center; font-weight:400;margin:0;padding:62px 0 12px 0;}
h1 i {color:#784922;font-weight:500}
h1 b {color:#A63134;}
h2 { color: #E9DFDE; background-image: linear-gradient(#734D1D, #300000);font-size: 1.2em; text-align:center;margin:0;padding:12px 4px;clear:right;}
h3 { font-size:1.7em;color:#845A28;font-weight:900;margin: 12px 20px 4px 20px;}
h4 { font-size:1.5em;color:#000; font-weight:900;margin: 12px 20px 4px 20px;}
h3.big {font-size:2.5em;}

a { font-weight:bold;}
a:link { color: #fff; }
a:visited { color: #FE6447; }
a:hover, a:active, a.active { color: #845A28;}

p { text-indent:14px; text-align:left; padding:4px 10px; width:90%;margin:10px auto;}
p img {float:left; margin: 0 14px 14px 0; border: 4px solid #f2f2f2;}
p.quote {text-indent:14px; text-align:left; padding:10px 20px; width:90%;margin:10px auto;font-size:1.4em;font-weight:700;color:#687F7F;}
p.quote b {font-weight:900;}

.triangle-up {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;  /* Left border is transparent */
  border-right: 50px solid transparent; /* Right border is transparent */
  border-bottom: 50px solid #800000;   /* Bottom border forms the triangle */
}

/*
** Page layout elements
*/

#content {background:#dedede url(bg.jpg) top left;width:85%;max-width:1000px;margin:auto;text-align:center;position:relative;border-left:8px solid #734D1D;border-right:8px solid #734D1D; }
#header {width:100%;height:300px;background: url(bg-header.png) top right no-repeat;background-size:auto 101%;padding:0;margin-right:0;text-align:left;}
#header img#logo {width:500px;margin-left:30px;margin-top:30px;}
#headermobile {width:100%;display:none;}

#content2 {padding:18px;color:#000;font-size:1.3em;text-align:left;}
#content2 img {width:90%;clear:both;margin: auto;}
#content2 ul {text-align:left;}
#content2 ul b {color:#BED858;font-size:1.4em;}
#content2 p a {color:#800000;}

#content3 {background-image: linear-gradient(#245E75, #3E3C6B);}

p img#portrait {width:40%;margin:0 12px 12px 0;}
p img#parkphoto1 {display:none;}
p img#parkphoto2 {display:block;margin: 12px 12px 12px 0;width:400px;}
p img#studentphoto1 {display:block;margin: 12px 12px 12px 0;width:400px;}
p img#studentphoto2 {display:none;}
p img#hatchetphoto1 {display:block;margin: 12px 12px 12px 0;width:400px;}
p img#elsiejewelryphoto1 {display:block;margin: 0 12px 12px 0;width:300px;}
p img#loomphoto1 {display:block;margin: 12px auto 12px auto;width:90%;max-width:600px;clear:both;float:none;}
p img#louispaintingphoto1 {float:right;display:block;margin: 0 0 12px 12px;width:250px;}
div#parkingmaps {display:block;clear:both;width:90%;vertical-align:top;margin:20px auto 0 auto;}
div#parkingmaps a img.plan-parking {width:31%;border:2px solid #fff;vertical-align:top;margin-bottom:10px;}


p img#plan-elev, p img#plan-elev2, p img#plan-color, p img#plan-floorplan {display:block;width:100%;max-width:900px;}
p img#plan-color {margin-bottom:20px;}
p img#plan-elev {opacity:0.3;}
p img#plan-elev2 {opacity:1;border:none;}
p img#plan-elev:hover {opacity:0.5;}
p img#plan-floorplan {border:none;}
p img#elsie-sepia {width:30%; max-width:400px;margin-right:10px;}

p#gallerylist ul li a, p#gallerylist ul li a:link, p#gallerylist ul li a:hover, p#gallerylist ul li a:visited {color:#800000;}

#content2 p .learnmore {display:inline; background-image: linear-gradient(#800000, #000000);color:#fff;border:3px solid #734D1D;padding:8px 0;clear:both;}
#content2 p .learnmore a {color:#fff;font-weight:bold;text-decoration:none;white-space: nowrap;}



#imgwhat, #imggroup, #imgball, #imgticket, #imgballticket {width:100%;}
#imggroup {border-radius:5px; margin-top:12px;}

#content #nav {color:#ffffff;padding:10px 0;background-image: linear-gradient(#000000, #390B13);margin:auto;text-align:center;max-width:1000px;}
#content #nav a {background:url(up-triangle-tan.png) center 94% no-repeat; color:#fff;font-size:1.2em;padding:12px 20px;text-transform:uppercase;font-weight:bold;text-decoration:none}
#content #nav a:hover, #content #nav a:active, #content #nav a.active { background:url(up-triangle.png) center 94% no-repeat; color: #FCE37F;}

#content #schedule {font-size:1.8em;}
#content h2 {font-size:1.2em;color:#fff;}
#content #schedule p {margin:0 14px;}

#content #story {padding:20px; font-size:1.4em; margin:10px 0 0 0;background-image: linear-gradient(#ffffff, #9EDBCB);color: #005f5b;border-radius:5px;}

#content #after {padding:20px; font-size:1.4em; margin:10px 0 0 0;background-image: linear-gradient(#584043, #302E2F);color: #fff;border-radius:5px;}
#content #after a {color:#FE6447;text-decoration:underline;}


option {-moz-white-space: pre-wrap;
  -o-white-space: pre-wrap;
white-space: pre-wrap;}


#step1 {display:block;background:url(step1.png) no-repeat top left;padding:22px 0 0 410px;height:178px;text-align:left;border-radius:10px;margin-bottom:20px;}
#step2 {display:block;background:url(step2.png) no-repeat top left;padding:22px 0 0 410px;height:178px;text-align:left;border-radius:10px;margin-bottom:20px;}
#step3 {display:block;background:url(step3.png) no-repeat top left;padding:22px 0 0 410px;height:178px;text-align:left;border-radius:10px;margin-bottom:20px;}
#step1 a, #step2 a, #step3 a {color:#fff;}

#caption {font-size:0.8em;margin-bottom:20px;color:#B3CE7E;}

#contact {text-align:center;}
#contact h2 {font-size:1.4em;padding-top:20px;text-align:center;}
#contact-form { padding-bottom:50px;margin:auto auto;width:90%; text-align:center;}
#contact-form input, #contact-form textarea {margin:10px auto;}

#footer {clear:both;padding:20px 20px 100px 20px;font-size:1em;color:#fff;}
#footer {text-align:center;}
#footer #copyright {background:#000;border-radius:18px;width:95%;margin:auto;padding:8px;}

img.ticketbutton {width:35%;}

/*     /////////////////////////////////////////////////////////////////////////    */
/*     /////////////////////////////////////////////////////////////////////////    */
/*     /////////////////////////////////////////////////////////////////////////    */
/* MOBILE NAV starts here */	
/* Remove margins and padding from the list, and add a black background color */

ul.topnav {
font-size:1.6em;
display:none;
    list-style-type: none;
    margin: -70px 0 0 0;
    padding: 0;
    overflow: hidden;
}

/* Float the list items side by side */
ul.topnav li {float: left;}

  
/* Style the links inside the list items */
ul.topnav li a {
    display: inline-block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 0.9em;
}

ul.topnav li a {color:#fff;text-decoration:none;text-transform:uppercase;}
ul.topnav li a:link { color:#fff; }
ul.topnav li a:visited { color: #ccc; }
ul.topnav li a:hover { color: #FAE46D;}
ul.topnav li a:active, ul.topnav li a.active { color: #fff; text-decoration:none;}


/* Hide the list item that contains the link that should open and close the topnav on small screens */
ul.topnav li.icon {display: none;}

/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:1000px) {
	
		#nav {display:none;}
		#imgheader {margin-top:60px}
		
ul.topnav {padding:0 10px 0 10px;}
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
	margin-right:10px;
	background:none;
	color:#fff;
	line-height:0.9em;
  }
    ul.topnav li.icon a {
    border-bottom:none;
	color:#fff;
  }
      ul.topnav li.icon a:hover {
    text-decoration:none;
	color:#fff;
  }
}

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
@media screen and (max-width:1000px) {
	#nav {display:none;}
	#imgheader {margin-top:60px}
	
  ul.topnav.responsive {position: relative;
  opacity: 0.9;
    filter: alpha(opacity=95);
  background: #000000; /* For browsers that do not support gradients */
	z-index:10;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
	line-height:0.9em;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
	    background: -webkit-linear-gradient(#300000, #000000); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#300000, #000000); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#300000, #000000); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#300000, #000000); /* Standard syntax */
	border-bottom:1px solid #300000;
  }
    ul.topnav.responsive li.icon a {
	color:#FE6447;
	border-bottom:none;}
    ul.topnav.responseive li.navfirst {display:none;}
}


.video {
  aspect-ratio: 16 / 9;
  width: 100%;
  margin-bottom:24px;
}


/*     /////////////////////////////////////////////////////////////////////////    */
/*     /////////////////////////////////////////////////////////////////////////    */
/*     /////////////////////////////////////////////////////////////////////////    */
/*     MOBILE STYLING   ///////////////////////////////////////////////////////    */

@media screen and (max-width:1000px) {


ul.topnav, ul.topnav.responsive {background-image: linear-gradient(#000000, #390B13); display:block; border:none; margin: 0 auto;z-index:200;position:fixed;top:0;left:7%;width:82%; font-weight:normal;color:#fff;}
.nav {display:none;}
ul.topnav li.navfirstremove {display:none !important;}
#header {width:90%;background:none;height:auto;padding:40px 10px 10px 10px ;text-align:center;}
#header img#logo {width:98%;margin:30px auto 0 auto;}
#content2 {padding:8px;}
	span#parkphoto1 {clear:both;display:block;}

}

@media screen and (max-width:700px) {
	p img#portrait {width:90%;clear:both;margin:12px auto;max-width:400px;display:block;float:none;}
	p img#parkphoto1 {display:block; width:90%;clear:both;margin:12px auto;float:none;max-width:500px;}
	p img#studentphoto1 {display:block; width:90%;clear:both;margin:12px auto;float:none;max-width:500px;}
	p img#studentphoto2 {display:block; width:90%;clear:both;margin:12px auto;float:none;max-width:500px;}
	p img#hatchetphoto1 {display:block; width:90%;clear:both;margin:12px auto;float:none;max-width:500px;}
	p img#loomphoto1 {display:block; width:90%;clear:both;margin:12px auto;float:none;max-width:500px;}
	p img#louispaintingphoto1 {display:block; width:90%;clear:both;margin:12px auto;float:none;max-width:500px;}
	p img#elsiejewelryphoto1 {display:block; width:90%;clear:both;margin:12px auto;float:none;max-width:500px;}
	p img#parkphoto2 {display:none;}
	p img#elsie-sepia {display:block; width:90%;clear:both;margin:12px auto;float:none;max-width:500px;}
div#parkingmaps a img.plan-parking {display:block; width:90%;clear:both;margin:12px auto;float:none;max-width:500px;}
}

#story {display:none;}