.scrollcontainer {
    min-height: 100vh;
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    /*background: url("../images/nearby/co4.jpg");*/
    /*background-size: cover;
    background-attachment: fixed;
    background-position: center;*/
    /* center the elements horizontally */
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 90vw;
}

.scrollcontainer-bg1 {
    background: url("../images/nearby/co4.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

.scrollcontainer-bg2 {
    background: url("../images/nearby/sa06.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

.scrollcontainer-bg3 {
    background: url("../images/nearby/brailbridge.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

/* replace the default list-style with a custom counter */
.scrollcontainer > ol {
    list-style: none;
    /*counter-reset: days-counter;*/
    font-size: 1.6rem;
    position: relative;
}


.scrollcontainer > ol li {
    /* center the content in the viewport */
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
    /* position relative to absolute position the pseudo element behind the text */
    z-index: 5;
}
/* Centre paragraph texrt */
.scrollcontainer > ol li p {
       text-align:center !important;
}
  
/* add position sticky and position each subsequent list item 7.5vh from the previous */
.scrollcontainer > ol li {
    position: sticky;
}

/* ! have the list items occupy enough vertical space to cover (viewport - vertical offset)
otherwise the elements would collapse to the top once the page reaches the last item
*/
/*Reduce first 2 li entries so text appears in middle of image and scrolls quicker (note: total heigh 30vh)*/
.scrollcontainer > ol li:nth-child(1) {
    top: 0vh;
    height: 30vh;
}

.scrollcontainer > ol li:nth-child(2) {
    top: 7.5vh;
    height: 22.5vh;
}

/*Now total os 100vh*/
.scrollcontainer > ol li:nth-child(3) {
    top: 15vh;
    height: 85vh;
}

.scrollcontainer > ol li:nth-child(4) {
    top: 22.5vh;
    height: 77.5vh;
}

.scrollcontainer > ol li:nth-child(5) {
    top: 30vh;
    height: 70vh;
}

.scrollcontainer > ol li:nth-child(6) {
    top: 37.5vh;
    height: 62.5vh;
}

.scrollcontainer > ol li:nth-child(7) {
    top: 45vh;
    height: 55vh;
}

.scrollcontainer > ol li:nth-child(8) {
    top: 52.5vh;
    height: 47.5vh;
}

.scrollcontainer > ol li:nth-child(9) {
    top: 60vh;
    height: 40vh;
}

.scrollcontainer > ol li:nth-child(10) {
    top: 67.5vh;
    height: 32.5vh;
}

.scrollcontainer > ol li:nth-child(11) {
    top: 75vh;
    height: 25vh;
}

.scrollcontainer > ol li:nth-child(12) {
    top: 82.5vh;
    height: 17.5vh;
}

/*fade works but not used*/
.scrollcontainer-fade {
    animation-name: scrollcontainer-fade;
    animation-duration: 15000ms;
}


@keyframes scrollcontainer-fade {
    0% {
        opacity: 0;
    }

    50% {
        opacity: 0.5;
    }

    100% {
        opacity: 1;
    }
}