
h1, h2, h3, h4, h5 {
margin: 0;
}
h1 {
     font-size: 40px;  
   text-decoration: underline;
     text-decoration-color: #e22267;

text-align: center;
margin: auto;
}
h2 {
     font-size: 50px;
}
h3 {
     font-size: 40px;
     text-decoration: underline;
     text-decoration-color: #e22267;
}
h4 {
     font-size: 30px;
}
p {
     font-size: 25px;
}
mb0 {
	margin-bottom: 0px;
}


.button {
	padding: 10px 5px ;
	background-color: black;
	color: #e22267 !important;
	border: 2px solid #e22267 !important;
}
.button:hover {
	background-color: #e22267;
	color: black !important;
	padding: 10px 5px;
	border: 2px solid #e22267;
}


a,
a:visited,
a:hover,
a:active,
a:focus {
  all: unset;        /* removes all styles */
  display: inline;   /* restore inline behavior */
  cursor: pointer;   /* keep clickable cursor */
     font-size: 25px;

  
}
a {
 color: white;
 transition: 0.5s;
}
a:hover {

 color: #e22267;
 transition: 0.5s;


}
.currentPage{
	color: #e22267 !important;
}
.nav {
	border-top: 3px solid #e22267;
	margin-top:25px;
	padding-top: 25px;
}
.nav a {
	margin: 0px 10px;
}

body { 
margin:0;
background-color: black;
color: white;
text-align: center;



  font-family: "Lexend Giga", sans-serif;
  

}
.address-row {
	flex-direction: column !important;
	align-items: center;
	justify-content: center;
 	background-image: url("bar-darker.jpg");
	background-position: center;
	background-size: cover;
}
.address-row p {
	margin: 0;
}
.eventThumbnail {
	height: 200px;
	width: 200px;
object-fit: contain;
}
.eventsRow {

	text-align: left;
}
.eventRow {

	padding: 30px;
	border-bottom: white solid 4px;
}
.eventRow .inline-block {
	vertical-align: text-top;
	

}

@media(min-width: 730px) {
.eventRow .inline-block {

	max-width: 600px;
}
}


@media(min-width: 1000px) {
.eventRow .inline-block {

	max-width: 700px;
}
}



.eventsRow h2 {
	margin-top: 50px;
	color: black;
background-color: #e22267;
padding: 0 10px;
}

     .inline-block {
	 display: inline-block;
	}


     header {
	height: 100vh;
	background-image: url("neon.jpg");
	background-size: cover;
	background-position: center;

	
	}

.logoTop {
	background-color: black;
	padding: 20px 0;
position: fixed;
width: 100%;
z-index: 11;

box-shadow: -2px 36px 66px 14px rgba(0,0,0,0.75);
-webkit-box-shadow: -2px 36px 66px 14px rgba(0,0,0,0.75);
-moz-box-shadow: -2px 36px 66px 14px rgba(0,0,0,0.75);
}
.logoTop h2 {
 font-size: 20px;
transition: width 200ms ease;
}

.logo {
 width: 60%;
padding-bottom: 10px;

transition: width 200ms ease;
}

.logoScrolled {
width: 20%; 
padding:0;
}

.headerCaptionScrolled {
	

}

@media(min-width: 768px) {

.logo {
 width: 750px;
padding: 0;
}
.logoTop {
padding: 20px;
}

.logoTop h2 {
 font-size: 30px;
}


.logoScrolled {
width: 300px; 
padding:0;
}

}

.logoRound {
display: inline;
}
.logoFlat {
display: none;
}


@media(min-width: 768px) {
.logoRound {
display: none;
}
.logoFlat {
display: inline;
}
}

.remove-height { height: inherit !important; }

	.banner {
	padding: 50px;
	}


.brunchRow {
	position: relative;
}

  .centerBlockTitle {
	position: absolute;

top: 30%;
  left: 50%;
  transform: translate(-50%, -30%);
  z-index: 10; /* Ensure it sits above the images */
  text-align: center; /* optional */

padding: 5px;

background-color: rgba(0, 0, 0, 0.6);
}
 
.justABoxWithABitOfPaddingAndNoMargins {
	padding: 50px;


}

.justABoxWithABitOfPaddingAndNoMargins p {
	max-width: 1000px;
margin: auto;
}

.hirePage {
	text-align: left;
}

.emptyPic {
margin: auto;
margin-bottom: 50px;
height: 600px;
max-width: 1000px;
background-size: cover;
background-position: center;

}
.empty1 {
	background-image: url("empty1.jpg");

}
.empty2 {
	background-image: url("empty2.jpg");
}

.empty3 {
	background-image: url("empty3.jpg");
}



.flexColCon {
	flex-direction: column;
display: flex;

}
.flexRowCon {
	flex-direction: row;
display: flex;
 flex-wrap: wrap;
}

.row {
flex-direction: column; 
  height: 750px;
  display: flex; 
}


@media(min-width: 768px) {
.row {

flex-direction: row ;
       /* lay boxes side-by-side */
}
}
.box {
  flex: 1;               /* two equal columns */
  
  background-size: cover;
  background-position: center;
  flex-direction: column;
  /* center content inside the box */
  display: flex;
  align-items: center;      /* vertical center */
  justify-content: center;  /* horizontal center */
  text-align: center;

padding: 20px;
}


     .musicImg {
	background-image: url("lsd-licious.jpg");
	}
     .quizImg {
	background-image: url("quiz.jpg");
}
	.lcImg {
	 background-image: url("lcImg.jpg");
	}
	.socialIcon {
	width: 50px;
	padding: 20px;
}

.menu {

position: absolute;
  bottom: 20px;        /* distance from bottom */
  left: 50%;
  transform: translateX(-50%);
  /* text-align: bottom; <-- remove this (invalid) */
}

.mainEventRow video {

z-index: 0;
}
 .brunchPic {
	width: 100vw;
height: stretch;
background-size: cover;
}
.brunch1 {
	background-image: url("brunch1.jpg");
	display: none;
}
.brunch2 {
	background-image: url("brunch2.jpg");
display: none;
}
.brunch3 {
	background-image: url("brunch3.jpg");
}
.brunch4 {
	background-image: url("brunch4.jpg");
display: none;
}


@media(min-width: 1000px) {
	.brunch1 {
	display: block;
	}
	.brunch2 {
	display: block;
	}
	.brunch4 {
	display: block;
}
}



.mainEventRow .mainEventTitle {
Z-INDEX: 10;
COLOR: WHITE;
position: absolute;
 
left: 50%;

  transform: translate(-50%, 0);

}



.mainEventRow .mainEventTitle h2 {

	font-size: 30px;

}
.mainEventRow .mainEventTitle h3 {

	font-size: 15px;

}


@media(min-width: 768px) {
.mainEventRow .mainEventTitle {
	  transform: translate(-50%, 50%);
}

.mainEventRow .mainEventTitle h2 {

	font-size: 50px;

}

.mainEventRow .mainEventTitle h3 {

	font-size: 40px;

}


}





.mainEventTitle h3 {

 text-decoration: none !important;
}

.cocktailsRow {
display: block !important;
text-align: left;
padding: 50px;
height: inherit !important;
}

@media(min-width: 768px) {
 .cocktailsRow {
   padding: 100px;
}
}


.cocktailPic {
width: 200px;
vertical-align: middle;
}


.cockHead {
text-align: center;
 width: 100%;
}

.cock {
 border-bottom: 2px solid white;
 margin: 25px 0;
}