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

/*   $ > AOX Init (v2.0.1) - 04/04/23

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

@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,700");
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400');
@import url('https://fonts.googleapis.com/css?family=Parisienne:400');
@import url('https://fonts.googleapis.com/css?family=Alice:400');

@import url("AOX_Fluid_v2.css");
@import url("AOX_Font-size_v2.css");

/* ======================================== */
/*  Reset
/* ======================================== */

/* Reset Meyer */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
	}
body {
	line-height: 1;
	}
ol, ul {
	list-style: none;
	}
blockquote, q {
	quotes: none;
	}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
	}
table {
	border-collapse: collapse;
	border-spacing: 0;
	}

/* Reset AOX */

* {
	box-sizing: border-box;
	}

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

strong { font-weight: 700; }
em { font-style: italic; }
small {	font-size: 80%; }

code {
	display: inline-block;
	padding: var(--aox-2px) var(--aox-4px);
	font-family: monospace;
	font-size: var(--aox-fs-14px);
	border-radius: var(--aox-spacing-xxxs);
	background: var(--aox-color-grey-50);
	}

/* ======================================== */
/*  Init
/* ======================================== */

/*
	1920 > 1520px => Fixed
	1519px > 768px => Fluid
	767px > 520px => Fixed
	519px > 320px => Fluid

	1520px = Content = margin left (100px) + content width (1320px) + margin right (100px)
*/

:root {

	--aox-1px: 1px;

    --aox-grid: var(--aox-1320px);
	--aox-gutter: var(--aox-30px);
	--aox-columns: 15;

	--aox-viewport-width: 1520px;
	--aox-max-width: 1520;
	--aox-min-width: calc(var(--aox-max-width) * 0.75);

	}

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

	:root {

		--aox-1px: calc(100vw / 1520);

		--aox-viewport-width: 100vw;

		}

	}

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

	:root {

		--aox-1px: calc(520px / 420);

		--aox-grid: var(--aox-370px);
		--aox-gutter: var(--aox-20px);

		--aox-max-width: 420;
		--aox-min-width: 320;
		--aox-viewport-width: 520px;

		}

	}

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

	:root {

		--aox-1px: calc(100vw / 420);

		--aox-viewport-width: 100vw;

		}

	}

/* ======================================== */
/*  Graphic Library
/* ======================================== */

/*** Colors ***/

:root {

	--aox-color-green: #51f99f;
	--aox-color-purple: #6a1fff;
	--aox-color-grey: #262626;
	
	/* --aox-color-1: #e7343f;
	--aox-color-2: #f3954a;
	--aox-color-3: #fdc75f;
	--aox-color-4: #1f171d;
	--aox-color-5: #91858c; */

	--aox-color-neutral: #000000;
	--aox-color-neutral-90: #1a1a1a;
	--aox-color-neutral-80: #333333;
	--aox-color-neutral-70: #4d4d4d;
	--aox-color-neutral-60: #666666;
	--aox-color-neutral-50: #808080;
	--aox-color-neutral-40: #999999;
	--aox-color-neutral-30: #b3b3b3;
	--aox-color-neutral-20: #cccccc;
	--aox-color-neutral-10: #e5e5e5;
	--aox-color-neutral-0: #ffffff;

	--aox-color-negative: #FF5A5A;
	--aox-color-alert: #FFA75A;
	--aox-color-positive: #96DB75;

	}

/* ======================================== */
/*  Spacings
/* ======================================== */

:root {

	--aox-spacing-xxxs: var(--aox-5px);
	--aox-spacing-xxs: var(--aox-10px);
	--aox-spacing-xs: var(--aox-15px);
	--aox-spacing-s: var(--aox-20px);
	--aox-spacing: var(--aox-30px);
	--aox-spacing-l: var(--aox-45px);
	--aox-spacing-xl: var(--aox-60px);
	--aox-spacing-xxl: var(--aox-90px);
	--aox-spacing-xxxl: var(--aox-120px);

	}

/* ======================================== */
/*  Fonts
/* ======================================== */

.t_display.display_1 {
	font-weight: 900;
	font-size: var(--aox-fs-80px);
	line-height: var(--aox-lh-90);
	}
.t_display.display_2 {
	font-weight: 900;
	font-size: var(--aox-fs-60px);
	line-height: var(--aox-lh-90);
	}

.t_title.title_1 {
	font-weight: 900;
	font-size: var(--aox-fs-60px);
	line-height: var(--aox-lh-90);
	}
.t_title.title_2 {
	font-weight: 900;
	font-size: var(--aox-fs-34px);
	line-height: var(--aox-lh-90);
	}
.t_title.title_3 {
	font-weight: 900;
	font-size: var(--aox-fs-15px);
	line-height: var(--aox-lh-90);
	text-transform: uppercase;
	letter-spacing: 0.2em;
	}

:root {

	--aox-fs-display-l: var(--aox-fs-100px);
	--aox-fs-display: var(--aox-fs-80px);
	--aox-fs-display-s: var(--aox-fs-60px);

	--aox-fs-title-l: var(--aox-fs-50px);
	--aox-fs-title: var(--aox-fs-40px);
	--aox-fs-title-s: var(--aox-fs-30px);

	--aox-fs-text-l: var(--aox-fs-18px);
	--aox-fs-text: var(--aox-fs-16px);
	--aox-fs-text-s: var(--aox-fs-14px);

	--aox-fs-caption: var(--aox-fs-12px);

	}

/* ======================================== */
/*  Shadows
/* ======================================== */

:root {

	--aox-shadow-s: 0 var(--aox-5px) var(--aox-10px) rgba(0, 0, 0, 0.20);
	--aox-shadow: 0 var(--aox-10px) var(--aox-20px) rgba(0, 0, 0, 0.15);
	--aox-shadow-l: 0 var(--aox-15px) var(--aox-30px) rgba(0, 0, 0, 0.10);

	}