/*------------------------------------*\
    PADDINGS, MARGINS
\*------------------------------------*/

/*------------------------------------*\
    PADDINGS
\*------------------------------------*/
:root {
  --xxxl: 7.0em;
  --xxl: 6.0em;
  --xl: 5.0em;
  --lg: 3.0em;
  --md: 2em;
  --gap: 25px; /*8px*/
  --gap-xl: 1.5%;
  --color-primary: #27282c;
  --color-secondary: #27282c;
  --color-third: #27282c;
  --color-fourth: #27282c;
  --color-lt: #f7f7f7;
  --color-orange: #e08b01;
  --color-dk: #1A1A1A;   
  --color-white: #ffffff;
  --color-black: #000000;
  --font-extrasmall: 13px;
  --font-small: 14px;
  --font-normal: 16px;
}

.p-xl
{
	padding: var(--xl);
}
.p-t-xl
{
	padding-top: var(--xl);
}
.p-t-xxl
{
	padding-top: var(--xxl);
}
.p-t-xxxl
{
	padding-top: var(--xxxl);
}
.p-b-xl
{
	padding-bottom: var(--xl);
}
.p-b-xxl
{
	padding-bottom: var(--xxl);
}
.p-lg
{
	padding: var(--lg);
}
.p-t-lg
{
	padding-top: var(--lg);
}
.p-b-lg
{
	padding-bottom: var(--lg);
}
.p-md
{
	padding: var(--md);
}
.p-t-md
{
	padding-top: var(--md);
}
.p-b-md
{
	padding-bottom: var(--md);
}

/*------------------------------------*\
    MARGINS
\*------------------------------------*/
.m-t-xl
{
	margin-top: var(--xl);
}
.m-b-xl
{
	margin-bottom: var(--xl);
}
.m-t-lg
{
	margin-top: var(--lg);
}
.m-b-lg
{
	margin-bottom: var(--lg);
}
.m-t-md
{
	margin-top: var(--md);
}
.m-b-md
{
	margin-bottom: var(--md);
}

/*------------------------------------*\
    GAP
\*------------------------------------*/
.gap-xl
{
	gap: var(--gap-xl);
}