:root {
	--gold: linear-gradient(90deg, #A9772B 0%, #F8F2A2 10%, #FBDA5F 19%, #FDD143 22%, #F9E98A 32%, #FDD143 55%, #F6C840 59%, #E3B03B 65%, #C68932 73%, #A96429 79%, #AD692A 83%, #B8782D 87%, #CC9234 92%, #E7B53C 97%, #FDD143 100%);
	--black-gradient: #1A1A1A 0%, rgba(0, 0, 0, 0.5) 25%, rgba(0, 0, 0, 0.00) 100%;
	--red: #AB1F2D;
	--black: #1A1A1A;
	--teachers: 'Teachers', sans-serif;
	--anton: 'Anton', sans-serif;
	--x-large: 1920px;
	--large: 1440px;
	--laptop: 1280px;
	--tablet: 1024px;
	--tablet-p: 768px;
	--phone: 576px;

}

* {
	box-sizing: border-box;
}

body {
	background: var(--red);
	font-family: var(--teachers);
	color: white;
/*	padding-top:302px;*/
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color:white;
	font-weight: 600;
}

a {
	text-decoration: none;
}

p {
	color: white;
}

b {
	font-weight: 600;
}


img {
	width: 100%;
}

header {
	width: 100%;
	background-color: var(--red);
	background-image: url('images/jff24-pattern.png');
	background-size: 1000px;
}
nav {
	position: sticky;
	top:0;
	z-index: 999;
}

hr.gold-bar {
	border: 0;
	background: var(--gold);
	height: 10px;
	padding: 0;
	margin: 0;
}

.marquee {
	width: 100%;
	margin: auto;
	overflow: hidden;
	background: var(--black);

	* {
		margin: 0;
		padding: 0;
	}

	ul {
		display: flex;
		margin: 0;
		padding: 0.75rem;

		li {
			display: flex;
			margin-right: 2rem;
			color: black;

			h6 {
				margin-right: 0.25rem;
				font-size: 1rem;
			}
		}
	}
}

section.logo-container {
	display:grid;
	grid-template-columns: repeat(3, 1fr);
	@media screen and (max-width: 768px) {
		grid-template-columns: 2fr 1fr;
		padding:0 .5rem;
	}

	align-items: center;
	width: 100%;
	max-width: 90vw;
	margin:auto;
	height: 200px;

	img {
		height: 100px;
		width: auto;
	}

	.logo {
		grid-column: 2/3;
		justify-self: center;
		@media screen and (max-width: 768px) {
			grid-column: 1/2;
			justify-self: start;
			img {
				width:100%;
				height:auto;
			}
		}
	}

	.twentieth {
		justify-self: end;
		text-align: right;
		img {
			width:100%;
			@media screen and (max-width: 768px) {
				width:50%;
				height:auto;
			}
		}

	}
}

nav {
	#navToggle {
		width:100%;
		border:0;
		background: var(--black);
		color:white;
		padding:1rem;
		position:fixed;
		bottom:0;
		z-index: 9999;
		&:hover,
		&:active,
		&:focus {
			background:white;
			color:var(--red);
		}

		@media screen and (min-width: 800px) {
			display:none;
		}
	}

	width:100%;
	background: var(--black);
	text-transform: uppercase;

	ul {
		width: 100%;
		margin: 0;
		padding: 0;
		display: flex;
		justify-content: center;
		@media screen and (max-width: 799px) {
			display:none;
			flex-direction:column;
			position:fixed;
			bottom:50px;
		}
	}

	li {
		list-style-type: none;
	}

	a {
		color: white;
		background-color: var(--black);
		display: block;
		padding: 1rem 2rem;
		text-decoration: none;

		&:hover,
		&.active {
			background-color: var(--red);
		}
	}
}


a.black-btn {
	background: var(--black);
	color:white;
	display:block;
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	padding:1rem;
	transition:.8s;
	&:hover,
	&.active {
		background:white;
		color:var(--red);
	}
}

main:not(.film-list-container),
.sponsors-container {
	max-width:var(--x-large);
	margin:auto;
	padding-bottom:8rem;
	@media screen and (max-width: 1920px) {
		width:90vw;
	}
	@media screen and (max-width: 768px) {
		padding-left:1rem;
		padding-right:1rem;
	}

}


main.schedules-info,
main.ticket-info,
main.programmes-info,
main.about-info,
main.homepage-container {
	margin-top:1rem;
	h1.page-title {
		grid-column: 1/-1;
		text-transform: uppercase;
		font-family: var(--anton);
		font-size: 3rem;
	}
	h2, h3 {
		text-transform: uppercase;
		font-size: 1.25rem;
	}
}

main.programmes-info,
main.about-info,
main.ticket-info
 {
	a {
		color:white;
		text-decoration:underline;
		&:hover {
			color:var(--black);
		}
	}
}

/*******
HOMEPAGE
*******/
.homepage-wrapper {
	background-image:url('images/jff24-pattern.png');
	background-size: 1000px;
	filter:grayscale(30%);
}

main.homepage-container {
	display:grid;
	gap: 4rem;
	grid-template-columns:1fr 1fr;

	@media screen and (max-width:1024px) {
		grid-template-columns: 1fr;
		gap:1rem;
	}

	margin-top:0;
	* {
		text-shadow:2px 2px 15px rgba(10, 10, 10, .5);
	}

	h1.page-title {
		margin: 0;
		font-size: 600%;
	}

	@media screen and (max-width:768px) {
		h1.page-title {
			font-size: 450%;
		}
	}

	& > div {
		padding:4rem 0;
		@media screen and (max-width:1024px) {
			padding:2rem 0;
		}
	}
}

.homepage-welcome div  {
	position:sticky;
	top:6rem;
	
	h1.page-title {
		margin-bottom: 4rem;
	}
	ul {
		margin: 0;
		padding: 0;
		margin-bottom: 4rem;
		list-style-type: none;

		li {
			margin-bottom: 1rem;
		}
	}
	a {
		color:white;
		text-transform: uppercase;
		font-size: 1.5rem;
		transition:.4s;
		@media screen and (max-width: 768px) {
			font-size: 1.2rem;
		}
		&:hover,
		&:focus {
			font-weight: 600;
		}
	}

	a.enter-site {
		font-weight: 600;
		transform-origin: center left;
		span {
			font-size: 1.3rem;
			display:inline-block;
			transition:.4s	;
		}
		&:hover {
			font-size: 1.7rem;
			span {
				transform:translateX(1rem);
			}
		}
	}
}

.homepage-message {
	p {
		font-size: 1.5rem;
		@media screen and (max-width: 768px) {
			font-size: 1.2rem;
		}
	}
}


/*************
FILM LIST PAGE
**************/
.film-list-container {
	display: grid;
	@media screen and (min-width:1920px) {
		grid-template-columns: repeat(4, 1fr);
	}
	grid-template-columns: repeat(3, 1fr);
	@media screen and (max-width: 768px) {
		grid-template-columns: repeat(2, 1fr);
	}
}

.film-item {
	background-color: var(--red);
	background-image: url('images/jff24-pattern.png');
	background-size: 1000px;
	aspect-ratio: 16/9;
	overflow:hidden;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	position: relative;

	* {
		transition: .4s;
	}

	h1 {
		position: absolute;
		margin: 0;
		padding: 0;
		opacity: 0;
		top:50%;
		transform:translateY(-50%);
		padding:0 2rem;
		grid-template-columns: repeat(2, 1fr);
		@media screen and (max-width: 1200px) {
			font-size: 1rem;
		}
	}

	&:hover {
		img {
			opacity: 0;
		}

		h1 {
			opacity: 1;
		}
	}
}

/*#akira-film-item {
	img {
		opacity: 0;
	}

	h1 {
		opacity: 1;
	}
}
*/


#godzillaoneImax-film-item {
	display:none !important;
}


.schedule-table {
	&.cinema,
	&.film {
		.schedule-item-row {
			display: grid;
			grid-gap: 0rem 1.5rem;
		}
	}

	&.cinema {
		.schedule-item-row {
			grid-template-columns: 1fr 3fr;
			@media screen and (max-width: 1024px) {
				grid-template-columns: 1fr;
			}
			.schedule-title-time-film,
			.schedule-time-film {
				display: grid;
				grid-template-columns: 1fr 3fr;
				grid-gap: 1.5rem;
				@media screen and (max-width: 1024px) {
					display: grid;
					grid-template-columns: 1fr 2fr;
				}
			}
		}
	}

	&.film {
		.schedule-item-row {
			grid-template-columns: 1fr 1fr;
			@media screen and (max-width: 1024px) {
				grid-template-columns: 1fr;
				margin-bottom: 1rem;
				.schedule-cinema {
					font-weight: 600;
				}
			}
			.schedule-title-date-time,
			.schedule-date-time {
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-gap: 1.5rem;
				text-align: center;
				@media screen and (max-width: 1024px) {
					display: grid;
					grid-template-columns: 2fr 1fr;
					text-align: left;
					p {
						margin: 0;
						font-weight: normal !important;
					}
				}
			}
		}
	}
}

/************
IDV FILM PAGE
************/
.idv-film-featured-wrapper {
	background:var(--black);

	.idv-film-featured {
		max-width:var(--x-large);
		width:calc(100vw - 6rem);
		@media screen and (max-width: 1024px) {
			width:100%;
		}
		position:relative;
		aspect-ratio: 16 / 9;
		margin:auto;
	}

	.featured-content {
		height:100%;
		width: 100%;
		display:grid;
		grid-template-columns: 1fr max-content 1fr;
		background-repeat:no-repeat;
		background-position-y: top;
		background-size: cover;
		z-index: 1;
		position:absolute;
		top:0;
		left:0;
		transition:.8s;

		&.hidden {
			transition:.8s;
			opacity: 0;
			visibility: hidden;
		}
	}

	.featured-trailer {
		position:absolute;
		width: 100%;
		z-index: 0;
		iframe {
			aspect-ratio: 16 / 9;
			width: 100%;
			display:none;
		}

	}

	.close-trailer  {
		position:absolute;
		top:5rem;
		right:2rem;
		z-index: 3;
		background: none;
		font-family: var(--anton);
		font-size: 1.5rem;
		color:white;
		border:0;
		display:none;
		opacity:.3;
		&:hover {
			color:var(--red);
			cursor:pointer;
			opacity:1;
		}

	}

	.film-content {
		text-shadow:2px 2px 15px rgba(10, 10, 10, .8);
		align-self:end;
		max-width:var(--x-large);
		width:calc(100vw - 6rem);
		margin:auto;
		@media screen and (max-width: 1024px) {
			padding:0rem;
		}
	}

	h1.film-title {
		font-size: 4rem;
		font-family: var(--anton);
/*		text-transform: uppercase;*/
		margin: 0;
		margin-bottom: .5rem;
		@media screen and (max-width: 1200px) {
			font-size: 2.5rem;
		}
	}

	h2 {
		font-size: 1.2rem;
		font-family: var(--teachers);
		@media screen and (max-width: 1200px) {
			font-size: 1rem;
		}
	}

	h2.film-staff {
		margin-top: 1rem;
		font-weight: normal;
		span.cast:not(:last-of-type):after {
			content:',';
		}
	}

	div.play-btn {
		width:max-content;
		text-align:center;
		justify-self: center;
		align-self:center;
		transform-origin:50% 50%;
		transition:0.4s;

		img {
			width: 60px;
			transition:0.4s;
			@media screen and (max-width:1024px) {
				width: 25px;
			}
		}

		h3 {
			font-family: var(--anton);
			text-transform: uppercase;
			font-size: 1.5rem;
			padding: 0;
			margin-top: .5rem;
			transition:0.4s;
			@media screen and (max-width:1024px) {
				font-size: .75rem;
			}
		}

		&:hover {
			cursor:pointer;
			transform:scale(1.1);
			img {
				transform:scale(1.2) translateY(-.2rem);
			}
			h3 {
				transform: scale(.9);

			}
		}
	}

	div.copyright-statement {
		text-align: right;
		display:flex;
		align-items: flex-end;
		justify-content: flex-end;
		padding:2rem;
		@media screen and (max-width: 1024px) {
			padding:0;
		}
		p {
			margin: 0;
			visibility: hidden;
		}

	}

	
	@media screen and (max-width: 1024px) {
		h1, h2 {
			display:none;
		}
	}
}

main.idv-film-page {
	display:grid;
	gap: 2rem;
	row-gap: 1rem;
	grid-template-columns: 3fr  5fr 4fr;
	grid-template-areas: 
	"poster synopsis gallery" 
	"details schedule schedule";
	@media screen and (max-width: 1024px) {
		grid-template-areas: 
		"poster synopsis synopsis" 
		"details schedule gallery";
	}

	@media screen and (max-width: 768px) {
		grid-template-columns: 2fr 3fr;
		grid-template-areas: 
		"poster synopsis" 
		"details schedule"
		"gallery gallery";
	}

	@media screen and (max-width: 600px) {
		grid-template-columns: 1fr;
		row-gap: 0;
		grid-template-areas: 
		"synopsis" 
		"poster"
		"details"
		"schedule"
		"gallery";

		h3{
			margin-top:2rem !important;
			margin-bottom: 1rem !important;
		}
		div.schedule-item-row {
			padding:0;
		}
	}

	h3 {
		font-family: var(--anton);
		text-transform: uppercase;
		font-size: 1.5rem;
		margin:1rem 0;
	}
	
	p.credit {
		font-size: .75rem;
	}
}

.film-poster {
	.buy-tix {
		margin-top: 1rem;
	}
	h1.film-title-mobile {
		display: none;
		@media screen and (max-width: 1024px) {
			display:block;
		}
	}

	grid-area: poster;
	margin: 1.5rem 0 0 0;
	img {
		margin-top: 1.5rem;
	}
	
}

.film-details-container {
	grid-area:details;
	.details {
		margin-bottom: 2rem;
		table {
			width:100%;
		}
		th {
			text-align: left;
		}
		td {
			text-align: right;
		}
	}

	div.casts {
		margin-bottom: 2rem;

		ul {
			padding: 0;
			margin: 0;
			list-style-type: none;
		}
	}

	div.staffs {
		margin-bottom: 2rem;
		
		ul {
			padding: 0;
			margin: 0;
			list-style-type: none;
			span {
				font-weight: 600;
			}
		}
	}
}

.film-gallery  {
	grid-area:gallery;
	margin-top:1rem;
	
	ul {
		padding: 0;
		margin: 0;
		display:grid;
		gap: .5rem;
		grid-template-columns: 1fr 1fr;
		list-style-type: none;
		li:nth-child(n+9)  {
			display:none;
		}
	}
}

.film-synopsis {
	margin-top:1rem;
	grid-area:synopsis;
	a {
		color:white;
		&:hover {
			color:var(--black);
		}
	}
}

.film-schedule-container {
	grid-area:schedule;
	h4 {
		margin: 0;
	}
}

/************
SCHEDULE PAGE
*************/
.schedule-titles-container {
	@media screen and (max-width: 1440px) {
		display: none !important;
	}
}

.schedule-item-row {
	margin-bottom: 0.5rem;
	@media screen and (max-width: 1440px) {
		padding: 1rem 0;
	}
	.schedule-date p {
		@media screen and (max-width: 1024px) {
			font-weight: 600;
		}
	}
	.schedule-date:not(:first-of-type),
	.schedule-cinema:not(:first-of-type) {
		opacity: 0;
		@media screen and (max-width: 1024px) {
			display: none;
		}
	}
}

.schedules-info {
	display: grid;
	grid-template-columns: 0.75fr 2.25fr 1fr;
	gap: 1rem;

	@media screen and (max-width: 1440px) {
		grid-template-columns: 2fr 1fr;
	}

	@media screen and (max-width: 768px) {
		grid-template-columns: 1fr;
	}

	.schedule-table {
		display: none;
		grid-column: 2/3;
		padding-top: 1rem;
		@media screen and (max-width: 768px) {
			grid-column: 1/3;
		}

		a {
			color:white;
			border: 0 !important;
			padding: 0;
			font-weight: normal;
			&:hover,
			&:focus,
			&:active {
				color: white;
				border: 0 !important;
				font-weight: 600;
			}
		}
	}
}

.schedule-sidebar-container {
	.schedule-movie-info-container {
		position: sticky;
		top: 6rem;
	}

	.schedule-movie-info {
		display: none;
		h3 {
			margin: 0;
			margin-bottom: .25rem;
		}
		p {
			font-weight: 400;
			margin: 0;
			&.credit {
				font-size: 0.625rem;
				margin: .75rem 0;
			}
		}

		p.schedule-movie-desc span:not(:last-of-type):after {
			content:' | ';
		}
	}
}

ul.schedule-tab {
	margin: 0;
	padding: 0;
	@media screen and (max-width: 1440px) {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 1rem;
		grid-column: 1/3;
	}

	li {
		h3 {
			margin: 0;
			font-weight: 600;
			text-transform: uppercase;
		}
		margin-bottom: 1rem;
		
		@media screen and (max-width: 1440px) {
			&:first-of-type {
				grid-column: 1/-1;
			}
		}
		list-style-type: none;
		&:not(:first-of-type) {
			text-align: center;
		}
		
	}
}

.schedule-by-container {
	@media screen and (max-width: 768px) {
		grid-column: 1/3;
	}

	label {
		display: block;
		text-transform: uppercase;
		font-weight: 600;
		font-size: 1.25rem;
		margin-bottom: 1rem;
		width: 100%;
	}
}

/********
*SELECT2*
********/

.select2 {
	width: 100% !important;

	@media screen and (max-width: 1440px) {
		margin-left: 0rem;
	}
	@media screen and (max-width: 1440px) {
		width: 100% !important;
	}
}
.select2-container--default .select2-selection--single {
	border: 0;
}

.select2-dropdown {
	border: 0;
	margin-top: 1rem;
	background-color: var(--black);
}

.select2-container--default
.select2-results__option--highlighted.select2-results__option--selectable {
	background-color: white;
	color:var(--red);
}

.select2-selection__rendered {
	text-transform: uppercase;
	font-weight: 600;
	background: white;
	color: var(--black);
	border: 1px solid var(--black);
	padding: 0.25rem 1rem;
	font-size: 1rem;
}

.select2-container--default .select2-results__option--selected {
	color: var(--red);
	background: white;
}

.select2-container--default
.select2-selection--single
.select2-selection__rendered {
	color: var(--red);
}
.select2-container--default
.select2-selection--single
.select2-selection__arrow
b {
	border-color: var(--black) transparent transparent transparent;
	transform: translateY(5px);
}

/**************
PROGRAMMES PAGE
**************/
main.programmes-info {
	display:grid;
	grid-template-columns: repeat(2,1fr);
	column-gap: 2rem;

	h2 {
		font-size: 1.625rem;
	}

	@media screen and (max-width: 768px) {
		grid-template-columns: 1fr;
		gap:2rem;
	}

	> div {
		position:relative;
		border:1px solid white;
		padding:1rem;
	}

	> div:before {
		content:'';
		position:absolute;
		width:100%;
		height:100%;
		top:0;
		left:0;
		background: url(images/jff24-pattern.png);
		background-size:1000px;
		z-index: -1;
		filter:grayscale(20%);
	}

	img {
		filter:grayscale(0%) !important;
	}


	.workshop-images {
		display:grid;
		grid-template-columns: repeat(3,1fr);
		gap:.5rem;
	}

	.godzilla-programme {
		grid-column: 1/-1;
		display:grid;
		grid-template-columns: repeat(2,1fr);
		column-gap: 2rem;
		margin-top: 2rem;

		.minus-one-imax {
			.poster {
				text-align: center;
				p {
					font-size: .75rem;
					margin-top: .25rem;
				}
			}
			img {
				width:50%;
			}
		}

		@media screen and (max-width: 768px) {
			margin-top: 0rem;
		}

		@media screen and (max-width: 576px) {
			grid-template-columns: 1fr;
			row-gap: 0rem;
			
			.minus-one-imax {
				border-top:1px solid white;
				padding-top: 1rem;
				img {
					width:100%;
				}
			}
		}


		h2 {
			grid-column: 1/-1;
		}

		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
			margin-top: 1rem;
			display:flex;
			gap:1rem;
			flex-wrap: no-wrap;
			p {
				margin-top: .25rem;
				font-size: .75rem;
			}
		}

	}
}


/**********
TICKET INFO
**********/
main.ticket-info {
	display:grid;
	grid-template-columns: 3fr 1fr;
	h2 {
		font-weight: 600;
	}

	@media screen and (max-width: 768px) {
		grid-template-columns: 1fr;
	}

	ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
		li {
			margin:1.5rem 0;
			a {
				display:inline-block;
			}
		}
	}
}

/**********
ABOUT PAGE
**********/
main.about-info {
	display:grid;
	grid-template-columns: 1fr 1fr;
	@media screen and (max-width: 576px) {
		grid-template-columns: 1fr;
	}
	h2 {
		font-weight: 600;
	}
	column-gap:2rem;
	
	.about-film-list {
		margin-top: 2rem;
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;

			li {
				a {
					display:inline-block;
					color:white;
					transition:.4s;
					&:hover {
						color:var(--black);
					}
				}
			}
		}
	}

	.jfkl-socials {
		ul {
			margin: 0;
			padding: 0;
			margin-top: 2rem;
		}
		ul li {
			display:inline-block;
			margin-right: 1rem;
			margin-bottom:1rem;
			a {
				text-transform: none;
			}
		}
	}
}

/*****
FOOTER
*****/
footer {
	background:white;
	@media screen and (max-width: 799px) {
		margin-bottom: 2rem;
	}
}
hr.footer-bar	{
	height:2.5rem;
	background-color: var(--black);
	background-image: url(images/jff24-pattern.png);
	filter:grayscale(100%);
	background-size:1000px;
	border:0;
	margin: 0;
	padding: 0;
}


/*SPONSORS*/
.sponsors-container {
	background:white;
	/*display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-template-rows: 1fr 1fr;*/
/*	padding:1rem;*/
column-gap:1rem;
display:flex;
flex-wrap:wrap;
@media screen and (max-width:768px) {

}
/*
	.media-partners {
		grid-column: 4/8;
	}
	.sponsored-by {
		grid-column: 1/-1;
	}
*/

h6 {
	color:var(--black); 
	width:100%;
	align-self: flex-start;

}

img {
	height:40px;
	width:auto;
}

.organised-by img {
	height:80px;
}

.venue-provider img {
	height:63px;
}

.coop-with img {
	height:45px;
}

div.sabahnites img{
	margin-right: 1rem;
}

img.nyah,
div.vida img {
	height:80px;
}

img.wak2024 {
	height:55px;
	margin-left: .5rem;
}

div.mitsubishi img {
	height:50px;
}

div.kino img {
	height:35px;
}


div.imuraya img {
	height:55px;
}

div.koku img {
	height:35px;
}


div,
.media-partners,
.sponsored-by{
	display:flex;
	justify-content:space-between;
	align-items: center;
	flex-wrap:wrap;
	gap: 1rem;
	@media screen and (max-width:768px) {
		justify-content:flex-start;
		gap: 2rem;
	}
}


}

.website-copyright {
	font-size: .75rem;
	text-align: center;
	color:var(--black);
}

.mfp-iframe-holder .mfp-content {
	max-width: 90vw;
	@media screen and (max-width: 768px) {
		max-width: 90vw;
	}
}

.mfp-bg {
	opacity:.9;
}