/*
 * Description: Venues styles
 * Version: 0.0.6
 * Author: https://www.viscodesign.com
 * Custom stylesheet for Venues pages.
 */

/*--------------------------------------------------------------
# 	Variables
--------------------------------------------------------------*/
body {
	--content-width: 48em;
}

/* 	Typography
------------------------------------------------------------------------------*/
h1 {
	font-family: var(--font-display);
	font-weight: 100;
	color: var(--grey);
}
h2 {
	font-family: var(--font-headline);
	color: var(--primary);
}
h3 {
	font-family: var(--font-headline);
	color: var(--dark);
}
h4 {
	font-family: var(--font-headline);
	color: var(--dark);
}
p {
	font-family: var(--font-body);
}

/* 	lists
--------------------------------------------------------------*/
ul, ol {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	color: var(--dark);
	font-weight: 400;
}
ul li i[class*="fa-"], 
ol li i[class*="fa-"] {
	margin-right: 0.5em;
}

/*--------------------------------------------------------
#	Venue Archives
--------------------------------------------------------*/
.venues-filtering .form-filters select {
	max-width: 100%;
}
.grid-card.venue {
	text-align: center;
	background-color: #fff;
	border: 1px solid var(--light);
}
.grid-card .venue-logo {
	position: absolute;
	top: 101%;
	width: auto;
	max-width: 70%;
	height: auto;
	max-height: 70%;
	opacity: 0;
	transition: all 0.75s ease-in-out;
	z-index: 2003;
}
.grid-card .entry-header:hover .venue-logo {
	top: 50%;
	transform: translateY(-50%);
	opacity: 1;
}
.grid-card.venue footer {
	padding-bottom: 1.5em;
}

/*--------------------------------------------------------------
# 	Hero Section
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# 	Venue Navigation
--------------------------------------------------------------*/
#venue_navigation {
	position: sticky;
	top: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	background-color: var(--dark);
	z-index: 99998;
}

/*--------------------------------------------------------------
# 	Venue Info
--------------------------------------------------------------*/
#venue_info {
	padding-bottom: 0;
}
#venue_info .inner-wrapper {
	padding-bottom: var(--box-padding);
	border-bottom: 1px solid #ddd;
}
.venue-info-wrapper {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	grid-gap: var(--box-padding);
}
.venue-info-wrapper h4 {
	color: var(--primary);
	font-weight: 600;
}
.venue-info-wrapper h4::before {
	font-family: "Font Awesome 5 Pro"; 
	font-weight: 300; 
	margin-right: 0.5em;
	color: inherit;
}
.venue-info-wrapper a {
	color: var(--primary);
	text-decoration: none;
}
.venue-info-wrapper a:hover {
	color: var(--dark);
}

/* 	hours
--------------------------------------------------------------*/
.venue-hours h4::before {
	content: '\f017';
}
.venue-info ul li {
	line-height: 2;
}
p.hours-title {
	margin-bottom: 0.25em;
	font-weight: 700;
}
table.venue-hours {
	font-size: 0.8125em;
	line-height: 1;
}
table.venue-hours tr td {
	padding: 0.25em 0;
}
table.venue-hours tr td:first-child {
	padding-right: 1em;
}

/* 	location
--------------------------------------------------------------*/
.venue-location h4::before {
	content: '\f3c5';
}

/* 	contact
--------------------------------------------------------------*/
.venue-contact a:hover {
	color: var(--primary);
}
.venue-contact h4::before {
	content: '\f879';
}
li.contact-link.map {
}
li.contact-link.map a {
	text-decoration: underline;
}
li.contact-link.map a:hover {
	color: var(--primary);
}
.venue-contact .social-links {
	margin-top: 1em;
}
.venue-contact .social-links li i[class*="fa-"] {
	width: auto;
	height: auto;
	margin-right: 0.75em;
	padding: 0;
	color: var(--dark);
	background-color: transparent;
	border-radius: 0;
}
.venue-contact .social-links li i[class*="fa-"]:hover {
	color: var(--grey);
	background-color: transparent;
}

/* 	reservations / ordering
--------------------------------------------------------------*/
.venue-bookings h4::before {
	content: '\f1fa';
}
.venue-bookings .btn {
	display: block;
	max-width: 14em;
	margin-bottom: 0.5em;
	background-color: var(--primary);
}

/* 	CTA Buttons */
.venue-cta-button.tripleseat::after {
	content: none;
}

/* 	Tripleseat Form
--------------------------------------------------------------*/
.tripleseat-form-wrapper {
	text-align: center;
}
#tripleseat_form {
	display: none;
}


/*--------------------------------------------------------------
# 	Main Content
--------------------------------------------------------------*/
#main_content.venue {
	text-align: center;
}
h1.venue-title {
	margin-bottom: 1em;
	text-transform: uppercase;
}
#main_content.venue h2 + p {
	color: var(--grey);
	font-size: 1.5em;
}
#main_content.venue .btn.primary {
	background-color: var(--primary);
}

/*--------------------------------------------------------------
# 	Reservations
--------------------------------------------------------------*/
#venue_reservations {
	text-align: center;
	background-color: var(--light);
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}

/* 	Open Table
--------------------------------------------------------------*/
#open_table .iframe-wrapper {
	height: 100%;
	padding-bottom: 0;
}
#open_table .iframe-wrapper iframe {
	position: relative;
	max-width: 840px;
	height: 100%;
}

/*--------------------------------------------------------------
# 	Photo Gallery
--------------------------------------------------------------*/
.gallery-title {
	text-align: center;
}

/*--------------------------------------------------------------
# 	Video
--------------------------------------------------------------*/
#venue_video {
	text-align: center;
	background-color: var(--dark);
}
h3.video-title {
	color: #fff;
}


/*--------------------------------------------------------------
# 	Instagram
--------------------------------------------------------------*/
#venue_instagram {
	text-align: center;
	background-color: var(--light);
	border-top: 1px solid #ddd;
	border-bottom: 1px solid #ddd;
}
#venue_instagram h3 i[class*="fa-"] {
	padding-right: 0.5em;
}
#venue_instagram h3 a:hover {
	text-decoration: underline;
}
#venue_instagram a.btn {
	margin-top: 2em;
}

/*--------------------------------------------------------------
# 	Call-to-action
--------------------------------------------------------------*/
#page_cta {
	background-color: var(--primary);
}

/*--------------------------------------------------------------
# 	Gift Cards
--------------------------------------------------------------*/
.gift-card-color-lighter-section .visual-image > img {
	width: auto!important;
	margin-left: auto;
	margin-right: auto;
}
.gift-card-color-lighter-section .kolona23 {
	width: 90%!important;
	margin: 0 auto!important;
	float: none;
}
.color_section .kolona1, .bg_white > .container > .kolona1 {
	width: 90%!important;
	float: none;
	margin: 0 auto;
}

/*--------------------------------------------------------------
# 	Media Queries
--------------------------------------------------------------*/

/* 	480px Breakpoint	*/
@media only screen and (min-width: 480px) {


}

/* 	700px Breakpoint	*/
@media only screen and (min-width: 700px) {

h3.venue-tagline {
	font-size: 1.5em;
}
.hero-image-wrapper {
	height: 50vh;
}
.hero-overlay {
	background-color: transparent;
	background-image: radial-gradient( var(--dark) 0%, transparent 60% );
	opacity: 0.6;
}
.venue-info-wrapper {
	grid-template-columns: repeat(2, auto);
}
.venues-filtering .form-filters select {
	max-width: 40%;
}

}

/* 	1000px Breakpoint	*/
@media only screen and (min-width: 1000px) {

#venue_navigation {
	padding: 0 var(--box-padding);
}
.venue-info-wrapper {
	grid-template-columns: repeat(4, auto);
}

}

/* 	1200px Breakpoint	*/
@media only screen and (min-width: 1200px) {


}