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

/*   $ > AOX Fluid (v1.3) - 24/03/21

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

/***

1920px > 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;
	}

/*** Calculation(s) ***/

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

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

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

/*** Size(s) ***/

: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-40px: calc(var(--aox-1px) * 40);
	--aox-50px: calc(var(--aox-1px) * 50);
	--aox-60px: calc(var(--aox-1px) * 60);
	--aox-70px: calc(var(--aox-1px) * 70);
	--aox-80px: calc(var(--aox-1px) * 80);
	--aox-90px: calc(var(--aox-1px) * 90);
	--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-450px: calc(var(--aox-1px) * 450);
	--aox-500px: calc(var(--aox-1px) * 500);
	--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-1024px: calc(var(--aox-1px) * 1024);
	--aox-1280px: calc(var(--aox-1px) * 1280);
	--aox-1440px: calc(var(--aox-1px) * 1440);
	--aox-1920px: calc(var(--aox-1px) * 1920);
	
	}

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

/*** Init ***/

:root {
	--aox-grid: var(--aox-1700px);
	--aox-gutter: var(--aox-40px);
	}

/*** Calculation(s) ***/

: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));
	}

/*** Size(s) ***/

: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) {
	
	:root {
		--aox-grid: var(--aox-370px);
		--aox-gutter: var(--aox-20px);
		}
	
	/*** Calculation(s) ***/
	
	:root {
		--aox-external-gutter: calc((100vw - var(--aox-grid)) / 2);
		--aox-col: calc((var(--aox-grid) - (5 * var(--aox-gutter))) / 6);
		--aox-col-gutter: calc(var(--aox-col) + var(--aox-gutter));
		}
	
	/*** Size(s) ***/
	
	: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+6) {
		display: block;
		}

	}

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

/*** Size(s) ***/

:root {
	--aox-34px: calc(var(--aox-1px) * 34);
	--aox-35px: calc(var(--aox-1px) * 35);
	--aox-45px: calc(var(--aox-1px) * 45);
	--aox-65px: calc(var(--aox-1px) * 65);
	--aox-75px: calc(var(--aox-1px) * 75);
	--aox-85px: calc(var(--aox-1px) * 85);
	--aox-105px: calc(var(--aox-1px) * 105);
	--aox-125px: calc(var(--aox-1px) * 125);
	--aox-175px: calc(var(--aox-1px) * 175);
	--aox-215px: calc(var(--aox-1px) * 215);
	--aox-325px: calc(var(--aox-1px) * 325);
	--aox-395px: calc(var(--aox-1px) * 395);
	--aox-475px: calc(var(--aox-1px) * 475);
	--aox-480px: calc(var(--aox-1px) * 480);
	--aox-490px: calc(var(--aox-1px) * 490);
	--aox-540px: calc(var(--aox-1px) * 540);
	--aox-560px: calc(var(--aox-1px) * 560);
	--aox-580px: calc(var(--aox-1px) * 580);
	--aox-630px: calc(var(--aox-1px) * 630);
	--aox-640px: calc(var(--aox-1px) * 640);
	--aox-660px: calc(var(--aox-1px) * 660);
	--aox-680px: calc(var(--aox-1px) * 680);
	--aox-725px: calc(var(--aox-1px) * 725);
	--aox-740px: calc(var(--aox-1px) * 740);
	--aox-760px: calc(var(--aox-1px) * 760);
	--aox-780px: calc(var(--aox-1px) * 780);
	--aox-860px: calc(var(--aox-1px) * 860);
	--aox-910px: calc(var(--aox-1px) * 910);
	--aox-960px: calc(var(--aox-1px) * 960);
	--aox-1100px: calc(var(--aox-1px) * 1100);
	--aox-1200px: calc(var(--aox-1px) * 1200);
	--aox-1700px: calc(var(--aox-1px) * 1700);
}