/* Alchemy | ver 4 */

body
{
	display: grid;
	margin: 0;
}

/* - */

h1, h2, h3, h4, h5, p
{
	margin: 0;
	justify-self: start;
}

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

/* Section */

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



/* - */

section
{
	display: grid;
	width: 100%;
}

@media( min-width: 768px )
{
	section
	{
		grid-template-columns: auto 768px auto;
	}
}

@media( min-width: 992px )
{
	section
	{
		grid-template-columns: auto 992px auto;
	}
}

@media( min-width: 1200px )
{
	section
	{
		grid-template-columns: auto 1200px auto;
	}
}

/* - */



/* -  Colourback */ 

.colourback-1
{
    background-color: var( --colour1 );
}

.colourback-1 :is( h1, h2, h3, h4, a, p, b )
{
    color: #fff;
}


.colourback-2
{
    background-color: var( --colour2 );
}

.colourback-2 :is( h1, h2, h3, h4, a, p, b )
{
    color: #fff;
}

















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

/* Workspace */

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

.workspace
{
	display: grid;
    justify-self: center;
    width: 90%;
	
	z-index: 3;
}

@media( min-width: 768px )
{
	.workspace
	{
		grid-column: 2;
		grid-row: 1;
        width: 95%;
	}
}

@media( min-width: 1200px )
{
	.workspace
	{
        width: 100%;
	}
}

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



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




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

.element
{
	display: grid;
	grid-gap: 16px;	
}

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



/* - */






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

/* Col */

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

.col-2, .col-3, .col-4, .col-5, .col-6
{
	display: grid;
}

@media( min-width: 768px )
{
	.col-2, .col-4
	{
		grid-template-columns: repeat( 2, 1fr ); 
	}
}

@media( min-width: 992px )
{
	.col-3, .col-4, .col-5, .col-6
	{
		grid-template-columns: repeat( 3, 1fr ); 
	}
}

@media( min-width: 1200px )
{	
	.col-4
	{
		grid-template-columns: repeat( 4, 1fr ); 
	}
	
	.col-5
	{
		grid-template-columns: repeat( 5, 1fr ); 
	}
	
	.col-6
	{
		grid-template-columns: repeat( 6, 1fr ); 
	}
}



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

/* Mobihide / show */

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

.mobihide
{
    display: none;
}

.mobishow
{
    display: grid;
}

@media( min-width: 992px )
{
    .mobihide
    {
        display: grid;
    }

    .mobishow
    {
        display: none;
    }
}








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

/* Roof */

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

.roof :is( h1, h2, h3, h4, p, b, a )
{
    justify-self: center;
    text-align: center;
}













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

/* Gap */

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

.gap-0
{
    grid-gap: 0;
}

.gap-8
{
	grid-gap: 8px;
}

.gap-16
{
	grid-gap: 16px;
}

.gap-24
{
	grid-gap: 24px;
}

.gap-32
{
	grid-gap: 32px;
}

.gap-64
{
	grid-gap: 64px;
}

/* - */

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

/* Images */

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

.img
{
	max-width: 100%;
    justify-self: center;
}

/* - */



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

/* margin */

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

/* - */

.m-8
{
	margin: 8px;
}

.m-16
{
	margin: 16px;
}

.m-24
{
	margin: 24px;
}

.m-32
{
	margin: 32px;
}

.m-64
{
	margin: 64px;
}

/* - margin-top */

.mt-8
{
	margin-top: 8px;
}

.mt-16
{
	margin-top: 16px;
}

.mt-24
{
	margin-top: 24px;
}

.mt-32
{
	margin-top: 32px;
}

.mt-64
{
	margin-top: 64px;
}

/* - margin-bottom */

.mb-8
{
	margin-bottom: 8px;
}

.mb-16
{
	margin-bottom: 16px;
}

.mb-24
{
	margin-bottom: 24px;
}

.mb-32
{
	margin-bottom: 32px;
}

.mb-64
{
	margin-bottom: 64px;
}

/* - - - - */

/* - margin vertical ( top + bottom ) - */

/* - - - - */

.mv-8
{
	margin-top: 8px;
	margin-bottom: 8px;
}

.mv-16
{
	margin-top: 16px;
	margin-bottom: 16px;
}

.mv-24
{
	margin-top: 24px;
	margin-bottom: 24px;
}

.mv-32
{
	margin-top: 32px;
	margin-bottom: 32px;
}

.mv-64
{
	margin-top: 64px;
	margin-bottom: 64px;
}

/* - - - - */

/* - margin-left */

/* - - - - */

.ml-8
{
	margin-left: 8px;
}

.ml-16
{
	margin-left: 16px;
}

.ml-24
{
	margin-left: 24px;
}

.ml-32
{
	margin-left: 32px;
}

.ml-64
{
	margin-left: 64px;
}

/* - margin-right */

.mr-8
{
	margin-right: 8px;
}

.mr-16
{
	margin-right: 16px;
}

.mr-24
{
	margin-right: 24px;
}

.mr-32
{
	margin-right: 32px;
}

.mr-64
{
	margin-right: 64px;
}

/* - - - - */

/* - margin horizontal ( Left + Right ) - */

/* - - - - */

.mh-8
{
	margin-left: 8px;
	margin-right: 8px;
}

.mh-16
{
	margin-left: 16px;
	margin-right: 16px;
}

.mh-24
{
	margin-left: 24px;
	margin-right: 24px;
}

.mh-32
{
	margin-left: 32px;
	margin-right: 32px;
}

.mh-64
{
	margin-left: 32px;
	margin-right: 32px;
}

/* - */



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

/* - misc - */

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

.simple
{
	align-self: center;
	justify-self: start;
}

.point
{
	align-self: center;
	justify-self: center;
}



/* - */ 

.col-2a, .col-2b
{
    display: grid;
}

@media ( min-width: 768px )
{
    .col-2a
    {
        grid-template-columns: 33% auto;
    }
    
    .col-2b
    {
        grid-template-columns: auto 33%;
    }
}

/* - */

.hide
{
    display: none!important;
}

.a1
{
    align-self: start;
    justify-self: start;
}

.a2
{
    align-self: start;
    justify-self: center;
}

.a6
{
    align-self: start;
    justify-self: end;
}

.a4
{
    align-self: center;
    justify-self: start;
}

.a5
{
    align-self: center;
    justify-self: center;
}

.a6
{
    align-self: center;
    justify-self: end;
}

.a7
{
    align-self: end;
    justify-self: start;
}

.a8
{
    align-self: end;
    justify-self: center;
}

.a9
{
    align-self: end;
    justify-self: end;
}

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






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

.off
{
	padding: 64px 0;
	background-color: #f3f3f3;
}

.minus-32
{
	margin-bottom: -32px;
}

.minus-64
{
	margin-bottom: -64px;
}

.minus-75
{
	margin-bottom: -75px;
}