* {
	margin: 0;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  transition: all 250ms ease;
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
}

html {
	height:100%;
	margin:0;
}

body {
	height:100%;
	margin:0;
	padding:0;
	text-align:left;
	font-family: "Plus Jakarta Sans", sans-serif;
	font-optical-sizing: auto;
	background-color: #222;
  min-height: 100vh;
}

a {
	text-decoration:none;
}

.main a{
	color:#62CBB8;
}

h1,h2{
	margin:0;
	padding:0;
	font-family: "Bebas Neue", sans-serif;
  font-style: normal;
  color: #FFF;
}

h1{
	font-size:48px;
	font-weight: 700 !important;
}

h2{
	font-size:32px;
	font-weight: 400;
}


h3, h4 {
	color:#FFF;
	font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

h3{
	font-size:24px;
	padding:0;
	margin:5px 0;
	color: #FFF;
}

h4{
	font-size:20px;
	padding:0;
	margin:0;
}

h3 a{
	padding:3px;
	color:#424142;
}

h4 a{
	color:#FFF !important;
	text-decoration: underline;
}

.subHead {
	font-family: "Bebas Neue", sans-serif;
  font-style: normal;
  color: #FFF;
  font-weight: 100;
  margin-bottom: 8px;
}

p{
	font-size:21px;
	line-height:1.2;
	margin:20px 0;
	color:#FFF;
	font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

hr{
	width: 50%;
    border: solid #ddd;
    border-width: 1px 0 0;
    margin: 12px auto 20px;
}

sup{
	font-size: 55%;
	line-height: 0;
	position: relative;
	font-weight: normal;
}

em{
	color:#62CBB8;
	font-weight:700;
	font-style:normal;
}

header{
	height:80px;
	width:100%;
	font-size:18px;
	position:fixed;
	top:0;
	z-index:1000;
	padding-top: 75px;
}

.scrolled{
	padding: 0 !important;
	background-color:#101010;
}

#logo{
	background:url("../images/logo.png") no-repeat left;
	background-size: 80%;
	background-position: center;
	color:#FFF;
	width: 150px;
	height: 80px;
}


#backToTop {
	display: none;
	color: #FFF;
	font-size: 16px;
}

.scrolled #backToTop {
	display: block;
}

#menuButton{
	display: flex;
	justify-content: center;
	margin-right: 30px;
	width: 80px;
	height: 60px;
	cursor: pointer;
}

#menuButton.scrolled {
	height: 100%;
}

#menuButton label {
	display: flex;
	align-items: center;
}

#menuToggle {
  display: none;
}

#menuToggle + label {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  cursor: pointer;
}

#menuToggle + label span {
  display: block;
  background: white;
}

#menuNav {
	display: none;
	position: absolute;
	top: 100%;
	right: 0%;
	margin-right: 30px;
	background: #62CBB8;
	width: 25%;
	margin-top: 26px;
}

#menuNav.open {
	display: block;
}

#menuButton.open {
	background-color: #62CBB8;
}

#menuButton.open #mnu {
	background-color: #101010;
}

header.scrolled #menuNav {
	margin-top: 0;
}

#menuNav ul {
	list-style: none outside none;
	padding-left: 0;
}

#menuNav hr {
	width: 85%;
	margin: 0 auto;
	border-color: #101010;
}

.navItem {
	display: block;
	text-align: center;
	padding: 20px 0px;
	margin: 4px;
	background-color: inherit;
}

.navItem small {
		font-size: 12px;
	}

.navLink{
	color:#101010;
	box-sizing:border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	transition:all 250ms ease;
	-webkit-transition:all 250ms ease;
	-moz-transition:all 250ms ease;
}

.currentPage {
	font-weight: 700;
	text-decoration: underline;
}

#wrapper{
	color: #fff;
	display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.push{
	height:10vh;
}

footer {
	background: linear-gradient(rgba(0,0,0,0.75), rgba(0,0,0,0.75)),
    url('../images/crowdPattern.png') repeat-x bottom;
	background-color: #101010;
	background-size: 12%;
}

.footWrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 20px 0;
	max-width: 1200px;
	margin: 0 auto;
	margin-bottom: 60px;
	text-align: center;
}

#social {
	margin: 20px;
}

#social a {
	margin: 0 20px;
}

.footContent {
	display: block;
}

#bottomNav{
	list-style:none outside none;
	padding-left: 0;
}

#bottomNav li {
	display: inline-flex;
	margin: 0 16px;
}

footer p {
	display: block;
	font-size: 16px;
	font-weight: 400;
	margin: 0;
	margin-top: 8px;
	padding: 0;
	color: #FFF;
	line-height: 1.2;
	text-align: left;
}

footer a {
	color: #62CBB8;
}

.center {
	text-align: center;
}

.page {
	display: flex;
	flex: 1;
	align-items: center;
}

.pageHeader {
	width: 100%;
	margin-bottom: 60px;
	display: flex;
	justify-content: center;
}

.headContent {
	min-width: 40%;
	text-align: center;
}

#calendarHeader {
	width: 100%;
	margin-bottom: 60px;
	display: flex;
	align-items: center;
}

#intro {
	min-width: 40%;
	margin-right: 60px;
}

#searchWrapper {
	position: relative;
	display: inline-flex;
	width: 52%;
	height: 70px;
}

#search {
	width: 100%;
	min-height: 70px;
	background-color: #101010;
	border: 3px solid #62CBB8;
	border-radius: 9px;
	font-family: "Plus Jakarta Sans", sans-serif;
  font-optical-sizing: auto;
  font-size: 16px;
  padding-right: 60px;
}

#searchWrapper.hasValue #search {
	border: 3px solid #F9F976;
}

#searchGo {
  height: 100%;
  position: absolute;
  right: 16px;
  top: 4px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#searchReset {
	display: none;
}

#searchWrapper.hasValue #searchGo {
	display: none;
}

#searchWrapper.hasValue #searchReset {
	height: 100%;
  position: absolute;
  right: 16px;
  top: 4px;
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

#searchGo .icon, #searchReset .icon {
	width: 40px;
	height: 40px;
}

#intro p {
	margin: 8px 0;
}

#hero {
	flex: 0 0 auto; /* don't compete for leftover space with #calendar — size based on hero's own content only */
	padding-top: 160px;
	background:url(../images/cleveland1.jpg) no-repeat center;
	box-shadow: inset 0 0 0 1000px rgba(0,0,0,.75);
	background-size: cover;
}

#calendar {
	margin-top: 20px;
	flex: 1;
	align-items: flex-start;
}

#calendarNav {
	position: sticky;
	top: 0; /* adjust if you have a fixed header above this — set to that header's height */
	display: flex;
	justify-content: space-between;
	width: 100%;
	/*border-bottom: 5px solid #F9F976;*/
	background: #222;
	z-index: 10;
}

#calendarEnd {
	display: flex;
	justify-content: center;
	text-align: center;
}

#current {
	width: 82%;
	display: flex;
	align-items: center;
	height: 64px;
}

#currentSelector {
	display: flex;
	align-items: center;
	height: 100%;
	padding: 0 16px;
	position: relative;
}

#current .icon {
	margin-right: 20px;
	cursor: pointer;
}

#navArrows {
	list-style:none outside none;
	display: flex;
	align-items: flex-end;
	padding-left: 0;
}

#navArrows li {
	margin:0 16px;
	color: #F9F976;
	width: 60px;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.main{
	max-width:1100px;
	width: 100%;
	margin: 60px auto;
}

.venueCard {
	width: 100%;
	display: flex;
	border-bottom: 1px solid #ADADAD;
	margin-bottom: 16px;
}

.venue {
	width: 25%;
  margin: 16px 0;
  padding-bottom: 16px;
}

.venueEvents {
	width: 73%;
}

.event {
	margin-bottom: 16px;
	width: 100%;
	display: flex;
	padding: 16px;
}

.eventInfo {
	width: 90%;
}

.eventInfo span {
	display: inline-flex;
	margin-right: 40px;
}

.eventName {
	font-size: 20px;
	width: 33%;
}

.eventName a {
	color: #FFF;
	text-decoration: underline;
}

.eventTime, .eventCost {
	font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #ADADAD;
}

.eventTime {
	width: 30%;
}

.eventCost {
	width: 14%;
}

.ticketLink {
	height: 40px;
	width: 40px;
  background: none;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 8px;
}

.ticketLink a {
	height: 100%;
	width: 100%;
	display: flex;
  align-items: center;
  justify-content: center;
}

.icon {
	display: inline-block;
	width: 24px;
  height: 24px;
}

#cal {
	background-color: #F9F976;
	-webkit-mask-image: url('../images/icons/calendar.svg');
  mask-image: url('../images/icons/calendar.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
}

#fwd {
	background-color: #F9F976;
	-webkit-mask-image: url('../images/icons/forward.svg');
  mask-image: url('../images/icons/forward.svg');
  mask-repeat: no-repeat;
}

#bck {
	background-color: #F9F976;
	-webkit-mask-image: url('../images/icons/back.svg');
  mask-image: url('../images/icons/back.svg');
  mask-repeat: no-repeat;
}

#fwd, #bck {
	mask-size: 100%;
	width: 65% !important;
	height: 65% !important;
}

#opn {
	background-color: #62CBB8;
	-webkit-mask-image: url('../images/icons/ticket.svg');
  mask-image: url('../images/icons/ticket.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
}


#ser {
	background-color: #62CBB8;
	-webkit-mask-image: url('../images/icons/search.svg');
  mask-image: url('../images/icons/search.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
}

#clr {
	background-color: #F9F976;
	-webkit-mask-image: url('../images/icons/clear.svg');
  mask-image: url('../images/icons/clear.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
}

#mnu {
	background-color: #FFF;
	-webkit-mask-image: url('../images/icons/menu.svg');
  mask-image: url('../images/icons/menu.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
  height: 45px;
  width: 45px;
  cursor: pointer;
}

#insta {
	background-color: #FFF;
	-webkit-mask-image: url('../images/icons/insta.svg');
  mask-image: url('../images/icons/insta.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
}

#fil {
	background-color: #FFF;
	-webkit-mask-image: url('../images/icons/filter.svg');
  mask-image: url('../images/icons/filter.svg');
  mask-size: contain;
  mask-repeat: no-repeat;
}

.empty {
	text-align: center !important;
	vertical-align: top;
	padding-top: 13%;
	width: 48%;
}

nav {
	max-width: 1200px;
	height: 100%;
	margin: 0 auto;
	display: flex;
	position: relative;
	justify-content: space-between;
	align-items: center;
}


.vert{
	width: 61%;
	margin: 8px 20%;
} 

@keyframes bounce {
	0% {bottom:10px;}
	100% {bottom:15px;}
}

input[type=text], select, textarea {
  width: 100%; /* Full width */
  padding: 12px; /* Some padding */ 
  border: 1px solid #222; /* Gray border */
  border-radius: 4px; /* Rounded borders */
  box-sizing: border-box; /* Make sure that padding and width stays in place */
  margin-top: 6px; /* Add a top margin */
  margin-bottom: 16px; /* Bottom margin */
  background: #333;
  color: #FCFCFC;
}


hr {
	width: 100%;
}

#featuredSpace .main, #featuredContent .main {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

#featuredSpace.page {
	align-items: flex-start;
}

.featureTile-Wide {
	display: flex;
	justify-content: center;
	min-height: 5vh;
	width: 100%;
	background-color: #101010;
	margin-bottom: 20px;
}

.featureTile-Wide p {
	color: #999;
}

.flatpickr-calendar .open {
	top: 69px !important;
}

#datePicker {
	display: none;
}

.flatpickr-calendar {
	z-index: 9999;
	background: #222222 !important;
	box-shadow: 1px 0 0 #101010,-1px 0 0 #101010,0 1px 0 #101010,0 -1px 0 #101010,0 3px 13px rgba(0,0,0,0.1) !important;
	border: 1px solid #101010 !important;
}

.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after {
  display: none;
}

.flatpickr-months {
	background: #101010 !important;
}

.flatpickr-months .flatpickr-month {
	color: #F9F976 !important;
}

.flatpickr-months .flatpickr-prev-month, .flatpickr-months .flatpickr-next-month {
	color: #F9F976 !important;
	fill: #F9F976 !important;
}

.flatpickr-day {
	color: #FCFCFC !important;
}

.flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay {
	color: rgba(252,252,252,0.5) !important;
}

.flatpickr-day.today {
	border-color: #62CBB8 !important;
}

.flatpickr-day.selected {
	background: rgba(249,249,118,0.4) !important;
	border-color: #F9F976 !important;
	color: #F9F976 !important;
}

.flatpickr-weekdays {
	background: #101010 !important;
	margin-bottom: 4px !important;
}

span.flatpickr-weekday {
	color: rgba(249,249,118,0.54) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
	color: #101010 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month .flatpickr-monthDropdown-months option {
  transition: none !important;
}

.contactForm {
	margin-top: 40px;
}

.contactButton {
	background: none !important;
  border: 2px solid #62CBB8 !important;
  display: block;
  text-align: center;
  color: #62CBB8 !important;
  padding: 20px 50px !important;
  font-size: 21px;
  letter-spacing: 2px;
  text-transform: uppercase;
  float: right;
  cursor: pointer;
}


.flex {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
}

.columnTwo {
	display: block;
	width: 45%;
}

#venuesList {
	margin-top: 40px;
}

.venueList {
	margin: 20px 0;
	list-style-type: none;
	padding-left: 16px;
}

.contentSection {
	margin-bottom: 40px;
}

.newVenue {
	font-family: "Bebas Neue", sans-serif;
  font-weight: 100;
	color: #F9F976;
	margin-left: 8px;
}

#meme {
	width: 250px;
}



.wave-top {  
  height: 5px;
  background-color: #222222;
  position: relative;
}

.wave-top::before {   
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  bottom: -0.3%;
  left: 0;
  background-size: auto;
  background-repeat: repeat no-repeat;
  background-position: 22vw bottom;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 1C19.5523 3 32.2291 5 51.5 9C104.5 19 200 43 300 65C400 88 500 111 600 102C700 93 800 53 900 30C987.526 5 1085.36 -1 1150 0C1169.54 -1 1180.49 0 1200 1V134H1150C1100 134 1000 134 900 134C800 134 700 134 600 134C500 134 400 134 300 134C200 134 100 134 50 134H0V1.98128Z' fill='%23f9f976'/></svg>");
}

.wave-bottom {  
  height: 5px;
  background-color: #f9f976;
  position: relative;
  margin-bottom: 24px;
}

.wave-bottom::before {   
  content: "";
  width: 100%;
  height: 3px;
  position: absolute;
  bottom: -0.3%;
  left: 0;
  background-size: auto;
  background-repeat: repeat no-repeat;
  background-position: 22vw bottom;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 1C19.5523 3 32.2291 5 51.5 9C104.5 19 200 43 300 65C400 88 500 111 600 102C700 93 800 53 900 30C987.526 5 1085.36 -1 1150 0C1169.54 -1 1180.49 0 1200 1V134H1150C1100 134 1000 134 900 134C800 134 700 134 600 134C500 134 400 134 300 134C200 134 100 134 50 134H0V1.98128Z' fill='%23222222'/></svg>");
}

.wave-footer {  
  height: 5px;
  background-color: #222222;
  position: relative;
}

.wave-footer::before {   
  content: "";
  width: 100%;
  height: 8px;
  position: absolute;
  bottom: -0.3%;
  left: 0;
  background-size: auto;
  background-repeat: repeat no-repeat;
  background-position: 22vw bottom;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200 134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 1C19.5523 3 32.2291 5 51.5 9C104.5 19 200 43 300 65C400 88 500 111 600 102C700 93 800 53 900 30C987.526 5 1085.36 -1 1150 0C1169.54 -1 1180.49 0 1200 1V134H1150C1100 134 1000 134 900 134C800 134 700 134 600 134C500 134 400 134 300 134C200 134 100 134 50 134H0V1.98128Z' fill='%23000000'/></svg>");
}

.listTitle {
	text-decoration: underline;
	margin-bottom: 8px;
	font-weight: 700;
}

.flatpickr-day.has-results::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #F9F976;
}







/* Mobile Hover Fix */

@media (hover: hover) and (pointer: fine) {
	.navArrows li:hover {
		background: #F9F976;
	}

	.main a:hover{
		text-decoration: underline;
	}

	h4 a:hover {
		color:#62CBB8 !important;
	}

	#logo:hover{
		transform: translateY(-3px);
	}

	.navLink:hover {
		background-color: #101010 !important;
		color: #62CBB8;
	}

	footer a:hover {
		text-decoration: underline;
	}

	#currentSelector:hover, #navArrows li:hover {
		background-color: #171717 !important;
		cursor: pointer;
	}

	.event:hover {
		box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2);
	}

	.eventName a:hover {
		color: #62CBB8;
	}

	.ticketLink:hover {
		background: #62CBB8;
	}

	.ticketLink:hover #opn {
		background-color: #101010;
	}

	#clr:hover {
		background-color: #FF6262;
		box-shadow: none !important;
	}

	figure:hover, figure a:hover{
		transform: translateY(-3px);
		text-decoration: none !important;
	}

	.flatpickr-day:hover {
		background: rgba(249,249,118,0.20) !important;
		border-color: #F9F976 !important;
		box-shadow: inset 0 0 0 100px rgba(0,0,0,.2);
	}

	.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {
		color: rgba(249,249,118,0.6) !important;
		fill: rgba(249,249,118,0.6) !important;
	}

	.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg {
		color: rgba(249,249,118,0.6) !important;
		fill: rgba(249,249,118,0.6) !important;
	}

	.contactButton:hover {
		background: #62CBB8 !important;
		color: #222 !important;
		text-decoration: none !important;
	}

	#backToTop:hover {
		color: #62CBB8;
		text-decoration: underline;
	}

	#insta:hover {
		background-color: #F9F976;
	}
}





/* Responsive Code */


@media screen and (max-width:1280px){
	#logo{
		margin-left: 30px;
	}

	#menuToggle {
		margin-right: 30px;
	}
}


@media screen and (max-width:1108px){
	.main{
		margin: 60px 50px !important;
	}

}

@media screen and (max-width:1024px){
	header{
		font-size:18px;
	}

	h1{
		font-size:40px;
		line-height: 45px;
	}

	h2{
		font-size:48px;
	}

	h3{
		font-size:22px;
	}

	.main{
		margin: 70px 50px !important;
	}

}

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

	.eventInfo span {
  	margin-right: 20px;
	}

}

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

	.eventName {
  	display: flex !important;
  	width: 100%;
  	margin-bottom: 8px;
	}

	.eventTime {
		width: 60%;
	}

	.eventCost {
		width: 20%;
	}

	.main h1, .main h2, {
		text-align: center;
	}

	p{
		font-size:19px;
		line-height:30px;
	}

	#calendarHeader {
		flex-direction: column;
	}

	#intro {
		margin-right: 0;
		margin-bottom: 24px;
		text-align: center;
	}

	#searchWrapper {
		width: 100%;
	}

	#navArrows li {
		margin:0;
	}

	#menuNav {
		width: 40%;
	}

	footer {
		background-size: 20%;
	}
}

@media screen and (max-width:625px){
	#calendarHeader {
		margin-bottom: 0;
	}

	#calendar {
		margin-top: 0;
	}

	.eventTime {
		width: 100%;
	}

	.eventCost {
		width: 100%;
	}
}

@media screen and (max-width:535px){
	header{
		font-size:16px;
	}

	#logo{
		margin-left: 20px;
		padding-top: 0;
		width: 120px;
	}

	#menuToggle{
		margin-right: 20px;
		margin-top: 16px;
	}

	#menuNav {
		width: 50%;
	}

	.navItem{
		padding: 30px 0 !important;
		margin: 0 16px !important;
	}

	.main{
		margin: 80px 30px 70px !important;
	}

	p{
		font-size: 16px;
    line-height: 20px;
   }

  h2{
    line-height: 1.0;
    margin-bottom: 20px;
   }

  .venueCard {
		flex-direction: column;
	}

	.venue {
		width: 100%;
		margin-bottom: 8px;
		margin-left: 8px;
		padding-bottom: 0;
	}

	.venueEvents {
		width: 100%;
	}

	.event {
		padding: 8px 16px;
	}

	.flex {
		flex-direction: column;
	}

	.columnTwo {
		width: 100%;
	}

	#hero {
		background-position: right;
	}
}

@media screen and (max-width:420px){
	.navItem{
		margin: 0 2px !important;
	}

	#currentSelector {
		padding: 0;
	}

	#currentSelector h3 {
		font-size: 18px;
	}

	.ticketLink{
		margin: 0 4px;
	}

	#navArrows li {
		width: 40px;
		align-items: end;
	}

	footer {
		background-size: 35%;
	}

	#footLogo {
		height: 40px;
		margin-right: 20px;
		margin-left: 20px;
		margin-top: 8px;
	}
}