/* ********************
Set root URL for LESS compiling
-------------------- */
@base-url: "/wp-content/themes/eventsites/static";

/* ********************
Imports
******************** */
@import "framework.less";
@import "fonts.less";

// Vendor
@import url("@{base-url}/cookies/_cookie-notice.less");
@import "vendor/swiper.less";
@import "vendor/fancybox.less";
 
/* ********************
Editor
******************** */
.editor							{

	/* --------------- 
	Heading
	--------------- */
	h1, h2, h3, h4, h5, h6		{ color: @white; position: relative; height: auto; /* letter-spacing: 0.2rem;  */text-transform: uppercase; margin-bottom: 1rem; }
	h1							{ letter-spacing: 0.2rem; font-size: 5rem; line-height: 6.3rem; }
	h2							{ font-size: 4.2rem; line-height: 5.2rem; font-weight: 500; }
	h3							{ font-size: 3.8rem; line-height: 4.8rem; font-weight: 500; }
	h4							{ font-size: 3.4rem; line-height: 4.2rem; font-weight: 500; }
	h5							{ font-size: 3rem; line-height: 3.7rem; font-weight: 500; }
	h6							{ .tungsten-semibold; font-size: 2.6rem; line-height: 2.8rem; font-weight: 500; }

	/* ---------------
	Paragraph
	--------------- */
	p							{ font-size: 2.2rem; line-height: 2.8rem; font-weight: 400; margin-bottom: 1rem; color: rgba(255, 255, 255, .8);
		a						{ text-decoration: underline; color: inherit; transition: all .2s ease-in-out;
			&:hover 			{ color: white; }
		}
	}

	/* ---------------
	Unordered list
	--------------- */
	ul							{ margin-bottom: 2.5rem; margin-top: 2.5rem;
		li						{ .relative; padding-left: 2rem; margin-bottom: .5rem; color: rgba(255, 255, 255, .8); font-size: 2rem;
			&:before 			{ content:""; .absolute; top: 1.5rem; left: 0; display: inline-block; margin-top: -.5rem; background: @fallback; background: @primary; width: .6rem; height: .6rem; border-radius: 100%; }
			a					{ color: rgba(255, 255, 255, 1); }
		}
	}

	/* ---------------
	Ordered list
	--------------- */
	ol							{ counter-reset: li-counter; margin-bottom: 2.5rem; margin-top: 2.5rem;
		li						{ .relative; padding-left: 0; color: rgba(255, 255, 255, .8); font-size: 2rem;
			a					{ color: rgba(255, 255, 255, 1); }
			&:before			{ content: counter(li-counter)"."; counter-increment: li-counter; color: @fallback; color: @primary; font-weight: bold; padding-right: 5px; }
		}
	}

	/* ---------------
	Table
	--------------- */
	table 						{
		tbody 					{
			tr 					{
				td 				{ color: rgba(255, 255, 255, .8);
					& a 		{ color: rgba(255, 255, 255, .8); transition: all .2s ease-in-out; text-decoration-color: @fallback; text-decoration-color: @primary;
						&:hover { color: white; }
					}
				}
			}
		}
	}

	/* ---------------
	Blockqoute
	--------------- */
	blockquote					{
		p						{  }
	}

}

/* ********************
Colors
******************** */
@twitter:		#00ACED;
@youtube:		#BB0000;
@facebook:		#3B5998;
@instagram:		#125688;
@linkedin:		#007BB5;
@whatsapp:		#4DC247;

@black: 		#0E1117;
@white: 		#FFFFFF;
@primary: 		var(--primary);
@fallback: 		#360fb8;

/* ********************
Variables
******************** */
@nav-height: 	8rem;

/* ********************
Fonts
******************** */
.tungsten-medium					{ font-family: 'Tungsten Medium'; font-weight: normal; }
.tungsten-semibold					{ font-family: 'Tungsten Semibold'; font-weight: normal; }
.tungsten-bold						{ font-family: 'Tungsten Bold'; font-weight: normal; }
.tungsten-black						{ font-family: 'Tungsten Black'; font-weight: normal; }


/* ---------------
Navigation
--------------- */
header.header 						{ position: fixed; height: @nav-height; width: 100%; z-index: 1001; background-image: linear-gradient(180deg, #0E1117 0%, rgba(14,17,23,0.00) 100%); padding-bottom: 10vh; display: flex; padding-left: 2.5rem; padding-right: 2.5rem;
	&.nav-pos--center 				{
		& .nav--toggle 				{ left: 0; right: 0; margin: 0 auto; }
	}
	.page-logo 						{ margin-right: auto; display: flex; z-index: 20; height: 4.1rem; margin-top: 1.7rem;
		&--right 					{ margin-left: auto; margin-right: 0; }
	}
	.flag 							{ width: 1.5rem; height: 1.5rem; position: relative; display: flex; margin-right: 1rem;
		img 						{ width: 100%; height: 100%; border-radius: 2rem; margin-top: .5rem; }
	}
	li.lang__menu-item 				{ display: flex; flex-direction: row; height: 3rem; align-items: center; align-content: center; justify-content: center; position: relative;
		& a 						{ display: flex; flex-direction: row; color: @white; text-transform: uppercase; font-weight: 700; text-decoration: none; font-size: 1.8rem; }
	}
	ul.lang__sub-menu 				{ max-height: 0; visibility: hidden; opacity: 0; transition: all .2s ease-in-out; position: absolute; top: 4rem; left: -2rem; padding-left: 2rem; padding-right: 2rem;
		&.active 					{ max-height: 100vh; visibility: visible; opacity: 1; }
	}
	ul.lang__menu 					{ margin-left: 5rem; }
	a svg 							{ transition: all .2s ease-in-out; margin-top: 1rem; margin-left: .7rem; }
	a.active svg					{ transform: rotate(180deg); margin-top: .9rem; }
	nav.mainmenu 					{ height: @nav-height; display: flex; align-items: center;
		ul.menu 					{ display: flex; flex-direction: row;
			li 						{ margin-right: 3.5rem; position: relative; display: flex;
				&:hover 			{
					> ul.sub-menu 	{ opacity: 1; visibility: visible; max-height: 100vh; }
					> ul.sub-menu li{ background: rgba(0, 0, 0, .7); }
				}
				&.wpml-ls-menu-item { width: 3rem; display: flex; justify-content: center; margin: 0 auto;
					& a:hover:before{ display: none; }
				}
				&:last-child 		{ margin-right: 0; }
				a 					{ color: white; text-decoration: none; font-size: 2.2rem; text-transform: uppercase; line-height: 2.2rem; font-weight: 600; letter-spacing: 0.1rem; position: relative;
					&:before 		{ position: absolute; content: ""; z-index: -1; /* margin-top: 2.4rem; */ bottom: -0.4rem; height: .3rem; width: 0; background: @fallback; background: @primary; transition: width .5s ease; }
					&:hover::before { width: 60%; }
				}
				&.current-menu-item {
					a 				{
						&:before 	{ width: 60%; }
					}
				}
			}
		}
	}
	.nav--toggle  					{ display: none; }
	@media(max-width: 1142px) 		{
		.page-logo 					{ margin-top: 2.5rem; }
		nav.mainmenu 				{
			&:before 				{ display: block; position: fixed; top: 0; left: 0; content: ""; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.9); z-index: -1; transition: all .2s ease-in-out; transition-delay: .2s; opacity: 0; visibility: hidden; }
			&.active 				{
				&:before 			{ visibility: visible; opacity: 1; transition-delay: 0s; }
				ul.menu 			{ visibility: visible; opacity: 1; transform: translateX(0); }
			}
			ul.menu 				{ flex-direction: column; opacity: 0; transform: translateX(-100%); visibility: hidden; position: absolute; left: 2.5rem; top: 10rem; transition: all .4s ease-in-out; width: 100%;
				li 					{ margin-bottom: 2rem;
					a 				{ font-size: 2.2rem; position: relative;
						&:before 	{ display: none; }
					}
				}
				.current-menu-item 	{
					a 				{
						&:before 	{ display: block; }
					}
				}
			}
			ul.lang__menu 			{ width: 100%; margin-left: 0; display: flex; letter-spacing: 0.1rem; }
		}
		.nav--toggle 				{ display: inline-block; cursor: pointer; position: fixed; z-index: 100; right: 1rem; top: 1rem; width: 7rem; height: 7rem; border: none; border-radius: 50%; padding: 0; background: #fff; box-shadow: 0 .4rem 2.4rem rgba(0, 0, 0, 0.24); line-height: 0.6; text-align: center; transform: scale(0.6);
			& > span 				{ display: inline-block; position: relative; height: .2rem; width: 3.4rem; border-radius: .1rem; background: @fallback; background: @primary; vertical-align: middle;
				&:before, &:after 	{ display: inline-block; position: absolute; content: ""; height: .2rem; border-radius: .1rem; background: @fallback; background: @primary; transition: all .4s ease-in-out; }
				&:before 			{ top: -1.1rem; left: .3rem; width: 2.8rem; }
				&:after 			{ top: 1.1rem; left: .6rem; width: 2.2rem; }
			}
			&.toggled > span 		{ height: 0;
				&:after, &:before 	{ top: 0; left: 0; width: 3.4rem; }
				&:after 			{ transform: rotate(-45deg); }
				&:before 			{ transform: rotate(45deg); }
			}
			&:focus 				{ outline: none; }
			&:hover > span:after,
			&:hover > span:before 	{ width: 3.4rem; left: 0; }
		}
	}
}

@media(max-width: 1142px) 		{
.lang__menu						{ display: none; }
}

/*---------------
Background image
--------------- */

.swiper-pagination 					{ right: 3%; top: 0; position: fixed; z-index: 99; height: 100vh; display: flex; align-items: center; justify-content: center; flex-direction: column;
	@media(max-width: 768px) 		{ display: none; }
}
.grid 								{ position: relative; }
.swiper-pagination-bullet 			{ width: .3rem; height: 2rem; display: block; margin-bottom: 1rem; border-radius: 0; background: white; opacity: 0.5; margin-right: 1rem;
	&-active 						{ opacity: 1; }
}
.hero-image 						{ width: 100%; height: 100%; min-height: 100vh;
	> img, .swiper-slide 			{ position: fixed; bottom: 0; top: 0; height: 100%; width: 100%; transition: height .2s ease-in-out; object-fit: cover; }
	.swiper-slide 					{ position: relative; }
	.swiper-container 				{ position: fixed; height: 100%; width: 100%; }
	&__content 						{ color: @white; position: relative; height: 100%; min-height: 100vh; z-index: 6; max-width: 83.7rem; flex-direction: column; align-items: flex-start; justify-content: center; display: flex; text-transform: uppercase;
		h1 							{ margin-bottom: 3rem; line-height: 10rem; position: relative; font-size: 10rem;
			&:before 				{ position: absolute; content: ""; z-index: -1; padding-right: .7rem; bottom: 0rem; height: .5rem; width: 60%; background: @fallback; background: @primary; }
		}
		span.headline 				{ font-size: 3.3rem; line-height: 3.8rem; opacity: 0.7; margin-bottom: 1rem; font-weight: 500; }
		span.date 					{ font-size: 3.4rem; line-height: 3.8rem; font-weight: 400; margin-bottom: 1rem; }
		.event__paragraph p 		{ text-transform: none; margin-bottom: 0; max-width: 73rem; opacity: .7; font-size: 2.2rem; margin-top: 1.5rem; display: block; }
		& > a 						{ height: 6rem; margin-top: 3rem; text-align: center; display: flex; align-content: center; background: @fallback; background: @primary; color: @white; text-decoration: none; width: auto; line-height: 6rem; padding: 0rem 3rem; justify-content: center; font-size: 2.2rem; letter-spacing: 0.1rem; font-weight: bold;  border: .2rem solid @fallback; border: .2rem solid @primary; transition: all .2s ease-in-out;
			&:hover 				{ background: transparent; }
		}
	}
	.slide__nav 					{ margin-top: 3.5rem;
		span 						{ margin-right: 1rem; cursor: pointer; }
	}
	&::before 						{ position: absolute; content: ""; height: 100%; background: @black; width: 30.3rem; opacity: .9; min-height: 100vh; z-index: 5; }
	&::after 						{ position: absolute; content: ""; height: 100%; background-image: linear-gradient(-90deg, rgba(14, 17, 23, 90%) 0%, rgba(14,17,23,0.00) 100%); transform: rotate(180deg); width: ~"calc(100% - 30.2rem)"; left: 30.2rem; min-height: 100vh; z-index: 5; top: 0; }
	&--background 					{ height: 100%; display: flex;
		&::before 					{ display: none; }
		&::after 					{ display: none; }
	}
	@media(max-width: 768px) 		{
		&__content span.headline 	{ margin-bottom: 1rem; }
		&__content h1 				{ font-size: 7rem; line-height: 7rem; margin-bottom: 3rem;
			&:before 				{ margin-top: 6rem; }
		}
	}
	@media(max-width: 520px) 		{
		&__content 					{ padding-top: 4rem;
			& h1 					{ font-size: 6rem; line-height: 6rem; margin-bottom: 1rem; max-width: 100%; width: 60%;
				&:before 			{ margin-top: 5.5rem; }
			}
			span.headline 			{ margin-bottom: 1rem; font-size: 2.7rem; }
			span.date 				{ font-size: 2.1rem; line-height: 2.8rem; }
			& > a 					{ margin-top: 2rem; }
		}
		&::before 					{ width: 7.5rem; }
		&::after 					{ left: 7.5rem; width: ~"calc(100% - 7.5rem)"; }
		.event__paragraph 			{ display: none; }
	}
	@media(max-width: 320px) 		{
		&__content 					{ padding-top: 8rem; }
	}
}

@media(max-width: 768px) 			{
	.home .grid.hero-image__content{ padding-right: 1.5rem; }
	.swiper-pagination 				{ left: 2.5rem; right: auto; }
}

/*---------------
Counter
--------------- */

#countdown span 					{ text-align: left; }
.countdown 							{
	&-row 							{ clear: both; width: 100%; padding: 0; }
	&-section 						{ width: auto; display: block; float: left; margin-right: 3rem; margin-top: 5rem; }
	&-amount 						{ font-size: 4rem; display: block; width: 100%; font-weight: bold; }
	&-period 						{ font-size: 1.8rem; font-weight: 500; opacity: 0.8; }
	&-descr 						{ display: block; width: 100%; }

	@media(max-width: 768px) 		{
		&-section 					{ margin-top: 3rem; }
	}
}

/*-----------------
Page content
---------------- */
.page-content 						{ margin: 0 auto; z-index: 11; padding-top: 16rem; padding-bottom: 25rem; width: 100%;
	h1 								{ margin-bottom: 5rem; }
	@media(max-width: 768px) 		{ padding-top: 8rem; padding-bottom: 3rem;
		& h1 						{ margin-bottom: .5rem; }
	}
}

/* ---------------
News single
--------------- */

.news__single 						{ text-align: center;
	& h1 							{ margin-bottom: 3rem; }
	& a 							{ text-decoration: underline!important; text-decoration-color: @primary!important; }
	& img 							{ margin-bottom: 3rem; width: auto; height: auto; object-fit: cover; }
	.content 						{ max-width: 63rem; margin: 0 auto; text-align: center; }

	@media(max-width: 768px) 		{
		& img 						{ width: 100%; }
	}
}

/* ---------------
News overview
--------------- */

.news								{
	&__cards 						{ margin: 0 -1.5rem; display: flex; flex-wrap: wrap; }
	&__card 						{ min-height: 48rem; position: relative; display: flex; height: 100%; overflow: hidden;
		& .arrow 					{ height: 6rem; width: 6rem; top: 0; right: -6rem; background: @fallback; background: @primary; display: flex; position: absolute; align-items: center; justify-content: center; transition: all .4s ease-in-out; z-index: 7;
			& svg > g > g 			{ fill: @white; }
		}
		& .img-wrapper 				{ width: 100%; height: 72.5%; display: flex;
			&::after 				{ position: absolute; content: ""; height: 100%; background: @black; width: 100%; opacity: .3; left: 0; z-index: 4; bottom: 0; padding-right: .1rem; transition: all .4s ease-in-out; }
			.music-release-category	{ position: absolute; z-index: 4; background-color: #444444; padding: 4px 8px; color: white; top: 0; right: 0; text-transform: uppercase; }
			.coming-soon			{ position: absolute; z-index: 4; top: 0px; left: 0px; background-color: #444444; color: @white; padding: 4px; text-transform: uppercase;  }
		}
		&.music-release-card {
			.img-wrapper {
				&::after { opacity: .5; z-index: 3; }
			}
			&:hover {
				.img-wrapper {
					&::after { opacity: .5; }
				}
			}
		}
		& img 						{ width: 100%; height: 100%; object-fit: cover; transition: all .4s ease-in-out; z-index: 3; position: relative;}
		&-content 					{ position: absolute; padding: 3rem; bottom: 0; left: 0; z-index: 6; color: @white; width: 100%;
			.headline 				{ .tungsten-semibold; font-size: 2.4rem; line-height: 2.8rem; text-transform: uppercase; margin-bottom: 1.2rem; display: block; transition: all .2s ease-in-out; }
			.excerpt p				{ font-size: 1.8rem; line-height: 2.4rem; opacity: .6; transition: all .2s ease-in-out; }
			.excerpt .release-date-title 	{ display: block; text-transform: uppercase; font-size: 18px; color: #a1a1a1; }
			.excerpt .release-date 			{ font-size: 24px; font-weight: bold; display: block; width: 100%; }
			.release-button			{ display: block; width: 100%; background-color: @white; text-align: center; padding: 8px 4px; text-decoration: none; color: @black; text-transform: uppercase; font-weight: bolder; font-size: 24px; margin-top: 16px; transition: all .2s ease-in-out;
				&:hover				{ background-color: @primary; color: @white; }
			}
		}
		&::after 					{ position: absolute; content: ""; height: 50%; background-image: linear-gradient(0deg, #0E1117 60%, rgba(14,17,23,0.00) 100%); width: 100%; left: 0; z-index: 5; bottom: 0; padding-right: .1rem; transition: all .4s ease-in-out; }
		&-wrapper 					{ min-height: 48rem; width: 33.33333%; padding: 0 1.5rem; margin-bottom: 3rem; }

		&:hover 					{
			.arrow 					{ right: 0; }
			img 					{ transform: scale(1.1); }
			.img-wrapper::after 	{ opacity: 0; }
			.excerpt p 				{ opacity: .9; }
		}
	}
	@media(max-width: 1024px) 		{
		&__card 					{
			&-wrapper				{ width: 50%; }
		}
		&__overview h1 				{ margin-bottom: 3rem; }
	}
	@media(max-width: 520px) 		{
		&__cards 					{ flex-direction: column; }
		&__card 					{ min-height: 34rem;
			&-content 				{ bottom: -1.5rem; }
			&-wrapper				{ width: 100%; min-height: 34rem; margin-bottom: 2.5rem; }
			& .img-wrapper 			{ object-fit: cover; height: auto; object-position: top; }
		}
	}
}

.music-release-filters {
	margin-bottom: 40px;
	button { padding: 4px 8px; background-color: white; color: @black; border: 0; margin-bottom: 8px; text-align: center; text-transform: uppercase; font-size: 24px; cursor: pointer; transition: all ease-in-out .1s;
		&:not(:last-of-type) { margin-right:8px }
		&:hover { background-color: #444444; color: @white; }
		&[data-filter=".geen-categorie"],
		&[data-filter=".geen-onderdeel-van-een-categorie"]	{ display: none}
		&.mixitup-control-active { background-color: @primary; color:@white; }
	}
}

/*---------------
Accordion
--------------- */

.accordion 							{ background: transparent; font-size: 2.2rem; cursor: pointer; padding: 1.8rem 0; width: 100%; border: none; text-align: left; outline: none; transition: all .4s ease-in-out; border-bottom: .1rem solid @white; color: @white; position: relative; height: 100%; font-weight: bold; text-transform: uppercase; }
.accordion:after 					{ background-image: url("@{base-url}/images/icon--chevron-down.svg"); content: ""; width: 1.5rem; height: 1.5rem; background-size: cover; position: relative; float: right; display: inline-block; margin-right: 2rem; transition: all .4s ease-in-out; }
.active:after 						{ transform: rotate(180deg); }
.panel 								{ max-height: 0; overflow: hidden; transition: all .4s ease-in-out; margin-top: 1.5rem;
	&:last-of-type 					{ margin-bottom: 3rem; }
}

/*---------------
Forms
--------------- */
form 								{//  margin-top: 2rem;
	input,
	select,
	.ginput_container_select 		{ .tungsten-medium; letter-spacing: 0.1rem; width: 100%; border: none; /* background: white; */ background: rgba(255,255,255,0.6); position: relative; height: 4rem; max-width: 30rem; font-size: 1.8rem; padding-left: 1rem; transition: all .2s ease-in-out; border-radius: 0; }
	input 							{ width: unset; height: unset; }
	.gfield_label					{ font-size: 2rem; }

	ul li.gfield 					{ margin-bottom: 2rem; padding-left: 0;
		&:before 					{ display: none; }
	}
	.gfield_required 				{ color: #FF0000; margin-left: .5rem; font-size: 2rem; }
	.gform_validation_container 	{ display: none; visibility: hidden; opacity: 0; }
	.validation_message 			{ color: #FF0000; }
	.gform_body 					{ margin-top: 2rem; }
	.ginput_container_select		{ padding-left: 0;
		&:after						{ position: absolute; width: .9rem; height: .7rem; top: 1.8rem; right: 1.5rem; content: ""; background: url("@{base-url}/images/icon--arrow-down.svg") bottom left / 9px no-repeat; pointer-events: none; }
	}
	input[type=submit]				{ .tungsten-semibold; height: 6rem; margin-top: 3rem; text-align: center; display: flex; align-content: center; background: @fallback; background: @primary; color: @white; text-decoration: none; width: auto; justify-content: center; /* font-weight: bold;  */border: .2rem solid @fallback; border: .2rem solid @primary; transition: all .2s ease-in-out; cursor: pointer; text-transform: uppercase; font-size: 2.2rem; padding: 0rem 3rem; letter-spacing: 0.1rem;
		&:hover 					{ background: transparent; }
	}
	input:-webkit-autofill,
	input:-webkit-autofill:hover,
	input:-webkit-autofill:focus textarea:-webkit-autofill,
	textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus,
	select:-webkit-autofill,select:-webkit-autofill:hover,
	select:-webkit-autofill:focus 	{ border: none; -webkit-text-fill-color: @black; -webkit-box-shadow: 0 0 0 100rem @white inset; transition: background-color 5000s ease-in-out 0s; }

	select 							{ -webkit-appearance: none; -moz-appearance: none; appearance: none; }

	@media(max-width: 768px) 		{
		input, select, .ginput_container_select { max-width: 100%; }
	}

	.gform_heading					{
		.gform_description			{ font-size: 2.2rem; line-height: 2.4rem; opacity: 0.8; }
	}
}
.validation_error 					{ margin-top: 3rem; color: #FF0000; }

/*---------------
Tickets
--------------- */

.tickets 							{
	& h2 							{ .tungsten-semibold; display: inline-block; z-index: 1; margin-bottom: 3rem;
		&:before 					{ position: absolute; content: ""; z-index: -1; /* margin-top: 4.2rem; */ bottom: 0rem; height: .3rem; width: 60%; background: @fallback; background: @primary; }
	}
	&__content 						{ padding-right: 10%; }
	&__sidebar 						{
		ul li 						{ padding-left: 0;
			&::before 				{ display: none; }
		}
		&-block 					{ padding: 3rem; background: @black; border: none; margin-bottom: 3rem;}
		h3, h4, h5, h6 				{ font-size: 2.2rem; line-height: 2.8rem; }
		h3							{ .tungsten-semibold; }
	}
	@media(max-width: 768px) 		{
		&__content 					{ width: 100%; padding-right: 0; }
		&__sidebar 					{ width: 100%; }
	}
}

/*---------------
Media
--------------- */

.fancybox-slide 					{ padding-left: 0; padding-right: 0; }
.media 								{ text-align: center; flex-direction: column!important; justify-content: center; align-items: center; display: flex;
	& h1 							{ margin-bottom: 1.5rem; }
	& p 							{ max-width: 63rem; }
	&__cards 						{ width: 100%; margin-top: 2rem;}

	// Youtube block
	.youtube 						{ height: 35rem; width: 100%; margin: 0 auto; display: flex; margin-bottom: 2.5rem; position: relative; overflow: hidden; color: @white;
		&__arrow 					{ background: @fallback; background: @primary; width: 7rem; height: 7rem; position: absolute; right: 0; top: 0; border-bottom-left-radius: .4rem; display: flex; z-index: 11;
			&:after 				{ content: "\2192"; display: flex; font-size: 2rem; position: relative; justify-content: center; align-items: center; width: 100%; }
		}
		&__content 					{ position: absolute; bottom: 4rem; z-index: 10; left: 3rem; display: flex; flex-direction: column; align-items: flex-start;
			span 					{ font-size: 2rem; opacity: .8;
				&.youtube__category { .tungsten-semibold; font-size: 2.2rem; /* font-weight: bold; */ line-height: 2.4rem; opacity: 1; text-transform: uppercase; margin-bottom: 1rem; }
			}
		}
		& img 						{ transition: all .4s ease-in-out; width: 100%; height: 100%; object-fit: cover; }

		&:hover 					{
			img 					{ transform: scale(1.05); }
		}

		&:after 					{ position: absolute; content: ""; height: 60%; background-image: linear-gradient(0deg, #0E1117 35%, rgba(14,17,23,0.00) 100%); width: 100%; left: 0; z-index: 5; bottom: 0; padding-right: .1rem; transition: all .4s ease-in-out; }
	}

	// Song block
	.song 							{ height: 7rem; width: 100%; margin: 0 auto; display: flex; background: @black; margin-bottom: 2.5rem; justify-content: center; align-items: center; text-decoration: none;
		&__title 					{ height: 100%; width: auto; margin-right: auto; padding-left: 3.5rem; display: flex; align-items: center; align-content: center;
			& h6 					{ .tungsten-semibold; font-size: 2.2rem; line-height: 2.4rem; height: auto; margin-bottom: 0; }
		}
		&__type 					{ margin-left: auto; display: flex; padding-right: 3.5rem; text-decoration: none; color: @white; font-size: 1.8rem; opacity: .9; }
		&__play-button 				{ height: 100%; display: flex; align-items: center; justify-content: center; background: @fallback; background: @primary; width: 7rem; min-width: 7rem; }
	}

	// Wysiwyg
	.wysiwyg 						{ width: 100%;
		p 							{ max-width: 100%; width: 100%; }
		iframe 						{ width: 100%; }
	}

	@media(max-width: 768px) 		{
		.song 						{
			&__title 				{ padding: 1.5rem;
				& h6				{ font-size: 1.8rem; line-height: 1.8rem; text-align: left; }
			}
			&__type 				{ display: none; }
		}
		.youtube 					{
			&__content 				{ bottom: 2rem; }
		}
	}

	@media(max-width: 320px)		{
		.song__title h6				{ font-size: 1.8rem; line-height: 1.8rem; }
	}
}
@media(max-width: 768px) 			{
	.fancybox-content 				{ width: 100%!important; }
}

/*---------------
Line-up
--------------- */

.line-up							{
	&__cards 						{ margin: 0 -1.5rem; display: flex; flex-wrap: wrap; width: 100%; }
	&__card 						{ min-height: 31rem; position: relative; display: flex; height: 100%; overflow: hidden;
		& .img-wrapper 				{ width: 100%; height: 80%; display: flex;
			&::after 				{ position: absolute; content: ""; height: 100%; background: @black; width: 100%; opacity: .3; left: 0; z-index: 4; bottom: 0; padding-right: .1rem; transition: all .4s ease-in-out; }
		}
		& img 						{ width: 100%; height: 100%; object-fit: cover; object-position: top; transition: all .4s ease-in-out; z-index: 3; position: relative; }
		&-content 					{ position: absolute; padding: 3rem; bottom: 0; left: 0; z-index: 6; color: @white;
			.headline 				{ .tungsten-semibold; letter-spacing: 0.1rem; font-size: 2.2rem; line-height: 2.8rem; /* font-weight: 500; */ text-transform: uppercase; display: block; transition: all .2s ease-in-out; }
		}
		&::after 					{ position: absolute; content: ""; height: 60%; background-image: linear-gradient(0deg, #0E1117 30%, rgba(14,17,23,0.00) 100%); width: 100%; left: 0; z-index: 5; bottom: 0; padding-right: .1rem; transition: all .4s ease-in-out; }
		&-wrapper 					{ min-height: 31rem; width: 33.33333%; padding: 0 1.5rem; margin-bottom: 3rem; }

		&:hover 					{
			.img-wrapper::after 	{ opacity: 0; }
		}
	}

}
@media(max-width: 520px) 			{
	.line-up						{
		&__cards 					{ margin: 0; flex-direction: column; }
		&__card 					{
			&-wrapper 				{ width: 100%; padding: 0; margin-bottom: 2.5rem; }
		}
	}
}


/*---------------
Information
--------------- */

.information 						{ display: flex; flex-direction: row; align-content: center; align-items: flex-start; justify-content: flex-start;
	&.default-page 					{ align-items: center; justify-content: center;
		& h1 						{ margin-bottom: 2rem; }
	}
	&__sidebar 						{ display: flex; min-width: 30rem; flex-direction: column; margin-bottom: 3rem;
		button#toggle-sidebar 		{ background: @fallback; background: @primary; display: flex; /* font-weight: 600; */ justify-content: center; align-items: center; align-content: center; position: relative; height: 6rem; border: .2rem solid @fallback; border: .2rem solid @primary; color: @white; text-transform: uppercase; font-size: 2rem;
			&:after, &:before 		{ position: absolute; content: ''; display: block; right: 2rem; height: 1.5rem; width: .3rem; background-color: @white; opacity: 1; transition: opacity .2s ease-in-out; }
			&:before 				{ height: .3rem; width: 1.5rem; right: 1.4rem; }
			&:after 				{ top: 2.1rem; }
			&.active 				{
				&:after 			{ opacity: 0; }
			}
		}
		&--mobile 					{ max-height: 0; overflow: hidden; transition: all .7s ease-in-out;
			&.active 				{ max-height: 100rem ; transition: all .8s ease-in-out;
			}
		}
		ul 							{ margin-top: 0;
			li 						{ margin-bottom: 1.8rem; display: block!important; padding-left: 0;
				&::before 			{ display: none; }
				a 					{ .tungsten-semibold; font-size: 2.4rem; letter-spacing: 0.1rem; line-height: 3rem; opacity: .7; color: @white; text-decoration: none; /* font-weight: 600;  */ text-transform: uppercase; transition: all .2s ease-in-out; position: relative;
					&:before 		{ position: absolute; content: ""; z-index: -1; /* margin-top: 2.3rem; */ bottom: -0.2rem; height: .3rem; width: 0; background: @fallback; background: @primary; transition: width .5s ease; }
					&:hover 		{ opacity: 1; }
				}
				button 				{ .tungsten-semibold; font-size: 2.4rem; letter-spacing: 0.1rem; line-height: 3rem; opacity: .7; padding: 0; color: @white; text-decoration: none; /* font-weight: 600;  */text-transform: uppercase; transition: all .2s ease-in-out; position: relative; cursor: pointer; background: none; border: none; display: block!important;
					&:before 		{ position: absolute; content: ""; z-index: -1; /* margin-top: 2.3rem; */ bottom: -0.2rem; height: .3rem; width: 0; background: @fallback; background: @primary; transition: width .5s ease; }
					&:hover 		{ opacity: 1; }
				}
				.mixitup-control-active { opacity: 1; // padding-left: .5rem;
					&::before 			{ width: 60%; }
				}
				&.current-menu-item {
					& a 			{ opacity: 1;
						&::before 	{ width: 60%; }
					}
				}
			}
		}
	}
	&__content 						{ max-width: 69rem; width: 100%; z-index: 1000;
		& p:last-of-type 			{ margin-bottom: .5rem; }
	}
	@media(max-width: 768px) 		{ flex-direction: column;
		&__sidebar 					{ width: 100%;
			ul 						{ margin-top: 2.5rem; }
		}
		&__content 					{ padding-top: 3rem; }
	}
	@media(min-width: 769px) 		{
		button#toggle-sidebar 		{ display: none; }
		&__sidebar 					{ flex-direction: row;
			&--mobile 				{ max-height: 100rem; padding-right: 3rem; }
		}
		&__content 					{ display: flex; flex-direction: column; }
	}
}

/*---------------
Latest release at homepage
--------------- */
.latest-release-wrapper { position: absolute; width: auto; max-width: 320px; height: auto; top: 100px; right: 80px; background-color: #222; z-index: 9;

	@media(max-width: 768px) { position: relative; top:0; right: 0; width: 100%; margin-bottom: 40px; max-width: unset; padding: 0 16px; background-color: transparent }

	h3 { padding: 16px; background-color: #111; text-transform: uppercase; font-size: 24px; }
	.latest-release-item { position: relative; padding: 16px;
		@media(max-width: 768px) {
			padding: 16px;
			background-color: #222;
		}
		&:not(&:first-of-type) { border-top: 1px solid #444; }
		&__wrapper { padding-left: 16px; cursor: default;
			@media(max-width: 768px) {
				padding-left: 0;
			}
		}
		&__title {  }
		&__date { display: flex; flex-direction: row; align-items: center; line-height: normal; margin-top: 8px;
			&__title 		{ font-size: 18px; text-transform: uppercase; color: #a1a1a1; margin-right: 8px; }
			&__date 		{ font-size: 18px; text-transform: uppercase; color: #a1a1a1; font-weight: bold; }
			.download-btn 	{ display: inline-block; background-color: #444444; color: @white; padding: 4px; text-transform: uppercase; margin-left: 8px; text-decoration: none; transition: all ease-in-out .1s;
				&:hover { background-color: @primary; color: @white; }
			}
		}
		&__button { position: absolute; top: 50%; margin-top: -30px; left: -6px; height: 60px; width: ~'calc(100% - 32px)'; padding: 8px; background-color: @white; color: @black; font-size: 22px; line-height: 50px; font-weight: bold; text-transform: uppercase; text-decoration: none; text-align: center; transition: all ease-in-out .15s; pointer-events: none; opacity: 0;
			&:hover { background-color: @primary; color: @white; }
		}

		@media(max-width: 768px) {
			&__button { opacity: 1; pointer-events: auto; position: relative; width: 100%; display: block; margin-top: 16px; left: 0; background-color: @primary; color: @white; }
		}
	}
	&__button { display: block; width:100%; padding: 8px; background-color: @white; color: @black; font-size: 24px; text-transform: uppercase; font-weight: bold; text-decoration: none; text-align: center; transition: all ease-in-out .1s;
		&:hover { background-color: @primary; color: @white; }
	}
}

/*---------------
Footer
--------------- */
.footer 							{ position: fixed; bottom: 0; width: 100%; padding-top: 10vh; z-index: 999; background-image: linear-gradient(0deg, #0E1117 30%, rgba(14,17,23,0.00) 100%);
	.grid 							{ align-items: center; }
	& .copy 						{ display: flex; color: @white; opacity: 0.8; font-size: 1.5rem; //margin-right: auto; 
		&:after 					{ content: "|"; font-size: 1.5rem; position: relative; margin-left: 1.4rem; }
	}
	&__disclaimer 					{ margin-left: 16px; // margin-left: auto;
		ul 							{ display: flex;
			li 						{ margin-right: 1.4rem;
				a 					{ color: @white; opacity: 0.9; text-decoration: none; font-size: 1.5rem; transition: all .2s ease-in-out;
					&:hover 		{ opacity: 1; }
				}
				&:after 			{ content: "|"; font-size: 1.5rem; position: relative; margin-left: 1.4rem; }
				&:last-child 		{ margin-right: 0;
					&:after 		{ display: none; }
				}
			}
		}
	}
	.grid 							{ max-width: 100%; padding-bottom: 1rem; }
	@media(max-width: 768px) 		{ position: relative; background: #0E1117; padding-top: 2rem;
		& .grid 					{ flex-direction: column; padding-bottom: 0; }
		& .copy 					{ order: 1; padding-bottom: 1rem; }
		&__disclaimer 				{ margin-left: 0; }
	}
}

/* ********************
General
******************** */
.block			{ display: block; }
.inlineblock	{ display: inline-block; }
.none			{ display: none; }
.absolute		{ position: absolute; }
.relative		{ position: relative; }
.fixed			{ position: fixed; }
.hidden			{ overflow: hidden; }

.grid 			{ max-width: 142rem; width: 100%; margin: 0 auto; display: flex; }
.grid--medium 	{ max-width: 114rem; width: 100%; margin: 0 auto; justify-content: flex-start; flex-direction: row; }
.grid--small 	{ max-width: 75rem; width: 100%; margin: 0 auto; justify-content: flex-start; flex-direction: row; }

.error 			{ justify-content: center; align-content: center; align-items: center; height: 100%; text-align: center;
	h1 			{ font-size: 10rem; line-height: 1.5; }
	p 			{ font-size: 2.2rem; line-height: 1.5; }
}

html 							{ font-size: 62.5%; }
body 							{ .tungsten-medium; position: relative; font-weight: 400; font-size: 1.8rem; color: @white; line-height: 2.8rem; overflow-x: hidden; }

body 							{
	&:before 					{ position: absolute; content: ""; height: 100%; background: @black; width: 100%; z-index: 5; opacity: 0.8; }
	&.home:before 				{ display: none; }
	@media(max-width: 768px) 	{
		&.home .footer 			{ background: #0E1117; }
	}
	a, button,
	input[type=submit] 			{ -webkit-appearance: none; } // Fixes weird styling in safari
}

button 							{ .tungsten-medium; }

@media only screen and (max-width: 142rem) {
	.grid 						{ padding-left: 2.5rem; padding-right: 2.5rem; }
}
@media only screen and (max-width: 114rem) {
	.grid--medium 				{ padding-left: 2.5rem; padding-right: 2.5rem; }
}
@media only screen and (max-width: 75rem) {
	.grid--small 				{ padding-left: 2.5rem; padding-right: 2.5rem; }
}

// IE fixes
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.hero-image__content 		{ padding-top: 25vh; }
	.media__cards a.song 						{ justify-content: flex-start; }
}

.object-fit 					{ height: 100%; width: 100%; }
.object-fit img 				{ height: 100%; width: 100%; object-fit: cover; }

#cookie-notice 					{
	span#cn-notice-text 		{ font-size: 1.6rem; }
	a 							{ color: white; font-size: 1.4rem; }
}

#cookie-notice #cn-accept-cookie, #cookie-notice #cn-more-info, #cn-refuse-cookie { font-family: 'Tungsten Semibold'; text-transform: uppercase; letter-spacing: 0.1rem; font-size: 1.8rem; width: auto; padding: 1.2rem 3.2rem; border-radius: 0; }

#cn-refuse-cookie 								{ border: 1px solid white; text-decoration: none; }
#cn-more-info									{  white-space: nowrap; border: 1px solid transparent; 
	&:hover										{ border-color: @primary; }
}

#cn-notice-text									{ letter-spacing: 0.1rem; opacity: 0.8; font-size: 1.6rem; }
#cookie-notice a								{ font-size: 1.8rem; }

#cookie-notice #cn-notice-text a 				{ font-size: 1.6rem; }

@media only screen and (max-width: 768px) {
#cookie-notice 									{
	.cookie-notice-container					{ flex-wrap: wrap; justify-content: flex-start; }
	#cn-notice-text								{ margin-bottom: 1.6rem; }
}

}

/*---------------
Socials
--------------- */
.socials {
	display: flex;
	flex-direction: row; 
	margin-left: auto;
	
	li {
		padding: 0 0.4rem;
		
		a {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 4rem;
			height: 4rem; 
			border-radius: 100%;
			
			svg {
				path {
					transition: all .2s ease-in-out;
				}
			}
			
			&:hover {
				svg {
					path {
						fill: @fallback;
						fill: @primary;
					}
				}
			}
		}
	}
}

@media only screen and (max-width: 768px) {
	.socials {
		margin-left: 0;
	}
}


@media only screen and (max-width: 640px) {
	.socials {
		li {
			padding: 0 0.4;
		}
	}
}

@media only screen and (max-width: 370px) {
	.socials {
		li {
			padding: 0;
		}
	}
}
form .gform-body .ginput_container_checkbox ul { margin-top: 8px; }
form .gform-body .ginput_container_checkbox li:not(:last-child) { margin-bottom: 4px; }
form .gform-body .ginput_container_checkbox li:before { display: none; }

form .gform-body .ginput_container_checkbox li { padding-left: 0; }

form .gform-body .ginput_container_checkbox li input[type="checkbox"] { display: none; }
form .gform-body .ginput_container_checkbox li input[type="checkbox"] + label {
	display: inline-block;
	position: relative;
	padding-left: 25px;
}

form .gform-body .ginput_container_checkbox li input[type="checkbox"] + label::before,
form .gform-body .ginput_container_checkbox li input[type="checkbox"] + label::after {
	content: "";
	position: absolute;
	border-radius: 0;
}

form .gform-body .ginput_container_checkbox li input[type="checkbox"] + label::before {
	left: 1px;
	top: 2px;
	border: 2px solid #c46207;
	background: transparent;
	color: white;
	width: 16px;
	height: 16px;
}

form .gform-body .ginput_container_checkbox li input[type="checkbox"] + label::after {
	left: 4px;
	top: 12px;
	background-image: url("https://www.snakepithardcore.com/wp-content/uploads/2022/04/outline_check_white_24dp.png");
	background-size: contain;
	width: 14px;
	height: 14px;
	opacity: 0;
	transform: translateY(-50%);
}

form .gform-body .ginput_container_checkbox li input[type="checkbox"]:checked + label::before {
	background: #c46207;
}

form .gform-body .ginput_container_checkbox li input[type="checkbox"]:checked + label::after {
	opacity: 1;
}


body.home {
	.hero-image{
		@media(max-width: 768px) 		{
			min-height: inherit;
		}
		&__content{
			@media(max-width: 768px) 		{
				min-height: inherit;
				padding-top: 16rem;
				padding-bottom: 8rem;
			}
		}
	}
}

/* ********************
Cookie notice
******************** */

.cookie-notice-container {
	padding: 1.5rem !important;
}

.cn-text-container {
	font-size: 1.3rem !important;
	padding: 1rem;
	a {
		font-size: 1.3rem !important;
	}
}
.cn-buttons-container {
	a {
		text-decoration: none !important;
		font-family: 'Tungsten Semibold' !important;
		font-weight: normal !important;
		text-transform: uppercase !important;
		padding: 1.2rem 3.2rem !important;
		font-size: 1.7rem !important;
		letter-spacing: 1px !important;

		&:last-of-type {
			font-size: 1.75rem !important;
		}
	}
}

span#cn-close-notice.cn-close-icon {
	display: none !important;
}


@import "members.less";