:root {
	--spark-colour-white: 255, 255, 255;
	--spark-colour-black: 0, 0, 0;

	--spark-colour-one: 7, 7, 7; /* Light Black */ 
	--spark-colour-two: 115, 10, 11; /* Red */
	--spark-colour-three: 248,209,103; /* Yellow */
	--spark-colour-four: 232,227,213; /* Sand */
	--spark-colour-five: 243, 243, 243; /* Chalk */
	--spark-colour-six: 255, 187, 204; /* Pink */

	--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: 'Montserrat', sans-serif;
	--spark-font-xxl: 4.2rem;
	--spark-font-xl: 3.2rem;
	--spark-font-lg: 2.4rem;
	--spark-font-md: 1.6rem;
	--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-shadow-soft: 
		0 1px 2px rgba(0,0,0,0.07), 
                0 2px 4px rgba(0,0,0,0.07), 
                0 4px 8px rgba(0,0,0,0.07), 
                0 8px 16px rgba(0,0,0,0.07),
                0 16px 32px rgba(0,0,0,0.07), 
                0 32px 64px rgba(0,0,0,0.07);
	--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%);
}
/* Mobile Typography */
@media screen and (max-width: 899px) {
    :root {
        --spark-font-xxl: 2.8rem;
        --spark-font-xl: 2.8rem;
    	--spark-font-md: 1.4rem;
    }
    /* Utilities */
    .row-reverse {
        flex-direction: column-reverse;
    }
}



@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;
}

/* .text {
    height: 100%;
} */

/* Spacers */
.spacer-5 { height: 5vh; }
.spacer-10 { height: 10vh; }
.spacer-15 { height: 15vh; }