/* ---------------------------------------- */
/* ----- >>> Layout: Mobile --------------- */
/* ---------------------------------------- */

@media (orientation: portrait) {
	
	html {
		font-size: 0.9259vw;
	}

	/* ---------------------------------------- */
	/* ----- >>> Section: Home ---------------- */
	/* ---------------------------------------- */

	#isHome {
		background-size: contain;
	}

	#isHome items {
		padding: 100vh 0.0rem 3.2rem 0.0rem !important;
	}

	/* ---------------------------------------- */
	/* ----- >>> Section: Works --------------- */
	/* ---------------------------------------- */

	.isFLX {
		width: 100%;
	}

	works {
		transform: unset;
		flex-direction: column;
		position: unset;
		gap: 4.8rem;
	}

	works > item:not(:nth-child(2n),:last-child):before {
		display: none;
	}

	works > item > span,
	works > item:nth-child(2n) > span {
		width: 100dvw;
		inset: unset;
		left: 0;
		top: 0;
	}

	works > item:hover > span {
		visibility: visible;
	}

	/* ---------------------------------------- */
	/* ----- >>> Section: Album --------------- */
	/* ---------------------------------------- */

	cover {
		height: 80dvh;
	}

	/* ---------------------------------------- */
	/* ----- >>> Section: About --------------- */
	/* ---------------------------------------- */

	#isAbout > section > div > ul > li {
		font-size: 4.0rem;
	}

	#isAbout > section > div > ul > li:before {
		bottom: 1.4rem !important;
	}

}

@media (max-width: 640px) and (min-width: 0) {

	html {
		font-size: 2.7778vw;
	}

	.setWrapper {
		width: calc(100% - 4.8rem);
	}

	/* ---------------------------------------- */
	/* ----- >>> Styles ----------------------- */
	/* ---------------------------------------- */

	h1		{ font-size: 3.2rem; }
	h2		{ font-size: 2.4rem; }
	h3		{ font-size: 2.1rem; }
	h4		{ font-size: 1.8rem; }
	h5		{ font-size: 1.6rem; }
	h6		{ font-size: 1.4rem; }
	p 		{ font-size: 3.2rem; line-height: 1.25em; }
	small { font-size: 0.9rem; }

	/* ---------------------------------------- */
	/* ----- >>> Navegation ------------------- */
	/* ---------------------------------------- */

	nav {
		width: 100vw;
		height: 100dvh;
		background: rgba(var(--main-color), 1.0);
		transition: all 0.25s ease-in-out;
		transform: translate(100%);
		justify-content: center;
		flex-direction: column;
		position: fixed;
		display: flex;
		gap: 2.4rem;
		left: 0;
		top: 0;}

	nav.isActive {
		transform: translate(0%);
	}

	nav > ul {
		flex-direction: column;
		align-items: center;
		font-size: 2.4rem;
		font-weight: 900;
		gap: 2.4rem;
	}

	footer > div > small {
		font-size: 1.0rem;
	}

	/* ---------------------------------------- */
	/* ----- >>> Section: Home ---------------- */
	/* ---------------------------------------- */

	/* gallery,
	gallery > item,
	gallery > item > img {
		max-width: unset !important;
		width: 100% !important;
		margin: 0 !important;
		gap: 3.2rem;
	}

	gallery {
		margin-bottom: 12.8rem !important;
	}

	gallery > item:nth-child(1),
	gallery > item:nth-child(5),
	gallery > item:nth-child(10),
	gallery > item:nth-child(14),
	gallery > item:nth-child(15),
	gallery > item:nth-child(16),
	gallery > item:nth-child(18) > img {
	  margin: 0 3.2rem !important;
	}

	gallery > item:nth-child(2),
	gallery > item:nth-child(9),
	gallery > item:nth-child(11),
	gallery > item:nth-child(20),
	gallery > item:nth-child(21) > img {
	  margin: 0 0 0 3.2rem !important;
	}

	gallery > item:nth-child(3),
	gallery > item:nth-child(7),
	gallery > item:nth-child(13) > img {
	  margin: 0 3.2rem 0 0 !important;
	}

	/*
	gallery > item > img 					 { margin: 0.0rem 3.2rem 0.0rem 3.2rem !important; }
	gallery > item:nth-child(4n) > img   { margin: 0.0rem 3.2rem 0.0rem 0.0rem !important; }
	gallery > item:nth-child(4n-2) > img { margin: 0.0rem 0.0rem 0.0rem 0.0rem !important; }
	gallery > item:nth-child(4n-3) > img { margin: 0.0rem 0.0rem 0.0rem 3.2rem !important; }


	/* ---------------------------------------- */
	/* ----- >>> Section: Works --------------- */
	/* ---------------------------------------- */

	works {
		font-size: 2.4rem;
		gap: 1.2rem;
	}


	/* ---------------------------------------- */
	/* ----- >>> Section: Album --------------- */
	/* ---------------------------------------- */

	cover {
		aspect-ratio: 9 / 16;
		height: 100dvh;
	}

	/* ---------------------------------------- */

	intro,
	items,
	nexts {
		padding: 6.4rem 0.0rem;
	}

	intro > p {
		font-size: 1.0rem;
	}

	items,
	items > item,
	items > item > img {
		flex-direction: column !important;
		transform: unset !important;
		gap: 2.4rem !important;
		width: 100% !important;
		padding: 0 !important;
		margin: 0 !important;
	}

	items > item > img { max-width: calc(100% - 2.4rem); }

	items > item.isS01 > img:nth-child(1) { margin: 0.0rem 0.0rem 0.0rem 2.4rem !important; order: 1; }
	items > item.isS01 > img:nth-child(2) { margin: 0.0rem 2.4rem 0.0rem 0.0rem !important; order: 2; }

	items > item.isS02 > img:nth-child(1) { margin: 0.0rem 0.0rem 0.0rem 2.4rem !important; order: 1; }
	items > item.isS02 > img:nth-child(2) { margin: 0.0rem 2.4rem 0.0rem 2.4rem !important; order: 2; max-width: calc(100% - 4.8rem); }
	items > item.isS02 > img:nth-child(3) { margin: 0.0rem 2.4rem 0.0rem 0.0rem !important; order: 3; }

	items > item.isS03 > img:nth-child(2) { margin: 0.0rem 0.0rem 0.0rem 2.4rem !important; order: 1; }
	items > item.isS03 > img:nth-child(1) { margin: 0.0rem 2.4rem 0.0rem 0.0rem !important; order: 2; }

	items > item.isS04 > img:nth-child(1),
	items > item.isS05 > img:nth-child(2) { margin: 0.0rem 2.4rem 0.0rem 2.4rem !important; order: 1; max-width: calc(100% - 4.8rem); }
	items > item.isS04 > img:nth-child(2),
	items > item.isS05 > img:nth-child(1) { margin: 0.0rem 0.0rem 0.0rem 0.0rem !important; order: 2; max-width: calc(100% - 0.0rem); }

	items > item.isS06 > img:nth-child(1) { margin: 0.0rem 2.4rem 0.0rem 2.4rem !important; order: 1; max-width: calc(100% - 4.8rem); }
	items > item.isS06 > img:nth-child(2) { margin: 0.0rem 2.4rem 0.0rem 2.4rem !important; order: 2; }
	items > item.isS06 > img:nth-child(3) { margin: 0.0rem 2.4rem 0.0rem 0.0rem !important; order: 3; }

	items > item.isS07 > img:nth-child(1) { margin: 0.0rem 0.0rem 0.0rem 0.0rem !important; order: 1; }
	items > item.isS07 > img:nth-child(2) { margin: 0.0rem 0.0rem 0.0rem 2.4rem !important; order: 3; }
	items > item.isS07 > img:nth-child(3) { margin: 0.0rem 0.0rem 0.0rem 0.0rem !important; order: 2; max-width: unset; }

	items > item.isS08 > img:nth-child(1) { margin: 0.0rem 2.4rem 0.0rem 0.0rem !important; order: 1; }
	items > item.isS08 > img:nth-child(2) { margin: 0.0rem 0.0rem 0.0rem 2.4rem !important; order: 1; }
	items > item.isS08 > img:nth-child(3) { margin: 0.0rem 2.4rem 0.0rem 0.0rem !important; order: 1; }

	items > item.isS09 > img:nth-child(1) { margin: 0.0rem 0.0rem 0.0rem 2.4rem !important; order: 1; }
	items > item.isS09 > img:nth-child(2) { margin: 0.0rem 2.4rem 0.0rem 0.0rem !important; order: 1; }
	items > item.isS09 > img:nth-child(3) { margin: 0.0rem 0.0rem 0.0rem 2.4rem !important; order: 1; }

	items > item.isS10 > img:nth-child(1) { margin: 0.0rem 2.4rem 0.0rem 2.4rem !important; order: 2; max-width: calc(100% - 4.8rem); }
	items > item.isS10 > img:nth-child(2) { margin: 0.0rem 0.0rem 0.0rem 2.4rem !important; order: 1; }
	items > item.isS10 > img:nth-child(3) { margin: 0.0rem 2.4rem 0.0rem 0.0rem !important; order: 2; }

	items > item.isS11 > img:nth-child(1) { margin: 0.0rem 0.0rem 0.0rem 2.4rem !important; order: 1; }
	items > item.isS11 > img:nth-child(2) { margin: 0.0rem 2.4rem 0.0rem 0.0rem !important; order: 3; }
	items > item.isS11 > img:nth-child(3) { margin: 0.0rem 2.4rem 0.0rem 2.4rem !important; order: 2; max-width: calc(100% - 4.8rem); }

	items > item.isS12 > img:nth-child(1) { margin: 0.0rem 2.4rem 0.0rem 0.0rem !important; order: 1; }
	items > item.isS12 > img:nth-child(2) { margin: 0.0rem 0.0rem 0.0rem 2.4rem !important; order: 3; }
	items > item.isS12 > img:nth-child(3) { margin: 0.0rem 2.4rem 0.0rem 2.4rem !important; order: 2; max-width: calc(100% - 4.8rem); }

	items > item.isS13 > img:nth-child(1) { margin: 0.0rem 2.4rem 0.0rem 0.0rem !important; }
	items > item.isS13 > img:nth-child(2) { margin: 0.0rem 0.0rem 0.0rem 2.4rem !important; }
	items > item.isS13 > img:nth-child(3) { margin: 0.0rem 2.4rem 0.0rem 2.4rem !important; max-width: calc(100% - 4.8rem); }


	nexts {
		padding: 25vh 0.0rem;
	}

	nexts > a {
		font-size: 1.4rem;
	}

	nexts > a > span {
		font-size: 150%;
	}

	/* ---------------------------------------- */
	/* ----- >>> Section: About --------------- */
	/* ---------------------------------------- */

	splash,
	sticky, press,
	sticky > item,
	sticky > item > div {
		min-height: unset !important;
		flex-direction: column;
		align-items: center;
	}

	splash {
		height: unset;
	}

	splash > item,
	sticky > item {
		width: 100% !important;
	}

	splash > item:nth-child(2) { 
		padding: 0.0rem 1.6rem;
	}

	splash > item > blockquote {
		transform: translate(-50%, -50%) rotate(-90deg);
		white-space: nowrap;
		font-size: 16.5vh;
	}

	sticky {
		margin: 6.4rem 0.0rem !important;
		gap: 6.4rem;
	}

	sticky > item {
		gap: 12.8rem;
	}

	sticky > item > div > span {
		display: none;
	}

	sticky > item > div > text {
		all: unset;
		padding: 0.0rem 3.2rem;
	}

	sticky > item > img {
		position: relative;
	}

	press > item > img {
		max-height: 3.2rem;
	}

	/* ---------------------------------------- */
	/* ----- >>> Coming Soon ------------------ */
	/* ---------------------------------------- */

	coming-soon > ul {
		font-size: 1.4rem;
	}

	/* ---------------------------------------- */
	/* ----- >>> Media Form ------------------- */
	/* ---------------------------------------- */

	form {
		margin: 3.2rem auto;
	}

	form > item.isOutput > span {
		width: 100%;
		text-align: center;
		font-size: 1.0rem;
		transform: unset;
	}

	input[type="date"] {
		text-align: left;
		min-height: 3.2rem;
	}

	/* ---------------------------------------- */
	/* ----- >>> General ---------------------- */
	/* ---------------------------------------- */

	.isMBL { display: block !important; }

	.isHRO { aspect-ratio: 9 / 16 }

	/* ---------------------------------------- */
	/* ----- >>> Icon Sets -------------------- */
	/* ---------------------------------------- */

	.isBND {
		width: 12.8rem;
	}

	.isMenu {
		display: flex !important;
		width:  3.2rem;
		height: 3.2rem;
		bottom: 1.6rem;
		right: 1.6rem;
	}

}