/* add space below paragraph images */
body section#main > article p img {
	margin-bottom: 1em
}

/* adjust spacing below paragraphs */
 body section#main > article .wide p {
    margin-bottom: 1em;   
}

/* display header image in small screen sizes */
 body section#main > article.persona-landing div.heading > img {
	 display: block;
}
/* NAV BAR - styles applying to mobile menu and the menu in general */
/* always show nav bar */
 .miniNav {
	 background-color: #E18826;
	 color: white;
	 width: 100%;
	 z-index: 3;
}

/* set menu base styles but hide by default */
 .miniNav .menu {
	 clear: both;
	 max-height: 0;
	 transition: max-height .2s ease-out;
	 color: white;
}

/* style menu items but hide by default */
 #main article .miniNav > ul.menu li {
	 color: white;
	 font-weight: bold;
	 font-size: 2rem;
	 font-family: 'Arial Black', sans-serif;
	 visibility: hidden;
	 list-style: none;
}

/* show the menu when menu icon is "checked" */
 .miniNav .menu-btn:checked ~ .menu {
	 max-height: 600px;
	 padding: 0 0 2em 0;	 
}

/* show the list items when checked */
 #main > article div.miniNav .menu-btn:checked ~ ul.menu li {
	 visibility: visible;
 }

/* override base CSS to make links white. Also set padding for mobile */
#main article .miniNav a:visited, #main article .miniNav a, #main article .miniNav a:link {
	color: white;
	padding-left: 3em;
}

/* style the menu-icon (wraps the 3 lines pattern) */
 .miniNav .menu-icon {
	 cursor: pointer;
	 display: inline-block;
	 float: right;
	 padding: 28px 20px;
	 position: relative;
	 user-select: none;
	 color: white;
}
/* style the nav icon (middle of the 3 lines pattern) */
 .miniNav .menu-icon .navicon {
	 background: white;
	 display: block;
	 height: 2px;
	 position: relative;
	 transition: background .2s ease-out;
	 width: 18px;
}

/* styles the other 2 lines in the pattern */
 .miniNav .menu-icon .navicon:before, .miniNav .menu-icon .navicon:after {
	 background: white;
	 content: '';
	 display: block;
	 height: 100%;
	 position: absolute;
	 transition: all .2s ease-out;
	 width: 100%;
}

/* create the bottom line in the pattern */
 .miniNav .menu-icon .navicon:before {
	 top: 5px;
}
/* create the top line in the pattern */
 .miniNav .menu-icon .navicon:after {
	 top: -5px;
}
/* hide the underlying check-box */
 .miniNav .menu-btn {
	 display: none;
}

/* adjust the icon when checked */
 .miniNav .menu-btn:checked ~ .menu-icon .navicon {
	 background: transparent;
}
/* create an X when checked */
 .miniNav .menu-btn:checked ~ .menu-icon .navicon:before {
	 transform: rotate(-45deg);
}
/* create an X when checked 2 */
 .miniNav .menu-btn:checked ~ .menu-icon .navicon:after {
	 transform: rotate(45deg);
}
/* make sure the X shows in the right spot */
 .miniNav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:before, .miniNav .menu-btn:checked ~ .menu-icon:not(.steps) .navicon:after {
	 top: 0;
}

 #main > article div.miniNav > ul.menu > li > ul {
	 margin: 0;
	 z-index: 1;
}

/* create a text shadow on the links and have them take up the full width and height */
 #main > article div.miniNav > ul > li > a, #main > article div.miniNav > ul > li > ul > li > a {
	 text-shadow: 1px 1px 5px #53565a;
	 display: block;
	 padding: .4em;
}

/* hover color for menu items */
 #main > article div.miniNav > ul > li:hover{
	 background-color: #e7a153;
}
/* hover color for sub-menu items */
 #main > article div.miniNav > ul > li > ul > li:hover{
	 background-color: #c0482a;
}

 @media only screen and (min-width: 64em) {
/* NAV BAR - styles applying to the desktop menu only */
	 
	/* make menu items visible */
	 #main article .miniNav > ul.menu li {
		 visibility: visible;
	}

	/* hide the mobile menu menu/nav icon */
	 .miniNav .menu-icon {
		 display: none;
	}

	/* override the default of hiding the menu, and enable visible overflow for drop-downs */
	 .miniNav .menu {
		 max-height: 200px;
		 overflow: visible;
	}

	/* undo mobile padding */
	#main article .miniNav a:visited, #main article .miniNav a, #main article .miniNav a:link {
		padding-left: 0;
	}
	/* remove more mobile padding in the case that we left the 3 lines "checked" */
    .miniNav .menu-btn:checked ~ .menu {
		padding: 0;
    }
	/* and if it wasn't checked */
	 .miniNav .menu {
		 padding: 0;
	 }
	 
	/* set a line height and padding for links */
	 #main > article div.miniNav > ul > li > a, #main > article div.miniNav > ul > li:hover > ul > li > a{
		 line-height: 1.2;
		 padding: .7em 0;
	}
	/* remove the menu top margin and center-align text */
	 #main > article div.miniNav > ul {
		 margin-top: 0;
		 text-align: center;
	}
	/* positioning for list items */
	 #main > article div.miniNav > ul > li {
		 width: 14%;
		 display: inline-block;
		 min-height: 55px;
		 position: relative;
	}

	/* hide drop-downs by default */
	 #main > article div.miniNav > ul > li > ul{
		 display: none;
	}

	/* Display drop-down when its list item is hovered over */
	 #main > article div.miniNav > ul > li:hover > ul, #main > article div.miniNav > ul > li > ul:hover {
		 display: inline-block;
		 padding: 0;
		 position: absolute;
		 left: 0;
		 top: 55px;
		 width: 100%;
	}
	 /* different color for drop-down list items */
	 #main > article div.miniNav > ul > li:hover > ul > li, #main > article div.miniNav > ul > li > ul:hover > li {
		 background-color:#963821;
	}
	 /*Lighter background color on all main nav hovers*/
	 #main > article div.miniNav > ul > li:hover{
		 background-color: #e7a153;
	}
	 /*Lighter background colors on all drop-down hovers*/
	 #main > article div.miniNav > ul > li > ul > li:hover{
		 background-color: #c0482a;
	}
/* NAV BAR - end of related styles */

	 #main > article .centered-logo img {
		 width: 14%;
		 position: relative;
		 top:-100px;
		 margin-bottom:-90px;
	}
}
 @media only screen and (max-width: 64em) {
	/*artist bios padding on mobile*/
	 section.block-1 > div > p, section.block-2 > div > p {
		padding: 0 1em;
	}
	 section.block-1 > div > h2 {
		 padding-left: .5em;
	}
	section.block-2 > div > h2 {
		 padding-right: .5em;
	 }
	 #main > article .centered-logo img {
		 width: 20%;
		 margin-bottom: -120px;
		 position: relative;
		 top:-180px;
	}
}
 @media only screen and (max-width: 54em) {
	 #main > article .centered-logo img {
		 width: 180px;
		 margin:0 auto 2em auto;
		 position: static;
	}
	 #main > article div.miniNav > ul > li {
		 width: 100%;
	}
}
/* Fix image padding for screen widths between 688px and 863px */
 @media only screen and (min-width: 688px) and (max-width: 863px) {
	 #main > article img {
		 padding-top: 0px;
	}
}
 .bx-wrapper .bx-viewport {
	 left: 0;
	 border-bottom: 0;
}
 .bx-wrapper {
	 margin: 0 auto;
	 float: none;
}
 .bx-wrapper .bx-pager {
	 padding-top: 0px;
}
/* Hide the slider buttons at the bottom for the image slider on Lineup page */
 .bx-wrapper .bx-pager .bx-pager-item {
	 display: none;
}

/* countdown */
 .countdown {
	 line-height: 1.4;
	 width: 100%;
	 position: static;
	 float: right;
	 right: 1rem;
	 box-shadow: 2px 2px 8px #53565a;
	 background-color: rgba(255, 255, 255, 0.9);
	 display: none;
	 z-index: -1;
}
 @media only screen and (min-width: 43em) {
	 .countdown{
		 width: 41rem;
		 position: fixed;
	}
}
 .countdown-show {
	 display: block;
	 z-index: 400;
}
 .countdown-timer {
	 font-size: 3rem;
	 font-weight: 600;
	 margin: 0 1rem;
	 color: #007380;
	 letter-spacing: 0.3rem;
}
 .countdown-clock {
	 position: absolute;
	 left: 7.2rem;
}
 .countdown-clock {
	 letter-spacing: 0.3rem;
}
 .countdown-separator {
	 position: relative;
	 bottom: 0.2rem;
}
 .countdown-text.countdown-description {
	 float: right;
	 position: relative;
	 top: 1rem;
	 right: 0.4rem;
	 font-size: 2rem;
	 font-weight: 300;
	 letter-spacing: 0;
}
 @media only screen and (max-width: 400px) {
	 .countdown-text.countdown-description {
		 top: 1.6rem;
		 right: 0;
		 font-size: 1.6rem;
	}
}
 .countdown-labels {
	 font-size: 2rem;
	 font-weight: 600;
	 margin: -1rem 0 0 1rem;
	 color: #a6a6a6;
}
 .countdown-labels span {
	 margin-right: 1.2rem;
}
/* Slideshow border fix */
 #main .bx-wrapper .bx-viewport {
	 border: none;
}
 #main > article .object-cluster, #main > article .object-cluster-small{
	 float:none;
}
 h1 {
	 display: none;
}
 #main img.centered {
	 display: block;
	 margin: 0 auto;
}
 #main > article img {
	 width: auto;
	 max-width: 100%;
	 margin: 0 auto;
	/*padding-top: 80px;
	 added to ensure the image shows below the bars at the top, but it negatively impacted other images on the page so the top images will be resized */
}

 #main > article img + figcaption {
	 margin: 0em 0 .5em;
}