/* 
    Handcoded by JAC - Johnny Alimoot C.
*/
:root{
    --slideImage1: url('../art/hdd_1.png');
    --slideImage2: url('../art/hdd_2.png');
    --slideImage3: url('../art/hdd_3.png');
    --slideImage4: url('../art/hdd_4.png');
}

@-webkit-keyframes hero-slideshow {
    0%{ background-size: 100%; }

    /* 1. Görsel */
    0%, 15% {
        background-image: var(--slideImage1);
    }

    /* 2. Görsel */
    18%, 35% {
        background-image: var(--slideImage2);
    }

    50%{ background-size: 150%; }

    /* 3. Görsel */
    51%, 68% {
        background-image: var(--slideImage3);
    }

    /* 4. Görsel – yeni eklendi */
    70%, 90% {
        background-image: var(--slideImage4);
    }

    /* Döngü tekrar 1. görsele dönüyor */
    92%, 100% {
        background-image: var(--slideImage1);
    }

    100%{ background-size: 100%; }
}


@-moz-keyframes hero-slideshow {
    0%{ background-size: 100%; }

    /* 1. Görsel */
    0%, 15% {
        background-image: var(--slideImage1);
    }

    /* 2. Görsel */
    18%, 35% {
        background-image: var(--slideImage2);
    }

    50%{ background-size: 150%; }

    /* 3. Görsel */
    51%, 68% {
        background-image: var(--slideImage3);
    }

    /* 4. Görsel – yeni eklendi */
    70%, 90% {
        background-image: var(--slideImage4);
    }

    /* Döngü tekrar 1. görsele dönüyor */
    92%, 100% {
        background-image: var(--slideImage1);
    }

    100%{ background-size: 100%; }
}

@-o-keyframes hero-slideshow {
    0%{ background-size: 100%; }

    /* 1. Görsel */
    0%, 15% {
        background-image: var(--slideImage1);
    }

    /* 2. Görsel */
    18%, 35% {
        background-image: var(--slideImage2);
    }

    50%{ background-size: 150%; }

    /* 3. Görsel */
    51%, 68% {
        background-image: var(--slideImage3);
    }

    /* 4. Görsel – yeni eklendi */
    70%, 90% {
        background-image: var(--slideImage4);
    }

    /* Döngü tekrar 1. görsele dönüyor */
    92%, 100% {
        background-image: var(--slideImage1);
    }

    100%{ background-size: 100%; }
}

@keyframes hero-slideshow {
    0%{ background-size: 100%; }

    /* 1. Görsel */
    0%, 15% {
        background-image: var(--slideImage1);
    }

    /* 2. Görsel */
    18%, 35% {
        background-image: var(--slideImage2);
    }

    50%{ background-size: 150%; }

    /* 3. Görsel */
    51%, 68% {
        background-image: var(--slideImage3);
    }

    /* 4. Görsel – yeni eklendi */
    70%, 90% {
        background-image: var(--slideImage4);
    }

    /* Döngü tekrar 1. görsele dönüyor */
    92%, 100% {
        background-image: var(--slideImage1);
    }

    100%{ background-size: 100%; }
}

@-webkit-keyframes fade {
    0%{ opacity: 1; }
    50%{ opacity: 1; }
    100%{ opacity: 0; }
}

@-moz-keyframes fade {
    0%{ opacity: 1; }
    50%{ opacity: 1; }
    100%{ opacity: 0; }
}

@-o-keyframes fade {
    0%{ opacity: 1; }
    50%{ opacity: 1; }
    100%{ opacity: 0; }
}

@keyframes fade {
    0%{ opacity: 1; }
    50%{ opacity: 1; }
    100%{ opacity: 0; }
}



@media only screen and (max-width: 992px) {
    @-webkit-keyframes  hero-slideshow {
    0%{ background-size: 100%; }

    /* 1. Görsel */
    0%, 15% {
        background-image: var(--slideImage1);
    }

    /* 2. Görsel */
    18%, 35% {
        background-image: var(--slideImage2);
    }

    50%{ background-size: 150%; }

    /* 3. Görsel */
    51%, 68% {
        background-image: var(--slideImage3);
    }

    /* 4. Görsel – yeni eklendi */
    70%, 90% {
        background-image: var(--slideImage4);
    }

    /* Döngü tekrar 1. görsele dönüyor */
    92%, 100% {
        background-image: var(--slideImage1);
    }

    100%{ background-size: 100%; }
}
    @-moz-keyframes  hero-slideshow {
    0%{ background-size: 100%; }

    /* 1. Görsel */
    0%, 15% {
        background-image: var(--slideImage1);
    }

    /* 2. Görsel */
    18%, 35% {
        background-image: var(--slideImage2);
    }

    50%{ background-size: 150%; }

    /* 3. Görsel */
    51%, 68% {
        background-image: var(--slideImage3);
    }

    /* 4. Görsel – yeni eklendi */
    70%, 90% {
        background-image: var(--slideImage4);
    }

    /* Döngü tekrar 1. görsele dönüyor */
    92%, 100% {
        background-image: var(--slideImage1);
    }

    100%{ background-size: 100%; }
}
    @-o-keyframes  hero-slideshow {
    0%{ background-size: 100%; }

    /* 1. Görsel */
    0%, 15% {
        background-image: var(--slideImage1);
    }

    /* 2. Görsel */
    18%, 35% {
        background-image: var(--slideImage2);
    }

    50%{ background-size: 150%; }

    /* 3. Görsel */
    51%, 68% {
        background-image: var(--slideImage3);
    }

    /* 4. Görsel – yeni eklendi */
    70%, 90% {
        background-image: var(--slideImage4);
    }

    /* Döngü tekrar 1. görsele dönüyor */
    92%, 100% {
        background-image: var(--slideImage1);
    }

    100%{ background-size: 100%; }
}
    @keyframes  hero-slideshow {
    0%{ background-size: 100%; }

    /* 1. Görsel */
    0%, 15% {
        background-image: var(--slideImage1);
    }

    /* 2. Görsel */
    18%, 35% {
        background-image: var(--slideImage2);
    }

    50%{ background-size: 150%; }

    /* 3. Görsel */
    51%, 68% {
        background-image: var(--slideImage3);
    }

    /* 4. Görsel – yeni eklendi */
    70%, 90% {
        background-image: var(--slideImage4);
    }

    /* Döngü tekrar 1. görsele dönüyor */
    92%, 100% {
        background-image: var(--slideImage1);
    }

    100%{ background-size: 100%; }
}
    
}