/* ====================================================================== */
/* =========================== Default Screen =========================== */
/* ====================================================================== */

*,
*::after,
*::before {
	background-position: center center;
	background-repeat: no-repeat;
	box-sizing: border-box;
	background-size: cover;
}

html {
	height: 100%;
	font-family: 'Helvetica', sans-serif;
	background: #232323;
	scroll-behavior: smooth;
	font-size: 0.6945vw;
	overflow-y: scroll;
	font-weight: 700;
	cursor: default;
	color: #FAFAFA;
}
	
body {
	height: 100%;
	-webkit-font-smoothing: antialiased !important;
	-webkit-text-size-adjust: none !important;
	font-smoothing: antialiased !important;	
	line-height: 0;
	padding: 0;
	margin: 0;
}

.setWrapper {
	width: calc(100% - 6.4rem);
	margin: 9.6rem auto;
	position: relative;
}

/* ---------------------------------------- */
/* ----- >>> Structure -------------------- */
/* ---------------------------------------- */

section {
	width: 100%;
	height: 100vh;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	display: flex;
}

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

p {
	font: 700 1.4rem/1.75em 'Helvetica', sans-serif;
	text-transform: uppercase;
	margin-bottom: 1.6rem;
}

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

img {
	width: 100%;
	height: auto !important;
	display: block;
}

.setIMG {
	width: 100%;
	background-position: center center;
	background-repeat: no-repeat;
	background-color: #EAEAEA;
	background-size: cover;
	aspect-ratio: 1 / 1;
	position: relative;
}


.isTAL { text-align: left; }
.isTAC { text-align: center; }
.isTAR { text-align: right; }

video {
	width:  100%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	position: absolute;
	z-index: 80;
	left: 50%;
	top: 50%;
}

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

.isFull { width: calc(100% - 00.0rem); }
.isWide { width: calc(100% - 06.4rem); }
.isAuto { width: calc(100% - 12.8rem); }
.isThir { width: calc(075% - 00.0rem); }
.isHalf { width: calc(050% - 00.0rem); }

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

.isMRG00 { margin:   16rem auto !important;  }

.isMTA00 { margin-top:	  auto	!important; }
.isMT000 { margin-top:	  00.0rem !important; }
.isMT008 { margin-top:	  00.8rem !important; }
.isMT016 { margin-top:	  01.6rem !important; }
.isMT032 { margin-top:	  03.2rem !important; }
.isMT024 { margin-top:	  02.4rem !important; }
.isMT048 { margin-top:	  04.8rem !important; }
.isMT064 { margin-top:	  06.4rem !important; } 
.isMT072 { margin-top:	  07.2rem !important; }
.isMT080 { margin-top:	  08.0rem !important; }
.isMT096 { margin-top:	  09.6rem !important; }
.isMT112 { margin-top:	  11.2rem !important; }
.isMT128 { margin-top:	  12.8rem !important; }
.isMT144 { margin-top:	  14.4rem !important; }
.isMT160 { margin-top:	  16.0rem !important; }
.isMT256 { margin-top:	  25.6rem !important; }

.isMB000 { margin-bottom: 00.0rem !important; }
.isMB004 { margin-bottom: 00.4rem !important; }
.isMB008 { margin-bottom: 00.8rem !important; }
.isMB016 { margin-bottom: 01.6rem !important; }
.isMB032 { margin-bottom: 03.2rem !important; }
.isMB048 { margin-bottom: 04.8rem !important; }
.isMB054 { margin-bottom: 05.4rem !important; }
.isMB064 { margin-bottom: 06.4rem !important; }
.isMB072 { margin-bottom: 07.2rem !important; }
.isMB080 { margin-bottom: 08.0rem !important; }
.isMB096 { margin-bottom: 09.6rem !important; }
.isMB112 { margin-bottom: 11.2rem !important; }
.isMB128 { margin-bottom: 12.8rem !important; }
.isMB144 { margin-bottom: 14.4rem !important; }
.isMB160 { margin-bottom: 16.0rem !important; }
.isMB256 { margin-bottom: 25.6rem !important; }

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

.isBND {
	width: 30vw;
	aspect-ratio: 5 / 1;
	background: url(../assets/SVG/SVG_BND.svg) no-repeat center center / cover;
	transform: translateX(-5%);
	margin-bottom: 3.2rem;
}


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

.setMenu {
	height: 1.2rem;
	z-index: 9990;
}

.setMenu .setIcon {
	width:  2.0rem;
	height: 1.0rem;
	position: relative;
	cursor: pointer;
	float: right;
}

.setMenu .setIcon span {
	width:  100%;
	height: 0.2rem;
	display: block;
	transition: .25s;
	transform: rotate(0deg);
	border-radius: 3.2rem;
	background: #212121;
	position: absolute;
	opacity: 1;
	left: 0;
}

.setMenu .setIcon span:nth-child(1) { top: 000%; }
.setMenu .setIcon span:nth-child(2),
.setMenu .setIcon span:nth-child(3) { top: 050%; }
.setMenu .setIcon span:nth-child(4) { top: 100%; }

.setMenu .setIcon.isActive span:nth-child(1) {
	width: 0%;
	left: 50%;
	top: 0.8rem;
}

.setMenu .setIcon.isActive span:nth-child(2) {
	transform: rotate(45deg);
}

.setMenu .setIcon.isActive span:nth-child(3) {
	transform: rotate(-45deg);
}

.setMenu .setIcon.isActive span:nth-child(4) {
	width: 0%;
	left: 50%;
	top: 0.8rem;
}

/* ---------------------------------------- */
/* ----- >>> Animations ------------------- */
/* ---------------------------------------- */

a,
button {
	transition: all 0.25s ease-in-out;
}

/* ---------------------------------------- */
/* ----- >>> Color Scheme ----------------- */
/* ---------------------------------------- */

:root {
	--main-color: #000000;
	 --bkg-color: #000000;
}


[data-color="Red"]			{ background-color: #FF2D2A; }
[data-color="Orange"]		{ background-color: #FF6C39; }
[data-color="Yellow"]		{ background-color: #FFC646; }
[data-color="Green"]		{ background-color: #469F58; }
[data-color="Blue"]			{ background-color: #1F5099; }
[data-color="Pink"]			{ background-color: #E2C0C4; }
[data-color="Lila"]			{ background-color: #D1C2D9; }
[data-color="Morning"]		{ background-color: #9EB1DA; }
[data-color="Mint"]			{ background-color: #BECCD0; }
[data-color="Eucalyptus"]	{ background-color: #4F616B; }
[data-color="Petrol"]		{ background-color: #44495E; }
[data-color="Matone"]		{ background-color: #895041; }
[data-color="Cocoa"]		{ background-color: #6D4834; }
[data-color="Ginger"]		{ background-color: #B8A78A; }
[data-color="Black"]		{ background-color: #1A1A1A; }
[data-color="Grafitte"]		{ background-color: #3C3C3B; }
[data-color="Ash"]			{ background-color: #9E9E9D; }
[data-color="White"]		{ background-color: #FAFAFA; color: #212121; }

/* ---------------------------------------- */
/* ----- >>> CSS Hacks -------------------- */
/* ---------------------------------------- */

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

input[type=number] {
	-moz-appearance: textfield;
}

* html .setClearfix{ 
	height: 1%;
}

.setClearfix{ 
	display: inline-block; 
}

.setClearfix:after {
	content: "\00A0";
	visibility: hidden;
	line-height: 0;
	display: block;
	clear: both;
	height: 0;
}

*:last-child:not(.setWrapper) {
	/* box-shadow:inset 0rem 0rem 0rem 0.05rem #f00; */
	margin-bottom: 0;
}

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

.isDev * {
	box-shadow: inset 0rem 0rem 0rem 0.05rem #FF1DFF;
}

.isDev .setWrapper {
	background: rgba(255, 0, 0, 0.1);
}

.isDev .setBlock					{ background: rgba(255, 0, 0, 0.1); }
.isDev .setBlock > div:nth-child(1) { background: rgba(0, 255, 0, 0.1); }
.isDev .setBlock > div:nth-child(2) { background: rgba(0, 0, 255, 0.1); }
.isDev .setBlock > div:nth-child(3) { background: rgba(255, 0, 0, 0.1); }