:root {
    --splide-gap:8px;
    --splide-marker-size:10px;
    --splide-marker-colour:var(--page);
    --splide-marker-colour-hover: var(--text);
    /* --splide-marker-transition: var(--this-transition); */

}

.splide{height: fit-content;}
.splide img{height: var(--splide-height);}

.latesplide .splide{height: fit-content; overflow: hidden; max-height: 462px; transition: max-height var(--late-load-transition) var(--default-ease);}
.latesplide.hidesplide .splide{max-height:0; }
.latesplide .placeholder{overflow: hidden; max-height: 0px; transition: max-height var(--late-load-transition) var(--default-ease); }
.latesplide.hidesplide .placeholder{max-height: 95px;}

.splide__list{gap:var(--splide-gap);}
.option-options .splide__list{gap:0;}
.splide__pagination{
    /* bottom:calc(var(--splide-marker-size)); */
    /* right: calc(var(--splide-marker-size)); */
    margin:0px !important;
    padding-left: 0 !important;
    padding:calc(var(--splide-gap)*2) 0;
    transform: none;
    display: flex !important;
    flex-direction: row;
    column-gap:calc(var(--splide-marker-size)/2);
}

.splide__pagination>li{
    display: flex !important;
}

.splide__pagination__page{
    border: 0 transparent;
    padding: 0;
    border-radius: 50%;
    justify-self: center;
    height: var(--splide-marker-size);
    width: var(--splide-marker-size);
    /* background-color: rgb(var(--splide-marker-colour)) !important; */
    background-color: var(--overlay) !important;
    outline:none !important;
    transition:
        border-radius var(--this-transition),
        width var(--this-transition),
        height var(--this-transition),
        background-color var(--this-transition);
}
.splide__pagination__page.is-active{
    border-radius: 0%;
    width: calc(var(--splide-marker-size)*2.5);
    height: calc(var(--splide-marker-size)/2);
    background-color: rgb(var(--text)) !important;
}
.splide__pagination__page:not(.is-active){ cursor: pointer; }
.splide__pagination__page:not(.is-active):hover{
    /* background-color: rgb(var(--splide-marker-colour-hover)) !important; */
}

.splide.page_below .splide__pagination{
    bottom:-20px;
}
.splide.page_below .splide__pagination__page{
    background-color: rgba(var(--text),0.5) !important;
}


.splide__slide{
    box-sizing: border-box; /* makes total width of items including border equal given width */
    outline: none;
    display: flex;
    /* align-items: center; */
    align-items: end;
    /* justify-content:center; */
    max-width: calc(100% - var(--content-margins) * 2);
    /* margin: 0 var(--content-margins); */
    overflow: hidden;

}
.splide__slide.group{
    height: var(--splide-height);
    width: 100%;
    background-color: var(--menu-bar-open);
    opacity: 0;
    justify-content: center;
    transition:
        opacity var(--this-transition);
    ;
}
.splide__slide.group.is-active{
    opacity: 1;
}

.project-images-group{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--splide-gap);
}
.project-image{
    flex:1;
	max-width: 400px;
    min-width: 270px;
	height: 110px;
	background-position:center;
	background-repeat: no-repeat;
	background-size: cover;
	background-blend-mode:luminosity;
    position: relative;
    overflow:hidden;
}

.project-grid{
    /* display: flex; */
    /* flex-direction: row; */
    /* flex-wrap: wrap; */
    /* justify-content: center; */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--splide-gap);
    width: 100%;
}
/* @media only screen and (max-width: 1000px) {
    .cols .project-grid{
        grid-template-columns: 1fr 1fr;
    }
} */
@media only screen and (max-width: 700px) {
    .cols .project-grid{
        grid-template-columns: 1fr;
    }
}


.project-grid.left{justify-content:flex-start;}

.project-grid>div{
    position: relative;
    height: 300px;
    flex:1;
    display: flex;
    flex-direction: row;
    justify-content: end;   /* this enables copyright box to be right aligned */
    align-content:end;
    /* min-width: 350px; */
    max-width: 800px;
    overflow: hidden;
    scroll-margin-top:300px;
    }


.project-grid-image{
	background-position:center;
	background-repeat: no-repeat;
	background-size: cover;
    width: 100%;
}

.poeple-grid .project-grid-image{
    filter: grayscale(100%) !important;
}

.sfix-parent{
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:center;
    overflow:hidden;
    gap:var(--splide-gap);
    width:100%;
    --sfix-place-colour:var(--overlay);
}

.sfix-place-holder{
    height: 100%;
    width:100%;
    background-color: var(--sfix-place-colour);
}
.sfix-place-left-pad{
    height: 100%;
    /* width:10em; */
    /* min-width:calc(var(--content-margins) - var(--splide-gap)); */
    min-width: calc(max(var(--content-margins), calc((100% - var(--page-width-limit))/2)) - var(--splide-gap));
    background-color: var(--sfix-place-colour);
}

.sfix-image {
    position: relative;
    display:block;
    min-width: 350px;
	background-position:center;
	background-repeat: no-repeat;
	background-size: cover;
	background-blend-mode:luminosity;
}
.splide-image {
    min-width: 300px;
    max-width: calc(100vw - var(--content-margins)*2);
    background-position:center;
	background-repeat: no-repeat;
	background-size: cover;
}
.splide-image img{
    opacity: 0;
}

/* 
.copyright.fixed{
    font-size: 12px;
    position: fixed;
    right: var(--content-margins);
    padding-top:12px;
    color: var(--overlay);
    width: fit-content;
}
.copyright.rotated{
    font-size: 10px;
    height: 11px;
    position: absolute;
    text-align: right;
    padding:0 2px;
    background-color: rgba(var(--page),0.5);
    mix-blend-mode: lighten;
    
    transform-origin: top right;
    transform: rotate(-90deg) translateY(-11px);
} */