/*
Theme Name: The Crossover
Theme URI: https://www.thecrossover.be
Author: Galia
Author URI: https://www.galia.be
Description: WordPress theme voor The Crossover Music Pub. Overgezet vanuit de Joomla template, met ACF en WooCommerce (ticketing).
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: thecrossover
*/

/* ==========================================================================
   1. Variabelen
   ========================================================================== */

:root {
	--color-accent: #e04826;
	--color-accent-hover: #e5694d;
	--color-header: #db472f;
	--color-gold: #e4af69;
	--color-cream: #ebd4af;
	--color-paper: #f4ecdd;
	--color-dark: #13171d;
	--color-hero: #111419;
	--color-text: #444;
	--color-muted: #939598;
	--color-button: #f2e3cc;
	--color-line: #f9f6ef;
	--color-border: #dbdee1;
	--color-footer-link: #53565a;
	--color-white: #fff;
	--color-facebook: #3b5998;
	--color-twitter: #55acee;
	--color-linkedin: #0077b5;
	--font-body: 'Lato', Arial, sans-serif;
	--font-title: 'Oswald', Arial, sans-serif;
	    --wp--preset--font-size--small: 16px;
}

/* ==========================================================================
   2. Fonts
   ========================================================================== */

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(assets/fonts/oswald-400.woff2) format('woff2');
}

@font-face {
	font-family: 'Oswald';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url(assets/fonts/oswald-500.woff2) format('woff2');
}

@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url(assets/fonts/lato-400.woff2) format('woff2');
}

@font-face {
	font-family: 'Lato';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url(assets/fonts/lato-400-italic.woff2) format('woff2');
}

@font-face {
	font-family: 'Font Awesome 5 Free';
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url(assets/fonts/fa-solid-900.woff2) format('woff2');
}

@font-face {
	font-family: 'Font Awesome 5 Brands';
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url(assets/fonts/fa-brands-400.woff2) format('woff2');
}

/* Iconen (alleen de iconen die de site gebruikt) */
.fas,
.fab {
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
}

.fas { font-family: 'Font Awesome 5 Free'; font-weight: 900; }
.fab { font-family: 'Font Awesome 5 Brands'; font-weight: 400; }

.fa-clock:before { content: "\f017"; }
.fa-ticket-alt:before { content: "\f3ff"; }
.fa-euro-sign:before { content: "\f153"; }
.fa-calendar-alt:before { content: "\f073"; }
.fa-thumbs-up:before { content: "\f164"; }
.fa-bars:before { content: "\f0c9"; }
.fa-times:before { content: "\f00d"; }
.fa-angle-left:before { content: "\f104"; }
.fa-angle-right:before { content: "\f105"; }
.fa-facebook-f:before { content: "\f39e"; }
.fa-twitter:before { content: "\f099"; }
.fa-linkedin-in:before { content: "\f0e1"; }

/* ==========================================================================
   3. Basis
   ========================================================================== */

*,
*:before,
*:after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--color-paper) url(assets/img/bg.jpg) 50% / 100% auto repeat-y;
	font-family: var(--font-body);
	color: var(--color-text);
	line-height: 25px;
	font-size: 17px;
	font-weight: 400;
}

p.contact-links {
    margin-top: 20px;
}

::selection {
	background: #f3bcb0;
}

.route .arrow {
	vertical-align: middle;
	margin-left: 0.25em;
}

/* .comp-wrap.page {
    max-width: 900px;
} */

div#customer_details {
    display: flex;
    flex-direction: column;
}

body.woocommerce-checkout .woocommerce .col2-set .col-1, .woocommerce-page .col2-set .col-1 {
    float: left;
    width: 100%;
}

.event-box .wp-post-image {
    object-fit: cover;
    height: 300px;
    object-position: center;
}

body.woocommerce-checkout .comp-wrap.page, 
body.woocommerce-cart .comp-wrap.page,
body.page-id-43 .comp-wrap.page  {
    max-width: 1000px;
	padding-left: 20px;
	padding-right: 20px;
}

section.woocommerce-customer-details {
    display: none;
}

body.woocommerce-cart .comp-wrap.page .coupon {
    display: none;
}

img {
	max-width: 100%;
	height: auto;
	border: 0;
	vertical-align: middle;
}

svg {
	vertical-align: middle;
}

p {
	margin: 0 0 16px;
}

a {
	color: var(--color-accent);
	text-decoration: none;
}

a:hover,
a:focus {
	color: var(--color-gold);
	text-decoration: none;
}

a,
button,
input,
textarea,
select {
	outline: 0;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 10px 0;
	font-family: var(--font-title);
	color: var(--color-accent);
	letter-spacing: .025em;
	font-weight: 400;
	line-height: 40px;
}

h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 21px; line-height: 30px; }
h4 { font-size: 18px; line-height: 26px; }

strong {
	font-weight: 500;
}

ul,
ol {
	margin: 0 0 16px 25px;
	padding: 0;
}

.nav {
	margin: 0;
	padding: 0;
	list-style: none;
}

.bl {
	float: left;
	width: 100%;
}

.cover {
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
}

.clearfix:after,
.comp:after,
.contact:after,
.site-main:after {
	content: "";
	display: table;
	clear: both;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

/* ==========================================================================
   4. Formulieren en knoppen
   ========================================================================== */

label,
input,
button,
select,
textarea {
	font-family: var(--font-body);
	font-weight: 400;
	line-height: 25px;
	font-size: 17px;
}

select,
textarea,
input[type="text"],
input[type="password"],
input[type="date"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"] {
	padding: 4px 6px;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	box-shadow: none;
	background-color: var(--color-white);
	color: #555;
	max-width: 100%;
}

.btn, button.btn, input[type="submit"], .woocommerce a.button, .woocommerce button.button, .woocommerce input.button, .woocommerce #respond input#submit,
.quote-start input[type="submit"], .gform_body button, a.input[type="submit"], a.btn, button.btn, input.wpcf7-submit, .elementor-element .elementor-button {
    display: inline-block;
    padding: 12px 16px;
    background-color: var(--color-button);
    border: 0;
    border-radius: 2px;
    color: var(--color-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 19px;
    cursor: pointer;
    transition: .2s;
    text-transform: uppercase;
}

.wc-block-components-payment-method-icons.wp-block-woocommerce-cart-accepted-payment-methods-block {
    display: none;
}

.btn:hover,
.btn:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.quote-start input[type="submit"], .gform_body button, a.input[type="submit"], a.btn, button.btn, input.wpcf7-submit, .elementor-element .elementor-button {
	color: #fff;
	background-color: var(--color-accent);
}

.editor-styles-wrapper table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name, table.wc-block-cart-items .wc-block-cart-items__row .wc-block-components-product-name {
    font-size: 17px;
}

:root :where(.wp-element-button, .wp-block-button__link) {
	background-color: var(--color-accent);
    color: #fff;
}

.btn-primary, .woocommerce a.button.alt, .woocommerce button.button.alt, .woocommerce input.button.alt {
    background-color: var(--color-accent);
    color: #fff;
    font-size: 16px;
}

.btn-primary:hover,
.btn-primary:focus,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover {
	background-color: var(--color-accent-hover);
	color: #fff;
}

/* ==========================================================================
   5. Animaties
   ========================================================================== */

/* Elementen starten onzichtbaar en komen in beeld bij het scrollen (zie main.js) */
.js .wow {
	opacity: 0;
}

.js .wow.animated {
	animation-duration: 1s;
	animation-fill-mode: both;
}

.js .wow.animated.fadeInUp { animation-name: fadeInUp; }
.js .wow.animated.fadeIn { animation-name: fadeIn; }

@keyframes fadeInUp {
	0% { opacity: 0; transform: translate3d(0, 45px, 0); }
	100% { opacity: 1; transform: none; }
}

@keyframes fadeIn {
	0% { opacity: 0; }
	100% { opacity: 1; }
}

@keyframes updown {
	0% { transform: translate(0, 0); }
	50% { transform: translate(0, 5px); }
	100% { transform: translate(0, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.js .wow {
		opacity: 1;
		animation: none !important;
	}
}

/* ==========================================================================
   6. Header (vaste rode balk)
   ========================================================================== */

.ha-header {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0;
	z-index: 99999;
	transform: translateY(-50%);
	transition: all .7s;
	opacity: 0;
	visibility: hidden;
}

.ha-header-show,
.no-js .ha-header {
	transform: translateY(0%);
	opacity: 1;
	visibility: visible;
}

.ha-header-front {
	height: 90px;
	overflow: hidden;
	position: relative;
	box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
	background-color: var(--color-header);
}

.header-wrap {
	display: flex;
	max-width: 1720px;
	margin: 0 auto;
	padding: 0 60px;
}

.topmenu-l,
.topmenu-r {
	width: 40%;
}

.topmenu-logo-wrap {
	width: 20%;
	padding: 12px 0;
	text-align: center;
}

.topmenu-logo img {
	width: 145px;
}

.topmenu .menu {
	display: flex;
}

.topmenu li {
	width: 33.3333333%;
	text-align: center;
}

.topmenu a {
	display: block;
	text-transform: uppercase;
	color: var(--color-cream);
	font-family: var(--font-title);
	line-height: 88px;
	font-size: 24px;
	white-space: nowrap;
}

.topmenu a:hover,
.topmenu a:focus,
.topmenu li.current-menu-item a,
.topmenu li.current_page_parent a {
	color: var(--color-gold);
}

/* ==========================================================================
   7. Mobiel menu
   ========================================================================== */

.mobile-menu {
	z-index: 999;
	position: fixed;
	top: 0;
	left: 0;
	background-color: var(--color-accent);
	width: 100%;
	height: 70px;
}

.mobile-logo {
	text-align: center;
}

.mobile-logo img {
	max-height: 54px;
	margin: 8px 0;
}

.menu-toggle {
	position: absolute;
	top: 0;
	left: 0;
	height: 70px;
	padding: 0 22px 0 18px;
	background: transparent;
	border: 0;
	color: var(--color-cream);
	font-family: var(--font-title);
	font-size: 20px;
	letter-spacing: .025em;
	text-transform: uppercase;
	cursor: pointer;
}

.menu-toggle .fas {
	font-size: 24px;
	vertical-align: middle;
	margin-right: 10px;
}

.menu-toggle span {
	vertical-align: middle;
}

.mobile-nav {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100001;
	width: 240px;
	height: 100%;
	padding: 20px 0;
	overflow-y: auto;
	background-color: var(--color-dark);
	transform: translateX(-100%);
	transition: transform .4s ease-out;
}

.mobile-nav a {
	display: block;
	padding: 12px 26px;
	font-family: var(--font-title);
	font-size: 20px;
	letter-spacing: .025em;
	text-transform: uppercase;
	color: var(--color-cream);
}

.mobile-nav a:hover,
.mobile-nav a:focus,
.mobile-nav li.current-menu-item a {
	color: var(--color-accent);
}

.mobile-overlay {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 100000;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, .5);
	opacity: 0;
	visibility: hidden;
	transition: .4s;
}

.menu-open .mobile-nav {
	transform: translateX(0);
}

.menu-open .mobile-overlay {
	opacity: 1;
	visibility: visible;
}

/* ==========================================================================
   8. Home: hero met logo en menu
   ========================================================================== */

.home-section {
	position: relative;
}

.home-wrap {
	height: 100vh;
	background-image: url(assets/img/bg-home.jpg);
	background-color: var(--color-hero);
	text-align: center;
	font-family: var(--font-title);
	text-transform: uppercase;
	font-weight: 400;
}

.home-row1 { height: 15%; }
.home-row2 { height: 70%; display: flex; }
.home-row3 { height: 15%; position: relative; }

.menu-l-wrap,
.menu-r-wrap,
.logo-wrap {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33.33333%;
	height: 100%;
	white-space: nowrap;
}

.menu-l-wrap a,
.menu-r-wrap a {
	display: block;
	font-size: 40px;
	line-height: 80px;
	margin: 50px 0;
	letter-spacing: .025em;
	font-weight: 400;
}

.logo-wrap img {
	width: auto;
	height: 100%;
	max-height: 593px;
	object-fit: contain;
}

.login-wrap {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 99;
}

.login-wrap a {
	display: block;
	padding: 0 25px;
	background-color: var(--color-accent);
	border-bottom-left-radius: 4px;
	color: var(--color-cream);
	font-family: var(--font-title);
	font-size: 18px;
	line-height: 50px;
	letter-spacing: .025em;
	text-transform: uppercase;
}

/* Scroll down icoon */
.scroll-down {
	position: absolute;
	left: 50%;
	margin-left: -20px;
	width: 40px;
	height: 40px;
	bottom: 40px;
	padding-left: 7px;
	cursor: pointer;
	z-index: 2;
	color: var(--color-cream);
}

.scroll-down svg {
	width: 25px;
}

.scroll-down .stroke {
	stroke: var(--color-cream);
}

.scroll-down .scroller {
	fill: var(--color-cream);
	animation: updown 1.5s infinite;
}

/* ==========================================================================
   9. Pagina opbouw (licht en donker)
   ========================================================================== */

.site-main {
	position: relative;
}

.comp-wrap,
.latest-wrap,
.musicpub-wrap,
.history-wrap,
.menucard-wrap {
	max-width: 1740px;
	margin: 0 auto;
	padding-left: 70px;
	padding-right: 70px;
}

.comp-bg,
.history-bg {
	min-height: 542px;
	background-image: url(assets/img/bg-top.png);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: contain;
}

.comp-wrap.home .comp {
	padding-top: 90px;
	padding-bottom: 80px;
}

.comp-wrap.page .comp {
	padding-top: 170px;
	padding-bottom: 80px;
}

.comp-wrap h1,
.history-wrap h1,
.latest-wrap h2,
.menucard h1 {
	margin: 10px 0 54px;
	text-align: center;
	text-transform: uppercase;
	font-size: 42px;
	padding: 0;
}

.comp-l {
	float: left;
	width: 75%;
}

.comp-r {
	float: left;
	width: 20%;
	margin-left: 5%;
}

.comp-r .moduletable {
	margin-bottom: 40px;
}

.comp-r h3 {
	font-size: 27px;
	margin: 0 0 12px;
	color: var(--color-text);
}

.up-event-item {
	padding: 0 0 16px;
	margin: 0 0 16px;
	border-bottom: 2px solid #f4e3d2;
	line-height: 22px;
}

.ebm-event-date {
	margin-top: 7px;
	display: inline-block;
	color: #666;
	font-size: 16px;
}

.ebm-event-date .fas {
	margin-right: 4px;
}

.menucard-bg,
.musicpub-bg {
	background-image: url(assets/img/bg-home.jpg);
	background-color: var(--color-dark);
	min-height: 100vh;
}

/* ==========================================================================
   10. Agenda (events)
   ========================================================================== */

.events {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
}

.event-box {
	width: 32.3333%;
	padding: 0 1%;
}

.thumb-wrap {
	position: relative;
}

.thumb-wrap img {
	display: block;
	width: 100%;
	border-radius: 4px 4px 0 0;
}

.event-date,
.latest-date {
	position: absolute;
	z-index: 9;
	top: 14px;
	left: 14px;
	width: 65px;
	height: 110px;
	padding: 10px 0 0;
	margin: 0;
	background-image: url(assets/img/bg-date.png);
	background-size: 100%;
	background-repeat: no-repeat;
	text-align: center;
	font-size: 19px;
	color: var(--color-cream);
	line-height: 23px;
}

.desc-wrap {
	margin: 0 0 34px;
	background-color: var(--color-white);
	border-radius: 0 0 4px 4px;
	font-size: 16px;
}

.desc {
	padding: 24px 30px 20px;
	min-height: 272px;
}

.event-box h2,
.news-title {
	font-size: 26px;
	line-height: 32px;
	margin: 0 0 12px;
	font-family: var(--font-title);
	font-weight: 400;
}

.event-short-description {
	margin-bottom: 14px;
}

.ticketinfo-home ul,
.ticketinfo ul {
	list-style: none;
	margin: 3px 0 8px;
	padding: 0;
}

.ticketinfo-home ul:after,
.ticketinfo ul:after {
	content: "";
	display: table;
	clear: both;
}

.ticketinfo-home li {
	float: left;
	margin-right: 10px;
	color: var(--color-accent);
	line-height: 20px;
}

.ticketinfo-home .fas,
.ticketinfo .fas {
	margin-right: 4px;
}

.event-taskbar {
	border-top: 2px solid var(--color-line);
}

.event-taskbar ul {
	display: flex;
	justify-content: flex-end;
	list-style: none;
	margin: 0;
	padding: 0;
	min-height: 44px;
}

.event-taskbar a.btn-reg {
	display: inline-block;
	padding: 12px 16px;
	border-left: 2px solid var(--color-line);
	color: var(--color-text);
	line-height: 20px;
	transition: .25s;
}

.event-taskbar a.btn-reg:hover,
.event-taskbar a.btn-reg:focus {
	background-color: var(--color-accent);
	color: var(--color-cream);
	transition: .2s;
}

.event-taskbar .sold-out {
	display: inline-block;
	padding: 12px 16px;
	color: var(--color-muted);
	line-height: 20px;
}

.events-empty {
	width: 100%;
	text-align: center;
}

/* Event detail (WooCommerce product) */
.event-details {
	float: left;
	width: 100%;
}

.event-left {
	width: 35%;
	float: left;
	margin-right: 3%;
	margin-bottom: 88px;
}

.event-left img {
	width: 100%;
	border-radius: 4px;
}

.event-right {
	width: 62%;
	float: left;
	margin-bottom: 20px;
}

.no-image .event-right {
	width: 100%;
}

.comp-wrap .event-right h1 {
	margin: 10px 0;
	text-align: left;
	text-transform: none;
	font-size: 37px;
}

.event-right .ticketinfo-wrap {
	margin-bottom: 14px;
}

.ticketinfo li {
	float: left;
	margin: 0 14px 0 0;
	line-height: 24px;
	color: var(--color-accent);
}

.event-tickets {
	margin-top: 30px;
}

.event-tickets form.cart {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	margin: 0;
}

.event-tickets .quantity .qty {
	width: 70px;
	padding: 6px;
	text-align: center;
}

.event-tickets .stock {
	color: var(--color-muted);
}

.share-buttons {
	margin: 20px 0 30px;
	float: left;
	width: 100%;
}

.share-buttons .btn {
	margin: 5px 5px 5px 0;
	padding: 7px 10px;
	width: 40px;
	font-size: 20px;
	text-align: center;
	line-height: 26px;
}

/* ==========================================================================
   11. Nieuws
   ========================================================================== */

.latest {
	max-width: 1600px;
	margin: 0 auto;
	padding: 0 0 80px;
}

.news-grid {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px 20px;
}

.news-item {
	width: 33.3333%;
	padding: 0 15px 25px;
}

.news-thumb {
	position: relative;
	margin-bottom: 10px;
}

.news-image {
	display: block;
	padding-bottom: 60%;
	background-color: var(--color-button);
	background-position: center center;
	background-size: cover;
	border-radius: 4px;
	overflow: hidden;
}

.news-title {
	padding-top: 10px;
	margin: 0 0 4px;
}

.news-body {
	padding-top: 10px;
}

.news-more {
	text-align: center;
}

.pagination {
	margin: 20px 0;
	text-align: center;
}

.pagination .page-numbers {
	display: inline-block;
	padding: 8px 18px;
	margin: 1px;
	background-color: var(--color-white);
	border-radius: 2px;
}

.pagination .page-numbers.current {
	background-color: var(--color-accent);
	color: var(--color-cream);
}

/* Nieuwsbericht */
.entry-head {
	margin-bottom: 20px;
}

.comp-wrap .entry-head h1 {
	margin: 0;
	padding: 0;
	text-align: left;
	text-transform: none;
}

.entry-image {
	margin-bottom: 20px;
}

.entry-image img {
	border-radius: 4px;
}

.entry-nav {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	margin-top: 40px;
}

.entry-nav .fas {
	margin: 0 6px;
}

/* Standaard pagina inhoud */
.entry-content img {
	border-radius: 4px;
}

.entry-content.narrow {
	max-width: 800px;
	margin: 0 auto;
}

/* ==========================================================================
   12. Music pub
   ========================================================================== */

.musicpub-wrap {
	padding: 174px 60px 110px;
	text-align: center;
}

.musicpub-wrap h1 {
	margin: 10px 0 30px;
	text-align: center;
	text-transform: uppercase;
	font-size: 42px;
	padding: 0;
}

.musicpub-intro {
	max-width: 1000px;
	margin: 0 auto 50px;
	color: var(--color-muted);
}

.musicpub-intro a {
	color: var(--color-muted);
}

.musicpub-intro a:hover,
.musicpub-intro a:focus {
	color: var(--color-cream);
}

.gallery-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.gallery-grid a {
	position: relative;
	display: block;
	padding-bottom: 67.3%;
	background-position: center center;
	background-size: cover;
	border-radius: 4px;
	overflow: hidden;
}

.gallery-grid a:after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: var(--color-dark);
	opacity: 0;
	transition: opacity .3s;
}

.gallery-grid a:hover:after,
.gallery-grid a:focus:after {
	opacity: .4;
}

/* Lightbox */
.lightbox {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 200000;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: rgba(19, 23, 29, .95);
	opacity: 0;
	visibility: hidden;
	transition: .3s;
}

.lightbox.open {
	opacity: 1;
	visibility: visible;
}

.lightbox img {
	max-width: 90%;
	max-height: 90%;
	border-radius: 4px;
}

.lightbox button {
	position: absolute;
	width: 60px;
	height: 60px;
	background: transparent;
	border: 0;
	color: var(--color-cream);
	font-size: 34px;
	cursor: pointer;
}

.lightbox button:hover {
	color: var(--color-accent);
}

.lightbox .lightbox-close { top: 10px; right: 10px; }
.lightbox .lightbox-prev { left: 10px; top: 50%; margin-top: -30px; }
.lightbox .lightbox-next { right: 10px; top: 50%; margin-top: -30px; }

/* ==========================================================================
   13. History
   ========================================================================== */

.history {
	margin: 170px 0 80px;
}

.history-bl1,
.history-bl2,
.history-bl3 {
	width: 33.333333%;
	padding: 0 3%;
	float: left;
}

.history-wrap h2 {
	margin: 0 0 24px;
	font-size: 32px;
	line-height: 34px;
}

.history-bl1 img,
.history-bl3 img {
	border-radius: 6px;
	margin: 22px 0;
}

.history-bl2 img {
	border-radius: 4px;
	margin-bottom: 22px;
}

/* ==========================================================================
   14. Donkere pagina (o.a. Band Bookings)
   ========================================================================== */

.menucard {
	margin: 170px 0 80px;
}

.menucard-wrap {
	color: var(--color-cream);
}

.menucard-intro {
	text-align: center;
}

.band-sub {
	margin: 20px auto 0;
	width: 100%;
	max-width: 900px;
}

.contact-r.band-sub {
	float: none;
	width: 100%;
	margin: 20px auto 0;
}

/* ==========================================================================
   15. Veelgestelde vragen
   ========================================================================== */

.accordion {
	max-width: 800px;
	margin: 0 auto;
}

.accordion-group {
	margin-bottom: 7px;
}

.accordion-toggle {
	display: block;
	width: 100%;
	padding: 12px 18px;
	background: #f8f8f8;
	border: 1px solid var(--color-border);
	border-radius: 4px;
	color: var(--color-text);
	text-align: left;
	cursor: pointer;
}

.accordion-toggle:hover,
.accordion-toggle:focus {
	color: var(--color-accent);
}

.accordion-body {
	height: 0;
	overflow: hidden;
	transition: height .35s ease;
}

.accordion-inner {
	padding: 9px 18px;
}

/* ==========================================================================
   16. Contact (blok in de footer en de contactpagina)
   ========================================================================== */

.contact-bg {
	background-color: var(--color-dark);
}

.contact-wrap {
	max-width: 1440px;
	margin: 0 auto;
	padding-left: 60px;
	padding-right: 60px;
	color: var(--color-muted);
}
.contact {
    padding: 85px 0;
    display: flex;
    flex-direction: column;
    max-width: 600px;
    align-items: center;
    margin: auto;
}
.contact-l, .contact-r {
    width: 100%;
}

.contact-page .contact {
	padding-top: 170px;
	min-height: 750px;
}

.contact-wrap h1,
.contact-wrap h2 {
	text-align: center;
	margin: 0 0 54px;
	font-size: 42px;
	text-transform: uppercase;
}

.contact-wrap h3 {
	margin: 0 0 24px;
	font-size: 28px;
	line-height: 34px;
	font-weight: 400;
	text-transform: uppercase;
}

.contact-wrap h3 span {
	font-family: var(--font-body);
	font-size: 17px;
	padding-left: 3px;
	color: var(--color-muted);
	letter-spacing: 0;
	text-transform: none;
}

.address {
    display: flex;
    gap: 20px;
	margin-bottom: 35px;
}

.add-l, .add-r {
    width: 50%;
}

.contact-links a {
	padding: 3px 8px 7px 0;
	color: var(--color-muted);
	display: inline-block;
}

.contact-links a:hover,
.contact-links a:focus {
	color: var(--color-cream);
}

.contact-links a:before,
.musicpub-intro a.faq:before {
	font-family: 'Font Awesome 5 Free';
	line-height: 1;
	padding-right: 8px;
	font-weight: 900;
}

.contact-links a.mail:before { content: '\f1fa'; }
.contact-links a.phone:before { content: '\f095'; }
.contact-links a.fb:before { content: "\f39e"; font-family: 'Font Awesome 5 Brands'; font-weight: 400; }
.contact-links a.faq:before,
.musicpub-intro a.faq:before { content: '\f129'; }

/* Openingsuren */


.openinghours-eachday {
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding-bottom: 6px;
}
.ft-address {
    margin-bottom: 10px;
}

.openinghours-eachday.today {
	color: var(--color-accent);
}

.openinghours-day { width: 30%; text-align: left; }
.openinghours-date { width: 30%; text-align: center; }
.openinghours-time { width: 30%; text-align: right; }

/* Formulier op donkere achtergrond (werkt met Contact Form 7) */
.contact-r form p {
	margin: 0;
}

.contact-r br {
	display: none;
}

.contact-r form:after,
.contact-r .fields:after {
	content: "";
	display: table;
	clear: both;
}

.contact-r .fields-l,
.contact-r .fields-r {
	width: 49%;
	float: left;
}

.contact-r .fields-l { margin-right: 1%; }
.contact-r .fields-r { margin-left: 1%; }

.contact-r textarea,
.contact-r input[type="text"],
.contact-r input[type="email"],
.contact-r input[type="tel"],
.contact-r input[type="url"],
.contact-r input[type="number"],
.contact-r select {
	width: 100%;
	margin-bottom: 12px;
	padding: 12px 3%;
	background-color: rgba(255, 255, 255, .05);
	border: 0;
	border-radius: 2px;
	box-shadow: none;
	color: var(--color-muted);
	font-size: 15px;
}

.contact-r textarea {
	padding: 16px 2%;
	min-height: 190px;
	vertical-align: top;
}

.contact-r input::placeholder,
.contact-r textarea::placeholder {
	color: #7e8083;
	opacity: 1;
}

.contact-r input[type="submit"],
.contact-r button[type="submit"],
.contact-r .btn {
	margin: 8px 0 0 8px;
	background-color: var(--color-accent);
	color: var(--color-cream);
}

.contact-r input[type="submit"]:hover,
.contact-r input[type="submit"]:focus,
.contact-r button[type="submit"]:hover,
.contact-r .btn:hover {
	background-color: var(--color-accent-hover);
}

.contact-r .wpcf7-not-valid-tip {
	margin: -8px 0 10px;
	color: var(--color-accent);
	font-size: 12px;
}

.contact-r .wpcf7 form .wpcf7-response-output {
	clear: both;
	margin: 20px 0 0;
	padding: 10px 14px;
	border: 0;
	border-radius: 2px;
	background-color: rgba(255, 255, 255, .05);
}

/* ==========================================================================
   17. Footer
   ========================================================================== */

.ft-bg {
	background-color: var(--color-dark);
}

.ft-wrap {
	text-align: center;
}

.ft-wrap .menu {
	display: inline-flex;
	flex-wrap: wrap;
	justify-content: center;
}

.ft-wrap .menu li a,
.ft-wrap .menu li span {
	display: block;
	font-size: 15px;
	line-height: 20px;
	padding: 0;
	margin: 48px 10px;
	color: var(--color-footer-link);
}

.ft-wrap .menu li a:hover,
.ft-wrap .menu li a:focus {
	color: var(--color-cream);
}

/* ==========================================================================
   18. WooCommerce (winkelwagen, afrekenen, account)
   ========================================================================== */

.woocommerce-message,
.woocommerce-info,
.woocommerce-error {
	border-top-color: var(--color-accent);
}

.woocommerce-message:before,
.woocommerce-info:before {
	color: var(--color-accent);
}

.woocommerce table.shop_table {
	background-color: var(--color-white);
	border-radius: 4px;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea {
	padding: 8px 10px;
}

.woocommerce-checkout #payment {
	background-color: var(--color-button);
	border-radius: 4px;
}

/* ==========================================================================
   19. Responsive
   ========================================================================== */

@media (min-width: 980px) {
	.mobile-menu,
	.mobile-nav,
	.mobile-overlay {
		display: none;
	}
}

@media (max-width: 1200px) {
	.comp-wrap,
	.latest-wrap,
	.musicpub-wrap,
	.history-wrap,
	.menucard-wrap {
		padding-left: 40px;
		padding-right: 40px;
	}

	.event-taskbar a.btn-reg {
		padding: 9px 8px;
	}

	.topmenu a {
		font-size: 22px;
	}
}

@media (max-width: 1100px) {
	.event-box,
	.news-item {
		width: 50%;
	}
}

@media (max-width: 979px) {
	.ha-header {
		display: none;
	}

	.home-row1 {
		height: 20%;
	}

	.home-row3,
	.menu-l-wrap,
	.menu-r-wrap {
		display: none;
	}

	.logo-wrap {
		width: 100%;
	}

	.comp-l,
	.comp-r {
		width: 100%;
		margin: 0;
	}

	.comp-l {
		margin-bottom: 40px;
	}

	.event-left,
	.event-right {
		width: 100%;
	}

	.event-left {
		margin-bottom: 50px;
	}

	.history-bl1,
	.history-bl2,
	.history-bl3 {
		width: 100%;
		padding: 0;
	}

	.contact-r,
	.contact-l {
		width: 100%;
		margin-right: 0;
		margin-left: 0;
	}


	.gallery-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 768px) {
	.comp-wrap,
	.latest-wrap,
	.musicpub-wrap,
	.history-wrap,
	.menucard-wrap {
		padding-left: 30px;
		padding-right: 30px;
	}

	.contact-wrap {
		padding-left: 30px;
		padding-right: 30px;
	}

	.menu-toggle span,
	.login-wrap {
		display: none;
	}

	.news-item {
		width: 100%;
	}

	.contact-wrap h3 span {
		display: block;
		padding-left: 0;
	}

	.openinghours-day,
	.openinghours-date {
		width: 35%;
		text-align: left;
	}

	.ft-wrap .menu {
		margin: 0 30px 30px;
	}

	.ft-wrap .menu li a,
	.ft-wrap .menu li span {
		margin: 8px 6px;
	}

	.gallery-grid {
		grid-template-columns: 1fr;
	}


	.address {
    display: flex;
    gap: 40px;
    margin-bottom: 35px;
    flex-direction: column;
}
}

@media (max-width: 750px) {
	.event-box {
		width: 100%;
		padding: 0;
	}
}

/* ==========================================================================
   20. Deel knoppen bij een nieuwsbericht
   ========================================================================== */

.news-share {
	margin-top: 30px;
}

.news-share .btn {
	margin-right: 4px;
	padding: 7px 12px;
	color: var(--color-white);
	font-size: 13px;
}

.news-share .btn:hover,
.news-share .btn:focus {
	opacity: .85;
}

.news-share .fab {
	margin-right: 4px;
}

.news-share .facebook { background-color: var(--color-facebook); }
.news-share .twitter { background-color: var(--color-twitter); }
.news-share .linkedin { background-color: var(--color-linkedin); }

/* ==========================================================================
   21. Nieuwsbericht: afbeelding onder de tekst, navigatie en nieuwsbrief
   ========================================================================== */

.entry-image {
	margin: 60px 0 0;
	text-align: center;
}

.entry-image img {
	border-radius: 0;
}

.entry-caption {
	margin: 10px 0 0;
}

.entry-nav {
	gap: 0;
	margin-top: 28px;
	border: 1px solid var(--color-button);
}

.entry-nav div {
	width: 50%;
	padding: 14px 20px;
	font-size: 14px;
	text-transform: uppercase;
}

.entry-nav div:first-child {
	border-right: 1px solid var(--color-button);
}

.entry-nav div:last-child {
	text-align: right;
}

.entry-nav a {
	color: var(--color-text);
}

.entry-nav a:hover,
.entry-nav a:focus {
	color: var(--color-accent);
}

.newsletter {
	font-size: 16px;
}

.newsletter-form {
	padding: 22px 18px 6px;
	background-color: var(--color-button);
	border-radius: 4px;
}

.newsletter-form input[type="text"],
.newsletter-form input[type="email"] {
	width: 100%;
	margin-bottom: 8px;
}

/* ==========================================================================
   22. Event detail: ticket knoppen, video en deel knoppen
   ========================================================================== */

button.btn-primary {
	background-color: var(--color-accent);
color: #fff;
	font-size: 15px;
}

button.btn-primary:hover,
button.btn-primary:focus {
	background-color: var(--color-accent-hover);
}

.event-tickets .btn {
	margin: 0 2px 8px 0;
}

.group-form {
	margin-top: 8px;
}

.event-sold-out {
	margin-top: 30px;
	color: var(--color-muted);
}

.event-video {
	position: relative;
	margin-top: 30px;
	padding-bottom: 56.25%;
	height: 0;
}

.event-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.share-buttons {
	margin-top: 8px;
}

.share-buttons .btn {
	width: 60px;
	margin: 0 2px 5px 0;
	color: var(--color-white);
}

.share-buttons .btn:hover,
.share-buttons .btn:focus {
	opacity: .85;
}

.share-buttons .facebook { background-color: var(--color-facebook); }
.share-buttons .twitter { background-color: var(--color-twitter); }
.share-buttons .linkedin { background-color: var(--color-linkedin); }


/* ==========================================================================
   23. Openingsuren: vakanties en afwijkende dagen
   ========================================================================== */

.openinghours-holiday {
	padding: 8px 12px;
	background-color: rgba(255, 255, 255, .05);
	border-left: 3px solid var(--color-accent);
	border-radius: 2px;
}

.openinghours-holiday strong {
	color: var(--color-cream);
}

.openinghours-note {
	display: block;
	font-size: 14px;
	color: var(--color-muted);
}

.openinghours-eachday.today .openinghours-note {
	color: var(--color-accent);
}