:root {
	--dark-blue:#253B81;
	--dark-red:#AC1F2D;
	--bubble-bg:#FFFFFF33;
	--b-font: "Afacad", sans-serif;
	--h-font: "Unbounded", sans-serif;
	--x-large: 1920px;
	--large: 1440px;
	--laptop: 1280px;
	--tablet: 1024px;
	--tablet-p: 768px;
	--phone: 576px;
}

* {
	box-sizing: border-box;
}

html {
	background: var(--dark-blue);
}

body {
	font-family: var(--b-font);
	font-optical-sizing: auto;
	font-weight: 400;
	font-style: normal;
	background-image:url('images/header.svg');
	background-position: top;
	background-size:100%;
	background-attachment: fixed;
	min-height: 100vh;
	background-repeat: no-repeat;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--h-font);
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
}

h4 {
	font-size: 1.125rem;
}

h4, h5, h6 {
	font-family: var(--b-font);
}

p {
	font-size: 18px;
	&:last-of-type {
		margin-bottom:0;
	}
}

img {
	width:100%;
}

a {
	text-decoration: none;
}

a.bubble {
	font-family: var(--h-font);
	text-decoration: none;
	text-align: center;
	padding: 0.625rem 1.25rem;
	font-weight: 700;
	display:inline-block;
	text-transform: uppercase;
}

.film-reel-top,.film-reel-bottom {
	background-color:black;
	background-image:url(images/film-reel-pattern.svg);
	background-repeat: repeat-x;
	
	background-position: center;
	height:2rem;
	display:flex;
	align-items: center;
	justify-content: center;
	width:100%;
	img {
		object-fit: cover;
	}
}

.film-reel-bottom {
	position:absolute;
	bottom:0;
}

.bubble {
	background:var(--bubble-bg);
	padding:1.25rem;
	border-radius: 1.25rem;
	border-top:1px solid white;
	border-left:1px solid white;
	color:white;
	box-shadow: inset 0 0 10px 0 white, 1px 1px 10px 0 rgba(255,255,255,0.5);
	backdrop-filter: blur(5px);
}

.bubble-img {
	background:var(--bubble-bg);
	color:white;
	box-shadow: inset 0 0 10px 0 white, 1px 1px 10px 0 rgba(255,255,255,0.5);
	backdrop-filter: blur(5px);
}

header {
	position: fixed;
	width:100%;
	z-index:1;
}

.marquee {
	width: 100%;
	margin: auto;
	overflow: hidden;

	* {
		margin: 0;
		padding: 0;
	}

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

		li {
			display: flex;
			align-items: center;
			margin-right: 1.25rem;
			color: black;
			padding:1.25rem;
			color:white;

			h6 {
				font-family: var(--h-font);
				margin-right: 0.25rem;
				font-size: 0.875rem;
			}

			p {
				font-size: 1.125rem;
			}
		}
	}
}

main {
	padding: 8.125rem 2.5rem 0rem 2.5rem;
	display:grid;
	grid-template-columns: 1fr 3fr;
	max-width: 90rem;
	margin:auto;
	gap: 1.25rem;
}

@media screen and (max-width: 1024px) {
	main {
		height:min-content;

	}
}
@media screen and (max-width: 764px) {
	main {
		grid-template-columns: 1fr;
		padding-left:1.25rem;
		padding-right:1.25rem;
	}
}


nav {
	display:flex;
	flex-direction: column;
	gap:1.25rem;
	position: sticky;
	top:8.125rem;
	z-index: 1;
}

.logo {
	padding:2rem;
	width:100%;
}

ul.nav-list,
ul.nav-style {
	margin: 0;
	padding: 0;
	list-style-type: none;

	li {
		margin-bottom: 1.25rem;
	}
	
	li a {
		display: inline-block;
		box-sizing: content-box;
		text-decoration: none;
		text-transform: uppercase;
		font-size: 0.875rem;
		font-family:var(--h-font);
		font-weight: 700;

		background:var(--bubble-bg);
		padding:0.625rem 1.25rem;
		border-radius: 1.25rem;
		border-top:1px solid white;
		border-left:1px solid white;
		color:white;
		box-shadow: inset 0 0 10px 0 white, 1px 1px 10px 0 rgba(255,255,255,0.5);
		backdrop-filter: blur(5px);
		transition:.4s;
	}

	li a:hover,
	li a.active {
		border:0;
		border-bottom:1px solid rgba(30,30,30,.5);
		border-right:1px solid rgba(30,30,30,.5);
		background:white;
		color:var(--dark-red);
		box-shadow: inset 0 0 10px 0 var(--dark-blue), 1px 1px 10px 0 rgba(255,255,255,0.5);
		/*transform:scale(1.15);
		transform-origin: center left;*/
	}
}

#navToggle {
	display:none;
	border-bottom:0;
	border-right:0;
	background: rgba(37, 58, 129,0.8);
	font-family: var(--h-font);
	font-weight: bold;
	backdrop-filter: blur(5px);

}

@media screen and (max-width: 764px) {
	#navToggle {
		display:block;
		position:fixed;
		bottom:1.25rem;
		margin:auto;	
		z-index: 1;	
		width:calc(100% - 2.5rem);
	}

	ul.nav-list {
		position: fixed;
		bottom:5rem;
		border-radius: 1.25rem;
		width:80vw;
		display:none;
		z-index: 1;
		margin-bottom: 1.25rem;
		li {
			display:inline-block;
			margin-right: 1.25rem;
			a {
				background: rgba(37, 58, 129,0.8);
				font-size: 1.25rem;
			}
		}
		li:last-of-type {
			margin-bottom: 0;
		}
	}
}

article {
	display:grid;
	grid-template-columns: repeat(3,1fr);
	gap:1.25rem;
	grid-auto-rows: max-content;

	h2 {
		font-size: 3rem;
		margin-top: 0;
		margin-bottom: 1.5rem;
	}

	h3 {
		font-size: 1.5rem;
		margin-top: 0;
		margin-bottom: 1.5rem;
	}
}

@media screen and (max-width: 1024px) {
	article {
		h2 {
			font-size: 1.75rem;
		}
		h3 {
			font-size: 1rem;
		}
	}
	
}


/*WELCOME PAGE*/
.jff-trailer {
	grid-column: 1/3;
	position: relative;
	width: 100%;
	padding-bottom: 56.25%; 
	height:0;
	overflow: hidden;
}

.jff-trailer iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.welcome-msg {
	grid-column: 1/3;
	padding: 1.25rem 2.5rem;
}


.welcome-cta {
	grid-column: 1/3;
	text-align: right;
	a {
		display: inline-block;
	}
}

@media screen and (max-width:1024px) {
	.jff-trailer,
	.welcome-msg,
	.welcome-cta {
		grid-column: 1/-1;
	}
	.welcome-cta {
		font-size: .875rem;
	}
}


/*FILM LIST*/
article.film-list-page {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	align-items: flex-start;
	max-height:1750px;
}

.film-card {
	width:calc((100% - 2.5rem)/3);
	img {
		margin-bottom: 1.25rem;
	}
	a {
		display: inline-block;
	}
	h2 {
		font-size: 1.5rem;
		text-align: center;
		transition:.4s;
		margin:0;
	}
	&:hover {
		h2 {
			border:1px solid rgba(30,30,30,.5);
			background: white;
			color:var(--dark-red);
			box-shadow: inset 0 0 10px 0 #253B81, 1px 1px 10px 0 rgba(255,255,255,0.5);
		}
	}
}

@media screen and (max-width: 1024px) {
	article.film-list-page {
		display:grid;
		grid-template-columns: repeat(2,1fr);
		max-height:none;
	}

	.film-card {
		width:100%;
		h2 {
			font-size: 1rem;
		}
	}
}

@media screen and (max-width: 764px) {
	article.film-list-page {
		.film-card {
			h2 {
				font-size: .875rem;
			}
		}
	}
	
}

@media screen and (max-width: 480px) {
	article.film-list-page {
		.film-card {
			h2 {
				font-size: .75rem;
			}
		}
	}
	
}

.page-main {
	grid-column: 1/3;
	display:flex;
	flex-direction: column;
	gap:1.25rem;
	.bubble {
		padding:2.5rem;
	}
}

.page-side {
	grid-column: 3/4;
	h3 {
		font-size: 1rem;
	}
}

@media screen and (max-width: 1024px) {
	.page-main,
	.page-side {
		grid-column: 1/-1;
	}
}

/**IDV FILM PAGE**/
section.idv-film-featured {
	width:100%;
	position:relative;
	margin:auto;
}

.featured-content {
	height:100%;
	width: 100%;
	transition:.8s;
	transition-property: opacity;

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

.featured-trailer {
	width: 100%;
	iframe {
		aspect-ratio: 16 / 9;
		width: 100%;
		display:none;
		box-shadow: inset 0 0 10px 0 white, 1px 1px 10px 0 rgba(255,255,255,0.5);
	}
}

section.trailer-controls {
	display:grid;
	grid-template-columns: repeat(2,1fr);
	gap: 1.25rem;
	a.bubble {
		font-size: .75rem;
		transition:.4s;
		padding:.625rem 1.25rem;
		&:hover{
			box-sizing:content-box !important;
			border:0;
			background:white;
			color:var(--dark-red);
			box-shadow: inset 0 0 10px 0 var(--dark-blue), 1px 1px 10px 0 rgba(255,255,255,0.5);
			transform-origin: center left;
		}
	}
}

.bubble.diamonds-label {
	padding: 0.625rem 1.25rem;
	margin-bottom: 1.25rem;
	width:max-content;
	h4 {
		font-family: var(--h-font);
		margin: 0;
		font-size: .875rem;
	}
}

section.film-gallery {
	ul.gallery {
		padding: 0;
		list-style-type: none;
		display:grid;
		grid-template-columns: repeat(auto-fit,minmax(150px,3fr));
		gap: 1.25rem;
	}
	img {
		background:var(--bubble-bg);
		color:white;
		box-shadow: inset 0 0 10px 0 white, 1px 1px 10px 0 rgba(255,255,255,0.5);
		backdrop-filter: blur(5px);
	}
}

section.film-details-container {
	display:grid;
	grid-template-columns: repeat(2,1fr);
	gap:1.25rem;
	ul {
		list-style-type: none;
		padding:0;
	}
}

section.film-poster {
	margin-bottom: 1.25rem;
	display:grid;
	grid-template-columns: repeat(2,1fr);
	gap:1.25rem;

	img {
		grid-column: 1/3;
	}

	
}

a.play-btn,
a.close-trailer  {
	grid-column: 1/2;
}

a.close-trailer {
	display:none;
}

.details {
	grid-column: 1/-1;
	table {
		width:100%;
		th {
			text-align: left;
		}
		td {
			text-align: right;
		}
	}
}

.casts {
	align-self: start;
}

.staffs {
	li {
		margin-bottom: 1rem;
	}
}

.credit {
	grid-column: 1/-1;
	color:white;
	font-size: 0.75rem;
}

/*SCHEDULE PAGE*/
ul.schedule-tab  {
	display:flex;
	gap:1.25rem;
	align-items: center;
	li {
		margin: 0;

	}
	h4 {
		font-family: var(--h-font);
		color:white;
		margin: 0;
	}
}

@media screen and (max-width:480px) {
	ul.schedule-tab {
		display:grid;
		grid-template-columns: 1fr 1fr;
		li:first-of-type {
			grid-column: 1/-1;
			width:100%;
			text-align: left;
		}
		li {
			text-align: center;
			width:75%;
			a {
				width:100%;
			}
		}
	}
}

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

.schedule-item-row {
	margin-bottom: 1.25rem;

	@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;
		}
	}
}

@media screen and (max-width: 1024px) {
	.schedule-item-row {
		margin-bottom: 2.5rem;
		padding:0;
	}
}

.schedules-info {
	.schedule-table {
		display: none;
	}
}

.schedule-movie-info-container {
	position: sticky;
	top: 8rem;
	.schedule-movie-info {
		display: none;
	}
}

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

	&.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;
				@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;
				padding:0;
				.schedule-cinema {
					font-weight: 600;
				}
			}
			.schedule-title-date-time,
			.schedule-date-time {
				display: grid;
				grid-template-columns: 1fr 1fr;
				grid-gap: 1.25rem;
				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;
					}
				}
			}
		}
	}
}

.schedule-title h4 {
	margin: 0;
}

.schedule-table a {
	color:white;
	transition:.4s;
	&:hover {
		text-shadow:0px 0px 10px rgba(255,255,255, 0.8);
		text-decoration: underline;
	}
}

.schedule-by-container {
	margin-top: 1.25rem;
	label {
		display: none;
	}
}

.schedule-movie-info {
	img {
		margin-bottom: 1.25rem;
	}
	p.schedule-movie-desc span:not(:last-of-type):after {
		content:' / ';
	}
}

.select2 {
	margin-bottom: 1.25rem;
	border-radius: 2.5rem;
	font-family: var(--h-font);
}


.select2 {
	width: 100% !important;

	@media screen and (max-width: 1440px) {
		margin-left: 0rem;
	}
	@media screen and (max-width: 1440px) {
		width: 100% !important;
	}
}


.select2-dropdown {
	background: var(--dark-blue);
	border-radius:1.25rem;
	border-top:1px solid white;
	border-right:1px solid white;
	margin-top: 1.25rem;
	color:white;
	height:300px;
	font-family: var(--h-font);
}

.select2-container--open .select2-dropdown--below {
	padding:1.25rem;
	border-radius:1.25rem;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	border:0;
	background: var(--bubble-bg);
	padding:1rem;
	color:white;
}

.select2-results__options li {
	padding:1.25rem;
	border-radius: 1.25rem;
	margin-bottom: .5rem;
}

.select2-container--default .select2-selection--single {
	background:none;
	border:0;
	border-radius: 0;
	height:max-content;
}

.select2-selection__rendered {
	text-transform: uppercase;
	font-weight: 600;
	background: white;
	padding: 0.25rem 1rem;
	font-size: 1rem;
}

.select2-container--default .select2-results__option--selected,
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable{
	color:white;
	background: var(--bubble-bg);
}

.select2-container--default
.select2-selection--single
.select2-selection__rendered {
	color:white;
	background: var(--bubble-bg);
	padding:1rem 2rem;
	border-radius:1.25rem;
	border-top:1px solid white;
	border-left:1px solid white;
	box-shadow: inset 0 0 10px 0 white, 1px 1px 10px 0 rgba(255,255,255,0.5);
	backdrop-filter: blur(5px);
}

.select2-container--default
.select2-selection--single
.select2-selection__arrow
b {
	border-color: rgba(255,255,255,0.5) transparent transparent transparent;
	transform:translate(-20px, 15px) scale(2);
}
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
	border-color: transparent transparent #FFF transparent;
}

/*ABOUT PAGE*/
section.about-film-list {
	padding:2.5rem;
	ul {
		list-style-type: none;
		padding: 0;
		a {
			color:white;
			transition:.4s;
			&:hover {
				text-shadow:0px 0px 10px rgba(255,255,255, 0.8);
				text-decoration: underline;
			}
		}
	}
}

img.about-jfkl-logo {
	background: white;
	padding:1.25rem;
	width: 9rem;
	border-radius:1.25rem;
	margin-bottom: 1.25rem;
}



footer {
	background-image: url('images/footer.svg');
	background-size: 100%;
	background-position: top;
	background-repeat:no-repeat;
	position:relative;
	padding-bottom:2.5rem;
}


/*PROGRAMMES PAGE*/
.programmes-title.bubble {
	padding:2.5rem;
	grid-column: 1/-1;
}

article.programmes-info {
	grid-template-columns: repeat(2,1fr);
	h3 {
		margin-bottom: 0;
	}
	section {
		padding:2.5rem;
	}
}

.stamp-rally {
	grid-column: 1/2;
	@media screen and (max-width: 1024px) {
		grid-column: 1/-1;
	}
	img{
		margin-top: 1.25rem;
		border-radius: 0.625rem;
	}
}
.film-workshop {
	grid-column: 2/3;
	@media screen and (max-width: 1024px) {
		grid-column: 1/-1;
	}

	img{
		margin-top: 1.25rem;
		border-radius: 0.625rem;
	}

	ul {
		display:grid;
		list-style-type: none;
		grid-template-columns: repeat(2,1fr);
		margin: 0;
		padding: 0;
		column-gap:1.25rem;
	}
}



.special-programmes {
	h3 {
		grid-column: 1/-1;
	}
	h4 {
		margin-top:0;
	}
	gap:1.25rem;
	grid-column: 1/3;
	display:grid;
	grid-template-columns: repeat(2,1fr);

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

	.oma-visuals {
		display:flex;
		flex-wrap: no-wrap;
		flex-direction:row;
		max-width: 100%;
		gap:1.25rem;
		img {
			width:calc((100% - 2.5rem)/3);
		}
	}

	.samurai-visuals {
		display:flex;
		flex-wrap: no-wrap;
		flex-direction:row;
		max-width: 100%;
		gap:1.25rem;
		img {
			align-self: center;
			height:100%;
			width:calc((100% - 1.25rem)/2);
		}
	}

	.visuals-copyright {
		p, ul {
			font-size: .75rem;
			margin-bottom: 0.3125rem;
		}
		ul {
			list-style-type: none;
			margin: 0;
			padding: 0;
		}
	}

}

/*SPONSORS*/
.sponsors-container {
	max-width: 90rem;
	margin:auto;
	margin-top:10rem;
	background:white;
	padding:2.5rem;
	border-radius: 1.25rem;
	
	.row-1,
	.row-2,
	.row-3,
	.row-4 {
		column-gap: 3rem;
		display:flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		align-items: flex-start;
		margin-bottom: 1.25rem;
		@media screen and (max-width:480px) {
			flex-direction: column;
		}
	}

	.technical-supporter {
		display:grid;
		gap:1.25rem;
		h6 {
			grid-column: 1/-1;
		}
	}

	.media-partners,
	.collab-fest {
		display:grid;
		grid-template-columns: repeat(2,1fr);
		gap:1.25rem;

		align-items: center;
		@media screen and (max-width:480px) {
			grid-template-columns: 1fr;
		}
		h6 {
			grid-column: 1/-1;
		}

	}
	.sponsored-by {
		display:flex;
		align-items: center;
		flex-wrap:wrap;
		gap: 1.25rem;
		@media screen and (max-width:768px) {
			justify-content:flex-start;
			gap: 2rem;
		}
		@media screen and (max-width:480px) {
			flex-direction: column;
		}
	}

	h6 {
		font-family: var(--b-font);
		color:black; 
		width:100%;
		align-self: flex-start;
		margin-top:1.25rem;
		margin-bottom: 1.25rem;
	}

	img {
		height:40px;
		width:auto;
		align-self: center;
	}

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

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

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

	.media-partners img {
		height:45px;
	}

	.goggler {
		margin-left:-10px;
	}

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

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

	.kl-post {
		img {
			height:40px;
		}
	}
	img.wak2025{
		height:45px;
	}
	img.hinbus {
		height:55px;
		margin-top: -5px;
	}

	div.mitsubishi img {
		height:50px;
	}

	div.kino img {
		height:35px;
	}

	div.sushi-king img {
		height:65px;
	}

	div.jal img {
		height:53px;
	}
	div.koku img {
		height:35px;
	}

	div.hojichaya img {
		height:60px;
	}
}

.website-copyright {
	font-size: .75rem;
	text-align: center;
	color: white;
	margin: 1.25rem auto;
}

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

.mfp-bg {
	opacity:.9;
}