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

/*   $ > AOX Fluid (v1.4) - 08/07/21

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

/***

1920 > 1366px(*) => Fixed
1365px > 768px => Fluid
767px > 520px => Fixed
519px > 320px => Fluid

(*) 1366px = Content = margin left (45px) + content width (1276px) + margin right (45px)

***/

body {
	min-width: 100vw;
    position: relative;
    overflow-x: hidden;
	}

/* ======================================== */
/*  Fluid
/* ======================================== */

/*** Init ***/

:root {
	--aox-1px: 1px;
	}

@media screen and (max-width: 1366px) {
	:root {
		--aox-1px: calc(100vw / 1366);
		}
	}

@media screen and (max-width: 767px) {
	:root {
		--aox-1px: calc(520px / 420);
		}
	}

@media screen and (max-width: 520px) {
	:root {
		--aox-1px: calc(100vw / 420);
		}
	}

/*** Sizes ***/

:root {

	--aox-2px: calc(var(--aox-1px) * 2);
	--aox-3px: calc(var(--aox-1px) * 3);
	--aox-4px: calc(var(--aox-1px) * 4);
	--aox-5px: calc(var(--aox-1px) * 5);
	--aox-6px: calc(var(--aox-1px) * 6);
	--aox-7px: calc(var(--aox-1px) * 7);
	--aox-8px: calc(var(--aox-1px) * 8);
	--aox-9px: calc(var(--aox-1px) * 9);
	--aox-10px: calc(var(--aox-1px) * 10);
	--aox-11px: calc(var(--aox-1px) * 11);
	--aox-12px: calc(var(--aox-1px) * 12);
	--aox-13px: calc(var(--aox-1px) * 13);
	--aox-14px: calc(var(--aox-1px) * 14);
	--aox-15px: calc(var(--aox-1px) * 15);
	--aox-16px: calc(var(--aox-1px) * 16);
	--aox-17px: calc(var(--aox-1px) * 17);
	--aox-18px: calc(var(--aox-1px) * 18);
	--aox-19px: calc(var(--aox-1px) * 19);
	--aox-20px: calc(var(--aox-1px) * 20);
	--aox-21px: calc(var(--aox-1px) * 21);
	--aox-22px: calc(var(--aox-1px) * 22);
	--aox-23px: calc(var(--aox-1px) * 23);
	--aox-24px: calc(var(--aox-1px) * 24);
	--aox-25px: calc(var(--aox-1px) * 25);
	--aox-26px: calc(var(--aox-1px) * 26);
	--aox-27px: calc(var(--aox-1px) * 27);
	--aox-28px: calc(var(--aox-1px) * 28);
	--aox-29px: calc(var(--aox-1px) * 29);

	--aox-30px: calc(var(--aox-1px) * 30);
	--aox-35px: calc(var(--aox-1px) * 35);
	--aox-40px: calc(var(--aox-1px) * 40);
	--aox-45px: calc(var(--aox-1px) * 45);
	--aox-50px: calc(var(--aox-1px) * 50);
	--aox-55px: calc(var(--aox-1px) * 55);
	--aox-60px: calc(var(--aox-1px) * 60);
	--aox-65px: calc(var(--aox-1px) * 65);
	--aox-70px: calc(var(--aox-1px) * 70);
	--aox-75px: calc(var(--aox-1px) * 75);
	--aox-80px: calc(var(--aox-1px) * 80);
	--aox-85px: calc(var(--aox-1px) * 85);
	--aox-90px: calc(var(--aox-1px) * 90);
	--aox-95px: calc(var(--aox-1px) * 95);
	--aox-100px: calc(var(--aox-1px) * 100);

	--aox-110px: calc(var(--aox-1px) * 110);
	--aox-120px: calc(var(--aox-1px) * 120);
	--aox-130px: calc(var(--aox-1px) * 130);
	--aox-140px: calc(var(--aox-1px) * 140);
	--aox-150px: calc(var(--aox-1px) * 150);
	--aox-160px: calc(var(--aox-1px) * 160);
	--aox-170px: calc(var(--aox-1px) * 170);
	--aox-180px: calc(var(--aox-1px) * 180);
	--aox-190px: calc(var(--aox-1px) * 190);
	--aox-200px: calc(var(--aox-1px) * 200);
	--aox-210px: calc(var(--aox-1px) * 210);
	--aox-220px: calc(var(--aox-1px) * 220);
	--aox-230px: calc(var(--aox-1px) * 230);
	--aox-240px: calc(var(--aox-1px) * 240);
	--aox-250px: calc(var(--aox-1px) * 250);
	--aox-260px: calc(var(--aox-1px) * 260);
	--aox-270px: calc(var(--aox-1px) * 270);
	--aox-280px: calc(var(--aox-1px) * 280);
	--aox-290px: calc(var(--aox-1px) * 290);
	--aox-300px: calc(var(--aox-1px) * 300);
	--aox-310px: calc(var(--aox-1px) * 310);
	--aox-320px: calc(var(--aox-1px) * 320);
	--aox-330px: calc(var(--aox-1px) * 330);
	--aox-340px: calc(var(--aox-1px) * 340);
	--aox-350px: calc(var(--aox-1px) * 350);
	--aox-360px: calc(var(--aox-1px) * 360);
	--aox-370px: calc(var(--aox-1px) * 370);
	--aox-380px: calc(var(--aox-1px) * 380);
	--aox-390px: calc(var(--aox-1px) * 390);
	--aox-400px: calc(var(--aox-1px) * 400);
	--aox-410px: calc(var(--aox-1px) * 410);
	--aox-420px: calc(var(--aox-1px) * 420);
	--aox-430px: calc(var(--aox-1px) * 430);
	--aox-440px: calc(var(--aox-1px) * 440);
	--aox-450px: calc(var(--aox-1px) * 450);
	--aox-460px: calc(var(--aox-1px) * 460);
	--aox-470px: calc(var(--aox-1px) * 470);
	--aox-480px: calc(var(--aox-1px) * 480);
	--aox-490px: calc(var(--aox-1px) * 490);
	--aox-500px: calc(var(--aox-1px) * 500);
	--aox-510px: calc(var(--aox-1px) * 510);
	--aox-520px: calc(var(--aox-1px) * 520);

	--aox-550px: calc(var(--aox-1px) * 550);
	--aox-600px: calc(var(--aox-1px) * 600);
	--aox-650px: calc(var(--aox-1px) * 650);
	--aox-700px: calc(var(--aox-1px) * 700);
	--aox-750px: calc(var(--aox-1px) * 750);
	--aox-800px: calc(var(--aox-1px) * 800);
	--aox-850px: calc(var(--aox-1px) * 850);
	--aox-900px: calc(var(--aox-1px) * 900);
	--aox-950px: calc(var(--aox-1px) * 950);
	--aox-1000px: calc(var(--aox-1px) * 1000);

	--aox-768px: calc(var(--aox-1px) * 768);
	--aox-1024px: calc(var(--aox-1px) * 1024);
	--aox-1080px: calc(var(--aox-1px) * 1080);
	--aox-1280px: calc(var(--aox-1px) * 1280);
	--aox-1440px: calc(var(--aox-1px) * 1440);
	--aox-1920px: calc(var(--aox-1px) * 1920);

	}

/*** Other sizes ***/

:root {
	--aox-72px: calc(var(--aox-1px) * 72);
	--aox-134px: calc(var(--aox-1px) * 134);
	--aox-195px: calc(var(--aox-1px) * 195);
	--aox-204px: calc(var(--aox-1px) * 204);
	--aox-342px: calc(var(--aox-1px) * 342);
	--aox-352px: calc(var(--aox-1px) * 352);
	--aox-374px: calc(var(--aox-1px) * 374);
	--aox-417px: calc(var(--aox-1px) * 417);
	--aox-546px: calc(var(--aox-1px) * 546);
	--aox-625px: calc(var(--aox-1px) * 625);
	--aox-640px: calc(var(--aox-1px) * 640);
	--aox-730px: calc(var(--aox-1px) * 730);
	--aox-1088px: calc(var(--aox-1px) * 1088);
	}

/* ======================================== */
/*  Grid
/* ======================================== */

/*** Init ***/

:root {
	--aox-grid: var(--aox-1088px);
	--aox-gutter: var(--aox-16px);
	}

/*** Calculations ***/

:root {
	--aox-external-gutter: calc((100vw - var(--aox-grid)) / 2);
    --aox-col: calc((var(--aox-grid) - (11 * var(--aox-gutter))) / 12);
	--aox-col-gutter: calc(var(--aox-col) + var(--aox-gutter));
	}

/*** Sizes ***/

:root {
    --aox-col-1: calc(var(--aox-col) * 1);
    --aox-col-2: calc((var(--aox-col) * 2) + (var(--aox-gutter) * 1));
    --aox-col-3: calc((var(--aox-col) * 3) + (var(--aox-gutter) * 2));
    --aox-col-4: calc((var(--aox-col) * 4) + (var(--aox-gutter) * 3));
    --aox-col-5: calc((var(--aox-col) * 5) + (var(--aox-gutter) * 4));
    --aox-col-6: calc((var(--aox-col) * 6) + (var(--aox-gutter) * 5));
    --aox-col-7: calc((var(--aox-col) * 7) + (var(--aox-gutter) * 6));
    --aox-col-8: calc((var(--aox-col) * 8) + (var(--aox-gutter) * 7));
    --aox-col-9: calc((var(--aox-col) * 9) + (var(--aox-gutter) * 8));
    --aox-col-10: calc((var(--aox-col) * 10) + (var(--aox-gutter) * 9));
    --aox-col-11: calc((var(--aox-col) * 11) + (var(--aox-gutter) * 10));
    --aox-col-12: calc((var(--aox-col) * 12) + (var(--aox-gutter) * 11));
	}

:root {
    --aox-col-1-gutter: calc((var(--aox-col) * 1) + (var(--aox-gutter) * 1));
    --aox-col-2-gutter: calc((var(--aox-col) * 2) + (var(--aox-gutter) * 2));
    --aox-col-3-gutter: calc((var(--aox-col) * 3) + (var(--aox-gutter) * 3));
    --aox-col-4-gutter: calc((var(--aox-col) * 4) + (var(--aox-gutter) * 4));
    --aox-col-5-gutter: calc((var(--aox-col) * 5) + (var(--aox-gutter) * 5));
    --aox-col-6-gutter: calc((var(--aox-col) * 6) + (var(--aox-gutter) * 6));
    --aox-col-7-gutter: calc((var(--aox-col) * 7) + (var(--aox-gutter) * 7));
    --aox-col-8-gutter: calc((var(--aox-col) * 8) + (var(--aox-gutter) * 8));
    --aox-col-9-gutter: calc((var(--aox-col) * 9) + (var(--aox-gutter) * 9));
    --aox-col-10-gutter: calc((var(--aox-col) * 10) + (var(--aox-gutter) * 10));
    --aox-col-11-gutter: calc((var(--aox-col) * 11) + (var(--aox-gutter) * 11));
	}

@media screen and (max-width: 767px) {

	/*** Init ***/

	:root {
		--aox-grid: var(--aox-374px);
		--aox-gutter: var(--aox-10px);
		}

	/*** Calculations ***/

	:root {
		--aox-external-gutter: calc((100vw - var(--aox-grid)) / 2);
		--aox-col: calc((var(--aox-grid) - (3 * var(--aox-gutter))) / 4);
		--aox-col-gutter: calc(var(--aox-col) + var(--aox-gutter));
		}

	/*** Sizes ***/

	:root {
		--aox-col-7: 100%;
		--aox-col-8: 100%;
		--aox-col-9: 100%;
		--aox-col-10: 100%;
		--aox-col-11: 100%;
		--aox-col-12: 100%;
		}

	:root {
		--aox-col-6-gutter: 100%;
		--aox-col-7-gutter: 100%;
		--aox-col-8-gutter: 100%;
		--aox-col-9-gutter: 100%;
		--aox-col-10-gutter: 100%;
		--aox-col-11-gutter: 100%;
		}

	}

/***/

.obj_grid_debug {
	position: fixed;
	top: 0;
	left: var(--aox-external-gutter);
	z-index: 999;
    display: flex;
    flex-direction: row;
    height: 100vh;
	width: 100%;
    max-width: var(--aox-grid);
	}
.obj_grid_debug > * {
	position: relative;
	width: var(--aox-col);
	border-left: solid 1px rgba(0, 255, 255, 0.3);
	border-right: solid 1px rgba(0, 255, 255, 0.3);
	background: rgba(0, 255, 255, 0.15);
	}
.obj_grid_debug > * + * {
	margin-left: var(--aox-gutter);
	}

@media screen and (max-width: 767px) {

	.obj_grid_debug > * {
		display: none;
		}
	.obj_grid_debug > *:nth-child(-n+4) {
		display: block;
		}

	}