html, body { height:100% }
body  { color: #fff; background: #734D1D url(bg-psych.jpg) top center; margin: 0; padding: 0; }
body, p, td, li, ul, ol, h1, h2, h3, h4, h5, h6  {
  font-family: 'Alegreya Sans', sans-serif;
}

h1 { display:block; background-image: linear-gradient(#E6901F, #FEAF46);color: #000000; font-size: 2.0em; text-align:center;font-family: 'Chicle', serif;font-weight:400;margin:0;padding:62px 0 12px 0;}
h1 i {color:#784922;font-weight:500}
h1 b {color:#A63134;}
h2 { color: #FE6447; background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0));font-size: 1.2em; text-align:center;font-family: 'Chicle', serif;font-weight:normal;margin:0;padding:12px 4px;clear:right;text-transform:uppercase;}
h3 { font-size:1.7em;color:#ffffff;margin-bottom:10px;font-family: 'Chicle', serif;font-weight:400;}
h3.big {font-size:2.5em;}
h4 {font-size:1.3em;color:#E33FEB;margin-bottom:0;}

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

p { text-indent:14px; text-align:left; padding:10px; width:90%;margin:auto;}
p img {float:left; margin: 0 14px 14px 0; border: 4px solid #f2f2f2;}

/*
** Page layout elements
*/

#content {background:#734D1D url(van.jpg) bottom center no-repeat;width:85%;max-width:1000px;margin:auto;text-align:center;position:relative;border-left:8px solid #734D1D;border-right:8px solid #734D1D; }
#header {width:90%;}
#headermobile {width:90%;display:none;}

#content2 {background-image: linear-gradient(#89A02C, #323A10);padding:18px;color:#E9DDAF;font-size:1.3em;}
#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:#fff;}

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

#content #nav {position:fixed;color:#ffffff;padding:10px 0;background-image: linear-gradient(#000000, #390B13);margin:auto;text-align:center;width:1000px;}
#content #nav a {color:#fff;font-size:1.2em;padding:12px 20px;text-transform:uppercase;font-weight:normal;}

#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;}

#content #tickets {padding:0}

#lipsync a img {width:47%;max-width:500px;border-radius:10px;margin:8px;}
#lipsync ul li a {color:#fff;}

#pick1234 {background:#9A4139 url(1234.png) top left no-repeat;border-radius:10px;min-height:200px;padding:12px 12px 12px 206px;margin-bottom:20px;text-align:left;}

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 h2 {font-size:1.4em;padding-top:20px;}
#contact-form { width:50%; text-align:right;padding-bottom:300px}
#contact-form input, #contact-form textarea {margin:10px 0 0 10px;}

#footer {clear:both;padding:450px 50px 100px 50px;font-size:0.9em;color:#fff;}
#footer {text-align:center;}
#footer #copyright {background:#000;border-radius:18px;width:70%;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-family: 'Alegreya Sans', sans-serif;font-weight:normal;
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 {
font-family: 'Alegreya Sans', sans-serif;font-weight:normal;
    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:800px) {
	
		#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:800px) {
	#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(#89A02C, #000000); /* For Safari 5.1 to 6.0 */
    background: -o-linear-gradient(#89A02C, #000000); /* For Opera 11.1 to 12.0 */
    background: -moz-linear-gradient(#89A02C, #000000); /* For Firefox 3.6 to 15 */
    background: linear-gradient(#89A02C, #000000); /* Standard syntax */
	border-bottom:1px solid #89A02C;
  }
    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;
}

#sponsors {background:#274E53;border-radius:5px;margin-bottom:700px}
#sponsors #sponsorlinks a {font-size:1.6em;display:block;padding:8px;background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.2));border-radius:5px;margin:1px 8px;}
.sponsorlogo {display:inline;max-height:200px;margin:12px;border-radius:5px;}

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

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

#lipsync img {width:90%;max-width:500px;border-radius:10px;margin-bottom:12px;}

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:80%;font-family: 'Passion One', sans-serif;font-weight:normal;color:#fff;}
.nav {display:none;}
ul.topnav li.navfirstremove {display:none !important;}
#header {width:90%;display:none;}
#headermobile {width:100%;display:inline;}

#ticketfloat {left:8%;}

#step1 {display:block;background:url(step1.png) no-repeat top left;background-size:auto 140px;padding:146px 0 0 0;height:auto;text-align:left;border-radius:10px;margin-bottom:20px;}
#step2 {display:block;background:url(step2.png) no-repeat top left;background-size:auto 140px;padding:146px 0 0 0;height:auto;text-align:left;border-radius:10px;margin-bottom:20px;}
#step3 {display:block;background:url(step3.png) no-repeat top left;background-size:auto 140px;padding:146px 0 0 0;height:auto;text-align:left;border-radius:10px;margin-bottom:20px;}

#lipsync a img {width:95%;max-width:500px;border-radius:10px;margin:8px;}
#pick1234 {background:#9A4139 url(1234.png) top left no-repeat;border-radius:10px;min-height:200px;padding:190px 12px 12px 12px;margin-bottom:20px;text-align:left;}

}

#story {display:none;}

