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

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

html {
	font-size: 2.44vw;
}

footer {
	text-align: center;
}


.setWrapper {
	width: calc(100% - 6.4rem);
	flex-direction: column;
	margin: 6.4rem auto;
	gap: 2.5rem;
}

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

h1			{ font-size: 3.6rem; line-height: 1.10em; margin-bottom: 3.2rem; }
h2			{ font-size: 2.1rem; line-height: 1.25em; margin-bottom: 3.2rem; }
p, dd 		{ font-size: 1.6rem; line-height: 1.50em; margin-bottom: 3.2rem; }
small 		{ font-size: 1.4rem; line-height: 1.50em; margin-bottom: 3.2rem; }

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

.isBND {
	width: 31.5rem;
	height: 4.8rem;
}

header .isBND {
	width: 22.8rem;
	height: 9.6rem;
}

header .isBND > svg {
	width: 63.0rem;
	height: 9.6rem;
}

@keyframes isScroll {
	  0% { top: 45%; width: 26.2rem; height: 09.6rem; }
	 25% { top: 10%; width: 11.0rem; height: 04.8rem; }
	 75% { top: 10%; width: 11.0rem; height: 04.8rem; }
	100% { top: 10%; width: 31.5rem; height: 04.8rem; }
}

@keyframes isBrands {
	  0% { width: 63.0rem; height: 09.6rem; }
	 25% { width: 31.5rem; height: 04.8rem; }
	100% { width: 31.5rem; height: 04.8rem; }
}

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

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

.isIntro > div:nth-child(1) { width: 100%; margin: 00% }
.isIntro > div:nth-child(2) { width: 100%; margin: 00% }

.isIntro > div:nth-child(1) > h2 {
	margin-left: 3.2rem;
}

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

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

.isSchema > div:nth-child(1) { width: 100% }
.isSchema > div:nth-child(2) { width: 100% }

.isSchema > div:nth-child(2) > ol {
	margin-bottom: 3.2rem;
	margin-left: 0.8rem;
	gap: 1.6rem;
}

.isSchema > div:nth-child(2) > img {
	width: 100%;
}

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

.isMaps { 
	background: url(../assets/@0x/IMG_B00M.jpg?100) no-repeat center center / cover;
	color: var(--back-color);
}

.isMaps h1 {
	font-size: 3.4rem;
	bottom: 3.2rem;
	left: 3.2rem;
}

.isMaps h1 > i {
	width: 25.0rem;
	height: 3.8rem;
}

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

.isLogos {
	flex-wrap: wrap;
}

.isLogos > li {
	width: calc(50% - 1.6rem);
}

.isLogos > li > p {
	margin-bottom: 1.6rem;
	min-height: 3.2rem;
	font-size: 1.4rem;
}

.isLogos > li > i {
	width:  9.6rem;
}

.isLogos > li:nth-child(3) > i,
.isLogos > li:nth-child(4) > i {
  width: 14rem;
}

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

.isHero,
.setIMG {
	aspect-ratio: 1.00 / 1.50;
}

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

.isPIN { 
	width:  3.2rem;
	height: 3.2rem;
}

/* ---------------------------------------- */
/* ----- >>> Dev Tools -------------------- */
/* ---------------------------------------- */

.isDev header:before { left:  3.2rem; }
.isDev header:after	 { right: 3.2rem; }

}