:root {
	--spark-colour-white: 255, 255, 255;
	--spark-colour-black: 0, 0, 0;
    --spark-colour-brand: 0,200,227; /* Blue */

	--spark-colour-one:     7, 7, 7;        /* Dark Grey */ 
    --spark-colour-two:     232, 253, 253;  /* Extra Light Blue */
    --spark-colour-three:   181, 230, 234;  /* Light Blue */
	--spark-colour-four:    0, 200,227;     /* Blue */
	--spark-colour-five:    0,48,54;        /* Dark Blue */
	--spark-colour-six:     140, 185, 191;  /* Blue Grey */
    
    --spark-gradient-one: linear-gradient(114deg, rgba(var(--spark-colour-four),1) 0%, rgba(var(--spark-colour-one),1) 31%, rgba(var(--spark-colour-four),1) 100%);
    --spark-gradient-two: linear-gradient(0deg, rgba(var(--spark-colour-three),1) 0%, rgba(var(--spark-colour-three),0) 50%);

    --spark-font-family: 'Nunito Sans', sans-serif;
    --spark-font-xxl: 4.2rem;
    --spark-font-xl: 3.2rem;
    --spark-font-lg: 2.4rem;
    --spark-font-md: 1.8rem;
    --spark-font-sm: 1.4rem;
    --spark-font-xs: 1.2rem;

	--spark-spacing: 5%;
	--spark-easing: cubic-bezier(0.83, 0, 0.17, 1);
	--spark-transition: all 400ms var(--spark-easing);
	--spark-transition-fast: all 100ms ease-out;
	--spark-transition-slow: all 800ms var(--spark-easing);
	--spark-shadow: 0 10px 10px 0 rgba(var(--spark-colour-one),.2);
	--spark-shadow-dark: 0 20px 60px 0 rgba(var(--spark-colour-one),.6);
	--spark-shadow-light: 0 2px 5px 0 rgba(var(--spark-colour-one),.2);
	--spark-radius: 5px;
    --spark-filter-red: invert(26%) sepia(95%) saturate(7492%) hue-rotate(357deg) brightness(80%) contrast(115%);
    --spark-filter-white: invert(100%) brightness(85%) contrast(115%);
}
@keyframes navFadeIn { 
    0% {
		transform: translateY(450px);
		filter: opacity(0);
	} 
	100% {
		transform: translateY(0px);
		filter: opacity(1);
	}
}

/* Utilities */
.shadow {
    box-shadow: var(--spark-shadow) !important;
}
.shadow:after {
    content: " ";
    display: block;
    position: absolute;
    width: calc(100% - 30px);
    height: 60px;
    right: 0;
    bottom: -30px;
    z-index: -1;
    background: rgba(var(--spark-colour-black),.5);
    filter: blur(30px);
}
.tiles {
    display: grid;    
    grid-gap: 15px;
}    
@media screen and (min-width: 900px) {
    .tiles.gridColumns-1 { grid-template-columns: repeat(1, 1fr); }
    .tiles.gridColumns-2 { grid-template-columns: repeat(2, 1fr); }
    .tiles.gridColumns-3 { grid-template-columns: repeat(3, 1fr); }
    .tiles.gridColumns-4 { grid-template-columns: repeat(4, 1fr); }
    .tiles.gridColumns-6 { grid-template-columns: repeat(6, 1fr); }
}
@media screen and (max-width: 899px) {
    .tiles.gridColumns-1 { grid-template-columns: repeat(1, 1fr); }
    .tiles.gridColumns-2 { grid-template-columns: repeat(1, 1fr); }
    .tiles.gridColumns-3 { grid-template-columns: repeat(1, 1fr); }
    .tiles.gridColumns-4 { grid-template-columns: repeat(2, 1fr); }
    .tiles.gridColumns-6 { grid-template-columns: repeat(2, 1fr); }
}
.tile {
    transition: var(--spark-transition-fast);
    box-shadow: var(--spark-shadow);
    border-radius: 5px;
    overflow: hidden;
    display: block;
    position: relative;
    background: rgba(var(--spark-colour-five));
}
.tile:hover {
    transform: translate(0px, 5px) !important;
    box-shadow: var(--spark-shadow-light);
}
.tile:hover:after {
    width: 98%;
    bottom: -5px;
    filter: blur(5px) opacity(.2);
}
.tile .thumb {
    width: 100%;
    height: auto;
}
.tile .caption {
    position: relative;
    background-color: var(--spark-colour-white);
    text-align: left;
    padding: 20px;
    min-height: 100px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    align-self: center;
    width: 100%;
}
.tile .caption * {
    width: 100%;
}
.tile .caption p {
    color: var(--spark-colour-five);
}    
/* Prevent CSS Transitions from firing on window resize. See related JS in _base.twig */
body.stop-transitions * {
    transition: none !important;
}