/* You can add your stylesheets for frontend here. */

.w-filters__wrapper{
	background:#333;
}
.w-filters{
	display:flex;
	padding:1rem;
	color:white;
	align-items:center;
	flex-wrap:wrap;
}

.w-filters select{
	color:#f7ff3c;
	border:0;
	background:transparent;
}

.w-filters label{
	margin-bottom:0;
}

.w-filters > * + *{
	margin-left:2rem;
}

.w-filters a{
	margin-left:auto;
	font-weight:bold;
	font-size:1.2em;
	color:white;
	text-transform:lowercase;
}

.w-grid-event{
	display:flex;
	flex-wrap:wrap;
	margin-left:-1rem;
	margin-right:-1rem;
}

.w-grid-event__item{
	width:calc(25% - 2rem);
	margin:2rem 1rem 0;
	display:flex;
	flex-direction:column;
	position:relative;
	padding:.75rem 1rem;
	min-height:320px;
	z-index:1;
}

.w-grid-event__item.format-big{
	width:calc(50% - 2rem );
}

.w-grid-event__img{
	position:absolute;
	z-index:-1;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-image: radial-gradient(#666,#000);
}

.w-grid-event__img img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
	opacity:.6
}

.w-grid-event__link .w-grid-event__title{
	color:#fff;
	font-size:20px;
	z-index:1;
	position:relative;
	text-transform:uppercase
}

.w-grid-event__link::before{
	content:'';
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index:2
}

.w-grid-event__link{
	margin-top:auto;
	text-decoration:none !important;
}

.w-grid-event__link-text{
	display:none;
}

.w-grid-event__date{
	order:-2;
	color:#fff;
	z-index:1;
	font-size:20px;
	font-weight:bold;
	padding:0 1rem;
}

.w-grid-event__status{
	order:-1;
	z-index:1;
}

.w-grid-event__tags .button-tags{
	color:white;
	font-weight:600;
	font-size:14px;
	margin-right:.5rem
}

.w-grid-event__tags .button-tags::before{
	content:'#';
	color:#f7ff3c
}


.w-grid-event__link:hover::after{
	background:rgba(247,245,60,1);
	mix-blend-mode:multiply;
	z-index:0;
	content:'';
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
}

.w-grid-event__link:hover + .w-grid-event__img{
	background:white;
}

.w-grid-event__link:hover + .w-grid-event__img img{
	opacity:.45
}

.w-grid-event__link:hover ~ .w-grid-event__date{
	position:absolute;
	top:0;
	right:0;
	left:0;
	bottom:0;
	display:flex;
	justify-content:center;
	flex-direction:column;
	align-items:center;
	color:#000;
	font-size:26px;
}

.w-grid-event__subtitle{
	display:block;
	font-size:16px;
}


.w-grid-event__link:hover ~ .w-grid-event__date .w-grid-event__link-text{
	font-size:14px;
	text-transform:uppercase;
	font-weight:400;
	display:inline-block;
	border:1px solid;
	padding:.15rem 1rem;
	border-radius:0 1rem 0 0
}

.w-grid-event__date i{
	display:none;
}

.w-grid-event__link:hover ~ .w-grid-event__date i{
	display:block;
    background: url(logo-boleg.svg);
    width: 120px;
    height: 120px;
	margin:1rem 0
}

.w-grid-event__link:hover .w-grid-event__title,
.w-grid-event__link:hover ~.w-grid-event__tags,
.w-grid-event__link:hover ~.w-grid-event__status{
	visibility:hidden;
}

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

.more-events,
.events-programme{
	font-size:16px;
	text-transform:uppercase;
	font-weight:400;
	display:inline-block;
	border:1px solid;
	padding:.25rem 2rem;
	border-radius:0 1rem 0 0;
	margin:1rem;
	transition:all .5s;
}

.events-programme{
	color:#333;
	background-color: #f7ff3c;
	border-color: #f7ff3c;
}

.more-events:hover,
.events-programme:hover{
	border-color:#333;
	color:white;
	background:#333;
}

@media (max-width:965px) {
	.w-grid-event__item{
		width:calc(33.3333% - 2rem);
	}
}
@media (max-width:765px) {
	.w-grid-event__item{
		width:calc(50% - 2rem);
	}

	.w-filters{
		justify-content:space-between;
	}

	.w-filters > * + *{
		margin-left:0;
	}
	
	.w-filters > *{
		width:calc(50% - 2rem);
	}

	.w-filters > *:nth-child(n+3){
		margin-top:1rem;
	}
}

@media (max-width:550px) {
	.w-grid-event__item{
		width:calc(100% - 2rem);
	}

	.w-filters > *{
		width:100%;
	}

	.w-filters > *:nth-child(n+1){
		margin-top:1rem;
	}
}