* {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

html, body {
    height: 100%;
}

body {
    margin: 0;
    font: 16px/1.3 sans-serif;
    
}


.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;
        background: #3fe7f1;
    }

        /* SLIDES */
        .CSSgal .slider img {
            margin-top: 85px;
            width:640px;
            height:480px;
        }

        .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;
            background-color: #87ae82;
        }
        
    /* 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 {
            background: #fff;
            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;
        }

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

            .CSSgal .prevNext a + a {
                left: auto;
                right: 0;
            }

    /* 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; */
                background: #96cdc8 !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);
}
#s6:target ~ .bullets > *:nth-child(6) {
    background: rgba(255, 255, 255, 1);
}
#s7:target ~ .bullets > *:nth-child(7) {
    background: rgba(255, 255, 255, 1);
}
#s8:target ~ .bullets > *:nth-child(8) {
    background: rgba(255, 255, 255, 1);
}
#s9:target ~ .bullets > *:nth-child(9) {
    background: rgba(255, 255, 255, 1);
}
#s10:target ~ .bullets > *:nth-child(10) {
    background: rgba(255, 255, 255, 1);
}
#s11:target ~ .bullets > *:nth-child(11) {
    background: rgba(255, 255, 255, 1);
}
#s12:target ~ .bullets > *:nth-child(12) {
    background: rgba(255, 255, 255, 1);
}
#s13:target ~ .bullets > *:nth-child(13) {
    background: rgba(255, 255, 255, 1);
}
#s14:target ~ .bullets > *:nth-child(14) {
    background: rgba(255, 255, 255, 1);
}
#s15:target ~ .bullets > *:nth-child(15) {
    background: rgba(255, 255, 255, 1);
}
#s16:target ~ .bullets > *:nth-child(16) {
    background: rgba(255, 255, 255, 1);
}
#s17:target ~ .bullets > *:nth-child(17) {
    background: rgba(255, 255, 255, 1);
}
#s18:target ~ .bullets > *:nth-child(18) {
    background: rgba(255, 255, 255, 1);
}
#s19:target ~ .bullets > *:nth-child(19) {
    background: rgba(255, 255, 255, 1);
}
#s20:target ~ .bullets > *:nth-child(20) {
    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;
}
#s6:target ~ .prevNext > *:nth-child(6) {
    visibility: visible;
}
#s7:target ~ .prevNext > *:nth-child(7) {
    visibility: visible;
}
#s8:target ~ .prevNext > *:nth-child(8) {
    visibility: visible;
}
#s9:target ~ .prevNext > *:nth-child(9) {
    visibility: visible;
}
#s10:target ~ .prevNext > *:nth-child(10) {
    visibility: visible;
}
#s11:target ~ .prevNext > *:nth-child(11) {
    visibility: visible;
}
#s12:target ~ .prevNext > *:nth-child(12) {
    visibility: visible;
}
#s13:target ~ .prevNext > *:nth-child(13) {
    visibility: visible;
}
#s14:target ~ .prevNext > *:nth-child(14) {
    visibility: visible;
}
#s15:target ~ .prevNext > *:nth-child(15) {
    visibility: visible;
}
#s16:target ~ .prevNext > *:nth-child(16) {
    visibility: visible;
}
#s17:target ~ .prevNext > *:nth-child(17) {
    visibility: visible;
}
#s18:target ~ .prevNext > *:nth-child(18) {
    visibility: visible;
}
#s19:target ~ .prevNext > *:nth-child(19) {
    visibility: visible;
}
#s20:target ~ .prevNext > *:nth-child(20) {
    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(-400%);
    -webkit-transform: translateX(-400%);
}
#s6:target ~ .slider {
    transform: translateX(-500%);
    -webkit-transform: translateX(-500%);
}
#s7:target ~ .slider {
    transform: translateX(-600%);
    -webkit-transform: translateX(-600%);
}
#s8:target ~ .slider {
    transform: translateX(-700%);
    -webkit-transform: translateX(-700%);
}
#s9:target ~ .slider {
    transform: translateX(-800%);
    -webkit-transform: translateX(-800%);
}
#s10:target ~ .slider {
    transform: translateX(-900%);
    -webkit-transform: translateX(-900%);
}
#s11:target ~ .slider {
    transform: translateX(-1000%);
    -webkit-transform: translateX(-1000%);
}
#s12:target ~ .slider {
    transform: translateX(-1100%);
    -webkit-transform: translateX(-1100%);
}
#s13:target ~ .slider {
    transform: translateX(-1200%);
    -webkit-transform: translateX(-1200%);
}
#s14:target ~ .slider {
    transform: translateX(-1300%);
    -webkit-transform: translateX(-1300%);
}
#s15:target ~ .slider {
    transform: translateX(-1400%);
    -webkit-transform: translateX(-1400%);
}
#s16:target ~ .slider {
    transform: translateX(-1500%);
    -webkit-transform: translateX(-1500%);
}
#s17:target ~ .slider {
    transform: translateX(-1600%);
    -webkit-transform: translateX(-1600%);
}
#s18:target ~ .slider {
    transform: translateX(-1700%);
    -webkit-transform: translateX(-1700%);
}
#s19:target ~ .slider {
    transform: translateX(-1800%);
    -webkit-transform: translateX(-1800%);
}
#s20:target ~ .slider {
    transform: translateX(-1900%);
    -webkit-transform: translateX(-1900%);
}


    /* 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 {
        font-family:'Trebuchet MS', 'Tahoma';
        margin-top: 5vh;
        font-weight: 100;
        letter-spacing: -0.01em;
        word-spacing: 0.2em;
        font-size: 14;
    }
    .CSSgal a {
        border-radius: 50%;
        margin: 0 3px;
        color: rgba(0,0,0,0.8);
        text-decoration: none;
    }