/*
 Theme Name:   Joyn Child Theme
 Description:  A child theme of the Joyn WordPress theme (BoeCult)
 Author:       Juist B.V.
 Template:     joyn
 Version:      1.0.0
*/

@import url("../joyn/style.css");

body {
	margin: 0;
	padding: 0;
}

/* =====================================================
	Landingspagina voor BoeCult.nl & Localdeejays.nl
======================================================== */

.page-template-template-blank3fw .page-heading {
	display: none;
}

.landingspage {
	height: 100vh;
	width: 100vw;
}

.landingspage .inner-page-wrap {
	margin: 0;
}

.landingspage-wrapper {
	position: relative;
	height: 50vh;
	width: 100vw;
}


.landingspage-wrapper .hover-boecult, .landingspage-wrapper .hover-localdeejays {
	position: relative;
	display: inline-block;
	width: 100%;
	height: 100%;
	-webkit-transition: background-color 1000ms ease;
    -ms-transition: background-color 1000ms ease;
    transition: background-color 1000ms ease;
    z-index: 2;
    overflow: hidden;
}

.landingspage-wrapper.boecult {
	background-color: #9acd66;
}

.landingspage-wrapper.localdeejays {
	background-color: #811d4d;
}

.landingspage-wrapper a:hover .landingspage-background {
	opacity: 0.4;
}

.landingspage-wrapper .landingspage-background {
	position: absolute;
	width: 100%;
	height: 100%;
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	transition: all 0.5s ease-in-out;
	z-index: 1;
}

.landingspage-wrapper .landingspage-background.zoom {
	transform: scale(1.2);
}

.landingspage-wrapper .caption {
	position: absolute;
	top: 0;
	left: 0;
	color: #ffffff;
	z-index: 10;
	font-size: 50px;
	line-height: 1;
	display: none;
}

.landingspage-wrapper .logo {
	position: absolute;
	width: 200px;
	height: 200px;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 20;
	border: 20px solid #ffffff;
}

/* =====================================================
	Homepage Video
======================================================== */

.home-video {
	max-height: 550px;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	position: relative;
}

.home-video .the-video {
	width: 100%;
	height: auto;
}

.home-video .caption {
	text-align: center;
	position: absolute;
	z-index: 99;
}

.home-video .caption .date {
	background-color: #9acd66;
	font-size: 28px;
	color: #fff;
	padding: 6px 14px 3px 14px;
	line-height: 38px;
	font-weight: 600;
	text-transform: uppercase;
	display: inline-block;
	background: url(https://www.boecult.nl/wp-content/uploads/2023/07/lichtgroen-blok.svg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.home-video .caption .title {
	color: #fff;
	padding: 30px;
	font-size: 60px;
	text-transform: uppercase;
	line-height: 70px;
	font-family: Eurostile-Bold, Poppins, Arial;
	font-weight: 600;
}

.home-video .caption .toegang {
	background: #F4AD1D;
    padding: 3px 14px 3px 14px;
	color: #fff;
	font-weight: normal;
	font-size: 18px;
	letter-spacing: 0;
	line-height: 38px;
	text-transform: uppercase;
	display: inline-block;
	font-family: Eurostile-Bold, Poppins, Arial;

}

@media (max-width: 768px) {

	.home-video {
		height: 300px;
	}

	.home-video .the-video {
		width: auto;
		height: 100%;
	}

	.home-video .caption .title {
		font-size: 36px;
		line-height: 44px;
		padding: 30px 0px;
	}
	.home-video .caption .date {
		font-size: 22px;
		line-height: 30px;
	}
	.home-video .caption .toegang {
		font-size: 16px;
		line-height: 32px;
		padding: 4px 14px 3px 14px;
	}
}

/* =====================================================
	Kruiwagenrace
======================================================== */

.page-template-landingspage .footer-divider {
	display: none;
}

.kruiwagenrace .spb-asset-content p {
	line-height: 1.8;
}

@media only screen and (min-width: 768px) {
    	.show-image-desktop {
		display: block;
	}

	.show-image-mobile {
		display: none;
	}	
}

@media only screen and (max-width: 767px) {
    	.show-image-desktop {
		display: none;
	}

	.show-image-mobile {
		display: block;
	}	
}

.wpcf7 input.btn-kr-send[type="submit"], .wpcf7 input.wpcf7-submit[type="submit"]{
	float: left;
	font-size: 16px;
	padding: 20px 30px 20px 30px !important;
	margin-top: 20px;
}


/* =====================================================
	Navigation
======================================================== */

.page .header-wrap {
	border-bottom: 3px solid #9acd66;
}

.page .header-wrap.resized-header #header {
	height: 90px;
}
.page .header-wrap.resized-header #main-navigation ul.menu > li > a {
	height: 90px;
	line-height: 90px;
}

.page .header-wrap #logo {
	transition: 0.3s ease;
}

.page .header-wrap #logo img {
	transition: 0.3s ease;
}

.page .header-wrap.resized-header #logo {
	max-height: 90px;
	transition: 0.3s ease;
}

.page .header-wrap.resized-header #logo img {
	max-height: 70px;
	padding: 10px 0 10px 0;
	transition: 0.3s ease;
}

.page .header-wrap #header-section .is-sticky .sticky-header {
	border-bottom: 3px solid #9acd66;
}

.page .header-wrap #header-section .is-sticky #main-navigation .menu .menu-item .sub-menu {
	top: 90px !important;
	box-shadow: none;
}

.page .header-wrap #header-section .sticky-wrapper #main-navigation .menu .menu-item .sub-menu {
	box-shadow: none;
}

.page .header-wrap #header-section .is-sticky #main-navigation .menu .menu-item .sub-menu li {
	background-color: #9acd66;
	border-top: 0;
}

.page .header-wrap #header-section .sticky-wrapper #main-navigation .menu .menu-item .sub-menu li {
	background-color: #9acd66;
	border-top: 0;
}

.page .header-wrap #header-section .is-sticky #main-navigation .menu .menu-item .sub-menu li a {
	height: auto;
	line-height: 150%;
	color: #fff;
	font-size: 16px;
	padding: 20px 20px;
}

.page .header-wrap #header-section .is-sticky #main-navigation .menu .menu-item .sub-menu li a:hover {
	color: #fff !important;
	background-color: #8dc753;
}

.page .header-wrap #header-section .sticky-wrapper #main-navigation .menu .menu-item .sub-menu li a {
	color: #fff;
	font-size: 16px;
	padding: 20px 20px;
}

.page .header-wrap #header-section .sticky-wrapper #main-navigation .menu .menu-item .sub-menu li a:hover {
	color: #fff !important;
	background-color: #8dc753;
}

.page .header-wrap #header-section .sticky-wrapper #main-navigation .menu .menu-item a span {
	text-transform: uppercase;
	color: #222222;
}

.page .header-wrap #header-section .sticky-wrapper #main-navigation .menu .current-menu-item a span {
	color: #9acd66;
}

.page .header-wrap #header-section .sticky-wrapper #main-navigation .menu .menu-item a:hover {
	text-decoration: none;
}

.page .header-wrap #header-section .sticky-wrapper #main-navigation .menu .menu-item a:hover span {
	color: #000000;
}

.page .header-wrap #header-section .is-sticky #main-navigation .menu .menu-item a span {
	line-height: 90px;
}

/* === */

.single .header-wrap {
	border-bottom: 3px solid #9acd66;
}

.single .header-wrap.resized-header #header {
	height: 90px;
}
.single .header-wrap.resized-header #main-navigation ul.menu > li > a {
	height: 90px;
	line-height: 90px;
}

.single .header-wrap #logo {
	transition: 0.3s ease;
}

.single .header-wrap #logo img {
	transition: 0.3s ease;
}

.single .header-wrap.resized-header #logo {
	max-height: 90px;
	transition: 0.3s ease;
}

.single .header-wrap.resized-header #logo img {
	max-height: 70px;
	padding: 10px 0 10px 0;
	transition: 0.3s ease;
}

.single .header-wrap #header-section .is-sticky .sticky-header {
	border-bottom: 3px solid #9acd66;
}

.single .header-wrap #header-section .is-sticky #main-navigation .menu .menu-item .sub-menu {
	top: 90px !important;
	box-shadow: none;
}

.single .header-wrap #header-section .sticky-wrapper #main-navigation .menu .menu-item .sub-menu {
	box-shadow: none;
}

.single .header-wrap #header-section .is-sticky #main-navigation .menu .menu-item .sub-menu li {
	background-color: #9acd66;
	border-top: 0;
}

.single .header-wrap #header-section .sticky-wrapper #main-navigation .menu .menu-item .sub-menu li {
	background-color: #9acd66;
	border-top: 0;
}

.single .header-wrap #header-section .is-sticky #main-navigation .menu .menu-item .sub-menu li a {
	height: auto;
	line-height: 150%;
	color: #fff;
	font-size: 16px;
	padding: 20px 20px;
}

.single .header-wrap #header-section .is-sticky #main-navigation .menu .menu-item .sub-menu li a:hover {
	color: #fff !important;
	background-color: #8dc753;
}

.single .header-wrap #header-section .sticky-wrapper #main-navigation .menu .menu-item .sub-menu li a {
	color: #fff;
	font-size: 16px;
	padding: 20px 20px;
}

.single .header-wrap #header-section .sticky-wrapper #main-navigation .menu .menu-item .sub-menu li a:hover {
	color: #fff !important;
	background-color: #8dc753;
}

.single .header-wrap #header-section .sticky-wrapper #main-navigation .menu .menu-item a span {
	text-transform: uppercase;
	color: #222222;
}

.single .header-wrap #header-section .sticky-wrapper #main-navigation .menu .current-menu-item a span {
	color: #9acd66;
}

.single .header-wrap #header-section .sticky-wrapper #main-navigation .menu .menu-item a:hover {
	text-decoration: none;
}

.single .header-wrap #header-section .sticky-wrapper #main-navigation .menu .menu-item a:hover span {
	color: #000000;
}

.single .header-wrap #header-section .is-sticky #main-navigation .menu .menu-item a span {
	line-height: 90px;
}

/* =====================================================
	Mobile Navigation
======================================================== */

#mobile-header {
	border-bottom: 5px solid #9acd66;
	border-bottom-color: #9acd66 !important;
}

#mobile-logo a {
	height: 50px;
	width: auto;
}

#mobile-logo a img {
	height: 100%;
	width: auto;
}

.mobile-header-opts a.mobile-menu-link span.menu-bars {
	top: 8px;
}

.mobile-header-opts .mobile-menu-link .menu-bars,
.mobile-header-opts .mobile-menu-link .menu-bars:before,
.mobile-header-opts .mobile-menu-link .menu-bars:after  {
	width: 30px;
	height: 4px;
}

.mobile-header-opts .mobile-menu-link .menu-bars:before {
	top: -10px;
}

.mobile-header-opts .mobile-menu-link .menu-bars:after {
	top: 10px;
}

.mobile-overlay-close {
	top: 20px;
	right: 5px;
}

.mobile-overlay-close i {
	font-size: 36px;
}

#mobile-menu {
	margin-top: 50px;
}

.mh-overlay #mobile-menu-wrap {
	padding: 20px;
}

.mh-overlay #menu-mobiel-menu li a {
	text-align: center;
}

.mh-overlay #menu-mobiel-menu li a span {
	font-size: 20px;
	font-weight: 800;
	line-height: 110%;
}

.mh-overlay #menu-mobiel-menu li a:hover {
	text-decoration: none;
}

#mobile-menu ul li.parent > a:after {
	font-weight: bold;
	font-size: 14px;
	margin-left: 8px;
	opacity: 1;
}

#mobile-menu ul li ul li {
	font-size: 16px;
}

#mobile-header a.mobile-menu-link span.menu-bars, #mobile-header a.mobile-menu-link span.menu-bars:before, #mobile-header a.mobile-menu-link span.menu-bars:after {
	border-radius: 2px;
}

/* =====================================================
	Homepage
======================================================== */

._masterslider #main-container .inner-page-wrap {
	margin-top: 0;
}

.master-slider .ms-layer.title-layer {
	color: #fff;
	margin: 0;
	background-color: none;
}

.master-slider .ms-layer.datum-layer {
	color: #fff;
	margin: 0;
	background-color: none;
}

.master-slider .ms-layer.toegang-layer {
	color: #fff;
	margin: 0;
	background-color: none;
}

@media only screen and (max-width: 767px) {
    	.master-slider .ms-layer.title-layer {
		font-size: 40px;
		top: 140px;
	}
	.master-slider .ms-layer.datum-layer {
		font-size: 21px;
	}
	.master-slider .ms-layer.toegang-layer {
		font-size: 16px;
	}

	.tekstblok-padding-homepage div {
		padding-left: 5% !important;
		padding-right: 5% !important;
	}
	.spb_video_widget .video-wrap {
    		padding-bottom: 56.25% !important;
	}
    			
}


.ms-bullets-count .ms-bullet {
	width: 14px;
	height: 14px;
	background-color: #fff;
	border: 0;
	margin: 3px 5px 3px 5px !important; 
}

.ms-bullets-count .ms-bullet-selected {
	background-color: #9acd66;
}

.sponsors-block .owl-item figure.animated-overlay:hover figcaption {
	background-color: transparent;
	opacity: 0;
}

.sponsors-block .owl-item h4, .sponsors-block .owl-item h5  {
	display: none;
}

.boecult-block .blokken-homepage:nth-of-type(even) figure figcaption {
	width: calc(100% - 15px);
	left: 15px;
}

.boecult-block .blokken-homepage:nth-of-type(odd) figure figcaption {
	width: calc(100% - 15px);
	right: 15px;
}

.boecult-block .blokken-homepage:nth-of-type(even) figure:hover figcaption {
	width: calc(100% - 15px);
	left: 15px;
	border: 20px solid #fff;
}

.boecult-block .blokken-homepage:nth-of-type(odd) figure:hover figcaption {
	width: calc(100% - 15px);
	right: 15px;
	border: 20px solid #fff;
}

.boecult-block .blokken-homepage figure figcaption .thumb-info h4 {
	font-size: 50px;
	font-weight: 800;
	text-transform: uppercase;
}

.boecult-block .blokken-homepage figure img {
	transition: all .3s ease-in-out;
}

.boecult-block .blokken-homepage figure:hover img {
	transform: scale(1.1);
}

.boecult-block .blokken-homepage figure.animated-overlay figcaption {
	opacity: 1;
	background: rgba(0, 0, 0, 0.2) !important;
	transition: 0.5s ease-in-out;
}

.boecult-block .blokken-homepage figure.animated-overlay:hover figcaption {
	background: rgba(154,205,102,0.6) !important;
	
}

.boecult-block .blokken-homepage figure figcaption .thumb-info h4 {
	opacity: 1;
	-o-transform: translateY(0%);
    -moz-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
}

.boecult-block .blokken-homepage figure.animated-overlay:hover figcaption .thumb-info h4 {
	-o-transform: translateY(5%);
    -moz-transform: translateY(5%);
    -webkit-transform: translateY(5%);
    transform: translateY(5%);
}

/* =====================================================
	Default Pages
======================================================== */

.page-template-default #main-container .page-heading {
	display: none;
}

.page-content .page h1 {
	margin: 50px 0 20px 0;
}

.artiesten-overzicht .portfolio-item-wrap figcaption .thumb-info p {
	font-weight: 800;
	text-transform: uppercase;
}

.artist-name {
	text-align: left;
	margin-bottom: 20px;
	float: left;
	width: 300px;
	max-width: 300px;
}

.artist-name:after, .time:after {
	content: '';
	display: block;
	clear: both;
}

.footer-image {
	height: 400px;
	text-align: center;
	padding-top: 163px;
	padding-bottom: 163px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.footer-image .blocks {
	position: relative;
	display: inline-block;
	width: auto;
	height: auto;
	font-size: 24px;
	line-height: 24px;
	margin: 0;
	margin-top: 5px;
	padding: 20px;
	text-align: center;
	font-weight: normal;
	color: #fff;
	background: rgba(30, 30, 30, 0.8);
}

.footer-image .blocks.green {
	background: rgba(154, 205, 102, 0.8);
}

.spb_button .sf-button {
	margin-top: 20px;
}

.sf-button .text {
	font-weight: 400;
	font-size: 16px;
	padding: 20px 20px 20px 60px !important;
}

.spb_button a.sf-button i {
	font-size: 18px;
	line-height: 18px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 21px 20px 21px 20px;
	vertical-align: middle;
}

.related-projects {
  display: none !important;
}

.client-item figure {
	opacity: 1;
}

.client-item figure:hover {
	opacity: .7;
}

.page-content .help-text {
	margin-top: 30px;
	margin-bottom: 50px;
}

.btn.btn-boecult {
	display: inline-block;
    font-size: 16px;
    line-height: 20px;
    height: auto;
    padding: 20px 26px;
    margin: 0 10px 20px 0;
    font-weight: bold;
    -webkit-transition: all .3s ease-out;
    -moz-transition: all .3s ease-out;
    transition: all .3s ease-out;
    border: 0;
    position: relative;
    outline: 0;
    text-shadow: none;
    text-decoration: none;
    vertical-align: middle;
    letter-spacing: 1px;
    max-width: 100%;
    background-color: #9acd66;
    color: #fff;
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    border-radius: 0;
}

.btn.btn-boecult:hover {
	color: #fff;
	background-color: #555555;
}

.error404 .page-heading {
	background-color: #fff;
	padding: 0;
}

.error404 .page-heading .entry-title {
	margin-top: 50px;
	color: #9acd66;
}


/* =====================================================
	Footer
======================================================== */

#footer .widget_nav_menu .menu .menu-item a {
	color: #999999;
	font-size: 16px;
}

#footer .widget_nav_menu .menu .menu-item a:hover {
	color: #ffffff;
}

#footer .widget_nav_menu .widget-heading h6 {
	color: #9acd66;
}

#copyright p {
	font-size: 12px;
}



/* =====================================================
	Straattheater
======================================================== */
.image-margin-straattheater {
	margin-bottom: 2px;
	margin-top: 12px;
}



/* =====================================================
	Contact form
======================================================== */
.wpcf7-form p label{
	width: 100% !important;
}

.wpcf7 input {
	background-color: #fff !important;
}

.wpcf7-list-item{
	margin-left: 0;
}