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

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

	:root {
		--main-radio: 0.6rem;
	}

	html {
		font-size: 2.7778vw;
	}

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

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

	h1		{ font-size: 3.2rem; margin-bottom: 0.8rem; }
	h2		{ font-size: 2.8rem; margin-bottom: 0.8rem; }
	h3		{ font-size: 2.4rem; margin-bottom: 0.8rem; }
	h4		{ font-size: 2.1rem; margin-bottom: 0.8rem; }
	h5		{ font-size: 1.6rem; margin-bottom: 0.8rem; }
	h6		{ font-size: 1.4rem; margin-bottom: 0.8rem; }
	p		{ font-size: 1.2rem; margin-bottom: 0.8rem; }
	small { font-size: 1.0rem; margin-bottom: 0.8rem; }

	h2:not(:first-of-type),
	h3:not(:first-of-type),
	h4:not(:first-of-type),
	h5:not(:first-of-type),
	h6:not(:first-of-type) {
		margin-top: 1.6rem;
	}

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

	footer .setWrapper {
		flex-direction: column;
		gap: 3.2rem;
	}

	footer .setWrapper > div {
		width: 100%;
	}

	header nav {
		width: 100%;
		background-color: rgba(var(--lite-color), 1.0);
		transition: all 0.25s ease-in-out;
		transform: translateY(-100%);
		flex-direction: column;
		padding-top: 8.4rem;
		position: fixed;
		display: flex;
		z-index: 999;
		left: 0;
		top: 0;
	}

	header.onTop nav {
		padding-top: 5.4rem;
	}

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

	nav > ul {
		line-height: 2.0rem;
		font-size: 1.2rem;
	}

	header nav > ul {
		width: 100%;
		border-top: thin solid rgba(var(--main-color), 0.1);
		flex-direction: column;
		text-transform: none;
		line-height: 4.8rem;
		letter-spacing: 0;
		font-size: 1.4rem;
		font-weight: 400;
		gap: 0.0rem;
	}

	header nav > ul > li {
		width: 100%;
		border-bottom: thin solid rgba(var(--main-color), 0.1);
		padding: 0.0rem 2.4rem;
	}

	footer nav > ul {
		margin-bottom: 8.0rem !important;
		align-items: flex-start;
		flex-wrap: wrap;
		gap: 3.2rem;
	}

	footer nav > ul > li {
		width: 100%;
	}

	footer nav > ul > li:not(:last-child) {
		width: calc(50% - 1.6rem);
	}

	footer small {
		width: 24rem;
		position: absolute;
		font-size: 0.9rem;
		bottom: 3.2rem;
	}

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

	.isML096 { 
		margin-left: 0.0rem;
		font-size: 2.4rem;
		margin-bottom: 0;
	}

	/* ---------------------------------------- */
	/* ----- >>> Coover ----------------------- */
	/* ---------------------------------------- */

	cover {
		padding: 0.0rem 2.4rem 3.2rem 2.4rem;
	}

	cover > item:nth-child(1) {
		padding: 12.8rem 0.0rem 6.4rem 0.0rem;
		min-height: unset;
	}

	cover > item:nth-child(2),
	cover.isS01 > item:nth-child(2)  {
		background-image: url(../assets/SVG/SVG_G02.svg?1000);
		background-position: bottom center;
		flex-direction: column;
		display: flex;
		gap: 2.4rem;
	}

	cover > item > div:nth-child(1) { width: 24.0rem; transform: unset; align-self: flex-start; }
	cover > item > div:nth-child(2) { width: 15.0rem; transform: unset; align-self: flex-end;   }

	cover.isS01 > item > div:nth-child(1) { width: 24.0rem; transform: unset; align-self: flex-end; }
	cover.isS01 > item > div:nth-child(2) { width: 15.0rem; transform: unset; align-self: flex-start;   }

	cover > item > div:before {
		border-radius: 0.4rem; 
	}

	cover.isS00 > item > div:nth-child(1):before { width: 9.6rem; left:  +1.6rem; bottom: -0.8rem; transform: translate(+000%, +50%); }
	cover.isS01 > item > div:nth-child(1):before { width: 9.6rem; left:  +3.2rem; bottom: +0.0rem; transform: translate(-100%, -50%); }
	cover.isS01 > item > div:nth-child(2):before { width: 7.0rem; right: -5.4rem; bottom: +1.6rem; transform: translate(+000%, +00%); }
	cover.isS02 > item > div:nth-child(1):before { width: 9.6rem; right: +3.2rem; top:    +3.0rem; transform: translate(+080%, +50%); }

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

	cover.isAlt {
		flex-direction: column;
		padding-top: 0.0rem;
	}

	cover.isAlt > item:last-child {
		display: none;
	}

	/* ---------------------------------------- */
	/* ----- >>> Banner ----------------------- */
	/* ---------------------------------------- */

	banner {
		background-image: none !important;
		padding: 3.2rem 2.4rem;
	}

	banner > h2 		 { margin-top: 12.8rem; }
	banner > .isButton { margin-top: 1.6rem; }

	/* ---------------------------------------- */
	/* ----- >>> Columns ---------------------- */
	/* ---------------------------------------- */

	columns {
		flex-direction: column;
		margin-top: 0.0rem;
		gap: 6.4rem;
	}

	columns > item {
		width: 100%;
	}

	columns > item > div {
		padding: 0.0rem;
	}

	columns.isTXT > item > div > ul {
		font-size: 1.2rem;
		padding-left: 0;
		gap: 1.6rem;
	}

	columns > item:nth-child(1) { order: 1; }
	columns > item:nth-child(2) { order: 2; }
	columns > item:nth-child(3) { order: 3; }
	columns > item:nth-child(4) { order: 4; }
	columns > item:nth-child(5) { order: 5; }
	columns > item:nth-child(6) { order: 6; }
	columns > item:nth-child(7) { order: 7; }
	columns > item:nth-child(8) { order: 8; }


	/* ---------------------------------------- */
	/* ----- >>> Grid ------------------------- */
	/* ---------------------------------------- */

	grid {
		margin: 4.8rem auto;
	}

	grid > items > item > card {
		width: 100%;
		padding: 2.4rem;
	}

	grid > items > item > card > .isButton {
		margin-top: 1.6rem;
		height: unset;
		opacity: 1;
	}

	grid[data-min="1"]  > items > item { width: calc(100.00000% - 0.0000rem); }
	grid[data-min="2"]  > items > item { width: calc(50.000000% - 1.6000rem); }
	grid[data-min="3"]  > items > item { width: calc(33.323232% - 2.1333rem); }

	/* ---------------------------------------- */
	/* ----- >>> Marquee ---------------------- */
	/* ---------------------------------------- */

	scroll {
		height: 9.6rem;
		line-height: 9.6rem;
		font-size: 6.4rem;
	}

	/* ---------------------------------------- */
	/* ----- >>> Forms ------------------------ */
	/* ---------------------------------------- */

	.isButton {
		line-height: 4.0rem;
		font-size: 0.9rem;
	}

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

	.isBND {
		width: 12.8rem;
	}

	/* ---------------------------------------- */
	/* ----- >>> Menu Animation --------------- */
	/* ---------------------------------------- */

	.setMenu {
		display: flex;
	}


}