/*
***************************************** 
	Default Style Sheet
***************************************** 
*/

/* Fonts */

@import url('https://fonts.googleapis.com/css?family=Merriweather:700');
 
  
@font-face {font-family: 'TrumpGothicWest-Bold';src: url('../webfonts/206565_1_0.eot');src: url('../webfonts/206565_1_0.eot?#iefix') format('embedded-opentype'),url('../webfonts/206565_1_0.woff') format('woff'),url('../webfonts/206565_1_0.ttf') format('truetype');}




body, #siteIDMenu h1, div#footer h3 {
	font-family: Helvetica, sans-serif;
}

div#footer h3 {
	font-size: 1em;
	font-weight: bold;
}

#mainPanel, .panelBody {
	font-size: 0.8em;
}

#mainPanel p#instagramLink {
	font-size: 1.2em;
}

#siteIDMenu h1 {
	font-weight: 500;
	font-size: 28px;
	text-rendering: geometricPrecision;
	margin: 17px 0;
}

#secondaryMenu {
	font-size: 24px;
}

#footerSocial .fab {
	font-size: 26px;
}

h1, h2, h3, h4, h5, h6 { 
	font-family: TrumpGothicWest-Bold;
	text-transform: Uppercase;
	font-weight: normal;
	letter-spacing: 0.05em;
} 

h2 { font-size: 5em; }
h3 { font-size: 3.75em; }
h4 { font-size: 2.2em; }
h5 { font-size: 1.8em; }
h6 { font-size: 1.25em; }

body#home div#mainPanel h2, body#about div#mainPanel h4, div#mainPanel h3 {
	line-height: 100%;
}
/* needed for aligning first heading to side boxes */
body#home div#mainPanel {
	/* padding-top: 2px; */
}

body#home div#mainPanel p, body#about div#eventInfo p {
	font-family: TrumpGothicWest-Bold;
	font-size: 2.4em;
	text-transform: Uppercase;
	font-weight: normal;	
	line-height: 100%;
	letter-spacing: 0.05em;
}


body#home div#mainPanel h3.eventDate {
	text-transform: None;
	padding-top: 2px;
}

div#mainPanel h2, body#home div.eventListing {
	border-bottom-width: 1px;
	border-bottom-style: solid ;
}

body#home div#mainPanel h3 {
	font-size: 3.75em;
	line-height: 100%;
}

.panelTitle {
	font-size: 1.7em;
	letter-spacing: 0.05em;
}

p, li	{
	line-height: 140%;
}

#menu li {
	font-family: Merriweather, serif;
	font-size: 1em;
	font-weight: bold;
}

div#contactForm, #contactForm input, #contactForm textarea {
	text-align: left;
}

a {
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

#menu a:hover {
	text-decoration: none;
}

a.eventListingLink {
	display: block;
}

a.eventListingLink, a.eventListingLink:hover {
	text-decoration: none;
	
}

a.eventListingLink:hover {
	box-shadow: 8px 8px 10px #333333;
}

a.heroLinkButton {
	text-transform: Uppercase;
}

#subhead1 { font-weight: normal; margin-bottom: 30px;}


/*
***************************************** 
	Colours
***************************************** 
*/

body {
	background-image: url(../images/bg.gif);
	color: #353535;
}

#container {
	background-color: #fff;
	min-height: 800px;
}

a {
	color: #eb0707;
}

a.eventListingLink {
	color: #353535;
}

a.heroLinkButton {
    background-color: #aaa;
	border: 1px solid transparent;
	border-radius: 4px;
	color: #fff;
}

#siteIDMenu, #siteIDMenu h1, #siteIDMenu a {
	color: #fff;
}

div#header {
	background-color: #111;
}

div#menu {
	background-color: #aaa;
	background-color: #eb0707;
}

div#footer {
	background-color: #bfbfbf;
}

#menu a {
	color: #fff;
}

#menu a:hover {
	color: #353535;
}

#menu li {
	color: #fff;
}

#menu li.active {
	color: #353535;
}

div#mainPanel h2, body#home div.eventListing {
	border-bottom-color: #e8e8e8;
}

div.eventTrio {
	border-bottom-color: #e8e8e8;
}

body#about h3 {
	border-top-color: #e8e8e8;
}

body#home .eventTitle, body#about .eventTitle {
	color: #eb0707;
}

div.panel h4 {
	background-color: #aaa;
}

div.panel {
	background-color: #e8e8e8;
}

div#contactForm p.errorMessage, div#contactForm p.fieldErrorMessage {
	color: #cc3300;
}

/*
***************************************** 
	Layout
***************************************** 
*/

body {
	margin: 0px;
	padding: 0px;
	text-align: center;
}

div#header {
	margin-top: 0px;
	display: flex;
	flex-direction: column;	
}

div#footer {
	margin-top: 50px;
	padding: 20px;
	display: flex;
}

div.footerBox {
	width: 33%;
}

div#menu {
	padding: 0px 20px;
	width: 920px;
}

div#banner {
	height: 488px;
}

div#banner.noEventBanners {
	height: 269px;
}

div#banner img {
	width: 100%;
	display: block;
	
}

#siteIDMenu {
	order: 1;
	padding: 0px 20px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
}

#banner {
	order: 2;
}

#menu {
	order: 3;
}

#logo img {
	width: 40px;
}

#secondaryMenu ul, #footerSocial ul {
	list-style-type: none;
	overflow: auto;
	margin: 0;
	padding: 0;
}

#footerSocial ul {
	margin-bottom: 1em;
}

#footerSocial li {
	display: inline;
	padding-left: 0.7em;
}

#footerSocial li:first-child {
	padding-left: 0;
}

#secondaryMenu li {
	display: inline;
	padding-left: 0.2em;
}

#secondaryMenu li:first-child {
	padding-left: 0;
}

div#container {	
	width: 960px;
	margin: auto;
	text-align: left;
	position: relative;
}

div#content {
	position: relative;
	margin: 25px 20px 0px 20px;
}

.threeCol div#mainPanel {
	width: 413px;
}

/*
div#cocktailText {
	width: 730px;
}
*/
/*
div#cocktailText p {
	width: 430px;
}
*/

div#mainPanel {
	width: 730px;
	min-height: 1400px;
}

.noSideBar div#mainPanel {
	width: 100%;
}

body#about div#mainPanel {
/* ensure floats (e.g. boxes on about page) are contained; NB: don't apply to home page as hover effect drop shadows will be clipped on right */
	overflow: auto; 
}

/* Used for private hire page */
body#private_hire div#mainPanel img {
	width: 730px;
}

div#mainPanel img {
	max-width: 730px;
}

.threeCol div#sideCol1 {
	position: absolute;
	left: 433px;
	top: 0px;
	width: 170px;
}

div#sideCol1 {
	position: absolute;
	left: 750px;
	top: 0px;
	width: 170px;
}

div#sideCol2 {
	position: absolute;
	left: 608px;
	top: 0px;
	width: 312px;
}

div#mainPanel h2 {
	margin-top: 0px;
	margin-bottom: 0.2em;
	padding-bottom: 0px;
}

body#cocktails div#mainPanel h2:first-child {
	margin-top: 0px;
}

body#cocktails div#mainPanel h2 {
	margin-top: 0.5em;
}

body#home div#mainPanel h3, body#about div#mainPanel h4 {
	margin-top: 0px;
	margin-bottom: 0px;
}

div#mainPanel h3, div#mainPanel h4, div#mainPanel h5 {
	margin-top: 0.6em;
	margin-bottom: 0px;
}

body#cocktails div#mainPanel h4 {
	margin-top: 20px;
}

div#mainPanel p, #private_hire .videoWrapper {
	margin-top: 0px;
	margin-bottom: 10px;
}

div#mainPanel p#instagramLink {
	margin-top: 15px;
	margin-bottom: 20px;
	text-align: center;
}

div.eventListing {
	margin-bottom: 20px;
	clear: both;
	overflow: auto;
}

.eventListing img {
	width: 180px;
	max-width: 100%;
	float: right;
	margin-left: 5px;
	margin-bottom: 5px;
}

div.panel h4 {
	margin-top: 0px;
	margin-bottom: 0px;
	padding-top: 5px;
	padding-right: 10px;
	padding-left: 10px;
}

div.panel, div.panel p {
	margin-bottom: 5px;
	padding-bottom: 5px;
}

div#signupPanel form {
	margin-top: 10px;
}

div#signupPanel form p {
	margin-top: 3px;
	margin-bottom: 2px;
	line-height: 105%;
}

div.panel p, div.panel table {
	margin-top: 8px;

}

div.panel table {
	width: 100%;
	padding: 0px;
	border-spacing: 0px;
	border-collapse: collapse;
}

div.panel table td {
	padding-bottom: 4px;
}
	
div.panel div.panelBody {
	padding-top: 0px;
	padding-right: 10px;
	padding-left: 10px;	
}

#miniMenu {
	width: 730px;
	margin-bottom: 20px;
}
			
.panel input[type=text] {
	width: 99%;
	border: none;
}

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}


/* Regular Night Grid */

.eventTrio.rowCount1 {
	/* Shorten partial rows */
	width: 33.3%;
}

.eventTrio.rowCount2 {
	/* Shorten partial rows */
	width: 66.6%;
}

.eventTrio  img.nightImage {
	width: 100%;
}

.eventTrio div.night {
	display: table-cell;
	width: 33.3%;
	padding-left: 5px;
	padding-right: 5px;
}

.eventTrio.rowCount2 div.night {
	/* Two cols per row */
	width: 50%;
}

.eventTrio.rowCount1 div.night {
	/* One col per row */
	width: 100%;
}


.eventTrio div.firstCol {
	margin-left: 0px;
	padding-left: 0px;
	padding-right: 10px;
}

.eventTrio div.lastCol {
	margin-right: 0px;
	padding-right: 0px;
	padding-left: 10px;
}

div.eventTrio {
	padding-bottom: 15px;
	margin-top: 20px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
}

/* End Regular Night Grid */

body#about h3 {
	margin-top: 0.4em;
	margin-bottom: -0.2em;
	padding-top: 15px;
	border-top-style: solid;
	border-top-width: 2px;
}

body#about #footer h3 {
	border-top-style: none;
}

div#menu {
	text-align: center;
}


#menu ul {

	margin: 0px;
	padding: 5px 0px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

#menu li {
	list-style-type: none;
	display: inline;
	text-align: left;
	/*
	padding-top: 4px;
	padding-bottom: 2px;	
	*/
}

a img {
	border-style: none;
}

a.heroLinkButton {
 	padding: 8px 18px;
}

a.heroLinkButton span {
	margin-left: 1em;
}

/* Start Flexslider customisation */
.flexslider {
	background-color: #000;
	border: none;
	border-radius: 0px;
	box-shadow: none;
	margin-bottom: 0px;
}
/*
.flexslider .slides img, .slider-banner ul img {
	border: none;
	box-sizing: border-box;
}
*/
/* custom position for paging dots */
.flex-control-nav {
	bottom: 0px;
	z-index: 2;
	line-height: 27px;
}
/* reset line height for list items inc prev / next arrows */
.flexslider li {
	line-height: normal;
}

/* custom colours for prev / next arrows */
/*
.flex-direction-nav a, .flex-direction-nav a:before {
	color: #1c1b1a;
}
*/
/* custom colours for paging dots */

ol.flex-control-paging li a {
	background: none repeat scroll 0 0 #f3f3f3;
	height: 8px;
	width: 8px;
}
ol.flex-control-paging li a.flex-active, ol.flex-control-paging li a:hover {
	background: none repeat scroll 0 0 #bfbfbf;;
}

/* End Flexslider customisation */

.desktop-only {display: block;}

.mobile-only {display: none !important;}

@media (max-width: 768px) { 	
	.desktop-only {
		display: none !important;
	}
	.mobile-only {
		display: block !important;
	}
	
	body {
		background-image: none;
	}
	div#container {
		width: 100%;
	}
	
	div#siteIDMenu {
		padding-top: 5px; padding-bottom: 5px;
	}
	
	div#siteIDMenu>div {
		width: 33%;
	}
	div#mobileMenu {
		text-align: left;
		font-size: 20px;
	}
	div#mobileMenu:hover {
		cursor: pointer;
	}
	div#secondaryMenu {
		text-align: right;
	}
	div#banner, div#banner.noEventBanners {
		height: auto;
	}


	div#mainPanel, .threeCol div#mainPanel, .twoCol div#mainPanel, div#menu, div#cocktailText, div#cocktailText p, body#private_hire div#mainPanel img, div.fb-like {
		width: 100%;
	}
	
	div#mainPanel {min-height: auto;}
	
	div#menu {box-sizing: border-box; display: none;}
	div#menu.show {display: block;}
	
	#banner {
		order: 3;
	}

	div#menu {
		order: 2;
		background-color: #aaa;
	}
	
	#menu ul {
		padding-top: 1em;
	}
	
	#menu ul, #menu li {
		display: block;
	}
	#menu li {
		margin-top: 0.6em;
		margin-bottom: 1.2em;
		font-size: 1em;
	}
	/* increase body text size and contact form input field text size for easier reading on mobile */
	#mainPanel p, #mainPanel td, .panelBody p, .panelBody td, #contactForm td input[type=text], #contactForm td textarea, #contactForm td select {
		font-size: 17px;
	}
	
	div#sideCol1, .threeCol div#sideCol1, div#sideCol2 {
		position: static;
		width: 100%;
	}
	
	div#sideCol1 {
		margin-top: 2em;
	}
	
	.eventListing img {
		width: 140px;
	}

	h2 {font-size: 3.5em;}
	body#home div#mainPanel h3, div#mainPanel h3 {font-size: 2.5em;}

	body#home div#mainPanel p, body#about div#eventInfo p {
		font-size: 1.75em;
	}
	
	#contactForm table {
		width: 100%;
	}
	
	#contactForm tbody, #contactForm tr, #contactForm th, #contactForm td {
		  border: 0;
		  display: block;
		  padding: 0;
		  text-align: left;
		  white-space: normal;
	}
	
	/* Space things out a little */
	#contactForm tr {
		padding-bottom: 5px;
	}
	#contactForm td {
		padding-bottom: 2px;
	}
	
	/* increase width of all fields and their containers */
	#contactForm td, #contactForm td input[type=text], #contactForm td textarea, #contactForm td select {
		width: 100%;
		box-sizing: border-box;
	}
	
	div#footer {flex-direction: column;}
	div.footerBox {
		width: 100%;
	}

	


}

@media (max-width: 350px) { 
	.eventListing img {
		width: 120px;
	}
	#mainPanel p#instagramLink {
		font-size: 1em;
	}
}