html {
	/* scroll-behavior: smooth; */
}

body {
	background: #000;
	font-family: "Neue Haas Grotesk Display Pro", sans-serif;
	font-family: "neue-haas-grotesk-display", sans-serif;
	letter-spacing: -0.16px;
	color: #fff;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

@media screen and (max-width: 432px) {
	body {
		font-family: "neue-haas-grotesk-display", sans-serif;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	body {
		font-family: "neue-haas-grotesk-display", sans-serif;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	body {
		overflow-x: hidden;
	}
} 

svg:hover {
	cursor: pointer;
}

button:hover {
	cursor: pointer;
}

h1, 
h2, 
h3, 
h4, 
h5, 
h6 {
	text-transform: uppercase;
}

/* fade in animation */

.tag {
  opacity: 0;
  transform: translate(0, 0);
  transition: all 1.5s;
}

.tag.visible {
  opacity: 1;
  transform: translate(0, 0);
}

@keyframes fade {
  0% {
    opacity: 0;
    transform: translate(0, 1rem);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0);
  }
}

@media (prefers-reduced-motion: no-preference) {
  .in-view {
    animation: fade 1s 0.1s both;
  }

  .not-in-view {
    opacity: 0;
  }
}

@keyframes fade-move-content-top {
	from {
		opacity: 0;
		transform: translateY(-2vh);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

div .section1-header {
	animation-name: fade-move-content-top;
	animation-duration: 1s;
}

@keyframes fade-content-center {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

div .section1-projectTitle {
	animation-name: fade-content-center;
	animation-duration: 1s;
}

/* end of animation */

/* cover */

.main-wrapper {

}


#top-bar {
	top: -150px;
	position: fixed;
	left: auto;
	right: 2vw;
	transition: 0.4s;
	z-index: 98;
	cursor: pointer;
}

.top-bar {
	width: 50%;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	height: 50px;
}

a {
	text-decoration: none;
	color: #fff;
}

#Nav-Hamburger {
	top: -50px;
	opacity: 0;
	transition: 0.4s;
	z-index: 98;
}

.menu {
	position: fixed;
	left: auto;
	right: 2vw;
	top: 2vw;
	z-index: 98;
	transition: 2s;
}

@media screen and (max-width: 432px) {
	.menu {
		right: 6vw;
	}
}

.menu-cursor: hover {
	cursor: pointer;
}

.menu-overlay {
	width: 0vw;
	height: 100vh;
	background: #E81200;
	align-items: center;
	justify-items: center;
	position: fixed;
	display: grid;
	transition: 0.2s;	
	z-index: 99;
	transition: 0.28s;
	overflow: hidden;
}

@media screen and (max-width: 432px) {
	.menu-overlay {
		height: 100dvh;
	}
}

.menu-container {
	width: 40vw;
	display: none;
	overscroll-behavior: contain;
}

@media screen and (max-width: 432px) {
	.menu-container {
		width: 80vw;
		height: 92vh;
		align-items: center;
		justify-content: space-between;
		display: grid;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.menu-container {
		width: 69vw;
		height: 72vh;
	}
}

.menu-overlay-header {
	display: flex;
	justify-content: space-between;
	margin-bottom: 72px;
	align-items: center;
	justify-items: center;
}

@media screen and (max-width: 432px) {
	.menu-overlay-header {
		position: relative;
		width: 80vw;
		margin-bottom: 0;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.menu-overlay-header {
		display: flex;
		align-items: center;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.menu-overlay-header {
		display: flex;
		align-items: flex-start;
		margin-bottom: 40px;
	}
}

.menu-overlay-header--logo svg {
	width: 6vw;
}

@media screen and (max-width: 432px) {
	.menu-overlay-header--logo svg {
		width: 20vw;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.menu-overlay-header--logo svg {
		width: 12vw;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.menu-overlay-header--logo svg {
		width: 11vw;
	}
}

.menu-overlay-header--logo svg path {
	fill: #000000;
}

.menu-overlay-header--close {

}

@media screen and (max-width: 432px) {
	.menu-overlay-header--close {
		
	}
}

.menu-section--item {
	color: #000;
	leading-trim: both;
	text-edge: cap;
	font-size: 4vw;
	font-style: normal;
	font-weight: 900;
	line-height: 3.2vw;
	letter-spacing: -1.6px;
	text-transform: uppercase;
}

@media screen and (max-width: 432px) {
	.menu-section--item {
		width: 80vw;
		font-size: 12vw;
		line-height: 11vw;
		font-weight: 900;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.menu-section--item {
		font-size: 64px;
		line-height: 56px;
		letter-spacing: -3px;
		font-weight: 900;
		leading-trim: both;
		text-edge: cap;
		font-style: normal;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.menu-section--item {
		font-weight: bolder;
		line-height: 3.4vw;
	}
}

.link-menu {
	text-decoration: none;
	color: #000;
	transition: 0.4s;
}

.link-menu:hover {
	margin-left: 10px;
}

.menu-overlay-sections {
	margin-bottom: 72px;
}

@media screen and (max-width: 432px) {
	.menu-overlay-sections {
		margin-bottom: 0;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.menu-overlay-sections {
		margin-bottom: 0;
	}
}

.bt-secondary-larger {
	padding: 8px 24px;
	justify-content: center;
	align-items: center;
	background: none;
	border-radius: 50px;
	border: 1px solid #000;
	font-size: 0.8vw;
	font-weight: 700;
	line-height: 16px; /* 100% */
	letter-spacing: -0.48px;
	text-transform: uppercase;
	transition: 0.4s;
}

@media screen and (max-width: 432px) {
	.bt-secondary-larger {
		font-size: 3vw;
		line-height: 3vw;
		letter-spacing: -0.48px;
		color: #000;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.bt-secondary-larger {
		font-size: 12px;
		padding: 4px 16px;
		color: #000;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.bt-secondary-larger {
		color: #000;
		font-size: 10px;
		line-height: 10px;
		padding: 4px 16px;
	}
}

@media only screen 
	and (min-width: 1024px) 
	and (max-width: 1280px)
	and (orientation: landscape) {
	.bt-secondary-larger {
		color: #000;
	}
}

.bt-secondary-larger:hover {
	background: #000;
	color: #fff;
}

.menu-overlay-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

@media screen and (max-width: 432px) {
	.menu-overlay-footer {
		width: 80vw;
		align-items: flex-end;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.menu-overlay-footer {

	}
}

.bt-tertiary {
	padding: 8px 16px;
	justify-content: center;
	align-items: center;
	border-radius: 50px;
	background: #FF2D1B;
	border: none;
	font-size: 0.8vw;
	font-weight: 700;
	line-height: 16px; /* 100% */
	letter-spacing: -0.32px;
	text-transform: uppercase;
	transition: 0.4s;
	margin-right: 8px;
	text-decoration: none;
	color: #000;
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.bt-tertiary {
		font-size: 12px;
		padding: 8px 16px;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.bt-tertiary {
		font-size: 8px;
	}
}

.bt-tertiary svg {
	margin-left: 4px;
}

.bt-tertiary svg path {
	fill: #000;
	transition: 0.4s;
}

.bt-tertiary:hover svg path {
	fill: #fff;
}

@media screen and (max-width: 432px) {
	.bt-tertiary svg {
		width: 8px;
		height: 8px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.bt-tertiary svg {
		display: none;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.bt-tertiary svg {
		display: none;
	}
}

@media only screen 
	and (min-width: 1024px) 
	and (max-width: 1280px)
	and (orientation: landscape) {
	.bt-tertiary svg {
		display: none;
	}
}

@media screen and (max-width: 432px) {
	.bt-tertiary {
		font-size: 3vw;
		letter-spacing: 0;
	}
}

.bt-tertiary:hover {
	padding: 8px 16px;
	background: #000;
	color: #fff;
	font-weight: 700;
}

.bt-tertiary--red {
	padding: 8px 16px;
	justify-content: center;
	align-items: center;
	border-radius: 50px;
	background: #FF0000;
	border: none;
	font-size: 0.8vw;
	font-weight: 700;
	line-height: 16px; /* 100% */
	letter-spacing: -0.32px;
	text-transform: uppercase;
	transition: 0.4s;
	margin-right: 8px;
	text-decoration: none;
	color: #000;
	border: 1px solid #FF0000;
}

@media screen and (max-width: 432px) {
	.bt-tertiary--red {
		font-size: 3vw;
		letter-spacing: 0;
		margin-right: 0;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.bt-tertiary--red {
		font-size: 10px;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.bt-tertiary--red {
		font-size: 10px;
	}
}

.bt-tertiary--red:hover {
	border: 1px solid #FF0000;
	background: none;
	color: #FF0000;
}

.bt-tertiary--red-noFill {
	padding: 8px 16px;
	justify-content: center;
	align-items: center;
	justify-items: center;
	border-radius: 50px;
	background: none;
	border: 1px solid #FF0000;
	font-size: 0.8vw;
	font-weight: 700;
	line-height: 16px; /* 100% */
	letter-spacing: -0.32px;
	text-transform: uppercase;
	transition: 0.4s;
	margin-right: 8px;
	text-decoration: none;
	color: #FF0000;
}

.bt-tertiary--red-noFill svg {
	margin-left: 4px;
}

.bt-tertiary--red-noFill svg path {
	fill: #FF0000;
	transition: 0.4s;
}

.bt-tertiary--red-noFill:hover svg path {
	fill: #000;
}

@media screen and (max-width: 432px) {
	.bt-tertiary--red-noFill {
		font-size: 3vw;
		letter-spacing: 0;
	}
}

@media screen and (max-width: 432px) {
	.bt-tertiary--red-noFill svg {
		width: 8px;
		height: 8px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.bt-tertiary--red-noFill {
		font-size: 10px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.bt-tertiary--red-noFill svg {
		display: none;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.bt-tertiary--red-noFill {
		font-size: 10px;
	}
} 

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.bt-tertiary--red-noFill svg {
		display: none;
	}
}

@media only screen 
	and (min-width: 1024px) 
	and (max-width: 1280px)
	and (orientation: landscape) {
	.bt-tertiary--red-noFill svg {
		display: none;
	}
}

.bt-tertiary--red-noFill:hover {
	background: #FF0000;
	color: #000;

}

.menu-footer--year {
	color: #000;
	font-size: 0.8vw;
	font-weight: 700;
	line-height: 16px; /* 100% */
	letter-spacing: -0.48px;
	text-transform: uppercase;
}

@media screen and (max-width: 432px) {
	.menu-footer--year {
		font-size: 3vw;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.menu-footer--year {
		font-size: 12px;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.menu-footer--year {
		font-size: 8px;
	}
}

.menu-footer--socials {

}

@media screen and (max-width: 432px) {
	.menu-footer--socials {
		width: 50vw;
		display: flex;
		flex-wrap: wrap;
		gap: 1vh;
	}
}

/* section 1 - intro */

#cover {
	transition: 0.4s;
}

.section1 {	
	width: 100vw;
	height: 100vh;
	display: grid;
	align-items: center;
	text-align: center;
	top: 0;
	z-index: 42;
	position: sticky;
	background: #000;
}

@media screen and (max-width: 432px) {
	.section1 {
		height: 100svh;
		align-items: flex-start;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section1 {
		height: 100svh;
		width: 100%;
	}
}

@media only screen 
	and (min-width: 1024px) 
	and (max-width: 1200px)
	and (orientation: landscape) {
	.section1 {
		height: 100svh;
		width: 100%;
	}
}

.section1-header {
	margin: auto;
	margin-bottom: 32%;
	display: flex;
	font-size: 16px;
	font-weight: 900;
	line-height: 16px;
	color: #FF0000;
	width: 50%;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

@media screen and (max-width: 432px) {
	.section1-header {
		position: absolute;
		width: 94vw;
		margin-top: 0;
		margin-bottom: 0;
		margin-left: 3vw;
		margin-right: 3vw;
		top: auto;
		bottom: 2vh;
		font-size: 14px;
		color: #FF0000;
		letter-spacing: 0;
		align-items: flex-end;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section1-header {
		font-size: 10px;
		bottom: 0;
		width: 50vw;
		line-height: 11px;
		margin-bottom: auto;
		color: #FF0000;
	}
}

.section1-header-red {
	margin: auto;
	margin-bottom: 32%;
	display: flex;
	font-size: 16px;
	font-weight: 900;
	line-height: 16px;
	color: #FF0000;
	width: 50%;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

@media screen and (max-width: 432px) {
	.section1-header-red {
		position: relative;
		width: 94vw;
		margin-top: 3vw;
		margin-bottom: auto;
		margin-left: 3vw;
		margin-right: 3vw;
		font-size: 14px;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section1-header-red {
		font-size: 10px;
		line-height: 11px;
		margin-top: 24px;
		bottom: 0;
		width: 50vw;
		padding-bottom: 64px;
	}
}

.section1-header-title {
	width: 25%;
	min-width: 270px;
	text-align: justify;
	text-align-last: justify;
}

@media screen and (max-width: 432px) {
	.section1-header-title {
		min-width: 60vw;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section1-header-title {
		min-width: 30vw;
	}
}

.section1-header-year {
	width: 25%;
	text-align: right;
	margin-left: auto;
}

.section1-projectTitle {
	width: 90%;
	position: absolute;
	z-index: 1;
	right: 5%;
	left: 5%;
}

@media screen and (max-width: 432px) {
	.section1-projectTitle {
		display: none;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section1-projectTitle {
		width: 40vw;
	}
}

.section1-projectTitle svg {
	cursor: default;
}

.section1-projectTitle svg path {
	width: 100%;
	height: auto;
	fill: #FF0000;
	/* filter: drop-shadow(0px 0px 25px #D30000); */
}

.section1-videoTitle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	position: absolute;
}

@media screen and (max-width: 432px) {
	.section1-videoTitle {
		display: none;
	}
}

.section1-videoTitle-mobile {
	display: none;
}

@media screen and (max-width: 432px) {
	.section1-videoTitle-mobile {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		position: absolute;
		top: 6vh;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section1-videoTitle video {
		display: none;
	}
	.section1-videoTitle {
		display: flex;
		width: 100%;
		height: 160px;
		background-image: url("../assets/imgs/logo2.svg");
		background-size: 69%;
		background-repeat: no-repeat;
		background-position: center;
	}
}

.video-title {
	width: 88vw;
	height: auto;
	object-fit: cover;
}

@media screen and (max-width: 432px) {
	.video-title {
		display: none;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.video-title {
		width: 80vw;
	}
}

@media screen and (max-width: 432px) {
	.video-title-mobile {
		width: 88vw;
		height: auto;
		object-fit: cover;
	}
}

.section1-footer {
	margin: auto;
	margin-top: 72px;
	display: flex;
	font-size: 16px;
	font-weight: 900;
	line-height: 16px;
	color: #FF0000;
	width: 50%;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	align-items: center;
}

@media screen and (max-width: 432px) {
	.section1-footer {
		position: relative;
		width: 94vw;
		margin-top: auto;
		margin-bottom: 12vh;
		margin-left: 3vw;
		margin-right: 3vw;
		align-items: flex-end;
		color: #FF0000;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section1-footer {
		width: 50vw;
		margin-bottom: 0;
		margin-top: 64px;
		font-size: 10px;
		color: #FF0000;
	}
}

.section1-footer-credits {
	width: 160px;
	text-align: justify;
	text-align-last: justify;
}

@media screen and (max-width: 432px) {
	.section1-footer-credits {
		width: 56vw;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section1-footer-credits {
		width: 12vw;
		line-height: 11px;
	}
}

.section1-footer-instruction {
	width: 25%;
	text-align: right;
	margin-left: auto;
}

.section1-footer-instruction svg path {
	fill: #FF0000;
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section1-footer-instruction svg {
		height: 14px;
		width: auto;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section1-footer-instruction svg path {
		fill: #FF0000;
	}
}

@media screen and (max-width: 432px) {
	.section1-footer-instruction {
		width: 100%;
		margin-bottom: 1vh;
		display: none;
	}
}

/* section 2 - video */

.section2 {
	width: 100vw;
	height: 100vh;
	background: #000;
	display: flex;
	align-items: center;
	position: relative;
	z-index: 80;
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section2 {
		padding-bottom: 0;
	}
}

.section2-video {
	width: 100vw;
	height: 100vh;
	position: absolute;
	object-fit: cover;
}

.section2-img-fallback {
	background-image: url("../assets/imgs/mobile-trailer-bg.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	display: none;
}

@media screen and (max-width: 432px) {
	.section2-video video {
		display: none;
	}
	.section2-video {
		background-image: url("../assets/imgs/mobile-trailer-bg.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section2-video video {
		display: none;
	}
	.section2-video {
		background-image: url("../assets/imgs/mobile-trailer-bg-landscape.jpg");
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
	}
}

.video {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	opacity: 0.5;
}

.section2-video-content {
	width: 69vw;
	display: grid;
	align-items: right;
	justify-content: flex-end;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 432px) {
	.section2-video-content {
		width: 80vw;
		align-items: left;
		justify-content: flex-start;
		gap: 4vh;
	}
}

.section2-video-content-title {
	color: #FFE817;
	text-align: justify;
	leading-trim: both;
	text-edge: cap;
	font-size: 6vw;
	font-weight: 700;
	line-height: 5vw;
	letter-spacing: -0.32px;
	text-transform: uppercase;
	z-index: 80;
}

@media screen and (max-width: 432px) {
	.section2-video-content-title {
		font-size: 12vw;
		line-height: 12vw;
	}
}

.section2-button {
	text-align: center;
	left: auto;
	right: 0;
	display: flex;
	align-items: flex-end;
	justify-content: flex-end;
	z-index: 95;
}

@media screen and (max-width: 432px) {
	.section2-button {
		left: 0;
		right: auto;
		justify-content: normal;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section2-button {
		margin-top: 6px;
		align-items: flex-end;
	}
}

.bt-trailer {
	position: absolute;
	border: 2px solid #FFE817;
	background: #FFE817;
	color: #0C0C0C;
	border-radius: 50px;
	padding: 0.6vw	6vw;	
	font-size: 0.8vw;
	font-weight: 700;
	letter-spacing: -0.16px;
	text-transform: uppercase;
	transition: 0.4s;
	align-items: center;
	display: flex;
	gap: 16px;
	margin-bottom: 0.7vh;
}

@media screen and (max-width: 432px) {
	.bt-trailer {
		font-size: 4vw;
		position: relative;
		margin-bottom: 0;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.bt-trailer {
		font-size: 12px;
		position: absolute;
		padding: 4px 24px;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.bt-trailer {
		font-size: 10px;
		padding: 0.6vw 4vw;
	}
}

.bt-trailer:hover {
	background: none;
	border: 2px solid #FFE817;
	color: #FFE817;
	cursor: pointer;
}

.bt-trailer:hover svg path {
	fill: #FFE817;
}

/* trailer page */

#trailer-video-overlay {
	width: 100vw;
	height: 100vh;
	display: grid;
	align-items: center;
	justify-items: center;
	background: #000;
	z-index: 1;
	overflow: hidden;
	text-align: center;
}

.trailer-container {
	width: 100vw;
	height: 90vh;
}

.trailer-container iframe {
	width: 100%;
	height: 100%;
}

.trailer {
	width: 100%;
	height: auto;
}

.button-container {
	position: absolute;
	top: 4vh;
	left: 2vw;
	z-index: 99;
}

@media screen and (max-width: 432px) {
	.button-container {
		width: 94vw;
		top: 4vh;
		margin-right: auto;
		margin-left: auto;
	}
}

.button-close {
	color: #fff;
	background: none;
	border-radius: 50px;
	border: 1px solid #fff;
	font-size: 0.8vw;
	font-weight: 700;
	line-height: 16px; /* 100% */
	letter-spacing: -0.48px;
	text-transform: uppercase;
	padding: 2px 24px;
	justify-content: center;
	align-items: center;
	transition: 0.4s;
}

@media screen and (max-width: 432px) {
	.button-close {
		font-size: 3vw;
		margin-left: 6vw;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.button-close {
		font-size: 10px;
		margin-left: 4vw;
	}
}

.button-close:hover {
	border: 1px solid #fff;
	background: #fff;
	color: #000;
}

/* v1

.video:hover {
	cursor: url("../assets/imgs/play-video.svg"), auto;
}

.section2-paragraph {
	margin: auto;
	margin-bottom: 96px;
	z-index: 94;
	width: 148px;
	text-align: justify;
	font-size: 16px;
	font-weight: 900;
	line-height: 16px;
	color: #4B5560;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

*/

/* section 3 - story */

.section3 {
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 80;
	background: #000;
	background-image: url("../assets/imgs/colorida-concept-background-v2.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	margin-top: 24vh;
}

@media screen and (max-width: 432px) {
	.section3 {
		background-size: cover;
		background-image: url("../assets/imgs/colorida-concept-background.jpg");
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section3 {
		background-size: cover;
		background-image: url("../assets/imgs/colorida-concept-background.jpg");
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section3 {
		margin-top: 0;
	}
}

.section3-content-short {
	position: absolute;
	width: 28vw;
	font-size: 32px;
	font-weight: 600;
	line-height: 30px;
	-webkit-font-smoothing: antialiased;
	color: #fff;
	letter-spacing: -0.01em;
	z-index: 69;
}

@media screen and (max-width: 432px) {
	.section3-content-short {
		width: 80vw;
		font-size: 6vw;
		line-height: 6vw;
		font-weight: 600;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section3-content-short {
		width: 69vw;
		font-weight: 600;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section3-content-short {
		font-size: 16px;
		line-height: 18px;
		width: 40vw;
		margin-bottom: 16px;
	}
}

@media only screen 
	and (min-width: 1024px) 
	and (max-width: 1280px)
	and (orientation: landscape) {
	.section3-content-short {
		width: 60vw;
		font-weight: 600;
	}
}

.section3-bt-story {
	padding: 8px 24px;
	font-size: 14px;
	font-weight: 600;
	line-height: 14px;
	color: #48DEFF;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	border-radius: 50px;
	border: 1px solid #48DEFF;
	background-color: transparent;
	transition: 0.3s;
	text-decoration: none;
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section3-bt-story {
		font-size: 10px;
		padding: 8px 16px;
	}
}

.section3-bt-story:hover {
	background: #48DEFF;
	color: #000;
}

#story-main {
	align-items: flex-start;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.72);
	display: none;
	align-items: flex-start;
	z-index: 99;
	transition: 0.24s;
	position: fixed;
	top: 0;
	left: 0;
	overflow: auto;
	overscroll-behavior: contain;
}

.story-overlay--container {
	width: 40vw;
	margin-top: 16vh;
	margin-left: auto;
	margin-right: auto;
  -webkit-animation-name: animatetop;
  -webkit-animation-duration: 0.4s;
  animation-name: animatetop;
  animation-duration: 0.4s	
}

@media screen and (max-width: 432px) {
	.story-overlay--container {
		width: 80vw;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.story-overlay--container {
		width: 56vw;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.story-overlay--container {
		width: 56vw;
	}
}

.story-overlay--ending {
	width: 64vw;
	margin-top: 0vh;
	margin-bottom: 8vh;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 432px) {
	.story-overlay--ending {
		width: 100%;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.story-overlay--ending {
		width: 88%;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.story-overlay--ending {
		width: 64vw;
	}
}

.story-overlay--ending figure img {
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.story-overlay--ending figcaption {
	width: 64%;
	margin-top: 1rem;
	margin-left: auto;
	margin-right: auto;
}

@media screen and (max-width: 432px) {
	.story-overlay--ending figcaption {
		width: 100%;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.story-overlay--ending figcaption {
		width: 72%;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.story-overlay--ending {
		width: 64vw;
	}
}

/* Add Animation */
@-webkit-keyframes animatetop {
  from {top:-300px; opacity:0} 
  to {top:0; opacity:1}
}

@keyframes animatetop {
  from {margin-top:14vh; opacity:0}
  to {margin-top:16vh; opacity:1}
}

.story-overlay--close {
	position: fixed;
	right: 80px;
	margin-top: 80px;
	z-index: 80;
}

@media screen and (max-width: 432px) {
	.story-overlay--close {
		right: 10vw;
		margin-top: 4vh;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.story-overlay--close {
		margin-top: 4vh;
	}
}

.story-overlay--close button {
	color: #DBDBDB;
	border: 1px solid #DBDBDB;
}

@media screen and (max-width: 432px) {
	.story-overlay--close button {
		font-size: 3vw;
		background: #000;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.story-overlay--close button {
		font-size: 10px;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.story-overlay--close button {
		font-size: 10px;
		padding: 8px 16px;
	}
}

.story-overlay--close button:hover {
	background: #DBDBDB;
	color: #000;
	border: 1px solid #DBDBDB;
}

.story-overlay--title {
	position: relative;
	font-size: 66px;
	font-weight: 900;
	line-height: 54px;
	color: #f00;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-align: justify;
	text-align-last: justify;
	margin-bottom: 8vw;
	transition: 0.4s;
}


@media screen and (max-width: 432px) {
	.story-overlay--title {
		font-size: 14vw;
		line-height: 12vw;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.story-overlay--title {
		font-size: 40px;
		line-height: 38px;
	}
}

.story-overlay--content {
	color: #D8D8D8;
	font-size: 32px;
	font-style: normal;
	font-weight: 420;
	line-height: 38px;
	overflow: scroll;
	transition: 0.4s;
	margin-bottom: 72px;
}

@media screen and (max-width: 432px) {
	.story-overlay--content {
		font-size: 6vw;
		line-height: 7vw;
		letter-spacing: 0;
		color: #DBDBDB;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.story-overlay--content {
		font-size: 24px;
		line-height: 28px;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.story-overlay--content {
		font-size: 16px;
		line-height: 18px;
	}
}

.photo-block {
	width: 69vw;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 8vh;
	text-align: center;
}

.photo-block img {
	width: 100%;
	object-fit: contain;
}

h4 {
	text-transform: none;
	font-weight: 600;
	letter-spacing: 0;
	width: 80%;
	margin-left: auto;
	margin-right: auto;
}

/* section 4 */

.section4 {
	width: 100vw;
	height: 100vh;
	margin-top: 16vh;
	margin-bottom: 8vh;
	display: flex;
	align-items: center;
	background: #050505;
	z-index: 90;
	position: relative;
	background-image: linear-gradient(rgba(0,0,0,1), rgba(5,5,5,1), rgba(0,0,0,1));
}

@media screen and (max-width: 432px) {
	.section4 {
		margin-bottom: 0;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section4 {
		margin-top: 0;
		margin-bottom: 4vh;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section4 {
		height: 148vh;
		margin-top: 16vh;
	}
}

.section4-title {
	font-size: 16px;
	font-weight: 700;
	line-height: 16px;
	color: #DBDBDB;
	width: 16vw;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	position: absolute;
	z-index: 1;
	margin-left: 8vw;
	text-align: justify;
	text-align-last: justify;
}

@media screen and (max-width: 432px) {
	.section4-title {
		font-size: 3vw;
		line-height: 3vw;
		width: 64vw;
		top: 2vh;
		left: auto;
		right: auto;
		margin-left: 8vw;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section4-title {
		font-size: 16px;
		line-height: 16px;
		width: 40vw;
		top: 12vh;
		left: auto;
		right: auto;
		margin-left: 8vw;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section4-title {
		font-size: 12px;
		margin-top: 2vh;
	}
}

.section4-gallery {
	overflow: auto;
	display: inline-flex;
	padding: 8vw;
	z-index: 95;
}

@media screen and (max-width: 432px) {
	.section4-gallery {
		padding: 0;
		overflow: scroll;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section4-gallery {
		padding: 0;
		overflow: scroll;
	}
}

.section4-gallery--end {
	margin-right: 4vw;
}

.section4-gallery--artwork-thumbnail {
	padding: 2vw;
	background: #000;
	transform: translateX(24vw);
}

@media screen and (max-width: 432px) {
	.section4-gallery--artwork-thumbnail {
		transform: translateX(4vw);
		padding: 2vw;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section4-gallery--artwork-thumbnail {
		transform: translateX(4vw);
		padding: 2vw;
	}
}

.artwork-thumbnail {
	height: 72vh;
	width: auto;
	border-radius: 16px;
	background: #000;
	border: 10px solid transparent;
	transition: 0.3s;
}

@media screen and (max-width: 432px) {
	.artwork-thumbnail {
		height: 56vh;
		width: auto;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.artwork-thumbnail {
		height: 40vh;
		width: auto;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.artwork-thumbnail {
		width: 20vw;
	}
}

.artwork-thumbnail:hover {
	border-radius: 0px;
	border: 10px solid #D8D8D8;
	-webkit-transform: scale(1.01);
	transform: scale(1.01);
}

.section4-subnav {
	position: absolute;
	z-index: 99;
	gap: 16px;	
	display: inline-flex;
	justify-content: flex-end;
	right: 40px;
	margin-top: 90vh;
}

@media screen and (max-width: 432px) {
	.section4-subnav {
		display: none;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section4-subnav {
		display: none;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section4-subnav {
		display: none;
	}
}

.section4-chevron-2 {
		display: none;
		position: absolute;
		height: 8px;
		background: ;
}

.section4-chevron-2 svg path {
	fill: #DBDBDB;
}

@media screen and (max-width: 432px) {
	.section4-chevron-2 {
		display: block;
		position: absolute;
		margin-left: 8vw;
		margin-top: 10vh;
		top: 0;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section4-chevron-2 {
		display: block;
		margin-left: 8vw;
		bottom: 12vh;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section4-chevron-2 {
		display: none;
	}
}


/* section 5 */

.section5 {
	width: 100vw;
	display: grid;
	justify-items: center;
	z-index: 77;
	position: relative;
	margin-bottom: 24vh;
	margin-top: 24vh;
}

@media screen and (max-width: 432px) {
	.section5 {
		margin-top: 8vh;
		margin-bottom: 8vh;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section5 {
		margin-top: 0;
		margin-bottom: 8vh;
	}
}


.section5-book-header {
	width: 30vw;
	position: absolute;
	color: #0047FF;
	z-index: 82;
}

@media screen and (max-width: 432px) {
	.section5-book-header {
		width: 80vw;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section5-book-header {
		width: 40vw;
	}
}

.section5-book-title {
	width: 10vw;
	margin-bottom: 10vh;
	font-size: 1vwpx;
	font-weight: 900;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-align: justify;
}

@media screen and (max-width: 432px) {
	.section5-book-title {
		font-size: 4vw;
		line-height: 4vw;
		margin-left: auto;
		margin-right: auto;
		width: 80vw;
		margin-bottom: 2vh;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section5-book-title {
		width: 22vw;
		margin-bottom: 4vh;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section5-book-title {
		width: 16vw;
		font-size: 10px;
		line-height: 11px;
		margin-bottom: 3vh;
	}
}

.section5-book-subtitle {
	width: 100%;
	font-size: 3.6vw;
	font-weight: 900;
	line-height: 2.8vw;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-align: justify;
	text-align-last: justify;
}

@media screen and (max-width: 432px) {
	.section5-book-subtitle {
		font-size: 8vw;
		line-height: 8vw;
		margin-left: auto;
		margin-right: auto;
		width: 80vw;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section5-book-subtitle {
		font-size: 32px;
		line-height: 30px;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section5-book-subtitle {
		font-size: 32px;
		line-height: 30px;
		width: 42vw;
	}
}

@media only screen 
	and (min-width: 1024px) 
	and (max-width: 1280px)
	and (orientation: landscape) {
	.section5-book-subtitle {
		font-size: 34px;
		line-height: 30px;
	}
}

.section5-book-description {
	width: 30vw;
	font-size: 1.6vw;
	font-weight: 500;
	line-height: 1.6vw;
	letter-spacing: -0.00em;
	margin-top: 8vh;
}

@media screen and (max-width: 432px) {
	.section5-book-description {
		font-size: 6vw;
		line-height: 6vw;
		font-weight: 400;
		width: 80vw;
		letter-spacing: 0;
		margin-top: 4vh;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section5-book-description {
		font-size: 24px;
		line-height: 26px;
		width: 40vw;
		margin-top: 4vh;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section5-book-description {
		font-size: 16px;
		line-height: 20px;
		width: 42vw;
		margin-top: 8vh;
		margin-bottom: 12vh;
	}
}

.section5-book-background {
	width: 88vw;
	height: 128vh;
	margin-top: 25vh;
	background-image: url("../assets/imgs/physicals-v2.jpg");
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;
	background-color: #050505;
	border-radius: 8px;
}

@media screen and (max-width: 432px) {
	.section5-book-background {
		width: 100vw;
		background-image: url("../assets/imgs/physicals-mobile.jpg");
		background-size: 150%;
		background-position: center top;
		height: 52vh;
		margin-top: 13vh;
		border-radius: 0;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section5-book-background {
		margin-top: 13vh;
		background-size: 100%;
		height: 52vh;
		width: 100%;
		border-radius: 0;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section5-book-background {
		height: 156vh;
		margin-top: 18vh;
	}
}

/* section 6 */

.section6 {
	width: 88vw;
	height: 72vh;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 14vh;
	top: 14vh;
	z-index: 77;
	background-image: url("../assets/imgs/bio6.jpg");
	background-repeat: no-repeat;
	background-size: cover;
	background-position: left center;
	position: -webkit-sticky;
  position: sticky;
  align-items: flex-end;
  border-radius: 8px;
  
}

@media screen and (max-width: 432px) {
	.section6 {
		width: 100vw;
		height: 100vh;
		top: 0;
		border-radius: 0;
		align-items: center;
		justify-items: flex-start;
		background-position: right bottom;
		display: grid;
		background-image: url("../assets/imgs/bio6-mobile.jpg");
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section6 {
		width: 100%;
		height: 100vh;
		top: 0;
		border-radius: 0;
		background-position: right center;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section6 {
		height: 100svh;
		margin-bottom: 100px;
	}
}

.section6-text {
	position: absolute;
	margin-left: 10%;
	top: auto;
	bottom: 20vh;
}

@media screen and (max-width: 432px) {
	.section6-text {
		width: 80vw;
		left: auto;
		right: auto;
		bottom: 12vh;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section6-text {
		bottom: 16vh;
	}
}

.section6-bio-title {
	width: 330px;
	font-size: 32px;
	font-weight: 900;
	line-height: 30px;
	color: #DEDEDE;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	text-align: justify;
}

@media screen and (max-width: 432px) {
	.section6-bio-title {
		width: 80vw;
		font-size: 4vw;
		line-height: 4vw;
		margin-bottom: 4vh;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section6-bio-title {
		font-size: 16px;
		line-height: 16px;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section6-bio-title {
		font-size: 10px;
	}
}

@media only screen 
	and (min-width: 1024px) 
	and (max-width: 1280px)
	and (orientation: landscape) {
	.section6-bio-title {
		font-size: 12px;
	}
}

.section6-bio-text {
	width: 700px;
	margin-top: 10%;
	font-size: 32px;
	font-weight: 400;
	line-height: 32px;
	color: #DEDEDE;
	z-index: 69;
}

@media screen and (max-width: 432px) {
	.section6-bio-text {
		font-size: 6vw;
		line-height: 6vw;
		font-weight: 400;
		width: 80vw;
		letter-spacing: 0;
		margin-top: 0;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section6-bio-text {
		font-size: 24px;
		line-height: 26px;
		margin-top: 2vh;
		width: 64vw;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section6-bio-text {
		font-size: 16px;
		line-height: 18px;
		width: 48vw;
	}
}

@media only screen 
	and (min-width: 1024px) 
	and (max-width: 1280px)
	and (orientation: landscape) {
	.section6-bio-text {
		font-size: 18px;
		line-height: 20px;
		margin-top: 4vh;
	}
}

/* section 7 - footer/credits */

.section7 {	
	background: #000;
	z-index: 98;
	width: 100vw;
	height: 100vh;
	display: grid;
	align-items: center;
	text-align: center;
	position: relative;
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section7 {
		height: 100dvh;
		width: 100%;
		justify-items: center;
		display: grid;
		align-items: center;
		text-align: center;
	}
}

@media only screen 
	and (min-width: 1024px) 
	and (max-width: 1280px)
	and (orientation: landscape) {
	.section7 {
		display: grid;
		align-items: center;
	}
}

.section7-footer-top {
	width: 25%;
	text-align: right;
	margin-left: auto;
}

.section7-footer-top svg path {
	fill: #FAFAFA;
}

@media screen and (max-width: 432px) {
	.section7-footer-top {
		width: 100%;
		margin-bottom: 1vh;
	}
}

.section7-projectTitle {
	margin: auto;
	width: 90%;
	position: absolute;
	z-index: 1;
	right: 5%;
	left: 5%;
}

@media screen and (max-width: 432px) {
	.section7-projectTitle {
		width: 94vw;
		left: 3vw;
		right: 3vw;
		bottom: auto;
		top: 40vh;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.section7-projectTitle {
		width: 94vw;
		left: 3vw;
		right: 3vw;
		bottom: auto;
		top: 40vh;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section7-projectTitle {
		margin: 0;
		left: auto;
		right: auto;
		bottom: auto;
		top: auto;
		width: 88%;
	}
}

@media only screen 
	and (min-width: 1024px) 
	and (max-width: 1280px)
	and (orientation: landscape) {
	.section7-projectTitle {
		margin: 0;
		left: 3vw;
		right: 3vw;
		bottom: auto;
		top: auto;
	}
}

.section7-projectTitle svg {
	cursor: default;
}

.section7-projectTitle svg path {
	fill: #FF0000;
	/* filter: drop-shadow(0px 0px 25px #D30000); */
}

.section7-footer {
	margin: auto;
	margin-top: 72px;
	display: flex;
	font-size: 16px;
	font-weight: 900;
	line-height: 16px;
	color: #FAFAFA;
	width: 50%;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	align-items: center;
}

@media screen and (max-width: 432px) {
	.section7-footer {
		position: relative;
		width: 94vw;
		margin-top: auto;
		margin-bottom: 2vh;
		margin-left: 3vw;
		margin-right: 3vw;
		align-items: flex-end;
		color: #FF0000;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.section7-footer {
		position: absolute;
		width: 53vw;
		left: 50px;
		right: 50px;
		bottom: 32px;
	}
}

/* artwork container */

#dimmable {
  transition: opacity 0.6s ease-out;
}

#dimmable2 {
  transition: opacity 0.6s ease-out;
}

.inactive {
  opacity: 0.1;
}

@media screen and (max-width: 432px) {
	.inactive {
		opacity: 1;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.inactive {
		opacity: 1;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.inactive {
		opacity: 1;
	}
}

@media only screen 
	and (min-width: 1024px) 
	and (max-width: 1280px)
	and (orientation: landscape) {
	.inactive {
		opacity: 1;
	}
}

.inactiveFull {
  opacity: 0;
}

@media screen and (max-width: 432px) {
	.inactiveFull {
		opacity: 0.6;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.inactiveFull {
		opacity: 0.6;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.inactiveFull {
		opacity: 1;
	}
}

@media only screen 
	and (min-width: 1024px) 
	and (max-width: 1280px)
	and (orientation: landscape) {
	.inactiveFull {
		opacity: 0.6;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.gallery-main {
		height: 100dvh;
		width: 100%;
	}
}

.artwork--container {
	color: #000;
	background: #fff;
	width: 100vw;
	height: 100vh;
	display: flex;
	align-items: center;
}

@media screen and (max-width: 432px) {
	.artwork--container {
		justify-content: space-between;
		height: 100dvh;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.artwork--container {
		justify-content: space-between;
		height: 100dvh;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.artwork--container {
		width: 100%;
	}
}

.artwork--container--left {
	width: 25%;
	height: 80vh;
	padding-left: 80px;
	display: grid;
	align-items: flex-end;
}

@media screen and (max-width: 432px) {
	.artwork--container--left {				
		/*position: absolute;*/
		top: 0;
		left: 0;
		width: 100vw;
		padding-left: 0;
		height: 100dvh;
		align-items: center;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.artwork--container--left {				
		/*position: absolute;*/
		top: 0;
		left: 0;
		width: 100vw;
		padding-left: 0;
		height: 100dvh;
		align-items: center;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.artwork--container--left {
		height: 80svh;
	}
}

.artwork--container--left--top {
	position: absolute;
	top: 10vh;
	left: 80px;
	z-index: 80;
}

@media screen and (max-width: 432px) {
	.artwork--container--left--top {
		display: none;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.artwork--container--left--top {
		display: none;
	}
}

.artwork--container--left--top-mobile {
	display: none;
}

@media screen and (max-width: 432px) {
	.artwork--container--left--top-mobile {
		position: absolute;
		display: grid;
		top: 2.8vh;
		left: 4vw;
		z-index: 80;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.artwork--container--left--top-mobile {
		position: absolute;
		display: grid;
		top: 2.8vh;
		left: 4vw;
		z-index: 80;
	}
}

.bt-secondary {
	width: auto;
	height: 20px;
	font-size: 12px;
	font-weight: 600;
	line-height: 14px;
	color: #000;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	border-radius: 10px;
	border: 1px solid #000;
	background-color: transparent;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 2px;
	list-style-type: none;
	transition-duration: 0.4s;
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.bt-secondary {
		font-size: 10px;
		height: 16px;
		line-height: 10px;
	}
}

.bt-secondary:hover {
	background-color: #000;
	border: 1px solid #000;
	color: #fff;
	cursor: ;
}

.bt-secondary--white {
	width: auto;
	height: 20px;
	font-size: 12px;
	font-weight: 600;
	line-height: 14px;
	color: #D7D7D7;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	border-radius: 10px;
	border: 1px solid #D7D7D7;
	background-color: transparent;
	padding-left: 20px;
	padding-right: 20px;
	padding-top: 2px;
	list-style-type: none;
	transition: 0.4s;
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.bt-secondary--white {
		padding: 4px 16px;
		width: auto;
		height: auto;
		font-size: 10px;
		line-height: 10px;
		border-radius: 50px;
	}
}

.bt-secondary--white:hover {
	border: 1px solid #fff;
	background: #fff;
	color: #000;
}

.artwork--container--left--bottom {
	height: 30vh;
	display: grid;
	align-items: flex-end;
}

@media screen and (max-width: 432px) {
	.artwork--container--left--bottom {
		width: 92vw;
		display: flex;
		margin-left: auto;
		margin-right: auto;
		z-index: 80;
		justify-content: space-between;
		height: auto;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.artwork--container--left--bottom {
		width: 92vw;
		display: flex;
		margin-left: auto;
		margin-right: auto;
		z-index: 80;
		justify-content: space-between;
		height: auto;
	}
}

.artwork--container-nav-number {
	max-width: 96px;
	font-size: 14px;
	font-weight: 700;
	line-height: 14px;
	text-align: justify;
	color: #000;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.artwork--container-nav-number {
		max-width: 64px;
		font-size: 10px;
		height: 16px;
		line-height: 10px;
	}
}

@media screen and (max-width: 432px) {
	.artwork--container-nav-number {
		display: none;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.artwork--container-nav-number {
		display: none;
	}
}

.artwork--container-nav-previous img {
	transition: 0.3s;
}

.artwork--container-nav-previous img:hover {
	transform: translateY(-4px);
}

@media screen and (max-width: 432px) {
	.artwork--container-nav-previous {
		transform: rotate(-90deg);
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.artwork--container-nav-previous {
		transform: rotate(-90deg);
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.artwork--container-nav-previous img {
		height: 16px;
		width: auto;
	}
}

.artwork--container-nav-next img {
	transition: 0.3s;
}

.artwork--container-nav-next img:hover {
	transform: translateY(4px);
}

@media screen and (max-width: 432px) {
	.artwork--container-nav-next {
		transform: rotate(-90deg);
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.artwork--container-nav-next {
		transform: rotate(-90deg);
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.artwork--container-nav-next img {
		height: 16px;
		width: auto;
	}
}

.artwork--container--middle {
	width: 50%;
	text-align: center;
}

@media screen and (max-width: 432px) {
	.artwork--container--middle {
		left: auto;
		right: auto;
		position: absolute;
		width: 100vw;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.artwork--container--middle {
		left: auto;
		right: auto;
		position: absolute;
		width: 100vw;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.artwork--container--middle {
		
	}
}

.artwork {
	width: 69%; 
	height: auto;
	border-radius: 8px;
	filter: drop-shadow(0px 0px 16px #A7A7A7);
}

@media screen and (max-width: 432px) {
	.artwork {
		width: 67vw;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.artwork {
		width: 48vw;
	}
}

@media screen  
  and (min-device-width: 768px)
  and (max-device-width: 1024px) 
  and (orientation: landscape) {
	.artwork {
		width: 24vw;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.artwork {
		width: 22vw;
	}
}

.artwork--container--right {
	width: 25%;
	height: 80vh;
	padding-right: 80px;
	display: grid;
	align-items: flex-end;
}

@media screen and (max-width: 432px) {
	.artwork--container--right {
		width: 100vw;
		height: 95dvh;
		position: absolute;
		padding-right: 0;
		justify-content: space-between;
		justify-items: center;
		display: grid;
		left: auto;
		right: auto;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.artwork--container--right {
		width: 100vw;
		height: 95dvh;
		position: absolute;
		padding-right: 0;
		justify-content: space-between;
		justify-items: center;
		display: grid;
		left: auto;
		right: auto;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.artwork--container--right {
		height: 80svh;
	}
}

.artwork--container--right--top {
	height: 100%;
	text-align: right; 
	font-size: 28px;
	font-weight: 600;
	line-height: 28px;
	color: #000;
	letter-spacing: -0.01em;
	text-transform: uppercase;
}

@media screen and (max-width: 432px) {
	.artwork--container--right--top {
		width: 72vw;
		height: auto;
		left: auto;
		right: auto;
		top: 0;
		bottom: auto;
		padding-right: 0;
		justify-content: flex-start;
		text-align: center;
		position: absolute;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.artwork--container--right--top {
		width: 72vw;
		height: auto;
		left: auto;
		right: auto;
		top: 0;
		bottom: auto;
		padding-right: 0;
		justify-content: flex-start;
		text-align: center;
		position: absolute;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.artwork--container--right--top {
		font-size: 16px;
		line-height: 16px;
	}
}

.artwork--container--right--bottom {
	display: grid;
	align-items: flex-end;
	text-align: right;
}

@media screen and (max-width: 432px) {
	.artwork--container--right--bottom {
		width: 100vw;
		height: auto;
		bottom: 0;
		top: auto;
		justify-items: center;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.artwork--container--right--bottom {
		width: 100vw;
		height: auto;
		bottom: 0;
		top: auto;
		justify-items: center;
	}
}

.artwork--container--transactional-details-bt {
	width: 112px;
	height: 56px;
	font-size: 14px;
	font-weight: 600;
	line-height: 14px;
	color: #fff;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	border-radius: 50px;
	background-color: #000;
	border: 1px solid #000;
	margin-bottom: 12px;
	transition-duration: 0.4s;
}

@media screen and (max-width: 432px) {
	.artwork--container--transactional-details-bt {
		width: 69vw;
		height: 28px;
		font-weight: 500;
		font-size: 3vw;
		background: #fff;
		color: #000;
		margin-bottom: 8px;
		letter-spacing: -0.48px;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.artwork--container--transactional-details-bt {
		width: 60vw;
		height: 36px;
		font-weight: 500;
		font-size: 14px;
		background: #fff;
		color: #000;
		margin-bottom: 8px;
		letter-spacing: -0.48px;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.artwork--container--transactional-details-bt {
		padding: 12px 24px;
		width: auto;
		height: auto;
		font-size: 10px;
		line-height: 10px;
	}
}

.artwork--container--transactional-details-bt:hover {
	background-color: #fff;
	border: 2px solid #000;
	color: #000;
	cursor: e-resize;
}

.artwork--container--transactional-mint {
	width: 248px;
	height: 56px;
	font-size: 14px;
	font-weight: 600;
	line-height: 14px;
	color: #fff;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	border-radius: 50px;
	background-color: #000;
	border: 2px solid #000;
	text-align: justify;
	padding-left: 32px;
	padding-right: 32px;
	transition: 0.4s;
	text-align-last: justify;
}

.reserved {
	background-color: #fff;
	color: #000;
}

.artwork--container--transactional-mint:hover span {
  display: none;
}

.artwork--container--transactional-mint:hover:before {
	content: "go to checkout \2192";
	cursor: pointer;
}

.artwork--container--transactional-mint:hover {
	background-color: #fff;
	border: 2px solid #000;
	color: #000;
	cursor: pointer;
}

@media screen and (max-width: 432px) {
	.artwork--container--transactional-mint {
		width: 69vw;
		height: 28px;
		font-weight: 700;
		font-size: 3vw;
		text-align: center;
		letter-spacing: -0.48px;
		text-align: center;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.artwork--container--transactional-mint {
		width: 60vw;
		height: 28px;
		font-weight: 900;
		font-size: 14px;
		text-align: center;
		letter-spacing: -0.48px;
		text-align: center;
		text-align-last: center;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.artwork--container--transactional-mint {
		padding: 12px 24px;
		width: auto;
		height: auto;
		font-size: 10px;
		line-height: 10px;
	}
}

/* sold button */

.artwork--container--transactional-sold {
	width: 248px;
	height: 56px;
	font-size: 14px;
	font-weight: 600;
	line-height: 14px;
	color: #000;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	border-radius: 50px;
	background-color: #A5FFD9;
	border: 2px solid #A5FFD9;
	text-align: justify;
	padding-left: 32px;
	padding-right: 32px;
	transition: 0.4s;
	text-align-last: justify;
}

.artwork--container--transactional-sold:hover {
	background-color: #57FFB9;
	border: 2px solid #57FFB9;
	color: #000;
	cursor: pointer;
}

@media screen and (max-width: 432px) {
	.artwork--container--transactional-sold {
		width: 69vw;
		height: 28px;
		font-weight: 700;
		font-size: 3vw;
		text-align: center;
		letter-spacing: -0.48px;
		text-align: center;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.artwork--container--transactional-sold {
		width: 60vw;
		height: 28px;
		font-weight: 900;
		font-size: 14px;
		text-align: center;
		letter-spacing: -0.48px;
		text-align: center;
		text-align-last: center;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.artwork--container--transactional-sold {
		padding: 12px 24px;
		width: auto;
		height: auto;
		font-size: 10px;
		line-height: 10px;
	}
}

/* end of sold button */

.cursor--collapse {
	cursor: w-resize;
}

.artwork--container--transactional-manifold {
	text-align: right;
	width: 80%;
	font-size: 0.69vw;
	line-height: 0.72vw;
	color: #BBBBBB;
	margin-top: 1.69vh;
	margin-right: 0.24vw;
	margin-left: auto;
}

.manifold-disclaimer {
	color: #BBBBBB;
	transition: 0.3s;
	text-decoration: underline;
}

.manifold-disclaimer:hover {
	color: #000;
	text-decoration: none;
}

/* mint details and links */

#soldDetails-2,
#soldDetails-10,
#soldDetails-17,
#soldDetails-18 {
	display: none;
}

.mintdetails-overlay {
	position: fixed;
	width: 100%;
	height: 100vh;
	height: 100svh;
	top: 0;
	left: 0;
	z-index: 95;
	display: grid;
	align-items: center;
	justify-content: center;
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
}

.mintdetails-overlay-background {
	opacity: 0;
	position: absolute;
	width: 100%;
	height: 100vh;
	height: 100svh;
	z-index: 96;
}

.mintdetails-content-container {
	background: #000;
	color: #fff;
	display: flex;
	flex-direction: column;
	border-radius: 8px;
	padding: 2rem 2rem 2rem 2rem;
	z-index: 97;
}

.mintdetails-container-title {
	word-wrap: break-word;
	display: flex;
	gap: 0.32rem;
	text-transform: uppercase;
	margin-bottom: 1rem;
	font-size: clamp(0.88rem, 1vw + 1rem, 1rem);
}

.mintdetails-content-minter {
	font-weight: 600;
}

.mintdetails-links {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-bottom: 24px;
	border-bottom: 0.5px solid #1F1F1F;
}

.mintdetails-links-title {
	color: #989898;
	font-size: clamp(0.80rem, 1vw + 1rem, 0.80rem);
	text-transform: uppercase;
}

.mintdetails-links-content {
	display: flex;
	gap: 1rem;
}

.mintdetails-links-icons svg {
	height: 1rem;
	width: auto;
}

.mintdetails-links-icons a svg path {
	transition: 0.3s;
}

.mintdetails-links-icons a:hover svg path {
	fill: #fff;
}

.mintdetails-close {
	text-align: center;
	margin-top: 24px;
}

.mintdetails-closebtn {
	border: 1px solid #989898;
	color: #989898;
	padding: 0.24vw 2vw 0.24vw 2vw;
	border-radius: 50px;
	text-transform: uppercase;
	font-size: clamp(0.64rem, 1vw + 1rem, 0.64rem);
	letter-spacing: 0;
	transition: 0.3s;
	font-weight: 600;
}

.mintdetails-closebtn:hover {
	border: 1px solid #fff;
	color: #000;
	background: #fff;
}

/* end of mint details and links */

/* artwork details collapsed bar */

.artwork--container--transactional-details-bar {
	height: 100vh;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	right: 0;
	background-color: #000000;
	overflow-x: hidden;
	box-shadow: inset 56px 0 20px -42px rgba(0,0,0,0.10);
	align-items: center;
	display: grid;
	justify-content: center;
	transition: 0.5s; /* 0.5 second transition effect to slide in the sidebar */
}

@media screen and (max-width: 432px) {
	.artwork--container--transactional-details-bar {
		height: 100dvh;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.artwork--container--transactional-details-bar {
		height: 100dvh;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.artwork--container--transactional-details-bar {
		height: 100svh;

	}
}

.artwork--container--transactional-details-close {
	position: absolute;
	right: 2vw;
	top: 2vw;
}

@media screen and (max-width: 432px) {
	.artwork--container--transactional-details-close {
		right: 6vw;
		top: 6vw;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.artwork--container--transactional-details-close {
		right: 6vw;
		top: 6vw;
	}
}

.artwork--container--transactional-details-close svg path {
	fill: #6F6F6F;
	transition: 0.3s;
}

.artwork--container--transactional-details-close:hover svg path {
	fill: #fff;
}

.details--wrapper {
	height: 80vh;
	margin-top: ;
	display: grid;
	align-content: space-between;
}

.details--content {
	width: 272px;
	gap: initial;
}

.details--tit {
	width: 100%;
	font-weight: 600;
	font-size: 14px;
	line-height: 12px;
	letter-spacing: -0.01em;
	color: #676767;
	margin-bottom: 12px;
	text-transform: uppercase;
	-webkit-font-smoothing: antialiased;
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.details--tit {
		font-size: 8px;
		line-height: 8px;
		margin-bottom: 4px;
	}
}

.details--description {
	width: 272px;
	word-wrap: break-word;
	font-weight: 600;
	font-size: 32px;
	line-height: 30px;
	letter-spacing: -0.01em;
	color: #D7D7D7;
	-webkit-font-smoothing: antialiased;
}

@media screen and (max-width: 432px) {
	.details--description {
		font-weight: 600;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	.details--description {
		font-weight: 600;
	}
}

@media screen 
	and (min-device-width: 390px) 
  and (max-device-width: 1194px) 
	and (-webkit-device-pixel-ratio: 3) 
  and (orientation: landscape) {
	.details--description {
		font-size: 14px;
		line-height: 14px;
	}
}

.details--button {
	list-style-type: none;
	margin-top: 8px;
	z-index: 99;
}


/* transition effect when artwork details side bar expands */

#main {
	position: relative;
  transition: margin-left .5s; 
}

#gallery-wrapper {
	position: absolute;
	left: 0;
	top: 0;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
}

@media screen and (max-width: 432px) {
	#gallery-wrapper {
		height: 100dvh;
	}
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
	#gallery-wrapper {
		height: 100dvh;
	}
}

.print-button-wrapper {
	margin-top: 6rem;
}

.claim-print-button {
	font-size: 1.2rem;
/*	margin-top: 1rem;*/
	background: #00FFB7;
	color: #000;
	border-radius: 50px;
	padding: 0.5rem 2rem 0.5rem 2rem;
	font-weight: 700;
	text-transform: uppercase;
	text-align: center;
	transition: 0.3s;
	border: 2px solid #00FFB7;
}

.claim-print-button:hover {
	background: none;
	border: 2px solid #00FFB7;
	color: #00FFB7;
}


@media screen and (max-width: 432px) {
	.claim-print-button {
		font-size: 0.8rem;
		line-height: 1;
		border-radius: 25;
		margin-bottom: 2rem;
	}
}

/*

#turn {
	color: #fff;
	font-size: 10vw;
	width: 100vw;
	height: 20vh;
	border: 1px solid lime;
	position: absolute;
	top: 0;
	left: 0;
	background: lightpink;
	display: grid;
	z-index: 99;
}

@media only screen and (orientation:portrait) {
	#turn { display: none; }
}

@media only screen and (orientation:landscape) {
	#main { display: none; }
	#turn { display: grid; }
}

*/