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

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

:root {
	--main-color: 000, 123, 089;
	--half-color: 138, 205, 164;
	--back-color: 239, 237, 233;
	--alts-color: 250, 250, 250;
}

html {
	height: 100%;
	scroll-padding-top: 8.0rem;
	scroll-behavior: smooth;
	font-size: 0.6945vw;
	overflow-y: scroll;
	cursor: default;
}
	
body {
	height: 100%;
	-webkit-font-smoothing: antialiased !important;
	-webkit-text-size-adjust: none !important;
	font-smoothing: antialiased !important;
	background: rgba(var(--back-color), 1.0);
	color: rgba(021, 021, 021, 1.0);
	line-height: 0;
	padding: 0;
	margin: 0;
}

.setWrapper {
	width: calc(100% - 6.4rem);
	margin: 12.8rem auto;
	position: relative;
	text-align: center;
	max-width: 108rem;
	z-index: 100;
}

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

header,
footer,
section {
	width: 100%;
	position: relative;
	overflow: hidden;
}

header {
	box-shadow: 0.0rem 0.0rem 1.6rem 0.0rem rgba(0, 0, 0, 0.25);
	background: rgba(255, 255, 255, 1.0);
	overflow: unset;
	position: fixed;
	z-index: 9999;
	left: 0;
	top: 0;
}

footer {
	background: #606060;
	color: rgba(255,255,255, 1.0);
}

section:first-of-type {
	margin-top: 8.0rem;
}

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

h1			{ font: 500 4.8rem/1.00em 'Din Pro', sans-serif; margin-bottom: 1.6rem; letter-spacing: -0.025rem; }
h2			{ font: 500 4.0rem/1.10em 'Din Pro', sans-serif; margin-bottom: 1.6rem; letter-spacing: -0.000rem; }
h3			{ font: 500 3.2rem/1.10em 'Din Pro', sans-serif; margin-bottom: 1.6rem; letter-spacing: -0.000rem; text-transform: uppercase; }
h4			{ font: 500 2.8rem/1.10em 'Din Pro', sans-serif; margin-bottom: 1.6rem; letter-spacing: -0.000rem; text-transform: uppercase; }
h5			{ font: 500 2.4rem/1.10em 'Din Pro', sans-serif; margin-bottom: 1.6rem; letter-spacing: -0.000rem; text-transform: uppercase; }
h6			{ font: 500 2.1rem/1.10em 'Din Pro', sans-serif; margin-bottom: 1.6rem; letter-spacing: -0.000rem; text-transform: uppercase; }
p, dd 	{ font: 300 2.0rem/1.25em 'Din Pro', sans-serif; margin-bottom: 1.6rem; letter-spacing: +0.000rem; }
small 	{ font: 300 1.6rem/1.25em 'Din Pro', sans-serif; margin-bottom: 1.6rem; letter-spacing: +0.025rem; display: inline-block; }
a 			{ text-decoration: none; }

strong  { font-weight: 500; }

h1 > span {
	text-transform: uppercase;
	letter-spacing: 0.0rem;
	line-height: 1.0em;
	font-size: 1.8rem;
	display: block;
}

h1 > strong {
	letter-spacing: -0.1em;
	font-size: 125%;
}

footer small {
	font-size: 1.6rem;
}

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

header .setWrapper  {
	justify-content: space-between;
	align-items: center;
	margin: 2.4rem auto;
	max-width: unset;
	display: flex;
	gap: 3.2rem;
}

nav > ul {
	width: 100%;
	font: 400 1.6rem/2.0em 'Din Pro', sans-serif;
	justify-content: center;
	white-space: nowrap;
	display: flex;
	gap: 3.2rem;
}

nav > ul > li {
	position: relative;
}

nav > ul > li > ul {
	min-width: 19.2rem;
	background: rgb(255, 255, 255);
	border-radius: 0.0rem  0.0rem 1.6rem 1.6rem;
	transition: all 0.25s ease-in-out;
	transform: translateX(-50%);
	line-height: 1.80em;
	position: absolute;
	visibility: hidden;
	padding: 1.6rem;
	opacity: 0;
	left: 50%;
}

nav ul > li > a:hover {
	color: #007B59;
}

nav > ul > li:hover > ul {
	padding-top: 4.0rem;
	visibility: visible;
	opacity: 1;
}

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

.setGrid .setItem.isB1 > div,
.setGrid .setItem.isB2 > div,
.setGrid:not(.isC03) .setItem > div {
	width: calc(100% -  25.6rem);
	transform: translate(-50%, -50%);
	position: absolute;
	color: #007B59;
	z-index: 100;
	left: 50%;
	top: 40%;
}

.setGrid .setItem > div > * {
	max-width: 48rem;
}

.setGrid .setItem > div .setButton {
	margin-bottom: 6.4rem;
	background: #007B59;
}

.setGrid .setItem > div .setButton.isFixed {
	position: absolute;
	top: 50%;
	right: 0;
}

.setProducts {
	flex-direction: column;
	margin: 0.0rem auto;
	display: flex;
}

.setProducts > li {
	flex-direction: row;
	align-items: center;
	position: relative;
	text-align: left;
	display: flex;
	gap: 6.4rem;
}

.setProducts > li:nth-child(2n) {
	flex-direction: row-reverse;
	position: relative;
	text-align: right;
	z-index: 100;
}

.setProducts > li > * {
	position: relative;
	width: 50%;
}

.setProducts > li > *:first-child {
	transform: scale(1.25);
}

.setProducts > li > * > img {
	transition: all 0.25s ease-in-out !important;
	position: relative;
	z-index: 20;
}

.setProducts > li > * > img:nth-child(1),
.setProducts > li > * > img:nth-child(3) {
	position: absolute;
	z-index: 10;
	left: 0;
	top: 0;
}

.setProducts > li > *:hover > img:nth-child(1) { transform: translateZ(0) scale(0); }  
.setProducts > li > *:hover > img:nth-child(3) { opacity: 0; }

.setProducts > li > * > img:nth-child(3) {
	z-index: 30;
}

#Contacto {
	background: rgba(var(--main-color), 1.0);
	color: rgba(var(--alts-color), 1.0);
}

/* ---------------------------------------- */
/* ----- >>> Section: Product ------------- */
/* ---------------------------------------- */

.isProduct .setColumns > div {
	padding-bottom: 6.4rem;
}

.isProduct .setColumns > div > img {
	transform: scale(0.9);
	position: relative;
	z-index: 20;
}

.isProduct .setColumns > div > img:nth-of-type(1),
.isProduct .setColumns > div > img:nth-of-type(3) {
	position: absolute;
	left: 0;
	top: 0;
}

.isProduct .setColumns > div > img:nth-of-type(1) { z-index: 10; }
.isProduct .setColumns > div > img:nth-of-type(3) { z-index: 30; }

.isProduct section:nth-of-type(2) > div > p {
	margin: 0 auto 1.6rem auto;
	max-width:  70rem;
}

.isProduct section:nth-of-type(2) > div > .setUse {
	text-align: left;
	justify-content: center;
	align-items: center;
	margin: 0 auto;
	display: flex;
	gap: 3.2rem;
}

.isProduct section:nth-of-type(2) > div > .setUse > img,
.isProduct section:nth-of-type(2) > div > .setUse > picture {
	max-width: 19.2rem;
}

.isProduct section:nth-of-type(2) > div > .setUse > p {
	font-weight: 500;
	text-transform: uppercase;
	line-height: 0.8em;
	font-size: 4.4rem;
}

.isProduct section:nth-of-type(2) > div > .setUse > p > span {
	letter-spacing: 0.1em;
	font-size: 2.1rem;
	display: block;
}

.isProduct section:nth-of-type(3) > div > .setBox {
	width: 100%;
	justify-content: center;
	position: relative;
	display: flex;
}

.isProduct section:nth-of-type(3) > div > .setBox > div {
	width: 50%;
}

.isProduct section:nth-of-type(3) > div > .setBox > div > p {
	text-transform: uppercase;
	line-height: 1.25em;
	font-size: 2.1rem;
}

.isProduct section:nth-of-type(1) { background: rgba(var(--main-color), 1.0); }
.isProduct section:nth-of-type(2) { background: rgba(var(--main-color), 1.0); color: #FFFFFF; }
.isProduct section:nth-of-type(3) { background: rgba(var(--half-color), 1.0); }

.isProduct section:nth-of-type(3):before { 
	width: 100%;
	height: 50%;
	background: rgba(var(--back-color), 1.0);
	position: absolute;
	content: "";
	z-index: 0;
	bottom: 0;
}

.isProduct .setColumns > div > p.isAlt {
	position: relative;
	padding-left: 6.4rem;
	flex-wrap: wrap;
	display: flex;
}

.isProduct .setColumns > div > p.isAlt > span {
	left: -6.4rem;
	margin-bottom: 0.6rem;
	position: relative;
}

.isProduct .setColumns > div > p.isAlt > img {
	position: absolute;
	width: 4.8rem;
	bottom: 0;
	left: 0;
}

/* ---------------------------------------- */
/* ----- >>> Section: Recomendación ------- */
/* ---------------------------------------- */

.isAdvice *:is(h1, h2, h3, h4, h5, h6) {
	color: rgba(var(--main-color), 1.0);
	text-transform: uppercase;
}

.isAdvice .isC01 .setItem {
	background: #EAE8E4;
}

.isAdvice .isC01 .setItem:before {
	width:  100%;
	height: 100%;
	position: absolute;
	background: #EAE8E4;
	content: "";
	left: 0;
	top: 0;
}

.isAdvice .isC01 .setItem:nth-child(1):before { transform: translateX(-100%); }
.isAdvice .isC01 .setItem:nth-child(2):before { transform: translateX(+100%); } 

.isAdvice .isC01 .setItem:nth-child(1) { padding: 4.8rem 12.8rem 4.8rem 0.0rem; border-radius: 00.0rem 16.0rem 16.0rem 00.0rem }
.isAdvice .isC01 .setItem:nth-child(2) { padding: 4.8rem 0.0rem 4.8rem 12.8rem; border-radius: 16.0rem 00.0rem 00.0rem 16.0rem }

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

.isAdvice .isC02 .setItem {
	text-align: center;
}

.isAdvice .isC02 .setItem > p {
	line-height: 1.25em;
	font-size: 1.8rem;
}

.isAdvice .setColumns {
	align-items: center;
	margin: 4.8rem auto;
	gap: 9.6rem;
}
.isAdvice .setColumns > div:nth-child(1)  { width: 40%; padding: 0.0rem; }
.isAdvice .setColumns > div:nth-child(2)  { width: 60%; padding: 0.0rem; }

.isAdvice .setColumns > div:nth-child(1) > img {
	width: 64rem;
	border-radius: 0.0rem 32rem 32rem 0.0rem;
	transform: translateX( -19.2rem);
}

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

.isAdvice .isC03  .setItem {
	display: flex;
	gap: 2.4rem;
}

.isAdvice .isC03  .setItem * {
	margin-bottom: 0.8rem;
}

.isAdvice .isC03  .setItem > div:nth-child(1) > img {
	box-shadow: 0.0rem 0.0rem 0.0rem 0.4rem #00A57A;
	border: 0.4rem solid #007B59;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	overflow: hidden;
	width: 14.4rem;
}

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

.isAdvice .isP02 {
	position: absolute;
	border-radius: 32rem 0.0rem 0.0rem 32rem;
	width: 66rem;
	z-index: 100;
	top: 6.4em;
	right: 0;
}

.isAdvice .setTable {
	flex-direction: column;
	margin-top: 14.4rem;
}

.isAdvice .setTable,
.isAdvice .setTable > li,
.isAdvice .setTable > li > div  {
	font: 300 1.8rem/1.25em 'Din Pro', sans-serif;
	transition: color 0.25s ease-in-out;
	gap: 3.2rem 4.8rem;
	position: relative;
	display: flex;
	width: 100%;
}

.isAdvice .setTable > li:first-child > div,
.isAdvice .setTable > li > div:first-child {
	text-transform: uppercase !important;
	font-size: 2.4rem !important;
	font-weight: 500 !important;
}

.isAdvice .setTable > li > div:nth-child(1) { width: 25%; }
.isAdvice .setTable > li > div:nth-child(2) { width: 40%; }
.isAdvice .setTable > li > div:nth-child(3) { width: 20%; }
.isAdvice .setTable > li > div:nth-child(4) { width: 20%; }

.isAdvice .setTable > li:not(:first-child) > div {
	position: relative;
	align-items: center;
}

.isAdvice .setTable > li > div > span {
	text-transform: uppercase;
	font-weight: 500;
	display: none;
}

.isAdvice .setTable > li:not(:first-child):hover,
.isAdvice .setTable > li:not(:first-child) > div:first-child {
	color: #FFF;
}

.isAdvice .setTable > li:not(:first-child):before {
	width: calc(100vw + 25.6rem);
	height: 100%;
	border-radius: 0.0rem 12.8rem 12.8rem 0.0rem;
	transform: translateX(calc(-100% + 25.6rem));
	transition: all 0.25s ease-in-out;
	position: absolute;
	content: "";
	left: 0;
	top: 0;
}

.isAdvice .setTable > li:hover:not(:first-child):before {
	transform: translateX(-25.6rem);
}

.isAdvice .setTable > li:nth-child(3):after {
	transform: translateX(100%);
	left: unset;
	right: 0;
}

.isAdvice .setTable > li:nth-child(2):before { background: #007B59; }
.isAdvice .setTable > li:nth-child(3):before { background: #009F7A; color: #FFFFFF; }
.isAdvice .setTable > li:nth-child(4):before { background: #5DA987; }
.isAdvice .setTable > li:nth-child(5):before { background: #84C79E; }

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

.isAdvice section:nth-of-type(1) { background: rgba(132, 199, 158, 1.0); }
.isAdvice section:nth-of-type(2) { background: rgba(132, 199, 158, 1.0); }
.isAdvice section:nth-of-type(3) *:is(h1, h2, h3, h4, h5, p) {
	color: rgba(255, 255, 255, 1.0);
}
.isAdvice section:nth-of-type(3):before {
	background: rgba(000, 159, 122, 1.0);
	width:  calc(100% - 9.6rem);
	height: calc(100% - 9.6rem);
	position: absolute;
	margin: 4.8rem;
	content: "";
	z-index: 0;
}

.isAdvice section:nth-of-type(3) { background: rgba(255, 255, 255, 1.0); }
.isAdvice section:nth-of-type(4) { background: rgba(180, 216, 194, 1.0); }
.isAdvice section:nth-of-type(5) { background: rgba(204, 229, 215, 1.0); }
.isAdvice section:nth-of-type(6) { background: rgba(234, 232, 228, 1.0); }

.isAdvice section:nth-of-type(6) {
	padding-top: 12.8rem;
}

.isAdvice section:nth-of-type(6):before {
	width:  100%;
	height: 12.8rem;
	background: #FFFFFF;
	position: absolute;
	content: "";
	left: 0;
	top: 0;
}

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

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

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

.isTTU { text-transform: uppercase; }

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

.isFull { width: calc(100% - 00.0rem) !important; max-width: unset; margin: 0 !important; }
.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; }

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

.setColumns {
	background: rgba(var(--back-color), 1.0);
	flex-direction: row;
	display: flex;
}

.setColumns > div {
	width: 50%;
	align-items: flex-start;
	flex-direction: column;
	position: relative;
	text-align: left;
	display: flex;
}

.setColumns > div:nth-child(2) {
	background: #F4F2EE;
	padding: 9.6rem;
}

.setColumns > div > ul {
	margin-top: 3.2rem;
	display: flex;
	gap: 3.2rem;
}

.setColumns > div > ul > li > p {
	color: rgba(var(--main-color), 1.0);
}

.setColumns > div:nth-child(1) > h1 {
	width: 100%;
	color: rgba(var(--main-color));
	text-align: center;
	position: absolute;
	margin-top: 9.6rem;
} 

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

.setGrid,
.setGrid .setItems {
	width: 100%;
}

.setGrid:not(.setSwiper) .setItems {
	flex-wrap: wrap;
	display: flex;
	gap: 4.8rem;
}

.setGrid[data-max="2"] .setItems > .setItem  { width: calc(50.000000% - 2.6rem); }
.setGrid[data-max="3"] .setItems > .setItem  { width: calc(33.323232% - 3.4rem); }
.setGrid[data-max="4"] .setItems > .setItem  { width: calc(25.000000% - 3.8rem); }

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

.setSwiper {
	z-index: 9000;
	position: relative;
	overflow: hidden;
}

.setSwiper .setItems .setItem {
	margin-bottom: 0;
}

.setPrev,
.setNext {
	width:  4.8rem;
	height: 4.8rem;
	background: url(../assets/SVG/SVG_ARW.svg?00002) no-repeat 0 0 / 200% 100%;
	transform: translateY(-50%);
	position: absolute;
	cursor: pointer;
	z-index: 9999;
	top: 44.5%;
}

.setPrev { left:  3.2rem; background-position: 000% 000%; }
.setNext { right: 3.2rem; background-position: 100% 000%; }

.setDots {
	justify-content: center;
	align-items: center;
	margin-top: 3.2rem;
	display: flex;
	gap: 1.6rem;
}

.setDots > span {
	width:	0.8rem;
	height: 0.8rem;
	border: thin solid var(--bkg-color);
	transition: all 0.25s ease-in-out;
	border-radius: 50%;
	position: relative;
}

.setDots > span.isActive {
	background: var(--bkg-color);
}

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

dl, dt , dd {
	text-align: left;
	width: 100%;
}

dl {
	border-bottom: 1px solid rgba(0, 0, 0, 0.15);
	margin-top: 6.4rem;
}

dt {
	font: 400 2.4rem/1.50em 'Din Pro', sans-serif;
	padding: 2.4rem 2.4rem;
	position: relative;
	cursor: pointer;
}

dt:not(:first-of-type) {
	border-top: 1px solid rgba(0, 0, 0, 0.15);
}

dd {
	padding: 0.0rem 2.4rem 3.2rem 2.4rem;
	margin-bottom: 0;
	display: none;
}

dt:after {
	width:  3.2rem;
	height: 3.2rem;
	font: 300 3.2rem/3.2rem 'Din Pro', sans-serif;
	transition: all 0.25s ease-in-out;
	transform: translateY(-50%);
	text-align: center;
	position: absolute;
	right: 1.6rem;
	content: "+";
	top: 50%;
}

dt.isActive:after {
	transform: translateY(-50%) rotate(225deg);
}

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

.setButton {
	font: 400 1.8rem/3.2rem 'Din Pro', sans-serif;
	background: rgba(var(--back-color), 1.0);
	padding: 0.8rem 3.2rem 0.4em 3.2rem;
	transition: all 0.25s ease-in-out !important;
	display: inline-block;
	border-radius: 3.2rem;
	margin-top: 0.8rem;
	text-align: center;
	cursor: pointer;
	color: #FFFFFF;
}

.setButton:hover {
	transform: scale(1.05) !important;
	opacity: 0.8;
}

/* ---------------------------------------- */
/* ----- >>> Masks ------------------------ */
/* ---------------------------------------- */


.isM00 {
	min-height: 80rem;
}

.isM01,
.isM02 {
	mask-image: url(../assets/SVG/SVG_M01.svg?00002);
	mask-position: center bottom;
	mask-repeat: no-repeat; 
	mask-size: cover;
}


.isM02 {
	mask-image: url(../assets/SVG/SVG_M02.svg?00001);
	mask-position: center top;
}

.isM02 .setColumns > div:nth-child(2) > *:first-child {
	margin-top: 12.8rem;
}

.isSHP:before {
	width: 100%;
	height: 24rem;
	background: url(../assets/SVG/SVG_SHP.svg?00001);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	z-index: 9998;
	content: "";
	bottom: 0;
	left: 0;
}

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

i {
	width:  3.2rem;
	aspect-ratio: 1 / 1;
	background-repeat: no-repeat;
	background-position: 0% 0%;
	display: inline-block;
}

.isBND {
	width:  9.6rem;
	aspect-ratio: 3 / 1;
	background-image: url(../assets/SVG/SVG_BND.svg?00001);
}

.isISO {
	width:  14.4rem;
	aspect-ratio: 2 / 1;
	background-image: url(../assets/SVG/SVG_ISO.svg?00001);
	margin-bottom: 3.2rem;
}

.isAGR {
	width:  25.6rem;
	aspect-ratio: 6 / 1;
	background-image: url(../assets/SVG/SVG_AGR.svg?00001);
	margin-bottom: 2.4rem;
}


.isICN {
	width: 8.0rem;
	background-image: url(../assets/SVG/SVG_ICN.svg?00001);
}

.isS02 {
	width:  12.8rem;
	height: 12.8rem;
	background-image: url(../assets/SVG/SVG_S02.svg?00001);
	baco
}

.isP31 { background-position: 000% 000%; }
.isP32 { background-position: 050% 000%; }
.isP33 { background-position: 100% 000%; }

.isP41 { background-position: 000% 000%; }
.isP42 { background-position: 033% 000%; }
.isP43 { background-position: 066% 000%; }
.isP44 { background-position: 100% 000%; }

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

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

.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;
}

/* ---------------------------------------- */
/* ----- >>> 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) {
	margin-bottom: 0;
}

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

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

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