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

/*   $ > 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)

***/

/* ======================================== */
/*  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-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);

	}

/*** Other sizes ***/

	:root {
		--aox-47px: calc(var(--aox-1px) * 47);
		--aox-105px: calc(var(--aox-1px) * 105);
		--aox-445px: calc(var(--aox-1px) * 445);
		--aox-485px: calc(var(--aox-1px) * 485); 
		--aox-620px: calc(var(--aox-1px) * 620);
		--aox-630px: calc(var(--aox-1px) * 630); 
		--aox-735px: calc(var(--aox-1px) * 735);
		--aox-870px: calc(var(--aox-1px) * 870);
		--aox-1220px: calc(var(--aox-1px) * 1220);
	}

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

/*** Init ***/

:root {
	--aox-grid: var(--aox-1276px);
	--aox-gutter: var(--aox-20px);
	}

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

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

	}

/*** 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));
	}

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

	/*** 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-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: 100%;
		--aox-col-6: 100%;
		--aox-col-7: 100%;
		--aox-col-8: 100%;
		--aox-col-9: 100%;
		--aox-col-10: 100%;
		--aox-col-11: 100%;
		--aox-col-12: 100%;
		}

	}