:root {
/* 
	--spark-colour-one: #00587F;
	--spark-colour-two: #80D0DB;
	--spark-colour-three: #DA5027;
	--spark-colour-four: #A6BC9D;
	--spark-colour-white: #fff;
 */
	--spark-colour-white: 255, 255, 255;
	--spark-colour-one: 0, 88, 127;
	--spark-colour-two: 128, 208, 219;
	--spark-colour-three: 218, 80, 39;
	--spark-colour-four: 166, 188, 157;
	--spark-colour-five: 233, 245, 248;

	--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;
}
.tiles {
    display: grid;    
    grid-gap: 30px;
}
.tiles > br{
    display: none;
}
.shape-circle {
    border-radius: 50%;
}
@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));
    text-decoration: none;
    min-height: 20px; 
    height: 100%;   
}
.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;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tile .thumb img {
    object-fit: cover;
    width:100%;
    height:100%; 
}
.tile .caption {
    position: relative;
    background-color: var(--spark-colour-white);
    text-align: left;
    padding: 15px;
    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);
}    
.tiles.gridStyle-list .tile {
    display: flex;
}

.card .tiles .tile {
    height: inherit;
}
.card .tiles.gridStyle-list .tile {
    background: rgba(var(--spark-colour-white));
}
.tiles.gridStyle-list .tile .thumb {
    width: 25%;
    height: 100%;
    background: rgba(var(--spark-colour-one));
    color: rgba(var(--spark-colour-white));
}
.tiles.gridStyle-list .tile .caption {
    width: 75%;
    min-height: 60px;
    display: flex;
    align-items: center;
}
.tiles.gridStyle-list .tile h4 {
    margin: 0;
    font-size: 1.1rem;
}

/*File List*/
.file-list .tiles.gridStyle-list .tile .thumb{
    max-width:100px;
}

/* Prevent CSS Transitions from firing on window resize. See related JS in _base.twig */
body.stop-transitions * {
    transition: none !important;
}