/*
VARIABLES
*/

:root {
	--deep-purple:#6A05E0;
	--pastel-purple:#BE9BFF;
	--off-white:#F2F2F4;
	--vibrant-orange:#FF4438;
	--gold:#D3A772;
	--white:#FFFFFF;
	--gdgrio: 'GDGrio','sans-serif';
	--jffkl:'JFFKL','sans-serif';
	--notojp:'Noto Sans JP', 'sans-serif';
	--fbody:1.25rem;
	--fheading:1.875rem;
}

/*
GLOBALS
*/

* {
	box-sizing: border-box;
}

html {
	background: var(--deep-purple);
}

body {
	font-family: 'GDGrio','sans-serif;';
}

button {
	background:none;
	border:0;
	cursor:pointer;
}

a {
	text-decoration: none;
	transition:.4s;
}

p {
	font-size: var(--fbody);
}

img {
	width:100%;
}

/*
HEADER
*/

.header-container {
	position: fixed;
	top:0;
	width: 100%;
	z-index: 999;
	transition: 0.4s;

	.logo {
		width:100%;
		display:flex;
		justify-content:space-between;
		align-items: center;
		a.backtofilmlist {
			opacity:0;
			color:var(--off-white);
			text-transform: uppercase;
			border:1px solid var(--off-white);
			border-radius: 5px;
			padding:.5rem 1rem;
			margin-right: 1rem;
			span {
				display:inline-block;
				margin-right: 2px;
				transform: translateY(-1px);
			}
			&:hover {
				background: var(--deep-purple);
			}
		}
	}

	&.scrolled {
		background:var(--deep-purple);
		&:hover {
			background:var(--vibrant-orange);
		}

		a.backtofilmlist {
			opacity:1;
		}

		@media screen and (max-width: 480px) {
			a.backtofilmlist {
				display: none;
			}
		}

		.logo img {
			transform:scale(0.65);
		}
		header {
			padding:.5rem 2rem;
		}
	}
}

header {
	display:flex;
	justify-content: space-between;
	align-items: center;
	
	max-width: 1440px;
	margin:auto;
	padding:2rem;

	transition:.8s;

	.menu-button img {
		width:2.5rem;
	}

	.logo img {
		transition: 0.4s;
	}

	@media screen and (max-width: 768px) {
		.logo img {
			width:10rem;	
		}
	}

	@media screen and (max-width: 480px) {
		padding:2rem 1rem;
	}
}

nav {
	display:grid;
	grid-template-rows: 1fr 1.5fr;
	row-gap:5px;
	position:fixed;
	top:0;
	right:0;
	z-index: 999;
	background:var(--off-white);
	height:100vh;
	width: 550px;
	padding: 5px;
	transition:0.4s;
	transform:translateX(550px);
	overflow-y:scroll;

	@media screen and (max-width: 550px) {
		width:100vw;
		transform:translateX(100vw);
	}
}

nav.open {
	transform:translateX(0);
}

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

	display: grid;
	gap: 5px;
	grid-template-columns: repeat(2,1fr);
	height: 100%;
	align-items:center;
	@media screen and (max-width: 768px) {
		font-size: var(--fbody);
	}

	li {
		height:100%;
		min-height:0;
		display:flex;
		align-items: center;

	}

	button {
		display: flex;
		align-items: top; /* Vertically center */
		justify-content: flex-start; /* Horizontally center */
	}

	button, a {
		background:var(--gold);
		width:100%;
		height:100%;
		border-radius:5px;
		padding:1rem;

		color:var(--off-white);
		text-transform: uppercase;
		font-size: var(--fheading);

		transition:.4s;

		&:hover {
			background: var(--vibrant-orange);
		}

		&.active {
			background:var(--deep-purple);
		}
	}
	@media screen and (max-width: 480px) {
		button, a{
			font-size: var(--fbody);
		}
	}
	
}

ul.date-list {
	margin: 0;
	padding:0;
	list-style-type: none;
	height:100%;
}

nav ul.date-list {
	display:grid;
	grid-template-columns: repeat(2,1fr);
	grid-template-rows: repeat(3,auto);
	gap: 5px;

	@media screen and (max-width: 500px) {
		li.film-frame {
			grid-template-columns: 1fr;
		}
	}
}

li.film-frame {
	padding:3rem 1.5rem;
	position:relative;
	border-radius: 5px;
	display:grid;
	gap: .75rem;
	grid-template-columns: repeat(2,1fr);
	color:var(--deep-purple);

	div.state {
		font-family: var(--jffkl);
		font-size:var(--fbody);
		text-transform: uppercase;
	}

	span.date {
		font-size:var(--fbody);
		display:block;
		margin-bottom: .5rem;
	}

	ul.locations {
		font-size: .9rem;
		margin: 0;
		padding: 0;
		list-style-type: none;
	}

	&::before {
		top:0;
	}

	&::after {
		bottom:0;
		background-position: bottom;
	}

	&::before,
	&::after {
		content:"";
		background-image:url(images/perforations.svg);
		background-size: 100%;
		position:absolute;
		left:0;
		width:100%;
		height:2.25rem;
	}
}	

li.film-frame#frame-kv {
	background:var(--deep-purple);
	color:var(--off-white);
}

li.film-frame#frame-jb{
	background:var(--vibrant-orange);
}

li.film-frame#frame-pg,
li.film-frame#frame-sbh {
	background:var(--gold);

}

li.film-frame#frame-kch {
	background: var(--pastel-purple);
}

button.menu-button {
	height:min-content;
	width: min-content;
}

.page-title-container,
.welcome-hero,
main,
footer {
	max-width: 1800px;
	margin:auto;
}

main {
	background: var(--off-white);
}

.page-title-container {
	background: url(images/bg-bird-head.svg);
	background-size:cover;
	width: 100%;           /* Or any desired width */
	height: auto;          /* Let the browser calculate height */
	aspect-ratio: 84 / 25;  
	display:flex;
	justify-content: center;
	margin-top:1rem;
	
	@media screen and (max-width: 768px) {
		margin-top:6rem;
	}
}

h1.page-title {
	text-transform: uppercase;
	text-align: center;
	align-self: flex-end;
	font-family: var(--jffkl);
	color:var(--vibrant-orange);
	margin: 0;
	a {
		color:var(--vibrant-orange);
	}
}

@media screen and (min-width:480px) {
	h1.page-title {
		font-size: 3rem;
	}
}

@media screen and (min-width:768px) {
	h1.page-title {
		font-size: 4rem;
	}
}

@media screen and (min-width:1024px) {
	h1.page-title {
		font-size: 5.75rem;
	}
}

.page-title-container-2 {
	max-width: 1440px;
	margin: auto;
	padding: 8rem 2rem 4rem 2rem;
	display:flex;

	h1.page-title {
		margin-top: 6rem;
		justify-self: flex-start;
		text-align: left;
	}

	@media screen and (max-width:768px) {
		padding: 6rem 2rem 2rem 2rem;
	}
}

/*
HOMEPAGE
*/
.welcome-hero {
	background:var(--off-white);
	display:grid;
	grid-template-rows: repeat(2,auto);
	img {
		transform:translateY(-7rem);
		width:100%;
		max-width: 1440px;
		justify-self: center;
		padding:1rem 2rem;
	}

	@media screen and (max-width: 1440px) {
		img {
			transform:translateY(-3rem);
			margin-bottom: 1rem;
			padding:1rem 3rem;
		}
	}
	
	@media screen and (max-width: 1024px) {
		img {
			transform:translateY(0rem);
			margin-bottom: 1rem;
		}
	}

	@media screen and (max-width: 480px) {
		img {
			transform:translateY(0rem);
			margin-bottom: 1rem;
		}
	}
}

.welcome-hero ul.date-list {
	display:flex;
	gap: 5px;
	li.film-frame {
		width:16rem;
	}
}

.marquee {
	width:100%;
	overflow:hidden;
	margin-bottom: 4rem;

	@media screen and (max-width: 480px) {
		margin-bottom: 2rem;
	}
}

.welcome-section {
	display:grid;
	background: var(--pastel-purple);
}

.welcome-heading {
	background:var(--deep-purple);
	background-image: url(images/bird-clip.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position-x: right;

	@media screen and (max-width: 768px) {
		background-image: none;
	}

	h1 {
		display:flex;
		span {
			font-family: var(--jffkl);
			display:inline-block;
			margin-right: 1rem;
			font-size: 3rem;
			align-self: center;
			transform:translateY(-5px);
		}
		max-width: 1440px;
		padding:1rem 2rem;
		margin:auto;
		color:var(--pastel-purple);
		align-items: center;
		font-size: var(--fheading);
	}

	@media screen and (max-width: 480px) {
		background-position-x: 100%;
		h1 {
			flex-direction: row;
			font-size: 1.25rem;
		}
	}

	@media screen and (max-width: 900px) {
		h1 span {
			display: none;
		}
	}
}

.welcome-container {
	display:grid;
	grid-template-columns: 2fr 1fr;
	max-width: 1440px;
	padding:2rem 2rem;
	margin:auto;
	gap: 2rem;

	.welcome-message {
		grid-row: 1/-1;
		color:var(--deep-purple);
		order:1;
		p {
			font-size: var(--fbody);
		}
	}

	.welcome-cta {
		order:2;

		div {
			display:grid;
			background:var(--deep-purple);
			border-radius: 5px;
			margin-bottom: 2rem;
			transition:.4s;
			h2 {
				font-size: var(--fbody);
				color:var(--off-white);
				padding:1rem;
				margin: 0;
				text-align: center;
			}
			&:hover {
				background: var(--vibrant-orange);
			}
		}
	}

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

		.welcome-message {
			order:2;
		}

		.welcome-cta {
			order:1;
		}
	}

	a.welcome-cta-btn {
		background: var(--deep-purple);
		color:var(--off-white);
		text-transform: uppercase;
		display:inline-block;
		width:100%;
		padding:1rem;
		margin:1rem 0 2rem;
		border-radius: 5px;
		font-size: var(--fbody);
		text-align: center;
		span {
			margin-left:1rem;
		}
		&:hover {
			background: var(--vibrant-orange);
		}
	}

	iframe {
		width:100%;
		aspect-ratio: 16/9;
		border-radius:5px;
	}


}

/*
FILM LIST
*/
.film-list {
	display:grid;
	grid-template-columns:repeat(4,1fr);
	max-width: 1440px;
	padding:2rem;
	margin:auto;
}

@media screen and (max-width: 1024px) {
	.film-list {
		grid-template-columns:repeat(3,1fr);
	}
}

@media screen and (max-width: 640px) {
	.film-list {
		grid-template-columns:repeat(2,1fr);
	}
}

@media screen and (max-width: 480px) {
	.film-list {
		grid-template-columns:repeat(1,1fr);
	}
}

.film-item {
	background: var(--pastel-purple);
	&:nth-of-type(2n) {
		background: var(--gold);
	}
	
	position:relative;
	display:flex;
	align-items: center;

	border-radius: 5px;
	border:1px solid white;

	h2 {
		position:absolute;
		font-size: var(--fbody);x
		text-align: center;
		color:var(--deep-purple);
		width:100%;
		padding:0 1.25rem;
		span.japTitle {
			font-family: var(--notojp);
			font-weight: normal;
		}
	}

	img {
		width:100%;
		aspect-ratio: 5/3.5;
		object-fit: cover;
		z-index: 1;
		transition:.4s;
	}

	img:hover {
		opacity: 0;
	}

	@media screen and (max-width: 640px) {
		flex-direction: column;
		margin-bottom: 1rem;
		h2 {
			position:relative;
		}
		img:hover{
			opacity:1;
		}
	}
}

@media screen and (max-width:768px ) {
	.film-item {
		h2 {
			font-size: 1rem;
		}
	}
}

.schedule-cta {
	background-color: var(--deep-purple);
	color: var(--off-white);	
	transition:.4s;

	&:hover {
		background-color: var(--vibrant-orange);
		color: var(--off-white);
	}

	display:flex;
	align-items: center;
	justify-content: center;
	height:100%;

	border-radius: 5px;
	border:1px solid white;

	h2 {
		align-self: center;
	}	
}

/*
SCHEDULE
*/
.schedule-container {
	display:grid;
	grid-template-columns: 1fr 2fr 1fr;
	max-width: 1440px;
	gap: 2rem;
	padding:2rem;
	margin:auto;
	h4,label {
		margin-top: 0;
		font-size: var(--fbody);
		text-transform: uppercase;
		color:var(--deep-purple);
		display:block;
		margin-bottom: 1rem;
	}
	select.schedule-select {
		width:100%;
	}

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

ul.schedule-tab {
	list-style-type: none;
	margin: 0;
	padding: 0;
	display:flex;
	flex-direction: column;

	a {
		padding:1rem;
		display:block;
		background: var(--pastel-purple);
		width:min-content;
		margin-bottom: 1rem;
		text-transform: uppercase;
		border-radius: 5px;
		color:var(--off-white);
		font-size: var(--fbody);
		&:hover, &.active {
			background: var(--deep-purple);
		}
	}
}

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

.schedule-titles-container.schedule-item-row {
	background: var(--deep-purple);
	border-radius: 5px;
	h4 {
		color:var(--off-white);
	}

	@media screen and (max-width: 1024px) {
		display: none !important;
	}
}

.schedule-item-row {
	border-radius: 5px;
	background: var(--pastel-purple);
	padding:1rem;
	margin-bottom: .25rem;

	.schedule-date:not(:first-of-type),
	.schedule-cinema:not(:first-of-type) {
		opacity: 0;
		@media screen and (max-width: 1024px) {
			display: none;
		}
	}
	.schedule-date-time p {
		font-size: 1.125rem;
	}
}

.schedule-container {
	.schedule-table {
		display: none;
	}
}

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

.schedule-table {
	color:var(--deep-purple);

	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;
			}
			.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.kokuho-cloudjoi-note {
	margin-top: 1.25rem;
	font-size: 1rem;
	a {
		color:var(--vibrant-orange);
		font-size: 1rem;
	}
}

.schedule-title h4 {
	margin: 0;
}

.schedule-table .schedule-pending {
	grid-template-columns: 1fr;
	text-align: center;
}

.schedule-note {
	display: block;
	margin-top: .25rem;
	font-size: .875em;
	font-style: italic;
}

.schedule-table a {
	color:var(--deep-purple);
	transition:.4s;
	&:hover {
		text-decoration: underline;
	}
}

.schedule-movie-info {
	background: var(--deep-purple);
	padding:1rem;
	border-radius: 5px;

	a {
		color:var(--pastel-purple);
	}

	h3 {
		font-size: var(--fbody);
	}

	p.credit {
		font-size: .875rem;
		margin-bottom: 0;
	}

	img {
		width:100%;
	}

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

	p.kokuho-cloudjoi-note {
		color:var(--pastel-purple);
	}
}

.select2 {
	margin-bottom: 1.25rem;
	border-radius: 5px;
}

.select2 {
	width: 100% !important;


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

	span.selection {
		overflow: hidden;
	}
}

.select2-dropdown {
	background: var(--pastel-purple);
	border-radius:5px;
	margin-top: 1rem;
	color:white;
	height:400px;
	font-size: var(--fbody);
	z-index: 99;
	overflow-y:scroll;
	border:1px solid white;
}

.select2-container--open .select2-dropdown--below {
	padding:1rem;
	border-radius:5px;
}

.select2-container--default .select2-search--dropdown .select2-search__field {
	border:0;
	background: var(--deep-purple);
	padding:1rem;
	margin-bottom: 1rem;
	color:white;
}

.select2-results__options li {
	padding:.5rem;
	border-radius: 5px;
	color:var(--deep-purple);
}

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

.select2-selection__rendered {
	text-transform: uppercase;
	font-weight: 600;
	background: red;
	padding: 0.5rem 1rem;
	font-size: var(--fbody);
}

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

.select2-container--default
.select2-selection--single
.select2-selection__rendered {
	color:white;
	background: var(--deep-purple);
	padding:1rem 2rem;
	border-radius: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;
}

.select2-container--default .select2-results>.select2-results__options {
	max-height: 400px;
}

.select2-container .select2-selection--single .select2-selection__rendered {
	white-space: unset;
}

/*
PROGRAMMES
*/
.yoji-yamada-section {
	display:grid;
	background: var(--off-white);
}

.yoji-yamada-heading,
.film-schedule-heading {
	background: var(--gold);
	background-image: url(images/bird-clip-white.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position-x: left;
	text-transform: uppercase;
	@media screen and (max-width: 768px) {
		background-image: none;
	}
	
	h1 {
		display:flex;
		span {
			font-family: var(--jffkl);
			display:inline-block;
			margin-right: 1rem;
			font-size: 3rem;
			align-self: center;
			transform:translateY(-5px);
		}
		max-width: 1440px;
		padding:1rem 2rem;
		margin:auto;
		color:var(--off-white);
		align-items: center;
		font-size: var(--fheading);

		@media screen and (min-width: 768px) and (max-width: 1600px) {
			margin-left: 6rem;
		}
	}

	@media screen and (max-width: 480px) {
		background-position-x: 100%;
		h1 {
			flex-direction: row;
			font-size: var(--fheading);
		}
	}

	@media screen and (max-width: 900px) {
		h1 span {
			display: none;
		}
	}
}

.yoji-yamada-container {
	display:grid;
	grid-template-rows: repeat(2,auto);
	gap: 2rem;

	max-width: 1440px;
	padding:2rem 2rem 6rem;
	margin:auto;
	
	@media screen and (max-width: 960px) {
		grid-template-columns: 1fr;
		padding:1rem 2rem 4rem;
		gap: 1rem;
	}

	.yoji-yamada-gifts {
		display:grid;
		grid-template-columns: repeat(4,1fr);
		gap:1rem;

		img {
			width:100%;
		}

		@media screen and (max-width: 768px) {
			grid-template-columns: repeat(2, 1fr);
			order:1;
			img {
				width:100%;
				height:auto;
			}
		}	
	}

	.yoji-yamada-message {
		color:var(--deep-purple);
		@media screen and (min-width: 1200px) {
			column-count: 1;
			column-gap:2rem;
		}
		p {
			font-size: var(--fbody);
			&:first-of-type {
				margin-top:0;
			}
		}
		
		@media screen and (max-width: 960px) {
			order:2;
		}
	}

	.yamada-video {
		order:3;
	}

	a {
		background: var(--deep-purple);
		color:var(--off-white);
		text-transform: uppercase;
		display:inline-block;
		width:100%;
		padding:1rem;
		margin:1rem 0;
		border-radius: 5px;
		font-size: var(--fbody);
		text-align: center;
		span {
			margin-left:1rem;
		}
		&:hover {
			background: var(--vibrant-orange);
		}
	}

	iframe {
		width:100%;
		aspect-ratio: 16/9;
		border-radius:5px;
	}
}

.special-screenings-section {
	display:grid;
	background: var(--pastel-purple);
}

.special-screenings-heading {
	background: var(--off-white);
	background-image: url(images/bird-clip.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position-x: right;

	@media screen and (max-width: 768px) {
		background-image: none;
	}
	
	h1 {
		display:flex;
		span {
			font-family: var(--jffkl);
			display:inline-block;
			margin-right: 1rem;
			font-size: 3rem;
			align-self: center;
			transform:translateY(-5px);
		}
		max-width: 1440px;
		padding:1rem 2rem;
		margin:auto;
		color:var(--deep-purple);
		align-items: center;
		font-size: var(--fheading);
	}

	@media screen and (max-width: 480px) {
		background-position-x: 100%;
		h1 {
			flex-direction: row;
			font-size: var(--fheading);
		}
	}

	@media screen and (max-width: 768px) {
		h1 span {
			display: none;
		}
	}
}

.special-screenings-container {
	display:grid;
	grid-template-columns: 1fr 1fr;
	max-width: 1440px;
	padding:2rem 2rem 3rem;
	margin:auto;
	gap: 4rem;
	align-items: start;

	&:last-of-type {
		padding:3rem 2rem 6rem;
		border-top:1px solid var(--deep-purple);
		align-items: center;
	}
	
	@media screen and (max-width: 960px) {
		grid-template-columns: 1fr;
		padding:2rem;
		gap: 1rem;

	}

	@media screen and (max-width: 480px) {
		padding:2rem;
		&:last-of-type {
			padding:2rem;
		}
	}

	.special-screenings-message {
		color:var(--deep-purple);
		order:1;
		p {
			font-size: var(--fbody);
			margin-bottom: 0;
		}

		a {
			background: none;
			display:inline;
			font-size: var(--fbody);
			padding:0;
			color:var(--deep-purple);
			text-decoration: underline;
			text-transform: unset;
			border-radius: 0;
			&:hover {
				background:none;
			}
		}
	}

	.special-screenings-renjishi-img {
		display:grid;
		grid-template-columns: repeat(2,1fr);
		gap: 5px;
		order:2;
		img {
			width:100%;
		}
	}

	.special-screenings-kokuho-img {
		display:grid;
		grid-template-columns: repeat(2,1fr);
		gap: 5px;
		order:1;
		justify-content:center;

		@media screen and (max-width: 960px) {
			order:2;
		}
		img {
			width:100%;
		}

		p.kokuho-programmes-credit {
			grid-column: 1/-1;
			font-size: 1rem;
			color: var(--deep-purple);
		}
	}

	a {
		background: var(--deep-purple);
		color:var(--off-white);
		text-transform: uppercase;
		display:inline-block;
		width:100%;
		padding:1rem;
		margin:1rem 0;
		border-radius: 5px;
		font-size: var(--fbody);
		text-align: center;
		span {
			margin-left:1rem;
		}
		&:hover {
			background: var(--vibrant-orange);
		}
	}
}


.girl-power-section {
	display:grid;
	background: var(--off-white);
}

.girl-power-heading {
	background: var(--deep-purple);
	background-image: url(images/bird-clip-white.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position-x: left;

	@media screen and (max-width: 768px) {
		background-image: none;
	}
	
	h1 {
		display:flex;
		span {
			font-family: var(--jffkl);
			display:inline-block;
			margin-right: 1rem;
			font-size: 3rem;
			align-self: center;
			transform:translateY(-5px);
		}
		max-width: 1440px;
		padding:1rem 2rem;
		margin:auto;
		color:var(--off-white);
		align-items: center;
		font-size: var(--fheading);
		@media screen and (min-width: 768px) and (max-width: 1600px) {
			margin-left: 6rem;
		}
	}

	@media screen and (max-width: 480px) {
		background-position-x: 100%;
		h1 {
			flex-direction: row;
			font-size: var(--fheading);
		}
	}

	@media screen and (max-width: 900px) {
		h1 span {
			display: none;
		}
	}
}

.girl-power-container {
	display:grid;
	grid-template-columns: repeat(4, 1fr);
	max-width: 1440px;
	padding:2rem 2rem 6rem;
	margin:auto;
	gap: 2rem;
	align-items: end;
	color:var(--deep-purple);

	@media screen and (max-width: 1200px) {
		grid-template-columns: repeat(3,1fr);
		gap:1rem;
		p {
			grid-column: 1/-1;
		}
	}

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

	p {
		font-size: var(--fbody);
		margin: 0;
	}

	img {
		width:100%;
	}

	a {
		background: var(--deep-purple);
		color:var(--off-white);
		text-transform: uppercase;
		display:inline-block;
		width:100%;
		padding:1rem;
		margin:1rem 0;
		border-radius: 5px;
		font-size: var(--fbody);
		text-align: center;
		span {
			margin-left:1rem;
		}
		&:hover {
			background: var(--vibrant-orange);
		}
	}
}

.film-workshop-section {
	display:grid;
	background: var(--pastel-purple);
}

.film-workshop-heading {
	background: var(--off-white);
	background-image: url(images/bird-clip.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position-x: right;

	@media screen and (max-width: 768px) {
		background-image: none;
	}
	
	h1 {
		display:flex;
		span {
			font-family: var(--jffkl);
			display:inline-block;
			margin-right: 1rem;
			font-size: 3rem;
			align-self: center;
			transform:translateY(-5px);
		}
		max-width: 1440px;
		padding:1rem 2rem;
		margin:auto;
		color:var(--deep-purple);
		align-items: center;
		font-size: var(--fheading);

		@media screen and (min-width: 768px) and (max-width: 1600px) {
			margin-right:6.5rem;
		}
	}

	@media screen and (max-width: 480px) {
		background-position-x: 100%;
		h1 {
			flex-direction: row;
			font-size: var(--fheading);
		}
	}

	@media screen and (max-width: 900px) {
		h1 span {
			display: none;
		}
	}
}


.film-workshop-container {
	display:grid;
	grid-template-columns: 2fr 1fr;
	max-width: 1440px;
	padding:2rem 2rem 6rem;
	margin:auto;
	gap: 2rem;

	img {
		width:100%;
		border-radius:5px;
	}

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

	.film-workshop-message {
		color:var(--deep-purple);
		p {
			font-size: var(--fbody);
		}
	}

	.film-workshop-gifts {
		display:grid;
		grid-template-rows: repeat(3, min-content);
		gap: 1rem;
	}

	a {
		background: var(--deep-purple);
		color:var(--off-white);
		text-transform: uppercase;
		display:inline-block;
		width:100%;
		padding:1rem;
		margin:1rem 0;
		border-radius: 5px;
		font-size: var(--fbody);
		text-align: center;
		span {
			margin-left:1rem;
		}
		&:hover {
			background: var(--vibrant-orange);
		}
	}
}

/*
IDV FILM PAGE
*/
.idv-film-page {
	background: var(--pastel-purple);

}

#backToFilmListCta {
	position:fixed;
	top:80%;
	left:0;
	background:var(--vibrant-orange);
	transform-origin: top left;
	transform:rotate(90deg) translateY(-100%);
	padding:1rem;
	text-transform: uppercase;
	color:var(--off-white);
	&:hover {
		transform:rotate(90deg) translateY(-110%) scale(1.1);
	}
	@media screen and (max-width: 768px) {
		display:none;
	}
}

.idv-film-heading {
	background: var(--off-white);
	background-image: url(images/bird-clip.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position-x: right;
	position: sticky;
	top:75px;
	z-index: 2;

	@media screen and (max-width: 768px) {
		background-image: none;
		top:64px;
	}
	
	h1 {
		max-width: 1440px;
		padding:1rem 2rem;
		margin:auto;
		color:var(--deep-purple);
		align-items: center;
		font-size: var(--fheading);
		span.japTitle {
			font-family: var(--notojp);
			display:block;
			font-size: var(--fbody);
			align-self: center;
			font-weight: normal;
			margin-top: .5rem;
		}
	}

	@media screen and (max-width: 768px) {
		h1 {
			font-size: 1.5rem;
		}
	}

	@media screen and (max-width: 480px) {
		background-position-x: 100%;
		h1 {
			flex-direction: row;
			font-size: 1.25rem;
			span {
				font-size: 1.25rem;
			}
		}
	}
}

.idv-film-container {
	background: var(--pastel-purple);

	display:grid;
	grid-template-columns: 2fr 1fr;
	gap: 2rem;
	max-width: 1440px;
	padding:2rem 2rem;
	margin:auto;
	gap: 4rem;

	h3 {
		text-transform: uppercase;
	}

	@media screen and (max-width: 1280px) {
		gap: 1.5rem;
	}

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

.film-schedule-container {
	background: var(--off-white);

	.schedule-table {
		max-width: 1440px;
		padding:2rem 2rem;
		margin:auto;
	}

	h4 {
		font-size: var(--fbody);
		text-transform: uppercase;
	}
}

section.trailer-controls {
	display:grid;
	grid-template-columns: repeat(2,1fr);
	margin-top: 1rem;
	gap: 1rem;

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

a.buy-tix,
.play-btn,
.close-trailer {
	background:var(--deep-purple);
	padding: 1rem;
	color:var(--off-white);
	font-size: var(--fbody);
	display:block;
	border-radius: 5px;
	width:100%;
	text-align: center;
	text-transform: uppercase;
	&:hover {
		background: var(--vibrant-orange);
	}
	svg {
		margin-left: .75rem;
	}

	@media screen and (max-width: 480px) {
		svg {
			display:none;
		}
	}
}

.idv-film-main {
	color:var(--deep-purple);

	.film-synopsis {
		margin-top: 2rem;
		p {
			text-indent: 3rem;
			&:last-of-type {
				margin: 0;
			}
		}
	}

	.film-gallery {
		margin-top: 2rem;
		width:100%;
		overflow: hidden;
		ul.gallery {
			list-style-type: none;
			margin: 0;
			padding: 0;
			display:flex;
			flex-wrap: wrap;
			gap: .5rem;
			
			img {
				height:150px;
				object-fit: cover;
			}


			@media screen and (max-width: 960px) {
				margin-bottom: 1rem;
			}

			@media screen and (max-width: 768px) {
				img {
					height:120px;
				}
			}

			@media screen and (max-width: 480px) {
				img {
					height:100px;
				}
			}

		}
	}
}

.idv-film-info-container {
	border-radius: 5px;
	padding:2rem;
	background: var(--deep-purple);
	position:sticky;
	top:10px;
	color:var(--pastel-purple);
	font-size: var(--fbody);

	@media screen and (min-width: 640px) and (max-width: 960px) {
		display: grid;
		grid-template-columns: repeat(2,1fr);
		gap: 1.5rem;
		div.details {
			margin: 0;
		}
	}

	h3 {
		font-size: var(--fbody);
		margin-bottom: .5rem;
	}

	div {
		margin: 2rem 0;
	}

	table {
		width:100%;
	}

	th {
		text-align: left;
	}

	td {
		text-align: right;
		font-size: 1.125rem;
	}

	ul {
		list-style-type: none;
		padding:0;
		margin: 0;
		font-size: 1.125rem;
	}

	.credit {
		font-size: .875rem;
		margin: 0;
	}
}

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

.close-trailer {
	display:none;
}


/*
ABOUT
*/
.about-container,
.tickets-container {
	display:grid;
	grid-template-columns: 2fr 1fr;
	gap: 3rem;
	max-width: 1440px;
	padding:2rem;
	margin:auto;
	color:var(--deep-purple);
	@media screen and (max-width:768px) {
		grid-template-columns: 1fr;
	}
}

.about-info,
.tickets-info {
	h3 {
		text-transform: uppercase;
		font-size: var(--fheading);
	}
	a {
		color:var(--vibrant-orange);
	}
}

.about-info {
	p {
		text-indent:3rem;
	}
}

.about-film-list {
	background: var(--pastel-purple);
	padding:2rem;
	height:min-content;
	border-radius: 5px;

	h3 {
		margin: 0;
		text-transform: uppercase;
		font-size: 2rem;
	}

	ul {
		display:grid;
		list-style-type: none;
		margin: 0;
		padding:0;
		margin-top: 1rem;
		li {
			margin-bottom: .25rem;
		}
	}

	a {
		color:var(--deep-purple);
		font-size: var(--fbody);
		&:hover {
			text-decoration: underline;
		}
	}
}

img.about-jfkl-logo {
	width: 200px;
	margin: 3rem 0 2rem 0;
	@media screen and (max-width: 768px) {
		margin:2rem 0;
	}

}

img.tickets-info-poster {
	width:100%;
	border-radius:5px;
}

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

	li {
		margin-bottom: 1rem;
	}

	a {
		background:var(--deep-purple);
		padding: 1rem;
		color:var(--off-white);
		font-size: var(--fbody);
		display:inline-block;
		border-radius: 5px;
		&:hover {
			background: var(--vibrant-orange);
		}
	}
}

/*
FOOTER
*/
footer {
	background: var(--off-white);
	img {
		width:auto;
	}
}

.bg-bird-tail {
	max-width: 1800px;
	width:100%;
}

.sponsors-container {
	max-width:1440px;
	margin:auto;
	padding:2rem;

	display:flex;
	flex-wrap:wrap;
	align-items: flex-start;
	justify-content: start;
	row-gap:2rem;

	h6 {
		font-size: .875rem;
	}
}

.sponsors-container > div {
	display:flex;
	flex-wrap:wrap;
	h6 {
		width:100%;
	}
}

.sponsors-container img {
	height:45px;
}


.collab-festivals {
	align-items: center;
	column-gap:4rem;
}

.supported-by,
.media-partner {
	width: 100%;
	display:flex;
	flex-wrap: wrap;
	align-items: center;
	column-gap:4rem;

	img {
		margin-bottom: 3rem;
	}
}


img#jfkl {
	height:6.25em;
	width:auto;
}

img#gsc {
	height:70px;
}

img#embassy {
	height:50px;
}


img#goggler {
	width:180px;
	height:auto;
}

img#wak {
	height:55px;
}

img#mitsu {
	height:63px;
}

img#tv3 {
	height:60px;
}

img#eighttv,
img#epulse {
	height:65px;
}

img#hojichaya {
	height:105px;
}

img#vida {
	height:95px;
}

img#kino{
	width:180px;
	height:auto;
}

img#koku {
	width:140px;
	height:auto;
}

img#canon {
	width:150px;
	height:auto;
}

img#manekineko {
	width:140px;
	height:auto;
}

.copyright {
	text-align: center;
	color:var(--pastel-purple);
}