.CSSgal-section {
    background-color: #dddddd
}

body.dark .CSSgal-section {
    background-color: #212121;
}

.CSSgal {
    position: relative;
    overflow: hidden;
    height: 100%; /* Or set a fixed height */
}

    /* SLIDER */

    .CSSgal .slider {
        height: 100%;
        white-space: nowrap;
        font-size: 0;
        transition: 0.8s;
    }

        /* SLIDES */

        .CSSgal .slider > * {
            font-size: 1rem;
            display: inline-block;
            white-space: normal;
            vertical-align: top;
            height: 100%;
            width: 100%;
            background: none 50% no-repeat;
            background-size: cover;
        }



        .CSSgal .slider ul.slidersection {
            padding: 0;
            margin: 0;
        }

            .CSSgal .slider ul.slidersection li {
                padding: 15px;
                margin: 0;
                display: inline-block;
                width: 20%;
            }

                .CSSgal .slider ul.slidersection li img {
                }

    /* PREV/NEXT, CONTAINERS & ANCHORS */

    .CSSgal .prevNext {
        position: absolute;
        z-index: 1;
        top: 50%;
        width: 100%;
        height: 0;
    }

        .CSSgal .prevNext > div + div {
            visibility: hidden; /* Hide all but first P/N container */
        }

        .CSSgal .prevNext a {
            position: absolute;
            width: 60px;
            height: 60px;
            line-height: 60px; /* If you want to place numbers */
            text-align: center;
            opacity: 0.7;
            -webkit-transition: 0.3s;
            transition: 0.3s;
            -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
            left: 0;
            top: 0px;
            background-image: url(../images/our_parteners/arrowL.png);
            background-position: center center;
            background-repeat: no-repeat;
            background-size: 20px;
        }

body.dark .CSSgal .prevNext a {
    background-image: url(../images/our_parteners/arrowLdark.png);
}

.anchor {
    position: absolute;
    left: 0px;
    top: -200px;
}

.CSSgal .prevNext a:hover {
    opacity: 1;
}

.CSSgal .prevNext a + a {
    left: auto;
    right: 0;
    background-image: url(../images/our_parteners/arrowR.png);
}

body.dark .CSSgal .prevNext a + a {
    background-image: url(../images/our_parteners/arrowRdark.png);
}

/* NAVIGATION */

.CSSgal .bullets {
    position: absolute;
    z-index: 2;
    bottom: 0;
    padding: 10px 0;
    width: 100%;
    text-align: center;
}

    .CSSgal .bullets > a {
        display: inline-block;
        width: 30px;
        height: 30px;
        line-height: 30px;
        text-decoration: none;
        text-align: center;
        background: rgba(255, 255, 255, 1);
        -webkit-transition: 0.3s;
        transition: 0.3s;
    }

        .CSSgal .bullets > a + a {
            background: rgba(255, 255, 255, 0.5); /* Dim all but first */
        }

        .CSSgal .bullets > a:hover {
            background: rgba(255, 255, 255, 0.7) !important;
        }

/* NAVIGATION BUTTONS */
/* ALL: */
.CSSgal > s:target ~ .bullets > * {
    background: rgba(255, 255, 255, 0.5);
}
/* ACTIVE */
#s1:target ~ .bullets > *:nth-child(1) {
    background: rgba(255, 255, 255, 1);
}

#s2:target ~ .bullets > *:nth-child(2) {
    background: rgba(255, 255, 255, 1);
}

#s3:target ~ .bullets > *:nth-child(3) {
    background: rgba(255, 255, 255, 1);
}

#s4:target ~ .bullets > *:nth-child(4) {
    background: rgba(255, 255, 255, 1);
}

#s5:target ~ .bullets > *:nth-child(5) {
    background: rgba(255, 255, 255, 1);
}
/* More slides? Add here more rules */

/* PREV/NEXT CONTAINERS VISIBILITY */
/* ALL: */
.CSSgal > s:target ~ .prevNext > * {
    visibility: hidden;
}
/* ACTIVE: */
#s1:target ~ .prevNext > *:nth-child(1) {
    visibility: visible;
}

#s2:target ~ .prevNext > *:nth-child(2) {
    visibility: visible;
}

#s3:target ~ .prevNext > *:nth-child(3) {
    visibility: visible;
}

#s4:target ~ .prevNext > *:nth-child(4) {
    visibility: visible;
}

#s5:target ~ .prevNext > *:nth-child(5) {
    visibility: visible;
}
/* More slides? Add here more rules */

/* SLIDER ANIMATION POSITIONS */

#s1:target ~ .slider {
    transform: translateX(0%);
    -webkit-transform: translateX(0%);
}

#s2:target ~ .slider {
    transform: translateX(-100%);
    -webkit-transform: translateX(-100%);
}

#s3:target ~ .slider {
    transform: translateX(-200%);
    -webkit-transform: translateX(-200%);
}

#s4:target ~ .slider {
    transform: translateX(-300%);
    -webkit-transform: translateX(-300%);
}

#s5:target ~ .slider {
    transform: translateX(-300%);
    -webkit-transform: translateX(-300%);
}
/* More slides? Add here more rules */

/* YOU'RE THE DESIGNER!
   ____________________
   All above was mainly to get it working :)
   CSSgal CUSTOM STYLES / OVERRIDES HERE: */

.CSSgal {
    color: #fff;
    text-align: center;
}

    .CSSgal .slider h2 {
        margin-top: 40vh;
        font-weight: 200;
        letter-spacing: -0.06em;
        word-spacing: 0.2em;
        font-size: 3em;
    }

    .CSSgal a {
        border-radius: 50%;
        margin: 0 3px;
        color: rgba(0, 0, 0, 0.8);
        text-decoration: none;
    }

@media (max-width: 990px) {
    .CSSgal .slider ul.slidersection li {
        width: 40%;
    }
}