#cssslider {
    position: relative;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
}

.csssld1, .csssld2, .csssld3, .csssld4, .csssld5 {
    position: absolute;
    background-repeat: no-repeat;
    background-position: center center;
    width: 100%;
    height: 100%;
    z-index: -1;
    background-size: cover;
}

    .csssld1 img, .csssld2 img, .csssld3 img, .csssld4 img, .csssld5 img {
        position: fixed;
        z-index: -9999;
        top: -5000px;
    }

.csssld1 {
    background-image: url(/images/projeler/arena-park-avm/arena-park-avm-02.jpg);
}

.csssld2 {
    background-image: url(/images/projeler/nef/atakoy/atakoy-nef-03.jpg);
}

.csssld3 {
    background-image: url(/images/projeler/sinanoba/sinanoba-05.jpeg);
}

.csssld4 {
    background-image: url(/images/projeler/halkali/halkali-05.jpeg);
}

.csssld5 {
    background-image: url(/images/projeler/okul/florya/florya-aydin-universitesi-03.jpg);
}


@-webkit-keyframes csssld1 {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 1;
    }
    /* 1-1 */
    20% {
        opacity: 0;
    }
    /* 1-0 */
    30% {
        opacity: 0;
    }
    /* 2-1 */
    40% {
        opacity: 0;
    }
    /* 2-0 */
    50% {
        opacity: 0;
    }
    /* 3-0 */
    60% {
        opacity: 0;
    }
    /* 3-1 */
    70% {
        opacity: 0;
    }
    /* 4-1 */
    80% {
        opacity: 0;
    }
    /* 4-0 */
    90% {
        opacity: 0;
    }
    /* 5-1 */
    100% {
        opacity: 1;
    }
    /* 5-0 */
}

@keyframes csssld1 {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 1;
    }
    /* 1-1 */
    20% {
        opacity: 0;
    }
    /* 1-0 */
    30% {
        opacity: 0;
    }
    /* 2-1 */
    40% {
        opacity: 0;
    }
    /* 2-0 */
    50% {
        opacity: 0;
    }
    /* 3-0 */
    60% {
        opacity: 0;
    }
    /* 3-1 */
    70% {
        opacity: 0;
    }
    /* 4-1 */
    80% {
        opacity: 0;
    }
    /* 4-0 */
    90% {
        opacity: 0;
    }
    /* 5-1 */
    100% {
        opacity: 1;
    }
    /* 5-0 */
}

.csssld1 {
    -webkit-animation-name: csssld1;
    animation-name: csssld1;
    -webkit-animation-duration: 50s !important;
    -moz-animation-duration: 50s !important;
    -o-animation-duration: 50s !important;
    animation-duration: 50s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes csssld2 {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 1;
    }
    /* 1-1 */
    20% {
        opacity: 1;
    }
    /* 1-0 */
    30% {
        opacity: 1;
    }
    /* 2-1 */
    40% {
        opacity: 0;
    }
    /* 2-0 */
    50% {
        opacity: 0;
    }
    /* 3-0 */
    60% {
        opacity: 0;
    }
    /* 3-1 */
    70% {
        opacity: 0;
    }
    /* 4-1 */
    80% {
        opacity: 0;
    }
    /* 4-0 */
    90% {
        opacity: 0;
    }
    /* 5-1 */
    100% {
        opacity: 0;
    }
    /* 5-0 */
}

@keyframes csssld2 {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 1;
    }
    /* 1-1 */
    20% {
        opacity: 1;
    }
    /* 1-0 */
    30% {
        opacity: 1;
    }
    /* 2-1 */
    40% {
        opacity: 0;
    }
    /* 2-0 */
    50% {
        opacity: 0;
    }
    /* 3-0 */
    60% {
        opacity: 0;
    }
    /* 3-1 */
    70% {
        opacity: 0;
    }
    /* 4-1 */
    80% {
        opacity: 0;
    }
    /* 4-0 */
    90% {
        opacity: 0;
    }
    /* 5-1 */
    100% {
        opacity: 0;
    }
    /* 5-0 */
}

.csssld2 {
    -webkit-animation-name: csssld2;
    animation-name: csssld2;
    -webkit-animation-duration: 50s !important;
    -moz-animation-duration: 50s !important;
    -o-animation-duration: 50s !important;
    animation-duration: 50s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes csssld3 {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 1;
    }
    /* 1-1 */
    20% {
        opacity: 1;
    }
    /* 1-0 */
    30% {
        opacity: 1;
    }
    /* 2-1 */
    40% {
        opacity: 1;
    }
    /* 2-0 */
    50% {
        opacity: 1;
    }
    /* 3-1 */
    60% {
        opacity: 0;
    }
    /* 3-0 */
    70% {
        opacity: 0;
    }
    /* 4-1 */
    80% {
        opacity: 0;
    }
    /* 4-0 */
    90% {
        opacity: 0;
    }
    /* 5-1 */
    100% {
        opacity: 0;
    }
    /* 5-0 */
}

@keyframes csssld3 {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 1;
    }
    /* 1-1 */
    20% {
        opacity: 1;
    }
    /* 1-0 */
    30% {
        opacity: 1;
    }
    /* 2-1 */
    40% {
        opacity: 1;
    }
    /* 2-0 */
    50% {
        opacity: 1;
    }
    /* 3-1 */
    60% {
        opacity: 0;
    }
    /* 3-0 */
    70% {
        opacity: 0;
    }
    /* 4-1 */
    80% {
        opacity: 0;
    }
    /* 4-0 */
    90% {
        opacity: 0;
    }
    /* 5-1 */
    100% {
        opacity: 0;
    }
    /* 5-0 */
}

.csssld3 {
    -webkit-animation-name: csssld3;
    animation-name: csssld3;
    -webkit-animation-duration: 50s !important;
    -moz-animation-duration: 50s !important;
    -o-animation-duration: 50s !important;
    animation-duration: 50s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes csssld4 {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 1;
    }
    /* 1-1 */
    20% {
        opacity: 1;
    }
    /* 1-0 */
    30% {
        opacity: 1;
    }
    /* 2-1 */
    40% {
        opacity: 1;
    }
    /* 2-0 */
    50% {
        opacity: 1;
    }
    /* 3-0 */
    60% {
        opacity: 1;
    }
    /* 3-1 */
    70% {
        opacity: 1;
    }
    /* 4-1 */
    80% {
        opacity: 0;
    }
    /* 4-0 */
    90% {
        opacity: 0;
    }
    /* 5-1 */
    100% {
        opacity: 0;
    }
    /* 5-0 */
}

@keyframes csssld4 {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 1;
    }
    /* 1-1 */
    20% {
        opacity: 1;
    }
    /* 1-0 */
    30% {
        opacity: 1;
    }
    /* 2-1 */
    40% {
        opacity: 1;
    }
    /* 2-0 */
    50% {
        opacity: 1;
    }
    /* 3-0 */
    60% {
        opacity: 1;
    }
    /* 3-1 */
    70% {
        opacity: 1;
    }
    /* 4-1 */
    80% {
        opacity: 0;
    }
    /* 4-0 */
    90% {
        opacity: 0;
    }
    /* 5-1 */
    100% {
        opacity: 0;
    }
    /* 5-0 */
}

.csssld4 {
    -webkit-animation-name: csssld4;
    animation-name: csssld4;
    -webkit-animation-duration: 50s !important;
    -moz-animation-duration: 50s !important;
    -o-animation-duration: 50s !important;
    animation-duration: 50s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

@-webkit-keyframes csssld5 {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 1;
    }
    /* 1-1 */
    20% {
        opacity: 1;
    }
    /* 1-0 */
    30% {
        opacity: 1;
    }
    /* 2-1 */
    40% {
        opacity: 1;
    }
    /* 2-0 */
    50% {
        opacity: 1;
    }
    /* 3-0 */
    60% {
        opacity: 1;
    }
    /* 3-1 */
    70% {
        opacity: 1;
    }
    /* 4-1 */
    80% {
        opacity: 1;
    }
    /* 4-0 */
    90% {
        opacity: 1;
    }
    /* 5-1 */
    100% {
        opacity: 0;
    }
    /* 5-0 */
}

@keyframes csssld5 {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 1;
    }
    /* 1-1 */
    20% {
        opacity: 1;
    }
    /* 1-0 */
    30% {
        opacity: 1;
    }
    /* 2-1 */
    40% {
        opacity: 1;
    }
    /* 2-0 */
    50% {
        opacity: 1;
    }
    /* 3-0 */
    60% {
        opacity: 1;
    }
    /* 3-1 */
    70% {
        opacity: 1;
    }
    /* 4-1 */
    80% {
        opacity: 1;
    }
    /* 4-0 */
    90% {
        opacity: 1;
    }
    /* 5-1 */
    100% {
        opacity: 0;
    }
    /* 5-0 */
}

.csssld5 {
    -webkit-animation-name: csssld5;
    animation-name: csssld5;
    -webkit-animation-duration: 50s !important;
    -moz-animation-duration: 50s !important;
    -o-animation-duration: 50s !important;
    animation-duration: 50s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}