/*
Theme Name: Pussy Willow
Theme URI: http://pussywillow.be
Description: A simple responsive theme based on the Bootstrap framework. Includes multiple page templates, two different sidebars and a theme options panel.
Version: 1.0
Author: Exe-file Webdevelopment
Author URI: http://exe-file-webdevelopment.be
Tags: black, white, one-column, two-columns, flexible-width, custom-background, custom-colors, custom-menu, full-width-template, theme-options
License: GNU General Public License v2.0 & Apache License 2.0
License URI: http://www.gnu.org/licenses/gpl-2.0.html http://www.apache.org/licenses/LICENSE-2.0
*/

/* HEADS UP: Everything that you will normally find here can be found in the library/less/wp.less */

/*********************************************\
|*********************************************|
|-----------------PORTAL----------------------|
|*********************************************|
\*********************************************/

.container-portal {
	display: flex;
	width: 100%;
	margin-top: -60px;
}

/* --- Individual Band Section Styles --- */
.container-portal .band-section {
	flex: 1; /* Both sections take up equal space */
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	transition: all 0.5s ease-in-out;
	cursor: pointer;
	height: 100vh;
}

.container-portal .band-section:hover {
	background-color: rgba(50,50,50, .4);
}

.container-portal .band-section:not(:hover) {
	background-color: rgba(50,50,50, .75);
}

.container-portal .band-section .band-logo {
	max-height: 80px;
}

.container-portal .band-section .background-image {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	position: absolute;
	z-index: -1;
}

.container-portal .band-section:hover {
	flex: 1.2; /* Expand on hover */
}

/* --- Content and Enter Button Styles --- */
.container-portal .content {
	text-align: center;
	z-index: 1;
	transition: transform 0.3s ease;
}

.container-portal .content h2 {
	font-size: 25px;
}

.container-portal .band-section:hover .content {
	transform: scale(1.1);
}

.container-portal .enter-button {
	display: inline-block;
	margin-top: 20px;
	padding: 10px 20px;
	border: 2px solid white;
	font-size: 1.1rem;
	letter-spacing: 1px;
	font-weight: bold;
	opacity: 0; /* Initially hidden */
	transform: translateY(20px);
	transition: all 0.3s ease-in-out;
}

.container-portal .band-section:hover .enter-button {
	opacity: 1; /* Show on hover */
	transform: translateY(0);
}

/* --- Responsive Design for Smaller Screens --- */
@media (max-width: 1100px) {
	.container-portal {
		flex-direction: column; /* Stacks the sections vertically */
	}

	.container-portal .band-section {
		height: 50vh; /* Each section takes up half the viewport height */
		flex: none;
	}

	.container-portal .band-section:hover {
		flex: none; /* Disable expansion on hover for mobile */
	}

	.container-portal h1 {
		font-size: 3rem !important; /* Adjust font sizes for mobile */
	}
}


/*********************************************\
|*********************************************|
|-----------------HEADER----------------------|
|*********************************************|
\*********************************************/


/******************************\
|-----------BANNER-------------|
\******************************/

.navbar-brand {
	float: none;
	padding: 0px;
}
.navbar-brand img {
	margin: 10px 0px 0px 0px;
	padding: 0px;
	max-height: 80px;
	-webkit-filter: drop-shadow(0px 0px 3px #fff) !important; 
	filter: drop-shadow(0px 0px 1px #ffc) !important;
}

/******************************\
|-------------NAV--------------|
\******************************/

.navbar{
	background-color: #3e1919;
	border-bottom: none;
	box-shadow: 0px 2px 8px #0c0c0c;
}
.navbar .collapse {
	margin: 0px 0px 0px 30%;
	padding: 5px 0px;
}
.navbar .collapse a{
	color: #fff !important;
	padding: 4px 8px !important;
	margin: 30px 5px 10px 5px;
	border: solid 1px #323232;
	text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff !important;
	font-size: 18px;
	font-family: 'Audiowide', cursive;
}
.navbar .collapse .active a {
	color: #fff !important;
	background-color: transparent !important;
	border: solid 1px #323232;
}
.navbar .collapse a:hover {
	border: solid 1px #fff;
	color: #fff !important;
}

.header-image img{
	max-height: 80px;
	float: right;
	-webkit-filter: drop-shadow(0px 0px 3px #fff) !important; 
	filter: drop-shadow(0px 0px 1px #ffc) !important;
	margin-top: 12.5px;
}
#myCarousel {
	background-color: #000000;
}


/*********************************************\
|*********************************************|
|-----------------CONTENT---------------------|
|*********************************************|
\*********************************************/

a {
	-webkit-transition: all .3s ease-in-out;
	  -moz-transition: all .3s ease-in-out;
	  -o-transition: all .3s ease-in-out;
	  transition: all .3s ease-in-out;
}

body {
	background-color: #323232;
}

.title {
	text-align: center;
	color: #ddd;
	background-color: #3e1919;
	padding: 15px 0px 25px;
	font-family: 'Audiowide', cursive;
	text-shadow: -1px 1px 20px #ffc, 1px -1px 1px #fff !important;
}
.page-header {
	border-bottom: none;
	text-align: center;
	color: #fff;
}
.event-sub-pages h1 {
	margin-bottom: 0px;
}
.event-sub-pages .underline {	
	width: 100px;
	height: 3px;
	background-color: #fff;
	margin: 10px auto 30px !important;
}
p, h3, h4, a, button {
	font-family: 'Quicksand', sans-serif;
}
h1, h2 {
	font-family: 'Audiowide', cursive;
	text-shadow: -1px 1px 20px #ffc, 1px -1px 1px #fff !important;
}

/******************************\
|-----------EVENTS-------------|
\******************************/


.inner-nav-events {
	text-align: center;
	padding: 20px 0px;
	background-color: #62646a;
	color: #ddd;
}
.inner-nav-events a {
	color: #ddd;
	text-decoration: none;
	background-color: transparent;
	border: none;
	border-bottom: 1px solid #62646a;
}
.inner-nav-events a:hover {
	color: #ddd;
	border-bottom: 1px solid #ddd;
	background-color: transparent;
}
#events {
	color: #fff;
}
#events h4 {
	font-family: 'Audiowide', cursive;
}
#events .row {
	margin: 40px 0px;
}
#events .calendar {
	text-align: center;
	width: 75px;
	margin-bottom: 20px;
}
#events .calendar .month {
	background-color: #000000;
	color: #fff;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	font-size: 20px;
	margin: 0px;
	font-family: 'Audiowide', cursive;
}
#events .calendar .day, #events .calendar .year {
	background-color: #fff;
	color: #000000;
	margin: 0px;
	font-family: 'Oswald', sans-serif;
}
#events .calendar .day {
	font-size: 40px;
	font-weight: bold;
	padding: 0px;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}
#events .underline {
	width: 150px;
	height: 3px;
	background-color: #fff;
	margin: 10px auto 30px !important;
}

#events .button {
	margin-top: 20px;
}
#events .button a{
	background-color: transparent !important;
	padding: 8px 18px;
	color: #fff;
	border: solid 2px #fff
}
#events .button a:hover {
	background-color: #fff !important;
	color: #424446;
	text-decoration: none;
}

.view-more-section {
	padding: 30px 0px 20px 0px;
	background-color: #424446;
	text-align: center;
}
.view-more-section .view-more-btn a {
	background-color: transparent !important;
	padding: 8px 18px;
	font-weight: bold;
	color: #fff;
	border: solid 2px #fff; 
}
.view-more-section .view-more-btn a:hover {
	background-color: #fff !important;
	color: #424446;
	text-decoration: none;
}

/***********\
|Event-Pages|
\***********/

.header-parallax {
	height: 450px;
}
.header-parallax .page-header {
	color: #fff;
	border-bottom: none !important;
	text-align: center;
	padding-top: 200px;
}
#event-page .border {
	height: 40px;
	background-color: #62646a;
	margin-bottom: 40px;
}
#event-page .calendar {
	text-align: center;
	width: 115px;
	margin-bottom: 20px;
}
#event-page .calendar .month {
	background-color: #000000;
	color: #fff;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
	font-size: 30px;
	margin: 0px;
	font-family: 'Audiowide', cursive;
}
#event-page .calendar .day, #event-page .calendar .year {
	background-color: #fff;
	color: #000000;
	margin: 0px;
	font-family: 'Oswald', sans-serif;
}
#event-page .calendar .day {
	font-size: 60px;
	font-weight: bold;
	padding: 0px;
}
#event-page .calendar .year {
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;
}

#event-page .description .text {
	border: solid 4px #3e1919;
	background-color: #62646a;
	padding: 40px 15px;
	text-align: center;
	color: #fff;
}
.get-back-link {
	text-align: center;
	padding: 30px 0px 20px 0px;
	background-color: #424446;
	margin-top: 50px;
}
.get-back-link .button a {
	background-color: transparent !important;
	padding: 8px 18px;
	font-weight: bold;
	color: #fff;
	border: solid 2px #fff; 
}
.get-back-link .button a:hover {
	background-color: #fff !important;
	color: #424446;
	text-decoration: none;
}


/******************************\
|---------MEET-THE-FOLKS-------|
\******************************/


#meet-the-folks img {
	max-width: 100%;
	margin: 45px 0px 0px 0px;
	box-shadow: 0px -2px 8px #0c0c0c;
}
#meet-the-folks .inner {
	text-align: center;
	color: #fff;
}
#meet-the-folks .inner h3 {
	font-family: 'Audiowide', cursive;
	text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff !important;
}
#meet-the-folks .inner p {
	font-style: italic;
}
#meet-the-folks .inner .info {
	padding: 5px 20px 15px 20px;
	margin: -10px 0px 30px 0px;
	background-color: #3e1919;
	box-shadow: 0px 2px 8px #0c0c0c;
}
#meet-the-folks {
	color: #fff;
}
#meet-the-folks .container {
	padding: 80px 0px;
	max-width: 60%;
	text-align: center;
}
#meet-the-folks .container .underline {
	width: 100px;
	height: 2px;
	background-color: #fff;
	margin: 40px auto 40px;
}
#meet-the-folks .container .come-cover-me {
	font-weight: bold;
	font-size: 25px;
	font-family: 'Audiowide', cursive;
	text-shadow: -1px 1px 20px #ffc, 1px -1px 1px #fff !important;
}

/******************************\
|------------MEDIA-------------|
\******************************/

#media h3 {
	text-align: center;
	color: #fff;
}

#blueimp-gallery .title {
	background-color: transparent !important;
}
.blueimp-gallery>.slides>.slide>.slide-content {
	margin: auto !important;
}
#media h4 {
	color: #fff;
	text-align: center;
	margin: 20px 0px;
}
#media .audio iframe {
	margin: 20px 0px;
}

.film {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
	margin: 20px 0px;
}
.film iframe {
	width: 100%;
	height: 100%;
position: absolute;
top: 0px;
bottom: 0px;
}

#wpbgallery {
	text-align: center;
}
#wpbgallery_container {
	margin: 30px 0px;
}
#wpbgallery li a img {
	border: solid 2px #fff;
	-webkit-filter: drop-shadow(0px 0px 3px #fff) !important; 
	filter: drop-shadow(0px 0px 1px #ffc) !important;
	-webkit-transition: all .5s ease-in-out;
	  -moz-transition: all .5s ease-in-out;
	  -o-transition: all .5s ease-in-out;
	  transition: all .5s ease-in-out;
}
#wpbgallery li a img:hover  {
	border: solid 0px #fff;
	-webkit-filter: drop-shadow(0px 0px 0px #fff) !important; 
	filter: drop-shadow(0px 0px 0px #ffc) !important;
}
/******************************\
|-----------CONTACT------------|
\******************************/

#contact {
	color: #fff;
	text-align: center;
}
#contact .underline {
	width: 100px;
	height: 2px;
	background-color: #fff;
	margin: 20px auto 30px;
}
#contact .col-sm-6, #contact .col-sm-6 .col-sm-4 {
	text-align: center;
}
#contact .col-sm-6 .facebook, .spotify, .youtube {
	font-size: 40px;
	margin: 30px 0px;
}
#contact .facebook a, .spotify a, .youtube a {
	color: #fff;
}
#contact .facebook a:hover {
	color: #3B5998;
}
.spotify a:hover {
	color: #1DB954;
} 
.youtube a:hover {
	color: #e52d27;
}
#contact .contact-form-field {
	text-align: center;
	margin-bottom: 40px;
}

#contact .contact-form-field .container {
	display: flex;
	justify-content: center;
	align-items: center;
}

#contact textarea, input {
	border-radius: 0px;
	border: none;
	background-color: #eee;
	padding: 16px;
	max-width: 97.5% !important;

}

#contact textarea {
	width: 60%;
}
#contact .name input, #contact .email input {
	width: 59%;
}
#contact .mail-col {
	text-align: left!important;
}

#contact .name-col {
	text-align: right!important;
}

#contact .wpcf7-submit {
	margin-top: 20px;
	background-color: transparent !important;
	border-radius: 0px;
	color: #fff;
	border: solid 2px #fff; 
	-webkit-transition: all .3s ease-in-out;
	  -moz-transition: all .3s ease-in-out;
	  -o-transition: all .3s ease-in-out;
	  transition: all .3s ease-in-out;
	padding: 8px 18px;
	font-weight: bold;
}

#contact .wpcf7-submit:hover {
	color: #3e1919;
	border-color: #3e1919;
}
#contact .contact-logo {
	max-height: 100px;
	margin: 40px 0px;
	-webkit-filter: drop-shadow(0px 0px 3px #fff) !important; 
	filter: drop-shadow(0px 0px 1px #ffc) !important;
}

#contact form p {
    display: flex;
    justify-content: center;
    align-items: center;
}

#contact .input {
	border-right: solid 2px #323232;
}
#contact .btn1 {
	font-weight: bold;
	font-size: 16px;
	color: #ddd;
	border: solid 2px #ddd;
	background-color: transparent;
	padding: 12.75px 15px;
	-webkit-transition: all .3s ease-in-out;
	  -moz-transition: all .3s ease-in-out;
	  -o-transition: all .3s ease-in-out;
	  transition: all .3s ease-in-out;
}
#contact .btn1:hover {
	color: #323232;
	background-color: #ddd;
}

#contact .ew-artiestenboekingen {
	width: 175px;
	margin-left: 25px;
}

/*********************************************\
|*********************************************|
|------------------FOOTER---------------------|
|*********************************************|
\*********************************************/

#inner-footer {
	padding: 18px 0px 8px;
	background-color: #7C5353;
	margin-top: 40px;
	color: #fff;
}
#inner-footer a{
	color: #fff;
	border-bottom: solid 1px #fff;
	padding-bottom: 4px;
}
#inner-footer a:hover{
	color: #3e1919;
	border-bottom: none;
	padding-bottom: 4px;
	text-decoration: none;
}

/*********************************************************\
|*********************************************************|
|						MediaQ							  |
|*********************************************************|
\*********************************************************/
@media (max-width: 1200px) {
	.header-image img{
		max-height: 50px;
		margin-top: 10px;
	}
	.navbar-brand img {
		max-height: 50px;
		margin-top: 10px;
	}
	#myCarousel .fill {
		background-size: 100% !important;
		background-attachment: scroll !important;
	}
}

@media (max-width: 992px) { 
    .navbar-header {
    	float: none;
    }
    .navbar-toggle {
		margin-top: 20px;
        display: block;
        border: none !important;
        border-radius: 0px !important;
    }
    .icon-bar{
    	background-color: #fff !important;
    	height: 3px !important;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
        text-align: center;
    }

    .navbar-collapse .active a {
    	background-color: #000000 !important;
    	color: white !important;
    }

    .navbar-collapse a {
    	background-color: transparent !important;
    	color: #fff !important;
    }

    .navbar-collapse a:hover {
    	background-color: #000000 !important;
    	color: white !important;
    }

    .navbar-collapse.collapse {
        display: none!important;
    }
    .navbar-nav {
        float: none!important;
        margin: 7.5px -15px;
    }
    .navbar-nav>li {
        float: none;
    }
    .navbar-nav>li>a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .dropdown-menu{
	visibility: hidden;
    }

    .indicator li {
	visibility: hidden;
    }

    header .logo-header img {
		display: none;
	}

	#myCarousel .fill {
		background-size: 100% !important;
		background-attachment: scroll !important;
	}

	#myCarousel {
		height: 400px !important;
	}

}

@media (max-width: 880px) {
	#meet-the-folks .inner h3 {
		font-size: 20px;
	}	
}

@media (max-width: 768px) {
	#contact textarea {
		width: 100%;
	}
	#contact .name input, #contact .email input {
		width: 100%;
	}

	#contact .mail-col {
		text-align: center!important;
	}

	#contact .name-col {
		text-align: center!important;
	}
	.navbar-header {
		background-image: none;
	}

}

@media (max-width: 630px) {
	#myCarousel {
		height: 350px !important;
	}
}

@media (max-width: 555px) {
	#myCarousel {
		height: 275px !important;
	}
	.header-image img{
		display: none;
	}	
}

@media (max-width: 450px) {
	#myCarousel {
		height: 200px !important;
	}
}