@font-face {
    font-family: "Heading";
    src: url(../res/font/Archivo-Medium.ttf);
}

@font-face {
    font-family: "Body";
    src: url(../res/font/Archivo-Medium.ttf); 
}

@font-face {
    font-family: "Body Bold";
    src: url(../res/font/Archivo-SemiBold.ttf);
}

@font-face {
    font-family: "Body Italic"; 
    src: url(../res/font/Archivo-MediumItalic.ttf);
}

@font-face {
	font-family: "Light"; 
	src: url(../res/font/Archivo-Light.ttf); 
}

@font-face {
	font-family: "Regular"; 
	src: url(../res/font/Archivo-Regular.ttf); 
}

:root {

    --background-colour: #FAFFFF;
    --text-colour: #1F0053;
    --highlight-colour: #5F00FF; 
    --lb-bg-colour:#1F005375;
    --border-colour: #1F0053;
	--border-size:1px;

    --font-size:12px;
    --line-height:18px; 
	--kerning:0.05rem; 

    --margin:14px;

    --grid-col: 1;

    --img-radius:8px;

    --transition-curve:cubic-bezier(0,1,.65,1);f

    --filter-colour-1: #00FF00;
    --filter-mode-1: exclusion;
    --filter-colour-2:#A088FF;
    --filter-mode-2: difference;
    --filter-colour-3:#A4E4FF;
    --filter-mode-3: screen;

}

/* ================================= */
/*  TAGS                             */
/* ================================= */

html { 
    
    font-family:"Body", sans-serif;
    font-size:var(--font-size);
    line-height:var(--line-height);
    letter-spacing:var(--kerning);
	text-rendering:geometricPrecision;

}

body {

    background-color:var(--background-colour);
    color: var(--text-colour);

    margin:calc(var(--margin) / 2);

}

h1 {

    display:inline;

    margin:0px!important;

    font-family:"Heading", sans-serif;
    font-size:2.6rem;
    line-height:2.6rem;
	font-weight:unset;
    
    text-rendering:geometricPrecision;
	
	text-transform:uppercase;
    
}

h2 {

    display:inline;

    margin:-0.45rem 0px 0px 0px; 

    font-family:"Heading", sans-serif;
    font-size:2.6rem; 
    line-height:2.6rem; 
	font-weight:unset;

    text-rendering:geometricPrecision;

}

h3 {

    display:inline;

    font-family:"Heading", sans-serif;
    font-size:2.8rem;
    line-height:2.8rem; 
	font-weight:unset;

    color:var(--text-colour); 
    
    word-break:normal;
	
	margin:var(--margin);
	
	z-index:0;

}

p {

    margin:-0.3rem 0px calc(var(--margin) / 2) 0px;

}

.external {
	
	display:block; 
	color:var(--highlight-colour); 
	text-decoration:none;
	
}

.external svg {
	
	width:1rem; 
	height:auto;
	
}

.external svg path {
	
	fill:var(--highlight-colour); 
	
}

.external:hover, .external:focus {
	
	color:var(--text-colour); 
	
}

.external:hover path, .external:focus path {
	
	fill:var(--text-colour); 
	
}

/* .external::after {
	
	content:"";
	display:inline-block;
	
	width:0.9rem; 
	height:0.6rem; 
	background-image:url(res/img/ico/open.svg); 
	background-size:cover; 
	background-repeat:no-repeat;
	background-position:right center;
	
} */


.button {

    display:block;

    width:max-content;
	height:min-content;

    text-decoration:none;
	line-height:1.32rem;

    background-color:var(--background-colour); 
    color:var(--text-colour);

    padding:0.8rem 1rem;

    border:var(--border-size) solid var(--border-colour);
    border-radius: calc(var(--img-radius) / 2) calc(var(--img-radius) * 3) calc(var(--img-radius) * 3) calc(var(--img-radius) / 2);

    transition:0.3s all var(--transition-curve);

}

.button:hover, .button:focus {

    color: var(--background-colour);
    background-color:var(--border-colour);
    border-color:var(--border-colour);
    
}

b {
    
    text-decoration:none;
    font-style:normal;
    font-family:"Body Bold";

}

i {

    text-decoration:none;
    font-style:normal;
    font-family:"Body Italic", sans-serif;

}

::selection {
	
	background-color:var(--border-colour); 
	color:var(--background-colour);
	
} 

/* ================================= */
/*  ELEMENT STYLES                   */
/* ================================= */

.top-level-block {

    display:flex;
    gap:0px;
    padding:0px;

    border:var(--border-size) solid var(--border-colour);
	border-radius:var(--img-radius);

    font-size:var(--font-size);
	
	overflow:hidden;
	
	overflow-clip-margin:content-box; 

}

.loader {

    display:flex;
    justify-content:center;
    align-items: center;
    vertical-align:middle;

    position:fixed;
    width:100vw; 
    height:100vh;
	top:0px; 
	left:0px;

	background-image:url('res/img/ico/loading.svg');
    background-color:var(--background-colour);
	background-repeat:no-repeat; 
	background-position:center 35%;

    font-size:1rem;

    z-index:5;

}

.loadmessage {
	
	display:flex;
    justify-content:center;
	text-align:center;
	
    position:absolute; 
    top:25%; 
    left:0px;
    width:100%; 
    height:max-content;
	
	font-size:1.5rem; 
	line-height:1.7rem;
	
	z-index:7;

}

.sectionload {

    display:block;
	position:relative;
	
	height:25vh;
	max-height:25vh!important;
	width:100%;
	max-width:100%!important;
	
	overflow:hidden;

    font-size:1rem;

    z-index:4;

}

.sectionload::before {

    content:'';

    display:flex;
    justify-content:center;
    align-items: center;

    position:absolute; 
    top:0px; 
    left:0px;
    width:100%; 
    height:100%;

	background-image:url('res/img/ico/loading.svg');
    background-color:var(--background-colour);
	background-repeat:no-repeat; 
	background-position:center;

    font-size:2rem;
	
	z-index:2; 

}

.lightbox {

    position:fixed; 
    top:0px; 
    left:0px;
    width:calc(100vw - (var(--margin)*2)); 
    height:calc(100vh - (var(--margin)*2)); 

    z-index:8;

    display:none; 
    flex-direction:column;
    justify-content:space-between;
    align-items:center;

    gap:var(--margin);

    background-color: var(--lb-bg-colour);

    padding:var(--margin);
	
	overflow:hidden; 

}

.lightbox .imgcontainer { 

    width:auto; 
    height:auto;

    max-width:calc(100vw - (var(--margin)*2)); 
    max-height:calc(100vh - (var(--margin)*2)); 
	
	pointer-events:none; 

}

.lightbox .imgcontainer .carousel {
	
	width:max-content; 
	height:auto; 
	
	display:flex; 
	flex-direction:row;  
	gap:var(--margin); 
	
	position:relative; 
	right:0px;
	/* transition:0.3s all var(--transition-curve);  */
	
	pointer-events:none; 
	
}
	

.lightbox .imgcontainer .img-tile { 

    min-width:calc(100vw - (var(--margin)*2)); 
    min-height:calc(100vh - (var(--margin)*2)); 
	
	max-width:calc(100vw - (var(--margin)*2)); 
    max-height:calc(100vh - (var(--margin)*2)); 
	
	display:flex; 
	justify-content: center; 
	
	pointer-events:none; 

}

.lightbox .imgcontainer .img-tile img {
	
	width:auto; 
	height:auto; 
	
	max-width:100%; 
    max-height:100%; 
	
	justify-self: center; 
	align-self: center; 
	
	pointer-events:initial; 
	
}

.lightbox-info { 

	display:block;
    position:absolute;
    bottom:var(--margin); 
	left:var(--margin);

    width:calc(100vw - (var(--margin)*4)); 
    height:min-content;

    max-width:max-content; 
    max-height:min-content; 

    flex-direction:column;
    align-self:center;
    text-align:left;
	
	line-height:2.2rem;

    flex:0 1 max-content;

    padding:var(--margin);

    background-color:var(--background-colour);
	
	border-radius:var(--img-radius); 
	border:var(--border-size) solid var(--border-colour); 
	
	pointer-events:none;

}

.lightbox-info .svg-ico {
	
	display:inline; 
	margin:0px 0.2rem;
	
}

.lightbox-buttons {
	
	position:fixed; 
	right:var(--margin); 
	top:var(--margin); 
	display:flex;
	
}

.lightbox-buttons a.button:first-child {
	
	border-radius:calc(var(--img-radius) * 3) calc(var(--img-radius) / 2) calc(var(--img-radius) / 2) calc(var(--img-radius) * 3);
	padding:0.8rem 0.8rem 0.8rem 1rem;
	
}

.lightbox-buttons a.button {
	
	padding:0.8rem 1rem 0.8rem 0.8rem; 
	
}

.lightbox-buttons a.button .svg-ico {
	
	margin:0px 0px -0.1rem 0px
	
}

.lightbox-buttons a.button:hover .svg-ico path, .lightbox-buttons a.button:focus .svg-ico path {
	
	fill:var(--background-colour);
	
}

.video-wrapper {
	
	display:flex; 
	justify-content:center;
	align-items:center;
	flex-direction:column;
	background-color:var(--text-colour); 
	cursor:pointer;
	overflow:hidden; 
	border:var(--border-size) solid var(--border-colour);
	border-radius:calc(var(--img-radius) * 0.5); 
	box-sizing:border-box;
	
}

.video-wrapper img {
	
	opacity:0.85;
	align-self:top;
	transition:0.3s all var(--transition-curve);
	
}

.video-wrapper video {
	
	align-self:top; 
	width:100%; 
	
}

.video-play-btn {
	
	position:absolute;
	opacity:1!important;
	
	z-index:2;
	
}

.video-play-btn circle {
	
	fill:none; 
	stroke:var(--background-colour); 
	stroke-width:var(--border-size);
	
}

.video-play-btn path {
	
	fill:var(--background-colour); 
	fill-opacity:0.5;
	stroke:var(--background-colour); 
	stroke-width:calc(var(--border-size) * 2);
	
}

.svg-ico {
	
	width:14px;
	height:12px;
	
}

/* HOMEPAGE */

.elem-splash {

    flex-direction:row;
    height:calc(100dvh - var(--margin));
	min-height:472px;
    max-height:calc(100dvw * 1.77);
	box-sizing:border-box;

}

.elem-splash-left {

    height:auto; 
    display:flex; 
    flex-direction:column; 
    flex-basis:65%;
    gap: var(--margin);
	
	padding:var(--margin); 
	
	border-right:var(--border-size) solid var(--border-colour); 

}

.elem-splash-left .splash-heading {

	font-size: 52px; 
	line-height: 52px; 
	font-family: "Regular", sans-serif; 
	
	margin:margin: -0.6rem 0rem 0.6rem -0.3rem; 
	
	height:max-content;

}

.about-box {
	
}

.about-tooltip {
	
	background-color: var(--border-colour);
	width: min-content;
	height: min-content;
	border-radius: 4px 4px 0px 0px;
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 0.5rem;
	
}

.splash-heading {
	
	font-size: 52px; 
	line-height: 52px; 
	font-family: "Regular", sans-serif; 
	letter-spacing:-0.05rem; 

	margin: -0.6rem 0rem 0rem -0.3rem; 
	height:112px;
	width:142px;
	
}

.splash-subheading {
	
	font-size: 32px; 
	line-height: 36.5px; 
	font-family: "Regular", sans-serif; 
	letter-spacing:-0.05rem; 

	margin: -0.6rem 0rem 0.6rem -0.23rem; 
	height:80px;
	
}

.elem-splash-left-cont {

	display: block; 

}

.elem-splash-img {
	
	position:relative; 
	width:100%; 
	height:100%; 
	
}

.elem-splash-rightpanel {
	
	display:none; 
	gap:var(--margin);
	padding:var(--margin); 
	
}


.elem-splash-right {
	
	position:relative;

    flex-basis:35%;

    overflow:hidden;

}

.elem-grid {

    display:grid; 

    grid-template-columns:repeat(var(--grid-col), minmax(15%, 100%));
                
    gap:calc(var(--margin) * 0.6);
	
	border:none; 
	
	overflow: visible;
	
	margin:calc(var(--margin) / 2) 0px 0px 0px;
	
	min-height: calc(100dvh - (var(--margin) * 2));
	
	box-sizing:border-box; 

}

.elem-grid-tile {

    display:flex;
	flex-direction:column;
    max-width:920px;
	height:32dvh;
	min-height:240px;
	border:var(--border-size) solid var(--border-colour);
	border-radius:var(--img-radius);

    text-decoration:none;
    color:var(--text-colour);

    transition:0.3s all var(--transition-curve);
	
	overflow:hidden;
	
	box-sizing:border-box;

}

.elem-grid-tile h3 {
	
	mix-blend-mode: difference;
	color:#eaffa0;
    transition:1.4s color cubic-bezier(.53,.28,.42,1);
	
}

.tile-projinfo {
	
	display:flex; 
	justify-content:space-between;
	align-items:center;
	gap:var(--margin);
	
	padding:var(--margin);
	
	border-top:var(--border-size) solid var(--border-colour);
	
}

.tile-blurb {
	
	max-height:min-content;
	
}

.tile-categories {
	
	display:none; 
	flex-direction:column; 
	
}

.tile-categories .about-box {
	
	height:max-content;
	padding:var(--margin); 
	border-bottom:var(--border-size) solid var(--border-colour);
	
}

.tile-categories .about-box div:last-child {
	
	margin-bottom:-0.25rem;
	
}

.tile-cat-title {
	
	font-family: "Heading", sans-serif; 
	font-size:0.8rem; 
	line-height:0.8rem;
	text-transform:uppercase; 
	padding-bottom:0.4rem;
	margin-top:-0.1rem;
	
}

.elem-grid-image { 

    position:relative;

    display:flex;
    justify-content:left;
    align-items:start;

    width:100%;
    height:100%;
    overflow:hidden;

    color:var(--background-colour);
    background-color:#FFF;

}

.elem-grid-projbutton {
	
	min-width:max-content;

}

.elem-grid-projbutton .svg-ico {
	
	padding-left:0.25rem;
	margin-bottom:-0.1rem;
	
}

.elem-grid-projbutton .svg-ico path {
	
	fill:var(--text-colour); 
	
}

.elem-grid-image-filter {

    position:absolute;
    width:100%; 
    height:100%;
    
    background-position:center;
    background-size:cover;

    transition:1.4s all cubic-bezier(.53,.28,.42,1);

    /* z-index:-1; */

}

.elem-splash-left-cont .button {
	
	border-radius:0px calc(var(--img-radius) * 2) calc(var(--img-radius) * 2) calc(var(--img-radius) / 2)

}

/* PROJECT PAGE */

/* .project-splash { */

    /* flex-wrap:wrap; */
    /* justify-content: flex-start; */
    /* height:max-content; */

/* } */

/* .project-splash .elem-splash-left { */

	/* width:calc(100% - var(--margin)*4); */
    /* flex-basis:14rem;  */
    /* flex-grow:0;  */
    /* flex-shrink:1; */

/* } */

/* .project-splash .elem-splash-right { */

    /* display:flex; */
    /* flex-basis:512px; */
    /* flex-grow:1; */
    /* align-items: flex-end; */

    /* min-width:50%;  */
    /* height:65vh; */
    /* max-height:calc(1440px - (var(--margin) * 2)); */

    /* padding:calc(var(--margin)*0.75); */

    /* background-size:cover; */
    /* background-position:center; */

/* } */

/* .project-splash .elem-splash-right img {  */

    /* width:100%;  */
    /* height:auto; */

/* } */

#WORK-SPLASH.elem-splash {
	
	flex-direction:column;
	
}

.elem-splash-bottom {
	
	position:relative;
	
	height:100%;
	width:100%;
	
	overflow:hidden;
	
	background-position: center; 
	background-size:cover;
	
}

.splash-proj-filter {
	
	position:absolute; 
	width:100%; 
	height:100%; 
	
}

.splash-proj-filter.one {
	
	background-color:#8BF1FF;
	mix-blend-mode:color-burn; 
	
}

.splash-proj-filter.two {
	
	background-color:rgba(0, 179, 255, 0.3);
	mix-blend-mode:hard-light; 
	
}

.splash-proj-filter.three {
	
	background-color:rgba(244, 255, 255, 0.6);
	mix-blend-mode:screen; 
	
}

.elem-splash-projtitle {
	
	padding:var(--margin);
	
}

.elem-splash-projtitle h3 {
	
	display:block;
	margin:-0.45rem 0rem -0.45rem -0.2rem;
	
}

.elem-project-infobox { 

	display:flex; 
	flex-direction:column;

    width:100%; 
	
	
	border-top:var(--border-size) solid var(--border-colour);
	border-bottom:var(--border-size) solid var(--border-colour);

}

.elem-project-infobox .about-box {
	
	min-height:28px;
	
	padding:var(--margin);
	
	flex-basis:33%; 
	
}

.elem-project-infobox .about-box div:last-child {
	
	margin-bottom:-0.3rem; 
	
}

.elem-project-infobox .about-box:nth-child(2) {
	
	border-left:var(--border-size) solid var(--border-colour);
	border-right:var(--border-size) solid var(--border-colour);
	
}

.infobox-row1 {
	
	display:flex; 
	flex-direction:row;
	align-items:stretch;
	
}

.infobox-row2 {

	border-top:var(--border-size) solid var(--border-colour);

}	

/* .elem-project-info .wrapper { */

    /* display:flex;  */
    /* flex-direction:row; */
    /* flex-wrap:wrap; */
    /* gap:0.08rem; */

    /* overflow:hidden; */
    /* border-radius:calc(var(--img-radius)*0.7); */
        
    /* width:100%; */

/* } */

/* .elem-project-info .wrapper div {  */

    /* flex:1 1 64px;  */
    /* padding:calc(var(--margin)*0.7);  */

    /* border:var(--border-size) solid transparent; */

    /* background-color:var(--background-colour); */
    /* color:var(--text-colour); */

/* } */

/* .elem-project-info .wrapper div:last-child { */

    /* flex:2 1 512px; */

/* } */

.elem-project-content {

    display:flex; 
    flex-wrap:wrap;

    padding:var(--margin);
	margin:calc(var(--margin) / 2) 0px calc(var(--margin) / 2) 0px;
	
	--grid-col:2;

}

.elem-project-content .one-image, .elem-project-content .image-grid, .elem-project-content .video, .elem-project-content .video-grid {
	
	flex:1 1 508px;
	
}

.elem-project-content .note {
	
	flex:1 1 796px;
	
}

.elem-project-content .desc { 

    flex:0 0 14rem;
	
	font-family: "Body Bold", sans-serif; 
	font-size:0.8rem; 
	line-height:0.55rem;
	text-transform:uppercase; 
	margin-bottom:var(--margin);

}

.elem-project-content .note {

    /* flex:1 1 512px; */
    
    max-width:506px;

}

.note h2 {

    display:block;

    margin:-0.3rem 0px calc(var(--margin) * 1.4) 0px; 

    font-size:2.8rem; 
    line-height:3rem;

    color:var(--text-colour);

    /* text-transform:uppercase; */
    text-rendering:geometricPrecision;

}


.elem-project-content p { 

	font-family: "Regular", sans-serif;
    font-size:1.25rem; 
    line-height:1.8rem; 
	
	width:100%;
	
	margin:-0.35rem 0px calc(var(--margin) * 0.75) 0px;

}

.elem-project-content p:last-child { 
	
	margin:-0.3rem 0px -0.3rem 0px;

}

.elem-project-content .one-image {

    /* flex:1 1 512px; */

    max-width:1420px;
	display:flex;
	flex-wrap:wrap; 
	align-items:flex-start;
	gap:var(--margin);

}


.elem-project-content .one-image img {

    max-width:100%;
	border-radius:calc(var(--img-radius) * 0.5); 

}

.elem-project-content .image-grid {

    /* flex:1 1 512px; */

    display:grid;
    
    grid-template-columns:repeat(var(--grid-col), minmax(15%, 100%));

    gap:var(--margin); 

}

.elem-project-content .image-grid img {

    display:block;
    width:100%;
    height:auto;

}

.elem-project-content a.imgtile {

    height:max-content;
	
	background-color:var(--border-colour); 

    border:var(--border-size) solid var(--border-colour);

    border-radius:calc(var(--img-radius) * 0.5);

    transition:0.3s all var(--transition-curve);
	
	overflow:hidden;

}

.elem-project-content a.imgtile img {
	
	opacity:0.85; 
	transition:0.3s all var(--transition-curve);
	
}

.elem-project-content .video {

    /* flex:1 1 512px; */

    max-width:1360px;
	
	overflow:hidden; 
	border-radius:calc(var(--img-radius) * 0.5); 

}

.elem-project-content .video img {

    max-width:100%;

}

.elem-project-content .video-grid {
	
	display:grid;
    
    grid-template-columns:repeat(var(--grid-col), minmax(15%, 100%));

    gap:var(--margin); 
	
}

/*      GRID HOVER ANIMATIONS      */

.elem-grid-tile:hover, .elem-grid-tile:focus {

    transition:0.3s all var(--transition-curve);

}

.elem-grid-tile:hover h3, .elem-grid-tile:focus h3 {

	/* color:#dfff00; */
	color:#ff6c00;
    transition:0.3s all var(--transition-curve);

}

.elem-grid-tile:hover .elem-grid-image, .elem-grid-tile:focus .elem-grid-image {

    transition:0.3s all var(--transition-curve);

}

.elem-grid-tile:hover .elem-grid-image .filter1, .elem-grid-tile:focus .elem-grid-image .filter1 {

    transition:0.3s all var(--transition-curve);

}


.elem-grid-tile:hover .elem-grid-image .filter2, .elem-grid-tile:focus .elem-grid-image .filter2 {

    background-color:#88FFE2;
    transition:0.3s all var(--transition-curve);

}

.elem-grid-tile:hover .elem-grid-image .filter3, .elem-grid-tile:focus .elem-grid-image .filter3 {

    background-color:#00B3FF;
    transition:0.3s all var(--transition-curve);

}

.elem-grid-tile:hover .elem-grid-projbutton, .elem-grid-tile:focus .elem-grid-projbutton {

    background-color:var(--border-colour); 
	border-color:var(--border-colour); 
    color:var(--background-colour);

}

.elem-grid-tile:hover .svg-ico path, .elem-grid-tile:focus .svg-ico path {
	
	fill:var(--background-colour); 
	
}

a.imgtile:hover, a.imgtile:focus { 

    /* border-color:var(--highlight-colour); */
}

a.imgtile:hover img, a.imgtile:focus img { 

    opacity:1;
}

.video-wrapper:hover .video-play-btn, .video-wrapper:focus .video-play-btn {
	
	/* stroke:var(--highlight-colour);  */
	
}

.video-wrapper:hover img, .video-wrapper:focus img {
	
	opacity:1;
	
}

/* ================================= */
/*  FILTER EFFECTS                   */
/* ================================= */

.bitmap {

    mix-blend-mode:hard-light;

}

.filter1 {

    background-color:var(--filter-colour-1); 
    mix-blend-mode:var(--filter-mode-1);

}

.filter2 {

    background-color:var(--filter-colour-2); 
    mix-blend-mode:var(--filter-mode-2);

}

.filter3 {

    background-color:var(--filter-colour-3);
    mix-blend-mode:var(--filter-mode-3);

}

.elem-splash-right .splash-home-img { 

    position:absolute;
    width:100%; 
    height:100%; 
    top:0px;
    left:0px;
    
    background-position:center;
    background-size:cover;

    mix-blend-mode: hard-light; 

}

.elem-splash-right .splash-home-img-last { 

    position:absolute;
    width:100%; 
    height:100%; 
    top:0px;
    left:0px;
        
    background-position:center;
    background-size:cover;
    
    mix-blend-mode: soft-light; 

} 

@media screen and (min-width:568px) {

    :root {

        --grid-col:1; 
    
    }
	
	
	body {
		
		margin:var(--margin); 
		
	}
	
	.elem-splash-left-cont {

		display: none; 

	} 
	
	.elem-splash {
		
		flex-direction:column;
		min-height:220px;
		max-height:292px;
		height:min-content;
		height:calc(100dvh - (var(--margin) + (var(--border-size) * 2)));
		
	}
	
	#WORK-SPLASH.elem-splash {
		
		max-height:580px;
		
	}
	
	.elem-grid {
		
		gap:var(--margin); 
		margin:var(--margin) 0px var(--margin) 0px;
		
	}
	
	.elem-project-infobox {
		
		flex-direction:row; 
		
	}
	
	.infobox-row1 {
		
		flex-basis:50%;
		
	}
	
	.infobox-row2 {
		
		flex-basis:50%;
		
		border-top:none;
		border-left:var(--border-size) solid var(--border-colour);
		
	}
	
	.elem-project-content {
		
		margin:var(--margin) 0px var(--margin) 0px;
		
	}

	.elem-splash-left {
	
		gap: var(--margin);
		flex-basis:min-content;
		
		border-right:none; 
		border-bottom:var(--border-size) solid var(--border-colour); 
		
	}
	
	#HOME-SPLASH .splash-heading {
		
		width:max-content;
		height:53px;
		font-size:63px;
		line-height:62px;
		
	}
	
	.elem-splash-right {
		
		display:flex; 
		flex-direction:column-reverse; 
		flex-basis:100%;
		
	}
	
	.elem-splash-img {
		
		min-width:100%; 
		min-height:32px;
		max-height:242px;
		
	}
		
	.elem-splash-rightpanel {
		
		display:flex; 
		flex-direction:row; 
		flex-wrap:wrap;
		border-top:var(--border-size) solid var(--border-colour); 
		height:max-content;
		
	}
	
	.elem-splash-rightpanel .spacer {
		
		display:none;
		
	}   

	.splash-subheading {
		
		margin:-0.3rem 0rem 0rem -0.15rem;
		height:48px; 
		width:108px;
		line-height:2.15rem;
		font-size:2.25rem;
		
	}

	#HOME-SPLASH .about-box {
		
		height:46px;
		
	}
	
	.splash-section {
		
		display:flex; 
		flex-direction:row; 
		gap:var(--margin); 
		height:46px;
		
	}
	
	.splash-bio {
		
		display:none; 
		
	}
	
	.splash-contact {
		
		min-width:288px;
		max-width:100%; 
		
		margin-left:auto;
		
	}
	
	.splash-contact .about-box {
		
		display:flex; 
		flex-direction:row; 
		justify-content:flex-start;
		margin-top:auto;
		
	}
	
	.splash-contact .about-tooltip {
		
		border-radius:4px 0px 0px 4px;
		
	}
	
	.splash-contact a.button {
		
		border-radius:0px calc(var(--img-radius) * 2) calc(var(--img-radius) * 2) calc(var(--img-radius) / 2)
		
	}

}

@media screen and (min-width:820px) {

    :root {

        --grid-col:2; 
    
    }
	
	.svg-ico {
		
		width:14px;
		height:12px;
		
	}

	.elem-project-content {
		
		--grid-col:4;
		
	}

}

@media screen and (min-width:1200px) {

    :root {

		--grid-col:3;
		
		--margin:16px;
		
		--img-radius:12px;
    
    }
	
	.elem-splash-left-cont {

		display: block; 

	} 
	
	.svg-ico {
		
		width:14px;
		height:12px;
		
	}
	
	.elem-splash {
		
		position:fixed; 
		
		flex-direction:row;
		min-height:624px;
		max-height:calc(100dvh - var(--margin));
		height:min-content;
		height:calc(100dvh - (var(--margin) * 2));
		width:calc(25% - (var(--margin) * 0.75));
		
	}
	
	#WORK-SPLASH.elem-splash {
		
		flex-direction:column; 
		max-height:calc(100dvh - var(--margin));
		
	}
	
	.elem-project-infobox {
		
		flex-direction:column; 
		
	}
	
	.infobox-row1 {
		
		flex-basis:100%;
		
	}
	
	.infobox-row2 {
		
		flex-basis:100%;
		
		border-left:none;
		border-top:var(--border-size) solid var(--border-colour);
		
	}
	
	.elem-project-content {
		
		margin:var(--margin) 0px var(--margin) calc(25% + 12px);
		
	}
	
	.elem-grid {
		
		margin:0px 0px 0px calc(25% + 14px);
		height:calc(100dvh - (var(--margin) * 2));
		max-height:calc(100dvh - (var(--margin) * 2));
		
	}
	
	.elem-splash-left {
	
		gap: var(--margin);
		flex-basis:min-content;
		
		border-right:var(--border-size) solid var(--border-colour); 
		border-bottom:none; 
		
	}
	
	#HOME-SPLASH .splash-heading {
		
		width:min-content;
		height:114px;
		font-size:62px;
		line-height:62px;
		margin:-0.6rem 0rem 1.2rem -0.3rem;
		
	}
	
	.elem-splash-right {
		
		display:flex; 
		flex-direction:row; 
		flex-basis:100%;
		
	}
	
	.elem-splash-img {
		
		min-width:100%; 
		min-height:none;
		max-height:none;
		height:100%; 
		width:100%; 
		
	}
		
	.elem-splash-rightpanel {
		
		display:none; 
		
	} 
	
	.splash-contact {
		
		margin-left:none; 
		
	}

	.splash-subheading {
		
		margin:-0.3rem 0rem 1.2rem -0.15rem;
		height:48px; 
		width:108px;
		min-width:108px;
		line-height:2.15rem;
		font-size:2.25rem;
		
	}
	

	#HOME-SPLASH .elem-splash-left-cont.about-box {
		
		height:min-content;
		
	}
	
	.elem-grid-tile {
		
		height:100%;
		min-height:200px; 
		
	}

}

@media screen and (min-width:1440px) {
	
	:root {
		
		--font-size:14px; 
		--line-height:20px;
		
		--border-size:1.5px;
		
	}
	
	body {
		
		margin:var(--margin);
		
	}
	
	.elem-splash {
		
		height:calc(100dvh - (var(--margin) * 2));
		width:calc(25% - (var(--margin) * 1.3));
		
	}
	
	.svg-ico {
		
		width:14px;
		height:12px;
		
	}
	
	#HOME-SPLASH .about-box {
		
		height:68px;
		
	}
	
	#HOME-SPLASH .splash-heading {
		
		height:134px;
		font-size:72px;
		line-height:72px;
		margin:-0.6rem 0rem 1.1rem -0.3rem;
		
	}
	
	.splash-subheading {
		
		margin:-0.3rem 0rem 0.8rem -0.15rem;
		height:66px; 
		width:144px;
		min-width:108px;
		line-height:2.15rem;
		font-size:2.25rem;
		
	}
	
	.elem-project-content {
		
		margin:var(--margin) 0px var(--margin) calc(25% + 3px);
		--grid-col:5;
		
	}
	
	.elem-grid {
		
		gap:var(--margin);
		min-height:calc(100dvh - (var(--margin) * 2));
		margin:0px 0px 0px calc(25% + 3px);
		
	}
	
	p {
		
		margin: -0.3rem 0px calc(var(--margin) * 0.5) 0px;
		
	}
	
	.elem-project-content .note {

		/* flex:1 1 512px; */
		
		max-width:574px;

	}
	
}

@media screen and (min-width:1920px) {

    :root {

        --font-size:16px;
        --line-height:22px; 
		
		--margin:16px;

        --grid-col:3; 
		
		--border-size:1px;
		
		--img-radius:16px;
    
    }
		
	html {
		
		font-family: "Body Bold", sans-serif;
		
	}
	
	body {
		
		margin:var(--margin);
		
	}
	
	#HOME-SPLASH .splash-heading {
		
		height:134px;
		font-size:72px;
		line-height:72px;
		
	}
	
	#HOME-SPLASH .about-box {
		
		height:72px;
		
	}
	
	.svg-ico {
		
		width:20px;
		height:16px;
		
	}
	
	.tile-categories {
		
		display:flex;
		width:100%;
		
	}
	
	.tile-blurb {
		
		display:none; 
		
	}
	
	.elem-grid-tile {
		
		flex-direction:row;
		min-height:320px;
		
	}
	
	.tile-projinfo {
		
		flex-direction:column; 
		border-top:none; 
		border-left: var(--border-size) solid var(--border-colour);
		width:max-content;
		padding:0px;
		gap:0px;
		
	}
	
	.elem-grid-projbutton {
		
		width:calc(160px - (var(--margin) * 2));
		padding:1rem;
		text-align:right;
		margin:var(--margin);
		
	}
	
	.elem-project-content {
		
		margin:var(--margin) 0px var(--margin) calc(25% + 3px);
		--grid-col:6;  
		
	}
	
	.elem-grid {
		
		margin:0px 0px 0px calc(25% + 3px);
		
	}

	.elem-project-content .note {

		/* flex:1 1 512px; */
		
		max-width:677px;

	}
	
	.elem-project-content .note {

		/* flex:1 1 512px; */
		
		max-width:656px;

	}
	
}

@media screen and (min-width:2560px) {
	
	:root {
		
		--font-size:20px;
		--line-height:26px;
		
		--border-size:2px;
		
		--margin:24px;
		
		--img-radius:20px;
		
	}
	
	.elem-grid-projbutton {
		
		width:calc(200px - (var(--margin) * 2)); 
		
	}
	
	#HOME-SPLASH.elem-splash {
		
		min-height:680px;
		
	}
	
	#HOME-SPLASH .splash-heading {
		
		height:158px;
		font-size:86px;
		line-height:86px;
		
	}
	
	#HOME-SPLASH .splash-subheading {
		
		height:88px;
		width:178px;
		
	}
	
	#HOME-SPLASH .about-box {
		
		height:82px;
		
	}
	
	.svg-ico {
		
		width:24px;
		height:18px;
		
	}
	
	.elem-project-content {
		
		margin:var(--margin) 0px var(--margin) calc(25% + 5px);
		
	}
	
	.elem-grid {
		
		margin:0px 0px 0px calc(25% + 5px);
		min-height:1252px;
		
	}
	
	.elem-project-content .note {

		/* flex:1 1 512px; */
		
		max-width:846px;

	}
	
}

@keyframes loading {
    0% {content:'⋄'}
    25% {content:'⋅'}
    50% {content:'⋆'}
    75% {content:'⋇'}
    100% {content:'⋄'}
}

@keyframes loading2 {
    0% {content:'🞨'}
    25% {content:'🞩'}
    35% {content:'🞪'}
    45% {content:'🞫'}
    55% {content:'🞬'}
    65% {content:'🞭'}
    75% {content:'🞮'}
    85% {content:'🞨'}
    100% {content:'🞨'}
}

@keyframes loading3 {
    0% {content:'🞻'}
    20% {content:'🞼'}
    40% {content:'🞽'}
    60% {content:'🞾'}
    80% {content:'🞿'}
    100% {content:'🞻'}
}


@keyframes loading4 {
    0% {content:'🞻'}
    5% {content:'🞼'}
    10% {content:'🞽'}
    15% {content:'🞾'}
    20% {content:'🞿'}
    25% {content:'🞻'}
    30% {content:'⋄'}
    35% {content:'⋅'}
    40% {content:'🟊'}
    45% {content:'🟊'} /* 🙩 */
    50% {content:'⋄'}
    55% {content:'🡤'}
    60% {content:'🡥'}
    65% {content:'🡦'}
    70% {content:'🡧'}
    75% {content:'🡴'}
    80% {content:'🡵'}
    85% {content:'🡶'}
    90% {content:'🡷'}
    100% {content:'🞨'}
}

@keyframes loading5 {
    0% {content:'🞻'}
    5% {content:'🞼'}
    10% {content:'🞽'}
    15% {content:'🞾'}
    20% {content:'🞿'}
    25% {content:'🞻'}
    30% {content:'⋄'}
    35% {content:'⋅'}
    40% {content:'🟊'}
    45% {content:'⋇'}
    50% {content:'⋄'}
    55% {content:'🞨'}
    60% {content:'🞩'}
    65% {content:'🞪'}
    70% {content:'🞫'}
    80% {content:'🞬'}
    85% {content:'🞭'}
    90% {content:'🞮'}
    95% {content:'🞨'}
    100% {content:'🞨'}
}